@elliemae/ds-form 2.0.0-alpha.1 → 2.0.0-alpha.13

package/esm/LargeInputText/DSLargeInputText.js

@@ -1,3 +1,8 @@
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useMemo } from 'react';
@@ -10,43 +15,47 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 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; }
-const CounterArea = aggregatedClasses('div')('counter', 'textarea', ({
-  limitError
-}) => ({
-  'limit-error': limitError
-}));
+const CounterArea = aggregatedClasses('div')('counter', 'textarea', _ref => {
+  let {
+    limitError
+  } = _ref;
+  return {
+    'limit-error': limitError
+  };
+});
 
-const DSLargeInputText = ({
-  containerProps,
-  autoFocus,
-  className,
-  disabled,
-  name,
-  id,
-  maxLength,
-  minLength,
-  placeholder,
-  onClick,
-  onChange,
-  onFocus,
-  onBlur,
-  onKeyUp,
-  onKeyDown,
-  onPaste,
-  value,
-  hasError,
-  required,
-  readOnly,
-  resize,
-  innerRef,
-  ariaLabel,
-  ariaAutocomplete,
-  role,
-  characterLimitCounter,
-  rows,
-  errorLimit,
-  tabIndex
-}) => {
+const DSLargeInputText = _ref2 => {
+  let {
+    containerProps,
+    autoFocus,
+    className,
+    disabled,
+    name,
+    id,
+    maxLength,
+    minLength,
+    placeholder,
+    onClick,
+    onChange,
+    onFocus,
+    onBlur,
+    onKeyUp,
+    onKeyDown,
+    onPaste,
+    value,
+    hasError,
+    required,
+    readOnly,
+    resize,
+    innerRef,
+    ariaLabel,
+    ariaAutocomplete,
+    role,
+    characterLimitCounter,
+    rows,
+    errorLimit,
+    tabIndex
+  } = _ref2;
   const limitError = useMemo(() => characterLimitCounter < String(value).length && characterLimitCounter > 0, [characterLimitCounter, value]);
   const {
     cssClassName,
@@ -67,7 +76,7 @@ const DSLargeInputText = ({
 
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, containerProps), {}, {
-      className: `${cssClassName} ${className}`,
+      className: "".concat(cssClassName, " ").concat(className),
       children: /*#__PURE__*/_jsx("div", {
         className: classNameBlock('wrapper')
       }, void 0, /*#__PURE__*/jsx("textarea", {
@@ -106,7 +115,7 @@ const DSLargeInputText = ({
         limitError
       },
       "data-testid": "counter-area"
-    }, void 0, `${limitError ? `${errorLimit} ${characterLimitCounter} characters.   ` : ''}${String(value).length} / ${characterLimitCounter}`)]
+    }, void 0, "".concat(limitError ? "".concat(errorLimit, " ").concat(characterLimitCounter, " characters.   ") : '').concat(String(value).length, " / ").concat(characterLimitCounter))]
   });
 };
 

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

@@ -0,0 +1,45 @@
+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 { StyledMenuItemWrapper } from '../styled.js';
+import { StyledItemLabel } from './styled.js';
+import { jsx } from 'react/jsx-runtime';
+
+const MenuItem = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, itemProps);
+  const {
+    dsId,
+    label,
+    isSelected,
+    onClick,
+    isFocus,
+    isActive,
+    innerRef,
+    onMouseEnter,
+    onMouseLeave,
+    wrapperStyles
+  } = propsWithDefault;
+  return /*#__PURE__*/jsx(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(Grid, {}, void 0, /*#__PURE__*/_jsx(StyledItemLabel, {}, void 0, label))
+  });
+};
+
+const MenuItemWithSchema = describe(MenuItem);
+MenuItemWithSchema.propTypes = itemProps;
+
+export { MenuItem, MenuItemWithSchema };

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const StyledItemLabel = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1f7cz5s-0"
+})(["display:grid;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;"]);
+
+export { StyledItemLabel };

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

@@ -0,0 +1,62 @@
+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 { jsx } from 'react/jsx-runtime';
+
+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,
+    onClick: onClick,
+    ref: innerRef,
+    onMouseDown: onMouseDown,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    tabIndex: 0,
+    role: "option",
+    className: isActive ? 'ds-list-item-active' : '',
+    "aria-selected": isSelected,
+    style: wrapperStyles,
+    pr: render ? 0 : 40,
+    "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.defaultProps = defaultProps;
+const MultiMenuItemWithSchema = describe(MultiMenuItem);
+MultiMenuItemWithSchema.propTypes = itemProps;
+
+export { MultiMenuItem, MultiMenuItemWithSchema };

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

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

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

@@ -0,0 +1,29 @@
+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__*/jsx(StyledSectionWrapper, {
+    style: wrapperStyles,
+    ref: innerRef,
+    children: render ? render(props) : /*#__PURE__*/_jsx(Grid, {}, void 0, /*#__PURE__*/_jsx(StyledGroupLabel, {}, void 0, label))
+  });
+};
+
+const MenuSectionItemWithSchema = describe(Section);
+MenuSectionItemWithSchema.propTypes = itemProps;
+
+export { Section };

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

@@ -0,0 +1,11 @@
+import { PropTypes } from 'react-desc';
+
+const defaultProps = {
+  label: '',
+  wrapperStyles: {}
+};
+const itemProps = {
+  label: PropTypes.string.description('').defaultValue('')
+};
+
+export { defaultProps, itemProps };

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { position, layout } from 'styled-system';
+
+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);
+
+export { StyledGroupLabel, StyledSectionWrapper };

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

@@ -0,0 +1,21 @@
+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,
+    children: render ? render(props) : _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {}))
+  });
+};
+
+export { Separator };

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { position, layout } from 'styled-system';
+
+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);
+
+export { StyledSeparator, StyledSeparatorWrapper };

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

@@ -0,0 +1,61 @@
+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,
+    isSelected,
+    onClick,
+    isFocus,
+    isActive,
+    innerRef,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    wrapperStyles,
+    render,
+    dataTestid
+  } = props;
+  return /*#__PURE__*/jsx(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,
+    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.defaultProps = defaultProps;
+const SingleMenuItemWithSchema = describe(SingleMenuItem);
+SingleMenuItemWithSchema.propTypes = itemProps;
+
+export { SingleMenuItem };

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

@@ -0,0 +1,129 @@
+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); 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; }
+
+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
+
+  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);
+      timeoutRef.current = null;
+    }
+
+    if (e.target) onMouseEnter(e);
+  }, [isSelected, onClick, onMouseEnter, rightAddon]);
+  const onMouseLeaveHandler = 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(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), {}, {
+      width: '100%'
+    }),
+    minWidth: minWidth,
+    maxHeight: maxHeight
+  }, void 0, /*#__PURE__*/jsxs(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) : /*#__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.")]
+  }));
+};
+
+const SubmenuItemWithSchema = describe(SubmenuItem);
+SubmenuItemWithSchema.propTypes = itemProps;
+
+export { SubmenuItem, SubmenuItemWithSchema };

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,34 @@
+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 _templateObject, _templateObject2;
+
+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);
+};
+
+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);
+
+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, 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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,23 @@
+import { noop } from 'lodash';
+import { PropTypes } from 'react-desc';
+
+const defaultProps = {
+  dsId: '',
+  value: '',
+  label: '',
+  onClick: noop,
+  onKeyUp: noop,
+  isSelected: false,
+  isActive: false,
+  isFocus: false,
+  disabled: false,
+  wrapperStyles: {},
+  withVirtualization: false,
+  dataTestid: 'ds-menu-item'
+};
+const itemProps = {
+  value: PropTypes.any.description('').defaultValue(''),
+  label: PropTypes.string.description('').defaultValue('')
+};
+
+export { defaultProps, itemProps };

package/esm/Radio/Circle.js

@@ -2,10 +2,11 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { withTheme } from '@elliemae/ds-system';
 
-const Circle = ({
-  checked,
-  theme
-}) => {
+const Circle = _ref => {
+  let {
+    checked,
+    theme
+  } = _ref;
   const r = theme.breakpoints.medium.split('px')[0] - window.innerWidth >= 0 ? 6 : 4;
   return /*#__PURE__*/_jsx("svg", {
     width: "100%",

package/esm/Radio/DSRadio.js

@@ -1,3 +1,8 @@
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
@@ -64,7 +69,7 @@ const DSRadio = _ref => {
       value: value
     })), /*#__PURE__*/jsx("span", {
       ref: otherProps.innerRef,
-      "aria-checked": disabled ? false : checked,
+      "aria-checked": checked,
       "aria-disabled": disabled,
       className: classNameElement('input-button'),
       onKeyDown: e => {
@@ -79,7 +84,7 @@ const DSRadio = _ref => {
       },
       role: "radio",
       style: style,
-      tabIndex: tabIndex,
+      tabIndex: disabled ? -1 : tabIndex,
       value: value,
       children: /*#__PURE__*/_jsx(Circle, {
         checked: checked