@s-ui/react-molecule-dropdown-option/lib/index.js

`MoleculeDropdownOption` is a component that wraps a composition of checkbox + text.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["checkbox", "checkboxProps", "children", "disabled", "highlightQuery", "highlightValue", "innerRef", "leftAddon", "selectKey", "onSelect", "selected", "defaultSelected", "textWrap", "value", "description", "withTwoLinesText"];
import { createRef, forwardRef } from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import { highlightText } from '@s-ui/js/lib/string';
import AtomCheckbox from '@s-ui/react-atom-checkbox';
import useControlledState from '@s-ui/react-hooks/lib/useControlledState/index.js';
import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs/index.js';
import handlersFactory from './handlersFactory/index.js';
import { BASE_CLASS, CLASS_CHECKBOX, CLASS_DESCRIPTION, CLASS_DISABLED, CLASS_HIGHLIGHTED, CLASS_HIGHLIGHTED_MARK, CLASS_LEFT_ADDON, CLASS_TEXT, CLASS_WITH_DESCRIPTION, CLASS_WITH_DESCRIPTION_AND_ADDON, MODIFIER_LINE_WRAP, MODIFIER_NO_WRAP, MODIFIER_THREE_LINES, MODIFIER_TWO_LINES, TEXT_WRAP_STYLES } from './config.js';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
var MoleculeDropdownOption = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
  var _cx;
  var checkbox = _ref.checkbox,
    checkboxProps = _ref.checkboxProps,
    children = _ref.children,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    highlightQuery = _ref.highlightQuery,
    highlightValue = _ref.highlightValue,
    innerRef = _ref.innerRef,
    leftAddon = _ref.leftAddon,
    _ref$selectKey = _ref.selectKey,
    selectKey = _ref$selectKey === void 0 ? 'Enter' : _ref$selectKey,
    onSelect = _ref.onSelect,
    selected = _ref.selected,
    _ref$defaultSelected = _ref.defaultSelected,
    defaultSelected = _ref$defaultSelected === void 0 ? false : _ref$defaultSelected,
    textWrap = _ref.textWrap,
    value = _ref.value,
    description = _ref.description,
    withTwoLinesText = _ref.withTwoLinesText,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  var hasAddonAndDescription = description && !!leftAddon;
  var ref = useMergeRefs(innerRef || /*#__PURE__*/createRef(), forwardedRef);
  var _useControlledState = useControlledState(selected, defaultSelected),
    innerSelected = _useControlledState[0],
    setInnerSelected = _useControlledState[1];
  var className = cx(BASE_CLASS, (_cx = {}, _cx[CLASS_CHECKBOX] = checkbox, _cx[CLASS_DISABLED] = disabled, _cx[CLASS_WITH_DESCRIPTION] = description, _cx[CLASS_WITH_DESCRIPTION_AND_ADDON] = hasAddonAndDescription, _cx['is-selected'] = innerSelected, _cx));
  var innerClassName = cx([CLASS_TEXT, (withTwoLinesText || textWrap === TEXT_WRAP_STYLES.TWO_LINES) && CLASS_TEXT + "--" + MODIFIER_TWO_LINES, textWrap === TEXT_WRAP_STYLES.THREE_LINES && CLASS_TEXT + "--" + MODIFIER_THREE_LINES, textWrap === TEXT_WRAP_STYLES.LINE_WRAP && CLASS_TEXT + "--" + MODIFIER_LINE_WRAP, (!withTwoLinesText && !textWrap || textWrap === TEXT_WRAP_STYLES.NO_WRAP) && CLASS_TEXT + "--" + MODIFIER_NO_WRAP]);
  var _handlersFactory = handlersFactory({
      disabled: disabled,
      selectKey: selectKey,
      onSelect: onSelect,
      selected: innerSelected,
      setInnerSelected: setInnerSelected,
      value: value
    }),
    handleClick = _handlersFactory.handleClick,
    handleKeyDown = _handlersFactory.handleKeyDown,
    handleFocus = _handlersFactory.handleFocus;
  var renderHighlightOption = function renderHighlightOption(option) {
    if (typeof option !== 'string') {
      return /*#__PURE__*/_jsx("span", {
        onFocus: handleInnerFocus,
        className: innerClassName,
        children: option
      });
    }
    var mark = highlightText({
      value: option,
      query: highlightQuery,
      startTag: "<mark class=\"" + cx(CLASS_HIGHLIGHTED_MARK, CLASS_HIGHLIGHTED) + "\">",
      endTag: '</mark>'
    });
    return /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx("span", {
        onFocus: handleInnerFocus,
        dangerouslySetInnerHTML: {
          __html: mark
        },
        className: innerClassName
      }), highlightValue ? children : null]
    });
  };
  var handleInnerFocus = function handleInnerFocus(ev) {
    innerRef.current && innerRef.current.focus();
  };
  return /*#__PURE__*/_jsxs("li", _extends({
    ref: ref,
    tabIndex: "0",
    className: className,
    onClick: handleClick,
    onKeyDown: handleKeyDown,
    onFocus: handleFocus,
    role: "option",
    "data-value": value,
    "aria-label": value,
    "aria-checked": innerSelected
  }, Object.fromEntries(Object.entries(props).filter(function (_ref2) {
    var key = _ref2[0];
    return !['className', 'style'].includes(key);
  })), {
    children: [checkbox && /*#__PURE__*/_jsx(AtomCheckbox, _extends({
      checked: innerSelected,
      disabled: disabled,
      onChange: function onChange(ev) {
        typeof onSelect === 'function' && onSelect(ev, {
          value: value
        });
      },
      onFocus: handleInnerFocus
    }, checkboxProps)), highlightQuery ? renderHighlightOption(highlightValue || children) : /*#__PURE__*/_jsxs(_Fragment, {
      children: [leftAddon ? /*#__PURE__*/_jsx("span", {
        className: CLASS_LEFT_ADDON,
        children: leftAddon
      }) : null, /*#__PURE__*/_jsxs("span", {
        onFocus: handleInnerFocus,
        className: innerClassName,
        children: [children, hasAddonAndDescription && /*#__PURE__*/_jsx("span", {
          className: CLASS_DESCRIPTION,
          children: description
        })]
      })]
    }), !hasAddonAndDescription && /*#__PURE__*/_jsx("span", {
      className: CLASS_DESCRIPTION,
      children: description
    })]
  }));
});
MoleculeDropdownOption.displayName = 'MoleculeDropdownOption';
export default MoleculeDropdownOption;
export { handlersFactory };
export { TEXT_WRAP_STYLES as MoleculeDropdownOptionTextWrapStyles }; // Deprecate
export { TEXT_WRAP_STYLES as moleculeDropdownOptionTextWrapStyles };