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

UI for React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _Surface = _interopRequireDefault(require("../Surface"));
var _Interaction = _interopRequireDefault(require("../Interaction"));
var _Type = _interopRequireDefault(require("../Type"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
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) { (0, _defineProperty2.default)(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; }
const useStyle = (0, _styleReact.style)(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_ => {
  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _type, _type2, _type3, _type4, _type5, _type6, _props, _props2, _props3, _type7, _type8, _type9, _type0, _type1, _type10, _type11, _props4, _props5, _props6, _type12;
  const theme = (0, _styleReact.useOnesyTheme)();
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyListItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
  const Interaction = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Interaction) || _Interaction.default;
  const Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
  const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
  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 = (0, _objectWithoutProperties2.default)(props, _excluded);
  const {
    classes
  } = useStyle();
  const refs = {
    root: _react.default.useRef(undefined),
    props: _react.default.useRef(undefined),
    ids: {
      primary: _react.default.useId(),
      secondary: _react.default.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__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread(_objectSpread({
    ref: item => {
      if (ref) {
        if ((0, _utils.is)('function', ref)) ref(item);else if (ref !== null && ref !== void 0 && 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: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-wrapper'], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, className, classes.wrapper, fullWidth && classes.wrapper_fullWidth, noBackground && classes.noBackground]),
    noOutline: noOutline,
    style: _objectSpread(_objectSpread({}, styles.wrapper), WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.style)
  }, other), {}, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(RootComponent, _objectSpread(_objectSpread({
      href: href,
      onClick: onClick,
      onFocus: onFocus,
      onBlur: onBlur,
      onMouseEnter: onMouseEnter,
      onMouseLeave: onMouseLeave
    }, RootProps), {}, {
      className: (0, _styleReact.classNames)([(0, _utils2.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 === null || RootProps === void 0 ? void 0 : 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__*/(0, _jsxRuntime.jsx)(Interaction, _objectSpread({
        border: false,
        preselected: (InteractionProps === null || InteractionProps === void 0 ? void 0 : InteractionProps.focus) || preselected || undefined,
        selected: selected,
        disabled: disabled
      }, InteractionProps)), start && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread(_objectSpread({}, AsideProps), AsideStartProps), {}, {
        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-aside', 'onesy-ListItem-start', `onesy-ListItem-start-${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start === null || start === void 0 || (_type = start.type) === null || _type === void 0 ? void 0 : _type.displayName) ? 'button' : ['onesy-Switch'].includes(start === null || start === void 0 || (_type2 = start.type) === null || _type2 === void 0 ? void 0 : _type2.displayName) ? 'switch' : 'icon'}`], AsideProps === null || AsideProps === void 0 ? void 0 : AsideProps.className, AsideStartProps === null || AsideStartProps === void 0 ? void 0 : AsideStartProps.className, classes.aside, classes.start, classes[`align_${startAlign}`], classes[`${menuItem ? 'menuItem_' : ''}start_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start === null || start === void 0 || (_type3 = start.type) === null || _type3 === void 0 ? void 0 : _type3.displayName) ? 'button' : ['onesy-Switch'].includes(start === null || start === void 0 || (_type4 = start.type) === null || _type4 === void 0 ? void 0 : _type4.displayName) ? 'switch' : 'icon'}`], classes[`${menuItem ? 'menuItem_' : ''}start_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start === null || start === void 0 || (_type5 = start.type) === null || _type5 === void 0 ? void 0 : _type5.displayName) ? 'button' : ['onesy-Switch'].includes(start === null || start === void 0 || (_type6 = start.type) === null || _type6 === void 0 ? void 0 : _type6.displayName) ? 'switch' : 'icon'}_size_${size}`]]),
        children: (0, _utils.is)('string', start) ? start : /*#__PURE__*/_react.default.cloneElement(start, {
          color: ((_props = start.props) === null || _props === void 0 ? void 0 : _props.color) || 'inherit',
          size: ((_props2 = start.props) === null || _props2 === void 0 ? void 0 : _props2.size) !== undefined ? (_props3 = start.props) === null || _props3 === void 0 ? void 0 : _props3.size : ['onesy-Switch'].includes(start === null || start === void 0 || (_type7 = start.type) === null || _type7 === void 0 ? void 0 : _type7.displayName) ? 'small' : 'regular',
          disabled
        })
      })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", _objectSpread(_objectSpread({}, MainProps), {}, {
        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-middle'], MainProps === null || MainProps === void 0 ? void 0 : MainProps.className, classes.middle, menuItem && classes.menuItem_middle, disabled && classes.middle_disabled]),
        children: [primary !== undefined && ((0, _utils.is)('simple', primary) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
          version: "b2",
          id: refs.ids.primary
        }, PrimaryProps), {}, {
          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-primary'], PrimaryProps === null || PrimaryProps === void 0 ? void 0 : PrimaryProps.className, classes.text, classes.text_primary, !menuItem && classes.text_primary_weight]),
          style: _objectSpread(_objectSpread({}, styles.primary), PrimaryProps === null || PrimaryProps === void 0 ? void 0 : PrimaryProps.style),
          children: primary
        })) : /*#__PURE__*/_react.default.cloneElement(primary, {
          id: refs.ids.primary
        })), secondary !== undefined && ((0, _utils.is)('simple', secondary) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
          version: "b2",
          id: refs.ids.secondary
        }, SecondaryProps), {}, {
          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-secondary'], SecondaryProps === null || SecondaryProps === void 0 ? void 0 : SecondaryProps.className, classes.text, classes.text_secondary]),
          style: _objectSpread(_objectSpread({}, styles.secondary), SecondaryProps === null || SecondaryProps === void 0 ? void 0 : SecondaryProps.style),
          children: secondary
        })) : /*#__PURE__*/_react.default.cloneElement(secondary, {
          id: refs.ids.secondary
        })), tertiary !== undefined && ((0, _utils.is)('simple', tertiary) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
          version: "b2"
        }, TertiaryProps), {}, {
          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-tertiary'], TertiaryProps === null || TertiaryProps === void 0 ? void 0 : TertiaryProps.className, classes.text, classes.text_tertiary]),
          style: _objectSpread(_objectSpread({}, styles.tertiary), TertiaryProps === null || TertiaryProps === void 0 ? void 0 : TertiaryProps.style),
          children: tertiary
        })) : tertiary)]
      })), end && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread(_objectSpread({}, AsideProps), AsideEndProps), {}, {
        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-aside', 'onesy-ListItem-end', `onesy-ListItem-end-${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end === null || end === void 0 || (_type8 = end.type) === null || _type8 === void 0 ? void 0 : _type8.displayName) ? 'button' : ['onesy-Switch'].includes(end === null || end === void 0 || (_type9 = end.type) === null || _type9 === void 0 ? void 0 : _type9.displayName) ? 'switch' : 'icon'}`], AsideProps === null || AsideProps === void 0 ? void 0 : AsideProps.className, AsideEndProps === null || AsideEndProps === void 0 ? void 0 : AsideEndProps.classname, classes.aside, classes.end, classes[`align_${endAlign}`], classes[`${menuItem ? 'menuItem_' : ''}end_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end === null || end === void 0 || (_type0 = end.type) === null || _type0 === void 0 ? void 0 : _type0.displayName) ? 'button' : ['onesy-Switch'].includes(end === null || end === void 0 || (_type1 = end.type) === null || _type1 === void 0 ? void 0 : _type1.displayName) ? 'switch' : 'icon'}`], classes[`${menuItem ? 'menuItem_' : ''}end_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end === null || end === void 0 || (_type10 = end.type) === null || _type10 === void 0 ? void 0 : _type10.displayName) ? 'button' : ['onesy-Switch'].includes(end === null || end === void 0 || (_type11 = end.type) === null || _type11 === void 0 ? void 0 : _type11.displayName) ? 'switch' : 'icon'}_size_${size}`]]),
        children: (0, _utils.is)('string', end) ? end : /*#__PURE__*/_react.default.cloneElement(end, {
          color: ((_props4 = end.props) === null || _props4 === void 0 ? void 0 : _props4.color) || 'inherit',
          size: ((_props5 = end.props) === null || _props5 === void 0 ? void 0 : _props5.size) !== undefined ? (_props6 = end.props) === null || _props6 === void 0 ? void 0 : _props6.size : ['onesy-Switch'].includes(end === null || end === void 0 || (_type12 = end.type) === null || _type12 === void 0 ? void 0 : _type12.displayName) ? 'small' : 'regular',
          disabled
        })
      }))]
    })), footer]
  }));
};
ListItem.displayName = 'onesy-ListItem';
var _default = exports.default = ListItem;