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

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

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

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

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

package/cjs/MenuItem/components/index.js

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

package/cjs/MenuItem/components/styled.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var styledSystem = require('styled-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject, _templateObject2;
+
+const borderOutside = function (color) {
+  let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  return dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\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 = () => dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\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__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:", ";}"], styledSystem.position, styledSystem.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__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) : '');
+
+exports.StyledGlobalMenuItemWrapper = StyledGlobalMenuItemWrapper;
+exports.StyledMenuItemWrapper = StyledMenuItemWrapper;
+exports.StyledSubmenuItemWrapper = StyledSubmenuItemWrapper;

package/cjs/MenuItem/index.js

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

package/cjs/MenuItem/props.js

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

package/cjs/Radio/Circle.js

@@ -8,15 +8,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-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__default['default']("svg", {
+  return /*#__PURE__*/_jsx__default["default"]("svg", {
     width: "100%",
     height: "100%"
-  }, void 0, /*#__PURE__*/_jsx__default['default']("circle", {
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("circle", {
     className: checked ? 'checked' : 'unchecked',
     r: r,
     cx: "50%",

package/cjs/Radio/DSRadio.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+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 _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -21,7 +26,7 @@ const _excluded = ["containerProps", "className", "style", "labelText", "htmlFor
 
 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__default['default'](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; }
+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__default["default"](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 DSRadio = _ref => {
   let {
@@ -40,7 +45,7 @@ const DSRadio = _ref => {
     children,
     tabIndex
   } = _ref,
-      otherProps = _objectWithoutProperties__default['default'](_ref, _excluded);
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   const {
     cssClassName,
@@ -53,7 +58,7 @@ const DSRadio = _ref => {
   const checkRef = React.useRef(null);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
     className: cssClassName,
-    children: [/*#__PURE__*/_jsx__default['default']("label", {
+    children: [/*#__PURE__*/_jsx__default["default"]("label", {
       className: classNameElement('label'),
       htmlFor: htmlFor
     }, void 0, /*#__PURE__*/jsxRuntime.jsx("input", _objectSpread(_objectSpread({}, otherProps), {}, {
@@ -74,7 +79,7 @@ const DSRadio = _ref => {
       value: value
     })), /*#__PURE__*/jsxRuntime.jsx("span", {
       ref: otherProps.innerRef,
-      "aria-checked": disabled ? false : checked,
+      "aria-checked": checked,
       "aria-disabled": disabled,
       className: classNameElement('input-button'),
       onKeyDown: e => {
@@ -89,14 +94,14 @@ const DSRadio = _ref => {
       },
       role: "radio",
       style: style,
-      tabIndex: tabIndex,
+      tabIndex: disabled ? -1 : tabIndex,
       value: value,
-      children: /*#__PURE__*/_jsx__default['default'](Circle, {
+      children: /*#__PURE__*/_jsx__default["default"](Circle, {
         checked: checked
       })
-    }), /*#__PURE__*/_jsx__default['default']("span", {
+    }), /*#__PURE__*/_jsx__default["default"]("span", {
       className: classNameElement('label-text')
-    }, void 0, labelText)), children && /*#__PURE__*/_jsx__default['default']("div", {
+    }, void 0, labelText)), children && /*#__PURE__*/_jsx__default["default"]("div", {
       className: classNameElement('radio-children')
     }, void 0, children)]
   }));
@@ -177,4 +182,4 @@ const DSRadioWithSchema = reactDesc.describe(DSRadio).description('Radio button
 DSRadioWithSchema.propTypes = radioProps;
 
 exports.DSRadioWithSchema = DSRadioWithSchema;
-exports['default'] = DSRadio;
+exports["default"] = DSRadio;

package/cjs/Radio/index.js

@@ -7,4 +7,4 @@ var DSRadio = require('./DSRadio.js');
 
 
 exports.DSRadioWithSchema = DSRadio.DSRadioWithSchema;
-exports.default = DSRadio['default'];
+exports["default"] = DSRadio["default"];

package/cjs/RadioGroup/DSRadioGroup.js

@@ -4,6 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.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 GroupItem = require('@elliemae/ds-shared/GroupContext/GroupItem');
@@ -25,30 +32,31 @@ var Group__default = /*#__PURE__*/_interopDefaultLegacy(Group);
 
 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__default['default'](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; }
+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__default["default"](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 emClassPrefix = 'em-ds';
-const baseClass = `${emClassPrefix}-radio-group`;
+const baseClass = "".concat(emClassPrefix, "-radio-group");
 
-const RadioItem = props => /*#__PURE__*/_jsx__default['default'](GroupItem__default['default'], {
-  render: context => /*#__PURE__*/jsxRuntime.jsx(DSRadio['default'], _objectSpread(_objectSpread({}, props), {}, {
+const RadioItem = props => /*#__PURE__*/_jsx__default["default"](GroupItem__default["default"], {
+  render: context => /*#__PURE__*/jsxRuntime.jsx(DSRadio["default"], _objectSpread(_objectSpread({}, props), {}, {
     checked: context.activeValue === props.value,
     disabled: context.disabled || props.disabled,
     onChange: context.onChange
   }))
 });
 
-const DSRadioGroup = ({
-  containerProps,
-  onChange,
-  activeValue,
-  children,
-  orientation,
-  disabled,
-  truncateText,
-  labelProps
-}) => {
+const DSRadioGroup = _ref => {
+  let {
+    containerProps,
+    onChange,
+    activeValue,
+    children,
+    orientation,
+    disabled,
+    truncateText,
+    labelProps
+  } = _ref;
   const checkRefs = [];
-  const count = React__default['default'].Children.count(children);
+  const count = React__default["default"].Children.count(children);
 
   const onKeyDown = (e, index) => {
     if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
@@ -60,16 +68,16 @@ const DSRadioGroup = ({
     }
   };
 
-  const group = /*#__PURE__*/_jsx__default['default'](Group__default['default'], {
+  const group = /*#__PURE__*/_jsx__default["default"](Group__default["default"], {
     activeValue: activeValue,
     disabled: disabled,
     onChange: onChange
   }, void 0, /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     "data-testid": "ds-radiogroup"
   }, labelProps && labelProps.labelText ? {} : containerProps), {}, {
-    className: `${baseClass} ${baseClass}--${orientation}`,
+    className: "".concat(baseClass, " ").concat(baseClass, "--").concat(orientation),
     role: "group",
-    children: React__default['default'].Children.map(children, (child, index) => /*#__PURE__*/jsxRuntime.jsx(RadioItem, _objectSpread(_objectSpread({}, child.props), {}, {
+    children: React__default["default"].Children.map(children, (child, index) => /*#__PURE__*/jsxRuntime.jsx(RadioItem, _objectSpread(_objectSpread({}, child.props), {}, {
       innerRef: t => {
         checkRefs.push(t);
       },
@@ -79,10 +87,10 @@ const DSRadioGroup = ({
 
   if (labelProps && labelProps.labelText) {
     return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
-      className: `${baseClass}-form-item-layout-wrapper`
+      className: "".concat(baseClass, "-form-item-layout-wrapper")
     }, containerProps), {}, {
       role: "group",
-      children: /*#__PURE__*/jsxRuntime.jsx(DSFormItemLayout['default'], _objectSpread(_objectSpread({}, labelProps), {}, {
+      children: /*#__PURE__*/jsxRuntime.jsx(DSFormItemLayout["default"], _objectSpread(_objectSpread({}, labelProps), {}, {
         inputComponent: group,
         onChange: onChange,
         truncateText: truncateText
@@ -98,4 +106,4 @@ const DSRadioGroupWithSchema = reactDesc.describe(DSRadioGroup);
 DSRadioGroupWithSchema.propTypes = props.props;
 
 exports.DSRadioGroupWithSchema = DSRadioGroupWithSchema;
-exports['default'] = DSRadioGroup;
+exports["default"] = DSRadioGroup;

package/cjs/RadioGroup/index.js

@@ -4,4 +4,4 @@ var DSRadioGroup = require('./DSRadioGroup.js');
 
 
 
-module.exports = DSRadioGroup['default'];
+module.exports = DSRadioGroup["default"];

package/cjs/RequiredMark/RequiredMark.js

@@ -12,20 +12,21 @@ const {
   cssClassName
 } = dsClassnames.convertPropToCssClassName('form-required-mark');
 
-const RequiredMark = ({
-  required = false,
-  optional = false
-}) => {
+const RequiredMark = _ref => {
+  let {
+    required = false,
+    optional = false
+  } = _ref;
   if (!required && !optional) return null;
 
   if (required) {
-    return /*#__PURE__*/_jsx__default['default']("span", {
-      className: `${cssClassName}`
+    return /*#__PURE__*/_jsx__default["default"]("span", {
+      className: "".concat(cssClassName)
     }, void 0, "\u25CF");
   }
 
-  return /*#__PURE__*/_jsx__default['default']("span", {
-    className: `${cssClassName} optional-mark`
+  return /*#__PURE__*/_jsx__default["default"]("span", {
+    className: "".concat(cssClassName, " optional-mark")
   }, void 0, "\u26AC");
 };
 

package/cjs/SearchBox/DSSearchBox.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var reactDesc = require('react-desc');
-var SearchIcon = require('@elliemae/ds-icons/Search');
+var dsIcons = require('@elliemae/ds-icons');
 var dsIcon = require('@elliemae/ds-icon');
-var CloseXsmall = require('@elliemae/ds-icons/CloseXsmall');
 var styled = require('./styled.js');
 var SButton = require('./SButton.js');
 var useSearch = require('./useSearch.js');
@@ -18,32 +17,31 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
-var CloseXsmall__default = /*#__PURE__*/_interopDefaultLegacy(CloseXsmall);
 
 var _Search;
 
-const DSSearchBox = ({
-  className,
-  clearable,
-  containerProps,
-  disableButton,
-  disabled,
-  innerRef,
-  onBlur,
-  onChange,
-  onKeyUp,
-  onSearch,
-  onClearButtonClick,
-  placeholder,
-  property,
-  readOnly,
-  searchOnEnter,
-  onSearchButtonClick,
-  showIcon,
-  style,
-  value
-}) => {
+const DSSearchBox = _ref => {
+  let {
+    className,
+    clearable,
+    containerProps,
+    disableButton,
+    disabled,
+    innerRef,
+    onBlur,
+    onChange,
+    onKeyUp,
+    onSearch,
+    onClearButtonClick,
+    placeholder,
+    property,
+    readOnly,
+    searchOnEnter,
+    onSearchButtonClick,
+    showIcon,
+    style,
+    value
+  } = _ref;
   const {
     searchValue,
     handleChange,
@@ -63,33 +61,36 @@ const DSSearchBox = ({
   const shouldShowClearIcon = clearable && (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length) > 0;
   const shouldShowSearchIcon = !shouldShowClearIcon && showIcon;
   const shouldShowAnyIcon = shouldShowClearIcon || shouldShowSearchIcon;
-  const PureSearchboxIcon = React__default['default'].useMemo(() => {
-    let Icon = _Search || (_Search = /*#__PURE__*/_jsx__default['default'](SearchIcon__default['default'], {}));
+  const PureSearchboxIcon = React__default["default"].useMemo(() => {
+    let Icon = _Search || (_Search = /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {
+      "aria-label": "Search"
+    }));
 
     let handleOnClick = () => handleSearch(true);
 
     if (!shouldShowAnyIcon) return null;
 
     if (shouldShowClearIcon) {
-      Icon = /*#__PURE__*/_jsx__default['default'](CloseXsmall__default['default'], {
-        color: dsIcon.DSIconColors.PRIMARY
+      Icon = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
+        color: dsIcon.DSIconColors.PRIMARY,
+        "aria-label": "Clear input"
       });
       handleOnClick = handleClear;
     }
 
-    return /*#__PURE__*/_jsx__default['default'](SButton.SButton, {
+    return /*#__PURE__*/_jsx__default["default"](SButton.SButton, {
       disabled: disabled || disableButton,
       icon: Icon,
       onClick: handleOnClick,
       dataTestid: shouldShowClearIcon ? 'ds-searchbox-button-clear' : 'ds-searchbox-button'
     });
   }, [shouldShowClearIcon, shouldShowSearchIcon, shouldShowAnyIcon, disabled, disableButton, handleSearch, handleClear]);
-  return /*#__PURE__*/_jsx__default['default']("div", {
+  return /*#__PURE__*/_jsx__default["default"]("div", {
     style: {
       position: 'relative',
       zIndex: 0
     }
-  }, void 0, /*#__PURE__*/_jsx__default['default'](styled.SearchBoxTextBox, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.SearchBoxTextBox, {
     className: className,
     containerProps: containerProps,
     disabled: disabled,
@@ -109,4 +110,4 @@ const SearchBoxWithSchema = reactDesc.describe(DSSearchBox);
 SearchBoxWithSchema.propTypes = props.searchBoxProps;
 
 exports.SearchBoxWithSchema = SearchBoxWithSchema;
-exports['default'] = DSSearchBox;
+exports["default"] = DSSearchBox;