@elliemae/ds-form 2.3.0-alpha.9 → 2.3.0-next.11

package/cjs/MenuItem/components/MenuItem/index.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var Grid = require('@elliemae/ds-grid');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var props = require('../../props.js');
+var styled = require('../styled.js');
+var styled$1 = require('./styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+const MenuItem = props$1 => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.itemProps);
+  const {
+    dsId,
+    label,
+    isSelected,
+    onClick,
+    isFocus,
+    isActive,
+    innerRef,
+    onMouseEnter,
+    onMouseLeave,
+    wrapperStyles
+  } = propsWithDefault;
+  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledMenuItemWrapper, {
+    "aria-selected": isSelected,
+    id: dsId,
+    role: "option",
+    isSelected: isSelected,
+    isActive: isActive,
+    isFocus: isFocus,
+    onClick: onClick,
+    ref: innerRef,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    style: wrapperStyles,
+    children: /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {}, void 0, /*#__PURE__*/_jsx__default["default"](styled$1.StyledItemLabel, {}, void 0, label))
+  });
+};
+
+const MenuItemWithSchema = reactDesc.describe(MenuItem);
+MenuItemWithSchema.propTypes = props.itemProps;
+
+exports.MenuItem = MenuItem;
+exports.MenuItemWithSchema = MenuItemWithSchema;

package/cjs/MenuItem/components/MenuItem/styled.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledItemLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1f7cz5s-0"
+})(["display:grid;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;"]);
+
+exports.StyledItemLabel = StyledItemLabel;

package/cjs/MenuItem/components/MultiMenuItem/MultiMenuItem.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var dsControlledForm = require('@elliemae/ds-controlled-form');
+var props = require('../../props.js');
+var styled$1 = require('./styled.js');
+var styled = require('../styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const MultiMenuItem = props => {
+  const {
+    dsId,
+    value,
+    label,
+    disabled,
+    isSelected,
+    isActive,
+    onClick,
+    isFocus,
+    innerRef,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown,
+    wrapperStyles,
+    tabIndex,
+    render
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledGlobalMenuItemWrapper, {
+    id: dsId,
+    disabled: disabled,
+    isActive: isActive,
+    isSelected: isSelected,
+    isFocus: isFocus,
+    onClick: onClick,
+    ref: innerRef,
+    onMouseDown: onMouseDown,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    role: "option",
+    className: isActive ? 'ds-list-item-active' : '',
+    "aria-selected": isSelected,
+    style: wrapperStyles,
+    pr: render ? 0 : 40,
+    "data-testid": "combobox-option",
+    children: /*#__PURE__*/_jsx__default["default"](styled$1.StyledItemContent, {}, void 0, render ? render(props) : /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledCheckbox, {
+      disabled: disabled,
+      checked: isSelected,
+      onMouseDown: onMouseDown,
+      name: value,
+      ariaLabel: label,
+      label: label,
+      id: value,
+      onChange: onClick
+    }))
+  });
+};
+
+MultiMenuItem.defaultProps = props.defaultProps;
+const MultiMenuItemWithSchema = reactDesc.describe(MultiMenuItem);
+MultiMenuItemWithSchema.propTypes = props.itemProps;
+
+exports.MultiMenuItem = MultiMenuItem;
+exports.MultiMenuItemWithSchema = MultiMenuItemWithSchema;

package/cjs/MenuItem/components/MultiMenuItem/styled.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledItemContent = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1stlix4-0"
+})(["display:flex;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;"]);
+
+exports.StyledItemContent = StyledItemContent;

package/cjs/MenuItem/components/Section/index.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var Grid = require('@elliemae/ds-grid');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var props = require('./props.js');
+var styled = require('./styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+const Section = props$1 => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.itemProps);
+  const {
+    label,
+    wrapperStyles,
+    innerRef,
+    render
+  } = props$1;
+  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledSectionWrapper, {
+    style: wrapperStyles,
+    ref: innerRef,
+    children: render ? render(props$1) : /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {}, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledGroupLabel, {}, void 0, label))
+  });
+};
+
+const MenuSectionItemWithSchema = reactDesc.describe(Section);
+MenuSectionItemWithSchema.propTypes = props.itemProps;
+
+exports.Section = Section;

package/cjs/MenuItem/components/Section/props.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const defaultProps = {
+  label: '',
+  wrapperStyles: {}
+};
+const itemProps = {
+  label: reactDesc.PropTypes.string.description('').defaultValue('')
+};
+
+exports.defaultProps = defaultProps;
+exports.itemProps = itemProps;

package/cjs/MenuItem/components/Section/styled.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var styledComponents = require('@xstyled/styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledGroupLabel = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-6xya9j-0"
+})(["font-family:12px;color:", ";"], props => props.theme.colors.neutral[500]);
+const StyledSectionWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
+  componentId: "sc-6xya9j-1"
+})(["", " ", " ", " list-style:none;padding:0px 16px;height:24px;display:flex;align-items:center;"], styledComponents.position, styledComponents.layout, styledComponents.sizing);
+
+exports.StyledGroupLabel = StyledGroupLabel;
+exports.StyledSectionWrapper = StyledSectionWrapper;

package/cjs/MenuItem/components/Separator/index.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styled = require('./styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _StyledSeparator;
+
+const Separator = props => {
+  const {
+    wrapperStyles,
+    innerRef,
+    render
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledSeparatorWrapper, {
+    style: wrapperStyles,
+    ref: innerRef,
+    children: render ? render(props) : _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](styled.StyledSeparator, {}))
+  });
+};
+
+exports.Separator = Separator;

package/cjs/MenuItem/components/Separator/styled.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var styledComponents = require('@xstyled/styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledSeparator = /*#__PURE__*/styled__default["default"].hr.withConfig({
+  componentId: "sc-1xat2d9-0"
+})(["border:0;border-top:1px solid #697489;margin:4px 0px;padding:0;"]);
+const StyledSeparatorWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
+  componentId: "sc-1xat2d9-1"
+})(["list-style:none;padding:0px 16px;", " ", " ", ""], styledComponents.position, styledComponents.layout, styledComponents.sizing);
+
+exports.StyledSeparator = StyledSeparator;
+exports.StyledSeparatorWrapper = StyledSeparatorWrapper;

package/cjs/MenuItem/components/SingleMenuItem/SingleMenuItem.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+var dsIcons = require('@elliemae/ds-icons');
+var Grid = require('@elliemae/ds-grid');
+var props = require('../../props.js');
+var styled = require('../styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+const SingleMenuItem = props => {
+  const {
+    dsId,
+    label,
+    isSelected,
+    onClick,
+    isFocus,
+    isActive,
+    innerRef,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    wrapperStyles,
+    render,
+    dataTestid,
+    disabled
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledGlobalMenuItemWrapper, {
+    "aria-selected": isSelected,
+    id: dsId,
+    role: "option",
+    isActive: isActive,
+    isSelected: isSelected,
+    isFocus: isFocus,
+    onClick: onClick,
+    ref: innerRef,
+    onMouseDown: onMouseDown,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    className: isActive ? 'ds-list-item-active' : '',
+    style: wrapperStyles,
+    pr: render ? 0 : 40,
+    "data-testid": dataTestid,
+    disabled: disabled,
+    children: render ? render(props) : /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+      cols: ['16px', 'auto'],
+      height: "16px",
+      gutter: "xxs",
+      alignItems: "center"
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, isSelected && /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
+      size: "s",
+      color: ['brand-primary', '600']
+    })), /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText.SimpleTruncatedTooltipText, {
+      value: label
+    }))
+  });
+};
+
+SingleMenuItem.defaultProps = props.defaultProps;
+const SingleMenuItemWithSchema = reactDesc.describe(SingleMenuItem);
+SingleMenuItemWithSchema.propTypes = props.itemProps;
+
+exports.SingleMenuItem = SingleMenuItem;

package/cjs/MenuItem/components/SubmenuItem/index.js

@@ -0,0 +1,142 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var reactDesc = require('react-desc');
+var Grid = require('@elliemae/ds-grid');
+var DSButton = require('@elliemae/ds-button');
+var Ellipsis = require('@elliemae/ds-icons/MoreOptionsVert');
+var ChevronRight = require('@elliemae/ds-icons/ChevronRight');
+var dsDropdownmenu = require('@elliemae/ds-dropdownmenu');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var props = require('../../props.js');
+var styled$1 = require('./styled.js');
+var styled = require('../styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+var Ellipsis__default = /*#__PURE__*/_interopDefaultLegacy(Ellipsis);
+var ChevronRight__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRight);
+
+var _Ellipsis, _ChevronRight;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const SubmenuItem = props$1 => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.itemProps);
+  const {
+    dsId,
+    label,
+    isSelected,
+    isActive,
+    onClick,
+    isFocus,
+    rightAddon,
+    options,
+    selectedOptions,
+    innerRef,
+    onMouseEnter,
+    onMouseLeave,
+    onKeyDown,
+    onOptionClick,
+    onClickOutside,
+    wrapperStyles,
+    minWidth,
+    maxHeight,
+    render
+  } = propsWithDefault; // If we don't delay the opening of the poppers, the position will not be placed correctly
+  // That why we delay it for the next render using the useEffect hook
+
+  const [delayedIsOpened, setDelayedIsOpened] = React.useState(false);
+  React.useEffect(() => {
+    setDelayedIsOpened(isSelected);
+  }, [isSelected]);
+  const timeoutRef = React.useRef(null);
+  const onMouseEnterHandler = React.useCallback(e => {
+    if (rightAddon !== 'ellipsis') {
+      if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);else if (!isSelected) onClick(e);
+      timeoutRef.current = null;
+    }
+
+    if (e.target) onMouseEnter(e);
+  }, [isSelected, onClick, onMouseEnter, rightAddon]);
+  const onMouseLeaveHandler = React.useCallback(e => {
+    if (rightAddon !== 'ellipsis') {
+      if (timeoutRef.current === null) {
+        timeoutRef.current = setTimeout(() => {
+          timeoutRef.current = null;
+          onClick(e);
+        }, 300);
+      }
+    }
+
+    onMouseLeave(e);
+  }, [onClick, onMouseLeave, rightAddon]);
+  return /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
+    isOpened: delayedIsOpened,
+    options: options,
+    onOptionClick: onOptionClick,
+    startPlacementPreference: "right-start",
+    placementOrderPreference: ['right-start', 'right-end', 'left-start', 'left-end'],
+    selectedOptions: selectedOptions,
+    onKeyDown: onKeyDown,
+    onMouseEnter: onMouseEnterHandler,
+    onMouseLeave: onMouseLeaveHandler,
+    onClickOutside: onClickOutside,
+    customOffset: [0, 1],
+    wrapperStyles: _objectSpread(_objectSpread({}, wrapperStyles), {}, {
+      w: '100%'
+    }),
+    minWidth: minWidth,
+    maxHeight: maxHeight
+  }, void 0, /*#__PURE__*/jsxRuntime.jsxs(styled.StyledSubmenuItemWrapper, {
+    "aria-selected": isSelected,
+    pr: 0,
+    id: dsId,
+    role: "option",
+    isSelected: isSelected,
+    isActive: isActive,
+    isFocus: isFocus,
+    onClick: onClick,
+    ref: innerRef,
+    onMouseEnter: onMouseEnterHandler,
+    onMouseLeave: onMouseLeaveHandler,
+    "aria-describedby": "dropdownmenu-submenu-".concat(dsId),
+    children: [render ? render(props$1) : /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+      cols: ['auto', 'min-content']
+    }, void 0, /*#__PURE__*/_jsx__default["default"](styled$1.StyledItemLabel, {}, void 0, label), /*#__PURE__*/_jsx__default["default"](DSButton.DSButtonV2, {
+      buttonType: "icon",
+      onClick: e => {
+        e.stopPropagation();
+        onClick(e);
+      }
+    }, void 0, rightAddon === 'ellipsis' ? _Ellipsis || (_Ellipsis = /*#__PURE__*/_jsx__default["default"](Ellipsis__default["default"], {})) : _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx__default["default"](ChevronRight__default["default"], {})))), /*#__PURE__*/_jsx__default["default"]("span", {
+      id: "dropdownmenu-submenu-".concat(dsId),
+      style: {
+        display: 'none'
+      }
+    }, void 0, "Submenu. To open this submenu press the Right Arrow key.")]
+  }));
+};
+
+const SubmenuItemWithSchema = reactDesc.describe(SubmenuItem);
+SubmenuItemWithSchema.propTypes = props.itemProps;
+
+exports.SubmenuItem = SubmenuItem;
+exports.SubmenuItemWithSchema = SubmenuItemWithSchema;

package/cjs/MenuItem/components/SubmenuItem/styled.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var styled$1 = require('../styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledItemWrapper = /*#__PURE__*/styled__default["default"](styled$1.StyledGlobalMenuItemWrapper).withConfig({
+  componentId: "sc-1kei8ft-0"
+})(["background-color:", " !important;"], props => props.isSelected ? props.theme.colors.brand[200] : 'white');
+const StyledItemLabel = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1kei8ft-1"
+})(["display:grid;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;"]);
+
+exports.StyledItemLabel = StyledItemLabel;
+exports.StyledItemWrapper = StyledItemWrapper;

package/cjs/MenuItem/components/index.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var SingleMenuItem = require('./SingleMenuItem/SingleMenuItem.js');
+var MultiMenuItem = require('./MultiMenuItem/MultiMenuItem.js');
+var index = require('./MenuItem/index.js');
+var index$1 = require('./SubmenuItem/index.js');
+var index$2 = require('./Section/index.js');
+var index$3 = require('./Separator/index.js');
+
+
+
+exports.SingleMenuItem = SingleMenuItem.SingleMenuItem;
+exports.MultiMenuItem = MultiMenuItem.MultiMenuItem;
+exports.MultiMenuItemWithSchema = MultiMenuItem.MultiMenuItemWithSchema;
+exports.MenuItem = index.MenuItem;
+exports.MenuItemWithSchema = index.MenuItemWithSchema;
+exports.SubmenuItem = index$1.SubmenuItem;
+exports.SubmenuItemWithSchema = index$1.SubmenuItemWithSchema;
+exports.Section = index$2.Section;
+exports.Separator = index$3.Separator;

package/cjs/MenuItem/components/styled.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var styledComponents = require('@xstyled/styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const borderOutside = function (color) {
+  let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  return styled.css([":after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:", "px solid ", ";pointer-events:none;z-index:7;}"], width, color);
+};
+
+const disabledOption = () => styled.css(["color:", ";cursor:not-allowed;*{cursor:not-allowed;}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral[500];
+});
+
+const activeBorderCss = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return borderOutside(theme.colors.brand[500]);
+};
+
+const focusBorderCss = _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return borderOutside(theme.colors.brand[700], 2);
+};
+
+const StyledGlobalMenuItemWrapper = /*#__PURE__*/styled__default["default"].li.withConfig({
+  componentId: "sc-jyoobd-0"
+})(["cursor:pointer;height:32px;padding-left:16px;padding-right:16px;display:grid;align-items:center;list-style:none;position:relative;", " ", " ", " ", " ", ";background-color:", ";&:hover{background-color:", ";}"], styledComponents.position, styledComponents.layout, styledComponents.sizing, styledComponents.space, props => {
+  if (props.disabled) return disabledOption();
+  if (props.isFocus) return focusBorderCss(props);
+  if (props.isActive) return activeBorderCss(props);
+  return '';
+}, props => props.isActive ? props.theme.colors.brand[200] : 'white', props => !props.disabled && props.theme.colors.brand[200]);
+const StyledMenuItemWrapper = /*#__PURE__*/styled__default["default"](StyledGlobalMenuItemWrapper).withConfig({
+  componentId: "sc-jyoobd-1"
+})(["background-color:", " !important;", ";"], props => props.isSelected ? props.theme.colors.brand[200] : 'white', props => props.isSelected && !props.isFocus ? activeBorderCss(props) : '');
+const StyledSubmenuItemWrapper = /*#__PURE__*/styled__default["default"](StyledGlobalMenuItemWrapper).withConfig({
+  componentId: "sc-jyoobd-2"
+})(["", ";padding-right:0;"], props => props.isSelected || props.isActive ? activeBorderCss(props) : '');
+
+exports.StyledGlobalMenuItemWrapper = StyledGlobalMenuItemWrapper;
+exports.StyledMenuItemWrapper = StyledMenuItemWrapper;
+exports.StyledSubmenuItemWrapper = StyledSubmenuItemWrapper;

package/cjs/MenuItem/index.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var SingleMenuItem = require('./components/SingleMenuItem/SingleMenuItem.js');
+var MultiMenuItem = require('./components/MultiMenuItem/MultiMenuItem.js');
+var index = require('./components/MenuItem/index.js');
+var index$1 = require('./components/SubmenuItem/index.js');
+var index$2 = require('./components/Section/index.js');
+var index$3 = require('./components/Separator/index.js');
+
+
+
+exports.SingleMenuItem = SingleMenuItem.SingleMenuItem;
+exports.MultiMenuItem = MultiMenuItem.MultiMenuItem;
+exports.MultiMenuItemWithSchema = MultiMenuItem.MultiMenuItemWithSchema;
+exports.MenuItem = index.MenuItem;
+exports.MenuItemWithSchema = index.MenuItemWithSchema;
+exports.SubmenuItem = index$1.SubmenuItem;
+exports.SubmenuItemWithSchema = index$1.SubmenuItemWithSchema;
+exports.Section = index$2.Section;
+exports.Separator = index$3.Separator;

package/cjs/MenuItem/props.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lodash = require('lodash');
+var reactDesc = require('react-desc');
+
+const defaultProps = {
+  dsId: '',
+  value: '',
+  label: '',
+  onClick: lodash.noop,
+  onKeyUp: lodash.noop,
+  isSelected: false,
+  isActive: false,
+  isFocus: false,
+  disabled: false,
+  wrapperStyles: {},
+  withVirtualization: false,
+  dataTestid: 'ds-menu-item'
+};
+const itemProps = {
+  value: reactDesc.PropTypes.any.description('').defaultValue(''),
+  label: reactDesc.PropTypes.string.description('').defaultValue('')
+};
+
+exports.defaultProps = defaultProps;
+exports.itemProps = itemProps;