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

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

@@ -1,23 +1,29 @@
-import * as React from "react";
-import React2 from "react";
-import { describe } from "react-desc";
-import { Grid } from "@elliemae/ds-grid";
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { defaultProps, itemProps } from "./props";
-import { StyledSectionWrapper, StyledGroupLabel } from "./styled";
-const Section = (props) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe } from 'react-desc';
+import Grid from '@elliemae/ds-grid';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { itemProps, defaultProps } from './props.js';
+import { StyledSectionWrapper, StyledGroupLabel } from './styled.js';
+import { jsx } from 'react/jsx-runtime';
+
+const Section = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, itemProps);
-  const { label, wrapperStyles, innerRef, render } = props;
-  return /* @__PURE__ */ React2.createElement(StyledSectionWrapper, {
+  const {
+    label,
+    wrapperStyles,
+    innerRef,
+    render
+  } = props;
+  return /*#__PURE__*/jsx(StyledSectionWrapper, {
     style: wrapperStyles,
-    ref: innerRef
-  }, render ? render(props) : /* @__PURE__ */ React2.createElement(Grid, null, /* @__PURE__ */ React2.createElement(StyledGroupLabel, null, label)));
+    ref: innerRef,
+    children: render ? render(props) : /*#__PURE__*/_jsx(Grid, {}, void 0, /*#__PURE__*/_jsx(StyledGroupLabel, {}, void 0, label))
+  });
 };
-Section.propTypes = itemProps;
+
 const MenuSectionItemWithSchema = describe(Section);
 MenuSectionItemWithSchema.propTypes = itemProps;
-export {
-  Section
-};
-//# sourceMappingURL=index.js.map
+
+export { Section };

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

@@ -1,14 +1,11 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
+import { PropTypes } from 'react-desc';
+
 const defaultProps = {
-  label: "",
+  label: '',
   wrapperStyles: {}
 };
 const itemProps = {
-  label: PropTypes.string.description("").defaultValue("")
+  label: PropTypes.string.description('').defaultValue('')
 };
-export {
-  defaultProps,
-  itemProps
-};
-//# sourceMappingURL=props.js.map
+
+export { defaultProps, itemProps };

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

@@ -1,22 +1,11 @@
-import * as React from "react";
-import styled from "styled-components";
-import { position, layout, sizing } from "@xstyled/styled-components";
-const StyledGroupLabel = styled.span`
-  font-family: 12px;
-  color: ${(props) => props.theme.colors.neutral[500]};
-`;
-const StyledSectionWrapper = styled.li`
-  ${position}
-  ${layout}
-  ${sizing}
-  list-style: none;
-  padding: 0px 16px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-`;
-export {
-  StyledGroupLabel,
-  StyledSectionWrapper
-};
-//# sourceMappingURL=styled.js.map
+import styled from 'styled-components';
+import { position, layout, sizing } from '@xstyled/styled-components';
+
+const StyledGroupLabel = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-6xya9j-0"
+})(["font-family:12px;color:", ";"], props => props.theme.colors.neutral[500]);
+const StyledSectionWrapper = /*#__PURE__*/styled.li.withConfig({
+  componentId: "sc-6xya9j-1"
+})(["", " ", " ", " list-style:none;padding:0px 16px;height:24px;display:flex;align-items:center;"], position, layout, sizing);
+
+export { StyledGroupLabel, StyledSectionWrapper };

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

@@ -1,14 +1,21 @@
-import * as React from "react";
-import React2 from "react";
-import { StyledSeparatorWrapper, StyledSeparator } from "./styled";
-const Separator = (props) => {
-  const { wrapperStyles, innerRef, render } = props;
-  return /* @__PURE__ */ React2.createElement(StyledSeparatorWrapper, {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { StyledSeparatorWrapper, StyledSeparator } from './styled.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _StyledSeparator;
+
+const Separator = props => {
+  const {
+    wrapperStyles,
+    innerRef,
+    render
+  } = props;
+  return /*#__PURE__*/jsx(StyledSeparatorWrapper, {
     style: wrapperStyles,
-    ref: innerRef
-  }, render ? render(props) : /* @__PURE__ */ React2.createElement(StyledSeparator, null));
+    ref: innerRef,
+    children: render ? render(props) : _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {}))
+  });
 };
-export {
-  Separator
-};
-//# sourceMappingURL=index.js.map
+
+export { Separator };

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

@@ -1,21 +1,11 @@
-import * as React from "react";
-import styled from "styled-components";
-import { position, layout, sizing } from "@xstyled/styled-components";
-const StyledSeparator = styled.hr`
-  border: 0;
-  border-top: 1px solid #697489;
-  margin: 4px 0px;
-  padding: 0;
-`;
-const StyledSeparatorWrapper = styled.li`
-  list-style: none;
-  padding: 0px 16px;
-  ${position}
-  ${layout}
-  ${sizing}
-`;
-export {
-  StyledSeparator,
-  StyledSeparatorWrapper
-};
-//# sourceMappingURL=styled.js.map
+import styled from 'styled-components';
+import { position, layout, sizing } from '@xstyled/styled-components';
+
+const StyledSeparator = /*#__PURE__*/styled.hr.withConfig({
+  componentId: "sc-1xat2d9-0"
+})(["border:0;border-top:1px solid #697489;margin:4px 0px;padding:0;"]);
+const StyledSeparatorWrapper = /*#__PURE__*/styled.li.withConfig({
+  componentId: "sc-1xat2d9-1"
+})(["list-style:none;padding:0px 16px;", " ", " ", ""], position, layout, sizing);
+
+export { StyledSeparator, StyledSeparatorWrapper };

package/esm/MenuItem/components/SingleMenuItem/SingleMenuItem.js

@@ -1,12 +1,14 @@
-import * as React from "react";
-import React2 from "react";
-import { describe } from "react-desc";
-import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { Checkmark } from "@elliemae/ds-icons";
-import { Grid } from "@elliemae/ds-grid";
-import { defaultProps, itemProps } from "../../props";
-import { StyledGlobalMenuItemWrapper } from "../styled";
-const SingleMenuItem = (props) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe } from 'react-desc';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { Checkmark } from '@elliemae/ds-icons';
+import Grid from '@elliemae/ds-grid';
+import { itemProps, defaultProps } from '../../props.js';
+import { StyledGlobalMenuItemWrapper } from '../styled.js';
+import { jsx } from 'react/jsx-runtime';
+
+const SingleMenuItem = props => {
   const {
     dsId,
     label,
@@ -22,39 +24,38 @@ const SingleMenuItem = (props) => {
     render,
     dataTestid
   } = props;
-  return /* @__PURE__ */ React2.createElement(StyledGlobalMenuItemWrapper, {
+  return /*#__PURE__*/jsx(StyledGlobalMenuItemWrapper, {
     "aria-selected": isSelected,
     id: dsId,
     role: "option",
-    isActive,
-    isSelected,
-    isFocus,
-    onClick,
+    isActive: isActive,
+    isSelected: isSelected,
+    isFocus: isFocus,
+    onClick: onClick,
     ref: innerRef,
-    onMouseDown,
-    onMouseEnter,
-    onMouseLeave,
-    className: isActive ? "ds-list-item-active" : "",
+    onMouseDown: onMouseDown,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    className: isActive ? 'ds-list-item-active' : '',
     style: wrapperStyles,
     pr: render ? 0 : 40,
-    "data-testid": dataTestid
-  }, render ? render(props) : /* @__PURE__ */ React2.createElement(Grid, {
-    cols: ["16px", "auto"],
-    height: "16px",
-    gutter: "xxs",
-    alignItems: "center"
-  }, /* @__PURE__ */ React2.createElement("div", null, isSelected && /* @__PURE__ */ React2.createElement(Checkmark, {
-    size: "s",
-    color: ["brand-primary", "600"]
-  })), /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
-    value: label
-  })));
+    "data-testid": dataTestid,
+    children: render ? render(props) : /*#__PURE__*/_jsx(Grid, {
+      cols: ['16px', 'auto'],
+      height: "16px",
+      gutter: "xxs",
+      alignItems: "center"
+    }, void 0, /*#__PURE__*/_jsx("div", {}, void 0, isSelected && /*#__PURE__*/_jsx(Checkmark, {
+      size: "s",
+      color: ['brand-primary', '600']
+    })), /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+      value: label
+    }))
+  });
 };
-SingleMenuItem.propTypes = itemProps;
+
 SingleMenuItem.defaultProps = defaultProps;
 const SingleMenuItemWithSchema = describe(SingleMenuItem);
 SingleMenuItemWithSchema.propTypes = itemProps;
-export {
-  SingleMenuItem
-};
-//# sourceMappingURL=SingleMenuItem.js.map
+
+export { SingleMenuItem };

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

@@ -1,16 +1,31 @@
-import * as React from "react";
-import React2, { useCallback, useEffect, useRef, useState } from "react";
-import { describe } from "react-desc";
-import { Grid } from "@elliemae/ds-grid";
-import { DSButtonV2 } from "@elliemae/ds-button";
-import { MoreOptionsVert } from "@elliemae/ds-icons";
-import { ChevronRight } from "@elliemae/ds-icons";
-import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu";
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { defaultProps, itemProps } from "../../props";
-import { StyledItemLabel } from "./styled";
-import { StyledSubmenuItemWrapper } from "../styled";
-const SubmenuItem = (props) => {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { describe } from 'react-desc';
+import Grid from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import Ellipsis from '@elliemae/ds-icons/MoreOptionsVert';
+import ChevronRight from '@elliemae/ds-icons/ChevronRight';
+import { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { itemProps, defaultProps } from '../../props.js';
+import { StyledItemLabel } from './styled.js';
+import { StyledSubmenuItemWrapper } from '../styled.js';
+import { jsxs } from 'react/jsx-runtime';
+
+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(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 => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, itemProps);
   const {
@@ -33,25 +48,24 @@ const SubmenuItem = (props) => {
     minWidth,
     maxHeight,
     render
-  } = propsWithDefault;
+  } = 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] = useState(false);
   useEffect(() => {
     setDelayedIsOpened(isSelected);
   }, [isSelected]);
   const timeoutRef = useRef(null);
-  const onMouseEnterHandler = useCallback((e) => {
-    if (rightAddon !== "ellipsis") {
-      if (timeoutRef.current !== null)
-        clearTimeout(timeoutRef.current);
-      else if (!isSelected)
-        onClick(e);
+  const onMouseEnterHandler = 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 = useCallback((e) => {
-    if (rightAddon !== "ellipsis") {
+  const onMouseLeaveHandler = useCallback(e => {
+    if (rightAddon !== 'ellipsis') {
       if (timeoutRef.current === null) {
         timeoutRef.current = setTimeout(() => {
           timeoutRef.current = null;
@@ -59,54 +73,57 @@ const SubmenuItem = (props) => {
         }, 300);
       }
     }
+
     onMouseLeave(e);
   }, [onClick, onMouseLeave, rightAddon]);
-  return /* @__PURE__ */ React2.createElement(DSDropdownMenuV2, {
+  return /*#__PURE__*/_jsx(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__ */ React2.createElement(StyledSubmenuItemWrapper, {
+    wrapperStyles: _objectSpread(_objectSpread({}, wrapperStyles), {}, {
+      w: '100%'
+    }),
+    minWidth: minWidth,
+    maxHeight: maxHeight
+  }, void 0, /*#__PURE__*/jsxs(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__ */ React2.createElement(Grid, {
-    cols: ["auto", "min-content"]
-  }, /* @__PURE__ */ React2.createElement(StyledItemLabel, null, label), /* @__PURE__ */ React2.createElement(DSButtonV2, {
-    buttonType: "icon",
-    onClick: (e) => {
-      e.stopPropagation();
-      onClick(e);
-    }
-  }, rightAddon === "ellipsis" ? /* @__PURE__ */ React2.createElement(MoreOptionsVert, null) : /* @__PURE__ */ React2.createElement(ChevronRight, null))), /* @__PURE__ */ React2.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) : /*#__PURE__*/_jsx(Grid, {
+      cols: ['auto', 'min-content']
+    }, void 0, /*#__PURE__*/_jsx(StyledItemLabel, {}, void 0, label), /*#__PURE__*/_jsx(DSButtonV2, {
+      buttonType: "icon",
+      onClick: e => {
+        e.stopPropagation();
+        onClick(e);
+      }
+    }, void 0, rightAddon === 'ellipsis' ? _Ellipsis || (_Ellipsis = /*#__PURE__*/_jsx(Ellipsis, {})) : _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx(ChevronRight, {})))), /*#__PURE__*/_jsx("span", {
+      id: "dropdownmenu-submenu-".concat(dsId),
+      style: {
+        display: 'none'
+      }
+    }, void 0, "Submenu. To open this submenu press the Right Arrow key.")]
+  }));
 };
-SubmenuItem.propTypes = itemProps;
+
 const SubmenuItemWithSchema = describe(SubmenuItem);
 SubmenuItemWithSchema.propTypes = itemProps;
-export {
-  SubmenuItem,
-  SubmenuItemWithSchema
-};
-//# sourceMappingURL=index.js.map
+
+export { SubmenuItem, SubmenuItemWithSchema };

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

@@ -1,19 +1,11 @@
-import * as React from "react";
-import styled from "styled-components";
-import { StyledGlobalMenuItemWrapper } from "../styled";
-const StyledItemWrapper = styled(StyledGlobalMenuItemWrapper)`
-  background-color: ${(props) => props.isSelected ? props.theme.colors.brand[200] : "white"} !important;
-`;
-const StyledItemLabel = styled.div`
-  display: grid;
-  align-items: center;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  width: 100%;
-`;
-export {
-  StyledItemLabel,
-  StyledItemWrapper
-};
-//# sourceMappingURL=styled.js.map
+import styled from 'styled-components';
+import { StyledGlobalMenuItemWrapper } from '../styled.js';
+
+const StyledItemWrapper = /*#__PURE__*/styled(StyledGlobalMenuItemWrapper).withConfig({
+  componentId: "sc-1kei8ft-0"
+})(["background-color:", " !important;"], props => props.isSelected ? props.theme.colors.brand[200] : 'white');
+const StyledItemLabel = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1kei8ft-1"
+})(["display:grid;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;"]);
+
+export { StyledItemLabel, StyledItemWrapper };

package/esm/MenuItem/components/index.js

@@ -1,8 +1,6 @@
-import * as React from "react";
-export * from "./SingleMenuItem/SingleMenuItem";
-export * from "./MultiMenuItem/MultiMenuItem";
-export * from "./MenuItem";
-export * from "./SubmenuItem";
-export * from "./Section";
-export * from "./Separator";
-//# sourceMappingURL=index.js.map
+export { SingleMenuItem } from './SingleMenuItem/SingleMenuItem.js';
+export { MultiMenuItem, MultiMenuItemWithSchema } from './MultiMenuItem/MultiMenuItem.js';
+export { MenuItem, MenuItemWithSchema } from './MenuItem/index.js';
+export { SubmenuItem, SubmenuItemWithSchema } from './SubmenuItem/index.js';
+export { Section } from './Section/index.js';
+export { Separator } from './Separator/index.js';

package/esm/MenuItem/components/styled.js

@@ -1,76 +1,30 @@
-import * as React from "react";
-import styled, { css } from "styled-components";
-import {
-  layout,
-  position,
-  space,
-  sizing
-} from "@xstyled/styled-components";
-const borderOutside = (color, width = 1) => 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 = () => 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 = styled.li`
-  cursor: pointer;
-  height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
-  display: grid;
-  align-items: center;
-  list-style: none;
-  position: relative;
-  ${position}
-  ${layout}
-  ${sizing}
-  ${space}
+import styled, { css } from 'styled-components';
+import { position, layout, sizing, space } from '@xstyled/styled-components';
 
-  ${(props) => {
-  if (props.disabled)
-    return disabledOption();
-  if (props.isFocus)
-    return focusBorderCss(props);
-  if (props.isActive)
-    return activeBorderCss(props);
-  return "";
-}};
+const borderOutside = function (color) {
+  let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  return 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);
+};
 
-  background-color: ${(props) => props.isActive ? props.theme.colors.brand[200] : "white"};
+const disabledOption = () => css(["cursor:not-allowed;*{cursor:not-allowed;}"]);
 
-  &:hover {
-    background-color: ${(props) => !props.disabled && props.theme.colors.brand[200]};
-  }
-`;
-const StyledMenuItemWrapper = styled(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 = styled(StyledGlobalMenuItemWrapper)`
-  ${(props) => props.isSelected || props.isActive ? activeBorderCss(props) : ""};
+const activeBorderCss = props => borderOutside(props.theme.colors.brand[500]);
 
-  padding-right: 0;
-`;
-export {
-  StyledGlobalMenuItemWrapper,
-  StyledMenuItemWrapper,
-  StyledSubmenuItemWrapper
-};
-//# sourceMappingURL=styled.js.map
+const focusBorderCss = props => borderOutside(props.theme.colors.brand[700], 2);
+
+const StyledGlobalMenuItemWrapper = /*#__PURE__*/styled.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:", ";}"], position, layout, sizing, 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(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(StyledGlobalMenuItemWrapper).withConfig({
+  componentId: "sc-jyoobd-2"
+})(["", ";padding-right:0;"], props => props.isSelected || props.isActive ? activeBorderCss(props) : '');
+
+export { StyledGlobalMenuItemWrapper, StyledMenuItemWrapper, StyledSubmenuItemWrapper };

package/esm/MenuItem/index.js

@@ -1,3 +1,6 @@
-import * as React from "react";
-export * from "./components";
-//# sourceMappingURL=index.js.map
+export { SingleMenuItem } from './components/SingleMenuItem/SingleMenuItem.js';
+export { MultiMenuItem, MultiMenuItemWithSchema } from './components/MultiMenuItem/MultiMenuItem.js';
+export { MenuItem, MenuItemWithSchema } from './components/MenuItem/index.js';
+export { SubmenuItem, SubmenuItemWithSchema } from './components/SubmenuItem/index.js';
+export { Section } from './components/Section/index.js';
+export { Separator } from './components/Separator/index.js';

package/esm/MenuItem/props.js

@@ -1,10 +1,10 @@
-import * as React from "react";
-import { noop } from "lodash";
-import { PropTypes } from "react-desc";
+import { noop } from 'lodash';
+import { PropTypes } from 'react-desc';
+
 const defaultProps = {
-  dsId: "",
-  value: "",
-  label: "",
+  dsId: '',
+  value: '',
+  label: '',
   onClick: noop,
   onKeyUp: noop,
   isSelected: false,
@@ -13,14 +13,11 @@ const defaultProps = {
   disabled: false,
   wrapperStyles: {},
   withVirtualization: false,
-  dataTestid: "ds-menu-item"
+  dataTestid: 'ds-menu-item'
 };
 const itemProps = {
-  value: PropTypes.any.description("").defaultValue(""),
-  label: PropTypes.string.description("").defaultValue("")
+  value: PropTypes.any.description('').defaultValue(''),
+  label: PropTypes.string.description('').defaultValue('')
 };
-export {
-  defaultProps,
-  itemProps
-};
-//# sourceMappingURL=props.js.map
+
+export { defaultProps, itemProps };