@elliemae/ds-form 1.60.0 → 2.0.0-alpha.12

package/esm/MenuItem/components/MultiMenuItem/MultiMenuItem.js

@@ -1,30 +1,32 @@
-import React from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import { describe } from 'react-desc';
 import { DSControlledCheckbox } from '@elliemae/ds-controlled-form';
 import { itemProps, defaultProps } from '../../props.js';
 import { StyledItemContent } from './styled.js';
 import { StyledGlobalMenuItemWrapper } from '../styled.js';
-import 'lodash';
-import 'styled-components';
-import 'styled-system';
+import { jsx } from 'react/jsx-runtime';
 
-var MultiMenuItem = function MultiMenuItem(props) {
-  var dsId = props.dsId,
-      value = props.value,
-      label = props.label,
-      disabled = props.disabled,
-      isSelected = props.isSelected,
-      isActive = props.isActive,
-      onClick = props.onClick,
-      isFocus = props.isFocus,
-      innerRef = props.innerRef,
-      onMouseEnter = props.onMouseEnter,
-      onMouseLeave = props.onMouseLeave,
-      onMouseDown = props.onMouseDown,
-      wrapperStyles = props.wrapperStyles,
-      render = props.render;
-  return /*#__PURE__*/React.createElement(StyledGlobalMenuItemWrapper, {
+const MultiMenuItem = props => {
+  const {
+    dsId,
+    value,
+    label,
+    disabled,
+    isSelected,
+    isActive,
+    onClick,
+    isFocus,
+    innerRef,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown,
+    wrapperStyles,
+    render
+  } = props;
+  return /*#__PURE__*/jsx(StyledGlobalMenuItemWrapper, {
     id: dsId,
+    disabled: disabled,
     isActive: isActive,
     isSelected: isSelected,
     isFocus: isFocus,
@@ -39,23 +41,22 @@ var MultiMenuItem = function MultiMenuItem(props) {
     "aria-selected": isSelected,
     style: wrapperStyles,
     pr: render ? 0 : 40,
-    "data-testid": "combobox-option"
-  }, /*#__PURE__*/React.createElement(StyledItemContent, null, render ? render(props) : /*#__PURE__*/React.createElement(DSControlledCheckbox, {
-    disabled: disabled,
-    checked: isSelected,
-    onMouseDown: onMouseDown,
-    name: value,
-    ariaLabel: label,
-    label: label,
-    id: value,
-    onChange: onClick
-  })));
+    "data-testid": "combobox-option",
+    children: /*#__PURE__*/_jsx(StyledItemContent, {}, void 0, render ? render(props) : /*#__PURE__*/_jsx(DSControlledCheckbox, {
+      disabled: disabled,
+      checked: isSelected,
+      onMouseDown: onMouseDown,
+      name: value,
+      ariaLabel: label,
+      label: label,
+      id: value,
+      onChange: onClick
+    }))
+  });
 };
 
-MultiMenuItem.propTypes = itemProps;
 MultiMenuItem.defaultProps = defaultProps;
-var MultiMenuItemWithSchema = describe(MultiMenuItem);
+const MultiMenuItemWithSchema = describe(MultiMenuItem);
 MultiMenuItemWithSchema.propTypes = itemProps;
 
 export { MultiMenuItem, MultiMenuItemWithSchema };
-//# sourceMappingURL=MultiMenuItem.js.map

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

@@ -1,8 +1,7 @@
 import styled from 'styled-components';
 
-var StyledItemContent = /*#__PURE__*/styled.div.withConfig({
+const StyledItemContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1stlix4-0"
 })(["display:flex;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;"]);
 
 export { StyledItemContent };
-//# sourceMappingURL=styled.js.map

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

@@ -1,28 +1,29 @@
-import React from 'react';
+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 'styled-components';
-import 'styled-system';
+import { jsx } from 'react/jsx-runtime';
 
-var Section = function Section(props) {
-  var propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, MenuSectionItemWithSchema.toTypescript());
-  var label = props.label,
-      wrapperStyles = props.wrapperStyles,
-      innerRef = props.innerRef,
-      render = props.render;
-  return /*#__PURE__*/React.createElement(StyledSectionWrapper, {
+const Section = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, itemProps);
+  const {
+    label,
+    wrapperStyles,
+    innerRef,
+    render
+  } = props;
+  return /*#__PURE__*/jsx(StyledSectionWrapper, {
     style: wrapperStyles,
-    ref: innerRef
-  }, render ? render(props) : /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(StyledGroupLabel, null, label)));
+    ref: innerRef,
+    children: render ? render(props) : /*#__PURE__*/_jsx(Grid, {}, void 0, /*#__PURE__*/_jsx(StyledGroupLabel, {}, void 0, label))
+  });
 };
 
-Section.propTypes = itemProps;
-var MenuSectionItemWithSchema = describe(Section);
+const MenuSectionItemWithSchema = describe(Section);
 MenuSectionItemWithSchema.propTypes = itemProps;
 
 export { Section };
-//# sourceMappingURL=index.js.map

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

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

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

@@ -1,14 +1,11 @@
 import styled from 'styled-components';
 import { position, layout } from 'styled-system';
 
-var StyledGroupLabel = /*#__PURE__*/styled.span.withConfig({
+const StyledGroupLabel = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-6xya9j-0"
-})(["font-family:12px;color:", ";"], function (props) {
-  return props.theme.colors.neutral[500];
-});
-var StyledSectionWrapper = /*#__PURE__*/styled.li.withConfig({
+})(["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;"], position, layout);
+})(["", " ", " list-style:none;padding:0px 16px;height:24px;display:flex;align-items:center;"], position, layout);
 
 export { StyledGroupLabel, StyledSectionWrapper };
-//# sourceMappingURL=styled.js.map

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

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

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

@@ -1,14 +1,11 @@
 import styled from 'styled-components';
 import { position, layout } from 'styled-system';
 
-var StyledSeparator = /*#__PURE__*/styled.hr.withConfig({
+const StyledSeparator = /*#__PURE__*/styled.hr.withConfig({
   componentId: "sc-1xat2d9-0"
-})(["border:none;height:1px;background-color:", ";;"], function (props) {
-  return props.theme.colors.neutral[500];
-});
-var StyledSeparatorWrapper = /*#__PURE__*/styled.li.withConfig({
+})(["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;margin:0px 16px;", " ", ""], position, layout);
+})(["list-style:none;padding:0px 16px;", " ", ""], position, layout);
 
 export { StyledSeparator, StyledSeparatorWrapper };
-//# sourceMappingURL=styled.js.map

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

@@ -1,30 +1,30 @@
-import React from 'react';
+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 { StyledItemChecked, StyledItemLabel } from './styled.js';
 import { StyledGlobalMenuItemWrapper } from '../styled.js';
-import 'lodash';
-import 'styled-components';
-import 'styled-system';
+import { jsx } from 'react/jsx-runtime';
 
-var SingleMenuItem = function SingleMenuItem(props) {
-  var dsId = props.dsId,
-      label = props.label,
-      isSelected = props.isSelected,
-      onClick = props.onClick,
-      isFocus = props.isFocus,
-      isActive = props.isActive,
-      innerRef = props.innerRef,
-      onMouseDown = props.onMouseDown,
-      onMouseEnter = props.onMouseEnter,
-      onMouseLeave = props.onMouseLeave,
-      wrapperStyles = props.wrapperStyles,
-      render = props.render,
-      dataTestid = props.dataTestid;
-  return /*#__PURE__*/React.createElement(StyledGlobalMenuItemWrapper, {
+const SingleMenuItem = props => {
+  const {
+    dsId,
+    label,
+    isSelected,
+    onClick,
+    isFocus,
+    isActive,
+    innerRef,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    wrapperStyles,
+    render,
+    dataTestid
+  } = props;
+  return /*#__PURE__*/jsx(StyledGlobalMenuItemWrapper, {
     "aria-selected": isSelected,
     id: dsId,
     role: "option",
@@ -39,23 +39,23 @@ var SingleMenuItem = function SingleMenuItem(props) {
     className: isActive ? 'ds-list-item-active' : '',
     style: wrapperStyles,
     pr: render ? 0 : 40,
-    "data-testid": dataTestid
-  }, render ? render(props) : /*#__PURE__*/React.createElement(Grid, {
-    cols: ['min-content', 'auto'],
-    height: "16px",
-    gutter: "xxs"
-  }, /*#__PURE__*/React.createElement(StyledItemChecked, null, isSelected && /*#__PURE__*/React.createElement(Checkmark, {
-    size: "s",
-    color: ['brand-primary', '600']
-  })), /*#__PURE__*/React.createElement(StyledItemLabel, null, /*#__PURE__*/React.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;
-var SingleMenuItemWithSchema = describe(SingleMenuItem);
+const SingleMenuItemWithSchema = describe(SingleMenuItem);
 SingleMenuItemWithSchema.propTypes = itemProps;
 
 export { SingleMenuItem };
-//# sourceMappingURL=SingleMenuItem.js.map

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

@@ -1,6 +1,12 @@
+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 _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+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';
@@ -11,69 +17,66 @@ import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@e
 import { itemProps, defaultProps } from '../../props.js';
 import { StyledItemLabel } from './styled.js';
 import { StyledSubmenuItemWrapper } from '../styled.js';
-import 'lodash';
-import 'styled-components';
-import 'styled-system';
+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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var SubmenuItem = function SubmenuItem(props) {
-  var propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, SubmenuItemWithSchema.toTypescript());
-  var dsId = propsWithDefault.dsId,
-      label = propsWithDefault.label,
-      isSelected = propsWithDefault.isSelected,
-      isActive = propsWithDefault.isActive,
-      _onClick = propsWithDefault.onClick,
-      isFocus = propsWithDefault.isFocus,
-      rightAddon = propsWithDefault.rightAddon,
-      options = propsWithDefault.options,
-      selectedOptions = propsWithDefault.selectedOptions,
-      innerRef = propsWithDefault.innerRef,
-      onMouseEnter = propsWithDefault.onMouseEnter,
-      onMouseLeave = propsWithDefault.onMouseLeave,
-      onKeyDown = propsWithDefault.onKeyDown,
-      onOptionClick = propsWithDefault.onOptionClick,
-      onClickOutside = propsWithDefault.onClickOutside,
-      wrapperStyles = propsWithDefault.wrapperStyles,
-      minWidth = propsWithDefault.minWidth,
-      maxHeight = propsWithDefault.maxHeight,
-      render = propsWithDefault.render; // If we don't delay the opening of the poppers, the position will not be placed correctly
+const SubmenuItem = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, 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
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      delayedIsOpened = _useState2[0],
-      setDelayedIsOpened = _useState2[1];
-
-  useEffect(function () {
+  const [delayedIsOpened, setDelayedIsOpened] = useState(false);
+  useEffect(() => {
     setDelayedIsOpened(isSelected);
   }, [isSelected]);
-  var timeoutRef = useRef(null);
-  var onMouseEnterHandler = useCallback(function (e) {
+  const timeoutRef = useRef(null);
+  const onMouseEnterHandler = useCallback(e => {
     if (rightAddon !== 'ellipsis') {
-      if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);else if (!isSelected) _onClick(e);
+      if (timeoutRef.current !== null) clearTimeout(timeoutRef.current);else if (!isSelected) onClick(e);
       timeoutRef.current = null;
     }
 
     if (e.target) onMouseEnter(e);
-  }, [isSelected, _onClick, onMouseEnter, rightAddon]);
-  var onMouseLeaveHandler = useCallback(function (e) {
+  }, [isSelected, onClick, onMouseEnter, rightAddon]);
+  const onMouseLeaveHandler = useCallback(e => {
     if (rightAddon !== 'ellipsis') {
       if (timeoutRef.current === null) {
-        timeoutRef.current = setTimeout(function () {
+        timeoutRef.current = setTimeout(() => {
           timeoutRef.current = null;
-
-          _onClick(e);
+          onClick(e);
         }, 300);
       }
     }
 
     onMouseLeave(e);
-  }, [_onClick, onMouseLeave, rightAddon]);
-  return /*#__PURE__*/React.createElement(DSDropdownMenuV2, {
+  }, [onClick, onMouseLeave, rightAddon]);
+  return /*#__PURE__*/_jsx(DSDropdownMenuV2, {
     isOpened: delayedIsOpened,
     options: options,
     onOptionClick: onOptionClick,
@@ -90,7 +93,7 @@ var SubmenuItem = function SubmenuItem(props) {
     }),
     minWidth: minWidth,
     maxHeight: maxHeight
-  }, /*#__PURE__*/React.createElement(StyledSubmenuItemWrapper, {
+  }, void 0, /*#__PURE__*/jsxs(StyledSubmenuItemWrapper, {
     "aria-selected": isSelected,
     pr: 0,
     id: dsId,
@@ -98,31 +101,29 @@ var SubmenuItem = function SubmenuItem(props) {
     isSelected: isSelected,
     isActive: isActive,
     isFocus: isFocus,
-    onClick: _onClick,
+    onClick: onClick,
     ref: innerRef,
     onMouseEnter: onMouseEnterHandler,
     onMouseLeave: onMouseLeaveHandler,
-    "aria-describedby": "dropdownmenu-submenu-".concat(dsId)
-  }, render ? render(props) : /*#__PURE__*/React.createElement(Grid, {
-    cols: ['auto', 'min-content']
-  }, /*#__PURE__*/React.createElement(StyledItemLabel, null, label), /*#__PURE__*/React.createElement(DSButtonV2, {
-    buttonType: "icon",
-    onClick: function onClick(e) {
-      e.stopPropagation();
-
-      _onClick(e);
-    }
-  }, rightAddon === 'ellipsis' ? /*#__PURE__*/React.createElement(Ellipsis, null) : /*#__PURE__*/React.createElement(ChevronRight, null))), /*#__PURE__*/React.createElement("span", {
-    id: "dropdownmenu-submenu-".concat(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;
-var SubmenuItemWithSchema = describe(SubmenuItem);
+const SubmenuItemWithSchema = describe(SubmenuItem);
 SubmenuItemWithSchema.propTypes = itemProps;
 
 export { SubmenuItem, SubmenuItemWithSchema };
-//# sourceMappingURL=index.js.map

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

@@ -1,15 +1,11 @@
 import styled from 'styled-components';
 import { StyledGlobalMenuItemWrapper } from '../styled.js';
-import 'styled-system';
 
-var StyledItemWrapper = /*#__PURE__*/styled(StyledGlobalMenuItemWrapper).withConfig({
+const StyledItemWrapper = /*#__PURE__*/styled(StyledGlobalMenuItemWrapper).withConfig({
   componentId: "sc-1kei8ft-0"
-})(["background-color:", " !important;"], function (props) {
-  return props.isSelected ? props.theme.colors.brand[200] : 'white';
-});
-var StyledItemLabel = /*#__PURE__*/styled.div.withConfig({
+})(["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 };
-//# sourceMappingURL=styled.js.map

package/esm/MenuItem/components/index.js

@@ -4,29 +4,3 @@ 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';
-import 'react';
-import 'react-desc';
-import '@elliemae/ds-truncated-tooltip-text';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-grid';
-import '../props.js';
-import 'lodash';
-import './SingleMenuItem/styled.js';
-import 'styled-components';
-import './styled.js';
-import 'styled-system';
-import '@elliemae/ds-controlled-form';
-import './MultiMenuItem/styled.js';
-import '@elliemae/ds-props-helpers';
-import './MenuItem/styled.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
-import '@elliemae/ds-icons/ChevronRight';
-import '@elliemae/ds-dropdownmenu';
-import './SubmenuItem/styled.js';
-import './Section/props.js';
-import './Section/styled.js';
-import './Separator/styled.js';
-//# sourceMappingURL=index.js.map

package/esm/MenuItem/components/styled.js

@@ -1,42 +1,34 @@
-import styled, { css } from 'styled-components';
-import { position, layout, space } from 'styled-system';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { css } from '@elliemae/ds-system';
+import { position, layout } from 'styled-system';
 
-var borderOutside = function borderOutside(color) {
-  var 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);
-};
+var _templateObject, _templateObject2;
 
-var activeBorderCss = function activeBorderCss(props) {
-  return borderOutside(props.theme.colors.brand[500]);
+const borderOutside = function (color) {
+  let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  :after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: ", "px solid ", ";\n    pointer-events: none;\n    z-index: 7;\n  }\n"])), width, color);
 };
 
-var focusBorderCss = function focusBorderCss(props) {
-  return borderOutside(props.theme.colors.brand[700], 2);
-};
+const disabledOption = () => css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n"])));
+
+const activeBorderCss = props => borderOutside(props.theme.colors.brand[500]);
+
+const focusBorderCss = props => borderOutside(props.theme.colors.brand[700], 2);
 
-var StyledGlobalMenuItemWrapper = /*#__PURE__*/styled.li.withConfig({
+const StyledGlobalMenuItemWrapper = /*#__PURE__*/styled.li.withConfig({
   componentId: "sc-jyoobd-0"
-})(["cursor:pointer;height:32px;padding-left:16px;padding-right:40px;display:grid;align-items:center;list-style:none;position:relative;", " ", " ", " ", ";background-color:", ";&:hover{background-color:", ";}"], position, layout, space, function (props) {
+})(["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, props => {
+  if (props.disabled) return disabledOption();
   if (props.isFocus) return focusBorderCss(props);
   if (props.isActive) return activeBorderCss(props);
   return '';
-}, function (props) {
-  return props.isActive ? props.theme.colors.brand[200] : 'white';
-}, function (props) {
-  return props.theme.colors.brand[200];
-});
-var StyledMenuItemWrapper = /*#__PURE__*/styled(StyledGlobalMenuItemWrapper).withConfig({
+}, 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;", ";"], function (props) {
-  return props.isSelected ? props.theme.colors.brand[200] : 'white';
-}, function (props) {
-  return props.isSelected && !props.isFocus ? activeBorderCss(props) : '';
-});
-var StyledSubmenuItemWrapper = /*#__PURE__*/styled(StyledGlobalMenuItemWrapper).withConfig({
+})(["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;"], function (props) {
-  return props.isSelected || props.isActive ? activeBorderCss(props) : '';
-});
+})(["", ";padding-right:0;"], props => props.isSelected || props.isActive ? activeBorderCss(props) : '');
 
 export { StyledGlobalMenuItemWrapper, StyledMenuItemWrapper, StyledSubmenuItemWrapper };
-//# sourceMappingURL=styled.js.map