@elliemae/ds-form 2.2.0-alpha.4 → 3.0.0-next.2

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

@@ -1,50 +1,45 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var SubmenuItem_exports = {};
-__export(SubmenuItem_exports, {
-  SubmenuItem: () => SubmenuItem,
-  SubmenuItemWithSchema: () => SubmenuItemWithSchema
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_ds_grid = require("@elliemae/ds-grid");
-var import_ds_button = require("@elliemae/ds-button");
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_icons2 = require("@elliemae/ds-icons");
-var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_props = require("../../props");
-var import_styled = require("./styled");
-var import_styled2 = require("../styled");
-const SubmenuItem = (props) => {
-  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_props.defaultProps);
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_props.itemProps);
+'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,
@@ -65,25 +60,24 @@ const SubmenuItem = (props) => {
     minWidth,
     maxHeight,
     render
-  } = propsWithDefault;
-  const [delayedIsOpened, setDelayedIsOpened] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
+  } = 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 = (0, import_react.useRef)(null);
-  const onMouseEnterHandler = (0, import_react.useCallback)((e) => {
-    if (rightAddon !== "ellipsis") {
-      if (timeoutRef.current !== null)
-        clearTimeout(timeoutRef.current);
-      else if (!isSelected)
-        onClick(e);
+  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);
+
+    if (e.target) onMouseEnter(e);
   }, [isSelected, onClick, onMouseEnter, rightAddon]);
-  const onMouseLeaveHandler = (0, import_react.useCallback)((e) => {
-    if (rightAddon !== "ellipsis") {
+  const onMouseLeaveHandler = React.useCallback(e => {
+    if (rightAddon !== 'ellipsis') {
       if (timeoutRef.current === null) {
         timeoutRef.current = setTimeout(() => {
           timeoutRef.current = null;
@@ -91,51 +85,58 @@ const SubmenuItem = (props) => {
         }, 300);
       }
     }
+
     onMouseLeave(e);
   }, [onClick, onMouseLeave, rightAddon]);
-  return /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenuV2, {
+  return /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
     isOpened: delayedIsOpened,
-    options,
-    onOptionClick,
+    options: options,
+    onOptionClick: onOptionClick,
     startPlacementPreference: "right-start",
-    placementOrderPreference: ["right-start", "right-end", "left-start", "left-end"],
-    selectedOptions,
-    onKeyDown,
+    placementOrderPreference: ['right-start', 'right-end', 'left-start', 'left-end'],
+    selectedOptions: selectedOptions,
+    onKeyDown: onKeyDown,
     onMouseEnter: onMouseEnterHandler,
     onMouseLeave: onMouseLeaveHandler,
-    onClickOutside,
+    onClickOutside: onClickOutside,
     customOffset: [0, 1],
-    wrapperStyles: { ...wrapperStyles, w: "100%" },
-    minWidth,
-    maxHeight
-  }, /* @__PURE__ */ import_react.default.createElement(import_styled2.StyledSubmenuItemWrapper, {
+    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,
-    isActive,
-    isFocus,
-    onClick,
+    isSelected: isSelected,
+    isActive: isActive,
+    isFocus: isFocus,
+    onClick: onClick,
     ref: innerRef,
     onMouseEnter: onMouseEnterHandler,
     onMouseLeave: onMouseLeaveHandler,
-    "aria-describedby": `dropdownmenu-submenu-${dsId}`
-  }, render ? render(props) : /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
-    cols: ["auto", "min-content"]
-  }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledItemLabel, null, label), /* @__PURE__ */ import_react.default.createElement(import_ds_button.DSButtonV2, {
-    buttonType: "icon",
-    onClick: (e) => {
-      e.stopPropagation();
-      onClick(e);
-    }
-  }, rightAddon === "ellipsis" ? /* @__PURE__ */ import_react.default.createElement(import_ds_icons.MoreOptionsVert, null) : /* @__PURE__ */ import_react.default.createElement(import_ds_icons2.ChevronRight, null))), /* @__PURE__ */ import_react.default.createElement("span", {
-    id: `dropdownmenu-submenu-${dsId}`,
-    style: { display: "none" }
-  }, "Submenu. To open this submenu press the Right Arrow key.")));
+    "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.")]
+  }));
 };
-SubmenuItem.propTypes = import_props.itemProps;
-const SubmenuItemWithSchema = (0, import_react_desc.describe)(SubmenuItem);
-SubmenuItemWithSchema.propTypes = import_props.itemProps;
-module.exports = __toCommonJS(SubmenuItem_exports);
-//# sourceMappingURL=index.js.map
+
+const SubmenuItemWithSchema = reactDesc.describe(SubmenuItem);
+SubmenuItemWithSchema.propTypes = props.itemProps;
+
+exports.SubmenuItem = SubmenuItem;
+exports.SubmenuItemWithSchema = SubmenuItemWithSchema;

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

@@ -1,48 +1,20 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var styled_exports = {};
-__export(styled_exports, {
-  StyledItemLabel: () => StyledItemLabel,
-  StyledItemWrapper: () => StyledItemWrapper
-});
-var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_styled = require("../styled");
-const StyledItemWrapper = (0, import_styled_components.default)(import_styled.StyledGlobalMenuItemWrapper)`
-  background-color: ${(props) => props.isSelected ? props.theme.colors.brand[200] : "white"} !important;
-`;
-const StyledItemLabel = import_styled_components.default.div`
-  display: grid;
-  align-items: center;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  width: 100%;
-`;
-module.exports = __toCommonJS(styled_exports);
-//# sourceMappingURL=styled.js.map
+'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

@@ -1,33 +1,22 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var components_exports = {};
-var React = __toESM(require("react"));
-__reExport(components_exports, require("./SingleMenuItem/SingleMenuItem"));
-__reExport(components_exports, require("./MultiMenuItem/MultiMenuItem"));
-__reExport(components_exports, require("./MenuItem"));
-__reExport(components_exports, require("./SubmenuItem"));
-__reExport(components_exports, require("./Section"));
-__reExport(components_exports, require("./Separator"));
-module.exports = __toCommonJS(components_exports);
-//# sourceMappingURL=index.js.map
+'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

@@ -1,100 +1,40 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+'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);
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var styled_exports = {};
-__export(styled_exports, {
-  StyledGlobalMenuItemWrapper: () => StyledGlobalMenuItemWrapper,
-  StyledMenuItemWrapper: () => StyledMenuItemWrapper,
-  StyledSubmenuItemWrapper: () => StyledSubmenuItemWrapper
-});
-var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_styled_components2 = require("@xstyled/styled-components");
-const borderOutside = (color, width = 1) => import_styled_components.css`
-  :after {
-    display: block;
-    content: ' ';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border: ${width}px solid ${color};
-    pointer-events: none;
-    z-index: 7;
-  }
-`;
-const disabledOption = () => import_styled_components.css`
-  cursor: not-allowed;
-  * {
-    cursor: not-allowed;
-  }
-`;
-const activeBorderCss = (props) => borderOutside(props.theme.colors.brand[500]);
-const focusBorderCss = (props) => borderOutside(props.theme.colors.brand[700], 2);
-const StyledGlobalMenuItemWrapper = import_styled_components.default.li`
-  cursor: pointer;
-  height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
-  display: grid;
-  align-items: center;
-  list-style: none;
-  position: relative;
-  ${import_styled_components2.position}
-  ${import_styled_components2.layout}
-  ${import_styled_components2.sizing}
-  ${import_styled_components2.space}
 
-  ${(props) => {
-  if (props.disabled)
-    return disabledOption();
-  if (props.isFocus)
-    return focusBorderCss(props);
-  if (props.isActive)
-    return activeBorderCss(props);
-  return "";
-}};
+const disabledOption = () => styled.css(["cursor:not-allowed;*{cursor:not-allowed;}"]);
+
+const activeBorderCss = props => borderOutside(props.theme.colors.brand[500]);
 
-  background-color: ${(props) => props.isActive ? props.theme.colors.brand[200] : "white"};
+const focusBorderCss = props => borderOutside(props.theme.colors.brand[700], 2);
 
-  &:hover {
-    background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};
-  }
-`;
-const StyledMenuItemWrapper = (0, import_styled_components.default)(StyledGlobalMenuItemWrapper)`
-  background-color: ${(props) => props.isSelected ? props.theme.colors.brand[200] : "white"} !important;
-  cursor: ${(props) => props.disabled && "not-allowed"};
-  ${(props) => props.isSelected && !props.isFocus ? activeBorderCss(props) : ""};
-`;
-const StyledSubmenuItemWrapper = (0, import_styled_components.default)(StyledGlobalMenuItemWrapper)`
-  ${(props) => props.isSelected || props.isActive ? activeBorderCss(props) : ""};
+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;cursor:", ";", ";"], props => props.isSelected ? props.theme.colors.brand[200] : 'white', props => props.disabled && 'not-allowed', 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) : '');
 
-  padding-right: 0;
-`;
-module.exports = __toCommonJS(styled_exports);
-//# sourceMappingURL=styled.js.map
+exports.StyledGlobalMenuItemWrapper = StyledGlobalMenuItemWrapper;
+exports.StyledMenuItemWrapper = StyledMenuItemWrapper;
+exports.StyledSubmenuItemWrapper = StyledSubmenuItemWrapper;

package/cjs/MenuItem/index.js

@@ -1,28 +1,22 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var MenuItem_exports = {};
-var React = __toESM(require("react"));
-__reExport(MenuItem_exports, require("./components"));
-module.exports = __toCommonJS(MenuItem_exports);
-//# sourceMappingURL=index.js.map
+'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

@@ -1,55 +1,28 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var props_exports = {};
-__export(props_exports, {
-  defaultProps: () => defaultProps,
-  itemProps: () => itemProps
-});
-var React = __toESM(require("react"));
-var import_lodash = require("lodash");
-var import_react_desc = require("react-desc");
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lodash = require('lodash');
+var reactDesc = require('react-desc');
+
 const defaultProps = {
-  dsId: "",
-  value: "",
-  label: "",
-  onClick: import_lodash.noop,
-  onKeyUp: import_lodash.noop,
+  dsId: '',
+  value: '',
+  label: '',
+  onClick: lodash.noop,
+  onKeyUp: lodash.noop,
   isSelected: false,
   isActive: false,
   isFocus: false,
   disabled: false,
   wrapperStyles: {},
   withVirtualization: false,
-  dataTestid: "ds-menu-item"
+  dataTestid: 'ds-menu-item'
 };
 const itemProps = {
-  value: import_react_desc.PropTypes.any.description("").defaultValue(""),
-  label: import_react_desc.PropTypes.string.description("").defaultValue("")
+  value: reactDesc.PropTypes.any.description('').defaultValue(''),
+  label: reactDesc.PropTypes.string.description('').defaultValue('')
 };
-module.exports = __toCommonJS(props_exports);
-//# sourceMappingURL=props.js.map
+
+exports.defaultProps = defaultProps;
+exports.itemProps = itemProps;