@onesy/ui-react/esm/ListItem/ListItem.js

UI for React

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["ref", "tonal", "color", "colorSelected", "inset", "primary", "secondary", "tertiary", "preselected", "selected", "start", "startAlign", "end", "endAlign", "size", "noPadding", "href", "button", "shape", "shapePosition", "menuItem", "footer", "tabIndex", "interaction", "fullWidth", "noOutline", "noBackground", "disabled", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "onClose", "RootComponent", "WrapperProps", "RootProps", "InteractionProps", "PrimaryProps", "SecondaryProps", "TertiaryProps", "MainProps", "AsideProps", "AsideStartProps", "AsideEndProps", "Component", "className", "style", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { is } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import SurfaceElement from '../Surface';
import InteractionElement from '../Interaction';
import TypeElement from '../Type';
import { staticClassName } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const useStyle = styleMethod(theme => {
  const overflow = {
    width: '100%',
    overflow: 'hidden',
    textOverflow: 'ellipsis'
  };
  return {
    wrapper: {},
    wrapper_fullWidth: {
      width: '100%'
    },
    root: {
      // Reset
      margin: '0',
      padding: '0',
      '-webkit-appearance': 'none',
      appearance: 'none',
      border: 'none',
      textDecoration: 'none',
      color: 'inherit',
      boxSizing: 'border-box',
      position: 'relative',
      display: 'inline-flex',
      width: '100%'
    },
    shape_round_position_both: {
      borderRadius: theme.methods.shape.radius.value(40, 'px')
    },
    shape_round_position_start: {
      borderEndStartRadius: theme.methods.shape.radius.value(40, 'px'),
      borderStartStartRadius: theme.methods.shape.radius.value(40, 'px')
    },
    shape_round_position_end: {
      borderStartEndRadius: theme.methods.shape.radius.value(40, 'px'),
      borderEndEndRadius: theme.methods.shape.radius.value(40, 'px')
    },
    shape_round_position_none: {
      borderRadius: '0'
    },
    button: {
      cursor: 'pointer',
      userSelect: 'none'
    },
    size_small: {
      padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1.5, 'px')}`,
      minHeight: '24px'
    },
    size_regular: {
      padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(2, 'px')}`,
      minHeight: '40px'
    },
    size_large: {
      padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(2.5, 'px')}`,
      minHeight: '56px'
    },
    menuItem_size_small: {
      padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1.5, 'px')}`
    },
    menuItem_size_regular: {
      padding: `${theme.methods.space.value(0.75, 'px')} ${theme.methods.space.value(2, 'px')}`
    },
    menuItem_size_large: {
      padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2.5, 'px')}`
    },
    inset_size_small: {
      paddingInlineStart: `${(56 + theme.methods.space.value('rg')) * 0.75}px`
    },
    inset_size_regular: {
      paddingInlineStart: `${56 + theme.methods.space.value('rg')}px`
    },
    inset_size_large: {
      paddingInlineStart: `${(56 + theme.methods.space.value('rg')) * 1.25}px`
    },
    menuItem_inset_size_small: {
      paddingInlineStart: theme.methods.space.value(7, 'px')
    },
    menuItem_inset_size_regular: {
      paddingInlineStart: theme.methods.space.value(7, 'px')
    },
    menuItem_inset_size_large: {
      paddingInlineStart: theme.methods.space.value(7, 'px')
    },
    middle: {
      position: 'relative',
      display: 'inline-flex',
      flex: '1 1 auto',
      width: '100%',
      flexDirection: 'column',
      // Fix for white-space: nowrap & flex: 1 1 auto
      minWidth: '0',
      alignSelf: 'center'
    },
    menuItem_middle: {
      marginInlineEnd: '44px'
    },
    text: _objectSpread(_objectSpread({}, overflow), {}, {
      whiteSpace: 'pre-wrap',
      textAlign: 'start'
    }),
    text_primary: {
      opacity: '1'
    },
    text_primary_weight: {
      fontWeight: '500'
    },
    text_secondary: {
      opacity: theme.palette.visual_contrast.default.opacity.primary
    },
    text_tertiary: {
      opacity: theme.palette.visual_contrast.default.opacity.secondary
    },
    aside: {
      position: 'relative',
      display: 'inline-flex',
      flex: '0 0 auto',
      alignSelf: 'flex-start'
    },
    align_start: {
      alignSelf: 'flex-start'
    },
    align_center: {
      alignSelf: 'center'
    },
    align_end: {
      alignSelf: 'flex-end'
    },
    start_icon: {
      paddingInline: `0 ${theme.methods.space.value(1.5, 'px')}`
    },
    start_button: {
      paddingInline: `0 ${theme.methods.space.value(1.5, 'px')}`
    },
    start_switch: {
      paddingInline: `0 ${theme.methods.space.value(1.5, 'px')}`
    },
    menuItem_start_icon_size_small: {
      paddingInlineEnd: theme.methods.space.value(1.5, 'px')
    },
    menuItem_start_icon_size_regular: {
      paddingInlineEnd: theme.methods.space.value(2, 'px')
    },
    menuItem_start_icon_size_large: {
      paddingInlineEnd: theme.methods.space.value(2.5, 'px')
    },
    menuItem_start_button_size_small: {
      paddingInlineEnd: theme.methods.space.value(1.5, 'px')
    },
    menuItem_start_button_size_regular: {
      paddingInlineEnd: theme.methods.space.value(2, 'px')
    },
    menuItem_start_button_size_large: {
      paddingInlineEnd: theme.methods.space.value(2.5, 'px')
    },
    menuItem_start_switch_size_small: {
      paddingInlineEnd: theme.methods.space.value(1.5, 'px')
    },
    menuItem_start_switch_size_regular: {
      paddingInlineEnd: theme.methods.space.value(2, 'px')
    },
    menuItem_start_switch_size_large: {
      paddingInlineEnd: theme.methods.space.value(2.5, 'px')
    },
    end_icon: {
      paddingInlineStart: theme.methods.space.value(1.5, 'px'),
      paddingInlineEnd: theme.methods.space.value(1, 'px')
    },
    end_button: {
      paddingInlineStart: theme.methods.space.value(1.5, 'px'),
      paddingInlineEnd: '0'
    },
    end_switch: {
      paddingInlineStart: theme.methods.space.value(1.5, 'px'),
      paddingInlineEnd: '0'
    },
    menuItem_end_icon: {
      paddingInlineStart: theme.methods.space.value(1.5, 'px')
    },
    menuItem_end_button: {
      paddingInlineStart: theme.methods.space.value(1.5, 'px')
    },
    menuItem_end_switch: {
      paddingInlineStart: theme.methods.space.value(1.5, 'px')
    },
    middle_disabled: {
      opacity: theme.palette.visual_contrast.default.opacity.disabled
    },
    noPadding: {
      padding: '0px'
    },
    noBackground: {
      '&.onesy-Surface-root': {
        background: 'none'
      }
    },
    disabled: {
      pointerEvents: 'none',
      userSelect: 'none',
      cursor: 'default'
    }
  };
}, {
  name: 'onesy-ListItem'
});
const ListItem = props_ => {
  const theme = useOnesyTheme();
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyListItem?.props?.default), props_);
  const Interaction = theme?.elements?.Interaction || InteractionElement;
  const Surface = theme?.elements?.Surface || SurfaceElement;
  const Type = theme?.elements?.Type || TypeElement;
  const {
      ref,
      tonal = true,
      color = 'default',
      colorSelected = props.color,
      inset,
      primary = props.children,
      secondary,
      tertiary,
      preselected,
      selected,
      start,
      startAlign = 'center',
      end,
      endAlign = 'center',
      size = 'regular',
      noPadding,
      href,
      button,
      shape = 'round',
      shapePosition = 'none',
      menuItem,
      footer,
      tabIndex,
      interaction,
      fullWidth = true,
      noOutline,
      noBackground,
      disabled,
      onClick,
      onFocus,
      onBlur,
      onMouseEnter,
      onMouseLeave,
      onClose: onClose_,
      RootComponent: RootComponent_ = 'div',
      WrapperProps,
      RootProps,
      InteractionProps,
      PrimaryProps,
      SecondaryProps,
      TertiaryProps,
      MainProps,
      AsideProps,
      AsideStartProps,
      AsideEndProps,
      Component = 'li',
      className,
      style,
      children
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const {
    classes
  } = useStyle();
  const refs = {
    root: React.useRef(undefined),
    props: React.useRef(undefined),
    ids: {
      primary: React.useId(),
      secondary: React.useId()
    }
  };
  refs.props.current = props;
  const styles = {
    root: {},
    icon: {
      color: 'default'
    },
    wrapper: {},
    primary: {},
    secondary: {},
    tertiary: {}
  };
  let RootComponent = RootComponent_;
  if (href) RootComponent = 'a';
  const colorToUse = selected ? colorSelected : color;
  return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread(_objectSpread({
    ref: item => {
      if (ref) {
        if (is('function', ref)) ref(item);else if (ref?.current) ref.current = item;
      }
      refs.root.current = item;
    },
    tonal: tonal,
    color: colorToUse,
    tabIndex: tabIndex !== undefined ? tabIndex : button && !disabled ? 0 : undefined,
    "aria-labelledby": refs.ids.primary,
    "aria-describedby": refs.ids.secondary,
    "aria-selected": selected,
    Component: Component
  }, WrapperProps), {}, {
    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-wrapper'], WrapperProps?.className, className, classes.wrapper, fullWidth && classes.wrapper_fullWidth, noBackground && classes.noBackground]),
    noOutline: noOutline,
    style: _objectSpread(_objectSpread({}, styles.wrapper), WrapperProps?.style)
  }, other), {}, {
    children: [/*#__PURE__*/_jsxs(RootComponent, _objectSpread(_objectSpread({
      href: href,
      onClick: onClick,
      onFocus: onFocus,
      onBlur: onBlur,
      onMouseEnter: onMouseEnter,
      onMouseLeave: onMouseLeave
    }, RootProps), {}, {
      className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-root', `onesy-ListItem-size-${size}`, preselected && `onesy-ListItem-preselected`, selected && `onesy-ListItem-selected`, disabled && `onesy-ListItem-disabled`, inset && !start && `onesy-ListItem-inset`], RootProps?.className, classes.root, !menuItem && classes[`size_${size}`], classes[`shape_${shape}_position_${shapePosition}`], inset && !start && classes[`inset_size_${size}`], menuItem && [classes[`menuItem_size_${size}`], inset && classes[`menuItem_inset_size_${size}`]], (href || button) && classes.button, noPadding && classes.noPadding, disabled && classes.disabled]),
      style: _objectSpread(_objectSpread({}, style), styles.root),
      disabled: disabled,
      children: [(href || button || interaction) && /*#__PURE__*/_jsx(Interaction, _objectSpread({
        border: false,
        preselected: InteractionProps?.focus || preselected || undefined,
        selected: selected,
        disabled: disabled
      }, InteractionProps)), start && /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread(_objectSpread({}, AsideProps), AsideStartProps), {}, {
        className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-aside', 'onesy-ListItem-start', `onesy-ListItem-start-${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(start?.type?.displayName) ? 'switch' : 'icon'}`], AsideProps?.className, AsideStartProps?.className, classes.aside, classes.start, classes[`align_${startAlign}`], classes[`${menuItem ? 'menuItem_' : ''}start_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(start?.type?.displayName) ? 'switch' : 'icon'}`], classes[`${menuItem ? 'menuItem_' : ''}start_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(start?.type?.displayName) ? 'switch' : 'icon'}_size_${size}`]]),
        children: is('string', start) ? start : /*#__PURE__*/React.cloneElement(start, {
          color: start.props?.color || 'inherit',
          size: start.props?.size !== undefined ? start.props?.size : ['onesy-Switch'].includes(start?.type?.displayName) ? 'small' : 'regular',
          disabled
        })
      })), /*#__PURE__*/_jsxs("span", _objectSpread(_objectSpread({}, MainProps), {}, {
        className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-middle'], MainProps?.className, classes.middle, menuItem && classes.menuItem_middle, disabled && classes.middle_disabled]),
        children: [primary !== undefined && (is('simple', primary) ? /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
          version: "b2",
          id: refs.ids.primary
        }, PrimaryProps), {}, {
          className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-primary'], PrimaryProps?.className, classes.text, classes.text_primary, !menuItem && classes.text_primary_weight]),
          style: _objectSpread(_objectSpread({}, styles.primary), PrimaryProps?.style),
          children: primary
        })) : /*#__PURE__*/React.cloneElement(primary, {
          id: refs.ids.primary
        })), secondary !== undefined && (is('simple', secondary) ? /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
          version: "b2",
          id: refs.ids.secondary
        }, SecondaryProps), {}, {
          className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-secondary'], SecondaryProps?.className, classes.text, classes.text_secondary]),
          style: _objectSpread(_objectSpread({}, styles.secondary), SecondaryProps?.style),
          children: secondary
        })) : /*#__PURE__*/React.cloneElement(secondary, {
          id: refs.ids.secondary
        })), tertiary !== undefined && (is('simple', tertiary) ? /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
          version: "b2"
        }, TertiaryProps), {}, {
          className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-tertiary'], TertiaryProps?.className, classes.text, classes.text_tertiary]),
          style: _objectSpread(_objectSpread({}, styles.tertiary), TertiaryProps?.style),
          children: tertiary
        })) : tertiary)]
      })), end && /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread(_objectSpread({}, AsideProps), AsideEndProps), {}, {
        className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-aside', 'onesy-ListItem-end', `onesy-ListItem-end-${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(end?.type?.displayName) ? 'switch' : 'icon'}`], AsideProps?.className, AsideEndProps?.classname, classes.aside, classes.end, classes[`align_${endAlign}`], classes[`${menuItem ? 'menuItem_' : ''}end_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(end?.type?.displayName) ? 'switch' : 'icon'}`], classes[`${menuItem ? 'menuItem_' : ''}end_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(end?.type?.displayName) ? 'switch' : 'icon'}_size_${size}`]]),
        children: is('string', end) ? end : /*#__PURE__*/React.cloneElement(end, {
          color: end.props?.color || 'inherit',
          size: end.props?.size !== undefined ? end.props?.size : ['onesy-Switch'].includes(end?.type?.displayName) ? 'small' : 'regular',
          disabled
        })
      }))]
    })), footer]
  }));
};
ListItem.displayName = 'onesy-ListItem';
export default ListItem;