@elliemae/ds-form-combobox 3.56.0-rc.1 → 3.57.0-next.2

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

@@ -17,9 +17,7 @@ import {
 } from "./styled.js";
 import { useControlsInput } from "./useControlsInput.js";
 import { useKeyboardNavigation } from "./useKeyboardNavigation.js";
-const ControlsInput = ({
-  mutableUpdateStyles
-}) => {
+const ControlsInput = () => {
   const {
     props,
     props: {
@@ -44,13 +42,7 @@ const ControlsInput = ({
     instanceUid
   } = useContext(ComboBoxContext);
   const { onInputKeyDown } = useKeyboardNavigation();
-  const useControlsConfig = useMemo(
-    () => ({
-      mutableUpdateStyles
-    }),
-    [mutableUpdateStyles]
-  );
-  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = useControlsInput(useControlsConfig);
+  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } = useControlsInput();
   const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);
   const {
     tabIndex,
@@ -132,6 +124,8 @@ const ControlsInput = ({
       StyleHiddenInput,
       {
         type: "text",
+        disabled: disabled || applyAriaDisabled,
+        readOnly,
         name: "hidden",
         tabIndex: -1,
         onPaste: handleOnPaste,

package/dist/esm/parts/controls-input/ControlsInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/ControlsInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useContext, useMemo } from 'react';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\nimport {\n  StyledHiddenDiv,\n  StyledInput,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledInputWrapper,\n  StyleHiddenInput,\n} from './styled.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\n\nexport const ControlsInput = ({\n  mutableUpdateStyles,\n}: {\n  mutableUpdateStyles: DSComboboxT.PopperMutableUpdateStylesT;\n}): JSX.Element => {\n  const {\n    props,\n    props: {\n      autoFocus,\n      inline,\n      selectedValues,\n      placeholder,\n      disabled,\n      innerRef,\n      isLoading,\n      onlySelectable,\n      applyAriaDisabled,\n      readOnly,\n      ...restProps\n    },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    setInputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n  const useControlsConfig = useMemo(\n    () => ({\n      mutableUpdateStyles,\n    }),\n    [mutableUpdateStyles],\n  );\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput(useControlsConfig);\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return `option ${selectedValues.label} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (readOnly) {\n      return `${placeholder}. Read only`;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues, readOnly]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    setInputValue(e.clipboardData.getData('text/plain'));\n    internalRef.current?.focus();\n  };\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder aria-hidden=\"true\">\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={readOnly || onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-controls={`combo-listbox-${instanceUid}`}\n        aria-describedby={actualAriaDescribedBy}\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n        autoComplete=\"off\"\n        aria-readonly={readOnly}\n      />\n      {/* This input is used to handle the paste event */}\n      <StyleHiddenInput\n        type=\"text\"\n        name=\"hidden\"\n        tabIndex={-1}\n        onPaste={handleOnPaste}\n        aria-hidden=\"true\"\n        isDisabled={disabled || applyAriaDisabled}\n      />\n    </StyledInputWrapper>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { useContext, useMemo } from 'react';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\nimport {\n  StyledHiddenDiv,\n  StyledInput,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledInputWrapper,\n  StyleHiddenInput,\n} from './styled.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props,\n    props: {\n      autoFocus,\n      inline,\n      selectedValues,\n      placeholder,\n      disabled,\n      innerRef,\n      isLoading,\n      onlySelectable,\n      applyAriaDisabled,\n      readOnly,\n      ...restProps\n    },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    setInputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return `option ${selectedValues.label} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (readOnly) {\n      return `${placeholder}. Read only`;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues, readOnly]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    setInputValue(e.clipboardData.getData('text/plain'));\n    internalRef.current?.focus();\n  };\n  return (\n    <StyledInputWrapper>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder aria-hidden=\"true\">\n          <SimpleTruncatedTooltipText value={showPlaceholder}></SimpleTruncatedTooltipText>\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={readOnly || onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-controls={`combo-listbox-${instanceUid}`}\n        aria-describedby={actualAriaDescribedBy}\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable}\n        autoComplete=\"off\"\n        aria-readonly={readOnly}\n      />\n      {/* This input is used to handle the paste event */}\n      <StyleHiddenInput\n        type=\"text\"\n        disabled={disabled || applyAriaDisabled}\n        readOnly={readOnly}\n        name=\"hidden\"\n        tabIndex={-1}\n        onPaste={handleOnPaste}\n        aria-hidden=\"true\"\n        isDisabled={disabled || applyAriaDisabled}\n      />\n    </StyledInputWrapper>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -36,6 +36,7 @@ const StyledInput = styled("input", {
   &::placeholder {
     color: transparent;
   }
+  transition: none;
   ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}
 `;
 const StyledInputPlaceHolder = styled.div`

package/dist/esm/parts/controls-input/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n  color: transparent;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  border: none;\n  outline: none;\n  background: transparent;\n  width: 100%;\n  &:focus {\n    outline: none;\n  }\n  ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSComboBoxName,\n  slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n  line-height: 1rem;\n  background: transparent;\n  font-size: 1rem;\n  border: none;\n  overflow: hidden;\n  padding: 0;\n  z-index: 2;\n  outline: none;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n  &::placeholder {\n    color: transparent;\n  }\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n  font-style: italic;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n\n  line-height: 1rem;\n  font-size: 1rem;\n\n  & span::after {\n    content: '';\n    padding: 1px;\n    // solve italic font style clipping issue with overflow hidden.\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n  position: relative;\n  align-items: center;\n  display: flex;\n  padding-right: 1px;\n  overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n  display: none;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,mBAAmB,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjD,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA,IAIjE,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,gDAAgD;AAAA;AAG7F,MAAM,yBAAyB,OAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB9C,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSComboBoxName, DSComboboxSlots } from '../../theming.js';\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n  color: transparent;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  border: none;\n  outline: none;\n  background: transparent;\n  width: 100%;\n  &:focus {\n    outline: none;\n  }\n  ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSComboBoxName,\n  slot: DSComboboxSlots.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n  line-height: 1rem;\n  background: transparent;\n  font-size: 1rem;\n  border: none;\n  overflow: hidden;\n  padding: 0;\n  z-index: 2;\n  outline: none;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n  &::placeholder {\n    color: transparent;\n  }\n  transition: none;\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled.div`\n  font-style: italic;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n\n  line-height: 1rem;\n  font-size: 1rem;\n\n  & span::after {\n    content: '';\n    padding: 1px;\n    // solve italic font style clipping issue with overflow hidden.\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div')`\n  position: relative;\n  align-items: center;\n  display: flex;\n  padding-right: 1px;\n  overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n  display: none;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,mBAAmB,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjD,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjE,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,gDAAgD;AAAA;AAG7F,MAAM,yBAAyB,OAAO;AAAA;AAAA,WAElC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB9C,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;",
   "names": []
 }

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

@@ -1,11 +1,10 @@
 import * as React from "react";
-import { useContext, useEffect, useMemo, useRef, useCallback, useState } from "react";
+import { useContext, useLayoutEffect, useMemo, useRef, useCallback, useState } from "react";
 import { useMaskedOnChange } from "./useMaskedOnChange.js";
 import ComboBoxContext from "../../ComboBoxCTX.js";
 import { isSelectedValueEmpty } from "../../utils/listHelper.js";
-const useControlsInput = ({
-  mutableUpdateStyles
-} = {}) => {
+const PADDING_EXTRA = 2;
+const useControlsInput = () => {
   const {
     props: { selectedValues, allOptions, placeholder, onFilter, inline },
     setHasFocus,
@@ -15,23 +14,22 @@ const useControlsInput = ({
   const [width, setWidth] = useState(1);
   const spanReference = useRef(null);
   const showPlaceholder = !inputValue && (inline || isSelectedValueEmpty(selectedValues)) ? placeholder : null;
-  const spanReferenceText = inputValue.replace(/\s/g, "\xA0");
-  useEffect(() => {
-    if (spanReference.current) {
-      spanReference.current.style.display = "block";
-      setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
-      spanReference.current.style.display = "none";
+  const spanReferenceText = (inputValue || "").replace(/\s/g, "\xA0") || "";
+  useLayoutEffect(() => {
+    const el = spanReference.current;
+    if (!el) return;
+    const measured = Math.ceil(el.offsetWidth) + PADDING_EXTRA;
+    if (Math.abs(measured - width) >= 1) {
+      setWidth(measured);
     }
-  }, [inputValue]);
-  const handleOnChange = useMaskedOnChange({ mutableUpdateStyles });
+  }, [spanReferenceText, width]);
+  const handleOnChange = useMaskedOnChange();
   const handleOnBlur = useCallback(() => {
     setInputValue("");
     if (onFilter) onFilter(allOptions);
     setHasFocus(false);
   }, [setInputValue, onFilter, allOptions, setHasFocus]);
-  const handleOnFocus = useCallback(() => {
-    setHasFocus(true);
-  }, [setHasFocus]);
+  const handleOnFocus = useCallback(() => setHasFocus(true), [setHasFocus]);
   return useMemo(
     () => ({
       handleOnBlur,
@@ -42,7 +40,7 @@ const useControlsInput = ({
       width,
       spanReference
     }),
-    [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference]
+    [handleOnBlur, handleOnChange, handleOnFocus, showPlaceholder, spanReferenceText, width]
   );
 };
 export {

package/dist/esm/parts/controls-input/useControlsInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/useControlsInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useEffect, useMemo, useRef, useCallback, useState } from 'react';\nimport { useMaskedOnChange } from './useMaskedOnChange.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { type DSComboboxT } from '../../react-desc-prop-types.js';\nimport { isSelectedValueEmpty } from '../../utils/listHelper.js';\n\ninterface UseControlsInputT {\n  handleOnBlur: () => void;\n  handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;\n  handleOnFocus: React.FocusEventHandler<HTMLInputElement>;\n  showPlaceholder: string | null | undefined;\n  spanReferenceText: string | undefined;\n  width: number;\n  spanReference: React.Ref<HTMLSpanElement>;\n}\nconst useControlsInput = ({\n  mutableUpdateStyles,\n}: {\n  mutableUpdateStyles?: DSComboboxT.PopperMutableUpdateStylesT;\n} = {}): UseControlsInputT => {\n  const {\n    props: { selectedValues, allOptions, placeholder, onFilter, inline },\n    setHasFocus,\n    inputValue,\n    setInputValue,\n  } = useContext(ComboBoxContext);\n\n  const [width, setWidth] = useState(1);\n  // use span reference to calculate the real width for the input\n  const spanReference = useRef<HTMLSpanElement>(null);\n  // if user type we remove the placeholder\n  // else if there is a  selection we dont show it unless is inline combobox\n  const showPlaceholder = !inputValue && (inline || isSelectedValueEmpty(selectedValues)) ? placeholder : null;\n  const spanReferenceText = inputValue.replace(/\\s/g, '\\u00a0');\n\n  useEffect(() => {\n    if (spanReference.current) {\n      spanReference.current.style.display = 'block';\n      setWidth(spanReference.current?.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);\n      spanReference.current.style.display = 'none';\n    }\n  }, [inputValue]);\n\n  // if we se an input mask we configure inside here the proper mask\n  // or a stardard combobox onchange event\n  const handleOnChange = useMaskedOnChange({ mutableUpdateStyles });\n\n  const handleOnBlur = useCallback(() => {\n    setInputValue('');\n    if (onFilter) onFilter(allOptions);\n    setHasFocus(false);\n  }, [setInputValue, onFilter, allOptions, setHasFocus]);\n\n  const handleOnFocus = useCallback(() => {\n    setHasFocus(true);\n  }, [setHasFocus]);\n\n  return useMemo(\n    () => ({\n      handleOnBlur,\n      handleOnChange,\n      handleOnFocus,\n      showPlaceholder,\n      spanReferenceText,\n      width,\n      spanReference,\n    }),\n    [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference],\n  );\n};\n\nexport { useControlsInput };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,WAAW,SAAS,QAAQ,aAAa,gBAAgB;AAC9E,SAAS,yBAAyB;AAClC,OAAO,qBAAqB;AAE5B,SAAS,4BAA4B;AAWrC,MAAM,mBAAmB,CAAC;AAAA,EACxB;AACF,IAEI,CAAC,MAAyB;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY,aAAa,UAAU,OAAO;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AAEpC,QAAM,gBAAgB,OAAwB,IAAI;AAGlD,QAAM,kBAAkB,CAAC,eAAe,UAAU,qBAAqB,cAAc,KAAK,cAAc;AACxG,QAAM,oBAAoB,WAAW,QAAQ,OAAO,MAAQ;AAE5D,YAAU,MAAM;AACd,QAAI,cAAc,SAAS;AACzB,oBAAc,QAAQ,MAAM,UAAU;AACtC,eAAS,cAAc,SAAS,cAAc,cAAc,QAAQ,cAAc,IAAI,CAAC;AACvF,oBAAc,QAAQ,MAAM,UAAU;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAIf,QAAM,iBAAiB,kBAAkB,EAAE,oBAAoB,CAAC;AAEhE,QAAM,eAAe,YAAY,MAAM;AACrC,kBAAc,EAAE;AAChB,QAAI,SAAU,UAAS,UAAU;AACjC,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,eAAe,UAAU,YAAY,WAAW,CAAC;AAErD,QAAM,gBAAgB,YAAY,MAAM;AACtC,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,WAAW,CAAC;AAEhB,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,gBAAgB,eAAe,mBAAmB,iBAAiB,OAAO,aAAa;AAAA,EACxG;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useLayoutEffect, useMemo, useRef, useCallback, useState } from 'react';\nimport { useMaskedOnChange } from './useMaskedOnChange.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { isSelectedValueEmpty } from '../../utils/listHelper.js';\n\ninterface UseControlsInputT {\n  handleOnBlur: () => void;\n  handleOnChange?: React.ChangeEventHandler<HTMLInputElement>;\n  handleOnFocus: React.FocusEventHandler<HTMLInputElement>;\n  showPlaceholder: string | null | undefined;\n  spanReferenceText: string | undefined;\n  width: number;\n  spanReference: React.Ref<HTMLSpanElement>;\n}\n\nconst PADDING_EXTRA = 2; // espacio para el caret\n\nconst useControlsInput = (): UseControlsInputT => {\n  const {\n    props: { selectedValues, allOptions, placeholder, onFilter, inline },\n    setHasFocus,\n    inputValue,\n    setInputValue,\n  } = useContext(ComboBoxContext);\n\n  const [width, setWidth] = useState(1);\n  const spanReference = useRef<HTMLSpanElement>(null);\n\n  const showPlaceholder = !inputValue && (inline || isSelectedValueEmpty(selectedValues)) ? placeholder : null;\n\n  const spanReferenceText = (inputValue || '').replace(/\\s/g, '\\u00a0') || '';\n\n  useLayoutEffect(() => {\n    const el = spanReference.current;\n    if (!el) return;\n\n    const measured = Math.ceil(el.offsetWidth) + PADDING_EXTRA;\n\n    if (Math.abs(measured - width) >= 1) {\n      setWidth(measured);\n    }\n  }, [spanReferenceText, width]);\n\n  const handleOnChange = useMaskedOnChange();\n\n  const handleOnBlur = useCallback(() => {\n    setInputValue('');\n    if (onFilter) onFilter(allOptions);\n    setHasFocus(false);\n  }, [setInputValue, onFilter, allOptions, setHasFocus]);\n\n  const handleOnFocus = useCallback(() => setHasFocus(true), [setHasFocus]);\n\n  return useMemo(\n    () => ({\n      handleOnBlur,\n      handleOnChange,\n      handleOnFocus,\n      showPlaceholder,\n      spanReferenceText,\n      width,\n      spanReference,\n    }),\n    [handleOnBlur, handleOnChange, handleOnFocus, showPlaceholder, spanReferenceText, width],\n  );\n};\n\nexport { useControlsInput };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,iBAAiB,SAAS,QAAQ,aAAa,gBAAgB;AACpF,SAAS,yBAAyB;AAClC,OAAO,qBAAqB;AAC5B,SAAS,4BAA4B;AAYrC,MAAM,gBAAgB;AAEtB,MAAM,mBAAmB,MAAyB;AAChD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY,aAAa,UAAU,OAAO;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,QAAM,gBAAgB,OAAwB,IAAI;AAElD,QAAM,kBAAkB,CAAC,eAAe,UAAU,qBAAqB,cAAc,KAAK,cAAc;AAExG,QAAM,qBAAqB,cAAc,IAAI,QAAQ,OAAO,MAAQ,KAAK;AAEzE,kBAAgB,MAAM;AACpB,UAAM,KAAK,cAAc;AACzB,QAAI,CAAC,GAAI;AAET,UAAM,WAAW,KAAK,KAAK,GAAG,WAAW,IAAI;AAE7C,QAAI,KAAK,IAAI,WAAW,KAAK,KAAK,GAAG;AACnC,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,mBAAmB,KAAK,CAAC;AAE7B,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,eAAe,YAAY,MAAM;AACrC,kBAAc,EAAE;AAChB,QAAI,SAAU,UAAS,UAAU;AACjC,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,eAAe,UAAU,YAAY,WAAW,CAAC;AAErD,QAAM,gBAAgB,YAAY,MAAM,YAAY,IAAI,GAAG,CAAC,WAAW,CAAC;AAExE,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,gBAAgB,eAAe,iBAAiB,mBAAmB,KAAK;AAAA,EACzF;AACF;",
   "names": []
 }

package/dist/esm/parts/controls-input/useKeyboardNavigation.js

@@ -16,6 +16,7 @@ const useKeyboardNavigation = () => {
       allOptions,
       isNonClearable,
       onCancel,
+      disabled,
       onKeyDown,
       onChange,
       onCreate,
@@ -45,9 +46,9 @@ const useKeyboardNavigation = () => {
   const currentItem = filteredOptions.find((item) => item.dsId === focusOptionIdx);
   const onInputKeyDown = useCallback(
     (e) => {
-      if (applyAriaDisabled || readOnly && !isMenuOpenableWithReadOnly) return;
+      if (applyAriaDisabled || readOnly && !isMenuOpenableWithReadOnly || disabled) return;
       if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);
-      if ((["ArrowDown", "ArrowUp", "Enter", "Spacebar"].includes(e.key) || /^[a-zA-Z0-9]$/.test(e.key)) && !menuState) {
+      if (["ArrowDown", "ArrowUp", "Enter", "Spacebar"].includes(e.key) && !menuState) {
         setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);
       }
       if (e.key === "Escape") {

package/dist/esm/parts/controls-input/useKeyboardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/useKeyboardNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext } from 'react';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport {\n  findInCircularList,\n  getOptions,\n  getSuggestedValueOnChange,\n  getLastValueSelected,\n} from '../../utils/listHelper.js';\nimport { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES, MENU_CONTROL_REASONS } from '../../constants.js';\nconst isOptionFocuseable = (opt: DSComboboxT.OptionTypes): boolean => !['section', 'separator'].includes(opt.type);\n\nconst optionHasFirstLetter = (opt: DSComboboxT.OptionTypes, letter: string): boolean =>\n  opt.label !== undefined && opt.label.toLowerCase().startsWith(letter.toLowerCase());\nexport const useKeyboardNavigation = () => {\n  const {\n    props: {\n      allOptions,\n      isNonClearable,\n      onCancel,\n      onKeyDown,\n      onChange,\n      onCreate,\n      onFilter,\n      onSelectAll,\n      inline,\n      selectedValues,\n      withoutPortal,\n      onlySelectable,\n      applyAriaDisabled,\n      readOnly,\n      isMenuOpenableWithReadOnly,\n    },\n    inputValue,\n    correctOptions: filteredOptions,\n    menuState,\n    focusOptionIdx,\n    listRef,\n    setMenuState,\n    setInputValue,\n    scrollOptionIntoView,\n    setFocusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const selectableOptions = getOptions(filteredOptions);\n  const currentItemIndex = filteredOptions.findIndex((opt) => opt.dsId === focusOptionIdx);\n  const currentItem = filteredOptions.find((item) => item.dsId === focusOptionIdx);\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (applyAriaDisabled || (readOnly && !isMenuOpenableWithReadOnly)) return;\n\n      // =============================================================================\n      // CUSTOM KEYS\n      // =============================================================================\n      if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);\n\n      if (\n        (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || /^[a-zA-Z0-9]$/.test(e.key)) &&\n        !menuState\n      ) {\n        setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n      }\n      // =============================================================================\n      // ESCAPE\n      // =============================================================================\n      if (e.key === 'Escape') {\n        if (onCancel) onCancel();\n        if (inputValue) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n        }\n        if (!inline) setMenuState(false, MENU_CONTROL_REASONS.CLOSE, e);\n      }\n      // =============================================================================\n      // ENTER KEY TO CREATE ELEMENTS\n      // =============================================================================\n      if (!readOnly && e.key === 'Enter' && currentItem?.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {\n        onCreate(inputValue);\n        // blank active item to force search last one\n        setFocusOptionIdx('');\n        if (onFilter) onFilter(allOptions, '');\n        setInputValue('');\n        return;\n      }\n\n      // =============================================================================\n      // Enter, space and Tab on selection\n      // =============================================================================\n      if (e.key === 'Enter' || (e.key === ' ' && e.altKey) || (e.key === 'Tab' && !multiple && !inline)) {\n        if (readOnly || currentItem?.applyAriaDisabled) return;\n\n        if (e.key !== 'Tab') e.preventDefault();\n        e.stopPropagation();\n\n        if (\n          focusOptionIdx !== '' &&\n          (menuState || inline) &&\n          currentItem?.type === MENU_OPTION_TYPES.OPTION &&\n          !currentItem.disabled\n        ) {\n          if (onFilter) onFilter(allOptions, '');\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, MENU_CONTROL_REASONS.SELECT_OPTION, e);\n          }\n          onChange(getSuggestedValueOnChange(currentItem, selectedValues, isNonClearable), currentItem, e);\n        }\n      }\n\n      if (e.key === 'Enter' && e.altKey) {\n        setMenuState(false, 'selectOption', e);\n      }\n\n      if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {\n        onSelectAll(\n          filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n          e,\n        );\n      }\n      // =============================================================================\n      // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT\n      // =============================================================================\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        if ((menuState || inline) && (selectableOptions.length || onCreate)) {\n          const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);\n          if (nextItemIndexIndex > -1) {\n            setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n            scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\n          }\n        }\n      }\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        if (!selectableOptions.length && !onCreate) return;\n        const prevItemIndex = findInCircularList(\n          filteredOptions,\n          currentItemIndex === -1 ? 0 : currentItemIndex,\n          isOptionFocuseable,\n          -1,\n        );\n        if (prevItemIndex > -1) {\n          if (menuState || inline) {\n            setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);\n            scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);\n          } else {\n            // open menu and search last item to focused\n            setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n            const lastItemIndex = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);\n            setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);\n            setTimeout(() => {\n              scrollOptionIntoView(filteredOptions[lastItemIndex].dsId);\n            });\n          }\n        }\n      }\n\n      // =============================================================================\n      // BACKSPACE\n      // =============================================================================\n      if (e.key === 'Backspace' && e.currentTarget.value.length <= 0 && !inline) {\n        if (readOnly) return;\n        const lastValue = getLastValueSelected(selectedValues);\n        if (!e.currentTarget.value && lastValue && !isNonClearable && !lastValue.applyAriaDisabled) {\n          onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);\n        }\n      }\n\n      if (e.key === 'Tab' && !inline && menuState) {\n        setMenuState(false, MENU_CONTROL_REASONS.BLUR, e);\n      }\n\n      // =============================================================================\n      // ONLYSELECTABLE LETTER/NUMBER KEYS TO FOCUS OPTIONS\n      // =============================================================================\n\n      if (onlySelectable && /^[a-zA-Z\\d]$/.test(e.key)) {\n        if (!menuState) {\n          setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n        }\n\n        const isOptionFocusableByLetter = (opt: DSComboboxT.OptionTypes): boolean =>\n          isOptionFocuseable(opt) && optionHasFirstLetter(opt, e.key);\n\n        const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocusableByLetter);\n        const nextItem = filteredOptions[nextItemIndexIndex];\n        if (!nextItem) return;\n        setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n        scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      onKeyDown,\n      currentItem,\n      onCreate,\n      multiple,\n      inputValue,\n      inline,\n      withoutPortal,\n      setMenuState,\n      onCancel,\n      onFilter,\n      setInputValue,\n      listRef,\n      focusOptionIdx,\n      menuState,\n      selectableOptions.length,\n      filteredOptions,\n      currentItemIndex,\n      setFocusOptionIdx,\n      selectedValues,\n      onChange,\n      isNonClearable,\n    ],\n  );\n\n  return { onInputKeyDown };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,kBAAkB;AAExC,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B,mBAAmB,4BAA4B;AACpF,MAAM,qBAAqB,CAAC,QAA0C,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,IAAI,IAAI;AAEjH,MAAM,uBAAuB,CAAC,KAA8B,WAC1D,IAAI,UAAU,UAAa,IAAI,MAAM,YAAY,EAAE,WAAW,OAAO,YAAY,CAAC;AAC7E,MAAM,wBAAwB,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAC7C,QAAM,oBAAoB,WAAW,eAAe;AACpD,QAAM,mBAAmB,gBAAgB,UAAU,CAAC,QAAQ,IAAI,SAAS,cAAc;AACvF,QAAM,cAAc,gBAAgB,KAAK,CAAC,SAAS,KAAK,SAAS,cAAc;AAE/E,QAAM,iBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,UAAI,qBAAsB,YAAY,CAAC,2BAA6B;AAKpE,UAAI,aAAa,aAAa,SAAS,kBAAkB,OAAQ,WAAU,GAAG,WAAW;AAEzF,WACG,CAAC,aAAa,WAAW,SAAS,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,gBAAgB,KAAK,EAAE,GAAG,MAC5F,CAAC,WACD;AACA,qBAAa,MAAM,qBAAqB,MAAM,CAAC;AAAA,MACjD;AAIA,UAAI,EAAE,QAAQ,UAAU;AACtB,YAAI,SAAU,UAAS;AACvB,YAAI,YAAY;AACd,cAAI,SAAU,UAAS,YAAY,UAAU;AAC7C,wBAAc,EAAE;AAAA,QAClB;AACA,YAAI,CAAC,OAAQ,cAAa,OAAO,qBAAqB,OAAO,CAAC;AAAA,MAChE;AAIA,UAAI,CAAC,YAAY,EAAE,QAAQ,WAAW,aAAa,SAAS,2BAA2B,aAAa,UAAU;AAC5G,iBAAS,UAAU;AAEnB,0BAAkB,EAAE;AACpB,YAAI,SAAU,UAAS,YAAY,EAAE;AACrC,sBAAc,EAAE;AAChB;AAAA,MACF;AAKA,UAAI,EAAE,QAAQ,WAAY,EAAE,QAAQ,OAAO,EAAE,UAAY,EAAE,QAAQ,SAAS,CAAC,YAAY,CAAC,QAAS;AACjG,YAAI,YAAY,aAAa,kBAAmB;AAEhD,YAAI,EAAE,QAAQ,MAAO,GAAE,eAAe;AACtC,UAAE,gBAAgB;AAElB,YACE,mBAAmB,OAClB,aAAa,WACd,aAAa,SAAS,kBAAkB,UACxC,CAAC,YAAY,UACb;AACA,cAAI,SAAU,UAAS,YAAY,EAAE;AACrC,wBAAc,EAAE;AAChB,cAAI,CAAC,UAAU;AACb,yBAAa,OAAO,qBAAqB,eAAe,CAAC;AAAA,UAC3D;AACA,mBAAS,0BAA0B,aAAa,gBAAgB,cAAc,GAAG,aAAa,CAAC;AAAA,QACjG;AAAA,MACF;AAEA,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ;AACjC,qBAAa,OAAO,gBAAgB,CAAC;AAAA,MACvC;AAEA,UAAI,EAAE,QAAQ,OAAO,EAAE,WAAW,YAAY,aAAa;AACzD;AAAA,UACE,gBAAgB,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ;AAAA,UAC/E;AAAA,QACF;AAAA,MACF;AAKA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,aAAK,aAAa,YAAY,kBAAkB,UAAU,WAAW;AACnE,gBAAM,qBAAqB,mBAAmB,iBAAiB,kBAAkB,kBAAkB;AACnG,cAAI,qBAAqB,IAAI;AAC3B,8BAAkB,gBAAgB,kBAAkB,EAAE,IAAI;AAC1D,iCAAqB,gBAAgB,kBAAkB,EAAE,IAAI;AAAA,UAC/D;AAAA,QACF;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,WAAW;AACvB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,YAAI,CAAC,kBAAkB,UAAU,CAAC,SAAU;AAC5C,cAAM,gBAAgB;AAAA,UACpB;AAAA,UACA,qBAAqB,KAAK,IAAI;AAAA,UAC9B;AAAA,UACA;AAAA,QACF;AACA,YAAI,gBAAgB,IAAI;AACtB,cAAI,aAAa,QAAQ;AACvB,8BAAkB,gBAAgB,aAAa,EAAE,IAAI;AACrD,iCAAqB,gBAAgB,aAAa,EAAE,IAAI;AAAA,UAC1D,OAAO;AAEL,yBAAa,MAAM,qBAAqB,MAAM,CAAC;AAC/C,kBAAM,gBAAgB,mBAAmB,iBAAiB,GAAG,oBAAoB,EAAE;AACnF,8BAAkB,gBAAgB,aAAa,EAAE,IAAI;AACrD,uBAAW,MAAM;AACf,mCAAqB,gBAAgB,aAAa,EAAE,IAAI;AAAA,YAC1D,CAAC;AAAA,UACH;AAAA,QACF;AAAA,MACF;AAKA,UAAI,EAAE,QAAQ,eAAe,EAAE,cAAc,MAAM,UAAU,KAAK,CAAC,QAAQ;AACzE,YAAI,SAAU;AACd,cAAM,YAAY,qBAAqB,cAAc;AACrD,YAAI,CAAC,EAAE,cAAc,SAAS,aAAa,CAAC,kBAAkB,CAAC,UAAU,mBAAmB;AAC1F,mBAAS,0BAA0B,WAAW,cAAc,GAAG,WAAW,CAAC;AAAA,QAC7E;AAAA,MACF;AAEA,UAAI,EAAE,QAAQ,SAAS,CAAC,UAAU,WAAW;AAC3C,qBAAa,OAAO,qBAAqB,MAAM,CAAC;AAAA,MAClD;AAMA,UAAI,kBAAkB,eAAe,KAAK,EAAE,GAAG,GAAG;AAChD,YAAI,CAAC,WAAW;AACd,uBAAa,MAAM,qBAAqB,MAAM,CAAC;AAAA,QACjD;AAEA,cAAM,4BAA4B,CAAC,QACjC,mBAAmB,GAAG,KAAK,qBAAqB,KAAK,EAAE,GAAG;AAE5D,cAAM,qBAAqB,mBAAmB,iBAAiB,kBAAkB,yBAAyB;AAC1G,cAAM,WAAW,gBAAgB,kBAAkB;AACnD,YAAI,CAAC,SAAU;AACf,0BAAkB,gBAAgB,kBAAkB,EAAE,IAAI;AAC1D,6BAAqB,gBAAgB,kBAAkB,EAAE,IAAI;AAAA,MAC/D;AAAA,IACF;AAAA;AAAA,IAEA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,eAAe;AAC1B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext } from 'react';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport {\n  findInCircularList,\n  getOptions,\n  getSuggestedValueOnChange,\n  getLastValueSelected,\n} from '../../utils/listHelper.js';\nimport { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES, MENU_CONTROL_REASONS } from '../../constants.js';\nconst isOptionFocuseable = (opt: DSComboboxT.OptionTypes): boolean => !['section', 'separator'].includes(opt.type);\n\nconst optionHasFirstLetter = (opt: DSComboboxT.OptionTypes, letter: string): boolean =>\n  opt.label !== undefined && opt.label.toLowerCase().startsWith(letter.toLowerCase());\nexport const useKeyboardNavigation = () => {\n  const {\n    props: {\n      allOptions,\n      isNonClearable,\n      onCancel,\n      disabled,\n      onKeyDown,\n      onChange,\n      onCreate,\n      onFilter,\n      onSelectAll,\n      inline,\n      selectedValues,\n      withoutPortal,\n      onlySelectable,\n      applyAriaDisabled,\n      readOnly,\n      isMenuOpenableWithReadOnly,\n    },\n    inputValue,\n    correctOptions: filteredOptions,\n    menuState,\n    focusOptionIdx,\n    listRef,\n    setMenuState,\n    setInputValue,\n    scrollOptionIntoView,\n    setFocusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  const multiple = Array.isArray(selectedValues);\n  const selectableOptions = getOptions(filteredOptions);\n  const currentItemIndex = filteredOptions.findIndex((opt) => opt.dsId === focusOptionIdx);\n  const currentItem = filteredOptions.find((item) => item.dsId === focusOptionIdx);\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (applyAriaDisabled || (readOnly && !isMenuOpenableWithReadOnly) || disabled) return;\n\n      // =============================================================================\n      // CUSTOM KEYS\n      // =============================================================================\n      if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);\n\n      if (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) && !menuState) {\n        setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n      }\n      // =============================================================================\n      // ESCAPE\n      // =============================================================================\n      if (e.key === 'Escape') {\n        if (onCancel) onCancel();\n        if (inputValue) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n        }\n        if (!inline) setMenuState(false, MENU_CONTROL_REASONS.CLOSE, e);\n      }\n      // =============================================================================\n      // ENTER KEY TO CREATE ELEMENTS\n      // =============================================================================\n      if (!readOnly && e.key === 'Enter' && currentItem?.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {\n        onCreate(inputValue);\n        // blank active item to force search last one\n        setFocusOptionIdx('');\n        if (onFilter) onFilter(allOptions, '');\n        setInputValue('');\n        return;\n      }\n\n      // =============================================================================\n      // Enter, space and Tab on selection\n      // =============================================================================\n      if (e.key === 'Enter' || (e.key === ' ' && e.altKey) || (e.key === 'Tab' && !multiple && !inline)) {\n        if (readOnly || currentItem?.applyAriaDisabled) return;\n\n        if (e.key !== 'Tab') e.preventDefault();\n        e.stopPropagation();\n\n        if (\n          focusOptionIdx !== '' &&\n          (menuState || inline) &&\n          currentItem?.type === MENU_OPTION_TYPES.OPTION &&\n          !currentItem.disabled\n        ) {\n          if (onFilter) onFilter(allOptions, '');\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, MENU_CONTROL_REASONS.SELECT_OPTION, e);\n          }\n          onChange(getSuggestedValueOnChange(currentItem, selectedValues, isNonClearable), currentItem, e);\n        }\n      }\n\n      if (e.key === 'Enter' && e.altKey) {\n        setMenuState(false, 'selectOption', e);\n      }\n\n      if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {\n        onSelectAll(\n          filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n          e,\n        );\n      }\n      // =============================================================================\n      // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT\n      // =============================================================================\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        if ((menuState || inline) && (selectableOptions.length || onCreate)) {\n          const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);\n          if (nextItemIndexIndex > -1) {\n            setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n            scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\n          }\n        }\n      }\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        if (!selectableOptions.length && !onCreate) return;\n        const prevItemIndex = findInCircularList(\n          filteredOptions,\n          currentItemIndex === -1 ? 0 : currentItemIndex,\n          isOptionFocuseable,\n          -1,\n        );\n        if (prevItemIndex > -1) {\n          if (menuState || inline) {\n            setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);\n            scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);\n          } else {\n            // open menu and search last item to focused\n            setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n            const lastItemIndex = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);\n            setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);\n            setTimeout(() => {\n              scrollOptionIntoView(filteredOptions[lastItemIndex].dsId);\n            });\n          }\n        }\n      }\n\n      // =============================================================================\n      // BACKSPACE\n      // =============================================================================\n      if (e.key === 'Backspace' && e.currentTarget.value.length <= 0 && !inline) {\n        if (readOnly) return;\n        const lastValue = getLastValueSelected(selectedValues);\n        if (!e.currentTarget.value && lastValue && !isNonClearable && !lastValue.applyAriaDisabled) {\n          onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);\n        }\n      }\n\n      if (e.key === 'Tab' && !inline && menuState) {\n        setMenuState(false, MENU_CONTROL_REASONS.BLUR, e);\n      }\n\n      // =============================================================================\n      // ONLYSELECTABLE LETTER/NUMBER KEYS TO FOCUS OPTIONS\n      // =============================================================================\n\n      if (onlySelectable && /^[a-zA-Z\\d]$/.test(e.key)) {\n        if (!menuState) {\n          setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n        }\n\n        const isOptionFocusableByLetter = (opt: DSComboboxT.OptionTypes): boolean =>\n          isOptionFocuseable(opt) && optionHasFirstLetter(opt, e.key);\n\n        const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocusableByLetter);\n        const nextItem = filteredOptions[nextItemIndexIndex];\n        if (!nextItem) return;\n        setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);\n        scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      onKeyDown,\n      currentItem,\n      onCreate,\n      multiple,\n      inputValue,\n      inline,\n      withoutPortal,\n      setMenuState,\n      onCancel,\n      onFilter,\n      setInputValue,\n      listRef,\n      focusOptionIdx,\n      menuState,\n      selectableOptions.length,\n      filteredOptions,\n      currentItemIndex,\n      setFocusOptionIdx,\n      selectedValues,\n      onChange,\n      isNonClearable,\n    ],\n  );\n\n  return { onInputKeyDown };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/controls-input/useMaskedOnChange.js

@@ -2,22 +2,13 @@ import * as React from "react";
 import { useContext, useCallback } from "react";
 import ComboBoxContext from "../../ComboBoxCTX.js";
 import { filterOptions } from "../../utils/listHelper.js";
-const useMaskedOnChange = ({
-  mutableUpdateStyles
-} = {}) => {
+const useMaskedOnChange = () => {
   const {
     props: { useMask, onFilter, allOptions, applyAriaDisabled },
     setMenuState,
     setInputValue,
     setFocusOptionIdx
   } = useContext(ComboBoxContext);
-  const repositionFloatingWrapper = useCallback(() => {
-    if (mutableUpdateStyles && mutableUpdateStyles.current) {
-      requestAnimationFrame(() => {
-        mutableUpdateStyles.current();
-      });
-    }
-  }, [mutableUpdateStyles]);
   const handleOnChange = useCallback(
     (e) => {
       if (applyAriaDisabled) return;
@@ -27,26 +18,16 @@ const useMaskedOnChange = ({
       }
       setFocusOptionIdx("");
       setInputValue(e.currentTarget.value);
-      repositionFloatingWrapper();
     },
-    [
-      applyAriaDisabled,
-      setMenuState,
-      onFilter,
-      setFocusOptionIdx,
-      setInputValue,
-      repositionFloatingWrapper,
-      allOptions
-    ]
+    [applyAriaDisabled, setMenuState, onFilter, setFocusOptionIdx, setInputValue, allOptions]
   );
   const handleOnChangeMask = useCallback(
     (e, mask) => {
       setMenuState(true, "filter", e);
       if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);
       else if (!mask && onFilter) onFilter(allOptions, "");
-      repositionFloatingWrapper();
     },
-    [setMenuState, onFilter, allOptions, repositionFloatingWrapper]
+    [setMenuState, onFilter, allOptions]
   );
   const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });
   return onChangeMask?.onChange || handleOnChange;

package/dist/esm/parts/controls-input/useMaskedOnChange.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/useMaskedOnChange.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { filterOptions } from '../../utils/listHelper.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\n\nconst useMaskedOnChange = ({\n  mutableUpdateStyles,\n}: {\n  mutableUpdateStyles?: DSComboboxT.PopperMutableUpdateStylesT;\n} = {}) => {\n  const {\n    props: { useMask, onFilter, allOptions, applyAriaDisabled },\n    setMenuState,\n    setInputValue,\n    setFocusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  const repositionFloatingWrapper = useCallback(() => {\n    if (mutableUpdateStyles && mutableUpdateStyles.current) {\n      requestAnimationFrame(() => {\n        mutableUpdateStyles.current();\n      });\n    }\n  }, [mutableUpdateStyles]);\n\n  // default onchange when no mask provided\n  const handleOnChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (applyAriaDisabled) return;\n      setMenuState(true, 'filter', e);\n      if (onFilter) {\n        // when filtering is controlled we suggest the basic filtering but let the user decide\n        onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n      }\n      setFocusOptionIdx('');\n      setInputValue(e.currentTarget.value);\n      repositionFloatingWrapper();\n    },\n    [\n      applyAriaDisabled,\n      setMenuState,\n      onFilter,\n      setFocusOptionIdx,\n      setInputValue,\n      repositionFloatingWrapper,\n      allOptions,\n    ],\n  );\n\n  // onchange used when mask is provided\n  const handleOnChangeMask = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => {\n      setMenuState(true, 'filter', e);\n      if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);\n      else if (!mask && onFilter) onFilter(allOptions, '');\n      repositionFloatingWrapper();\n    },\n    [setMenuState, onFilter, allOptions, repositionFloatingWrapper],\n  );\n\n  const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });\n\n  return onChangeMask?.onChange || handleOnChange;\n};\n\nexport { useMaskedOnChange };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,mBAAmB;AACxC,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAG9B,MAAM,oBAAoB,CAAC;AAAA,EACzB;AACF,IAEI,CAAC,MAAM;AACT,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,YAAY,kBAAkB;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,4BAA4B,YAAY,MAAM;AAClD,QAAI,uBAAuB,oBAAoB,SAAS;AACtD,4BAAsB,MAAM;AAC1B,4BAAoB,QAAQ;AAAA,MAC9B,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,mBAAmB,CAAC;AAGxB,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAA2C;AAC1C,UAAI,kBAAmB;AACvB,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,UAAU;AAEZ,iBAAS,cAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,MAClF;AACA,wBAAkB,EAAE;AACpB,oBAAc,EAAE,cAAc,KAAK;AACnC,gCAA0B;AAAA,IAC5B;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGA,QAAM,qBAAqB;AAAA,IACzB,CAAC,GAAwC,SAAkB;AACzD,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,QAAQ,SAAU,UAAS,cAAc,MAAM,UAAU,GAAG,IAAI;AAAA,eAC3D,CAAC,QAAQ,SAAU,UAAS,YAAY,EAAE;AACnD,gCAA0B;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,UAAU,YAAY,yBAAyB;AAAA,EAChE;AAEA,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU,mBAAmB,CAAC;AAEzF,SAAO,cAAc,YAAY;AACnC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { filterOptions } from '../../utils/listHelper.js';\n\nconst useMaskedOnChange = () => {\n  const {\n    props: { useMask, onFilter, allOptions, applyAriaDisabled },\n    setMenuState,\n    setInputValue,\n    setFocusOptionIdx,\n  } = useContext(ComboBoxContext);\n\n  // default onchange when no mask provided\n  const handleOnChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (applyAriaDisabled) return;\n      setMenuState(true, 'filter', e);\n      if (onFilter) {\n        // when filtering is controlled we suggest the basic filtering but let the user decide\n        onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n      }\n      setFocusOptionIdx('');\n      setInputValue(e.currentTarget.value);\n    },\n    [applyAriaDisabled, setMenuState, onFilter, setFocusOptionIdx, setInputValue, allOptions],\n  );\n\n  // onchange used when mask is provided\n  const handleOnChangeMask = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => {\n      setMenuState(true, 'filter', e);\n      if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);\n      else if (!mask && onFilter) onFilter(allOptions, '');\n    },\n    [setMenuState, onFilter, allOptions],\n  );\n\n  const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });\n\n  return onChangeMask?.onChange || handleOnChange;\n};\n\nexport { useMaskedOnChange };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,mBAAmB;AACxC,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,YAAY,kBAAkB;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAG9B,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAA2C;AAC1C,UAAI,kBAAmB;AACvB,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,UAAU;AAEZ,iBAAS,cAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,MAClF;AACA,wBAAkB,EAAE;AACpB,oBAAc,EAAE,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,mBAAmB,cAAc,UAAU,mBAAmB,eAAe,UAAU;AAAA,EAC1F;AAGA,QAAM,qBAAqB;AAAA,IACzB,CAAC,GAAwC,SAAkB;AACzD,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,QAAQ,SAAU,UAAS,cAAc,MAAM,UAAU,GAAG,IAAI;AAAA,eAC3D,CAAC,QAAQ,SAAU,UAAS,YAAY,EAAE;AAAA,IACrD;AAAA,IACA,CAAC,cAAc,UAAU,UAAU;AAAA,EACrC;AAEA,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU,mBAAmB,CAAC;AAEzF,SAAO,cAAc,YAAY;AACnC;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext, useMemo, useCallback } from "react";
+import { useContext, useCallback } from "react";
 import { DSFastList } from "@elliemae/ds-fast-list";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
@@ -36,26 +36,32 @@ const MenuList = () => {
   const preventLoseInputFocus = useCallback((e) => {
     e.preventDefault();
   }, []);
-  const menuListRender = useMemo(() => {
-    if (isSkeleton) return /* @__PURE__ */ jsx(SkeletonContainer, { instanceUid, getOwnerProps });
-    if (isLoading) return /* @__PURE__ */ jsx(LoadingContainer, { getOwnerProps });
-    if (filteredOptions && filteredOptions.length > 0 || onCreate) {
-      return /* @__PURE__ */ jsx(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ jsx(
-        StyledFastList,
-        {
-          dsFastlistWrapperList: { role: "listbox", "data-testid": ComboboxDataTestid.LIST, "aria-label": "listbox" },
-          dsFastlistItem: { role: "none" },
-          actionRef: listRef,
-          count: filteredOptions.length,
-          ItemRenderer,
-          extraItemProps: { itemList: filteredOptions },
-          getId: (index) => filteredOptions[index].dsId,
-          estimateSize: estimatedSize,
-          getOwnerProps
-        }
-      ) });
-    }
-    return /* @__PURE__ */ jsx(
+  let content;
+  if (isSkeleton) {
+    content = /* @__PURE__ */ jsx(SkeletonContainer, { instanceUid, getOwnerProps });
+  } else if (isLoading) {
+    content = /* @__PURE__ */ jsx(LoadingContainer, { getOwnerProps });
+  } else if ((filteredOptions?.length ?? 0) > 0 || onCreate) {
+    content = /* @__PURE__ */ jsx(StyledItemsWrapper, { maxHeight: menuMaxHeight, id: `combo-listbox-${instanceUid}`, children: /* @__PURE__ */ jsx(
+      StyledFastList,
+      {
+        dsFastlistWrapperList: {
+          role: "listbox",
+          "data-testid": ComboboxDataTestid.LIST,
+          "aria-label": "listbox"
+        },
+        dsFastlistItem: { role: "none" },
+        actionRef: listRef,
+        count: filteredOptions.length,
+        ItemRenderer,
+        extraItemProps: { itemList: filteredOptions },
+        getId: (index) => filteredOptions[index].dsId,
+        estimateSize: estimatedSize,
+        getOwnerProps
+      }
+    ) });
+  } else {
+    content = /* @__PURE__ */ jsx(
       StyledNoResultsWrapper,
       {
         id: `combo-listbox-${instanceUid}`,
@@ -64,17 +70,7 @@ const MenuList = () => {
         children: noOptionsMessage
       }
     );
-  }, [
-    isSkeleton,
-    instanceUid,
-    isLoading,
-    filteredOptions,
-    onCreate,
-    noOptionsMessage,
-    menuMaxHeight,
-    listRef,
-    getOwnerProps
-  ]);
+  }
   return /* @__PURE__ */ jsx(
     StyledListWrapper,
     {
@@ -83,7 +79,7 @@ const MenuList = () => {
       onMouseDown: preventLoseInputFocus,
       width,
       minWidth: menuMinWidth,
-      children: menuListRender
+      children: content
     }
   );
 };

package/dist/esm/parts/menu-list/MenuList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/MenuList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst StyledFastList = styled(DSFastList, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.FAST_LIST,\n})``;\n\nconst StyledItemsWrapper = styled(Grid)<{\n  maxHeight: SizingProps['maxHeight'];\n}>`\n  max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nconst estimatedSize = () => 32;\nexport const MenuList = (): JSX.Element => {\n  const {\n    props,\n    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },\n    controlsWrapperRef,\n    listRef,\n    wrapperListRef,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { getOwnerProps } = useOwnerProps(props);\n\n  // removing the header list if we are filtering or is inline cb or we have no options to show\n\n  const { width } = useOnElementResize(controlsWrapperRef);\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const menuListRender = useMemo(() => {\n    if (isSkeleton) return <SkeletonContainer instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n\n    if (isLoading) return <LoadingContainer getOwnerProps={getOwnerProps} />;\n\n    if ((filteredOptions && filteredOptions.length > 0) || onCreate) {\n      return (\n        <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n          <StyledFastList\n            dsFastlistWrapperList={{ role: 'listbox', 'data-testid': ComboboxDataTestid.LIST, 'aria-label': 'listbox' }}\n            dsFastlistItem={{ role: 'none' }}\n            actionRef={listRef}\n            count={filteredOptions.length}\n            ItemRenderer={ItemRenderer}\n            extraItemProps={{ itemList: filteredOptions }}\n            getId={(index: number) => filteredOptions[index].dsId}\n            estimateSize={estimatedSize}\n            getOwnerProps={getOwnerProps}\n          />\n        </StyledItemsWrapper>\n      );\n    }\n\n    return (\n      <StyledNoResultsWrapper\n        id={`combo-listbox-${instanceUid}`}\n        data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n        role=\"alert\"\n      >\n        {noOptionsMessage}\n      </StyledNoResultsWrapper>\n    );\n  }, [\n    isSkeleton,\n    instanceUid,\n    isLoading,\n    filteredOptions,\n    onCreate,\n    noOptionsMessage,\n    menuMaxHeight,\n    listRef,\n    getOwnerProps,\n  ]);\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      {menuListRender}\n    </StyledListWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC8CI;AA9C3B,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,kBAAkB;AAC3B,SAA2B,cAAc;AACzC,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,iBAAiB,OAAO,YAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAED,MAAM,qBAAqB,OAAO,IAAI;AAAA,gBAGtB,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAGnF,MAAM,gBAAgB,MAAM;AACrB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,WAAW;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,WAAW,eAAe;AAC9B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAI7C,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AACvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,WAAY,QAAO,oBAAC,qBAAkB,aAA0B,eAA8B;AAElG,QAAI,UAAW,QAAO,oBAAC,oBAAiB,eAA8B;AAEtE,QAAK,mBAAmB,gBAAgB,SAAS,KAAM,UAAU;AAC/D,aACE,oBAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,QAAC;AAAA;AAAA,UACC,uBAAuB,EAAE,MAAM,WAAW,eAAe,mBAAmB,MAAM,cAAc,UAAU;AAAA,UAC1G,gBAAgB,EAAE,MAAM,OAAO;AAAA,UAC/B,WAAW;AAAA,UACX,OAAO,gBAAgB;AAAA,UACvB;AAAA,UACA,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,UAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,UACjD,cAAc;AAAA,UACd;AAAA;AAAA,MACF,GACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,mBAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { type SizingProps, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { StyledListWrapper, StyledNoResultsWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\nimport { SkeletonContainer } from './SkeletonContainer.js';\nimport { useOnElementResize } from '../../utils/useOnElementResize.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst StyledFastList = styled(DSFastList, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.FAST_LIST,\n})``;\n\nconst StyledItemsWrapper = styled(Grid)<{\n  maxHeight: SizingProps['maxHeight'];\n}>`\n  max-height: ${({ maxHeight }) => (maxHeight ? `${String(maxHeight)}px` : '300px')};\n`;\n\nconst estimatedSize = () => 32;\n\nexport const MenuList = (): JSX.Element => {\n  const {\n    props,\n    props: { isLoading, menuMinWidth, noOptionsMessage, menuMaxHeight, onCreate, inline, isSkeleton },\n    controlsWrapperRef,\n    listRef,\n    wrapperListRef,\n    correctOptions: filteredOptions,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const { width } = useOnElementResize(controlsWrapperRef);\n\n  const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  let content: JSX.Element;\n\n  if (isSkeleton) {\n    content = <SkeletonContainer instanceUid={instanceUid} getOwnerProps={getOwnerProps} />;\n  } else if (isLoading) {\n    content = <LoadingContainer getOwnerProps={getOwnerProps} />;\n  } else if ((filteredOptions?.length ?? 0) > 0 || onCreate) {\n    content = (\n      <StyledItemsWrapper maxHeight={menuMaxHeight} id={`combo-listbox-${instanceUid}`}>\n        <StyledFastList\n          dsFastlistWrapperList={{\n            role: 'listbox',\n            'data-testid': ComboboxDataTestid.LIST,\n            'aria-label': 'listbox',\n          }}\n          dsFastlistItem={{ role: 'none' }}\n          actionRef={listRef}\n          count={filteredOptions.length}\n          ItemRenderer={ItemRenderer}\n          extraItemProps={{ itemList: filteredOptions }}\n          getId={(index: number) => filteredOptions[index].dsId}\n          estimateSize={estimatedSize}\n          getOwnerProps={getOwnerProps}\n        />\n      </StyledItemsWrapper>\n    );\n  } else {\n    content = (\n      <StyledNoResultsWrapper\n        id={`combo-listbox-${instanceUid}`}\n        data-testid={ComboboxDataTestid.NO_MATCHES_FOUND}\n        role=\"alert\"\n      >\n        {noOptionsMessage}\n      </StyledNoResultsWrapper>\n    );\n  }\n\n  return (\n    <StyledListWrapper\n      innerRef={wrapperListRef}\n      inline={inline}\n      onMouseDown={preventLoseInputFocus}\n      width={width}\n      minWidth={menuMinWidth}\n    >\n      {content}\n    </StyledListWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgDT;AAhDd,SAAgB,YAAY,mBAAmB;AAC/C,SAAS,kBAAkB;AAC3B,SAA2B,cAAc;AACzC,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,iBAAiB,OAAO,YAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAED,MAAM,qBAAqB,OAAO,IAAI;AAAA,gBAGtB,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,OAAO,SAAS,CAAC,OAAO,OAAQ;AAAA;AAGnF,MAAM,gBAAgB,MAAM;AAErB,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,WAAW,cAAc,kBAAkB,eAAe,UAAU,QAAQ,WAAW;AAAA,IAChG;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,cAAc,IAAI,cAAc,KAAK;AAC7C,QAAM,EAAE,MAAM,IAAI,mBAAmB,kBAAkB;AAEvD,QAAM,wBAAiD,YAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,MAAI;AAEJ,MAAI,YAAY;AACd,cAAU,oBAAC,qBAAkB,aAA0B,eAA8B;AAAA,EACvF,WAAW,WAAW;AACpB,cAAU,oBAAC,oBAAiB,eAA8B;AAAA,EAC5D,YAAY,iBAAiB,UAAU,KAAK,KAAK,UAAU;AACzD,cACE,oBAAC,sBAAmB,WAAW,eAAe,IAAI,iBAAiB,WAAW,IAC5E;AAAA,MAAC;AAAA;AAAA,QACC,uBAAuB;AAAA,UACrB,MAAM;AAAA,UACN,eAAe,mBAAmB;AAAA,UAClC,cAAc;AAAA,QAChB;AAAA,QACA,gBAAgB,EAAE,MAAM,OAAO;AAAA,QAC/B,WAAW;AAAA,QACX,OAAO,gBAAgB;AAAA,QACvB;AAAA,QACA,gBAAgB,EAAE,UAAU,gBAAgB;AAAA,QAC5C,OAAO,CAAC,UAAkB,gBAAgB,KAAK,EAAE;AAAA,QACjD,cAAc;AAAA,QACd;AAAA;AAAA,IACF,GACF;AAAA,EAEJ,OAAO;AACL,cACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,iBAAiB,WAAW;AAAA,QAChC,eAAa,mBAAmB;AAAA,QAChC,MAAK;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/dist/esm/parts/menu-list/styled.js

@@ -15,7 +15,7 @@ const StyledCreatableValue = styled.span`
   word-break: break-all;
 `;
 const StyledNoResultsWrapper = styled.div`
-  padding: 16px;
+  padding: 14px;
 `;
 export {
   StyledCreatableLabel,

package/dist/esm/parts/menu-list/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled(Grid)<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  z-index: 100;\n`;\n\nexport const StyledCreatableLabel = styled.span`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled.span`\n  word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled.div`\n  padding: 16px;\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled(Grid)<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  z-index: 100;\n`;\n\nexport const StyledCreatableLabel = styled.span`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled.span`\n  word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled.div`\n  padding: 14px;\n`;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEvB,SAAS,YAAY;AAQd,MAAM,oBAAoB,OAAO,IAAI;AAAA,eAC7B,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA;AAAA;AAK/B,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAIpC,MAAM,yBAAyB,OAAO;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/menu-list/useItemRenderer.js

@@ -17,6 +17,11 @@ const StyledSingleMenuItem = styled(SingleMenuItem, {
   slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,
   preserveLegacyDataTestId: true
 })``;
+const StyledMultiMenuItem = styled(MultiMenuItem, {
+  name: DSFormComboboxName,
+  slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,
+  preserveLegacyDataTestId: true
+})``;
 const ItemRenderer = ({ index, extraItemProps }) => {
   const {
     props,
@@ -36,7 +41,7 @@ const ItemRenderer = ({ index, extraItemProps }) => {
   );
   const option = extraItemProps?.itemList?.[index];
   const multiple = Array.isArray(selectedValues);
-  const CBItem = multiple ? MultiMenuItem : StyledSingleMenuItem;
+  const CBItem = multiple ? StyledMultiMenuItem : StyledSingleMenuItem;
   const handleOnCreateClick = useCallback(() => {
     if (inputValue && onCreate) {
       onCreate(inputValue);

package/dist/esm/parts/menu-list/useItemRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/useItemRenderer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\nimport { styled } from '@elliemae/ds-system';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Section } from '../Section.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface ItemRendererT {\n  extraItemProps?: {\n    itemList?: DSComboboxT.OptionTypes[];\n  };\n  index: number;\n}\n\nconst StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nexport const ItemRenderer = ({ index, extraItemProps }: ItemRendererT): JSX.Element => {\n  const {\n    props,\n    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },\n    setMenuState,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    optionsPerSection,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n    }),\n    [index],\n  );\n\n  const option = extraItemProps?.itemList?.[index];\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem = multiple ? MultiMenuItem : StyledSingleMenuItem;\n\n  const handleOnCreateClick = useCallback(() => {\n    if (inputValue && onCreate) {\n      onCreate(inputValue);\n      setInputValue('');\n      if (onFilter) onFilter(allOptions, inputValue);\n    }\n  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n\n  const handleClick = useCallback(\n    (currentOption: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n      if (readOnly) return;\n      if (currentOption.type === MENU_OPTION_TYPES.OPTION) {\n        if (!currentOption.disabled) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          onChange(getSuggestedValueOnChange(currentOption, selectedValues, isNonClearable), currentOption, e);\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n  );\n\n  // prevent blur from controls input\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n  return useMemo(() => {\n    if (option) {\n      const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;\n      const generalProps = {\n        // 'aria-setsize': `${allOptions.length}`,\n        // 'aria-posinset': `${vItem.index + 1}`,\n        key: `${dsId}`,\n        dsId: dsId.toString(),\n        ...rest,\n      };\n      if (type === MENU_OPTION_TYPES.SECTION) {\n        return (\n          <Section\n            label={option.label}\n            {...generalProps}\n            // @ts-expect-error - this needs to be rewritten, broken typescript typings?\n            options={option.options}\n            handleClick={handleClick}\n            focusOptionIdx={focusOptionIdx}\n            handleOnMouseDown={handleOnMouseDown}\n            selectedValues={selectedValues}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === MENU_OPTION_TYPES.SEPARATOR) {\n        return <Separator {...generalProps} render={undefined} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        return (\n          // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n          <CBItem\n            {...generalProps}\n            value={option.value}\n            label={option.label}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || itemReadOnly}\n            onClick={(e: React.MouseEvent) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <StyledSingleMenuItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label: labelCreatable }: { label?: string }) => (\n              <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel>Add:</StyledCreatableLabel>\n                <StyledCreatableValue>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={handleOnCreateClick}\n          />\n        );\n      }\n      return null;\n    }\n    return null;\n  }, [optionsPerSection, focusOptionIdx, selectedValues, allOptions, onCreate, inputValue, readOnly]);\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Separator } from '@elliemae/ds-menu-items';\nimport { styled } from '@elliemae/ds-system';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { Section } from '../Section.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface ItemRendererT {\n  extraItemProps?: {\n    itemList?: DSComboboxT.OptionTypes[];\n  };\n  index: number;\n}\n\nconst StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nconst StyledMultiMenuItem = styled(MultiMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nexport const ItemRenderer = ({ index, extraItemProps }: ItemRendererT): JSX.Element => {\n  const {\n    props,\n    props: { onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions, readOnly },\n    setMenuState,\n    inputValue,\n    focusOptionIdx,\n    setInputValue,\n    optionsPerSection,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps } = useOwnerProps(props);\n  const getOwnerPropsArguments = useCallback(\n    () => ({\n      index,\n    }),\n    [index],\n  );\n\n  const option = extraItemProps?.itemList?.[index];\n\n  const multiple = Array.isArray(selectedValues);\n  const CBItem = multiple ? StyledMultiMenuItem : StyledSingleMenuItem;\n\n  const handleOnCreateClick = useCallback(() => {\n    if (inputValue && onCreate) {\n      onCreate(inputValue);\n      setInputValue('');\n      if (onFilter) onFilter(allOptions, inputValue);\n    }\n  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n\n  const handleClick = useCallback(\n    (currentOption: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n      if (readOnly) return;\n      if (currentOption.type === MENU_OPTION_TYPES.OPTION) {\n        if (!currentOption.disabled) {\n          if (onFilter) onFilter(allOptions, inputValue);\n          setInputValue('');\n          if (!multiple) {\n            setMenuState(false, 'selectOption', e);\n          }\n          onChange(getSuggestedValueOnChange(currentOption, selectedValues, isNonClearable), currentOption, e);\n        }\n      }\n      // prevent for loosing focus on input control\n      e.stopPropagation();\n      e.preventDefault();\n    },\n    [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n  );\n\n  // prevent blur from controls input\n  const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n    e.preventDefault();\n  }, []);\n\n  // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n  return useMemo(() => {\n    if (option) {\n      const { dsId, type, disabled, applyAriaDisabled, readOnly: itemReadOnly, ...rest } = option;\n      const generalProps = {\n        // 'aria-setsize': `${allOptions.length}`,\n        // 'aria-posinset': `${vItem.index + 1}`,\n        key: `${dsId}`,\n        dsId: dsId.toString(),\n        ...rest,\n      };\n      if (type === MENU_OPTION_TYPES.SECTION) {\n        return (\n          <Section\n            label={option.label}\n            {...generalProps}\n            // @ts-expect-error - this needs to be rewritten, broken typescript typings?\n            options={option.options}\n            handleClick={handleClick}\n            focusOptionIdx={focusOptionIdx}\n            handleOnMouseDown={handleOnMouseDown}\n            selectedValues={selectedValues}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === MENU_OPTION_TYPES.SEPARATOR) {\n        return <Separator {...generalProps} render={undefined} />;\n      }\n      if (option.type === MENU_OPTION_TYPES.OPTION) {\n        return (\n          // @ts-expect-error - this needs to be rewritten, this should not be a custom hook returning JSX, this should be a component.\n          <CBItem\n            {...generalProps}\n            value={option.value}\n            label={option.label}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || itemReadOnly}\n            onClick={(e: React.MouseEvent) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={isSelected(selectedValues, option)}\n            tabIndex={-1}\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n          />\n        );\n      }\n      if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n        return (\n          <StyledSingleMenuItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            dataTestid={ComboboxDataTestid.OPTION}\n            isActive={dsId === focusOptionIdx}\n            {...generalProps}\n            render={({ label: labelCreatable }: { label?: string }) => (\n              <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n                <StyledCreatableLabel>Add:</StyledCreatableLabel>\n                <StyledCreatableValue>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n              </Grid>\n            )}\n            label={option.label}\n            onClick={handleOnCreateClick}\n          />\n        );\n      }\n      return null;\n    }\n    return null;\n  }, [optionsPerSection, focusOptionIdx, selectedValues, allOptions, onCreate, inputValue, readOnly]);\n};\n"],
+  "mappings": "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",
   "names": []
 }