@elliemae/ds-controlled-form 2.4.2-rc.0 → 2.4.2-rc.12

package/cjs/mask-hook/hooks/index.js

@@ -20,7 +20,6 @@ exports.UseSSNMaskWithSchema = useSSNMask.UseSSNMaskWithSchema;
 exports.getSSNMaskedValue = useSSNMask.getSSNMaskedValue;
 exports.useSSNMask = useSSNMask.useSSNMask;
 exports.UseRegExpMaskWithSchema = useRegExpMask.UseRegExpMaskWithSchema;
-exports.isRegExp = useRegExpMask.isRegExp;
 exports.useRegExpMask = useRegExpMask.useRegExpMask;
 exports.UseZipCodeMaskWithSchema = useZipCodeMask.UseZipCodeMaskWithSchema;
 exports.getUseZipMaskedValue = useZipCodeMask.getUseZipMaskedValue;

package/cjs/mask-hook/hooks/usePhoneMask.js

@@ -22,8 +22,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 
 const _excluded = ["valueSetter", "onChange", "onKeyDown", "onBlur"];
-const phoneSpecialChars = [['(', 0], [') ', 4], ['-', 9]];
-const internationalPhoneSpecialChars = [['+1 (', 0], [') ', 7], ['-', 12]];
+const phoneSpecialChars = [['(', 0], [') ', 4], [' - ', 9]];
+const internationalPhoneSpecialChars = [['+1 (', 0], [') ', 7], [' - ', 12]];
 
 const conformValue = (rawValue, cursorPos, lastKeyCode, opts) => {
   const characters = rawValue.split(''); // Work with digits only

package/cjs/mask-hook/hooks/useRegExpMask.js

@@ -118,5 +118,4 @@ const UseRegExpMaskWithSchema = dsPropsHelpers.describe(useRegExpMask);
 UseRegExpMaskWithSchema.propTypes = reactDescPropTypes.DSMaskRegExpHookPropsTypes;
 
 exports.UseRegExpMaskWithSchema = UseRegExpMaskWithSchema;
-exports.isRegExp = isRegExp;
 exports.useRegExpMask = useRegExpMask;

package/cjs/mask-hook/index.js

@@ -20,7 +20,6 @@ exports.UseSSNMaskWithSchema = useSSNMask.UseSSNMaskWithSchema;
 exports.getSSNMaskedValue = useSSNMask.getSSNMaskedValue;
 exports.useSSNMask = useSSNMask.useSSNMask;
 exports.UseRegExpMaskWithSchema = useRegExpMask.UseRegExpMaskWithSchema;
-exports.isRegExp = useRegExpMask.isRegExp;
 exports.useRegExpMask = useRegExpMask.useRegExpMask;
 exports.UseZipCodeMaskWithSchema = useZipCodeMask.UseZipCodeMaskWithSchema;
 exports.getUseZipMaskedValue = useZipCodeMask.getUseZipMaskedValue;

package/cjs/text-input/styled/borders.js

@@ -15,7 +15,7 @@ const readOnlyBorderCss = dsSystem.css(_templateObject2 || (_templateObject2 = _
 const disabledBorderCss = commonBorderCss;
 const hasErrorBorderCss = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), dsSystem.th.color('danger-900'));
 const hoverBorderCss = dsSystem.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), dsSystem.th.color('brand-700'));
-const focusBorderCss = dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid transparent;\n  outline: 2px solid ", ";\n  outline-offset: -1px;\n"])), dsSystem.th.color('brand-700'));
+const focusBorderCss = dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid transparent;\n  outline: 2px solid ", ";\n  outline-offset: -2px;\n"])), dsSystem.th.color('brand-700'));
 const getBorderCss = props => {
   if (props.isDisabled) return disabledBorderCss;
   if (props.hasFocus) return focusBorderCss;

package/esm/autocomplete/config/useAutocomplete.js

@@ -27,7 +27,6 @@ const useAutocomplete = props => {
   const [focusOptionIdx, setCurrentOption] = useState('');
   const inputRef = useRef(null);
   const listRef = useRef(null);
-  const selectedOptionsRef = useRef(null);
   const {
     options,
     filter
@@ -66,12 +65,11 @@ const useAutocomplete = props => {
     inputRef,
     listRef,
     focusOptionIdx,
-    selectedOptionsRef,
     setCurrentOption,
     scrollOptionIntoView,
     setReferenceElement,
     setShowPopover
-  }), [scrollOptionIntoView, propsWithDefault, virtualListHelpers, focusOptionIdx, showPopover, referenceElement, inputRef, selectedOptionsRef, listRef]);
+  }), [scrollOptionIntoView, propsWithDefault, virtualListHelpers, focusOptionIdx, showPopover, referenceElement, inputRef, listRef]);
   return ctx;
 };
 

package/esm/autocomplete/parts/A11yFocusedOption.js

@@ -0,0 +1,32 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import { useContext, useMemo } from 'react';
+import { styled } from '@elliemae/ds-system';
+import { AutocompleteContext } from '../AutocompleteCTX.js';
+import { getSelectableOptions } from '../utils/listHelper.js';
+
+var _templateObject;
+const isSeparator = el => (el === null || el === void 0 ? void 0 : el.type) === 'separator';
+const StyledA11ySelectedValues = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n"])));
+const A11yFocusedOption = () => {
+  const {
+    props: {
+      options
+    },
+    focusOptionIdx,
+    showPopover
+  } = useContext(AutocompleteContext);
+  return useMemo(() => {
+    const selectabledOptions = getSelectableOptions(options);
+    const focusOption = options.find(option => !isSeparator(option) && option.dsId === focusOptionIdx);
+    const focusSelectableOptionIdx = selectabledOptions.findIndex(option => option.dsId === focusOptionIdx);
+    return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
+      "aria-live": "polite"
+    }, void 0, !isSeparator(focusOption) && showPopover && focusOption && "option ".concat(focusOption.label, " focused.").concat(focusSelectableOptionIdx + 1, " of ").concat(selectabledOptions.length, "\n           "));
+  }, [options, showPopover, focusOptionIdx]);
+};
+
+export { A11yFocusedOption, StyledA11ySelectedValues, isSeparator };

package/esm/autocomplete/parts/container/Container.js

@@ -2,19 +2,21 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 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 React, { useContext, useEffect, useCallback } from 'react';
+import React, { useContext, useEffect, useCallback, useMemo } from 'react';
 import { DSPopperJS } from '@elliemae/ds-popperjs';
 import { AutocompleteContext } from '../../AutocompleteCTX.js';
-import { StyledContainerWithPopper, StyledPopperWrapper } from './styled.js';
+import { StyledContainer, StyledPopperWrapper } from './styled.js';
 import { MenuList } from '../menu-list/MenuList.js';
 import { useKeyboardNavigation } from './useKeyboardNavigation.js';
 import { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';
-import { jsxs } from 'react/jsx-runtime';
+import { A11yFocusedOption } from '../A11yFocusedOption.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
 
-var _StyledPopperWrapper;
+var _A11yFocusedOption, _StyledPopperWrapper;
 const Container = () => {
   const {
     props: {
+      id,
       startPlacementPreference,
       children,
       filter,
@@ -23,6 +25,7 @@ const Container = () => {
     showPopover,
     setReferenceElement,
     setShowPopover,
+    focusOptionIdx,
     referenceElement
   } = useContext(AutocompleteContext);
   useEffect(() => {
@@ -38,32 +41,41 @@ const Container = () => {
   const handleCloseMenu = useCallback(() => {
     setShowPopover(false);
   }, [setShowPopover]);
-  const input = React.Children.only(children);
   const {
     onInputKeyDown
   } = useKeyboardNavigation();
-  return /*#__PURE__*/jsxs(StyledContainerWithPopper, {
-    ref: setReferenceElement,
-    role: "combobox",
-    "aria-autocomplete": "list",
-    "aria-controls": "autocomplete-listbox",
-    "aria-expanded": showPopover,
-    onKeyDown: onInputKeyDown,
-    "data-testid": AutocompleteDataTestid.CONTAINER,
-    children: [input, filter && /*#__PURE__*/_jsx(DSPopperJS, {
-      customOffset: [0, 5],
-      closeContextMenu: handleCloseMenu,
-      referenceElement: referenceElement,
-      showPopover: showPopover,
-      startPlacementPreference: startPlacementPreference,
-      placementOrderPreference: placementOrderPreference,
-      withoutPortal: true,
-      withoutArrow: true,
-      withoutAnimation: true,
-      zIndex: 10
-    }, void 0, _StyledPopperWrapper || (_StyledPopperWrapper = /*#__PURE__*/_jsx(StyledPopperWrapper, {
-      tabIndex: -1
-    }, void 0, /*#__PURE__*/_jsx(MenuList, {}))))]
+  const input = React.Children.only(children);
+  const childrenWithProps = /*#__PURE__*/React.isValidElement(input) ? /*#__PURE__*/React.cloneElement(input, {
+    'aria-activedescendant': focusOptionIdx
+  }) : input;
+  const idList = useMemo(() => "".concat(id ? "".concat(id, "-") : '', "listbox"), [id]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [_A11yFocusedOption || (_A11yFocusedOption = /*#__PURE__*/_jsx(A11yFocusedOption, {})), /*#__PURE__*/jsxs(StyledContainer, {
+      id: id,
+      ref: setReferenceElement,
+      role: "combobox",
+      "aria-autocomplete": "list",
+      "aria-controls": "autocomplete-listbox",
+      "aria-expanded": showPopover,
+      "aria-haspopup": "listbox",
+      "aria-owns": idList,
+      onKeyDown: onInputKeyDown,
+      "data-testid": AutocompleteDataTestid.CONTAINER,
+      children: [childrenWithProps, filter && /*#__PURE__*/_jsx(DSPopperJS, {
+        customOffset: [0, 5],
+        closeContextMenu: handleCloseMenu,
+        referenceElement: referenceElement,
+        showPopover: showPopover,
+        startPlacementPreference: startPlacementPreference,
+        placementOrderPreference: placementOrderPreference,
+        withoutPortal: true,
+        withoutArrow: true,
+        withoutAnimation: true,
+        zIndex: 10
+      }, void 0, _StyledPopperWrapper || (_StyledPopperWrapper = /*#__PURE__*/_jsx(StyledPopperWrapper, {
+        tabIndex: -1
+      }, void 0, /*#__PURE__*/_jsx(MenuList, {}))))]
+    })]
   });
 };
 

package/esm/autocomplete/parts/container/styled.js

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 
-const StyledContainerWithPopper = /*#__PURE__*/styled.div.withConfig({
+const StyledContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-xupfk9-0"
 })(["width:100%;height:28px;position:relative;"]);
 const StyledPopperWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-xupfk9-1"
 })(["background:#fff;overflow:auto;position:relative;"]);
 
-export { StyledContainerWithPopper, StyledPopperWrapper };
+export { StyledContainer, StyledPopperWrapper };

package/esm/autocomplete/parts/menu-list/MenuList.js

@@ -1,5 +1,5 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext, useCallback } from 'react';
+import { useContext, useCallback, useMemo } from 'react';
 import { StyledListWrapper, StyledVirtualListWrapper, StyledList } from './styled.js';
 import { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';
 import { AutocompleteContext } from '../../AutocompleteCTX.js';
@@ -9,7 +9,8 @@ import { jsx } from 'react/jsx-runtime';
 const MenuList = () => {
   const {
     props: {
-      options
+      options,
+      id
     },
     referenceElement,
     inputRef,
@@ -25,11 +26,12 @@ const MenuList = () => {
 
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   }, [inputRef]);
+  const idList = useMemo(() => "".concat(id ? "".concat(id, "-") : '', "listbox"), [id]);
   return /*#__PURE__*/_jsx(StyledListWrapper, {
     tabIndex: -1,
     onMouseDown: e => e.preventDefault(),
     minWidth: referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth,
-    id: "autocomplete-listbox",
+    id: idList,
     role: "listbox"
   }, void 0, options.length > 0 && /*#__PURE__*/jsx(StyledVirtualListWrapper, {
     tabIndex: -1,

package/esm/autocomplete/parts/styled.js

@@ -0,0 +1 @@
+

package/esm/autocomplete/utils/listHelper.js

@@ -9,7 +9,7 @@ const isSelectedValueMultiple = value => Array.isArray(value);
 const findInCircularList = function (list, from, criteria) {
   let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
 
-  for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {
+  for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
     if (criteria(list[i])) return i;
   }
 

package/esm/checkbox/ControlledCheckbox.js

@@ -7,15 +7,15 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { useRef, useCallback } from 'react';
-import { describe, useMemoMergePropsWithDefault, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+import { describe, useMemoMergePropsWithDefault, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { StyledContainer, StyledCheckBox, StyledInput, StyledLabel } from './styles.js';
+import { StyledContainer, StyledCheckBox, StyledInputMixed, StyledInput, StyledLabel, StyledWrapLabel } from './styles.js';
 import { propTypes, defaultProps } from './react-desc-prop-types.js';
 import { setMultipleRefs } from './utils/setMultipleRefs.js';
 import { useValidateProps } from './config/useValidateProps.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-const _excluded = ["id", "disabled", "readOnly", "label", "aria-label", "aria-controls", "onKeyDown", "className"];
+const _excluded = ["id", "disabled", "readOnly", "label", "aria-label", "aria-controls", "onKeyDown", "className", "onChange"];
 
 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; }
 
@@ -31,10 +31,8 @@ const DSControlledCheckbox = props => {
     hasError,
     innerRef,
     wrapLabel,
-    tabIndex,
     ariaLabel: legacyAriaLabel,
-    ariaControls: legacyAriaControls,
-    'data-testid': dataTestid = 'ds-checkbox-container'
+    ariaControls: legacyAriaControls
   } = propsWithDefault;
 
   const _useGetGlobalAttribut = useGetGlobalAttributes(propsWithDefault),
@@ -46,10 +44,12 @@ const DSControlledCheckbox = props => {
     'aria-label': ariaLabel,
     'aria-controls': ariaControls,
     onKeyDown: userOnKeyDown,
-    className
+    className,
+    onChange
   } = _useGetGlobalAttribut,
         restGlobals = _objectWithoutProperties(_useGetGlobalAttribut, _excluded);
 
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
   const handleOnKeyDown = useCallback(e => {
     if (checkboxRef.current && e.key === 'Enter') {
       checkboxRef.current.click();
@@ -57,35 +57,51 @@ const DSControlledCheckbox = props => {
 
     if (userOnKeyDown) userOnKeyDown(e);
   }, [userOnKeyDown]);
-  return /*#__PURE__*/_jsx(StyledContainer, {
-    "data-testid": dataTestid,
+  return /*#__PURE__*/jsxs(StyledContainer, _objectSpread(_objectSpread({
+    "data-testid": "ds-checkbox-container",
     className: className
-  }, void 0, /*#__PURE__*/_jsx(StyledCheckBox, {
-    checked: checked,
-    hasError: hasError,
-    disabled: disabled,
-    readOnly: readOnly
-  }, void 0, /*#__PURE__*/jsx(StyledInput, _objectSpread(_objectSpread({}, restGlobals), {}, {
-    "data-testid": "ds-checkbox",
-    id: id,
-    ref: ref => setMultipleRefs([checkboxRef, innerRef])(ref),
-    onKeyDown: handleOnKeyDown,
-    type: "checkbox",
-    checked: checked !== 'mixed' ? checked : undefined,
-    "aria-label": ariaLabel || legacyAriaLabel || label,
-    "aria-controls": ariaControls || legacyAriaControls,
-    tabIndex: tabIndex,
-    disabled: disabled,
-    readOnly: readOnly
-  }))), label && /*#__PURE__*/_jsx(StyledLabel, {
-    htmlFor: id,
-    disabled: disabled,
-    readOnly: readOnly,
-    checked: checked,
-    "data-testid": "ds-checkbox-label"
-  }, void 0, wrapLabel ? label : /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-    value: label
-  })));
+  }, xstyledProps), {}, {
+    children: [/*#__PURE__*/_jsx(StyledCheckBox, {
+      checked: checked,
+      hasError: hasError,
+      disabled: disabled,
+      readOnly: readOnly
+    }, void 0, ariaControls || legacyAriaControls ? /*#__PURE__*/jsx(StyledInputMixed, _objectSpread(_objectSpread({
+      role: "checkbox",
+      "data-testid": "ds-checkbox",
+      id: id,
+      ref: ref => setMultipleRefs([checkboxRef, innerRef])(ref),
+      onKeyDown: handleOnKeyDown,
+      "aria-label": ariaLabel || legacyAriaLabel || label,
+      "aria-controls": ariaControls || legacyAriaControls,
+      disabled: disabled,
+      readOnly: readOnly,
+      onClick: onChange,
+      "aria-checked": checked
+    }, restGlobals), {}, {
+      tabIndex: 0
+    })) : /*#__PURE__*/jsx(StyledInput, _objectSpread({
+      "data-testid": "ds-checkbox",
+      id: id,
+      ref: ref => setMultipleRefs([checkboxRef, innerRef])(ref),
+      onKeyDown: handleOnKeyDown,
+      type: "checkbox",
+      checked: checked,
+      "aria-label": ariaLabel || legacyAriaLabel || label,
+      disabled: disabled,
+      readOnly: readOnly,
+      onChange: onChange
+    }, restGlobals))), label && /*#__PURE__*/_jsx(StyledLabel, {
+      htmlFor: id,
+      disabled: disabled,
+      readOnly: readOnly,
+      checked: checked,
+      "data-testid": "ds-checkbox-label",
+      wrapLabel: wrapLabel
+    }, void 0, wrapLabel ? /*#__PURE__*/_jsx(StyledWrapLabel, {}, void 0, label) : /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+      value: label
+    }))]
+  }));
 };
 
 const DSControlledCheckboxWithSchema = describe(DSControlledCheckbox);

package/esm/checkbox/exported-related/data-test-ids.js

@@ -0,0 +1,6 @@
+const DSCheckboxDataTestIds = {
+  CONTAINER: 'ds-checkbox-container',
+  INPUT: 'ds-checkbox'
+};
+
+export { DSCheckboxDataTestIds };

package/esm/checkbox/exported-related/index.js

@@ -0,0 +1,2 @@
+export { DSCheckboxDataTestIds } from './data-test-ids.js';
+export { DSCheckboxName, DSCheckboxSlots } from './theming.js';

package/esm/checkbox/exported-related/theming.js

@@ -0,0 +1,8 @@
+const DSCheckboxName = 'ds-checkbox';
+const DSCheckboxSlots = {
+  CONTAINER: 'root',
+  INPUT: 'input',
+  LABEL: 'label'
+};
+
+export { DSCheckboxName, DSCheckboxSlots };

package/esm/checkbox/react-desc-prop-types.js

@@ -17,9 +17,9 @@ const defaultProps = {
 };
 const propTypes = _objectSpread(_objectSpread({}, globalAttributesPropTypes), {}, {
   label: PropTypes.string.description('Checkbox Label property. This label is also going to be used as an aria-label for screen readers.'),
-  wrapLabel: PropTypes.bool.description('Whether to wrap or truncate label'),
   hasError: PropTypes.bool.description('Whether the checkbox has error or not.'),
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.')
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.'),
+  wrapLabel: PropTypes.bool.description('Whether to wrap or truncate the label')
 });
 
 export { defaultProps, propTypes };

package/esm/checkbox/styles.js

@@ -1,17 +1,19 @@
-import styled from 'styled-components';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { styled, css } from '@elliemae/ds-system';
 import { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';
+import { DSCheckboxName, DSCheckboxSlots } from './exported-related/theming.js';
 
-const StyledContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-flv7d2-0"
-})(["display:inline-grid;grid-template-rows:min-content;grid-template-columns:", " auto;align-items:center;"], _ref => {
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+const StyledContainer = styled('div', {
+  name: DSCheckboxName,
+  slot: DSCheckboxSlots.CONTAINER
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-grid;\n  grid-template-rows: min-content;\n  grid-template-columns: ", " auto;\n  align-items: center;\n"])), _ref => {
   let {
     theme
   } = _ref;
   return theme.space.xs;
 });
-const StyledCheckBox = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-flv7d2-1"
-})(["width:", ";height:", ";border:1px solid ", ";border-radius:2px;position:relative;background:", ";", " &:focus-within{", ";&:hover{", "}}&:hover{background:", ";", ";}"], _ref2 => {
+const StyledCheckBox = styled('span')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  border: 1px solid ", ";\n  border-radius: 2px;\n  position: relative;\n  background: ", ";\n  ", "\n  &:focus-within {\n    ", ";\n    &:hover {\n      ", "\n    }\n  }\n  &:hover {\n    background: ", ";\n    ", ";\n  }\n"])), _ref2 => {
   let {
     theme
   } = _ref2;
@@ -74,16 +76,24 @@ const StyledCheckBox = /*#__PURE__*/styled.span.withConfig({
   } = _ref10;
   return !hasError && !disabled && !readOnly ? " border: 1px solid  ".concat(theme.colors.brand[600]) : undefined;
 });
-const StyledInput = /*#__PURE__*/styled.input.withConfig({
-  componentId: "sc-flv7d2-2"
-})(["&:hover{cursor:pointer;}&:disabled{cursor:not-allowed;}height:100%;position:absolute;top:0;left:0;opacity:0;"]);
-const StyledLabel = /*#__PURE__*/styled.label.withConfig({
-  componentId: "sc-flv7d2-3"
-})(["&:hover{cursor:pointer;}padding-left:", ";color:", ";font-size:13px;line-height:13px;display:inherit;"], _ref11 => {
+const checkboxStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &:hover {\n    cursor: pointer;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n"])));
+const StyledInput = styled('input', {
+  name: DSCheckboxName,
+  slot: DSCheckboxSlots.INPUT
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n"])), checkboxStyles);
+const StyledInputMixed = styled('div', {
+  name: DSCheckboxName,
+  slot: DSCheckboxSlots.INPUT
+})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), checkboxStyles);
+const StyledLabel = styled('label', {
+  name: DSCheckboxName,
+  slot: DSCheckboxSlots.LABEL
+})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &:hover {\n    cursor: pointer;\n  }\n  ", ";\n\n  color: ", ";\n  font-size: 13px;\n  line-height: 13px;\n  display: inherit;\n"])), _ref11 => {
   let {
+    wrapLabel,
     theme
   } = _ref11;
-  return theme.space.xxs;
+  return wrapLabel ? 'padding: 8px 0px 8px 8px;' : "padding-left: ".concat(theme.space.xxs);
 }, _ref12 => {
   let {
     theme,
@@ -93,5 +103,6 @@ const StyledLabel = /*#__PURE__*/styled.label.withConfig({
   } = _ref12;
   return disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
 });
+const StyledWrapLabel = styled('span')(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
 
-export { StyledCheckBox, StyledContainer, StyledInput, StyledLabel };
+export { StyledCheckBox, StyledContainer, StyledInput, StyledInputMixed, StyledLabel, StyledWrapLabel };

package/esm/combobox/ComboBoxCTX.js

@@ -6,18 +6,20 @@ function noop() {}
 const defaultProps = {
   hasError: false,
   inline: false,
-  withoutPortal: true,
+  withoutPortal: false,
   zIndex: 10,
   disabled: false,
   useMask: noop,
   innerRef: /*#__PURE__*/createRef(),
   startPlacementPreference: 'bottom-start',
-  placementOrderPreference: ['bottom-start', 'bottom-end'] // override in useCombobox to avoid ref duplications when more than one cb is used
+  placementOrderPreference: ['bottom-start', 'bottom-end'],
+  noOptionsMessage: 'No Matches Found',
+  filteredOptions: [] // override in useCombobox to avoid ref duplications when more than one cb is used
 
 };
 const defaultContext = {
   props: defaultProps,
-  showPopover: false,
+  menuState: false,
   hasFocus: false,
   referenceElement: null,
   inputValue: '',
@@ -36,7 +38,8 @@ const defaultContext = {
   setInputValue: noop,
   setReferenceElement: noop,
   setFocusOptionIdx: noop,
-  setShowSelectedOptions: noop
+  setShowSelectedOptions: noop,
+  setMenuState: noop
 };
 /** Context for cross component communication */
 

package/esm/combobox/ComboboxDataTestids.js

@@ -1,6 +1,6 @@
 const ComboboxDataTestid = {
   MULTISELECT: {
-    SELECT_ALL_CHECKBOX: 'combobox-select-all-checkbox',
+    HEADER_LIST: 'combobox-header-list',
     SHOW_SELECTED_OPTIONS_TOGGLE: 'combobox-selected-options-toggle'
   },
   CONTROLS_WRAPPER: 'combobox-controls-wrapper',

package/esm/combobox/config/useComboBox.js

@@ -5,7 +5,7 @@ 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 'core-js/modules/web.dom-collections.iterator.js';
-import { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { useVirtual } from 'react-virtual';
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { defaultProps } from '../ComboBoxCTX.js';
@@ -36,8 +36,18 @@ const useComboBox = props => {
   const toggleSelectionButtonRef = useRef(null);
   const pillGroupRef = useRef(null);
   const {
-    selectedValues
-  } = propsWithDefaults; // ---------------------------------------------------------------------------
+    selectedValues,
+    isMenuOpen,
+    onMenuChange
+  } = propsWithDefaults;
+  const menuState = useMemo(() => {
+    if (isMenuOpen !== undefined) return isMenuOpen;
+    return showPopover;
+  }, [showPopover, isMenuOpen]);
+  const setMenuState = useCallback((newState, reason, e) => {
+    if (onMenuChange !== undefined) onMenuChange(newState, reason, e);
+    setShowPopover(newState);
+  }, [onMenuChange]); // ---------------------------------------------------------------------------
   // Options with creatable option + filtered by selected
   // ---------------------------------------------------------------------------
 
@@ -66,17 +76,19 @@ const useComboBox = props => {
 
   const [focusOptionIdx, setFocusOptionIdx] = useState('');
   useEffect(() => {
-    // we are updating the focus option only when we have focus on the input and
-    // we are in the selected option view or we are typing to force first option always
+    // this code calculate the option to be focused when opening the menu
+    // when losing focus we remove the focused one
+    // when focus adquired again getFirstOption calculate the correct one
+    if (!hasFocus) setFocusOptionIdx('');
+
     if (hasFocus && (focusOptionIdx === '' || inputValue !== '' || showSelectedOptions)) {
       const focusedValue = getFirstOption(correctOptions, selectedValues, inputValue);
       setFocusOptionIdx(focusedValue);
       scrollOptionIntoView(focusedValue, {
         align: 'center'
       });
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-    if (!hasFocus) setFocusOptionIdx(''); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showPopover, hasFocus, correctOptions, selectedValues, inputValue]);
   useEffect(() => {
     if (!showPopover) {
@@ -89,7 +101,7 @@ const useComboBox = props => {
       filteredOptions: correctOptions
     }),
     virtualListHelpers,
-    showPopover,
+    menuState,
     referenceElement,
     listRef,
     focusOptionIdx,
@@ -98,6 +110,7 @@ const useComboBox = props => {
     selectAllCheckboxRef,
     inputValue,
     setInputValue,
+    setMenuState,
     hasFocus,
     toggleSelectionButtonRef,
     pillGroupRef,
@@ -109,7 +122,7 @@ const useComboBox = props => {
     scrollOptionIntoView,
     setReferenceElement,
     setShowPopover
-  }), [scrollOptionIntoView, correctOptions, hasFocus, propsWithDefaults, virtualListHelpers, inputValue, focusOptionIdx, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, selectedOptionsRef, controlsWrapperRef, selectAllCheckboxRef, toggleSelectionButtonRef, listRef]);
+  }), [scrollOptionIntoView, setMenuState, correctOptions, hasFocus, propsWithDefaults, virtualListHelpers, inputValue, focusOptionIdx, wrapperListRef, showSelectedOptions, menuState, pillGroupRef, referenceElement, selectedOptionsRef, controlsWrapperRef, selectAllCheckboxRef, toggleSelectionButtonRef, listRef]);
   return ctx;
 };
 

package/esm/combobox/index.js

@@ -1 +1,3 @@
 export { DSComboBox, DSComboBox as DSComboBoxV3, DSComboBoxWithSchema } from './ComboBox.js';
+export { DSComboBoxName, DSComboboxSlots } from './theming.js';
+export { ComboboxDataTestid } from './ComboboxDataTestids.js';