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

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/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 } 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 ? 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,7 +17,6 @@ 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.')
 });

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;
+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' : "padding-left: ".concat(theme.space.xxs);
 }, _ref12 => {
   let {
     theme,
@@ -94,4 +104,4 @@ const StyledLabel = /*#__PURE__*/styled.label.withConfig({
   return disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
 });
 
-export { StyledCheckBox, StyledContainer, StyledInput, StyledLabel };
+export { StyledCheckBox, StyledContainer, StyledInput, StyledInputMixed, StyledLabel };

package/esm/combobox/ComboBoxCTX.js

@@ -6,7 +6,7 @@ function noop() {}
 const defaultProps = {
   hasError: false,
   inline: false,
-  withoutPortal: true,
+  withoutPortal: false,
   zIndex: 10,
   disabled: false,
   useMask: noop,

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

@@ -66,17 +66,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) {

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';

package/esm/combobox/parts/DropdownIndicator.js

@@ -8,12 +8,12 @@ import { ComboBoxContext } from '../ComboBoxCTX.js';
 import { ComboboxDataTestid } from '../ComboboxDataTestids.js';
 
 var _templateObject;
-const StyledDropDownButton = styled(DSButtonV2)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus::after {\n    border: none;\n  }\n  & svg {\n    fill: ", ";\n  }\n"])), _ref => {
+const StyledDropDownButton = styled(DSButtonV2)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ", ";\n  }\n"])), _ref => {
   let {
     theme,
     disabled
   } = _ref;
-  return disabled ? 'red' : theme.colors.brand['700'];
+  return disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'];
 });
 const DropdownIndicator = () => {
   const {

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

@@ -7,10 +7,10 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { useContext, useCallback, useEffect, useMemo } from 'react';
-import { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+import { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';
 import { DSPopperJS } from '@elliemae/ds-popperjs';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
-import { StyledContainerInline, StyledContainerWithPopper, StyledPopperWrapper } from './styled.js';
+import { StyledContainer, StyledPopperWrapper } from './styled.js';
 import { Controls } from '../controls/Controls.js';
 import { MenuList } from '../menu-list/MenuList.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
@@ -43,8 +43,8 @@ const Container = () => {
     withoutPortal,
     zIndex
   } = props;
-  const StyledContainer = inline ? StyledContainerInline : StyledContainerWithPopper;
-  const globalAttributes = useGetGlobalAttributes(props); // Removing possible collisionable props
+  const globalAttributes = useGetGlobalAttributes(props);
+  const xStyledProps = useGetXstyledProps(props); // Removing possible collisionable props
 
   const globalsAttrs = _objectWithoutProperties(globalAttributes, _excluded);
 
@@ -66,10 +66,10 @@ const Container = () => {
   useEffect(() => {
     if (onMenuOpen && showPopover) onMenuOpen();else if (onMenuClose && !showPopover) onMenuClose();
   }, [showPopover, onMenuOpen, onMenuClose]);
-  return useMemo(() => /*#__PURE__*/jsx(StyledContainer, _objectSpread(_objectSpread({
+  return useMemo(() => /*#__PURE__*/jsx(StyledContainer, _objectSpread(_objectSpread(_objectSpread({
     "data-testid": ComboboxDataTestid.CONTAINER,
     ref: setReferenceElement
-  }, globalsAttrs), {}, {
+  }, globalsAttrs), xStyledProps), {}, {
     children: inline ? /*#__PURE__*/jsxs(Fragment, {
       children: [_Controls || (_Controls = /*#__PURE__*/_jsx(Controls, {})), _MenuList || (_MenuList = /*#__PURE__*/_jsx(MenuList, {}))]
     }) : /*#__PURE__*/jsxs(Fragment, {
@@ -89,7 +89,7 @@ const Container = () => {
         onMouseDown: handleMouseDown
       }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx(MenuList, {})))))]
     })
-  })), [inline, StyledContainer, setReferenceElement, globalsAttrs, referenceElement, showPopover, handleCloseMenu, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex, handleMouseDown]);
+  })), [inline, setReferenceElement, globalsAttrs, referenceElement, showPopover, xStyledProps, handleCloseMenu, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex, handleMouseDown]);
 };
 
 export { Container };

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

@@ -1,15 +1,22 @@
 import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled } from '@elliemae/ds-system';
+import { DSComboBoxName, DSComboboxSlots } from '../../theming.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-const StyledGenericContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  cursor: ", ";\n"])), _ref => {
+var _templateObject, _templateObject2;
+const StyledContainer = styled('div', {
+  name: DSComboBoxName,
+  slot: DSComboboxSlots.CONTAINER
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  cursor: ", ";\n"])), _ref => {
   let {
     disabled
   } = _ref;
   return disabled ? 'not-allowed' : 'default';
 });
-const StyledContainerWithPopper = styled(StyledGenericContainer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 28px;\n"])));
-const StyledContainerInline = styled(StyledGenericContainer)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
-const StyledPopperWrapper = styled(StyledGenericContainer)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  overflow: auto;\n"])));
+const StyledPopperWrapper = styled('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  cursor: ", ";\n  overflow: auto;\n"])), _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled ? 'not-allowed' : 'default';
+});
 
-export { StyledContainerInline, StyledContainerWithPopper, StyledPopperWrapper };
+export { StyledContainer, StyledPopperWrapper };

package/esm/combobox/parts/controls/Controls.js

@@ -25,9 +25,10 @@ const Controls = () => {
     },
     selectedOptionsRef,
     setShowPopover,
+    setFocusOptionIdx,
     hasFocus,
+    listRef,
     focusOptionIdx,
-    scrollOptionIntoView,
     showPopover,
     controlsWrapperRef
   } = useContext(ComboBoxContext);
@@ -40,13 +41,22 @@ const Controls = () => {
       var _innerRef$current;
 
       setShowPopover(false);
+      setFocusOptionIdx('');
       (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.blur();
       return;
     }
 
     (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
-    setShowPopover(true); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [disabled, hasFocus, showPopover, inline, innerRef, setShowPopover, focusOptionIdx]); // this callback prevent to toggle the menu when clicking or removing pills
+    setShowPopover(true);
+    window.requestAnimationFrame(() => {
+      if (listRef.current && window.scrollY < listRef.current.scrollHeight) {
+        window.scrollTo({
+          top: listRef.current.scrollHeight,
+          behavior: 'smooth'
+        });
+      }
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled, listRef, hasFocus, showPopover, inline, innerRef, setShowPopover, focusOptionIdx]); // this callback prevent to toggle the menu when clicking or removing pills
 
   const handleOnPillsClick = useCallback(e => {
     if (showPopover || disabled) {
@@ -89,7 +99,7 @@ const Controls = () => {
       }))]
     }), _ControlsInput || (_ControlsInput = /*#__PURE__*/_jsx(ControlsInput, {})), !inline && /*#__PURE__*/_jsx(StyledHeaderActionsWrapper, {
       justifyContent: "center",
-      cols: ['auto', 'auto']
+      cols: ['min-content', 'min-content']
     }, void 0, /*#__PURE__*/_jsx(StyleHeaderActionsSeparator, {
       disabled: disabled
     }), _DropdownIndicator || (_DropdownIndicator = /*#__PURE__*/_jsx(DropdownIndicator, {})))]

package/esm/combobox/parts/controls/styled.js

@@ -1,6 +1,7 @@
 import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { css, styled } from '@elliemae/ds-system';
 import { Grid } from '@elliemae/ds-grid';
+import { DSComboBoxName, DSComboboxSlots } from '../../theming.js';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 const normalBorder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), _ref => {
@@ -10,39 +11,47 @@ const normalBorder = css(_templateObject || (_templateObject = _taggedTemplateLi
   } = _ref;
   return hasError ? theme.colors.danger[900] : theme.colors.neutral[400];
 });
-const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 2px solid ", ";\n"])), _ref2 => {
+const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  outline: 2px solid ", ";\n  outline-offset: -2px;\n"])), _ref2 => {
   let {
     theme
   } = _ref2;
   return theme.colors.brand[700];
 });
-const afterStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 2px;\n  pointer-events: none;\n  z-index: 7;\n"])));
-const StyledControlsWrapper = styled(Grid)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: ", ";\n  position: relative;\n  border-radius: 2px;\n  min-width: ", ";\n  align-items: center;\n  align-content: center;\n  height: 28px;\n  padding-left: 8px;\n  margin: ", ";\n  &::after {\n    ", "\n    ", "\n  }\n\n  &:focus-within {\n    &::after {\n      ", "\n      ", "\n    }\n  }\n"])), _ref3 => {
+const hoverBorder = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), _ref3 => {
   let {
-    disabled,
     theme
   } = _ref3;
+  return theme.colors.brand[700];
+});
+const StyledControlsWrapper = styled(Grid, {
+  name: DSComboBoxName,
+  slot: DSComboboxSlots.INPUT_WRAPPER
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: ", ";\n  position: relative;\n  border-radius: 2px;\n  min-width: ", ";\n  align-items: center;\n  align-content: center;\n  height: 28px;\n  padding-left: 8px;\n  margin: ", ";\n  ", "\n  &:hover {\n    ", "\n  }\n  &:focus-within {\n    ", "\n  }\n"])), _ref4 => {
+  let {
+    disabled,
+    theme
+  } = _ref4;
   return disabled ? theme.colors.neutral['080'] : '#ffffff';
-}, _ref4 => {
+}, _ref5 => {
   let {
     minWidth,
     inline
-  } = _ref4;
+  } = _ref5;
   return inline || !minWidth ? '' : "".concat(minWidth, "px");
-}, _ref5 => {
+}, _ref6 => {
   let {
     inline
-  } = _ref5;
-  return inline ? '10px 16px' : 'none';
-}, afterStyle, normalBorder, afterStyle, focusBorder);
-const StyledSelection = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: 13px;\n  margin-right: 3px;\n  line-height: 13px;\n  display: flex;\n"])));
+  } = _ref6;
+  return inline ? '10px 16px' : '';
+}, normalBorder, hoverBorder, focusBorder);
+const StyledSelection = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: 13px;\n  margin-right: 3px;\n  display: flex;\n"])));
 const StyledHeaderActionsWrapper = styled(Grid)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: 100%;\n  .em-ds-button--text:focus::after {\n    border: none;\n  }\n"])));
 const StyleDropdownIndicator = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
-const StyleHeaderActionsSeparator = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  align-self: stretch;\n  margin: 4px 0px;\n  width: 1px;\n  background-color: ", ";\n"])), _ref6 => {
+const StyleHeaderActionsSeparator = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  align-self: stretch;\n  margin: 4px 0px;\n  width: 1px;\n  background-color: ", ";\n"])), _ref7 => {
   let {
     theme,
     disabled
-  } = _ref6;
+  } = _ref7;
   return disabled ? theme.colors.neutral['400'] : theme.colors.neutral['500'];
 });
 

package/esm/combobox/parts/controls-input/ControlsInput.js

@@ -45,7 +45,7 @@ const ControlsInput = () => {
     "aria-controls": "combo-listbox",
     "aria-activedescendant": focusOptionIdx,
     "aria-expanded": showPopover,
-    "aria-haspopup": "true",
+    "aria-haspopup": "listbox",
     "aria-describedby": "combobox-selected-items",
     role: "combobox",
     disabled: disabled,

package/esm/combobox/parts/controls-input/styled.js

@@ -1,15 +1,19 @@
 import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled } from '@elliemae/ds-system';
+import { DSComboBoxName, DSComboboxSlots } from '../../theming.js';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-const StyledInput = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 13px;\n  line-height: 13px;\n  border: none;\n  padding: 0;\n  outline: none;\n  color: ", ";\n  &:focus {\n    outline: none;\n  }\n  ", "\n  &::placeholder {\n    color: transparent;\n  }\n"])), props => props.theme.colors.neutral[700], _ref => {
+const StyledInput = styled('input', {
+  name: DSComboBoxName,
+  slot: DSComboboxSlots.INPUT
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 13px;\n  line-height: 13px;\n  border: none;\n  padding: 0;\n  outline: none;\n  color: ", ";\n  &:focus {\n    outline: none;\n  }\n  ", "\n  &::placeholder {\n    color: transparent;\n  }\n"])), props => props.theme.colors.neutral[700], _ref => {
   let {
     withoutCaret
   } = _ref;
   return withoutCaret && 'caret-color: transparent;';
 });
-const StyledInputPlaceHolder = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-style: italic;\n  color: ", ";\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n  height: 28px;\n  & span {\n    line-height: 13px;\n  }\n"])), props => props.theme.colors.neutral[500]);
+const StyledInputPlaceHolder = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-style: italic;\n  color: ", ";\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n  height: 28px;\n  font-size: 13px;\n  & span::after {\n    content: '';\n    padding: 1px;\n  }\n"])), props => props.theme.colors.neutral[500]);
 const StyledInputWidthReference = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n"])));
-const StyledInputWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  flex: 1;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n"])));
+const StyledInputWrapper = styled('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  display: flex;\n"])));
 
 export { StyledInput, StyledInputPlaceHolder, StyledInputWidthReference, StyledInputWrapper };

package/esm/combobox/parts/controls-input/useControlsInput.js

@@ -15,8 +15,7 @@ const useControlsInput = () => {
     },
     setHasFocus,
     inputValue,
-    setInputValue,
-    setShowSelectedOptions
+    setInputValue
   } = useContext(ComboBoxContext);
   const [width, setWidth] = useState(1); // use span reference to calculate the real width for the input
 
@@ -34,8 +33,8 @@ const useControlsInput = () => {
   const handleOnBlur = useCallback(() => {
     setInputValue('');
     if (onFilter) onFilter(allOptions, inputValue);
-    setHasFocus(false); // setShowSelectedOptions(false);
-  }, [setInputValue, onFilter, allOptions, inputValue, setHasFocus, setShowSelectedOptions]);
+    setHasFocus(false);
+  }, [setInputValue, onFilter, allOptions, inputValue, setHasFocus]);
   const handleOnFocus = useCallback(() => {
     setHasFocus(true);
   }, [setHasFocus]);