@elliemae/ds-form-combobox 3.16.0-next.11 → 3.16.0-next.13
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/ComboBox.js +4 -0
- package/dist/cjs/ComboBox.js.map +1 -1
- package/dist/cjs/ComboBoxCTX.js +5 -0
- package/dist/cjs/ComboBoxCTX.js.map +1 -1
- package/dist/cjs/ComboboxDataTestids.js +4 -0
- package/dist/cjs/ComboboxDataTestids.js.map +1 -1
- package/dist/cjs/config/useComboBox.js +5 -0
- package/dist/cjs/config/useComboBox.js.map +1 -1
- package/dist/cjs/config/useCorrectOptions.js +4 -0
- package/dist/cjs/config/useCorrectOptions.js.map +1 -1
- package/dist/cjs/constants.js +4 -0
- package/dist/cjs/constants.js.map +1 -1
- package/dist/cjs/index.js +4 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/parts/DropdownIndicator.js +4 -0
- package/dist/cjs/parts/DropdownIndicator.js.map +1 -1
- package/dist/cjs/parts/LiveRegion.js +4 -0
- package/dist/cjs/parts/LiveRegion.js.map +1 -1
- package/dist/cjs/parts/container/Container.js +4 -0
- package/dist/cjs/parts/container/Container.js.map +1 -1
- package/dist/cjs/parts/container/index.js +4 -0
- package/dist/cjs/parts/container/index.js.map +1 -1
- package/dist/cjs/parts/container/styled.js +4 -0
- package/dist/cjs/parts/container/styled.js.map +1 -1
- package/dist/cjs/parts/controls/Controls.js +4 -0
- package/dist/cjs/parts/controls/Controls.js.map +1 -1
- package/dist/cjs/parts/controls/index.js +4 -0
- package/dist/cjs/parts/controls/index.js.map +1 -1
- package/dist/cjs/parts/controls/styled.js +4 -0
- package/dist/cjs/parts/controls/styled.js.map +1 -1
- package/dist/cjs/parts/controls/useOnPillsNavigation.js +4 -0
- package/dist/cjs/parts/controls/useOnPillsNavigation.js.map +1 -1
- package/dist/cjs/parts/controls-input/ControlsInput.js +4 -0
- package/dist/cjs/parts/controls-input/ControlsInput.js.map +1 -1
- package/dist/cjs/parts/controls-input/styled.js +4 -0
- package/dist/cjs/parts/controls-input/styled.js.map +1 -1
- package/dist/cjs/parts/controls-input/useControlsInput.js +4 -0
- package/dist/cjs/parts/controls-input/useControlsInput.js.map +1 -1
- package/dist/cjs/parts/controls-input/useKeyboardNavigation.js +5 -0
- package/dist/cjs/parts/controls-input/useKeyboardNavigation.js.map +1 -1
- package/dist/cjs/parts/controls-input/useMaskedOnChange.js +4 -0
- package/dist/cjs/parts/controls-input/useMaskedOnChange.js.map +1 -1
- package/dist/cjs/parts/header-list/HeaderList.js +4 -0
- package/dist/cjs/parts/header-list/HeaderList.js.map +1 -1
- package/dist/cjs/parts/header-list/index.js +4 -0
- package/dist/cjs/parts/header-list/index.js.map +1 -1
- package/dist/cjs/parts/header-list/styled.js +4 -0
- package/dist/cjs/parts/header-list/styled.js.map +1 -1
- package/dist/cjs/parts/header-list/useHeaderListHandlers.js +4 -0
- package/dist/cjs/parts/header-list/useHeaderListHandlers.js.map +1 -1
- package/dist/cjs/parts/menu-list/LoadingContainer.js +4 -0
- package/dist/cjs/parts/menu-list/LoadingContainer.js.map +1 -1
- package/dist/cjs/parts/menu-list/MenuList.js +4 -0
- package/dist/cjs/parts/menu-list/MenuList.js.map +1 -1
- package/dist/cjs/parts/menu-list/index.js +4 -0
- package/dist/cjs/parts/menu-list/index.js.map +1 -1
- package/dist/cjs/parts/menu-list/styled.js +4 -0
- package/dist/cjs/parts/menu-list/styled.js.map +1 -1
- package/dist/cjs/parts/menu-list/useItemRenderer.js +4 -0
- package/dist/cjs/parts/menu-list/useItemRenderer.js.map +1 -1
- package/dist/cjs/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +4 -0
- package/dist/cjs/parts/multi-selected-values-container/MultiSelectedValuesContainer.js.map +1 -1
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js +4 -0
- package/dist/cjs/parts/multi-selected-values-container/RemovableSelectedValuePill.js.map +1 -1
- package/dist/cjs/parts/multi-selected-values-container/index.js +4 -0
- package/dist/cjs/parts/multi-selected-values-container/index.js.map +1 -1
- package/dist/cjs/parts/multi-selected-values-container/useGroupPills.js +4 -0
- package/dist/cjs/parts/multi-selected-values-container/useGroupPills.js.map +1 -1
- package/dist/cjs/parts/styled.js +4 -0
- package/dist/cjs/parts/styled.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +4 -0
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/sharedTypes.js +4 -0
- package/dist/cjs/sharedTypes.js.map +1 -1
- package/dist/cjs/tests/utils.js +4 -0
- package/dist/cjs/tests/utils.js.map +1 -1
- package/dist/cjs/theming.js +4 -0
- package/dist/cjs/theming.js.map +1 -1
- package/dist/cjs/utils/listHelper.js +4 -0
- package/dist/cjs/utils/listHelper.js.map +1 -1
- package/dist/esm/ComboBoxCTX.js +1 -0
- package/dist/esm/ComboBoxCTX.js.map +1 -1
- package/dist/esm/config/useComboBox.js +1 -0
- package/dist/esm/config/useComboBox.js.map +1 -1
- package/dist/esm/parts/DropdownIndicator.js.map +1 -1
- package/dist/esm/parts/container/Container.js.map +1 -1
- package/dist/esm/parts/controls/styled.js.map +1 -1
- package/dist/esm/parts/controls/useOnPillsNavigation.js.map +1 -1
- package/dist/esm/parts/controls-input/ControlsInput.js.map +1 -1
- package/dist/esm/parts/controls-input/styled.js.map +1 -1
- package/dist/esm/parts/controls-input/useKeyboardNavigation.js +1 -0
- package/dist/esm/parts/controls-input/useKeyboardNavigation.js.map +1 -1
- package/dist/esm/parts/header-list/styled.js.map +1 -1
- package/dist/esm/parts/menu-list/useItemRenderer.js.map +1 -1
- package/dist/esm/utils/listHelper.js.map +1 -1
- package/package.json +17 -17
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/useKeyboardNavigation.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
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 =>\n !['section', 'separator'].includes(opt.type) && !opt.disabled;\n\nexport const useKeyboardNavigation = () => {\n const {\n props: {\n allOptions,\n isNonClearable,\n onCancel,\n onKeyDown,\n onChange,\n onCreate,\n onFilter,\n onSelectAll,\n inline,\n filteredOptions,\n selectedValues,\n withoutPortal,\n },\n inputValue,\n menuState,\n focusOptionIdx,\n listRef,\n selectAllCheckboxRef,\n toggleSelectionButtonRef,\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 // =============================================================================\n // CUSTOM KEYS\n // =============================================================================\n if (onKeyDown && currentItem?.type === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);\n\n if (\n (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || (e.keyCode >= 48 && e.keyCode <= 90)) &&\n !menuState\n ) {\n setMenuState(true);\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 (e.key === 'Enter' && currentItem?.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {\n onCreate(inputValue);\n // blank active item to force search last one\n setFocusOptionIdx('');\n if (onFilter) onFilter(allOptions, '');\n setInputValue('');\n return;\n }\n\n // =============================================================================\n // Enter and space on selection\n // =============================================================================\n if (e.key === 'Enter' || (e.keyCode === 32 && e.altKey)) {\n e.preventDefault();\n e.stopPropagation();\n\n if (\n focusOptionIdx !== '' &&\n (menuState || inline) &&\n currentItem?.type === MENU_OPTION_TYPES.OPTION &&\n !currentItem.disabled\n ) {\n if (onFilter) onFilter(allOptions, '');\n setInputValue('');\n if (!multiple) {\n setMenuState(false, MENU_CONTROL_REASONS.SELECT_OPTION, e);\n }\n onChange(getSuggestedValueOnChange(currentItem, selectedValues, isNonClearable), currentItem, e);\n }\n }\n\n if (e.key === 'Enter' && e.altKey) {\n setMenuState(false, 'selectOption', e);\n }\n\n if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {\n onSelectAll(\n filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n e,\n );\n }\n // =============================================================================\n // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT\n // =============================================================================\n\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n e.stopPropagation();\n if ((menuState || inline) && selectableOptions.length) {\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) return;\n const prevItemIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable, -1);\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 const lastValue = getLastValueSelected(selectedValues);\n if (!e.currentTarget.value && lastValue && !isNonClearable) {\n onChange(getSuggestedValueOnChange(lastValue, selectedValues), lastValue, e);\n }\n }\n\n if (e.key === 'Tab' && !inline && menuState) {\n const element = selectAllCheckboxRef.current ?? toggleSelectionButtonRef.current;\n if (element) {\n e.preventDefault();\n element.focus();\n } else {\n setMenuState(false, MENU_CONTROL_REASONS.BLUR, e);\n }\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 selectAllCheckboxRef,\n toggleSelectionButtonRef,\n isNonClearable,\n ],\n );\n\n return { onInputKeyDown };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/controls-input/useMaskedOnChange.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { useContext, useCallback } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { filterOptions } from '../../utils/listHelper.js';\n\nconst useMaskedOnChange = () => {\n const {\n props: { useMask, onFilter, allOptions },\n setMenuState,\n setInputValue,\n setShowSelectedOptions,\n } = useContext(ComboBoxContext);\n\n // default onchange when no mask provided\n const handleOnChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n setShowSelectedOptions(false);\n setMenuState(true, 'filter', e);\n if (onFilter) {\n // when filtering is controlled we suggest the basic filtering but let the user decide\n onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);\n }\n setInputValue(e.currentTarget.value);\n },\n [allOptions, onFilter, setInputValue, setMenuState, setShowSelectedOptions],\n );\n\n // onchange used when mask is provided\n const handleOnChangeMask = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => {\n setShowSelectedOptions(false);\n setMenuState(true, 'filter', e);\n if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);\n else if (!mask && onFilter) onFilter(allOptions, '');\n },\n [allOptions, onFilter, setMenuState, setShowSelectedOptions],\n );\n\n const onChangeMask = useMask({ valueSetter: setInputValue, onChange: handleOnChangeMask });\n\n return onChangeMask?.onChange || handleOnChange;\n};\n\nexport { useMaskedOnChange };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwC;AACxC,yBAA4B;AAC5B,wBAA8B;AAE9B,MAAM,oBAAoB,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,UAAU,WAAW;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAA2C;AAC1C,6BAAuB,KAAK;AAC5B,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,UAAU;AAEZ,qBAAS,iCAAc,EAAE,cAAc,OAAO,UAAU,GAAG,EAAE,cAAc,KAAK;AAAA,MAClF;AACA,oBAAc,EAAE,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,YAAY,UAAU,eAAe,cAAc,sBAAsB;AAAA,EAC5E;AAGA,QAAM,yBAAqB;AAAA,IACzB,CAAC,GAAwC,SAAkB;AACzD,6BAAuB,KAAK;AAC5B,mBAAa,MAAM,UAAU,CAAC;AAC9B,UAAI,QAAQ;AAAU,qBAAS,iCAAc,MAAM,UAAU,GAAG,IAAI;AAAA,eAC3D,CAAC,QAAQ;AAAU,iBAAS,YAAY,EAAE;AAAA,IACrD;AAAA,IACA,CAAC,YAAY,UAAU,cAAc,sBAAsB;AAAA,EAC7D;AAEA,QAAM,eAAe,QAAQ,EAAE,aAAa,eAAe,UAAU,mBAAmB,CAAC;AAEzF,SAAO,cAAc,YAAY;AACnC;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/header-list/HeaderList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React, { useContext } from 'react';\nimport { BUTTON_SIZES, BUTTON_TYPES } from '@elliemae/ds-button';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport {\n StyledHeaderListWrapper,\n StyledButtonSelection,\n StyledSelectedItems,\n StyledSelectAllCheckbox,\n StyledNoOptionsSelected,\n} from './styled.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { useHeaderListHandlers } from './useHeaderListHandlers.js';\nexport const HeaderList = (): JSX.Element => {\n const {\n props: { selectedValues, filteredOptions, onSelectAll },\n showSelectedOptions,\n selectAllCheckboxRef,\n toggleSelectionButtonRef,\n } = useContext(ComboBoxContext);\n\n const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n const {\n handleKeyDown,\n handleOnMouseDown,\n handleFilterSelectionBtnOnTab,\n handleToggleSelectedValuesFilter,\n handleCheckAllOnTab,\n checkboxStatus,\n handleSelectAllCheckboxChange,\n } = useHeaderListHandlers();\n\n return (\n <StyledHeaderListWrapper\n onKeyDown={handleKeyDown}\n onMouseDown={handleOnMouseDown}\n data-testid={ComboboxDataTestid.MULTISELECT.HEADER_LIST}\n >\n <StyledSelectAllCheckbox>\n {onSelectAll && (\n <DSControlledCheckbox\n checked={checkboxStatus}\n aria-controls={filteredOptions.map((item) => item.dsId).join(' ')}\n name=\"select-all-checkbox\"\n aria-label=\"Select/Unselect All Items\"\n id=\"select-all-checkbox\"\n onChange={handleSelectAllCheckboxChange}\n onKeyDown={handleCheckAllOnTab}\n innerRef={selectAllCheckboxRef}\n device=\"desktop\"\n />\n )}\n </StyledSelectAllCheckbox>\n <StyledSelectedItems>\n {multiSelectedValues.length > 0 ? (\n <StyledButtonSelection\n onKeyDown={handleFilterSelectionBtnOnTab}\n buttonType={BUTTON_TYPES.TEXT}\n onClick={handleToggleSelectedValuesFilter}\n size={BUTTON_SIZES.S}\n data-testid={ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE}\n innerRef={toggleSelectionButtonRef}\n >\n {!showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : 'SHOW ALL'}\n </StyledButtonSelection>\n ) : (\n <StyledNoOptionsSelected>0 SELECTED</StyledNoOptionsSelected>\n )}\n </StyledSelectedItems>\n </StyledHeaderListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCnB;AAlCJ,mBAAkC;AAClC,uBAA2C;AAC3C,8BAAqC;AACrC,yBAAgC;AAChC,oBAMO;AAEP,iCAAmC;AACnC,mCAAsC;AAC/B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB,YAAY;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oDAAsB;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,aAAa;AAAA,MACb,eAAa,8CAAmB,YAAY;AAAA,MAE5C;AAAA,oDAAC,yCACE,yBACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,iBAAe,gBAAgB,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,GAAG;AAAA,YAChE,MAAK;AAAA,YACL,cAAW;AAAA,YACX,IAAG;AAAA,YACH,UAAU;AAAA,YACV,WAAW;AAAA,YACX,UAAU;AAAA,YACV,QAAO;AAAA;AAAA,QACT,GAEJ;AAAA,QACA,4CAAC,qCACE,8BAAoB,SAAS,IAC5B;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,YAAY,8BAAa;AAAA,YACzB,SAAS;AAAA,YACT,MAAM,8BAAa;AAAA,YACnB,eAAa,8CAAmB,YAAY;AAAA,YAC5C,UAAU;AAAA,YAET,WAAC,sBAAsB,kBAAkB,oBAAoB,YAAY;AAAA;AAAA,QAC5E,IAEA,4CAAC,yCAAwB,wBAAU,GAEvC;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/header-list/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export { HeaderList } from './HeaderList.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA2B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/header-list/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-len */\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\nexport const StyledHeaderListWrapper = styled.div`\n display: flex;\n position: fixed;\n top: 0;\n z-index: 10;\n justify-content: space-between;\n padding: 0px 12px 0px 16px;\n width: inherit;\n height: 28px;\n background-color: #fff;\n box-shadow: 0 4px 2px -4px ${(props) => props.theme.colors.neutral[700]};\n overflow-x: hidden;\n\n & button {\n font-size: 13px;\n }\n`;\n\nexport const StyledButtonSelection = styled(DSButtonV2)`\n border-radius: 0px;\n padding: 0 ${(props) => props.theme.space.xxs};\n margin: 0;\n font-size: 13px;\n align-items: center;\n transition: unset;\n &:hover:not([disabled]) {\n background-color: transparent;\n color: ${(props) => props.theme.colors.brand['700']};\n }\n`;\n\nexport const StyledSelectedItems = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const StyledNoOptionsSelected = styled.div`\n padding: 0 ${(props) => props.theme.space.xxs};\n font-size: 13px;\n`;\n\nexport const StyledSelectAllCheckbox = styled.div`\n display: flex;\n align-items: center;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,uBAA2B;AAEpB,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAUf,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjE,MAAM,4BAAwB,yBAAO,2BAAU;AAAA;AAAA,eAEvC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO/B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAI/C,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAKnC,MAAM,0BAA0B,wBAAO;AAAA,eAC/B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAIrC,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/header-list/useHeaderListHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import type React from 'react';\nimport { useState, useMemo, useEffect, useContext, useCallback } from 'react';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSelectableOptions } from '../../utils/listHelper.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nconst useHeaderListHandlers = () => {\n const {\n props: { selectedValues, filteredOptions, onSelectAll },\n showSelectedOptions,\n internalRef,\n setShowSelectedOptions,\n setMenuState,\n } = useContext(ComboBoxContext);\n\n const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n const selectableOptions = getSelectableOptions(filteredOptions);\n\n const getCheckboxStatus = useMemo(() => {\n if (multiSelectedValues.length === selectableOptions.length) {\n return true;\n }\n if (multiSelectedValues?.length === 0) {\n return false;\n }\n return 'mixed';\n }, [multiSelectedValues.length, selectableOptions.length]);\n\n const [checkboxStatus, setCheckboxStatus] = useState<'mixed' | boolean>(false);\n\n useEffect(() => {\n setCheckboxStatus(getCheckboxStatus);\n }, [getCheckboxStatus, multiSelectedValues]);\n\n const handleOnMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n // this prevent the input control to lose focus\n }, []);\n\n const handleSelectAllCheckboxChange = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {\n onSelectAll(\n filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n e,\n );\n setCheckboxStatus(true);\n } else if (onSelectAll) {\n onSelectAll([], e);\n setCheckboxStatus(false);\n }\n },\n [checkboxStatus, onSelectAll, filteredOptions],\n );\n\n const handleToggleSelectedValuesFilter: React.MouseEventHandler = useCallback(\n (e) => {\n e.preventDefault();\n setShowSelectedOptions(!showSelectedOptions);\n },\n [setShowSelectedOptions, showSelectedOptions],\n );\n\n // when pressing escape on each header list button we close the menu\n // and set focus on input\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n setMenuState(false, 'close', e);\n internalRef.current?.focus();\n }\n },\n [setMenuState, internalRef],\n );\n\n // when hitting tab on selected values button filter we target the input again\n const handleFilterSelectionBtnOnTab = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Tab' && !e.shiftKey) {\n e.preventDefault();\n internalRef.current?.focus();\n }\n },\n [internalRef],\n );\n\n const handleCheckAllOnTab = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {\n e.preventDefault();\n internalRef.current?.focus();\n }\n },\n [internalRef, multiSelectedValues],\n );\n\n useEffect(() => {\n // toggle off selected values filter when removing all of them\n if (multiSelectedValues.length === 0) {\n setShowSelectedOptions(false);\n }\n }, [multiSelectedValues, setShowSelectedOptions]);\n\n return useMemo(\n () => ({\n handleKeyDown,\n handleToggleSelectedValuesFilter,\n handleFilterSelectionBtnOnTab,\n handleOnMouseDown,\n handleCheckAllOnTab,\n handleSelectAllCheckboxChange,\n checkboxStatus,\n }),\n [\n handleKeyDown,\n handleFilterSelectionBtnOnTab,\n handleToggleSelectedValuesFilter,\n handleOnMouseDown,\n handleCheckAllOnTab,\n handleSelectAllCheckboxChange,\n checkboxStatus,\n ],\n );\n};\n\nexport { useHeaderListHandlers };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAsE;AAEtE,wBAAqC;AACrC,yBAA4B;AAE5B,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,iBAAiB,YAAY;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM,wBAAoB,wCAAqB,eAAe;AAE9D,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,QAAI,oBAAoB,WAAW,kBAAkB,QAAQ;AAC3D,aAAO;AAAA,IACT;AACA,QAAI,qBAAqB,WAAW,GAAG;AACrC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,QAAQ,kBAAkB,MAAM,CAAC;AAEzD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAA4B,KAAK;AAE7E,8BAAU,MAAM;AACd,sBAAkB,iBAAiB;AAAA,EACrC,GAAG,CAAC,mBAAmB,mBAAmB,CAAC;AAE3C,QAAM,wBAAoB,0BAAY,CAAC,MAAwB;AAC7D,MAAE,eAAe;AAAA,EAEnB,GAAG,CAAC,CAAC;AAEL,QAAM,oCAAgC;AAAA,IACpC,CAAC,MAA8C;AAC7C,WAAK,CAAC,kBAAkB,mBAAmB,YAAY,aAAa;AAClE;AAAA,UACE,gBAAgB,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ;AAAA,UAC/E;AAAA,QACF;AACA,0BAAkB,IAAI;AAAA,MACxB,WAAW,aAAa;AACtB,oBAAY,CAAC,GAAG,CAAC;AACjB,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,aAAa,eAAe;AAAA,EAC/C;AAEA,QAAM,uCAA4D;AAAA,IAChE,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,6BAAuB,CAAC,mBAAmB;AAAA,IAC7C;AAAA,IACA,CAAC,wBAAwB,mBAAmB;AAAA,EAC9C;AAIA,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,qBAAa,OAAO,SAAS,CAAC;AAC9B,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,WAAW;AAAA,EAC5B;AAGA,QAAM,oCAAgC;AAAA,IACpC,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,UAAU;AAClC,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,oBAAoB,WAAW,GAAG;AACtE,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,aAAa,mBAAmB;AAAA,EACnC;AAEA,8BAAU,MAAM;AAEd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,qBAAqB,sBAAsB,CAAC;AAEhD,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/LoadingContainer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\n\nconst Wrapper = styled.div`\n display: flex;\n justify-content: center;\n height: 56px;\n`;\n\nconst LoadingContainer = () => (\n <Wrapper>\n <DSCircularProgressIndicator size=\"m\" />\n </Wrapper>\n);\n\nexport { LoadingContainer };\nexport default LoadingContainer;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAXJ,uBAAuB;AACvB,4CAA4C;AAE5C,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,mBAAmB,MACvB,4CAAC,WACC,sDAAC,qEAA4B,MAAK,KAAI,GACxC;AAIF,IAAO,2BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/MenuList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { StyledListWrapper, StyledNoResultsWrapper, StyledList, StyledVirtualListWrapper } from './styled.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { HeaderList } from '../header-list/index.js';\nimport { useItemRenderer } from './useItemRenderer.js';\nimport { LoadingContainer } from './LoadingContainer.js';\n\nexport const MenuList = (): JSX.Element => {\n const {\n props: {\n isLoading,\n menuMinWidth,\n noOptionsMessage,\n menuMaxHeight,\n onCreate,\n inline,\n filteredOptions,\n selectedValues,\n },\n controlsWrapperRef,\n listRef,\n inputValue,\n wrapperListRef,\n virtualListHelpers,\n } = useContext(ComboBoxContext);\n\n const multiple = Array.isArray(selectedValues);\n // removing the header list if we are filtering or is inline cb or we have no options to show\n const withHeader = !inline && multiple && filteredOptions.length > 0 && !inputValue;\n const ItemRenderer = useItemRenderer();\n const { width } = useOnElementResize(controlsWrapperRef);\n const preventLoseInputFocus: React.MouseEventHandler = useCallback((e) => {\n e.preventDefault();\n }, []);\n\n const menuListRender = useMemo(() => {\n if (isLoading) return <LoadingContainer />;\n\n return (\n <>\n {withHeader && <HeaderList />}\n {filteredOptions.length > 0 || onCreate ? (\n <StyledVirtualListWrapper inline={inline} maxHeight={menuMaxHeight} ref={listRef} withHeader={withHeader}>\n <StyledList\n id=\"combo-listbox\"\n role=\"listbox\"\n data-testid={ComboboxDataTestid.LIST}\n style={{ height: virtualListHelpers?.totalSize, margin: inline ? '0px' : '8px 0px' }}\n >\n {ItemRenderer}\n </StyledList>\n </StyledVirtualListWrapper>\n ) : (\n <StyledNoResultsWrapper role=\"alert\">{noOptionsMessage}</StyledNoResultsWrapper>\n )}\n </>\n );\n }, [\n onCreate,\n withHeader,\n filteredOptions,\n noOptionsMessage,\n ItemRenderer,\n virtualListHelpers,\n inline,\n menuMaxHeight,\n listRef,\n isLoading,\n ]);\n\n return (\n <StyledListWrapper\n ref={wrapperListRef}\n inline={inline}\n onMouseDown={preventLoseInputFocus}\n width={width}\n minWidth={menuMinWidth}\n // we use width as key to force react virtual re-render on window resize\n // and update the item height accordly\n key={width}\n >\n {menuListRender}\n </StyledListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCG;AAtC1B,mBAAwD;AACxD,0BAAmC;AACnC,oBAAgG;AAChG,iCAAmC;AACnC,yBAAgC;AAChC,yBAA2B;AAC3B,6BAAgC;AAChC,8BAAiC;AAE1B,MAAM,WAAW,MAAmB;AACzC,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,WAAW,MAAM,QAAQ,cAAc;AAE7C,QAAM,aAAa,CAAC,UAAU,YAAY,gBAAgB,SAAS,KAAK,CAAC;AACzE,QAAM,mBAAe,wCAAgB;AACrC,QAAM,EAAE,MAAM,QAAI,wCAAmB,kBAAkB;AACvD,QAAM,4BAAiD,0BAAY,CAAC,MAAM;AACxE,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI;AAAW,aAAO,4CAAC,4CAAiB;AAExC,WACE,4EACG;AAAA,oBAAc,4CAAC,iCAAW;AAAA,MAC1B,gBAAgB,SAAS,KAAK,WAC7B,4CAAC,0CAAyB,QAAgB,WAAW,eAAe,KAAK,SAAS,YAChF;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,MAAK;AAAA,UACL,eAAa,8CAAmB;AAAA,UAChC,OAAO,EAAE,QAAQ,oBAAoB,WAAW,QAAQ,SAAS,QAAQ,UAAU;AAAA,UAElF;AAAA;AAAA,MACH,GACF,IAEA,4CAAC,wCAAuB,MAAK,SAAS,4BAAiB;AAAA,OAE3D;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MAKT;AAAA;AAAA,IAFI;AAAA,EAGP;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export { MenuList } from './MenuList.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,sBAAyB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\ninterface StyledListWrapperT {\n minWidth: number | string;\n maxHeight: number;\n width: number | string;\n inline?: boolean;\n}\nexport const StyledListWrapper = styled.div<StyledListWrapperT>`\n min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${minWidth}px`)};\n width: ${({ width }) => `${width}px`};\n background-color: #ffffff;\n max-height: ${({ maxHeight }) => `${maxHeight}px`};\n z-index: 100;\n`;\n\nexport const StyledList = styled.ul`\n position: relative;\n padding: 0;\n background-color: #ffffff;\n overflow: hidden;\n`;\n\nexport const StyledVirtualListWrapper = styled.div<{\n inline: boolean | undefined;\n maxHeight: number;\n withHeader: boolean;\n}>`\n overflow-y: auto;\n margin-top: ${({ withHeader }) => (withHeader ? '28px' : '')};\n max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : '300px')};\n`;\n\nexport const StyledCreatableLabel = styled.span`\n font-weight: bold;\n font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled.span`\n word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled.div`\n padding: 16px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAQhB,MAAM,oBAAoB,wBAAO;AAAA,eACzB,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG;AAAA,WACpD,CAAC,EAAE,MAAM,MAAM,GAAG;AAAA;AAAA,gBAEb,CAAC,EAAE,UAAU,MAAM,GAAG;AAAA;AAAA;AAI/B,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1B,MAAM,2BAA2B,wBAAO;AAAA;AAAA,gBAM/B,CAAC,EAAE,WAAW,MAAO,aAAa,SAAS;AAAA,gBAC3C,CAAC,EAAE,UAAU,MAAO,YAAY,GAAG,gBAAgB;AAAA;AAG5D,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAKpC,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAIpC,MAAM,yBAAyB,wBAAO;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/menu-list/useItemRenderer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem, Section, Separator } from '@elliemae/ds-menu-items';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { StyledCreatableLabel, StyledCreatableValue } from './styled.js';\nimport { isSelected, getSuggestedValueOnChange } from '../../utils/listHelper.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';\nexport const useItemRenderer = (): Array<JSX.Element> | null => {\n const {\n props: { filteredOptions, onCreate, onChange, isNonClearable, selectedValues, onFilter, allOptions },\n setMenuState,\n inputValue,\n focusOptionIdx,\n setInputValue,\n virtualListHelpers,\n } = useContext(ComboBoxContext);\n\n const multiple = Array.isArray(selectedValues);\n const CBItem = multiple ? MultiMenuItem : SingleMenuItem;\n\n const handleOnCreateClick = useCallback(() => {\n if (inputValue && onCreate) {\n onCreate(inputValue);\n setInputValue('');\n if (onFilter) onFilter(allOptions, inputValue);\n }\n }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);\n const handleClick = useCallback(\n (option: DSComboboxT.ItemOption, e: React.MouseEvent) => {\n if (option.type === MENU_OPTION_TYPES.OPTION) {\n if (!option.disabled) {\n if (onFilter) onFilter(allOptions, inputValue);\n setInputValue('');\n if (!multiple) {\n setMenuState(false, 'selectOption', e);\n }\n onChange(getSuggestedValueOnChange(option, selectedValues, isNonClearable), option, e);\n }\n }\n // prevent for loosing focus on input control\n e.stopPropagation();\n e.preventDefault();\n },\n [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple],\n );\n\n // prevent blur from controls input\n const handleOnMouseDown = useCallback((e: React.MouseEvent<HTMLLIElement>) => {\n e.preventDefault();\n }, []);\n\n return useMemo(() => {\n if (!virtualListHelpers) {\n return null;\n }\n return virtualListHelpers.virtualItems.map((vItem) => {\n const option = filteredOptions[vItem.index];\n const { dsId, type, disabled } = option;\n const generalProps = {\n wrapperStyles: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n transform: `translateY(${vItem.start}px)`,\n },\n\n key: `${dsId}`,\n innerRef: vItem.measureRef,\n };\n if (option.type === MENU_OPTION_TYPES.SECTION) {\n return <Section label={option.label} {...generalProps} />;\n }\n if (option.type === MENU_OPTION_TYPES.SEPARATOR) {\n return <Separator {...generalProps} />;\n }\n if (option.type === MENU_OPTION_TYPES.OPTION) {\n return (\n <CBItem\n {...generalProps}\n value={option.value}\n label={option.label}\n dataTestid={ComboboxDataTestid.OPTION}\n disabled={disabled}\n onClick={(e: React.MouseEvent) => {\n handleClick(option, e);\n }}\n onMouseDown={handleOnMouseDown}\n isActive={dsId === focusOptionIdx}\n isSelected={isSelected(selectedValues, option)}\n tabIndex={-1}\n />\n );\n }\n if (type === INTERNAL_MENU_OPTION_TYPES.CREATABLE) {\n return (\n <SingleMenuItem\n dataTestid={ComboboxDataTestid.OPTION}\n isActive={dsId === focusOptionIdx}\n {...generalProps}\n render={({ label: labelCreatable }: { label: string }) => (\n <Grid p=\"8px\" cols={['min-content', 'auto']} gutter=\"xxs\" alignItems=\"center\">\n <StyledCreatableLabel>Add:</StyledCreatableLabel>\n <StyledCreatableValue>{`\"${labelCreatable}\"`}</StyledCreatableValue>\n </Grid>\n )}\n label={option.label}\n onClick={handleOnCreateClick}\n />\n );\n }\n return <></>;\n });\n }, [filteredOptions, focusOptionIdx, selectedValues, virtualListHelpers]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/multi-selected-values-container/MultiSelectedValuesContainer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useMemo, useContext } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport { useGroupPills } from './useGroupPills.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { RemovableSelectedValuePill } from './RemovableSelectedValuePill.js';\nexport const MultiSelectedValuesContainer = (): JSX.Element => {\n const {\n props: { selectedValues, disabled },\n pillGroupRef,\n } = useContext(ComboBoxContext);\n\n // this is always an array because logic in controls component\n const multiSelectedValue = selectedValues as DSComboboxT.ItemOption[];\n const correctPillsToShow = useGroupPills();\n\n return useMemo(\n () => (\n <div\n style={{ width: multiSelectedValue.length > 0 ? 'max-content' : '0px' }}\n data-testid={ComboboxDataTestid.SELECTED_VALUES}\n >\n <DSPillGroupV2 innerRef={pillGroupRef}>\n {multiSelectedValue.length > 0 &&\n multiSelectedValue\n .slice(0, correctPillsToShow)\n .map((pill) => <RemovableSelectedValuePill key={pill.dsId} pill={pill} />)}\n {multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && (\n <DSPillV2\n size=\"s\"\n labelTruncated={false}\n key=\"grouped\"\n label={`+${multiSelectedValue.length - correctPillsToShow}`}\n type=\"value\"\n disabled={disabled}\n />\n )}\n </DSPillGroupV2>\n </div>\n ),\n\n [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBf;AAvBR,mBAA2C;AAC3C,sBAAwC;AACxC,yBAA4B;AAC5B,2BAA8B;AAE9B,iCAAmC;AACnC,wCAA2C;AACpC,MAAM,+BAA+B,MAAmB;AAC7D,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,SAAS;AAAA,IAClC;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAG9B,QAAM,qBAAqB;AAC3B,QAAM,yBAAqB,oCAAc;AAEzC,aAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,mBAAmB,SAAS,IAAI,gBAAgB,MAAM;AAAA,QACtE,eAAa,8CAAmB;AAAA,QAEhC,uDAAC,iCAAc,UAAU,cACtB;AAAA,6BAAmB,SAAS,KAC3B,mBACG,MAAM,GAAG,kBAAkB,EAC3B,IAAI,CAAC,SAAS,4CAAC,gEAA2C,QAAX,KAAK,IAAkB,CAAE;AAAA,UAC5E,mBAAmB,SAAS,KAAK,uBAAuB,mBAAmB,UAC1E;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,gBAAgB;AAAA,cAEhB,OAAO,IAAI,mBAAmB,SAAS;AAAA,cACvC,MAAK;AAAA,cACL;AAAA;AAAA,YAHI;AAAA,UAIN;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAGF,CAAC,cAAc,oBAAoB,oBAAoB,QAAQ;AAAA,EACjE;AACF;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/multi-selected-values-container/RemovableSelectedValuePill.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useContext } from 'react';\nimport { DSPillV2 } from '@elliemae/ds-pills';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSuggestedValueOnChange } from '../../utils/listHelper.js';\nexport const RemovableSelectedValuePill: React.ComponentType<{ pill: DSComboboxT.ItemOption }> = (props) => {\n const { pill } = props;\n const {\n props: { onChange, isNonClearable, disabled, selectedValues },\n internalRef,\n } = useContext(ComboBoxContext);\n\n return (\n <DSPillV2\n size=\"s\"\n key={pill.value}\n label={pill.label}\n disabled={disabled}\n type={disabled || isNonClearable ? 'value' : 'removable'}\n tabIndex={-1}\n onRemove={(e: React.KeyboardEvent) => {\n // preventing the menu to be opened\n e.stopPropagation();\n onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);\n internalRef.current?.focus();\n }}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADanB;AAbJ,mBAAkC;AAClC,sBAAyB;AACzB,yBAA4B;AAE5B,wBAA0C;AACnC,MAAM,6BAAoF,CAAC,UAAU;AAC1G,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,gBAAgB,UAAU,eAAe;AAAA,IAC5D;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MAEL,OAAO,KAAK;AAAA,MACZ;AAAA,MACA,MAAM,YAAY,iBAAiB,UAAU;AAAA,MAC7C,UAAU;AAAA,MACV,UAAU,CAAC,MAA2B;AAEpC,UAAE,gBAAgB;AAClB,qBAAS,6CAA0B,MAAM,cAAc,GAAG,MAAM,CAAC;AACjE,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA;AAAA,IAVK,KAAK;AAAA,EAWZ;AAEJ;",
|
|
6
6
|
"names": ["ComboBoxContext"]
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/multi-selected-values-container/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export { MultiSelectedValuesContainer } from './MultiSelectedValuesContainer.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0CAA6C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/multi-selected-values-container/useGroupPills.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { useContext, useEffect, useState, useLayoutEffect } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\n\nconst getGroupedPillWidth = (remainingPills: number): number => {\n if (remainingPills === 0) return 0;\n const digits = remainingPills.toString().length;\n return 8 * (digits - 1) + 31;\n};\nconst useGroupPills = (): number => {\n const {\n props: { selectedValues, isNonClearable, disabled, innerRef },\n selectedOptionsRef,\n controlsWrapperRef,\n pillGroupRef,\n } = useContext(ComboBoxContext);\n\n const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n\n // 30 represent 30 pills maximum to calculate the grouped pill. this fix the load time issue\n // when combobox is receiving a huge amount of options.\n const selectedValuesLength = Math.min(30, multiSelectedValues.length);\n\n const [pillsToShow, setPillsToShow] = useState(selectedValuesLength);\n const { width } = useOnElementResize(controlsWrapperRef);\n const { width: widthInput } = useOnElementResize(innerRef || null);\n useEffect(() => {\n if (selectedValuesLength !== pillsToShow) {\n setPillsToShow(selectedValuesLength);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedValuesLength, width, widthInput]);\n\n useLayoutEffect(() => {\n if (selectedOptionsRef.current && pillGroupRef.current) {\n if (pillGroupRef.current) pillGroupRef.current.style.width = 'max-content';\n let lastPillFit = -1;\n let currentWidth = 0;\n const referenceWidth = selectedOptionsRef.current.offsetWidth;\n const pills: HTMLDivElement[] = [\n ...pillGroupRef.current.querySelectorAll(\n disabled || isNonClearable ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable',\n ),\n ] as HTMLDivElement[];\n const pillsWidth = pills.map((pill) => pill?.offsetWidth);\n pillsWidth.forEach((pillWidth, idx) => {\n currentWidth += pillWidth;\n if (currentWidth + getGroupedPillWidth(selectedValuesLength - idx - 1) <= referenceWidth) {\n lastPillFit = idx;\n }\n });\n\n if (!(selectedValuesLength > 0 && pillsToShow !== selectedValuesLength)) {\n const nextPillsToShow = lastPillFit + 1;\n\n if (nextPillsToShow !== pillsToShow) {\n setPillsToShow(nextPillsToShow);\n }\n }\n\n if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';\n }\n }, [\n selectedOptionsRef,\n innerRef,\n multiSelectedValues,\n pillsToShow,\n pillGroupRef,\n width,\n widthInput,\n disabled,\n selectedValuesLength,\n isNonClearable,\n ]);\n\n return pillsToShow || 1;\n};\n\nexport { useGroupPills };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAiE;AACjE,0BAAmC;AACnC,yBAAgC;AAGhC,MAAM,sBAAsB,CAAC,mBAAmC;AAC9D,MAAI,mBAAmB;AAAG,WAAO;AACjC,QAAM,SAAS,eAAe,SAAS,EAAE;AACzC,SAAO,KAAK,SAAS,KAAK;AAC5B;AACA,MAAM,gBAAgB,MAAc;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,gBAAgB,UAAU,SAAS;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kCAAe;AAE9B,QAAM,sBAAsB;AAI5B,QAAM,uBAAuB,KAAK,IAAI,IAAI,oBAAoB,MAAM;AAEpE,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,oBAAoB;AACnE,QAAM,EAAE,MAAM,QAAI,wCAAmB,kBAAkB;AACvD,QAAM,EAAE,OAAO,WAAW,QAAI,wCAAmB,YAAY,IAAI;AACjE,8BAAU,MAAM;AACd,QAAI,yBAAyB,aAAa;AACxC,qBAAe,oBAAoB;AAAA,IACrC;AAAA,EAEF,GAAG,CAAC,sBAAsB,OAAO,UAAU,CAAC;AAE5C,oCAAgB,MAAM;AACpB,QAAI,mBAAmB,WAAW,aAAa,SAAS;AACtD,UAAI,aAAa;AAAS,qBAAa,QAAQ,MAAM,QAAQ;AAC7D,UAAI,cAAc;AAClB,UAAI,eAAe;AACnB,YAAM,iBAAiB,mBAAmB,QAAQ;AAClD,YAAM,QAA0B;AAAA,QAC9B,GAAG,aAAa,QAAQ;AAAA,UACtB,YAAY,iBAAiB,2BAA2B;AAAA,QAC1D;AAAA,MACF;AACA,YAAM,aAAa,MAAM,IAAI,CAAC,SAAS,MAAM,WAAW;AACxD,iBAAW,QAAQ,CAAC,WAAW,QAAQ;AACrC,wBAAgB;AAChB,YAAI,eAAe,oBAAoB,uBAAuB,MAAM,CAAC,KAAK,gBAAgB;AACxF,wBAAc;AAAA,QAChB;AAAA,MACF,CAAC;AAED,UAAI,EAAE,uBAAuB,KAAK,gBAAgB,uBAAuB;AACvE,cAAM,kBAAkB,cAAc;AAEtC,YAAI,oBAAoB,aAAa;AACnC,yBAAe,eAAe;AAAA,QAChC;AAAA,MACF;AAEA,UAAI,aAAa;AAAS,qBAAa,QAAQ,MAAM,QAAQ;AAAA,IAC/D;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,eAAe;AACxB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/parts/styled.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledA11ySelectedValues = styled.span`\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n border: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(100%);\n white-space: nowrap;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,2BAA2B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport type React from 'react';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSMaskT } from '@elliemae/ds-form-helpers-mask-hooks';\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n export interface CommonItemOptions {\n dsId: string;\n disabled?: boolean;\n render?: React.ComponentType<unknown>;\n }\n export interface ItemSeparatorOptions extends CommonItemOptions {\n type: 'separator';\n }\n\n export interface ItemSectionOptions extends CommonItemOptions {\n type: 'section';\n label: string;\n }\n\n export interface ItemOption extends CommonItemOptions {\n value: string;\n label: string;\n type: 'option';\n }\n\n export interface ItemCreatableOption extends CommonItemOptions {\n label: string;\n type: 'creatable';\n }\n\n export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n export interface PropsOptional {\n inputMinWidth?: number;\n menuMinWidth?: number;\n menuMaxHeight?: number;\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: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n zIndex?: number;\n isLoading?: boolean;\n }\n\n export interface RequiredProps {\n allOptions: OptionTypes[];\n selectedValues: SelectedOptionsT;\n onChange: (\n suggestedValue: ItemOption | OptionTypes[] | null,\n selectedOption: ItemOption,\n event: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n }\n export interface DefaultProps {\n startPlacementPreference: string;\n placementOrderPreference: string[];\n hasError: boolean;\n inline: boolean;\n withoutPortal: boolean;\n isNonClearable: boolean;\n disabled: boolean;\n noOptionsMessage: string;\n innerRef: React.RefObject<HTMLInputElement>;\n useMask: DSMaskT.Hook | typeof noop;\n onlySelectable: boolean;\n }\n\n export interface Props extends Partial<DefaultProps>, RequiredProps, PropsOptional {}\n\n export interface InternalProps extends DefaultProps, RequiredProps, PropsOptional {}\n}\n\nexport const ComboboxPropTypes = {\n ...globalAttributesPropTypes,\n placeholder: PropTypes.string.description(\"input's placeholder value\").defaultValue(''),\n allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n .isRequired.description('List of original options')\n .defaultValue([]),\n filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n .description('List of filtered options to show in the menu based on the current internal input filter value')\n .defaultValue([]),\n selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description(\n 'Array of option or single option selected',\n ),\n disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),\n autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),\n hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),\n noOptionsMessage: PropTypes.string\n .description('Custome message to be display when no matches found after filtering')\n .defaultValue('No Matches Found'),\n onChange: PropTypes.func.isRequired\n .description('function triggered when an option is selected it will send the options selected')\n .defaultValue('() => {}'),\n onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),\n onCreate: PropTypes.func\n .description(\n 'function triggered when user select \"create\" a new item whenever is not a match in the all option list',\n )\n .defaultValue(''),\n onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),\n onMenuChange: PropTypes.func\n .description('function triggered when user open or close the menu list')\n .defaultValue('() => {}'),\n inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),\n menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n withoutPortal: PropTypes.bool\n .description('Whether the combobox menu is rendered in a portal or not')\n .defaultValue(false),\n zIndex: PropTypes.number.description('The z-index of the combobox menu').defaultValue(10),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n 'reference to the component',\n ),\n onlySelectable: PropTypes.bool.description('filtering is disabled'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAqD;AAE9C,SAAS,QAA6B,OAAgB;AAAC;AAiFvD,MAAM,oBAAoB;AAAA,EAC/B,GAAG;AAAA,EACH,aAAa,kCAAU,OAAO,YAAY,2BAA2B,EAAE,aAAa,EAAE;AAAA,EACtF,YAAY,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EAChE,WAAW,YAAY,0BAA0B,EACjD,aAAa,CAAC,CAAC;AAAA,EAClB,iBAAiB,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,MAAM,CAAC,EACrE,YAAY,+FAA+F,EAC3G,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,GAAG,kCAAU,MAAM,CAAC,EAAE,WAAW;AAAA,IACtG;AAAA,EACF;AAAA,EACA,UAAU,kCAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,OAAO;AAAA,EAChG,WAAW,kCAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,OAAO;AAAA,EAC1G,UAAU,kCAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,OAAO;AAAA,EACnG,kBAAkB,kCAAU,OACzB,YAAY,qEAAqE,EACjF,aAAa,kBAAkB;AAAA,EAClC,UAAU,kCAAU,KAAK,WACtB,YAAY,iFAAiF,EAC7F,aAAa,UAAU;AAAA,EAC1B,UAAU,kCAAU,KAAK,YAAY,yDAAyD,EAAE,aAAa,EAAE;AAAA,EAC/G,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,EAAE;AAAA,EAClB,UAAU,kCAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,UAAU;AAAA,EAC1G,cAAc,kCAAU,KACrB,YAAY,0DAA0D,EACtE,aAAa,UAAU;AAAA,EAC1B,eAAe,kCAAU,IAAI,YAAY,kDAAkD,EAAE,aAAa,MAAS;AAAA,EACnH,cAAc,kCAAU,IAAI,YAAY,qCAAqC,EAAE,aAAa,MAAS;AAAA,EACrG,eAAe,kCAAU,IAAI,YAAY,sCAAsC,EAAE,aAAa,MAAS;AAAA,EACvG,eAAe,kCAAU,KACtB,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,QAAQ,kCAAU,OAAO,YAAY,kCAAkC,EAAE,aAAa,EAAE;AAAA,EACxF,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,EAAE,SAAS,kCAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AAAA,EACA,gBAAgB,kCAAU,KAAK,YAAY,uBAAuB;AACpE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/sharedTypes.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/sharedTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport type { DSComboboxT } from './react-desc-prop-types.js';\nimport { MENU_OPTION_TYPES } from './constants.js';\nexport declare namespace DSComboboxInternalsT {\n export interface ComboBoxContextT {\n props: DSComboboxT.InternalProps;\n internalRef: React.RefObject<HTMLInputElement>;\n virtualListHelpers?: ReturnType<typeof useVirtual>;\n menuState: boolean;\n setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;\n referenceElement: HTMLElement | null;\n setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n pillGroupRef: React.RefObject<HTMLDivElement>;\n scrollOptionIntoView: (dsId: string) => void;\n setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;\n hasFocus: boolean;\n listRef: React.RefObject<HTMLDivElement>;\n wrapperListRef: React.RefObject<HTMLDivElement>;\n inputValue: string;\n setInputValue: React.Dispatch<React.SetStateAction<string>>;\n selectedOptionsRef: React.RefObject<HTMLDivElement>;\n controlsWrapperRef: React.RefObject<HTMLDivElement>;\n selectAllCheckboxRef: React.RefObject<HTMLInputElement>;\n toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;\n focusOptionIdx: string;\n setFocusOptionIdx: React.Dispatch<React.SetStateAction<string>>;\n showSelectedOptions: boolean;\n setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;\n setMenuState: (\n newState: boolean,\n reason?: string,\n e?: React.KeyboardEvent | React.MouseEvent | React.ChangeEvent<HTMLInputElement>,\n ) => void;\n }\n}\n\nexport const isSeparator = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemSeparatorOptions =>\n el?.type === MENU_OPTION_TYPES.SEPARATOR;\n\nexport const isOption = (el: DSComboboxT.OptionTypes | undefined): el is DSComboboxT.ItemOption =>\n el?.type === MENU_OPTION_TYPES.OPTION;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAkC;AAkC3B,MAAM,cAAc,CAAC,OAC1B,IAAI,SAAS,mCAAkB;AAE1B,MAAM,WAAW,CAAC,OACvB,IAAI,SAAS,mCAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/tests/utils.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/tests/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const basicOptions = [\n {\n dsId: '1',\n type: 'option',\n value: 'id_1',\n label: 'Luke Skywalker too long this text is super long',\n },\n {\n dsId: '2',\n type: 'option',\n value: 'id_2',\n label: 'Obi-Wan Kenobi',\n },\n {\n dsId: '3',\n type: 'option',\n value: 'id_3',\n label: 'Padme Amidala',\n },\n {\n dsId: '4',\n type: 'option',\n value: 'id_4',\n label: 'Harry Potter',\n },\n];\n\nexport const groupedOptions = [\n {\n dsId: '1',\n type: 'option',\n value: 'id_1',\n label: 'Luke Skywalker too long this text is super long',\n },\n {\n dsId: '2',\n type: 'option',\n value: 'id_2',\n label: 'Obi-Wan Kenobi',\n },\n {\n dsId: 'separator',\n type: 'separator',\n },\n {\n dsId: 'section',\n type: 'section',\n label: 'Group A',\n },\n {\n dsId: '3',\n type: 'option',\n value: 'id_3',\n label: 'Padme Amidala',\n },\n];\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;AAEO,MAAM,iBAAiB;AAAA,EAC5B;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/theming.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
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.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
package/dist/cjs/theming.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/theming.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const DSComboBoxName = 'DSCombobox';\n\nexport const DSComboboxSlots = {\n CONTAINER: 'root',\n INPUT_WRAPPER: 'input-wrapper',\n INPUT: 'input',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,eAAe;AAAA,EACf,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|