@elliemae/ds-controlled-form 2.4.1-rc.1 → 2.4.1-rc.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/cjs/autocomplete/Autocomplete.js +4 -5
- package/cjs/autocomplete/AutocompleteCTX.js +3 -14
- package/cjs/autocomplete/AutocompleteDataTestids.js +1 -7
- package/cjs/autocomplete/config/useAutocomplete.js +23 -10
- package/cjs/autocomplete/parts/container/Container.js +36 -20
- package/cjs/autocomplete/parts/container/styled.js +1 -5
- package/cjs/autocomplete/parts/{controls → container}/useKeyboardNavigation.js +8 -24
- package/cjs/autocomplete/parts/menu-list/MenuList.js +17 -50
- package/cjs/autocomplete/parts/menu-list/styled.js +9 -10
- package/cjs/autocomplete/parts/menu-list/useItemRenderer.js +38 -44
- package/cjs/autocomplete/react-desc-prop-types.js +4 -8
- package/cjs/autocomplete/utils/listHelper.js +8 -16
- package/cjs/checkbox/ControlledCheckbox.js +2 -1
- package/cjs/checkbox/react-desc-prop-types.js +2 -0
- package/cjs/combobox/ComboBox.js +1 -0
- package/cjs/combobox/config/useComboBox.js +8 -2
- package/cjs/combobox/config/useCorrectOptions.js +14 -42
- package/cjs/combobox/index.js +1 -0
- package/cjs/combobox/parts/A11yFocusedOption.js +3 -3
- package/cjs/combobox/parts/controls/Controls.js +4 -2
- package/cjs/combobox/parts/controls-input/ControlsInput.js +2 -0
- package/cjs/combobox/parts/controls-input/styled.js +1 -1
- package/cjs/combobox/parts/controls-input/useControlsInput.js +6 -6
- package/cjs/combobox/parts/controls-input/useKeyboardNavigation.js +30 -26
- package/cjs/combobox/parts/controls-input/useMaskedOnChange.js +7 -5
- package/cjs/combobox/parts/dropdown-indicator/DropdownIndicator.js +6 -4
- package/cjs/combobox/parts/header-list/useHeaderListHandlers.js +4 -4
- package/cjs/combobox/parts/menu-list/MenuList.js +13 -7
- package/cjs/combobox/parts/menu-list/styled.js +16 -5
- package/cjs/combobox/parts/menu-list/useItemRenderer.js +8 -8
- package/cjs/combobox/parts/menu-list/useMenuListSetFocusOption.js +6 -6
- package/cjs/combobox/react-desc-prop-types.js +2 -1
- package/cjs/combobox/utils/listHelper.js +40 -11
- package/cjs/date-time-picker/ControlledDateTimePickerCTX.js +1 -114
- package/cjs/date-time-picker/ControlledDateTimePickerDatatestid.js +0 -2
- package/cjs/date-time-picker/config/useChangeHandlers.js +264 -0
- package/cjs/date-time-picker/config/useControlledDateTimePicker.js +37 -420
- package/cjs/date-time-picker/config/useGetDestructuredValues.js +25 -68
- package/cjs/date-time-picker/config/useGetFlags.js +173 -0
- package/cjs/date-time-picker/config/useGetPropsBasedOnType.js +101 -0
- package/cjs/date-time-picker/config/useGetPropsWithDefault.js +2 -3
- package/cjs/date-time-picker/config/useGetReferences.js +86 -0
- package/cjs/date-time-picker/config/useGlobalKeyHandlers.js +106 -0
- package/cjs/date-time-picker/config/useRelevantValueFromProps.js +39 -0
- package/cjs/date-time-picker/config/useValidateProps.js +47 -42
- package/cjs/date-time-picker/parts/ClearButton/ClearButton.js +20 -8
- package/cjs/date-time-picker/parts/ControlledDateTimePickerContent.js +14 -12
- package/cjs/date-time-picker/parts/DateInputs/useDateInputs.js +5 -5
- package/cjs/date-time-picker/parts/Pickers/Calendar/Calendar.js +11 -13
- package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarContent.js +4 -1
- package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarContext.js +1 -49
- package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarDaysList.js +4 -4
- package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarHead.js +10 -7
- package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js +8 -4
- package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarMonthDays.js +5 -2
- package/cjs/date-time-picker/parts/Pickers/Calendar/CalendarWrapper.js +5 -2
- package/cjs/date-time-picker/parts/Pickers/Calendar/Day.js +18 -18
- package/cjs/date-time-picker/parts/Pickers/Calendar/useConfigCalendarCTX.js +24 -122
- package/cjs/date-time-picker/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js +32 -4
- package/cjs/date-time-picker/parts/Pickers/Calendar/useFocusLogic.js +10 -6
- package/cjs/date-time-picker/parts/Pickers/Calendar/useKeyboardHandlers.js +30 -14
- package/cjs/date-time-picker/parts/Pickers/Calendar/usePopperTriggerLogic.js +7 -4
- package/cjs/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.js +7 -3
- package/cjs/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.js +1 -16
- package/cjs/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js +0 -1
- package/cjs/date-time-picker/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js +10 -10
- package/cjs/date-time-picker/parts/Pickers/TimeWheel/HoursList.js +18 -13
- package/cjs/date-time-picker/parts/Pickers/TimeWheel/MeridiemList.js +60 -33
- package/cjs/date-time-picker/parts/Pickers/TimeWheel/MinutesList.js +18 -13
- package/cjs/date-time-picker/parts/Pickers/TimeWheel/TimeWheel.js +11 -13
- package/cjs/date-time-picker/parts/Pickers/TimeWheel/TimeWheelContent.js +5 -2
- package/cjs/date-time-picker/parts/Pickers/TimeWheel/TimeWheelContext.js +1 -65
- package/cjs/date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js +8 -3
- package/cjs/date-time-picker/parts/Pickers/TimeWheel/TimeWheelWrapper.js +5 -2
- package/cjs/date-time-picker/parts/Pickers/TimeWheel/useConfigTimePickerCTX.js +18 -116
- package/cjs/date-time-picker/parts/Pickers/TimeWheel/useCurrentDisplayedWheelsLogic.js +52 -94
- package/cjs/date-time-picker/parts/Pickers/TimeWheel/useKeyboardHandlers.js +4 -1
- package/cjs/date-time-picker/parts/Pickers/TimeWheel/usePopperTriggerLogic.js +1 -1
- package/cjs/date-time-picker/parts/TimeInputs/HHInput.js +1 -3
- package/cjs/date-time-picker/parts/TimeInputs/MeridiemInput.js +1 -1
- package/cjs/date-time-picker/parts/TimeInputs/TimeInputs.js +3 -7
- package/cjs/date-time-picker/parts/TimeInputs/useTimeInputs.js +3 -6
- package/cjs/date-time-picker/propTypes.js +56 -23
- package/cjs/{autocomplete/index.d.js → date-time-picker/sharedTypes.js} +0 -0
- package/cjs/date-time-picker/utils/dateHelpers.js +56 -56
- package/cjs/date-time-picker/utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js +2 -5
- package/cjs/date-time-picker/utils/hooks/useGetStartingFocusedDay.js +50 -47
- package/cjs/date-time-picker/utils/hooks/useOnClickOutside.js +1 -2
- package/cjs/date-time-picker/utils/stringHelpers.js +8 -14
- package/cjs/date-time-picker/utils/typeGuards.js +14 -0
- package/cjs/index.js +20 -3
- package/cjs/large-text-input/DSControlledLargeTextInput.js +83 -0
- package/cjs/large-text-input/exported-related/data-test-ids.js +11 -0
- package/cjs/large-text-input/exported-related/index.js +12 -0
- package/cjs/large-text-input/exported-related/theming.js +13 -0
- package/cjs/large-text-input/index.js +15 -0
- package/cjs/large-text-input/react-desc-prop-types.js +45 -0
- package/cjs/large-text-input/styles.js +40 -0
- package/cjs/mask-hook/hooks/index.js +11 -3
- package/cjs/mask-hook/hooks/useNumberMask.js +7 -0
- package/cjs/mask-hook/hooks/usePhoneMask.js +7 -0
- package/cjs/mask-hook/hooks/useRegExpMask.js +122 -0
- package/cjs/mask-hook/hooks/useSSNMask.js +7 -0
- package/cjs/mask-hook/hooks/{useZipCode.js → useZipCodeMask.js} +12 -5
- package/cjs/mask-hook/index.js +11 -3
- package/cjs/mask-hook/react-desc-prop-types.js +9 -0
- package/cjs/mask-hook/utils/addSpecialCharacters.js +3 -4
- package/cjs/mask-hook/utils/flatStringArray.js +18 -0
- package/cjs/mask-hook/utils/index.js +2 -0
- package/esm/autocomplete/Autocomplete.js +2 -3
- package/esm/autocomplete/AutocompleteCTX.js +3 -14
- package/esm/autocomplete/AutocompleteDataTestids.js +1 -7
- package/esm/autocomplete/config/useAutocomplete.js +27 -14
- package/esm/autocomplete/parts/container/Container.js +38 -23
- package/esm/autocomplete/parts/container/styled.js +2 -5
- package/esm/autocomplete/parts/{controls → container}/useKeyboardNavigation.js +8 -24
- package/esm/autocomplete/parts/menu-list/MenuList.js +19 -52
- package/esm/autocomplete/parts/menu-list/styled.js +9 -10
- package/esm/autocomplete/parts/menu-list/useItemRenderer.js +39 -45
- package/esm/autocomplete/react-desc-prop-types.js +5 -8
- package/esm/autocomplete/utils/listHelper.js +8 -16
- package/esm/checkbox/ControlledCheckbox.js +2 -1
- package/esm/checkbox/react-desc-prop-types.js +2 -0
- package/esm/combobox/ComboBox.js +1 -1
- package/esm/combobox/config/useComboBox.js +8 -2
- package/esm/combobox/config/useCorrectOptions.js +15 -43
- package/esm/combobox/index.js +1 -1
- package/esm/combobox/parts/A11yFocusedOption.js +3 -3
- package/esm/combobox/parts/controls/Controls.js +4 -2
- package/esm/combobox/parts/controls-input/ControlsInput.js +2 -0
- package/esm/combobox/parts/controls-input/styled.js +1 -1
- package/esm/combobox/parts/controls-input/useControlsInput.js +6 -6
- package/esm/combobox/parts/controls-input/useKeyboardNavigation.js +30 -26
- package/esm/combobox/parts/controls-input/useMaskedOnChange.js +7 -5
- package/esm/combobox/parts/dropdown-indicator/DropdownIndicator.js +2 -2
- package/esm/combobox/parts/header-list/useHeaderListHandlers.js +4 -4
- package/esm/combobox/parts/menu-list/MenuList.js +13 -7
- package/esm/combobox/parts/menu-list/styled.js +16 -5
- package/esm/combobox/parts/menu-list/useItemRenderer.js +8 -8
- package/esm/combobox/parts/menu-list/useMenuListSetFocusOption.js +6 -6
- package/esm/combobox/react-desc-prop-types.js +2 -1
- package/esm/combobox/utils/listHelper.js +38 -12
- package/esm/date-time-picker/ControlledDateTimePickerCTX.js +3 -115
- package/esm/date-time-picker/ControlledDateTimePickerDatatestid.js +0 -2
- package/esm/date-time-picker/config/useChangeHandlers.js +256 -0
- package/esm/date-time-picker/config/useControlledDateTimePicker.js +38 -421
- package/esm/date-time-picker/config/useGetDestructuredValues.js +21 -68
- package/esm/date-time-picker/config/useGetFlags.js +165 -0
- package/esm/date-time-picker/config/useGetPropsBasedOnType.js +97 -0
- package/esm/date-time-picker/config/useGetPropsWithDefault.js +1 -2
- package/esm/date-time-picker/config/useGetReferences.js +82 -0
- package/esm/date-time-picker/config/useGlobalKeyHandlers.js +98 -0
- package/esm/date-time-picker/config/useRelevantValueFromProps.js +35 -0
- package/esm/date-time-picker/config/useValidateProps.js +47 -42
- package/esm/date-time-picker/parts/ClearButton/ClearButton.js +20 -9
- package/esm/date-time-picker/parts/ControlledDateTimePickerContent.js +14 -12
- package/esm/date-time-picker/parts/DateInputs/useDateInputs.js +5 -5
- package/esm/date-time-picker/parts/Pickers/Calendar/Calendar.js +11 -13
- package/esm/date-time-picker/parts/Pickers/Calendar/CalendarContent.js +4 -1
- package/esm/date-time-picker/parts/Pickers/Calendar/CalendarContext.js +2 -50
- package/esm/date-time-picker/parts/Pickers/Calendar/CalendarDaysList.js +4 -4
- package/esm/date-time-picker/parts/Pickers/Calendar/CalendarHead.js +10 -7
- package/esm/date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js +9 -5
- package/esm/date-time-picker/parts/Pickers/Calendar/CalendarMonthDays.js +5 -2
- package/esm/date-time-picker/parts/Pickers/Calendar/CalendarWrapper.js +5 -2
- package/esm/date-time-picker/parts/Pickers/Calendar/Day.js +18 -18
- package/esm/date-time-picker/parts/Pickers/Calendar/useConfigCalendarCTX.js +23 -125
- package/esm/date-time-picker/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.js +33 -5
- package/esm/date-time-picker/parts/Pickers/Calendar/useFocusLogic.js +10 -6
- package/esm/date-time-picker/parts/Pickers/Calendar/useKeyboardHandlers.js +30 -14
- package/esm/date-time-picker/parts/Pickers/Calendar/usePopperTriggerLogic.js +7 -4
- package/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheel.js +9 -5
- package/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.js +1 -16
- package/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelIconTrigger.js +1 -2
- package/esm/date-time-picker/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.js +10 -10
- package/esm/date-time-picker/parts/Pickers/TimeWheel/HoursList.js +18 -13
- package/esm/date-time-picker/parts/Pickers/TimeWheel/MeridiemList.js +59 -33
- package/esm/date-time-picker/parts/Pickers/TimeWheel/MinutesList.js +18 -13
- package/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheel.js +11 -13
- package/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelContent.js +5 -2
- package/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelContext.js +2 -66
- package/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelIconTrigger.js +8 -3
- package/esm/date-time-picker/parts/Pickers/TimeWheel/TimeWheelWrapper.js +5 -2
- package/esm/date-time-picker/parts/Pickers/TimeWheel/useConfigTimePickerCTX.js +15 -117
- package/esm/date-time-picker/parts/Pickers/TimeWheel/useCurrentDisplayedWheelsLogic.js +54 -96
- package/esm/date-time-picker/parts/Pickers/TimeWheel/useKeyboardHandlers.js +4 -1
- package/esm/date-time-picker/parts/Pickers/TimeWheel/usePopperTriggerLogic.js +1 -1
- package/esm/date-time-picker/parts/TimeInputs/HHInput.js +1 -3
- package/esm/date-time-picker/parts/TimeInputs/MeridiemInput.js +1 -1
- package/esm/date-time-picker/parts/TimeInputs/TimeInputs.js +3 -7
- package/esm/date-time-picker/parts/TimeInputs/useTimeInputs.js +3 -6
- package/esm/date-time-picker/propTypes.js +49 -17
- package/esm/{autocomplete/index.d.js → date-time-picker/sharedTypes.js} +0 -0
- package/esm/date-time-picker/utils/dateHelpers.js +57 -57
- package/esm/date-time-picker/utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js +2 -5
- package/esm/date-time-picker/utils/hooks/useGetStartingFocusedDay.js +46 -47
- package/esm/date-time-picker/utils/hooks/useOnClickOutside.js +1 -2
- package/esm/date-time-picker/utils/stringHelpers.js +8 -14
- package/esm/date-time-picker/utils/typeGuards.js +8 -0
- package/esm/index.js +9 -5
- package/esm/large-text-input/DSControlledLargeTextInput.js +72 -0
- package/esm/large-text-input/exported-related/data-test-ids.js +7 -0
- package/esm/large-text-input/exported-related/index.js +2 -0
- package/esm/large-text-input/exported-related/theming.js +8 -0
- package/esm/large-text-input/index.js +3 -0
- package/esm/large-text-input/react-desc-prop-types.js +36 -0
- package/esm/large-text-input/styles.js +30 -0
- package/esm/mask-hook/hooks/index.js +5 -4
- package/esm/mask-hook/hooks/useNumberMask.js +7 -1
- package/esm/mask-hook/hooks/usePhoneMask.js +7 -1
- package/esm/mask-hook/hooks/useRegExpMask.js +116 -0
- package/esm/mask-hook/hooks/useSSNMask.js +7 -1
- package/esm/mask-hook/hooks/{useZipCode.js → useZipCodeMask.js} +11 -5
- package/esm/mask-hook/index.js +5 -4
- package/esm/mask-hook/react-desc-prop-types.js +8 -1
- package/esm/mask-hook/utils/addSpecialCharacters.js +3 -4
- package/esm/mask-hook/utils/flatStringArray.js +14 -0
- package/esm/mask-hook/utils/index.js +1 -0
- package/package.json +92 -88
- package/types/autocomplete/Autocomplete.d.ts +4 -61
- package/types/autocomplete/AutocompleteCTX.d.ts +4 -3
- package/types/autocomplete/AutocompleteDataTestids.d.ts +1 -7
- package/types/autocomplete/config/useAutocomplete.d.ts +3 -2
- package/types/autocomplete/parts/container/Container.d.ts +1 -2
- package/types/autocomplete/parts/container/styled.d.ts +0 -1
- package/types/autocomplete/parts/{controls → container}/useKeyboardNavigation.d.ts +0 -0
- package/types/autocomplete/parts/menu-list/MenuList.d.ts +1 -2
- package/types/autocomplete/parts/menu-list/styled.d.ts +1 -4
- package/types/autocomplete/parts/menu-list/useItemRenderer.d.ts +2 -3
- package/types/autocomplete/react-desc-prop-types.d.ts +8 -18
- package/types/autocomplete/sharedTypes.d.ts +1 -3
- package/types/autocomplete/tests/general.test.d.ts +1 -0
- package/types/autocomplete/tests/utils.d.ts +5 -0
- package/types/autocomplete/utils/listHelper.d.ts +2 -2
- package/types/checkbox/ControlledCheckbox.d.ts +1 -1
- package/types/checkbox/react-desc-prop-types.d.ts +367 -1
- package/types/combobox/ComboBox.d.ts +2 -2
- package/types/combobox/parts/dropdown-indicator/DropdownIndicator.d.ts +1 -0
- package/types/combobox/react-desc-prop-types.d.ts +381 -3
- package/types/combobox/utils/listHelper.d.ts +4 -1
- package/types/date-time-picker/ControlledDateTimePicker.d.ts +25 -80
- package/types/date-time-picker/ControlledDateTimePickerCTX.d.ts +1 -2
- package/types/date-time-picker/ControlledDateTimePickerDatatestid.d.ts +46 -46
- package/types/date-time-picker/ControlledDateTimePickerTypes.d.ts +15 -15
- package/types/date-time-picker/config/useChangeHandlers.d.ts +25 -0
- package/types/date-time-picker/config/useControlledDateTimePicker.d.ts +18 -2
- package/types/date-time-picker/config/useGetDestructuredValues.d.ts +30 -4
- package/types/date-time-picker/config/useGetFlags.d.ts +27 -0
- package/types/date-time-picker/config/useGetPropsBasedOnType.d.ts +28 -0
- package/types/date-time-picker/config/useGetPropsWithDefault.d.ts +2 -2
- package/types/date-time-picker/config/useGetReferences.d.ts +39 -0
- package/types/date-time-picker/config/useGlobalKeyHandlers.d.ts +16 -0
- package/types/date-time-picker/config/useRelevantValueFromProps.d.ts +10 -0
- package/types/date-time-picker/config/useValidateProps.d.ts +2 -2
- package/types/date-time-picker/parts/ClearButton/useClearButton.d.ts +6 -6
- package/types/date-time-picker/parts/DateInputs/DDInput.d.ts +6 -6
- package/types/date-time-picker/parts/DateInputs/MMInput.d.ts +6 -6
- package/types/date-time-picker/parts/DateInputs/YYYYInput.d.ts +6 -6
- package/types/date-time-picker/parts/DateInputs/useDateInputs.d.ts +2 -2
- package/types/date-time-picker/parts/Pickers/Calendar/Calendar.d.ts +4 -2
- package/types/date-time-picker/parts/Pickers/Calendar/CalendarContext.d.ts +3 -63
- package/types/date-time-picker/parts/Pickers/Calendar/CalendarDaysList.d.ts +4 -4
- package/types/date-time-picker/parts/Pickers/Calendar/CalendarFooter.d.ts +2 -2
- package/types/date-time-picker/parts/Pickers/Calendar/Day.d.ts +2 -2
- package/types/date-time-picker/parts/Pickers/Calendar/useCurrentDisplayedMonthYearLogic.d.ts +15 -2
- package/types/date-time-picker/parts/Pickers/Calendar/useFocusLogic.d.ts +12 -5
- package/types/date-time-picker/parts/Pickers/Calendar/useKeyboardHandlers.d.ts +17 -11
- package/types/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelContext.d.ts +1 -16
- package/types/date-time-picker/parts/Pickers/CalendarWithTimeWheel/CalendarWithTimeWheelFooter.d.ts +2 -2
- package/types/date-time-picker/parts/Pickers/CalendarWithTimeWheel/useConfigCalendarWithTimeWheelCTX.d.ts +15 -1
- package/types/date-time-picker/parts/Pickers/TimeWheel/TimeWheel.d.ts +4 -2
- package/types/date-time-picker/parts/Pickers/TimeWheel/TimeWheelContext.d.ts +3 -62
- package/types/date-time-picker/parts/Pickers/TimeWheel/TimeWheelFooter.d.ts +2 -2
- package/types/date-time-picker/parts/Pickers/TimeWheel/useConfigTimePickerCTX.d.ts +4 -1
- package/types/date-time-picker/parts/Pickers/TimeWheel/useCurrentDisplayedWheelsLogic.d.ts +16 -5
- package/types/date-time-picker/parts/Pickers/TimeWheel/useKeyboardHandlers.d.ts +18 -3
- package/types/date-time-picker/parts/TimeInputs/HHInput.d.ts +6 -6
- package/types/date-time-picker/parts/TimeInputs/MeridiemInput.d.ts +6 -6
- package/types/date-time-picker/parts/TimeInputs/MinutesInput.d.ts +6 -6
- package/types/date-time-picker/parts/TimeInputs/useTimeInputs.d.ts +22 -2
- package/types/date-time-picker/parts/config.d.ts +3 -3
- package/types/date-time-picker/sharedTypes.d.ts +94 -0
- package/types/date-time-picker/utils/constants.d.ts +33 -33
- package/types/date-time-picker/utils/dateHelpers.d.ts +15 -14
- package/types/date-time-picker/utils/dateTimeHelpers.d.ts +3 -3
- package/types/date-time-picker/utils/hooks/useGetDayFromDateString.d.ts +1 -1
- package/types/date-time-picker/utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.d.ts +2 -2
- package/types/date-time-picker/utils/hooks/useGetStartingFocusedDay.d.ts +6 -6
- package/types/date-time-picker/utils/hooks/useOnClickOutside.d.ts +1 -1
- package/types/date-time-picker/utils/timeHelpers.d.ts +2 -2
- package/types/date-time-picker/utils/typeGuards.d.ts +4 -0
- package/types/index.d.ts +1 -0
- package/types/large-text-input/DSControlledLargeTextInput.d.ts +5 -0
- package/types/large-text-input/exported-related/data-test-ids.d.ts +5 -0
- package/types/large-text-input/exported-related/index.d.ts +2 -0
- package/types/large-text-input/exported-related/theming.d.ts +6 -0
- package/types/large-text-input/index.d.ts +2 -0
- package/types/large-text-input/react-desc-prop-types.d.ts +447 -0
- package/types/large-text-input/styles.d.ts +3 -0
- package/types/large-text-input/tests/DSControlledLargeTextInput.test.d.ts +1 -0
- package/types/mask-hook/hooks/index.d.ts +2 -1
- package/types/mask-hook/hooks/useNumberMask.d.ts +2 -1
- package/types/mask-hook/hooks/usePhoneMask.d.ts +2 -1
- package/types/mask-hook/hooks/useRegExpMask.d.ts +4 -0
- package/types/mask-hook/hooks/useSSNMask.d.ts +2 -1
- package/types/mask-hook/hooks/useZipCodeMask.d.ts +4 -0
- package/types/mask-hook/react-desc-prop-types.d.ts +6 -1
- package/types/mask-hook/tests/useRegExpMask.test.d.ts +1 -0
- package/types/mask-hook/utils/flatStringArray.d.ts +1 -0
- package/types/mask-hook/utils/index.d.ts +1 -0
- package/types/text-input/DSInputText.d.ts +1 -1
- package/types/text-input/config/useInputText.d.ts +110 -110
- package/cjs/autocomplete/config/constants.js +0 -14
- package/cjs/autocomplete/config/useGetPropsWithDefault.js +0 -11
- package/cjs/autocomplete/parts/a11y-messages/MultiAllyMessages.js +0 -33
- package/cjs/autocomplete/parts/a11y-messages/SingleAllyMessages.js +0 -28
- package/cjs/autocomplete/parts/a11y-messages/index.js +0 -11
- package/cjs/autocomplete/parts/a11y-messages/styled.js +0 -15
- package/cjs/autocomplete/parts/controls/Controls.js +0 -63
- package/cjs/autocomplete/parts/controls/index.js +0 -9
- package/cjs/autocomplete/parts/controls/styled.js +0 -44
- package/cjs/autocomplete/parts/controls/useControlsInput.js +0 -44
- package/cjs/autocomplete/parts/controls/useMaskedOnChange.js +0 -28
- package/cjs/autocomplete/parts/menu-list/useMenuList.js +0 -69
- package/cjs/autocomplete/propTypes.js +0 -25
- package/cjs/autocomplete/utils/hooks/useKeyboardNavigation.js +0 -97
- package/cjs/autocomplete/utils/hooks/useOnElementResize.js +0 -37
- package/cjs/text-input/exported-related/name.js +0 -7
- package/cjs/text-input/exported-related/slots.js +0 -11
- package/esm/autocomplete/config/constants.js +0 -10
- package/esm/autocomplete/config/useGetPropsWithDefault.js +0 -7
- package/esm/autocomplete/parts/a11y-messages/MultiAllyMessages.js +0 -25
- package/esm/autocomplete/parts/a11y-messages/SingleAllyMessages.js +0 -20
- package/esm/autocomplete/parts/a11y-messages/index.js +0 -2
- package/esm/autocomplete/parts/a11y-messages/styled.js +0 -7
- package/esm/autocomplete/parts/controls/Controls.js +0 -55
- package/esm/autocomplete/parts/controls/index.js +0 -1
- package/esm/autocomplete/parts/controls/styled.js +0 -32
- package/esm/autocomplete/parts/controls/useControlsInput.js +0 -40
- package/esm/autocomplete/parts/controls/useMaskedOnChange.js +0 -24
- package/esm/autocomplete/parts/menu-list/useMenuList.js +0 -65
- package/esm/autocomplete/propTypes.js +0 -21
- package/esm/autocomplete/utils/hooks/useKeyboardNavigation.js +0 -93
- package/esm/autocomplete/utils/hooks/useOnElementResize.js +0 -33
- package/esm/text-input/exported-related/name.js +0 -3
- package/esm/text-input/exported-related/slots.js +0 -7
- package/types/autocomplete/config/constants.d.ts +0 -8
- package/types/autocomplete/config/useGetPropsWithDefault.d.ts +0 -2
- package/types/autocomplete/parts/a11y-messages/MultiAllyMessages.d.ts +0 -3
- package/types/autocomplete/parts/a11y-messages/SingleAllyMessages.d.ts +0 -3
- package/types/autocomplete/parts/a11y-messages/index.d.ts +0 -2
- package/types/autocomplete/parts/a11y-messages/styled.d.ts +0 -1
- package/types/autocomplete/parts/controls/Controls.d.ts +0 -3
- package/types/autocomplete/parts/controls/index.d.ts +0 -1
- package/types/autocomplete/parts/controls/styled.d.ts +0 -8
- package/types/autocomplete/parts/controls/useControlsInput.d.ts +0 -9
- package/types/autocomplete/parts/controls/useMaskedOnChange.d.ts +0 -2
- package/types/autocomplete/parts/menu-list/useMenuList.d.ts +0 -2
- package/types/autocomplete/propTypes.d.ts +0 -51
- package/types/autocomplete/utils/hooks/useKeyboardNavigation.d.ts +0 -4
- package/types/autocomplete/utils/hooks/useOnElementResize.d.ts +0 -3
- package/types/date-time-picker/parts/Pickers/Calendar/useConfigCalendarCTX.d.ts +0 -2
- package/types/date-time-picker/parts/Pickers/Calendar/usePopperTriggerLogic.d.ts +0 -12
- package/types/date-time-picker/parts/Pickers/TimeWheel/usePopperTriggerLogic.d.ts +0 -2
- package/types/date-time-picker/propTypes.d.ts +0 -81
- package/types/mask-hook/hooks/useZipCode.d.ts +0 -3
- package/types/text-input/exported-related/name.d.ts +0 -1
- package/types/text-input/exported-related/slots.d.ts +0 -5
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var AutocompleteCTX = require('../../AutocompleteCTX.js');
|
|
7
|
-
|
|
8
|
-
const useMaskedOnChange = () => {
|
|
9
|
-
const {
|
|
10
|
-
props: {
|
|
11
|
-
useMask,
|
|
12
|
-
onChange
|
|
13
|
-
},
|
|
14
|
-
setShowPopover
|
|
15
|
-
} = React.useContext(AutocompleteCTX.AutocompleteContext); // default onchange when no mask provided
|
|
16
|
-
|
|
17
|
-
const handleOnChange = React.useCallback(e => {
|
|
18
|
-
setShowPopover(true);
|
|
19
|
-
onChange(e.target.value);
|
|
20
|
-
}, [onChange, setShowPopover]);
|
|
21
|
-
const onChangeMask = useMask({
|
|
22
|
-
valueSetter: setInputValue,
|
|
23
|
-
onChange: handleOnChange
|
|
24
|
-
});
|
|
25
|
-
return (onChangeMask === null || onChangeMask === void 0 ? void 0 : onChangeMask.onChange) || handleOnChange;
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
exports.useMaskedOnChange = useMaskedOnChange;
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var AutocompleteCTX = require('../../AutocompleteCTX.js');
|
|
7
|
-
|
|
8
|
-
const useMenuList = () => {
|
|
9
|
-
var _inputRef$current3;
|
|
10
|
-
|
|
11
|
-
const {
|
|
12
|
-
props: {
|
|
13
|
-
selectedValues,
|
|
14
|
-
onMenuOpen,
|
|
15
|
-
options
|
|
16
|
-
},
|
|
17
|
-
inputRef,
|
|
18
|
-
setCurrentOption,
|
|
19
|
-
scrollOptionIntoView,
|
|
20
|
-
setShowPopover,
|
|
21
|
-
showPopover
|
|
22
|
-
} = React.useContext(AutocompleteCTX.AutocompleteContext);
|
|
23
|
-
React.useEffect(() => {
|
|
24
|
-
var _inputRef$current;
|
|
25
|
-
|
|
26
|
-
if (options.length === 0 || ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) === '') {
|
|
27
|
-
setShowPopover(false);
|
|
28
|
-
}
|
|
29
|
-
}, [options, inputRef, setShowPopover]);
|
|
30
|
-
React.useEffect(() => {
|
|
31
|
-
const getFirstOption = () => {
|
|
32
|
-
for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type)) {
|
|
33
|
-
setCurrentOption(options[i].dsId);
|
|
34
|
-
break;
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
if (showPopover) {
|
|
39
|
-
var _inputRef$current2;
|
|
40
|
-
|
|
41
|
-
onMenuOpen();
|
|
42
|
-
|
|
43
|
-
if (((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value) !== '') {
|
|
44
|
-
getFirstOption();
|
|
45
|
-
} else if (Array.isArray(selectedValues)) {
|
|
46
|
-
const multiSelectedValues = selectedValues;
|
|
47
|
-
|
|
48
|
-
if (multiSelectedValues.length > 0) {
|
|
49
|
-
setCurrentOption(multiSelectedValues[multiSelectedValues.length - 1].dsId);
|
|
50
|
-
scrollOptionIntoView(multiSelectedValues[multiSelectedValues.length - 1].dsId);
|
|
51
|
-
} else {
|
|
52
|
-
getFirstOption();
|
|
53
|
-
}
|
|
54
|
-
} else {
|
|
55
|
-
const singleSelectedValue = selectedValues;
|
|
56
|
-
|
|
57
|
-
if (singleSelectedValue) {
|
|
58
|
-
setCurrentOption(selectedValues.dsId);
|
|
59
|
-
scrollOptionIntoView(selectedValues.dsId);
|
|
60
|
-
} else {
|
|
61
|
-
getFirstOption();
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
65
|
-
|
|
66
|
-
}, [showPopover, (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value]);
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
exports.useMenuList = useMenuList;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var reactDesc = require('react-desc');
|
|
6
|
-
|
|
7
|
-
const propTypes = {
|
|
8
|
-
placeholder: reactDesc.PropTypes.string.description('input s placeholder value').defaultValue(''),
|
|
9
|
-
options: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.array, reactDesc.PropTypes.object]).description('List of options').defaultValue([]),
|
|
10
|
-
selectedValues: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object), reactDesc.PropTypes.object, reactDesc.PropTypes.string]).description('Array of option or single option selected'),
|
|
11
|
-
autoFocus: reactDesc.PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
|
|
12
|
-
hasError: reactDesc.PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
|
|
13
|
-
onChange: reactDesc.PropTypes.func.description('function triggered when an option is selected it will send the options selected').defaultValue(''),
|
|
14
|
-
onSelectAll: reactDesc.PropTypes.func.description('function triggered when ALL button is selected from the header menu list').defaultValue(''),
|
|
15
|
-
onFilter: reactDesc.PropTypes.func.description('function triggered when user type in the autocomplete input').defaultValue(''),
|
|
16
|
-
onCreate: reactDesc.PropTypes.func.description('function triggered when user select "create" a new item whenever is not a match in the all option list').defaultValue(''),
|
|
17
|
-
onClearAll: reactDesc.PropTypes.func.description('function triggered when user select CLEAR button from the header menu list').defaultValue(''),
|
|
18
|
-
onMenuOpen: reactDesc.PropTypes.func.description('function triggered when user open the menu list').defaultValue(''),
|
|
19
|
-
inputMinWidth: reactDesc.PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),
|
|
20
|
-
menuMinWidth: reactDesc.PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),
|
|
21
|
-
menuMaxHeight: reactDesc.PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),
|
|
22
|
-
withToggle: reactDesc.PropTypes.bool.description('POC purpose this prop will not remain').defaultValue('false')
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
exports.propTypes = propTypes;
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
require('core-js/modules/esnext.async-iterator.find.js');
|
|
6
|
-
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
-
require('core-js/modules/esnext.iterator.find.js');
|
|
8
|
-
var React = require('react');
|
|
9
|
-
var AutocompleteCTX = require('../../AutocompleteCTX.js');
|
|
10
|
-
var listHelper = require('../listHelper.js');
|
|
11
|
-
|
|
12
|
-
const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type);
|
|
13
|
-
|
|
14
|
-
const useKeyboardNavigation = () => {
|
|
15
|
-
const {
|
|
16
|
-
props: {
|
|
17
|
-
onKeyDown,
|
|
18
|
-
onChange,
|
|
19
|
-
options,
|
|
20
|
-
onFilter
|
|
21
|
-
},
|
|
22
|
-
setShowPopover,
|
|
23
|
-
showPopover,
|
|
24
|
-
focusOptionIdx,
|
|
25
|
-
inputRef,
|
|
26
|
-
setCurrentOption,
|
|
27
|
-
scrollOptionIntoView
|
|
28
|
-
} = React.useContext(AutocompleteCTX.AutocompleteContext);
|
|
29
|
-
const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
|
|
30
|
-
const currentItem = options.find(item => item.dsId === focusOptionIdx);
|
|
31
|
-
const selectOption = React.useCallback(() => {
|
|
32
|
-
if (inputRef.current) inputRef.current.value = currentItem.label;
|
|
33
|
-
if (onFilter) onFilter(currentItem.label);
|
|
34
|
-
onChange(currentItem.label);
|
|
35
|
-
setShowPopover(false);
|
|
36
|
-
}, [currentItem, setShowPopover, onFilter, inputRef, onChange]);
|
|
37
|
-
const onInputKeyDown = React.useCallback(e => {
|
|
38
|
-
const targetElement = e.target; // =============================================================================
|
|
39
|
-
// CUSTOM KEYS
|
|
40
|
-
// =============================================================================
|
|
41
|
-
|
|
42
|
-
onKeyDown(e, currentItem); // =============================================================================
|
|
43
|
-
// ENTER AND SPACE KEY SELECT OPTIONS AND OPEN CLOSE THE POPOVER
|
|
44
|
-
// =============================================================================
|
|
45
|
-
|
|
46
|
-
if (e.keyCode === 32 && targetElement.value === '' || e.key === 'Enter') {
|
|
47
|
-
if (showPopover) {
|
|
48
|
-
e.preventDefault();
|
|
49
|
-
selectOption();
|
|
50
|
-
}
|
|
51
|
-
} // =============================================================================
|
|
52
|
-
// ARROWS UP AND DOWN
|
|
53
|
-
// =============================================================================
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
if (e.key === 'ArrowDown') {
|
|
57
|
-
e.preventDefault();
|
|
58
|
-
|
|
59
|
-
if (showPopover) {
|
|
60
|
-
const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable);
|
|
61
|
-
setCurrentOption(options[nextItemIndex].dsId);
|
|
62
|
-
scrollOptionIntoView(options[nextItemIndex].dsId);
|
|
63
|
-
} else {
|
|
64
|
-
setShowPopover(true);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
if (e.key === 'ArrowUp') {
|
|
69
|
-
e.preventDefault();
|
|
70
|
-
|
|
71
|
-
if (showPopover) {
|
|
72
|
-
const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
|
|
73
|
-
setCurrentOption(options[nextItemIndex].dsId);
|
|
74
|
-
scrollOptionIntoView(options[nextItemIndex].dsId);
|
|
75
|
-
} else {
|
|
76
|
-
setShowPopover(true);
|
|
77
|
-
setTimeout(() => {
|
|
78
|
-
const nextItemIndex = listHelper.findInCircularList(options, 0, isOptionFocuseable, -1);
|
|
79
|
-
setCurrentOption(options[nextItemIndex].dsId);
|
|
80
|
-
scrollOptionIntoView(options[nextItemIndex].dsId);
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
} // =============================================================================
|
|
84
|
-
// ESCAPE
|
|
85
|
-
// =============================================================================
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
if (e.key === 'Escape') {
|
|
89
|
-
setShowPopover(false);
|
|
90
|
-
}
|
|
91
|
-
}, [scrollOptionIntoView, currentItemIndex, options, currentItem, showPopover, onKeyDown, setCurrentOption, setShowPopover, selectOption]);
|
|
92
|
-
return {
|
|
93
|
-
onInputKeyDown
|
|
94
|
-
};
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
exports.useKeyboardNavigation = useKeyboardNavigation;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
require('core-js/modules/web.dom-collections.iterator.js');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
|
|
8
|
-
// Taken and modified from https://stackoverflow.com/a/60218754
|
|
9
|
-
|
|
10
|
-
const useOnElementResize = targetRef => {
|
|
11
|
-
var _targetRef$current, _targetRef$current2;
|
|
12
|
-
|
|
13
|
-
const [width, setWidth] = React.useState(targetRef.current ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : 0);
|
|
14
|
-
const [height, setHeight] = React.useState(targetRef.current ? (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetWidth : 0);
|
|
15
|
-
const observer = React.useRef(null);
|
|
16
|
-
React.useEffect(() => {
|
|
17
|
-
function outputsize() {
|
|
18
|
-
if (targetRef.current) {
|
|
19
|
-
setWidth(targetRef.current.offsetWidth);
|
|
20
|
-
setHeight(targetRef.current.offsetHeight);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
observer.current = new ResizeObserver(outputsize).observe(targetRef.current);
|
|
25
|
-
return () => {
|
|
26
|
-
var _observer$current;
|
|
27
|
-
|
|
28
|
-
(_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
|
|
29
|
-
};
|
|
30
|
-
}, [targetRef]);
|
|
31
|
-
return React.useMemo(() => ({
|
|
32
|
-
width,
|
|
33
|
-
height
|
|
34
|
-
}), [width, height]);
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
exports.useOnElementResize = useOnElementResize;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
const DATA_TESTID = {
|
|
2
|
-
COMBOBOX_MENU_LIST: 'autocomplete-menu-list',
|
|
3
|
-
COMBOBOX_CLEAR_BTN: 'autocomplete-clear-btn',
|
|
4
|
-
COMBOBOX_ALL_BTN: 'autocomplete-all-btn',
|
|
5
|
-
COMBOBOX_DROPDOWN_BTN: 'autocomplete-dropdown-btn',
|
|
6
|
-
COMBOBOX_OPTION: 'autocomplete-option',
|
|
7
|
-
COMBOBOX: 'autocomplete'
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export { DATA_TESTID };
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
|
|
2
|
-
import { defaultProps } from '../AutocompleteCTX.js';
|
|
3
|
-
|
|
4
|
-
// we have to merge the "default" nested default values with what the user gives us...
|
|
5
|
-
const useGetAutocompleteWithDefaultsProps = props => useMemoMergePropsWithDefault(props, defaultProps);
|
|
6
|
-
|
|
7
|
-
export { useGetAutocompleteWithDefaultsProps };
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
-
import 'core-js/modules/esnext.async-iterator.map.js';
|
|
3
|
-
import 'core-js/modules/esnext.iterator.map.js';
|
|
4
|
-
import { useContext } from 'react';
|
|
5
|
-
import { AutocompleteContext } from '../../AutocompleteCTX.js';
|
|
6
|
-
import { getSelectableOptions } from '../../utils/listHelper.js';
|
|
7
|
-
import { StyledA11ySelectedValues } from './styled.js';
|
|
8
|
-
|
|
9
|
-
const MultiAllyMessages = () => {
|
|
10
|
-
const {
|
|
11
|
-
props: {
|
|
12
|
-
options,
|
|
13
|
-
selectedValues
|
|
14
|
-
}
|
|
15
|
-
} = useContext(AutocompleteContext);
|
|
16
|
-
const selectableOptions = getSelectableOptions(options);
|
|
17
|
-
const multipleSelectedValues = selectedValues;
|
|
18
|
-
return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
|
|
19
|
-
"aria-live": "polite",
|
|
20
|
-
"aria-atomic": "false",
|
|
21
|
-
"aria-relevant": "additions text"
|
|
22
|
-
}, void 0, "Options selected: ".concat(multipleSelectedValues.map(item => item.label).join(', '), ". ").concat(multipleSelectedValues.length, " of ").concat(selectableOptions.length));
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
export { MultiAllyMessages };
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
-
import { useContext } from 'react';
|
|
3
|
-
import { AutocompleteContext } from '../../AutocompleteCTX.js';
|
|
4
|
-
import { StyledA11ySelectedValues } from './styled.js';
|
|
5
|
-
|
|
6
|
-
const SingleAllyMessages = () => {
|
|
7
|
-
const {
|
|
8
|
-
props: {
|
|
9
|
-
selectedValues
|
|
10
|
-
}
|
|
11
|
-
} = useContext(AutocompleteContext);
|
|
12
|
-
const singleSelectedValue = selectedValues;
|
|
13
|
-
return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
|
|
14
|
-
"aria-live": "polite",
|
|
15
|
-
"aria-atomic": "false",
|
|
16
|
-
"aria-relevant": "additions text"
|
|
17
|
-
}, void 0, "Option selected: ".concat(singleSelectedValue.label, "."));
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
export { SingleAllyMessages };
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
-
import { useContext } from 'react';
|
|
3
|
-
import { AutocompleteContext } from '../../AutocompleteCTX.js';
|
|
4
|
-
import { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';
|
|
5
|
-
import { useControlsInput } from './useControlsInput.js';
|
|
6
|
-
import { StyledControlsWrapper, StyledInputWrapper, StyledInput } from './styled.js';
|
|
7
|
-
import { jsx } from 'react/jsx-runtime';
|
|
8
|
-
|
|
9
|
-
const Controls = () => {
|
|
10
|
-
const {
|
|
11
|
-
props: {
|
|
12
|
-
autoFocus,
|
|
13
|
-
hasError,
|
|
14
|
-
placeholder,
|
|
15
|
-
inputMinWidth
|
|
16
|
-
},
|
|
17
|
-
inputRef,
|
|
18
|
-
showPopover,
|
|
19
|
-
focusOptionIdx,
|
|
20
|
-
controlsWrapperRef
|
|
21
|
-
} = useContext(AutocompleteContext);
|
|
22
|
-
const {
|
|
23
|
-
onInputKeyDown
|
|
24
|
-
} = useKeyboardNavigation();
|
|
25
|
-
const {
|
|
26
|
-
handleOnBlur,
|
|
27
|
-
handleOnInputMouseDown,
|
|
28
|
-
handleOnChange
|
|
29
|
-
} = useControlsInput();
|
|
30
|
-
return /*#__PURE__*/jsx(StyledControlsWrapper, {
|
|
31
|
-
ref: controlsWrapperRef,
|
|
32
|
-
cols: ['minmax(20px, auto)'],
|
|
33
|
-
minWidth: inputMinWidth,
|
|
34
|
-
hasError: hasError,
|
|
35
|
-
children: /*#__PURE__*/_jsx(StyledInputWrapper, {}, void 0, /*#__PURE__*/jsx(StyledInput, {
|
|
36
|
-
autoFocus: autoFocus,
|
|
37
|
-
"aria-labelledby": "combo-label",
|
|
38
|
-
"aria-controls": "combo-listbox",
|
|
39
|
-
"aria-owns": "combo-listbox",
|
|
40
|
-
"aria-activedescendant": focusOptionIdx,
|
|
41
|
-
"aria-expanded": showPopover,
|
|
42
|
-
"aria-haspopup": "listbox",
|
|
43
|
-
placeholder: placeholder,
|
|
44
|
-
role: "combobox",
|
|
45
|
-
ref: inputRef,
|
|
46
|
-
type: "text",
|
|
47
|
-
onKeyDown: onInputKeyDown,
|
|
48
|
-
onChange: handleOnChange,
|
|
49
|
-
onBlur: handleOnBlur,
|
|
50
|
-
onClick: handleOnInputMouseDown
|
|
51
|
-
}))
|
|
52
|
-
});
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
export { Controls };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Controls } from './Controls.js';
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
|
-
import { css } from '@elliemae/ds-system';
|
|
4
|
-
import { Grid } from '@elliemae/ds-grid';
|
|
5
|
-
|
|
6
|
-
var _templateObject, _templateObject2;
|
|
7
|
-
const normalBorder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n"])), props => props.hasError ? props.theme.colors.danger[900] : props.theme.colors.neutral[400]);
|
|
8
|
-
const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border: 2px solid ", ";\n"])), _ref => {
|
|
9
|
-
let {
|
|
10
|
-
theme
|
|
11
|
-
} = _ref;
|
|
12
|
-
return theme.colors.brand[700];
|
|
13
|
-
});
|
|
14
|
-
const StyledControlsWrapper = /*#__PURE__*/styled(Grid).withConfig({
|
|
15
|
-
componentId: "sc-vp36gr-0"
|
|
16
|
-
})(["background:transparent;position:relative;border-radius:2px;min-width:", ";align-items:center;align-content:center;height:28px;padding-left:8px;::after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:2px;", " pointer-events:none;z-index:7;}:focus-within{::after{", "}}"], _ref2 => {
|
|
17
|
-
let {
|
|
18
|
-
minWidth
|
|
19
|
-
} = _ref2;
|
|
20
|
-
return "".concat(minWidth, "px");
|
|
21
|
-
}, normalBorder, focusBorder);
|
|
22
|
-
const StyledInput = /*#__PURE__*/styled.input.withConfig({
|
|
23
|
-
componentId: "sc-vp36gr-1"
|
|
24
|
-
})(["::placeholder{font-style:italic;color:", ";}font-size:13px;line-height:13px;border:none;padding:0;outline:none;width:100%;color:", ";&:focus{outline:none;}"], props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[700]);
|
|
25
|
-
const StyledInputPlaceHolder = /*#__PURE__*/styled.div.withConfig({
|
|
26
|
-
componentId: "sc-vp36gr-2"
|
|
27
|
-
})(["font-style:italic;color:", ";position:absolute;display:flex;align-items:center;width:100%;user-select:none;height:28px;"], props => props.theme.colors.neutral[500]);
|
|
28
|
-
const StyledInputWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
29
|
-
componentId: "sc-vp36gr-3"
|
|
30
|
-
})(["position:relative;flex:1;margin-right:5px;display:flex;align-items:center;"]);
|
|
31
|
-
|
|
32
|
-
export { StyledControlsWrapper, StyledInput, StyledInputPlaceHolder, StyledInputWrapper };
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { useContext, useCallback, useMemo } from 'react';
|
|
2
|
-
import { AutocompleteContext } from '../../AutocompleteCTX.js';
|
|
3
|
-
|
|
4
|
-
const useControlsInput = () => {
|
|
5
|
-
const {
|
|
6
|
-
props: {
|
|
7
|
-
selectedValues,
|
|
8
|
-
onChange,
|
|
9
|
-
placeholder,
|
|
10
|
-
onFilter
|
|
11
|
-
},
|
|
12
|
-
setShowPopover,
|
|
13
|
-
inputRef
|
|
14
|
-
} = useContext(AutocompleteContext);
|
|
15
|
-
const handleOnChange = useCallback(e => {
|
|
16
|
-
const target = e.target;
|
|
17
|
-
onChange(target.value);
|
|
18
|
-
setShowPopover(true);
|
|
19
|
-
onFilter(target.value);
|
|
20
|
-
}, [onFilter, onChange, setShowPopover]);
|
|
21
|
-
const handleOnBlur = useCallback(() => {
|
|
22
|
-
setShowPopover(false);
|
|
23
|
-
}, [setShowPopover]);
|
|
24
|
-
const handleOnInputMouseDown = useCallback(e => {
|
|
25
|
-
e.stopPropagation();
|
|
26
|
-
}, []);
|
|
27
|
-
const showPlaceholder = useMemo(() => {
|
|
28
|
-
var _inputRef$current;
|
|
29
|
-
|
|
30
|
-
return !((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) && selectedValues === '' ? placeholder : null;
|
|
31
|
-
}, [placeholder, inputRef, selectedValues]);
|
|
32
|
-
return useMemo(() => ({
|
|
33
|
-
handleOnBlur,
|
|
34
|
-
handleOnChange,
|
|
35
|
-
handleOnInputMouseDown,
|
|
36
|
-
showPlaceholder
|
|
37
|
-
}), [handleOnBlur, handleOnInputMouseDown, handleOnChange, showPlaceholder]);
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
export { useControlsInput };
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { useContext, useCallback } from 'react';
|
|
2
|
-
import { AutocompleteContext } from '../../AutocompleteCTX.js';
|
|
3
|
-
|
|
4
|
-
const useMaskedOnChange = () => {
|
|
5
|
-
const {
|
|
6
|
-
props: {
|
|
7
|
-
useMask,
|
|
8
|
-
onChange
|
|
9
|
-
},
|
|
10
|
-
setShowPopover
|
|
11
|
-
} = useContext(AutocompleteContext); // default onchange when no mask provided
|
|
12
|
-
|
|
13
|
-
const handleOnChange = useCallback(e => {
|
|
14
|
-
setShowPopover(true);
|
|
15
|
-
onChange(e.target.value);
|
|
16
|
-
}, [onChange, setShowPopover]);
|
|
17
|
-
const onChangeMask = useMask({
|
|
18
|
-
valueSetter: setInputValue,
|
|
19
|
-
onChange: handleOnChange
|
|
20
|
-
});
|
|
21
|
-
return (onChangeMask === null || onChangeMask === void 0 ? void 0 : onChangeMask.onChange) || handleOnChange;
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export { useMaskedOnChange };
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { useContext, useEffect } from 'react';
|
|
2
|
-
import { AutocompleteContext } from '../../AutocompleteCTX.js';
|
|
3
|
-
|
|
4
|
-
const useMenuList = () => {
|
|
5
|
-
var _inputRef$current3;
|
|
6
|
-
|
|
7
|
-
const {
|
|
8
|
-
props: {
|
|
9
|
-
selectedValues,
|
|
10
|
-
onMenuOpen,
|
|
11
|
-
options
|
|
12
|
-
},
|
|
13
|
-
inputRef,
|
|
14
|
-
setCurrentOption,
|
|
15
|
-
scrollOptionIntoView,
|
|
16
|
-
setShowPopover,
|
|
17
|
-
showPopover
|
|
18
|
-
} = useContext(AutocompleteContext);
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
var _inputRef$current;
|
|
21
|
-
|
|
22
|
-
if (options.length === 0 || ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) === '') {
|
|
23
|
-
setShowPopover(false);
|
|
24
|
-
}
|
|
25
|
-
}, [options, inputRef, setShowPopover]);
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
const getFirstOption = () => {
|
|
28
|
-
for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type)) {
|
|
29
|
-
setCurrentOption(options[i].dsId);
|
|
30
|
-
break;
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
if (showPopover) {
|
|
35
|
-
var _inputRef$current2;
|
|
36
|
-
|
|
37
|
-
onMenuOpen();
|
|
38
|
-
|
|
39
|
-
if (((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value) !== '') {
|
|
40
|
-
getFirstOption();
|
|
41
|
-
} else if (Array.isArray(selectedValues)) {
|
|
42
|
-
const multiSelectedValues = selectedValues;
|
|
43
|
-
|
|
44
|
-
if (multiSelectedValues.length > 0) {
|
|
45
|
-
setCurrentOption(multiSelectedValues[multiSelectedValues.length - 1].dsId);
|
|
46
|
-
scrollOptionIntoView(multiSelectedValues[multiSelectedValues.length - 1].dsId);
|
|
47
|
-
} else {
|
|
48
|
-
getFirstOption();
|
|
49
|
-
}
|
|
50
|
-
} else {
|
|
51
|
-
const singleSelectedValue = selectedValues;
|
|
52
|
-
|
|
53
|
-
if (singleSelectedValue) {
|
|
54
|
-
setCurrentOption(selectedValues.dsId);
|
|
55
|
-
scrollOptionIntoView(selectedValues.dsId);
|
|
56
|
-
} else {
|
|
57
|
-
getFirstOption();
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
61
|
-
|
|
62
|
-
}, [showPopover, (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value]);
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
export { useMenuList };
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { PropTypes } from 'react-desc';
|
|
2
|
-
|
|
3
|
-
const propTypes = {
|
|
4
|
-
placeholder: PropTypes.string.description('input s placeholder value').defaultValue(''),
|
|
5
|
-
options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description('List of options').defaultValue([]),
|
|
6
|
-
selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object, PropTypes.string]).description('Array of option or single option selected'),
|
|
7
|
-
autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
|
|
8
|
-
hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
|
|
9
|
-
onChange: PropTypes.func.description('function triggered when an option is selected it will send the options selected').defaultValue(''),
|
|
10
|
-
onSelectAll: PropTypes.func.description('function triggered when ALL button is selected from the header menu list').defaultValue(''),
|
|
11
|
-
onFilter: PropTypes.func.description('function triggered when user type in the autocomplete input').defaultValue(''),
|
|
12
|
-
onCreate: PropTypes.func.description('function triggered when user select "create" a new item whenever is not a match in the all option list').defaultValue(''),
|
|
13
|
-
onClearAll: PropTypes.func.description('function triggered when user select CLEAR button from the header menu list').defaultValue(''),
|
|
14
|
-
onMenuOpen: PropTypes.func.description('function triggered when user open the menu list').defaultValue(''),
|
|
15
|
-
inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),
|
|
16
|
-
menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),
|
|
17
|
-
menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),
|
|
18
|
-
withToggle: PropTypes.bool.description('POC purpose this prop will not remain').defaultValue('false')
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
export { propTypes };
|