@elliemae/ds-form-combobox 3.70.0-next.63 → 3.70.0-next.69
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSComboboxMultiT.js +1 -1
- package/dist/cjs/DSComboboxMultiT.js.map +1 -1
- package/dist/cjs/DSComboboxSingleT.js.map +1 -1
- package/dist/cjs/DSCommonComboboxPropsT.js.map +1 -1
- package/dist/cjs/parts/controls-input/ControlsInput.js +2 -1
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/cjs/parts/controls-input/useKeyboardNavigation.js +3 -1
- package/dist/cjs/parts/controls-input/useKeyboardNavigation.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/utils/listHelper.js +1 -0
- package/dist/cjs/utils/listHelper.js.map +2 -2
- package/dist/cjs/utils/typeGuards.js +36 -0
- package/dist/cjs/utils/typeGuards.js.map +7 -0
- package/dist/esm/DSComboboxMultiT.js +1 -1
- package/dist/esm/DSComboboxMultiT.js.map +1 -1
- package/dist/esm/DSComboboxSingleT.js.map +1 -1
- package/dist/esm/DSCommonComboboxPropsT.js.map +1 -1
- package/dist/esm/parts/controls-input/ControlsInput.js +2 -1
- package/dist/esm/parts/controls-input/ControlsInput.js.map +2 -2
- package/dist/esm/parts/controls-input/useKeyboardNavigation.js +3 -1
- package/dist/esm/parts/controls-input/useKeyboardNavigation.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/utils/listHelper.js +1 -0
- package/dist/esm/utils/listHelper.js.map +2 -2
- package/dist/esm/utils/typeGuards.js +6 -0
- package/dist/esm/utils/typeGuards.js.map +7 -0
- package/dist/types/DSComboboxMultiT.d.ts +2 -2
- package/dist/types/DSComboboxSingleT.d.ts +2 -2
- package/dist/types/DSCommonComboboxPropsT.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +1 -1
- package/dist/types/utils/listHelper.d.ts +2 -2
- package/dist/types/utils/typeGuards.d.ts +2 -0
- package/package.json +15 -15
|
@@ -44,7 +44,7 @@ const multiComboboxPropTypes = {
|
|
|
44
44
|
onChange: import_ds_props_helpers.PropTypes.func.isRequired.description(
|
|
45
45
|
"Multi-select change callback. Receives the full next selection array; use an empty array when no option remains selected."
|
|
46
46
|
).signature(
|
|
47
|
-
"(suggestedValue:
|
|
47
|
+
"(suggestedValue: SelectionableOptions[], selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void"
|
|
48
48
|
),
|
|
49
49
|
selectedValues: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object).isRequired.description(
|
|
50
50
|
"Multi-select values as an array of selectable option objects. Use an empty array for no selection."
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSComboboxMultiT.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n PropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_MULTI_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxMultiT {\n export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n export interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {\n selectedValues: DSCommonComboboxPropsT.
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n PropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_MULTI_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxMultiT {\n export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n export interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {\n selectedValues: DSCommonComboboxPropsT.SelectionableOptions[];\n onChange: (\n suggestedValue: DSCommonComboboxPropsT.SelectionableOptions[],\n selectedOption: DSCommonComboboxPropsT.SelectionableOptions,\n event: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n }\n export interface DefaultProps extends DSCommonComboboxPropsT.DefaultProps {}\n export interface OptionalProps\n extends\n DSCommonComboboxPropsT.OptionalProps,\n TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFormComboboxName, typeof FORM_COMBOBOX_MULTI_SLOTS> {}\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\n/**\n * Multi-select schema variant.\n *\n * - `selectedValues` is always an array of selectable option objects.\n * - empty array indicates no current selection.\n */\nexport const multiComboboxPropTypes: DSPropTypesSchema<DSComboboxMultiT.Props> = {\n ...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_MULTI_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n ...commonComboboxPropTypes,\n onChange: PropTypes.func.isRequired\n .description(\n 'Multi-select change callback. Receives the full next selection array; use an empty array when no option remains selected.',\n )\n .signature(\n '(suggestedValue: SelectionableOptions[], selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n ),\n selectedValues: PropTypes.arrayOf(PropTypes.object).isRequired.description(\n 'Multi-select values as an array of selectable option objects. Use an empty array for no selection.',\n ),\n};\n\nexport const multiComboboxPropTypesSchema = multiComboboxPropTypes as unknown as ValidationMap<DSComboboxMultiT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAGP,oCAAqE;AACrE,uBAA8D;AAuDvD,MAAM,yBAAoE;AAAA,EAC/E,OAAG,kDAAyB,qCAAoB,0CAAyB;AAAA,EACzE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,WACtB;AAAA,IACC;AAAA,EACF,EACC;AAAA,IACC;AAAA,EACF;AAAA,EACF,gBAAgB,kCAAU,QAAQ,kCAAU,MAAM,EAAE,WAAW;AAAA,IAC7D;AAAA,EACF;AACF;AAEO,MAAM,+BAA+B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSComboboxSingleT.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n PropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SINGLE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxSingleT {\n export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n export interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {\n selectedValue: DSCommonComboboxPropsT.
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n PropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SINGLE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxSingleT {\n export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n export interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {\n selectedValue: DSCommonComboboxPropsT.SelectionableOptions | null;\n onChange: (\n suggestedValue: DSCommonComboboxPropsT.SelectionableOptions | null,\n selectedOption: DSCommonComboboxPropsT.SelectionableOptions,\n event: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n }\n export interface DefaultProps extends DSCommonComboboxPropsT.DefaultProps {}\n export interface OptionalProps\n extends\n DSCommonComboboxPropsT.OptionalProps,\n TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFormComboboxName, typeof FORM_COMBOBOX_SINGLE_SLOTS> {}\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\ntype SingleComboboxWithSelectedValues = Omit<DSComboboxSingleT.Props, 'selectedValue'> & {\n selectedValues: DSComboboxSingleT.RequiredProps['selectedValue'];\n};\n\n/**\n * Single-select schema variant.\n *\n * - `selectedValues` is a single selectable option object.\n * - `null` indicates no current selection.\n */\nexport const singleComboboxPropTypes: DSPropTypesSchema<SingleComboboxWithSelectedValues> = {\n ...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_SINGLE_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n ...commonComboboxPropTypes,\n onChange: PropTypes.func.isRequired\n .description(\n 'Single-select change callback. Receives the next single selected option or null when selection is cleared.',\n )\n .signature(\n '(suggestedValue: ItemOption | null, selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n ),\n selectedValues: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])]).isRequired.description(\n 'Single-select value. Use a selectable option object for a selected state, or null for no selection.',\n ),\n};\n\nexport const singleComboboxPropTypesSchema =\n singleComboboxPropTypes as unknown as ValidationMap<SingleComboboxWithSelectedValues>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAGP,oCAAqE;AACrE,uBAA+D;AA2DxD,MAAM,0BAA+E;AAAA,EAC1F,OAAG,kDAAyB,qCAAoB,2CAA0B;AAAA,EAC1E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,WACtB;AAAA,IACC;AAAA,EACF,EACC;AAAA,IACC;AAAA,EACF;AAAA,EACF,gBAAgB,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,WAAW;AAAA,IAC1F;AAAA,EACF;AACF;AAEO,MAAM,gCACX;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSCommonComboboxPropsT.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSFloatingWrapperT, DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { DSPropTypesSchema, GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type React from 'react';\n\nexport declare function noop<T extends unknown[]>(..._args: T): void;\n\nexport declare namespace DSCommonComboboxPropsT {\n export interface CommonItemOptions extends GlobalAttributesT {\n dsId: string;\n disabled?: boolean;\n applyAriaDisabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n options: OptionTypes[];\n }\n export interface ItemOption extends CommonItemOptions {\n value: string;\n label: string;\n type: 'option';\n }\n export interface ItemCreatableOption extends CommonItemOptions {\n label: string;\n type: 'creatable';\n }\n export type SelectionableOptions = ItemOption | ItemCreatableOption;\n export type LayoutOptions = ItemSeparatorOptions | ItemSectionOptions;\n export type OptionTypes = SelectionableOptions | LayoutOptions;\n\n export interface RequiredProps {\n allOptions: OptionTypes[];\n }\n export interface DefaultProps {\n startPlacementPreference: DSHookFloatingContextT.PopperPlacementsT;\n placementOrderPreference: DSHookFloatingContextT.PopperPlacementsT[];\n hasError: boolean;\n inline: boolean;\n withoutPortal: boolean;\n isNonClearable: boolean;\n disabled: boolean;\n noOptionsMessage: string;\n innerRef: React.MutableRefObject<HTMLInputElement | null> | ((ref: HTMLInputElement | null) => void);\n useMask: DSMaskT.Hook | typeof noop;\n onlySelectable: boolean;\n isSkeleton: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n isMenuOpenableWithReadOnly: boolean;\n forceFocusFirstOptionOnType: boolean;\n menuMaxHeight: SizingProps['maxHeight'];\n }\n export interface OptionalProps {\n menuMinWidth?: SizingProps['minWidth'];\n placeholder?: string;\n autoFocus?: boolean;\n filteredOptions?: OptionTypes[];\n isMenuOpen?: boolean;\n onMenuChange?: (\n state: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n onCreate?: (label: string) => void;\n onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n onCancel?: () => void;\n onSelectAll?: (suggestedValue:
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { DSFloatingWrapperT, DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { DSPropTypesSchema, GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type React from 'react';\n\nexport declare function noop<T extends unknown[]>(..._args: T): void;\n\nexport declare namespace DSCommonComboboxPropsT {\n export interface CommonItemOptions extends GlobalAttributesT {\n dsId: string;\n disabled?: boolean;\n applyAriaDisabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n options: OptionTypes[];\n }\n export interface ItemOption extends CommonItemOptions {\n value: string;\n label: string;\n type: 'option';\n }\n export interface ItemCreatableOption extends CommonItemOptions {\n label: string;\n type: 'creatable';\n }\n export type SelectionableOptions = ItemOption | ItemCreatableOption;\n export type LayoutOptions = ItemSeparatorOptions | ItemSectionOptions;\n export type OptionTypes = SelectionableOptions | LayoutOptions;\n\n export interface RequiredProps {\n allOptions: OptionTypes[];\n }\n export interface DefaultProps {\n startPlacementPreference: DSHookFloatingContextT.PopperPlacementsT;\n placementOrderPreference: DSHookFloatingContextT.PopperPlacementsT[];\n hasError: boolean;\n inline: boolean;\n withoutPortal: boolean;\n isNonClearable: boolean;\n disabled: boolean;\n noOptionsMessage: string;\n innerRef: React.MutableRefObject<HTMLInputElement | null> | ((ref: HTMLInputElement | null) => void);\n useMask: DSMaskT.Hook | typeof noop;\n onlySelectable: boolean;\n isSkeleton: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n isMenuOpenableWithReadOnly: boolean;\n forceFocusFirstOptionOnType: boolean;\n menuMaxHeight: SizingProps['maxHeight'];\n }\n export interface OptionalProps {\n menuMinWidth?: SizingProps['minWidth'];\n placeholder?: string;\n autoFocus?: boolean;\n filteredOptions?: OptionTypes[];\n isMenuOpen?: boolean;\n onMenuChange?: (\n state: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n onCreate?: (label: string) => void;\n onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n onCancel?: () => void;\n onSelectAll?: (suggestedValue: SelectionableOptions[] | [], event: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n isLoading?: boolean;\n popperProps?: DSFloatingWrapperT.Props;\n }\n}\n\ntype CommonComboboxProps = DSCommonComboboxPropsT.RequiredProps &\n DSCommonComboboxPropsT.DefaultProps &\n DSCommonComboboxPropsT.OptionalProps;\n\nexport const commonComboboxPropTypes: DSPropTypesSchema<CommonComboboxProps> = {\n placeholder: PropTypes.string.description(\n 'Input placeholder text. Note: announcement behavior may be handled by component logic for accessibility, while visible placeholder text remains as provided.',\n ),\n allOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object, PropTypes.string])).isRequired.description(\n 'Full list of options and layout rows used by the combobox before filtering.',\n ),\n filteredOptions: PropTypes.arrayOf(PropTypes.object).description(\n 'Filtered list rendered in the menu for the current input value. THIS DOES NOT SUPPORT STRING OPTIONS, ALL OPTIONS MUST BE OBJECTS.',\n ),\n disabled: PropTypes.bool\n .description('Disables user interaction with the combobox input and menu trigger.')\n .defaultValue('false'),\n autoFocus: PropTypes.bool.description('Automatically focuses the input on mount when true.'),\n hasError: PropTypes.bool.description('Applies error styling/state to the combobox.').defaultValue('false'),\n noOptionsMessage: PropTypes.string\n .description('Message displayed when no options match the current filter.')\n .defaultValue('No Matches Found'),\n onFilter: PropTypes.func\n .description('Called when input text changes and options are filtered.')\n .signature('(newOptions: OptionTypes[], inputValue?: string) => void'),\n onCreate: PropTypes.func\n .description('Called when the user creates a new option from free-text input.')\n .signature('(label: string) => void'),\n onCancel: PropTypes.func\n .description('Called when Escape dismisses/closes the menu (effectively menu dismiss semantics).')\n .signature('() => void'),\n onMenuChange: PropTypes.func\n .description('Called when the menu open state changes.')\n .signature(\n '(state: boolean, reason: string, e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>) => void',\n ),\n menuMinWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description(\n 'Minimum menu width. Numeric values are interpreted as px.',\n ),\n menuMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .description('Maximum menu height. Will always append \"px\" to the provided values.')\n .defaultValue('300'),\n withoutPortal: PropTypes.bool\n .description(\n 'When true the contextual menu DOM will render as part of the same parent element of the input instead of the body tag.',\n )\n .defaultValue('false'),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.object })])\n .description('Mutable ref object or callback ref assigned to the underlying input.')\n .defaultValue('createRef()'),\n onlySelectable: PropTypes.bool\n .description('Disables free-text filtering and allows only selectable option values.')\n .defaultValue('false'),\n isSkeleton: PropTypes.bool.description('Displays the component in skeleton loading mode.').defaultValue('false'),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Applies disabled semantics for accessibility while preserving focusability. Primary action remains blocked.',\n )\n .defaultValue('false'),\n readOnly: PropTypes.bool\n .description('Makes input content non-editable while keeping the field accessible.')\n .defaultValue('false'),\n isMenuOpenableWithReadOnly: PropTypes.bool\n .description('Controls whether the menu may still open while `readOnly` is true.')\n .defaultValue('false'),\n onSelectAll: PropTypes.func\n .description('Deprecated callback fired when selecting all options.')\n .signature('(suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => void')\n .deprecated({ version: '25.2' }),\n popperProps: PropTypes.object.description(\n 'Pass-through props forwarded to the floating wrapper implementation. Behavior is primarily defined by the floating wrapper contract.',\n ),\n forceFocusFirstOptionOnType: PropTypes.bool\n .description('When typing, moves pseudo focus to the first available option.')\n .defaultValue('false'),\n placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n .description(\n 'When the floating menu cannot be placed in the preferred start placement, it will attempt placements in the order defined by this array.',\n )\n .defaultValue('[\"bottom-start\", \"top-start\"]'),\n startPlacementPreference: PropTypes.string\n .description('If possible, the contextual menu will position first and foremost according to this placement.')\n .defaultValue('bottom-start'),\n inline: PropTypes.bool.description('Renders menu using inline positioning strategy when true.').defaultValue('false'),\n isNonClearable: PropTypes.bool\n .description('Prevents clearing the current selection when true, in a select-like fashion.')\n .defaultValue('false'),\n useMask: PropTypes.func\n .description(\n 'Mask hook/function returning input mask handlers. Designed for the design system masks (e.g. usePhoneMask) but accepts any compatible implementation.',\n )\n .defaultValue('() => {}'),\n isMenuOpen: PropTypes.bool.description('Controlled open state for the menu.'),\n isLoading: PropTypes.bool.description('Shows loading state while options are being fetched.'),\n onKeyDown: PropTypes.func\n .description(\n 'Callback for key down events on the input text element only (not a root-level/global keyboard handler). This is intentionally narrower than generic global onKeyDown behavior.',\n )\n .signature('(e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -43,6 +43,7 @@ var import_listHelper = require("../../utils/listHelper.js");
|
|
|
43
43
|
var import_styled = require("./styled.js");
|
|
44
44
|
var import_useControlsInput = require("./useControlsInput.js");
|
|
45
45
|
var import_useKeyboardNavigation = require("./useKeyboardNavigation.js");
|
|
46
|
+
var import_typeGuards = require("../../utils/typeGuards.js");
|
|
46
47
|
const ControlsInput = () => {
|
|
47
48
|
const {
|
|
48
49
|
props,
|
|
@@ -90,7 +91,7 @@ const ControlsInput = () => {
|
|
|
90
91
|
if ((0, import_listHelper.isArrayOfItems)(selectedValues)) {
|
|
91
92
|
return `options ${selectedValues.map((item) => item.label).join(", ")} selected. ${readOnly ? "Read only" : ""}`;
|
|
92
93
|
}
|
|
93
|
-
if (
|
|
94
|
+
if ((0, import_typeGuards.isItemContainingALabel)(selectedValues)) {
|
|
94
95
|
return `option ${selectedValues.label} selected. ${readOnly ? "Read only" : ""}`;
|
|
95
96
|
}
|
|
96
97
|
if (readOnly) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/ControlsInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { TruncatedText } from '../../TruncatedText.js';\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 const internalIds = `${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n return ariaDescribedBy ? `${ariaDescribedBy} ${internalIds}` : internalIds;\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 (
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { TruncatedText } from '../../TruncatedText.js';\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';\nimport { isItemContainingALabel } from '../../utils/typeGuards.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 const internalIds = `${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n return ariaDescribedBy ? `${ariaDescribedBy} ${internalIds}` : internalIds;\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 (isItemContainingALabel(selectedValues)) {\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 // `.some(Boolean)` over `||` keeps this component within its cyclomatic-complexity limit.\n const isNonInteractive = [disabled, applyAriaDisabled, readOnly].some(Boolean);\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 getOwnerProps={getOwnerProps}>\n <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder\n variant=\"b2\"\n component=\"span\"\n getOwnerProps={getOwnerProps}\n aria-hidden=\"true\"\n $nonInteractive={isNonInteractive}\n >\n <TruncatedText value={showPlaceholder} />\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 ?? false}\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 ?? false}\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -123,7 +123,9 @@ const useKeyboardNavigation = () => {
|
|
|
123
123
|
}
|
|
124
124
|
if (e.key === "a" && e.ctrlKey && multiple && onSelectAll) {
|
|
125
125
|
onSelectAll(
|
|
126
|
-
filteredOptions.filter(
|
|
126
|
+
filteredOptions.filter(
|
|
127
|
+
(option) => option.type === "option" && !option.disabled
|
|
128
|
+
),
|
|
127
129
|
e
|
|
128
130
|
);
|
|
129
131
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/useKeyboardNavigation.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* 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());\n\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 e.preventDefault();\n e.stopPropagation();\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 // the following code is wrong but kept for backward compatibility to avoid breaking changes\n // when readonly the idea is not to open the menu when typing but currently it opens the menu\n // =============================================================================\n // OPEN MENU ON TYPE WHEN READONLY AND ISMENUOPENABLEWITHREADONLY IS TRUE\n // =============================================================================\n if (isMenuOpenableWithReadOnly && e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {\n if (!menuState) {\n setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n }\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 // DSComboboxT.InternalProps is a conditional type that can't be resolved without an explicit type\n // parameter, so TypeScript treats onChange as a union of functions and requires intersection params.\n // The cast to SelectedOptionsT is safe \u2014 getSuggestedValueOnChange handles both multi/single at runtime.\n (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n getSuggestedValueOnChange(currentItem, selectedValues, isNonClearable),\n currentItem,\n e,\n );\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 as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n getSuggestedValueOnChange(lastValue, selectedValues),\n lastValue,\n e,\n );\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAwC;AAExC,yBAAgC;AAChC,wBAKO;
|
|
4
|
+
"sourcesContent": ["/* 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 type { DSCommonComboboxPropsT } from '../../DSCommonComboboxPropsT.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());\n\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 e.preventDefault();\n e.stopPropagation();\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 // the following code is wrong but kept for backward compatibility to avoid breaking changes\n // when readonly the idea is not to open the menu when typing but currently it opens the menu\n // =============================================================================\n // OPEN MENU ON TYPE WHEN READONLY AND ISMENUOPENABLEWITHREADONLY IS TRUE\n // =============================================================================\n if (isMenuOpenableWithReadOnly && e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {\n if (!menuState) {\n setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n }\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 // DSComboboxT.InternalProps is a conditional type that can't be resolved without an explicit type\n // parameter, so TypeScript treats onChange as a union of functions and requires intersection params.\n // The cast to SelectedOptionsT is safe \u2014 getSuggestedValueOnChange handles both multi/single at runtime.\n (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n getSuggestedValueOnChange(currentItem, selectedValues, isNonClearable),\n currentItem,\n e,\n );\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(\n (option) => option.type === 'option' && !option.disabled,\n ) as DSCommonComboboxPropsT.SelectionableOptions[],\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 as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n getSuggestedValueOnChange(lastValue, selectedValues),\n lastValue,\n e,\n );\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { createRef } from 'react';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n PropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSComboboxMultiT } from './DSComboboxMultiT.js';\nimport type { DSComboboxSingleT } from './DSComboboxSingleT.js';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxT {\n export type SlotFunctionArguments = {\n dsComboboxRoot: () => object;\n dsComboboxInputWrapper: () => object;\n dsComboboxInput: () => object;\n dsComboboxDropdownButton: () => object;\n dsComboboxFastList: () => object;\n dsComboboxSectionWrapper: () => object;\n dsComboboxSectionLabel: () => object;\n dsComboboxSingleMenuItem: () => object;\n dsComboboxMultiMenuItem: () => object;\n dsComboboxLoadingIndicator: () => object;\n dsComboboxSkeletonMenuItem: () => object;\n dsComboboxPill: () => object;\n dsComboboxPillGroup: () => object;\n dsComboboxPopperWrapper: () => object;\n dsComboboxSelection: () => object;\n dsComboboxSingleValueWrapper: () => object;\n dsComboboxHeaderActions: () => object;\n dsComboboxHeaderActionsSeparator: () => object;\n dsComboboxInputPlaceholder: () => object;\n dsComboboxInputFieldWrapper: () => object;\n dsComboboxListWrapper: () => object;\n dsComboboxNoResults: () => object;\n dsComboboxCreatableLabel: () => object;\n dsComboboxCreatableValue: () => object;\n dsComboboxMenuItemsWrapper: () => object;\n dsComboboxLoadingWrapper: () => object;\n };\n\n export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n export type SelectedOptionsT =
|
|
4
|
+
"sourcesContent": ["import { createRef } from 'react';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n PropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSComboboxMultiT } from './DSComboboxMultiT.js';\nimport type { DSComboboxSingleT } from './DSComboboxSingleT.js';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxT {\n export type SlotFunctionArguments = {\n dsComboboxRoot: () => object;\n dsComboboxInputWrapper: () => object;\n dsComboboxInput: () => object;\n dsComboboxDropdownButton: () => object;\n dsComboboxFastList: () => object;\n dsComboboxSectionWrapper: () => object;\n dsComboboxSectionLabel: () => object;\n dsComboboxSingleMenuItem: () => object;\n dsComboboxMultiMenuItem: () => object;\n dsComboboxLoadingIndicator: () => object;\n dsComboboxSkeletonMenuItem: () => object;\n dsComboboxPill: () => object;\n dsComboboxPillGroup: () => object;\n dsComboboxPopperWrapper: () => object;\n dsComboboxSelection: () => object;\n dsComboboxSingleValueWrapper: () => object;\n dsComboboxHeaderActions: () => object;\n dsComboboxHeaderActionsSeparator: () => object;\n dsComboboxInputPlaceholder: () => object;\n dsComboboxInputFieldWrapper: () => object;\n dsComboboxListWrapper: () => object;\n dsComboboxNoResults: () => object;\n dsComboboxCreatableLabel: () => object;\n dsComboboxCreatableValue: () => object;\n dsComboboxMenuItemsWrapper: () => object;\n dsComboboxLoadingWrapper: () => object;\n };\n\n export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n export type SelectedOptionsT = SelectionableOptions[] | SelectionableOptions | null;\n\n type SingleComboboxRequirePropsRenameInterface = Omit<DSComboboxSingleT.RequiredProps, 'selectedValue'> & {\n selectedValues: DSComboboxSingleT.RequiredProps['selectedValue'];\n };\n\n export type RequiredProps<\n T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[],\n > = T extends DSCommonComboboxPropsT.ItemOption[]\n ? DSComboboxMultiT.RequiredProps\n : SingleComboboxRequirePropsRenameInterface;\n\n export type DefaultProps<\n T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[],\n > = T extends DSCommonComboboxPropsT.ItemOption[] ? DSComboboxMultiT.DefaultProps : DSComboboxSingleT.DefaultProps;\n export type OptionalProps<\n T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[],\n > = T extends DSCommonComboboxPropsT.ItemOption[] ? DSComboboxMultiT.OptionalProps : DSComboboxSingleT.OptionalProps;\n export type PropsOptional = OptionalProps; // alias for backwards compatibility\n\n export type Props<\n T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[],\n > = T extends DSCommonComboboxPropsT.ItemOption[]\n ? DSComboboxMultiT.Props\n : Omit<DSComboboxSingleT.Props, 'selectedValue'> & { selectedValues: DSComboboxSingleT.Props['selectedValue'] };\n export type InternalProps<\n T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[],\n > = T extends DSCommonComboboxPropsT.ItemOption[]\n ? DSComboboxMultiT.InternalProps\n : Omit<DSComboboxSingleT.InternalProps, 'selectedValue'> & {\n selectedValues: DSComboboxSingleT.InternalProps['selectedValue'];\n };\n}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n hasError: false,\n inline: false,\n withoutPortal: false,\n disabled: false,\n useMask: () => {},\n innerRef: createRef(),\n startPlacementPreference: 'bottom-start',\n placementOrderPreference: ['bottom-start', 'top-start'],\n noOptionsMessage: 'No Matches Found',\n isNonClearable: false,\n onlySelectable: false,\n isSkeleton: false,\n // override in useCombobox to avoid ref duplications when more than one cb is used\n applyAriaDisabled: false,\n readOnly: false,\n isMenuOpenableWithReadOnly: false,\n forceFocusFirstOptionOnType: false,\n menuMaxHeight: 300,\n};\n\n/**\n * Unified public schema used by polymorphic combobox consumption.\n *\n * `selectedValues` shape determines effective usage mode:\n * - object or null => single-select contract\n * - array => multi-select contract\n */\nexport const ComboboxPropTypes: DSPropTypesSchema<DSComboboxT.Props> = {\n ...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n ...commonComboboxPropTypes,\n onChange: PropTypes.func.isRequired\n .description(\n 'Polymorphic change callback. For single-select, suggestedValue is ItemOption | null; for multi-select, suggestedValue is ItemOption[].',\n )\n .signature(\n '(suggestedValue: ItemOption | ItemOption[] | null, selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n ),\n selectedValues: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])),\n PropTypes.object,\n PropTypes.oneOf([null]),\n ]).isRequired.description(\n 'Either a single selectable option or an array of selectable options. This shape determines single vs multi selection behavior. Null is valid only for single-select with no selection; an empty array is valid only for multi-select with no selection.',\n ),\n};\n\nexport const ComboboxPropTypesSchema = ComboboxPropTypes as unknown as ValidationMap<DSComboboxT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0B;AAE1B,8BAKO;AAGP,oCAAqE;AACrE,uBAAwD;AAiFjD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,cAAU,wBAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,eAAe;AACjB;AASO,MAAM,oBAA0D;AAAA,EACrE,OAAG,kDAAyB,qCAAoB,oCAAmB;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,WACtB;AAAA,IACC;AAAA,EACF,EACC;AAAA,IACC;AAAA,EACF;AAAA,EACF,gBAAgB,kCAAU,UAAU;AAAA,IAClC,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,MAAM,CAAC,CAAC;AAAA,IACzD,kCAAU;AAAA,IACV,kCAAU,MAAM,CAAC,IAAI,CAAC;AAAA,EACxB,CAAC,EAAE,WAAW;AAAA,IACZ;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -92,6 +92,7 @@ const getFirstOption = (options, selectedValues) => {
|
|
|
92
92
|
};
|
|
93
93
|
const getSuggestedValueOnChange = (selectedOption, selectedValues, isNonClearable) => {
|
|
94
94
|
if (Array.isArray(selectedValues)) {
|
|
95
|
+
if (selectedOption === null) return selectedValues;
|
|
95
96
|
const isFound = selectedValues.find((item) => item.type === "option" && item.value === selectedOption.value);
|
|
96
97
|
if (isFound) {
|
|
97
98
|
if (isNonClearable) return selectedValues;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/listHelper.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-params */\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from '../constants.js';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n if (isSelectedValueMultiple(value)) {\n const multiValue = value as DSComboboxT.ItemOption[];\n return multiValue.some((item) => item?.value === activeOption?.value);\n }\n const singleValue = value as DSComboboxT.ItemOption;\n return singleValue?.value === activeOption.value;\n};\n\nexport function isArrayOfItems(value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption[] {\n return Array.isArray(value) && value.length > 0;\n}\n\nexport const isItem = (value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption =>\n !Array.isArray(value) && value !== null && typeof value === 'object';\n\nexport const findInCircularList = (\n list: DSComboboxT.OptionTypes[],\n from: number,\n criteria: (item: DSComboboxT.OptionTypes) => boolean,\n step = 1,\n): number => {\n if (list.length === 0) return from;\n\n let i = (from + step + list.length) % list.length;\n let iterations = 0;\n\n while (iterations < list.length) {\n if (criteria(list[i])) return i;\n\n i = (i + step + list.length) % list.length;\n iterations += 1;\n }\n\n return from; // Return the original index if no match is found\n};\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n if (Array.isArray(selectedValues)) {\n return selectedValues[selectedValues.length - 1];\n }\n return selectedValues;\n};\n\nexport const getFirstOption = (\n options: DSComboboxT.OptionTypes[],\n selectedValues?: DSComboboxT.SelectedOptionsT,\n): string => {\n if (selectedValues) {\n const lastValue = getLastValueSelected(selectedValues);\n /**\n * A selected value can be created dynamically (e.g. a creatable filter) and later filtered\n * out of the rendered options, so its id must still exist in `options` before we focus it \u2014\n * otherwise aria-activedescendant would point at a non-existent id.\n */\n if (lastValue && options.some((option) => option.dsId === lastValue.dsId)) return lastValue.dsId;\n }\n for (let i = 0; i < options.length; i += 1)\n if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n return options[i].dsId;\n }\n // list of disabled item results return ''\n return '';\n};\n\nexport const getSuggestedValueOnChange = (\n selectedOption: DSComboboxT.
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-params */\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from '../constants.js';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n if (isSelectedValueMultiple(value)) {\n const multiValue = value as DSComboboxT.ItemOption[];\n return multiValue.some((item) => item?.value === activeOption?.value);\n }\n const singleValue = value as DSComboboxT.ItemOption;\n return singleValue?.value === activeOption.value;\n};\n\nexport function isArrayOfItems(value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption[] {\n return Array.isArray(value) && value.length > 0;\n}\n\nexport const isItem = (value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption =>\n !Array.isArray(value) && value !== null && typeof value === 'object';\n\nexport const findInCircularList = (\n list: DSComboboxT.OptionTypes[],\n from: number,\n criteria: (item: DSComboboxT.OptionTypes) => boolean,\n step = 1,\n): number => {\n if (list.length === 0) return from;\n\n let i = (from + step + list.length) % list.length;\n let iterations = 0;\n\n while (iterations < list.length) {\n if (criteria(list[i])) return i;\n\n i = (i + step + list.length) % list.length;\n iterations += 1;\n }\n\n return from; // Return the original index if no match is found\n};\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n if (Array.isArray(selectedValues)) {\n return selectedValues[selectedValues.length - 1];\n }\n return selectedValues;\n};\n\nexport const getFirstOption = (\n options: DSComboboxT.OptionTypes[],\n selectedValues?: DSComboboxT.SelectedOptionsT,\n): string => {\n if (selectedValues) {\n const lastValue = getLastValueSelected(selectedValues);\n /**\n * A selected value can be created dynamically (e.g. a creatable filter) and later filtered\n * out of the rendered options, so its id must still exist in `options` before we focus it \u2014\n * otherwise aria-activedescendant would point at a non-existent id.\n */\n if (lastValue && options.some((option) => option.dsId === lastValue.dsId)) return lastValue.dsId;\n }\n for (let i = 0; i < options.length; i += 1)\n if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n return options[i].dsId;\n }\n // list of disabled item results return ''\n return '';\n};\n\nexport const getSuggestedValueOnChange = (\n selectedOption: DSComboboxT.SelectionableOptions,\n selectedValues: DSComboboxT.SelectedOptionsT,\n isNonClearable?: boolean,\n): DSComboboxT.SelectedOptionsT => {\n if (Array.isArray(selectedValues)) {\n if (selectedOption === null) return selectedValues;\n const isFound = selectedValues.find((item) => item.type === 'option' && item.value === selectedOption.value);\n if (isFound) {\n if (isNonClearable) return selectedValues;\n return selectedValues.filter((item) => item.type === 'option' && item.value !== selectedOption.value);\n }\n return [...selectedValues, selectedOption];\n }\n if (selectedValues && selectedValues.dsId === selectedOption.dsId) {\n if (isNonClearable) return selectedOption;\n return null;\n }\n return selectedOption;\n};\n\nexport const filterOptions = (inputValue: string, options: DSComboboxT.OptionTypes[]) => {\n if (!inputValue) return options;\n return options.filter(\n (option) =>\n option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()),\n );\n};\n\nexport const getFilteredOptionsSelected = (\n filteredOption: DSComboboxT.OptionTypes[],\n selectedValues: DSComboboxT.ItemOption[],\n) => filteredOption.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));\n\nexport const scrollIfNeeded = (\n elem: HTMLElement,\n options = { behavior: 'smooth', block: 'end', inline: 'nearest' } as ScrollIntoViewOptions | undefined,\n) => {\n const bounding = elem.getBoundingClientRect();\n if (!(\n bounding.top >= 0 &&\n bounding.left >= 0 &&\n bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n bounding.right <= (window.innerWidth || document.documentElement.clientWidth)\n ))\n elem.scrollIntoView(options);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var typeGuards_exports = {};
|
|
30
|
+
__export(typeGuards_exports, {
|
|
31
|
+
isItemContainingALabel: () => isItemContainingALabel
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(typeGuards_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
const isItemContainingALabel = (item) => typeof item === "object" && item !== null && "label" in item && typeof item.label === "string";
|
|
36
|
+
//# sourceMappingURL=typeGuards.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/utils/typeGuards.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import type { DSCommonComboboxPropsT } from '../DSCommonComboboxPropsT.js';\n\nexport const isItemContainingALabel = (\n item: unknown,\n): item is\n | DSCommonComboboxPropsT.ItemSectionOptions\n | DSCommonComboboxPropsT.ItemOption\n | DSCommonComboboxPropsT.ItemCreatableOption =>\n typeof item === 'object' && item !== null && 'label' in item && typeof item.label === 'string';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,yBAAyB,CACpC,SAKA,OAAO,SAAS,YAAY,SAAS,QAAQ,WAAW,QAAQ,OAAO,KAAK,UAAU;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -15,7 +15,7 @@ const multiComboboxPropTypes = {
|
|
|
15
15
|
onChange: PropTypes.func.isRequired.description(
|
|
16
16
|
"Multi-select change callback. Receives the full next selection array; use an empty array when no option remains selected."
|
|
17
17
|
).signature(
|
|
18
|
-
"(suggestedValue:
|
|
18
|
+
"(suggestedValue: SelectionableOptions[], selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void"
|
|
19
19
|
),
|
|
20
20
|
selectedValues: PropTypes.arrayOf(PropTypes.object).isRequired.description(
|
|
21
21
|
"Multi-select values as an array of selectable option objects. Use an empty array for no selection."
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSComboboxMultiT.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n PropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_MULTI_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxMultiT {\n export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n export interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {\n selectedValues: DSCommonComboboxPropsT.
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n PropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_MULTI_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxMultiT {\n export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n export interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {\n selectedValues: DSCommonComboboxPropsT.SelectionableOptions[];\n onChange: (\n suggestedValue: DSCommonComboboxPropsT.SelectionableOptions[],\n selectedOption: DSCommonComboboxPropsT.SelectionableOptions,\n event: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n }\n export interface DefaultProps extends DSCommonComboboxPropsT.DefaultProps {}\n export interface OptionalProps\n extends\n DSCommonComboboxPropsT.OptionalProps,\n TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFormComboboxName, typeof FORM_COMBOBOX_MULTI_SLOTS> {}\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\n/**\n * Multi-select schema variant.\n *\n * - `selectedValues` is always an array of selectable option objects.\n * - empty array indicates no current selection.\n */\nexport const multiComboboxPropTypes: DSPropTypesSchema<DSComboboxMultiT.Props> = {\n ...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_MULTI_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n ...commonComboboxPropTypes,\n onChange: PropTypes.func.isRequired\n .description(\n 'Multi-select change callback. Receives the full next selection array; use an empty array when no option remains selected.',\n )\n .signature(\n '(suggestedValue: SelectionableOptions[], selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n ),\n selectedValues: PropTypes.arrayOf(PropTypes.object).isRequired.description(\n 'Multi-select values as an array of selectable option objects. Use an empty array for no selection.',\n ),\n};\n\nexport const multiComboboxPropTypesSchema = multiComboboxPropTypes as unknown as ValidationMap<DSComboboxMultiT.Props>;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,+BAA4D;AACrE,SAAS,oBAAoB,iCAAiC;AAuDvD,MAAM,yBAAoE;AAAA,EAC/E,GAAG,yBAAyB,oBAAoB,yBAAyB;AAAA,EACzE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,WACtB;AAAA,IACC;AAAA,EACF,EACC;AAAA,IACC;AAAA,EACF;AAAA,EACF,gBAAgB,UAAU,QAAQ,UAAU,MAAM,EAAE,WAAW;AAAA,IAC7D;AAAA,EACF;AACF;AAEO,MAAM,+BAA+B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSComboboxSingleT.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n PropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SINGLE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxSingleT {\n export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n export interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {\n selectedValue: DSCommonComboboxPropsT.
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n PropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SINGLE_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxSingleT {\n export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n export interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {\n selectedValue: DSCommonComboboxPropsT.SelectionableOptions | null;\n onChange: (\n suggestedValue: DSCommonComboboxPropsT.SelectionableOptions | null,\n selectedOption: DSCommonComboboxPropsT.SelectionableOptions,\n event: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n }\n export interface DefaultProps extends DSCommonComboboxPropsT.DefaultProps {}\n export interface OptionalProps\n extends\n DSCommonComboboxPropsT.OptionalProps,\n TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFormComboboxName, typeof FORM_COMBOBOX_SINGLE_SLOTS> {}\n export interface Props\n extends\n Partial<DefaultProps>,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n\n export interface InternalProps\n extends\n DefaultProps,\n OptionalProps,\n Omit<\n GlobalAttributesT<HTMLElement>,\n keyof RequiredProps | keyof DefaultProps | keyof OptionalProps | keyof XstyledProps\n >,\n XstyledProps,\n RequiredProps {}\n}\n\ntype SingleComboboxWithSelectedValues = Omit<DSComboboxSingleT.Props, 'selectedValue'> & {\n selectedValues: DSComboboxSingleT.RequiredProps['selectedValue'];\n};\n\n/**\n * Single-select schema variant.\n *\n * - `selectedValues` is a single selectable option object.\n * - `null` indicates no current selection.\n */\nexport const singleComboboxPropTypes: DSPropTypesSchema<SingleComboboxWithSelectedValues> = {\n ...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_SINGLE_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n ...commonComboboxPropTypes,\n onChange: PropTypes.func.isRequired\n .description(\n 'Single-select change callback. Receives the next single selected option or null when selection is cleared.',\n )\n .signature(\n '(suggestedValue: ItemOption | null, selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n ),\n selectedValues: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf([null])]).isRequired.description(\n 'Single-select value. Use a selectable option object for a selected state, or null for no selection.',\n ),\n};\n\nexport const singleComboboxPropTypesSchema =\n singleComboboxPropTypes as unknown as ValidationMap<SingleComboboxWithSelectedValues>;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,+BAA4D;AACrE,SAAS,oBAAoB,kCAAkC;AA2DxD,MAAM,0BAA+E;AAAA,EAC1F,GAAG,yBAAyB,oBAAoB,0BAA0B;AAAA,EAC1E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,WACtB;AAAA,IACC;AAAA,EACF,EACC;AAAA,IACC;AAAA,EACF;AAAA,EACF,gBAAgB,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,WAAW;AAAA,IAC1F;AAAA,EACF;AACF;AAEO,MAAM,gCACX;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSCommonComboboxPropsT.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSFloatingWrapperT, DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { DSPropTypesSchema, GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type React from 'react';\n\nexport declare function noop<T extends unknown[]>(..._args: T): void;\n\nexport declare namespace DSCommonComboboxPropsT {\n export interface CommonItemOptions extends GlobalAttributesT {\n dsId: string;\n disabled?: boolean;\n applyAriaDisabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n options: OptionTypes[];\n }\n export interface ItemOption extends CommonItemOptions {\n value: string;\n label: string;\n type: 'option';\n }\n export interface ItemCreatableOption extends CommonItemOptions {\n label: string;\n type: 'creatable';\n }\n export type SelectionableOptions = ItemOption | ItemCreatableOption;\n export type LayoutOptions = ItemSeparatorOptions | ItemSectionOptions;\n export type OptionTypes = SelectionableOptions | LayoutOptions;\n\n export interface RequiredProps {\n allOptions: OptionTypes[];\n }\n export interface DefaultProps {\n startPlacementPreference: DSHookFloatingContextT.PopperPlacementsT;\n placementOrderPreference: DSHookFloatingContextT.PopperPlacementsT[];\n hasError: boolean;\n inline: boolean;\n withoutPortal: boolean;\n isNonClearable: boolean;\n disabled: boolean;\n noOptionsMessage: string;\n innerRef: React.MutableRefObject<HTMLInputElement | null> | ((ref: HTMLInputElement | null) => void);\n useMask: DSMaskT.Hook | typeof noop;\n onlySelectable: boolean;\n isSkeleton: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n isMenuOpenableWithReadOnly: boolean;\n forceFocusFirstOptionOnType: boolean;\n menuMaxHeight: SizingProps['maxHeight'];\n }\n export interface OptionalProps {\n menuMinWidth?: SizingProps['minWidth'];\n placeholder?: string;\n autoFocus?: boolean;\n filteredOptions?: OptionTypes[];\n isMenuOpen?: boolean;\n onMenuChange?: (\n state: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n onCreate?: (label: string) => void;\n onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n onCancel?: () => void;\n onSelectAll?: (suggestedValue:
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSFloatingWrapperT, DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nimport type { DSPropTypesSchema, GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport type React from 'react';\n\nexport declare function noop<T extends unknown[]>(..._args: T): void;\n\nexport declare namespace DSCommonComboboxPropsT {\n export interface CommonItemOptions extends GlobalAttributesT {\n dsId: string;\n disabled?: boolean;\n applyAriaDisabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n options: OptionTypes[];\n }\n export interface ItemOption extends CommonItemOptions {\n value: string;\n label: string;\n type: 'option';\n }\n export interface ItemCreatableOption extends CommonItemOptions {\n label: string;\n type: 'creatable';\n }\n export type SelectionableOptions = ItemOption | ItemCreatableOption;\n export type LayoutOptions = ItemSeparatorOptions | ItemSectionOptions;\n export type OptionTypes = SelectionableOptions | LayoutOptions;\n\n export interface RequiredProps {\n allOptions: OptionTypes[];\n }\n export interface DefaultProps {\n startPlacementPreference: DSHookFloatingContextT.PopperPlacementsT;\n placementOrderPreference: DSHookFloatingContextT.PopperPlacementsT[];\n hasError: boolean;\n inline: boolean;\n withoutPortal: boolean;\n isNonClearable: boolean;\n disabled: boolean;\n noOptionsMessage: string;\n innerRef: React.MutableRefObject<HTMLInputElement | null> | ((ref: HTMLInputElement | null) => void);\n useMask: DSMaskT.Hook | typeof noop;\n onlySelectable: boolean;\n isSkeleton: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n isMenuOpenableWithReadOnly: boolean;\n forceFocusFirstOptionOnType: boolean;\n menuMaxHeight: SizingProps['maxHeight'];\n }\n export interface OptionalProps {\n menuMinWidth?: SizingProps['minWidth'];\n placeholder?: string;\n autoFocus?: boolean;\n filteredOptions?: OptionTypes[];\n isMenuOpen?: boolean;\n onMenuChange?: (\n state: boolean,\n reason: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n onCreate?: (label: string) => void;\n onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;\n onCancel?: () => void;\n onSelectAll?: (suggestedValue: SelectionableOptions[] | [], event: React.MouseEvent | React.KeyboardEvent) => void;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n isLoading?: boolean;\n popperProps?: DSFloatingWrapperT.Props;\n }\n}\n\ntype CommonComboboxProps = DSCommonComboboxPropsT.RequiredProps &\n DSCommonComboboxPropsT.DefaultProps &\n DSCommonComboboxPropsT.OptionalProps;\n\nexport const commonComboboxPropTypes: DSPropTypesSchema<CommonComboboxProps> = {\n placeholder: PropTypes.string.description(\n 'Input placeholder text. Note: announcement behavior may be handled by component logic for accessibility, while visible placeholder text remains as provided.',\n ),\n allOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object, PropTypes.string])).isRequired.description(\n 'Full list of options and layout rows used by the combobox before filtering.',\n ),\n filteredOptions: PropTypes.arrayOf(PropTypes.object).description(\n 'Filtered list rendered in the menu for the current input value. THIS DOES NOT SUPPORT STRING OPTIONS, ALL OPTIONS MUST BE OBJECTS.',\n ),\n disabled: PropTypes.bool\n .description('Disables user interaction with the combobox input and menu trigger.')\n .defaultValue('false'),\n autoFocus: PropTypes.bool.description('Automatically focuses the input on mount when true.'),\n hasError: PropTypes.bool.description('Applies error styling/state to the combobox.').defaultValue('false'),\n noOptionsMessage: PropTypes.string\n .description('Message displayed when no options match the current filter.')\n .defaultValue('No Matches Found'),\n onFilter: PropTypes.func\n .description('Called when input text changes and options are filtered.')\n .signature('(newOptions: OptionTypes[], inputValue?: string) => void'),\n onCreate: PropTypes.func\n .description('Called when the user creates a new option from free-text input.')\n .signature('(label: string) => void'),\n onCancel: PropTypes.func\n .description('Called when Escape dismisses/closes the menu (effectively menu dismiss semantics).')\n .signature('() => void'),\n onMenuChange: PropTypes.func\n .description('Called when the menu open state changes.')\n .signature(\n '(state: boolean, reason: string, e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>) => void',\n ),\n menuMinWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description(\n 'Minimum menu width. Numeric values are interpreted as px.',\n ),\n menuMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n .description('Maximum menu height. Will always append \"px\" to the provided values.')\n .defaultValue('300'),\n withoutPortal: PropTypes.bool\n .description(\n 'When true the contextual menu DOM will render as part of the same parent element of the input instead of the body tag.',\n )\n .defaultValue('false'),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.object })])\n .description('Mutable ref object or callback ref assigned to the underlying input.')\n .defaultValue('createRef()'),\n onlySelectable: PropTypes.bool\n .description('Disables free-text filtering and allows only selectable option values.')\n .defaultValue('false'),\n isSkeleton: PropTypes.bool.description('Displays the component in skeleton loading mode.').defaultValue('false'),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Applies disabled semantics for accessibility while preserving focusability. Primary action remains blocked.',\n )\n .defaultValue('false'),\n readOnly: PropTypes.bool\n .description('Makes input content non-editable while keeping the field accessible.')\n .defaultValue('false'),\n isMenuOpenableWithReadOnly: PropTypes.bool\n .description('Controls whether the menu may still open while `readOnly` is true.')\n .defaultValue('false'),\n onSelectAll: PropTypes.func\n .description('Deprecated callback fired when selecting all options.')\n .signature('(suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => void')\n .deprecated({ version: '25.2' }),\n popperProps: PropTypes.object.description(\n 'Pass-through props forwarded to the floating wrapper implementation. Behavior is primarily defined by the floating wrapper contract.',\n ),\n forceFocusFirstOptionOnType: PropTypes.bool\n .description('When typing, moves pseudo focus to the first available option.')\n .defaultValue('false'),\n placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n .description(\n 'When the floating menu cannot be placed in the preferred start placement, it will attempt placements in the order defined by this array.',\n )\n .defaultValue('[\"bottom-start\", \"top-start\"]'),\n startPlacementPreference: PropTypes.string\n .description('If possible, the contextual menu will position first and foremost according to this placement.')\n .defaultValue('bottom-start'),\n inline: PropTypes.bool.description('Renders menu using inline positioning strategy when true.').defaultValue('false'),\n isNonClearable: PropTypes.bool\n .description('Prevents clearing the current selection when true, in a select-like fashion.')\n .defaultValue('false'),\n useMask: PropTypes.func\n .description(\n 'Mask hook/function returning input mask handlers. Designed for the design system masks (e.g. usePhoneMask) but accepts any compatible implementation.',\n )\n .defaultValue('() => {}'),\n isMenuOpen: PropTypes.bool.description('Controlled open state for the menu.'),\n isLoading: PropTypes.bool.description('Shows loading state while options are being fetched.'),\n onKeyDown: PropTypes.func\n .description(\n 'Callback for key down events on the input text element only (not a root-level/global keyboard handler). This is intentionally narrower than generic global onKeyDown behavior.',\n )\n .signature('(e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void'),\n};\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,iBAAiB;AAiFnB,MAAM,0BAAkE;AAAA,EAC7E,aAAa,UAAU,OAAO;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,YAAY,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EAAE,WAAW;AAAA,IAClG;AAAA,EACF;AAAA,EACA,iBAAiB,UAAU,QAAQ,UAAU,MAAM,EAAE;AAAA,IACnD;AAAA,EACF;AAAA,EACA,UAAU,UAAU,KACjB,YAAY,qEAAqE,EACjF,aAAa,OAAO;AAAA,EACvB,WAAW,UAAU,KAAK,YAAY,qDAAqD;AAAA,EAC3F,UAAU,UAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,OAAO;AAAA,EACzG,kBAAkB,UAAU,OACzB,YAAY,6DAA6D,EACzE,aAAa,kBAAkB;AAAA,EAClC,UAAU,UAAU,KACjB,YAAY,0DAA0D,EACtE,UAAU,0DAA0D;AAAA,EACvE,UAAU,UAAU,KACjB,YAAY,iEAAiE,EAC7E,UAAU,yBAAyB;AAAA,EACtC,UAAU,UAAU,KACjB,YAAY,oFAAoF,EAChG,UAAU,YAAY;AAAA,EACzB,cAAc,UAAU,KACrB,YAAY,0CAA0C,EACtD;AAAA,IACC;AAAA,EACF;AAAA,EACF,cAAc,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE;AAAA,IACtE;AAAA,EACF;AAAA,EACA,eAAe,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EACpE,YAAY,sEAAsE,EAClF,aAAa,KAAK;AAAA,EACrB,eAAe,UAAU,KACtB;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AAAA,EACvB,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC,CAAC,CAAC,EAC3F,YAAY,sEAAsE,EAClF,aAAa,aAAa;AAAA,EAC7B,gBAAgB,UAAU,KACvB,YAAY,wEAAwE,EACpF,aAAa,OAAO;AAAA,EACvB,YAAY,UAAU,KAAK,YAAY,kDAAkD,EAAE,aAAa,OAAO;AAAA,EAC/G,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AAAA,EACvB,UAAU,UAAU,KACjB,YAAY,sEAAsE,EAClF,aAAa,OAAO;AAAA,EACvB,4BAA4B,UAAU,KACnC,YAAY,oEAAoE,EAChF,aAAa,OAAO;AAAA,EACvB,aAAa,UAAU,KACpB,YAAY,uDAAuD,EACnE,UAAU,6FAA6F,EACvG,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACjC,aAAa,UAAU,OAAO;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,6BAA6B,UAAU,KACpC,YAAY,gEAAgE,EAC5E,aAAa,OAAO;AAAA,EACvB,0BAA0B,UAAU,QAAQ,UAAU,MAAM,EACzD;AAAA,IACC;AAAA,EACF,EACC,aAAa,+BAA+B;AAAA,EAC/C,0BAA0B,UAAU,OACjC,YAAY,gGAAgG,EAC5G,aAAa,cAAc;AAAA,EAC9B,QAAQ,UAAU,KAAK,YAAY,2DAA2D,EAAE,aAAa,OAAO;AAAA,EACpH,gBAAgB,UAAU,KACvB,YAAY,8EAA8E,EAC1F,aAAa,OAAO;AAAA,EACvB,SAAS,UAAU,KAChB;AAAA,IACC;AAAA,EACF,EACC,aAAa,UAAU;AAAA,EAC1B,YAAY,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,WAAW,UAAU,KAAK,YAAY,sDAAsD;AAAA,EAC5F,WAAW,UAAU,KAClB;AAAA,IACC;AAAA,EACF,EACC,UAAU,uEAAuE;AACtF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,6 +17,7 @@ import {
|
|
|
17
17
|
} from "./styled.js";
|
|
18
18
|
import { useControlsInput } from "./useControlsInput.js";
|
|
19
19
|
import { useKeyboardNavigation } from "./useKeyboardNavigation.js";
|
|
20
|
+
import { isItemContainingALabel } from "../../utils/typeGuards.js";
|
|
20
21
|
const ControlsInput = () => {
|
|
21
22
|
const {
|
|
22
23
|
props,
|
|
@@ -64,7 +65,7 @@ const ControlsInput = () => {
|
|
|
64
65
|
if (isArrayOfItems(selectedValues)) {
|
|
65
66
|
return `options ${selectedValues.map((item) => item.label).join(", ")} selected. ${readOnly ? "Read only" : ""}`;
|
|
66
67
|
}
|
|
67
|
-
if (
|
|
68
|
+
if (isItemContainingALabel(selectedValues)) {
|
|
68
69
|
return `option ${selectedValues.label} selected. ${readOnly ? "Read only" : ""}`;
|
|
69
70
|
}
|
|
70
71
|
if (readOnly) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/ControlsInput.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { TruncatedText } from '../../TruncatedText.js';\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 const internalIds = `${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n return ariaDescribedBy ? `${ariaDescribedBy} ${internalIds}` : internalIds;\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 (
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { TruncatedText } from '../../TruncatedText.js';\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';\nimport { isItemContainingALabel } from '../../utils/typeGuards.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 const internalIds = `${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n return ariaDescribedBy ? `${ariaDescribedBy} ${internalIds}` : internalIds;\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 (isItemContainingALabel(selectedValues)) {\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 // `.some(Boolean)` over `||` keeps this component within its cyclomatic-complexity limit.\n const isNonInteractive = [disabled, applyAriaDisabled, readOnly].some(Boolean);\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 getOwnerProps={getOwnerProps}>\n <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n {showPlaceholder && (\n <StyledInputPlaceHolder\n variant=\"b2\"\n component=\"span\"\n getOwnerProps={getOwnerProps}\n aria-hidden=\"true\"\n $nonInteractive={isNonInteractive}\n >\n <TruncatedText value={showPlaceholder} />\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 ?? false}\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 ?? false}\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -95,7 +95,9 @@ const useKeyboardNavigation = () => {
|
|
|
95
95
|
}
|
|
96
96
|
if (e.key === "a" && e.ctrlKey && multiple && onSelectAll) {
|
|
97
97
|
onSelectAll(
|
|
98
|
-
filteredOptions.filter(
|
|
98
|
+
filteredOptions.filter(
|
|
99
|
+
(option) => option.type === "option" && !option.disabled
|
|
100
|
+
),
|
|
99
101
|
e
|
|
100
102
|
);
|
|
101
103
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/useKeyboardNavigation.tsx"],
|
|
4
|
-
"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());\n\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 e.preventDefault();\n e.stopPropagation();\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 // the following code is wrong but kept for backward compatibility to avoid breaking changes\n // when readonly the idea is not to open the menu when typing but currently it opens the menu\n // =============================================================================\n // OPEN MENU ON TYPE WHEN READONLY AND ISMENUOPENABLEWITHREADONLY IS TRUE\n // =============================================================================\n if (isMenuOpenableWithReadOnly && e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {\n if (!menuState) {\n setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n }\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 // DSComboboxT.InternalProps is a conditional type that can't be resolved without an explicit type\n // parameter, so TypeScript treats onChange as a union of functions and requires intersection params.\n // The cast to SelectedOptionsT is safe \u2014 getSuggestedValueOnChange handles both multi/single at runtime.\n (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n getSuggestedValueOnChange(currentItem, selectedValues, isNonClearable),\n currentItem,\n e,\n );\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 as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n getSuggestedValueOnChange(lastValue, selectedValues),\n lastValue,\n e,\n );\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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,kBAAkB;AAExC,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;
|
|
4
|
+
"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 type { DSCommonComboboxPropsT } from '../../DSCommonComboboxPropsT.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());\n\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 e.preventDefault();\n e.stopPropagation();\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 // the following code is wrong but kept for backward compatibility to avoid breaking changes\n // when readonly the idea is not to open the menu when typing but currently it opens the menu\n // =============================================================================\n // OPEN MENU ON TYPE WHEN READONLY AND ISMENUOPENABLEWITHREADONLY IS TRUE\n // =============================================================================\n if (isMenuOpenableWithReadOnly && e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {\n if (!menuState) {\n setMenuState(true, MENU_CONTROL_REASONS.OPEN, e);\n }\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 // DSComboboxT.InternalProps is a conditional type that can't be resolved without an explicit type\n // parameter, so TypeScript treats onChange as a union of functions and requires intersection params.\n // The cast to SelectedOptionsT is safe \u2014 getSuggestedValueOnChange handles both multi/single at runtime.\n (onChange as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n getSuggestedValueOnChange(currentItem, selectedValues, isNonClearable),\n currentItem,\n e,\n );\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(\n (option) => option.type === 'option' && !option.disabled,\n ) as DSCommonComboboxPropsT.SelectionableOptions[],\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 as (v: DSComboboxT.SelectedOptionsT, ...args: unknown[]) => void)(\n getSuggestedValueOnChange(lastValue, selectedValues),\n lastValue,\n e,\n );\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createRef } from 'react';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n PropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSComboboxMultiT } from './DSComboboxMultiT.js';\nimport type { DSComboboxSingleT } from './DSComboboxSingleT.js';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxT {\n export type SlotFunctionArguments = {\n dsComboboxRoot: () => object;\n dsComboboxInputWrapper: () => object;\n dsComboboxInput: () => object;\n dsComboboxDropdownButton: () => object;\n dsComboboxFastList: () => object;\n dsComboboxSectionWrapper: () => object;\n dsComboboxSectionLabel: () => object;\n dsComboboxSingleMenuItem: () => object;\n dsComboboxMultiMenuItem: () => object;\n dsComboboxLoadingIndicator: () => object;\n dsComboboxSkeletonMenuItem: () => object;\n dsComboboxPill: () => object;\n dsComboboxPillGroup: () => object;\n dsComboboxPopperWrapper: () => object;\n dsComboboxSelection: () => object;\n dsComboboxSingleValueWrapper: () => object;\n dsComboboxHeaderActions: () => object;\n dsComboboxHeaderActionsSeparator: () => object;\n dsComboboxInputPlaceholder: () => object;\n dsComboboxInputFieldWrapper: () => object;\n dsComboboxListWrapper: () => object;\n dsComboboxNoResults: () => object;\n dsComboboxCreatableLabel: () => object;\n dsComboboxCreatableValue: () => object;\n dsComboboxMenuItemsWrapper: () => object;\n dsComboboxLoadingWrapper: () => object;\n };\n\n export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n export type SelectedOptionsT =
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createRef } from 'react';\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n getPropsPerSlotPropTypes,\n globalAttributesPropTypes,\n PropTypes,\n xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSComboboxMultiT } from './DSComboboxMultiT.js';\nimport type { DSComboboxSingleT } from './DSComboboxSingleT.js';\nimport { commonComboboxPropTypes, type DSCommonComboboxPropsT } from './DSCommonComboboxPropsT.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from './constants/index.js';\n\nexport declare namespace DSComboboxT {\n export type SlotFunctionArguments = {\n dsComboboxRoot: () => object;\n dsComboboxInputWrapper: () => object;\n dsComboboxInput: () => object;\n dsComboboxDropdownButton: () => object;\n dsComboboxFastList: () => object;\n dsComboboxSectionWrapper: () => object;\n dsComboboxSectionLabel: () => object;\n dsComboboxSingleMenuItem: () => object;\n dsComboboxMultiMenuItem: () => object;\n dsComboboxLoadingIndicator: () => object;\n dsComboboxSkeletonMenuItem: () => object;\n dsComboboxPill: () => object;\n dsComboboxPillGroup: () => object;\n dsComboboxPopperWrapper: () => object;\n dsComboboxSelection: () => object;\n dsComboboxSingleValueWrapper: () => object;\n dsComboboxHeaderActions: () => object;\n dsComboboxHeaderActionsSeparator: () => object;\n dsComboboxInputPlaceholder: () => object;\n dsComboboxInputFieldWrapper: () => object;\n dsComboboxListWrapper: () => object;\n dsComboboxNoResults: () => object;\n dsComboboxCreatableLabel: () => object;\n dsComboboxCreatableValue: () => object;\n dsComboboxMenuItemsWrapper: () => object;\n dsComboboxLoadingWrapper: () => object;\n };\n\n export type CommonItemOptions = DSCommonComboboxPropsT.CommonItemOptions;\n export type ItemSeparatorOptions = DSCommonComboboxPropsT.ItemSeparatorOptions;\n export type ItemSectionOptions = DSCommonComboboxPropsT.ItemSectionOptions;\n export type ItemOption = DSCommonComboboxPropsT.ItemOption;\n export type ItemCreatableOption = DSCommonComboboxPropsT.ItemCreatableOption;\n\n export type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;\n export type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;\n export type OptionTypes = DSCommonComboboxPropsT.OptionTypes;\n\n export type SelectedOptionsT = SelectionableOptions[] | SelectionableOptions | null;\n\n type SingleComboboxRequirePropsRenameInterface = Omit<DSComboboxSingleT.RequiredProps, 'selectedValue'> & {\n selectedValues: DSComboboxSingleT.RequiredProps['selectedValue'];\n };\n\n export type RequiredProps<\n T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[],\n > = T extends DSCommonComboboxPropsT.ItemOption[]\n ? DSComboboxMultiT.RequiredProps\n : SingleComboboxRequirePropsRenameInterface;\n\n export type DefaultProps<\n T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[],\n > = T extends DSCommonComboboxPropsT.ItemOption[] ? DSComboboxMultiT.DefaultProps : DSComboboxSingleT.DefaultProps;\n export type OptionalProps<\n T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[],\n > = T extends DSCommonComboboxPropsT.ItemOption[] ? DSComboboxMultiT.OptionalProps : DSComboboxSingleT.OptionalProps;\n export type PropsOptional = OptionalProps; // alias for backwards compatibility\n\n export type Props<\n T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[],\n > = T extends DSCommonComboboxPropsT.ItemOption[]\n ? DSComboboxMultiT.Props\n : Omit<DSComboboxSingleT.Props, 'selectedValue'> & { selectedValues: DSComboboxSingleT.Props['selectedValue'] };\n export type InternalProps<\n T extends DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[] | null =\n DSCommonComboboxPropsT.ItemOption | DSCommonComboboxPropsT.ItemOption[],\n > = T extends DSCommonComboboxPropsT.ItemOption[]\n ? DSComboboxMultiT.InternalProps\n : Omit<DSComboboxSingleT.InternalProps, 'selectedValue'> & {\n selectedValues: DSComboboxSingleT.InternalProps['selectedValue'];\n };\n}\n\nexport const defaultProps: DSComboboxT.DefaultProps = {\n hasError: false,\n inline: false,\n withoutPortal: false,\n disabled: false,\n useMask: () => {},\n innerRef: createRef(),\n startPlacementPreference: 'bottom-start',\n placementOrderPreference: ['bottom-start', 'top-start'],\n noOptionsMessage: 'No Matches Found',\n isNonClearable: false,\n onlySelectable: false,\n isSkeleton: false,\n // override in useCombobox to avoid ref duplications when more than one cb is used\n applyAriaDisabled: false,\n readOnly: false,\n isMenuOpenableWithReadOnly: false,\n forceFocusFirstOptionOnType: false,\n menuMaxHeight: 300,\n};\n\n/**\n * Unified public schema used by polymorphic combobox consumption.\n *\n * `selectedValues` shape determines effective usage mode:\n * - object or null => single-select contract\n * - array => multi-select contract\n */\nexport const ComboboxPropTypes: DSPropTypesSchema<DSComboboxT.Props> = {\n ...getPropsPerSlotPropTypes(DSFormComboboxName, FORM_COMBOBOX_SLOTS),\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n ...commonComboboxPropTypes,\n onChange: PropTypes.func.isRequired\n .description(\n 'Polymorphic change callback. For single-select, suggestedValue is ItemOption | null; for multi-select, suggestedValue is ItemOption[].',\n )\n .signature(\n '(suggestedValue: ItemOption | ItemOption[] | null, selectedOption: SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void',\n ),\n selectedValues: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object])),\n PropTypes.object,\n PropTypes.oneOf([null]),\n ]).isRequired.description(\n 'Either a single selectable option or an array of selectable options. This shape determines single vs multi selection behavior. Null is valid only for single-select with no selection; an empty array is valid only for multi-select with no selection.',\n ),\n};\n\nexport const ComboboxPropTypesSchema = ComboboxPropTypes as unknown as ValidationMap<DSComboboxT.Props>;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAE1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,+BAA4D;AACrE,SAAS,oBAAoB,2BAA2B;AAiFjD,MAAM,eAAyC;AAAA,EACpD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,UAAU,UAAU;AAAA,EACpB,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB,WAAW;AAAA,EACtD,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAEZ,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,eAAe;AACjB;AASO,MAAM,oBAA0D;AAAA,EACrE,GAAG,yBAAyB,oBAAoB,mBAAmB;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,WACtB;AAAA,IACC;AAAA,EACF,EACC;AAAA,IACC;AAAA,EACF;AAAA,EACF,gBAAgB,UAAU,UAAU;AAAA,IAClC,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,MAAM,CAAC,CAAC;AAAA,IACzD,UAAU;AAAA,IACV,UAAU,MAAM,CAAC,IAAI,CAAC;AAAA,EACxB,CAAC,EAAE,WAAW;AAAA,IACZ;AAAA,EACF;AACF;AAEO,MAAM,0BAA0B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -46,6 +46,7 @@ const getFirstOption = (options, selectedValues) => {
|
|
|
46
46
|
};
|
|
47
47
|
const getSuggestedValueOnChange = (selectedOption, selectedValues, isNonClearable) => {
|
|
48
48
|
if (Array.isArray(selectedValues)) {
|
|
49
|
+
if (selectedOption === null) return selectedValues;
|
|
49
50
|
const isFound = selectedValues.find((item) => item.type === "option" && item.value === selectedOption.value);
|
|
50
51
|
if (isFound) {
|
|
51
52
|
if (isNonClearable) return selectedValues;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/listHelper.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from '../constants.js';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n if (isSelectedValueMultiple(value)) {\n const multiValue = value as DSComboboxT.ItemOption[];\n return multiValue.some((item) => item?.value === activeOption?.value);\n }\n const singleValue = value as DSComboboxT.ItemOption;\n return singleValue?.value === activeOption.value;\n};\n\nexport function isArrayOfItems(value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption[] {\n return Array.isArray(value) && value.length > 0;\n}\n\nexport const isItem = (value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption =>\n !Array.isArray(value) && value !== null && typeof value === 'object';\n\nexport const findInCircularList = (\n list: DSComboboxT.OptionTypes[],\n from: number,\n criteria: (item: DSComboboxT.OptionTypes) => boolean,\n step = 1,\n): number => {\n if (list.length === 0) return from;\n\n let i = (from + step + list.length) % list.length;\n let iterations = 0;\n\n while (iterations < list.length) {\n if (criteria(list[i])) return i;\n\n i = (i + step + list.length) % list.length;\n iterations += 1;\n }\n\n return from; // Return the original index if no match is found\n};\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n if (Array.isArray(selectedValues)) {\n return selectedValues[selectedValues.length - 1];\n }\n return selectedValues;\n};\n\nexport const getFirstOption = (\n options: DSComboboxT.OptionTypes[],\n selectedValues?: DSComboboxT.SelectedOptionsT,\n): string => {\n if (selectedValues) {\n const lastValue = getLastValueSelected(selectedValues);\n /**\n * A selected value can be created dynamically (e.g. a creatable filter) and later filtered\n * out of the rendered options, so its id must still exist in `options` before we focus it \u2014\n * otherwise aria-activedescendant would point at a non-existent id.\n */\n if (lastValue && options.some((option) => option.dsId === lastValue.dsId)) return lastValue.dsId;\n }\n for (let i = 0; i < options.length; i += 1)\n if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n return options[i].dsId;\n }\n // list of disabled item results return ''\n return '';\n};\n\nexport const getSuggestedValueOnChange = (\n selectedOption: DSComboboxT.
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from '../constants.js';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n if (isSelectedValueMultiple(value)) {\n const multiValue = value as DSComboboxT.ItemOption[];\n return multiValue.some((item) => item?.value === activeOption?.value);\n }\n const singleValue = value as DSComboboxT.ItemOption;\n return singleValue?.value === activeOption.value;\n};\n\nexport function isArrayOfItems(value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption[] {\n return Array.isArray(value) && value.length > 0;\n}\n\nexport const isItem = (value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption =>\n !Array.isArray(value) && value !== null && typeof value === 'object';\n\nexport const findInCircularList = (\n list: DSComboboxT.OptionTypes[],\n from: number,\n criteria: (item: DSComboboxT.OptionTypes) => boolean,\n step = 1,\n): number => {\n if (list.length === 0) return from;\n\n let i = (from + step + list.length) % list.length;\n let iterations = 0;\n\n while (iterations < list.length) {\n if (criteria(list[i])) return i;\n\n i = (i + step + list.length) % list.length;\n iterations += 1;\n }\n\n return from; // Return the original index if no match is found\n};\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n if (Array.isArray(selectedValues)) {\n return selectedValues[selectedValues.length - 1];\n }\n return selectedValues;\n};\n\nexport const getFirstOption = (\n options: DSComboboxT.OptionTypes[],\n selectedValues?: DSComboboxT.SelectedOptionsT,\n): string => {\n if (selectedValues) {\n const lastValue = getLastValueSelected(selectedValues);\n /**\n * A selected value can be created dynamically (e.g. a creatable filter) and later filtered\n * out of the rendered options, so its id must still exist in `options` before we focus it \u2014\n * otherwise aria-activedescendant would point at a non-existent id.\n */\n if (lastValue && options.some((option) => option.dsId === lastValue.dsId)) return lastValue.dsId;\n }\n for (let i = 0; i < options.length; i += 1)\n if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n return options[i].dsId;\n }\n // list of disabled item results return ''\n return '';\n};\n\nexport const getSuggestedValueOnChange = (\n selectedOption: DSComboboxT.SelectionableOptions,\n selectedValues: DSComboboxT.SelectedOptionsT,\n isNonClearable?: boolean,\n): DSComboboxT.SelectedOptionsT => {\n if (Array.isArray(selectedValues)) {\n if (selectedOption === null) return selectedValues;\n const isFound = selectedValues.find((item) => item.type === 'option' && item.value === selectedOption.value);\n if (isFound) {\n if (isNonClearable) return selectedValues;\n return selectedValues.filter((item) => item.type === 'option' && item.value !== selectedOption.value);\n }\n return [...selectedValues, selectedOption];\n }\n if (selectedValues && selectedValues.dsId === selectedOption.dsId) {\n if (isNonClearable) return selectedOption;\n return null;\n }\n return selectedOption;\n};\n\nexport const filterOptions = (inputValue: string, options: DSComboboxT.OptionTypes[]) => {\n if (!inputValue) return options;\n return options.filter(\n (option) =>\n option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()),\n );\n};\n\nexport const getFilteredOptionsSelected = (\n filteredOption: DSComboboxT.OptionTypes[],\n selectedValues: DSComboboxT.ItemOption[],\n) => filteredOption.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));\n\nexport const scrollIfNeeded = (\n elem: HTMLElement,\n options = { behavior: 'smooth', block: 'end', inline: 'nearest' } as ScrollIntoViewOptions | undefined,\n) => {\n const bounding = elem.getBoundingClientRect();\n if (!(\n bounding.top >= 0 &&\n bounding.left >= 0 &&\n bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n bounding.right <= (window.innerWidth || document.documentElement.clientWidth)\n ))\n elem.scrollIntoView(options);\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/typeGuards.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSCommonComboboxPropsT } from '../DSCommonComboboxPropsT.js';\n\nexport const isItemContainingALabel = (\n item: unknown,\n): item is\n | DSCommonComboboxPropsT.ItemSectionOptions\n | DSCommonComboboxPropsT.ItemOption\n | DSCommonComboboxPropsT.ItemCreatableOption =>\n typeof item === 'object' && item !== null && 'label' in item && typeof item.label === 'string';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEhB,MAAM,yBAAyB,CACpC,SAKA,OAAO,SAAS,YAAY,SAAS,QAAQ,WAAW,QAAQ,OAAO,KAAK,UAAU;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -13,8 +13,8 @@ export declare namespace DSComboboxMultiT {
|
|
|
13
13
|
type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;
|
|
14
14
|
type OptionTypes = DSCommonComboboxPropsT.OptionTypes;
|
|
15
15
|
interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {
|
|
16
|
-
selectedValues: DSCommonComboboxPropsT.
|
|
17
|
-
onChange: (suggestedValue: DSCommonComboboxPropsT.
|
|
16
|
+
selectedValues: DSCommonComboboxPropsT.SelectionableOptions[];
|
|
17
|
+
onChange: (suggestedValue: DSCommonComboboxPropsT.SelectionableOptions[], selectedOption: DSCommonComboboxPropsT.SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void;
|
|
18
18
|
}
|
|
19
19
|
interface DefaultProps extends DSCommonComboboxPropsT.DefaultProps {
|
|
20
20
|
}
|
|
@@ -13,8 +13,8 @@ export declare namespace DSComboboxSingleT {
|
|
|
13
13
|
type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;
|
|
14
14
|
type OptionTypes = DSCommonComboboxPropsT.OptionTypes;
|
|
15
15
|
interface RequiredProps extends DSCommonComboboxPropsT.RequiredProps {
|
|
16
|
-
selectedValue: DSCommonComboboxPropsT.
|
|
17
|
-
onChange: (suggestedValue: DSCommonComboboxPropsT.
|
|
16
|
+
selectedValue: DSCommonComboboxPropsT.SelectionableOptions | null;
|
|
17
|
+
onChange: (suggestedValue: DSCommonComboboxPropsT.SelectionableOptions | null, selectedOption: DSCommonComboboxPropsT.SelectionableOptions, event: React.MouseEvent | React.KeyboardEvent) => void;
|
|
18
18
|
}
|
|
19
19
|
interface DefaultProps extends DSCommonComboboxPropsT.DefaultProps {
|
|
20
20
|
}
|
|
@@ -63,7 +63,7 @@ export declare namespace DSCommonComboboxPropsT {
|
|
|
63
63
|
onCreate?: (label: string) => void;
|
|
64
64
|
onFilter?: (newOptions: OptionTypes[], inputValue?: string) => void;
|
|
65
65
|
onCancel?: () => void;
|
|
66
|
-
onSelectAll?: (suggestedValue:
|
|
66
|
+
onSelectAll?: (suggestedValue: SelectionableOptions[] | [], event: React.MouseEvent | React.KeyboardEvent) => void;
|
|
67
67
|
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;
|
|
68
68
|
isLoading?: boolean;
|
|
69
69
|
popperProps?: DSFloatingWrapperT.Props;
|
|
@@ -39,7 +39,7 @@ export declare namespace DSComboboxT {
|
|
|
39
39
|
type SelectionableOptions = DSCommonComboboxPropsT.SelectionableOptions;
|
|
40
40
|
type LayoutOptions = DSCommonComboboxPropsT.LayoutOptions;
|
|
41
41
|
type OptionTypes = DSCommonComboboxPropsT.OptionTypes;
|
|
42
|
-
type SelectedOptionsT =
|
|
42
|
+
type SelectedOptionsT = SelectionableOptions[] | SelectionableOptions | null;
|
|
43
43
|
type SingleComboboxRequirePropsRenameInterface = Omit<DSComboboxSingleT.RequiredProps, 'selectedValue'> & {
|
|
44
44
|
selectedValues: DSComboboxSingleT.RequiredProps['selectedValue'];
|
|
45
45
|
};
|
|
@@ -7,9 +7,9 @@ export declare const isSelected: (value: DSComboboxT.SelectedOptionsT, activeOpt
|
|
|
7
7
|
export declare function isArrayOfItems(value: DSComboboxT.SelectedOptionsT): value is DSComboboxT.ItemOption[];
|
|
8
8
|
export declare const isItem: (value: DSComboboxT.SelectedOptionsT) => value is DSComboboxT.ItemOption;
|
|
9
9
|
export declare const findInCircularList: (list: DSComboboxT.OptionTypes[], from: number, criteria: (item: DSComboboxT.OptionTypes) => boolean, step?: number) => number;
|
|
10
|
-
export declare const getLastValueSelected: (selectedValues: DSComboboxT.SelectedOptionsT) => import("../DSCommonComboboxPropsT.js").DSCommonComboboxPropsT.
|
|
10
|
+
export declare const getLastValueSelected: (selectedValues: DSComboboxT.SelectedOptionsT) => import("../DSCommonComboboxPropsT.js").DSCommonComboboxPropsT.SelectionableOptions | null;
|
|
11
11
|
export declare const getFirstOption: (options: DSComboboxT.OptionTypes[], selectedValues?: DSComboboxT.SelectedOptionsT) => string;
|
|
12
|
-
export declare const getSuggestedValueOnChange: (selectedOption: DSComboboxT.
|
|
12
|
+
export declare const getSuggestedValueOnChange: (selectedOption: DSComboboxT.SelectionableOptions, selectedValues: DSComboboxT.SelectedOptionsT, isNonClearable?: boolean) => DSComboboxT.SelectedOptionsT;
|
|
13
13
|
export declare const filterOptions: (inputValue: string, options: DSComboboxT.OptionTypes[]) => import("../DSCommonComboboxPropsT.js").DSCommonComboboxPropsT.OptionTypes[];
|
|
14
14
|
export declare const getFilteredOptionsSelected: (filteredOption: DSComboboxT.OptionTypes[], selectedValues: DSComboboxT.ItemOption[]) => import("../DSCommonComboboxPropsT.js").DSCommonComboboxPropsT.OptionTypes[];
|
|
15
15
|
export declare const scrollIfNeeded: (elem: HTMLElement, options?: ScrollIntoViewOptions | undefined) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-combobox",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.69",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Combobox",
|
|
6
6
|
"files": [
|
|
@@ -37,26 +37,26 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"uid": "^2.0.2",
|
|
40
|
-
"@elliemae/ds-button-v2": "3.70.0-next.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-typography": "3.70.0-next.
|
|
40
|
+
"@elliemae/ds-button-v2": "3.70.0-next.69",
|
|
41
|
+
"@elliemae/ds-circular-progress-indicator": "3.70.0-next.69",
|
|
42
|
+
"@elliemae/ds-fast-list": "3.70.0-next.69",
|
|
43
|
+
"@elliemae/ds-floating-context": "3.70.0-next.69",
|
|
44
|
+
"@elliemae/ds-grid": "3.70.0-next.69",
|
|
45
|
+
"@elliemae/ds-icons": "3.70.0-next.69",
|
|
46
|
+
"@elliemae/ds-menu-items": "3.70.0-next.69",
|
|
47
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.69",
|
|
48
|
+
"@elliemae/ds-pills-v2": "3.70.0-next.69",
|
|
49
|
+
"@elliemae/ds-system": "3.70.0-next.69",
|
|
50
|
+
"@elliemae/ds-typography": "3.70.0-next.69"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@elliemae/pui-theme": "~2.13.0",
|
|
54
54
|
"jest": "^30.0.0",
|
|
55
55
|
"styled-components": "~5.3.11",
|
|
56
56
|
"styled-system": "^5.1.5",
|
|
57
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.
|
|
58
|
-
"@elliemae/ds-
|
|
59
|
-
"@elliemae/ds-
|
|
57
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.69",
|
|
58
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.69",
|
|
59
|
+
"@elliemae/ds-test-utils": "3.70.0-next.69"
|
|
60
60
|
},
|
|
61
61
|
"peerDependencies": {
|
|
62
62
|
"@elliemae/pui-theme": "~2.13.0",
|