@salt-ds/lab 1.0.0-alpha.67 → 1.0.0-alpha.69
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +179 -0
- package/css/salt-lab.css +24 -190
- package/dist-cjs/breadcrumbs/internal/BreadcrumbsContext.js.map +1 -1
- package/dist-cjs/button-bar/ButtonBar.js.map +1 -1
- package/dist-cjs/button-bar/OrderedButton.js.map +1 -1
- package/dist-cjs/button-bar/internal/useDescendant.js.map +1 -1
- package/dist-cjs/calendar/Calendar.js +23 -8
- package/dist-cjs/calendar/Calendar.js.map +1 -1
- package/dist-cjs/calendar/CalendarGrid.js +56 -80
- package/dist-cjs/calendar/CalendarGrid.js.map +1 -1
- package/dist-cjs/calendar/CalendarMonthHeader.css.js +6 -0
- package/dist-cjs/calendar/CalendarMonthHeader.css.js.map +1 -0
- package/dist-cjs/calendar/CalendarMonthHeader.js +48 -0
- package/dist-cjs/calendar/CalendarMonthHeader.js.map +1 -0
- package/dist-cjs/calendar/CalendarNavigation.js +30 -39
- package/dist-cjs/calendar/CalendarNavigation.js.map +1 -1
- package/dist-cjs/calendar/CalendarWeekHeader.js +2 -6
- package/dist-cjs/calendar/CalendarWeekHeader.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarContext.js +3 -1
- package/dist-cjs/calendar/internal/CalendarContext.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarDay.js +88 -76
- package/dist-cjs/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarMonth.js +13 -23
- package/dist-cjs/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-cjs/calendar/internal/useFocusManagement.js +5 -6
- package/dist-cjs/calendar/internal/useFocusManagement.js.map +1 -1
- package/dist-cjs/calendar/internal/utils.js +8 -12
- package/dist-cjs/calendar/internal/utils.js.map +1 -1
- package/dist-cjs/calendar/useCalendar.js +69 -109
- package/dist-cjs/calendar/useCalendar.js.map +1 -1
- package/dist-cjs/calendar/useCalendarDay.js +21 -18
- package/dist-cjs/calendar/useCalendarDay.js.map +1 -1
- package/dist-cjs/calendar/useCalendarSelection.js +146 -34
- package/dist-cjs/calendar/useCalendarSelection.js.map +1 -1
- package/dist-cjs/carousel/CarouselContext.js.map +1 -1
- package/dist-cjs/carousel/CarouselControls.js.map +1 -1
- package/dist-cjs/carousel/CarouselReducer.js.map +1 -1
- package/dist-cjs/carousel/CarouselSlide.js.map +1 -1
- package/dist-cjs/carousel/CarouselSlider.js.map +1 -1
- package/dist-cjs/cascading-menu/CascadingMenu.js.map +1 -1
- package/dist-cjs/cascading-menu/CascadingMenuItem.js.map +1 -1
- package/dist-cjs/cascading-menu/CascadingMenuList.js.map +1 -1
- package/dist-cjs/cascading-menu/internal/keydownHandlers.js.map +1 -1
- package/dist-cjs/cascading-menu/internal/useClickAway.js.map +1 -1
- package/dist-cjs/cascading-menu/internal/useMenuTriggerHandlers.js.map +1 -1
- package/dist-cjs/cascading-menu/internal/useMouseHandlers.js.map +1 -1
- package/dist-cjs/cascading-menu/internal/useStateReducer.js.map +1 -1
- package/dist-cjs/cascading-menu/stateChangeTypes.js +0 -1
- package/dist-cjs/cascading-menu/stateChangeTypes.js.map +1 -1
- package/dist-cjs/color-chooser/Color.js.map +1 -1
- package/dist-cjs/color-chooser/ColorChooser.js.map +1 -1
- package/dist-cjs/color-chooser/ColorHelpers.js.map +1 -1
- package/dist-cjs/color-chooser/ColorPicker.js.map +1 -1
- package/dist-cjs/color-chooser/DictTabs.js.map +1 -1
- package/dist-cjs/color-chooser/HexInput.js.map +1 -1
- package/dist-cjs/color-chooser/Swatch.js.map +1 -1
- package/dist-cjs/color-chooser/Swatches.js.map +1 -1
- package/dist-cjs/color-chooser/SwatchesPicker.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +0 -2
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useCombobox.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/DefaultComboBox.js +0 -4
- package/dist-cjs/combo-box-deprecated/internal/DefaultComboBox.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/MultiSelectComboBox.js +0 -4
- package/dist-cjs/combo-box-deprecated/internal/MultiSelectComboBox.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/useComboBox.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/useMultiSelectComboBox.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/usePopperStatus.js.map +1 -1
- package/dist-cjs/common-hooks/calcPreferredHeight.js.map +1 -1
- package/dist-cjs/common-hooks/collectionProvider.js.map +1 -1
- package/dist-cjs/common-hooks/list-dom-utils.js.map +1 -1
- package/dist-cjs/common-hooks/selectionTypes.js.map +1 -1
- package/dist-cjs/common-hooks/useCollapsibleGroups.js.map +1 -1
- package/dist-cjs/common-hooks/useCollectionItems.js.map +1 -1
- package/dist-cjs/common-hooks/useImperativeScrollingAPI.js.map +1 -1
- package/dist-cjs/common-hooks/useKeyboardNavigation.js.map +1 -1
- package/dist-cjs/common-hooks/useKeyboardNavigationPanel.js.map +1 -1
- package/dist-cjs/common-hooks/useSelection.js.map +1 -1
- package/dist-cjs/common-hooks/useTypeahead.js +1 -1
- package/dist-cjs/common-hooks/useTypeahead.js.map +1 -1
- package/dist-cjs/common-hooks/useViewportTracking.js.map +1 -1
- package/dist-cjs/common-hooks/utils/collection-item-utils.js.map +1 -1
- package/dist-cjs/contact-details/ContactPrimaryInfo.js.map +1 -1
- package/dist-cjs/contact-details/ContactSecondaryInfo.js.map +1 -1
- package/dist-cjs/contact-details/ContactTertiaryInfo.js.map +1 -1
- package/dist-cjs/contact-details/internal/ContactDetailsContext.js.map +1 -1
- package/dist-cjs/content-status/internal/StatusIndicator.js.map +1 -1
- package/dist-cjs/date-input/DateInputRange.js +61 -51
- package/dist-cjs/date-input/DateInputRange.js.map +1 -1
- package/dist-cjs/date-input/DateInputSingle.js +33 -18
- package/dist-cjs/date-input/DateInputSingle.js.map +1 -1
- package/dist-cjs/date-picker/DatePicker.js +9 -1
- package/dist-cjs/date-picker/DatePicker.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerActions.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerContext.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerHelperText.css.js +6 -0
- package/dist-cjs/date-picker/DatePickerHelperText.css.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerHelperText.js +36 -0
- package/dist-cjs/date-picker/DatePickerHelperText.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerOverlay.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js +40 -16
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerPanel.css.js +1 -1
- package/dist-cjs/date-picker/DatePickerRangeGridPanel.js +247 -0
- package/dist-cjs/date-picker/DatePickerRangeGridPanel.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerRangeInput.js +38 -6
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangePanel.js +188 -32
- package/dist-cjs/date-picker/DatePickerRangePanel.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSingleGridPanel.js +255 -0
- package/dist-cjs/date-picker/DatePickerSingleGridPanel.js.map +1 -0
- package/dist-cjs/date-picker/DatePickerSingleInput.js +13 -5
- package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSinglePanel.js +6 -105
- package/dist-cjs/date-picker/DatePickerSinglePanel.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerTrigger.js.map +1 -1
- package/dist-cjs/date-picker/useDatePicker.js +71 -11
- package/dist-cjs/date-picker/useDatePicker.js.map +1 -1
- package/dist-cjs/date-picker/useFocusOut.js +43 -0
- package/dist-cjs/date-picker/useFocusOut.js.map +1 -0
- package/dist-cjs/date-picker/useKeyboard.js +4 -5
- package/dist-cjs/date-picker/useKeyboard.js.map +1 -1
- package/dist-cjs/deck-item/DeckItem.js.map +1 -1
- package/dist-cjs/deck-layout/DeckLayout.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.js +0 -1
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/dropdown/DropdownBase.js +0 -1
- package/dist-cjs/dropdown/DropdownBase.js.map +1 -1
- package/dist-cjs/dropdown/DropdownButton.js.map +1 -1
- package/dist-cjs/dropdown/useClickAway.js.map +1 -1
- package/dist-cjs/dropdown/useDropdown.js.map +1 -1
- package/dist-cjs/dropdown/useDropdownBase.js.map +1 -1
- package/dist-cjs/editable-label/EditableLabel.js.map +1 -1
- package/dist-cjs/form-field-legacy/FormFieldLegacy.js.map +1 -1
- package/dist-cjs/form-field-legacy/StatusIndicator.js.map +1 -1
- package/dist-cjs/formatted-input/FormattedInput.js.map +1 -1
- package/dist-cjs/index.js +8 -8
- package/dist-cjs/input-legacy/InputLegacy.js.map +1 -1
- package/dist-cjs/input-legacy/useCursorOnFocus.js.map +1 -1
- package/dist-cjs/list/Highlighter.js.map +1 -1
- package/dist-cjs/list/List.js.map +1 -1
- package/dist-cjs/list/ListItem.js.map +1 -1
- package/dist-cjs/list/VirtualizedList.js.map +1 -1
- package/dist-cjs/list/useList.js +0 -1
- package/dist-cjs/list/useList.js.map +1 -1
- package/dist-cjs/list/useListHeight.js.map +1 -1
- package/dist-cjs/list-deprecated/ListBase.js +1 -3
- package/dist-cjs/list-deprecated/ListBase.js.map +1 -1
- package/dist-cjs/list-deprecated/ListItem.js.map +1 -1
- package/dist-cjs/list-deprecated/ListItemBase.js.map +1 -1
- package/dist-cjs/list-deprecated/ListItemContext.js.map +1 -1
- package/dist-cjs/list-deprecated/internal/DescendantContext.js.map +1 -1
- package/dist-cjs/list-deprecated/internal/calcPreferredListHeight.js.map +1 -1
- package/dist-cjs/list-deprecated/internal/useWidth.js.map +1 -1
- package/dist-cjs/list-deprecated/useList.js.map +1 -1
- package/dist-cjs/list-deprecated/useListItem.js.map +1 -1
- package/dist-cjs/list-deprecated/useTypeSelect.js.map +1 -1
- package/dist-cjs/list-next/ListItemNext.js.map +1 -1
- package/dist-cjs/list-next/ListNext.js.map +1 -1
- package/dist-cjs/list-next/ListNextContext.js.map +1 -1
- package/dist-cjs/list-next/useList.js.map +1 -1
- package/dist-cjs/localization-provider/LocalizationProvider.js +5 -2
- package/dist-cjs/localization-provider/LocalizationProvider.js.map +1 -1
- package/dist-cjs/menu-button/MenuButton.js.map +1 -1
- package/dist-cjs/metric/MetricContent.js.map +1 -1
- package/dist-cjs/number-input/NumberInput.js.map +1 -1
- package/dist-cjs/number-input/useNumberInput.js.map +1 -1
- package/dist-cjs/query-input/internal/CategoryListContext.js.map +1 -1
- package/dist-cjs/query-input/internal/CategoryListItem.js.map +1 -1
- package/dist-cjs/query-input/internal/usePopperStatus.js +2 -2
- package/dist-cjs/query-input/internal/usePopperStatus.js.map +1 -1
- package/dist-cjs/query-input/useQueryInput.js +0 -1
- package/dist-cjs/query-input/useQueryInput.js.map +1 -1
- package/dist-cjs/responsive/OverflowReducer.js +1 -3
- package/dist-cjs/responsive/OverflowReducer.js.map +1 -1
- package/dist-cjs/responsive/useDynamicCollapse.js.map +1 -1
- package/dist-cjs/responsive/useInstantCollapse.js.map +1 -1
- package/dist-cjs/responsive/useOverflow.js.map +1 -1
- package/dist-cjs/responsive/useOverflowCollectionItems.js.map +1 -1
- package/dist-cjs/responsive/useOverflowLayout.js +0 -3
- package/dist-cjs/responsive/useOverflowLayout.js.map +1 -1
- package/dist-cjs/responsive/useReclaimSpace.js.map +1 -1
- package/dist-cjs/responsive/useResizeObserver.js.map +1 -1
- package/dist-cjs/responsive/useWidth.js.map +1 -1
- package/dist-cjs/responsive/utils.js.map +1 -1
- package/dist-cjs/search-input/SearchInput.js.map +1 -1
- package/dist-cjs/tabs/Tab.js.map +1 -1
- package/dist-cjs/tabs/Tabs.js.map +1 -1
- package/dist-cjs/tabs/Tabstrip.js +0 -1
- package/dist-cjs/tabs/Tabstrip.js.map +1 -1
- package/dist-cjs/tabs/drag-drop/useDragDropNaturalMovement.js.map +1 -1
- package/dist-cjs/tabs/drag-drop/useDragSpacers.js.map +1 -1
- package/dist-cjs/tabs/useEditableItem.js.map +1 -1
- package/dist-cjs/tabs/useKeyboardNavigation.js.map +1 -1
- package/dist-cjs/tabs/useSelection.js.map +1 -1
- package/dist-cjs/tabs/useTabs.js.map +1 -1
- package/dist-cjs/tabs/useTabstrip.js.map +1 -1
- package/dist-cjs/tabs-next/TabListNext.js.map +1 -1
- package/dist-cjs/tabs-next/TabNext.js.map +1 -1
- package/dist-cjs/tabs-next/TabNextAction.js.map +1 -1
- package/dist-cjs/tabs-next/TabNextContext.js.map +1 -1
- package/dist-cjs/tabs-next/TabNextPanel.js.map +1 -1
- package/dist-cjs/tabs-next/TabNextTrigger.js.map +1 -1
- package/dist-cjs/tabs-next/TabOverflowList.js.map +1 -1
- package/dist-cjs/tabs-next/TabsNext.js.map +1 -1
- package/dist-cjs/tabs-next/TabsNextContext.js.map +1 -1
- package/dist-cjs/tabs-next/hooks/useCollection.js +2 -2
- package/dist-cjs/tabs-next/hooks/useCollection.js.map +1 -1
- package/dist-cjs/tabs-next/hooks/useFocusOutside.js.map +1 -1
- package/dist-cjs/tabs-next/hooks/useOverflow.js.map +1 -1
- package/dist-cjs/tabs-next/hooks/useRestoreActiveTab.js.map +1 -1
- package/dist-cjs/tokenized-input/TokenizedInputBase.js.map +1 -1
- package/dist-cjs/tokenized-input/internal/InputPill.js.map +1 -1
- package/dist-cjs/tokenized-input/internal/getCursorPosition.js.map +1 -1
- package/dist-cjs/tokenized-input/internal/useResizeObserver.js.map +1 -1
- package/dist-cjs/tokenized-input/useTokenizedInput.js.map +1 -1
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.js.map +1 -1
- package/dist-cjs/tokenized-input-next/internal/InputPill.js.map +1 -1
- package/dist-cjs/tokenized-input-next/internal/useResizeObserver.js.map +1 -1
- package/dist-cjs/tokenized-input-next/useTokenizedInputNext.js +1 -1
- package/dist-cjs/tokenized-input-next/useTokenizedInputNext.js.map +1 -1
- package/dist-cjs/toolbar/Tooltray.js.map +1 -1
- package/dist-cjs/toolbar/internal/renderToolbarItems.js.map +1 -1
- package/dist-cjs/toolbar/internal/renderTrayTools.js.map +1 -1
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
- package/dist-cjs/toolbar/toolbar-field/useToolbarField.js.map +1 -1
- package/dist-cjs/tree/Tree.js +2 -6
- package/dist-cjs/tree/Tree.js.map +1 -1
- package/dist-cjs/tree/TreeNode.js.map +1 -1
- package/dist-cjs/tree/use-tree-keyboard-navigation.js.map +1 -1
- package/dist-cjs/tree/useTree.js.map +1 -1
- package/dist-cjs/utils/useClickOutside.js.map +1 -1
- package/dist-cjs/utils/useSlideSelection.js.map +1 -1
- package/dist-cjs/window/ElectronWindow.js.map +1 -1
- package/dist-es/breadcrumbs/internal/BreadcrumbsContext.js.map +1 -1
- package/dist-es/button-bar/ButtonBar.js.map +1 -1
- package/dist-es/button-bar/OrderedButton.js.map +1 -1
- package/dist-es/button-bar/internal/useDescendant.js.map +1 -1
- package/dist-es/calendar/Calendar.js +24 -9
- package/dist-es/calendar/Calendar.js.map +1 -1
- package/dist-es/calendar/CalendarGrid.js +59 -83
- package/dist-es/calendar/CalendarGrid.js.map +1 -1
- package/dist-es/calendar/CalendarMonthHeader.css.js +4 -0
- package/dist-es/calendar/CalendarMonthHeader.css.js.map +1 -0
- package/dist-es/calendar/CalendarMonthHeader.js +46 -0
- package/dist-es/calendar/CalendarMonthHeader.js.map +1 -0
- package/dist-es/calendar/CalendarNavigation.js +30 -39
- package/dist-es/calendar/CalendarNavigation.js.map +1 -1
- package/dist-es/calendar/CalendarWeekHeader.js +2 -6
- package/dist-es/calendar/CalendarWeekHeader.js.map +1 -1
- package/dist-es/calendar/internal/CalendarContext.js +3 -1
- package/dist-es/calendar/internal/CalendarContext.js.map +1 -1
- package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-es/calendar/internal/CalendarDay.js +90 -78
- package/dist-es/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-es/calendar/internal/CalendarMonth.js +13 -23
- package/dist-es/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-es/calendar/internal/useFocusManagement.js +5 -6
- package/dist-es/calendar/internal/useFocusManagement.js.map +1 -1
- package/dist-es/calendar/internal/utils.js +8 -12
- package/dist-es/calendar/internal/utils.js.map +1 -1
- package/dist-es/calendar/useCalendar.js +72 -112
- package/dist-es/calendar/useCalendar.js.map +1 -1
- package/dist-es/calendar/useCalendarDay.js +21 -18
- package/dist-es/calendar/useCalendarDay.js.map +1 -1
- package/dist-es/calendar/useCalendarSelection.js +146 -34
- package/dist-es/calendar/useCalendarSelection.js.map +1 -1
- package/dist-es/carousel/CarouselContext.js.map +1 -1
- package/dist-es/carousel/CarouselControls.js.map +1 -1
- package/dist-es/carousel/CarouselReducer.js.map +1 -1
- package/dist-es/carousel/CarouselSlide.js.map +1 -1
- package/dist-es/carousel/CarouselSlider.js.map +1 -1
- package/dist-es/cascading-menu/CascadingMenu.js.map +1 -1
- package/dist-es/cascading-menu/CascadingMenuItem.js.map +1 -1
- package/dist-es/cascading-menu/CascadingMenuList.js.map +1 -1
- package/dist-es/cascading-menu/internal/keydownHandlers.js.map +1 -1
- package/dist-es/cascading-menu/internal/useClickAway.js.map +1 -1
- package/dist-es/cascading-menu/internal/useMenuTriggerHandlers.js.map +1 -1
- package/dist-es/cascading-menu/internal/useMouseHandlers.js.map +1 -1
- package/dist-es/cascading-menu/internal/useStateReducer.js.map +1 -1
- package/dist-es/cascading-menu/stateChangeTypes.js +0 -1
- package/dist-es/cascading-menu/stateChangeTypes.js.map +1 -1
- package/dist-es/color-chooser/Color.js.map +1 -1
- package/dist-es/color-chooser/ColorChooser.js.map +1 -1
- package/dist-es/color-chooser/ColorHelpers.js.map +1 -1
- package/dist-es/color-chooser/ColorPicker.js.map +1 -1
- package/dist-es/color-chooser/DictTabs.js.map +1 -1
- package/dist-es/color-chooser/HexInput.js.map +1 -1
- package/dist-es/color-chooser/Swatch.js.map +1 -1
- package/dist-es/color-chooser/Swatches.js.map +1 -1
- package/dist-es/color-chooser/SwatchesPicker.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +0 -2
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useCombobox.js.map +1 -1
- package/dist-es/combo-box-deprecated/internal/DefaultComboBox.js +1 -5
- package/dist-es/combo-box-deprecated/internal/DefaultComboBox.js.map +1 -1
- package/dist-es/combo-box-deprecated/internal/MultiSelectComboBox.js +1 -5
- package/dist-es/combo-box-deprecated/internal/MultiSelectComboBox.js.map +1 -1
- package/dist-es/combo-box-deprecated/internal/useComboBox.js +1 -1
- package/dist-es/combo-box-deprecated/internal/useComboBox.js.map +1 -1
- package/dist-es/combo-box-deprecated/internal/useMultiSelectComboBox.js +1 -1
- package/dist-es/combo-box-deprecated/internal/useMultiSelectComboBox.js.map +1 -1
- package/dist-es/combo-box-deprecated/internal/usePopperStatus.js.map +1 -1
- package/dist-es/common-hooks/calcPreferredHeight.js.map +1 -1
- package/dist-es/common-hooks/collectionProvider.js +1 -1
- package/dist-es/common-hooks/collectionProvider.js.map +1 -1
- package/dist-es/common-hooks/list-dom-utils.js.map +1 -1
- package/dist-es/common-hooks/selectionTypes.js.map +1 -1
- package/dist-es/common-hooks/useCollapsibleGroups.js.map +1 -1
- package/dist-es/common-hooks/useCollectionItems.js +1 -1
- package/dist-es/common-hooks/useCollectionItems.js.map +1 -1
- package/dist-es/common-hooks/useImperativeScrollingAPI.js.map +1 -1
- package/dist-es/common-hooks/useKeyboardNavigation.js +1 -1
- package/dist-es/common-hooks/useKeyboardNavigation.js.map +1 -1
- package/dist-es/common-hooks/useKeyboardNavigationPanel.js.map +1 -1
- package/dist-es/common-hooks/useSelection.js.map +1 -1
- package/dist-es/common-hooks/useTypeahead.js +1 -1
- package/dist-es/common-hooks/useTypeahead.js.map +1 -1
- package/dist-es/common-hooks/useViewportTracking.js.map +1 -1
- package/dist-es/common-hooks/utils/collection-item-utils.js.map +1 -1
- package/dist-es/contact-details/ContactPrimaryInfo.js.map +1 -1
- package/dist-es/contact-details/ContactSecondaryInfo.js.map +1 -1
- package/dist-es/contact-details/ContactTertiaryInfo.js.map +1 -1
- package/dist-es/contact-details/internal/ContactDetailsContext.js.map +1 -1
- package/dist-es/content-status/internal/StatusIndicator.js.map +1 -1
- package/dist-es/date-input/DateInputRange.js +61 -51
- package/dist-es/date-input/DateInputRange.js.map +1 -1
- package/dist-es/date-input/DateInputSingle.js +34 -19
- package/dist-es/date-input/DateInputSingle.js.map +1 -1
- package/dist-es/date-picker/DatePicker.js +9 -1
- package/dist-es/date-picker/DatePicker.js.map +1 -1
- package/dist-es/date-picker/DatePickerActions.js.map +1 -1
- package/dist-es/date-picker/DatePickerContext.js.map +1 -1
- package/dist-es/date-picker/DatePickerHelperText.css.js +4 -0
- package/dist-es/date-picker/DatePickerHelperText.css.js.map +1 -0
- package/dist-es/date-picker/DatePickerHelperText.js +34 -0
- package/dist-es/date-picker/DatePickerHelperText.js.map +1 -0
- package/dist-es/date-picker/DatePickerOverlay.js.map +1 -1
- package/dist-es/date-picker/DatePickerOverlayProvider.js +41 -17
- package/dist-es/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-es/date-picker/DatePickerPanel.css.js +1 -1
- package/dist-es/date-picker/DatePickerRangeGridPanel.js +245 -0
- package/dist-es/date-picker/DatePickerRangeGridPanel.js.map +1 -0
- package/dist-es/date-picker/DatePickerRangeInput.js +39 -7
- package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangePanel.js +190 -34
- package/dist-es/date-picker/DatePickerRangePanel.js.map +1 -1
- package/dist-es/date-picker/DatePickerSingleGridPanel.js +253 -0
- package/dist-es/date-picker/DatePickerSingleGridPanel.js.map +1 -0
- package/dist-es/date-picker/DatePickerSingleInput.js +13 -5
- package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerSinglePanel.js +8 -107
- package/dist-es/date-picker/DatePickerSinglePanel.js.map +1 -1
- package/dist-es/date-picker/DatePickerTrigger.js.map +1 -1
- package/dist-es/date-picker/useDatePicker.js +71 -11
- package/dist-es/date-picker/useDatePicker.js.map +1 -1
- package/dist-es/date-picker/useFocusOut.js +41 -0
- package/dist-es/date-picker/useFocusOut.js.map +1 -0
- package/dist-es/date-picker/useKeyboard.js +4 -5
- package/dist-es/date-picker/useKeyboard.js.map +1 -1
- package/dist-es/deck-item/DeckItem.js.map +1 -1
- package/dist-es/deck-layout/DeckLayout.js.map +1 -1
- package/dist-es/dropdown/Dropdown.js +0 -1
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/dropdown/DropdownBase.js +1 -2
- package/dist-es/dropdown/DropdownBase.js.map +1 -1
- package/dist-es/dropdown/DropdownButton.js.map +1 -1
- package/dist-es/dropdown/useClickAway.js.map +1 -1
- package/dist-es/dropdown/useDropdown.js.map +1 -1
- package/dist-es/dropdown/useDropdownBase.js.map +1 -1
- package/dist-es/editable-label/EditableLabel.js.map +1 -1
- package/dist-es/form-field-legacy/FormFieldLegacy.js.map +1 -1
- package/dist-es/form-field-legacy/StatusIndicator.js +1 -1
- package/dist-es/form-field-legacy/StatusIndicator.js.map +1 -1
- package/dist-es/formatted-input/FormattedInput.js +1 -1
- package/dist-es/formatted-input/FormattedInput.js.map +1 -1
- package/dist-es/index.js +4 -4
- package/dist-es/input-legacy/InputLegacy.js.map +1 -1
- package/dist-es/input-legacy/useCursorOnFocus.js.map +1 -1
- package/dist-es/list/Highlighter.js.map +1 -1
- package/dist-es/list/List.js.map +1 -1
- package/dist-es/list/ListItem.js.map +1 -1
- package/dist-es/list/VirtualizedList.js.map +1 -1
- package/dist-es/list/useList.js +0 -1
- package/dist-es/list/useList.js.map +1 -1
- package/dist-es/list/useListHeight.js.map +1 -1
- package/dist-es/list-deprecated/ListBase.js +1 -3
- package/dist-es/list-deprecated/ListBase.js.map +1 -1
- package/dist-es/list-deprecated/ListItem.js.map +1 -1
- package/dist-es/list-deprecated/ListItemBase.js.map +1 -1
- package/dist-es/list-deprecated/ListItemContext.js.map +1 -1
- package/dist-es/list-deprecated/internal/DescendantContext.js.map +1 -1
- package/dist-es/list-deprecated/internal/calcPreferredListHeight.js.map +1 -1
- package/dist-es/list-deprecated/internal/useWidth.js.map +1 -1
- package/dist-es/list-deprecated/useList.js.map +1 -1
- package/dist-es/list-deprecated/useListItem.js.map +1 -1
- package/dist-es/list-deprecated/useTypeSelect.js.map +1 -1
- package/dist-es/list-next/ListItemNext.js.map +1 -1
- package/dist-es/list-next/ListNext.js.map +1 -1
- package/dist-es/list-next/ListNextContext.js.map +1 -1
- package/dist-es/list-next/useList.js.map +1 -1
- package/dist-es/localization-provider/LocalizationProvider.js +6 -3
- package/dist-es/localization-provider/LocalizationProvider.js.map +1 -1
- package/dist-es/menu-button/MenuButton.js.map +1 -1
- package/dist-es/metric/MetricContent.js +2 -2
- package/dist-es/metric/MetricContent.js.map +1 -1
- package/dist-es/number-input/NumberInput.js +1 -1
- package/dist-es/number-input/NumberInput.js.map +1 -1
- package/dist-es/number-input/useNumberInput.js.map +1 -1
- package/dist-es/query-input/internal/CategoryListContext.js.map +1 -1
- package/dist-es/query-input/internal/CategoryListItem.js.map +1 -1
- package/dist-es/query-input/internal/usePopperStatus.js +2 -2
- package/dist-es/query-input/internal/usePopperStatus.js.map +1 -1
- package/dist-es/query-input/useQueryInput.js +0 -1
- package/dist-es/query-input/useQueryInput.js.map +1 -1
- package/dist-es/responsive/OverflowReducer.js +1 -3
- package/dist-es/responsive/OverflowReducer.js.map +1 -1
- package/dist-es/responsive/useDynamicCollapse.js.map +1 -1
- package/dist-es/responsive/useInstantCollapse.js.map +1 -1
- package/dist-es/responsive/useOverflow.js +1 -1
- package/dist-es/responsive/useOverflow.js.map +1 -1
- package/dist-es/responsive/useOverflowCollectionItems.js.map +1 -1
- package/dist-es/responsive/useOverflowLayout.js +0 -3
- package/dist-es/responsive/useOverflowLayout.js.map +1 -1
- package/dist-es/responsive/useReclaimSpace.js.map +1 -1
- package/dist-es/responsive/useResizeObserver.js.map +1 -1
- package/dist-es/responsive/useWidth.js.map +1 -1
- package/dist-es/responsive/utils.js.map +1 -1
- package/dist-es/search-input/SearchInput.js.map +1 -1
- package/dist-es/tabs/Tab.js.map +1 -1
- package/dist-es/tabs/Tabs.js.map +1 -1
- package/dist-es/tabs/Tabstrip.js +0 -1
- package/dist-es/tabs/Tabstrip.js.map +1 -1
- package/dist-es/tabs/drag-drop/useDragDropNaturalMovement.js +1 -1
- package/dist-es/tabs/drag-drop/useDragDropNaturalMovement.js.map +1 -1
- package/dist-es/tabs/drag-drop/useDragSpacers.js.map +1 -1
- package/dist-es/tabs/useEditableItem.js.map +1 -1
- package/dist-es/tabs/useKeyboardNavigation.js +1 -1
- package/dist-es/tabs/useKeyboardNavigation.js.map +1 -1
- package/dist-es/tabs/useSelection.js.map +1 -1
- package/dist-es/tabs/useTabs.js.map +1 -1
- package/dist-es/tabs/useTabstrip.js.map +1 -1
- package/dist-es/tabs-next/TabListNext.js.map +1 -1
- package/dist-es/tabs-next/TabNext.js.map +1 -1
- package/dist-es/tabs-next/TabNextAction.js.map +1 -1
- package/dist-es/tabs-next/TabNextContext.js.map +1 -1
- package/dist-es/tabs-next/TabNextPanel.js.map +1 -1
- package/dist-es/tabs-next/TabNextTrigger.js.map +1 -1
- package/dist-es/tabs-next/TabOverflowList.js.map +1 -1
- package/dist-es/tabs-next/TabsNext.js.map +1 -1
- package/dist-es/tabs-next/TabsNextContext.js.map +1 -1
- package/dist-es/tabs-next/hooks/useCollection.js +2 -2
- package/dist-es/tabs-next/hooks/useCollection.js.map +1 -1
- package/dist-es/tabs-next/hooks/useFocusOutside.js.map +1 -1
- package/dist-es/tabs-next/hooks/useOverflow.js.map +1 -1
- package/dist-es/tabs-next/hooks/useRestoreActiveTab.js.map +1 -1
- package/dist-es/tokenized-input/TokenizedInputBase.js.map +1 -1
- package/dist-es/tokenized-input/internal/InputPill.js.map +1 -1
- package/dist-es/tokenized-input/internal/getCursorPosition.js.map +1 -1
- package/dist-es/tokenized-input/internal/useResizeObserver.js.map +1 -1
- package/dist-es/tokenized-input/useTokenizedInput.js.map +1 -1
- package/dist-es/tokenized-input-next/TokenizedInputNext.js.map +1 -1
- package/dist-es/tokenized-input-next/internal/InputPill.js.map +1 -1
- package/dist-es/tokenized-input-next/internal/useResizeObserver.js.map +1 -1
- package/dist-es/tokenized-input-next/useTokenizedInputNext.js +1 -1
- package/dist-es/tokenized-input-next/useTokenizedInputNext.js.map +1 -1
- package/dist-es/toolbar/Tooltray.js.map +1 -1
- package/dist-es/toolbar/internal/renderToolbarItems.js.map +1 -1
- package/dist-es/toolbar/internal/renderTrayTools.js.map +1 -1
- package/dist-es/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
- package/dist-es/toolbar/toolbar-field/useToolbarField.js.map +1 -1
- package/dist-es/tree/Tree.js +2 -6
- package/dist-es/tree/Tree.js.map +1 -1
- package/dist-es/tree/TreeNode.js.map +1 -1
- package/dist-es/tree/use-tree-keyboard-navigation.js.map +1 -1
- package/dist-es/tree/useTree.js.map +1 -1
- package/dist-es/utils/useClickOutside.js.map +1 -1
- package/dist-es/utils/useSlideSelection.js.map +1 -1
- package/dist-es/window/ElectronWindow.js +1 -1
- package/dist-es/window/ElectronWindow.js.map +1 -1
- package/dist-types/calendar/Calendar.d.ts +22 -3
- package/dist-types/calendar/CalendarGrid.d.ts +19 -3
- package/dist-types/calendar/CalendarMonthHeader.d.ts +18 -0
- package/dist-types/calendar/CalendarNavigation.d.ts +9 -0
- package/dist-types/calendar/index.d.ts +1 -0
- package/dist-types/calendar/internal/CalendarDay.d.ts +25 -6
- package/dist-types/calendar/internal/CalendarMonth.d.ts +2 -6
- package/dist-types/calendar/internal/utils.d.ts +3 -7
- package/dist-types/calendar/useCalendar.d.ts +34 -30
- package/dist-types/calendar/useCalendarDay.d.ts +3 -2
- package/dist-types/calendar/useCalendarSelection.d.ts +60 -8
- package/dist-types/date-input/DateInputRange.d.ts +12 -8
- package/dist-types/date-input/DateInputSingle.d.ts +12 -8
- package/dist-types/date-picker/DatePicker.d.ts +14 -6
- package/dist-types/date-picker/DatePickerContext.d.ts +29 -1
- package/dist-types/date-picker/DatePickerHelperText.d.ts +4 -0
- package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +9 -2
- package/dist-types/date-picker/DatePickerRangeGridPanel.d.ts +17 -0
- package/dist-types/date-picker/DatePickerRangeInput.d.ts +1 -0
- package/dist-types/date-picker/DatePickerRangePanel.d.ts +24 -20
- package/dist-types/date-picker/DatePickerSingleGridPanel.d.ts +65 -0
- package/dist-types/date-picker/DatePickerSingleInput.d.ts +1 -0
- package/dist-types/date-picker/DatePickerSinglePanel.d.ts +6 -48
- package/dist-types/date-picker/index.d.ts +4 -1
- package/dist-types/date-picker/useDatePicker.d.ts +29 -9
- package/dist-types/date-picker/useFocusOut.d.ts +9 -0
- package/dist-types/date-picker/useKeyboard.d.ts +7 -1
- package/dist-types/index.d.ts +0 -1
- package/package.json +3 -4
- package/dist-cjs/calendar/CalendarGrid.css.js +0 -6
- package/dist-cjs/calendar/CalendarGrid.css.js.map +0 -1
- package/dist-cjs/combo-box-deprecated/internal/getAnnouncement.js +0 -8
- package/dist-cjs/combo-box-deprecated/internal/getAnnouncement.js.map +0 -1
- package/dist-cjs/splitter/SplitHandle.css.js +0 -6
- package/dist-cjs/splitter/SplitHandle.css.js.map +0 -1
- package/dist-cjs/splitter/SplitHandle.js +0 -60
- package/dist-cjs/splitter/SplitHandle.js.map +0 -1
- package/dist-cjs/splitter/SplitPanel.css.js +0 -6
- package/dist-cjs/splitter/SplitPanel.css.js.map +0 -1
- package/dist-cjs/splitter/SplitPanel.js +0 -37
- package/dist-cjs/splitter/SplitPanel.js.map +0 -1
- package/dist-cjs/splitter/Splitter.js +0 -31
- package/dist-cjs/splitter/Splitter.js.map +0 -1
- package/dist-cjs/splitter/utils.js +0 -18
- package/dist-cjs/splitter/utils.js.map +0 -1
- package/dist-es/calendar/CalendarGrid.css.js +0 -4
- package/dist-es/calendar/CalendarGrid.css.js.map +0 -1
- package/dist-es/combo-box-deprecated/internal/getAnnouncement.js +0 -6
- package/dist-es/combo-box-deprecated/internal/getAnnouncement.js.map +0 -1
- package/dist-es/splitter/SplitHandle.css.js +0 -4
- package/dist-es/splitter/SplitHandle.css.js.map +0 -1
- package/dist-es/splitter/SplitHandle.js +0 -58
- package/dist-es/splitter/SplitHandle.js.map +0 -1
- package/dist-es/splitter/SplitPanel.css.js +0 -4
- package/dist-es/splitter/SplitPanel.css.js.map +0 -1
- package/dist-es/splitter/SplitPanel.js +0 -35
- package/dist-es/splitter/SplitPanel.js.map +0 -1
- package/dist-es/splitter/Splitter.js +0 -27
- package/dist-es/splitter/Splitter.js.map +0 -1
- package/dist-es/splitter/utils.js +0 -15
- package/dist-es/splitter/utils.js.map +0 -1
- package/dist-types/splitter/SplitHandle.d.ts +0 -21
- package/dist-types/splitter/SplitPanel.d.ts +0 -10
- package/dist-types/splitter/Splitter.d.ts +0 -22
- package/dist-types/splitter/index.d.ts +0 -4
- package/dist-types/splitter/utils.d.ts +0 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDropdownBase.js","sources":["../src/dropdown/useDropdownBase.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { type KeyboardEvent, useCallback, useRef, useState } from \"react\";\n\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { WidthOnly, type measurements, useResizeObserver } from \"../responsive\";\nimport type { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\nimport { useClickAway } from \"./useClickAway\";\n\nconst NO_OBSERVER: string[] = [];\n\nexport const useDropdownBase = ({\n ariaLabelledBy: ariaLabelledByProp,\n defaultIsOpen,\n disabled,\n // TODO check how we're using fullWidth, do we need a separate value for the popup component\n fullWidth: fullWidthProp,\n id,\n isOpen: isOpenProp,\n onOpenChange,\n onKeyDown: onKeyDownProp,\n openOnFocus,\n popupWidth: popupWidthProp,\n rootRef,\n width,\n}: DropdownHookProps): DropdownHookResult => {\n const justFocused = useRef<number | null>(null);\n const popperRef = useRef<HTMLElement | null>(null);\n const popperCallbackRef = useCallback((element: HTMLElement | null) => {\n popperRef.current = element;\n }, []);\n const [isOpen, setIsOpen] = useControlled({\n controlled: isOpenProp,\n default: Boolean(defaultIsOpen),\n name: \"useDropdown\",\n state: \"isOpen\",\n });\n\n const {\n inFormField,\n setFocused: setFormFieldFocused,\n a11yProps: { \"aria-labelledby\": ariaLabelledBy, ...restA11yProps } = {},\n } = useFormFieldLegacyProps();\n\n const [popup, setPopup] = useState<measurements>({\n width: popupWidthProp ?? width ?? 0,\n });\n\n const showDropdown = useCallback(() => {\n setIsOpen(true);\n onOpenChange?.(true);\n }, [onOpenChange]);\n\n const hideDropdown = useCallback(() => {\n setIsOpen(false);\n onOpenChange?.(false);\n }, [onOpenChange]);\n\n useClickAway({\n popperRef,\n rootRef,\n isOpen,\n onClose: hideDropdown,\n });\n\n const handleTriggerFocus = useCallback(() => {\n if (!disabled) {\n setFormFieldFocused?.(true);\n\n if (openOnFocus) {\n setIsOpen(true);\n onOpenChange?.(true);\n // Suppress response to click if click was the cause of focus\n justFocused.current = window.setTimeout(() => {\n justFocused.current = null;\n }, 1000);\n }\n }\n }, [disabled, onOpenChange, openOnFocus, setFormFieldFocused]);\n\n const handleTriggerBlur = useCallback(() => {\n setFormFieldFocused?.(false);\n }, [setFormFieldFocused]);\n\n const handleTriggerToggle = useCallback(\n (e: MouseEvent) => {\n // Do not trigger menu open for 'Enter' and 'SPACE' key as they're handled in `handleKeyDown`\n if (\n [\"Enter\", \" \"].indexOf(\n (e as unknown as KeyboardEvent<HTMLDivElement>).key,\n ) === -1\n ) {\n const newIsOpen = !isOpen;\n setIsOpen(newIsOpen);\n onOpenChange?.(newIsOpen);\n }\n },\n [isOpen, onOpenChange],\n );\n\n const handleKeydown = useCallback(\n (evt: KeyboardEvent<HTMLElement>) => {\n if ((evt.key === \"Tab\" || evt.key === \"Escape\") && isOpen) {\n // No preventDefault here, this behaviour does not need to be exclusive\n hideDropdown();\n } else if (\n (evt.key === \"Enter\" || evt.key === \"ArrowDown\" || evt.key === \" \") &&\n !isOpen\n ) {\n evt.preventDefault();\n showDropdown();\n } else {\n onKeyDownProp?.(evt);\n }\n },\n [hideDropdown, isOpen, onKeyDownProp, showDropdown],\n );\n\n const fullWidth = fullWidthProp ?? inFormField;\n const measurements = fullWidth ? WidthOnly : NO_OBSERVER;\n useResizeObserver(rootRef, measurements, setPopup, fullWidth);\n\n const componentId = `${id}-dropdown`;\n\n const getAriaLabelledBy = (\n labelledBy: string | undefined,\n labelledByProp: string | undefined,\n ): string | undefined => {\n if (labelledBy === undefined && labelledByProp === undefined) {\n return undefined;\n }\n return [labelledBy, labelledByProp].filter((x) => !!x).join(\" \");\n };\n\n // TODO do we use aria-popup - valid values are menu, dialog, grid, tree, listbox\n const triggerProps = {\n ...restA11yProps,\n \"aria-expanded\": isOpen,\n \"aria-labelledby\": getAriaLabelledBy(ariaLabelledBy, ariaLabelledByProp),\n \"aria-owns\": isOpen ? componentId : undefined,\n id: `${id}-control`,\n onClick: disabled || openOnFocus ? undefined : handleTriggerToggle,\n onFocus: handleTriggerFocus,\n onBlur: handleTriggerBlur,\n role: \"listbox\",\n onKeyDown: disabled ? undefined : handleKeydown,\n style: { width: fullWidth ? undefined : width },\n };\n\n const dropdownComponentProps = {\n \"aria-labelledby\": ariaLabelledBy,\n id: componentId,\n width: popup.width,\n };\n\n return {\n componentProps: dropdownComponentProps,\n popperRef: popperCallbackRef,\n isOpen,\n label: \"Dropdown Button\",\n triggerProps,\n };\n};\n"],"names":["useRef","useCallback","useControlled","useFormFieldLegacyProps","useState","useClickAway","WidthOnly","useResizeObserver"],"mappings":";;;;;;;;;;AAQA,MAAM,cAAwB,EAAC;AAExB,MAAM,kBAAkB,CAAC;AAAA,EAC9B,cAAgB,EAAA,kBAAA;AAAA,EAChB,aAAA;AAAA,EACA,QAAA;AAAA;AAAA,EAEA,SAAW,EAAA,aAAA;AAAA,EACX,EAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,YAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,WAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,OAAA;AAAA,EACA;AACF,CAA6C,KAAA;AAC3C,EAAM,MAAA,WAAA,GAAcA,aAAsB,IAAI,CAAA;AAC9C,EAAM,MAAA,SAAA,GAAYA,aAA2B,IAAI,CAAA;AACjD,EAAM,MAAA,iBAAA,GAAoBC,iBAAY,CAAA,CAAC,OAAgC,KAAA;AACrE,IAAA,SAAA,CAAU,OAAU,GAAA,OAAA;AAAA,GACtB,EAAG,EAAE,CAAA;AACL,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIC,kBAAc,CAAA;AAAA,IACxC,UAAY,EAAA,UAAA;AAAA,IACZ,OAAA,EAAS,QAAQ,aAAa,CAAA;AAAA,IAC9B,IAAM,EAAA,aAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,UAAY,EAAA,mBAAA;AAAA,IACZ,WAAW,EAAE,iBAAA,EAAmB,gBAAgB,GAAG,aAAA,KAAkB;AAAC,MACpEC,+CAAwB,EAAA;AAE5B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,cAAuB,CAAA;AAAA,IAC/C,KAAA,EAAO,kBAAkB,KAAS,IAAA;AAAA,GACnC,CAAA;AAED,EAAM,MAAA,YAAA,GAAeH,kBAAY,MAAM;AACrC,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAe,YAAA,IAAA,IAAA,GAAA,
|
|
1
|
+
{"version":3,"file":"useDropdownBase.js","sources":["../src/dropdown/useDropdownBase.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { type KeyboardEvent, useCallback, useRef, useState } from \"react\";\n\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { WidthOnly, type measurements, useResizeObserver } from \"../responsive\";\nimport type { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\nimport { useClickAway } from \"./useClickAway\";\n\nconst NO_OBSERVER: string[] = [];\n\nexport const useDropdownBase = ({\n ariaLabelledBy: ariaLabelledByProp,\n defaultIsOpen,\n disabled,\n // TODO check how we're using fullWidth, do we need a separate value for the popup component\n fullWidth: fullWidthProp,\n id,\n isOpen: isOpenProp,\n onOpenChange,\n onKeyDown: onKeyDownProp,\n openOnFocus,\n popupWidth: popupWidthProp,\n rootRef,\n width,\n}: DropdownHookProps): DropdownHookResult => {\n const justFocused = useRef<number | null>(null);\n const popperRef = useRef<HTMLElement | null>(null);\n const popperCallbackRef = useCallback((element: HTMLElement | null) => {\n popperRef.current = element;\n }, []);\n const [isOpen, setIsOpen] = useControlled({\n controlled: isOpenProp,\n default: Boolean(defaultIsOpen),\n name: \"useDropdown\",\n state: \"isOpen\",\n });\n\n const {\n inFormField,\n setFocused: setFormFieldFocused,\n a11yProps: { \"aria-labelledby\": ariaLabelledBy, ...restA11yProps } = {},\n } = useFormFieldLegacyProps();\n\n const [popup, setPopup] = useState<measurements>({\n width: popupWidthProp ?? width ?? 0,\n });\n\n const showDropdown = useCallback(() => {\n setIsOpen(true);\n onOpenChange?.(true);\n }, [onOpenChange]);\n\n const hideDropdown = useCallback(() => {\n setIsOpen(false);\n onOpenChange?.(false);\n }, [onOpenChange]);\n\n useClickAway({\n popperRef,\n rootRef,\n isOpen,\n onClose: hideDropdown,\n });\n\n const handleTriggerFocus = useCallback(() => {\n if (!disabled) {\n setFormFieldFocused?.(true);\n\n if (openOnFocus) {\n setIsOpen(true);\n onOpenChange?.(true);\n // Suppress response to click if click was the cause of focus\n justFocused.current = window.setTimeout(() => {\n justFocused.current = null;\n }, 1000);\n }\n }\n }, [disabled, onOpenChange, openOnFocus, setFormFieldFocused]);\n\n const handleTriggerBlur = useCallback(() => {\n setFormFieldFocused?.(false);\n }, [setFormFieldFocused]);\n\n const handleTriggerToggle = useCallback(\n (e: MouseEvent) => {\n // Do not trigger menu open for 'Enter' and 'SPACE' key as they're handled in `handleKeyDown`\n if (\n [\"Enter\", \" \"].indexOf(\n (e as unknown as KeyboardEvent<HTMLDivElement>).key,\n ) === -1\n ) {\n const newIsOpen = !isOpen;\n setIsOpen(newIsOpen);\n onOpenChange?.(newIsOpen);\n }\n },\n [isOpen, onOpenChange],\n );\n\n const handleKeydown = useCallback(\n (evt: KeyboardEvent<HTMLElement>) => {\n if ((evt.key === \"Tab\" || evt.key === \"Escape\") && isOpen) {\n // No preventDefault here, this behaviour does not need to be exclusive\n hideDropdown();\n } else if (\n (evt.key === \"Enter\" || evt.key === \"ArrowDown\" || evt.key === \" \") &&\n !isOpen\n ) {\n evt.preventDefault();\n showDropdown();\n } else {\n onKeyDownProp?.(evt);\n }\n },\n [hideDropdown, isOpen, onKeyDownProp, showDropdown],\n );\n\n const fullWidth = fullWidthProp ?? inFormField;\n const measurements = fullWidth ? WidthOnly : NO_OBSERVER;\n useResizeObserver(rootRef, measurements, setPopup, fullWidth);\n\n const componentId = `${id}-dropdown`;\n\n const getAriaLabelledBy = (\n labelledBy: string | undefined,\n labelledByProp: string | undefined,\n ): string | undefined => {\n if (labelledBy === undefined && labelledByProp === undefined) {\n return undefined;\n }\n return [labelledBy, labelledByProp].filter((x) => !!x).join(\" \");\n };\n\n // TODO do we use aria-popup - valid values are menu, dialog, grid, tree, listbox\n const triggerProps = {\n ...restA11yProps,\n \"aria-expanded\": isOpen,\n \"aria-labelledby\": getAriaLabelledBy(ariaLabelledBy, ariaLabelledByProp),\n \"aria-owns\": isOpen ? componentId : undefined,\n id: `${id}-control`,\n onClick: disabled || openOnFocus ? undefined : handleTriggerToggle,\n onFocus: handleTriggerFocus,\n onBlur: handleTriggerBlur,\n role: \"listbox\",\n onKeyDown: disabled ? undefined : handleKeydown,\n style: { width: fullWidth ? undefined : width },\n };\n\n const dropdownComponentProps = {\n \"aria-labelledby\": ariaLabelledBy,\n id: componentId,\n width: popup.width,\n };\n\n return {\n componentProps: dropdownComponentProps,\n popperRef: popperCallbackRef,\n isOpen,\n label: \"Dropdown Button\",\n triggerProps,\n };\n};\n"],"names":["useRef","useCallback","useControlled","useFormFieldLegacyProps","useState","useClickAway","WidthOnly","useResizeObserver"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableLabel.js","sources":["../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type ReactElement,\n forwardRef,\n useCallback,\n useRef,\n} from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"saltEditableLabel\";\n\nexport interface EditableLabelProps {\n className?: string;\n defaultEditing?: boolean;\n defaultValue?: string;\n editing?: boolean;\n onEnterEditMode: () => void;\n onChange?: (value: string) => void;\n onExitEditMode: (\n originalLabel: string | undefined,\n editedLabel: string | undefined,\n allowDeactivation?: boolean,\n ) => void;\n defaultIsEditing?: boolean;\n value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n {\n className: classNameProp,\n defaultEditing,\n defaultValue,\n editing: editingProp,\n onChange,\n onEnterEditMode,\n onExitEditMode,\n value: valueProp,\n }: EditableLabelProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n): ReactElement<EditableLabelProps> {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-editable-label\",\n css: editableLabelCss,\n window: targetWindow,\n });\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue ?? \"\",\n name: \"EditableLabel\",\n state: \"value\",\n });\n\n const [editing, setEditing] = useControlled({\n controlled: editingProp,\n default: defaultEditing || false,\n name: \"EditableLabel\",\n state: \"editing\",\n });\n\n const initialValue = useRef(value);\n\n useIsomorphicLayoutEffect(() => {\n if (editing) {\n if (inputRef.current !== null) {\n inputRef.current.select();\n inputRef.current.focus();\n }\n }\n }, [editing]);\n\n const enterEditMode = useCallback(() => {\n setEditing(true);\n // ignoreBlur.current = false;\n onEnterEditMode?.();\n }, [onEnterEditMode]);\n\n const exitEditMode = ({\n cancelEdit = false,\n allowDeactivation = false,\n } = {}) => {\n setEditing(false);\n const originalValue = initialValue.current;\n if (originalValue !== value) {\n if (cancelEdit) {\n setValue(originalValue);\n } else {\n initialValue.current = value;\n }\n }\n onExitEditMode?.(originalValue, value, allowDeactivation);\n };\n\n const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n const { value } = evt.target;\n setValue(value);\n onChange?.(value);\n };\n\n const handleDoubleClick = () => {\n enterEditMode();\n };\n\n const handleBlur = () => {\n exitEditMode({ allowDeactivation: true });\n };\n\n const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n if (editing && evt.key === \"Enter\") {\n evt.stopPropagation();\n // we are likely to lose focus as a consequence of user response\n // to exitEdit transition, don't want it to trigger another\n //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n exitEditMode();\n } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n evt.stopPropagation();\n } else if (evt.key === \"Escape\") {\n exitEditMode({ cancelEdit: true });\n }\n };\n\n const className = clsx(classBase, classNameProp, {\n [`${classBase}-editing`]: editing,\n });\n return (\n <div\n className={className}\n onDoubleClick={handleDoubleClick}\n data-text={value}\n ref={forwardedRef}\n >\n {editing ? (\n <Input\n inputProps={{ className: `${classBase}-input` }}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n ref={inputRef}\n style={{ padding: 0 }}\n textAlign=\"left\"\n />\n ) : (\n value\n )}\n </div>\n );\n});\n"],"names":["forwardRef","EditableLabel","useWindow","useComponentCssInjection","editableLabelCss","useRef","useControlled","useIsomorphicLayoutEffect","useCallback","value","clsx","jsx","Input"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,SAAY,GAAA,mBAAA;AAkBL,MAAA,aAAA,GAAgBA,gBAAW,CAAA,SAASC,cAC/C,CAAA;AAAA,EACE,SAAW,EAAA,aAAA;AAAA,EACX,cAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAS,EAAA,WAAA;AAAA,EACT,QAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,KAAO,EAAA;AACT,CAAA,EACA,YACkC,EAAA;AAClC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,QAAA,GAAWC,aAAgC,IAAI,CAAA;AAErD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,kBAAc,CAAA;AAAA,IACtC,UAAY,EAAA,SAAA;AAAA,IACZ,SAAS,YAAgB,IAAA,EAAA;AAAA,IACzB,IAAM,EAAA,eAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,kBAAc,CAAA;AAAA,IAC1C,UAAY,EAAA,WAAA;AAAA,IACZ,SAAS,cAAkB,IAAA,KAAA;AAAA,IAC3B,IAAM,EAAA,eAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA,YAAA,GAAeD,aAAO,KAAK,CAAA;AAEjC,EAAAE,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,OAAS,EAAA;AACX,MAAI,IAAA,QAAA,CAAS,YAAY,IAAM,EAAA;AAC7B,QAAA,QAAA,CAAS,QAAQ,MAAO,EAAA;AACxB,QAAA,QAAA,CAAS,QAAQ,KAAM,EAAA;AAAA;AACzB;AACF,GACF,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAM,MAAA,aAAA,GAAgBC,kBAAY,MAAM;AACtC,IAAA,UAAA,CAAW,IAAI,CAAA;AAEf,IAAA,eAAA,IAAA,IAAA,GAAA,
|
|
1
|
+
{"version":3,"file":"EditableLabel.js","sources":["../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type ReactElement,\n forwardRef,\n useCallback,\n useRef,\n} from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"saltEditableLabel\";\n\nexport interface EditableLabelProps {\n className?: string;\n defaultEditing?: boolean;\n defaultValue?: string;\n editing?: boolean;\n onEnterEditMode: () => void;\n onChange?: (value: string) => void;\n onExitEditMode: (\n originalLabel: string | undefined,\n editedLabel: string | undefined,\n allowDeactivation?: boolean,\n ) => void;\n defaultIsEditing?: boolean;\n value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n {\n className: classNameProp,\n defaultEditing,\n defaultValue,\n editing: editingProp,\n onChange,\n onEnterEditMode,\n onExitEditMode,\n value: valueProp,\n }: EditableLabelProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n): ReactElement<EditableLabelProps> {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-editable-label\",\n css: editableLabelCss,\n window: targetWindow,\n });\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue ?? \"\",\n name: \"EditableLabel\",\n state: \"value\",\n });\n\n const [editing, setEditing] = useControlled({\n controlled: editingProp,\n default: defaultEditing || false,\n name: \"EditableLabel\",\n state: \"editing\",\n });\n\n const initialValue = useRef(value);\n\n useIsomorphicLayoutEffect(() => {\n if (editing) {\n if (inputRef.current !== null) {\n inputRef.current.select();\n inputRef.current.focus();\n }\n }\n }, [editing]);\n\n const enterEditMode = useCallback(() => {\n setEditing(true);\n // ignoreBlur.current = false;\n onEnterEditMode?.();\n }, [onEnterEditMode]);\n\n const exitEditMode = ({\n cancelEdit = false,\n allowDeactivation = false,\n } = {}) => {\n setEditing(false);\n const originalValue = initialValue.current;\n if (originalValue !== value) {\n if (cancelEdit) {\n setValue(originalValue);\n } else {\n initialValue.current = value;\n }\n }\n onExitEditMode?.(originalValue, value, allowDeactivation);\n };\n\n const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n const { value } = evt.target;\n setValue(value);\n onChange?.(value);\n };\n\n const handleDoubleClick = () => {\n enterEditMode();\n };\n\n const handleBlur = () => {\n exitEditMode({ allowDeactivation: true });\n };\n\n const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n if (editing && evt.key === \"Enter\") {\n evt.stopPropagation();\n // we are likely to lose focus as a consequence of user response\n // to exitEdit transition, don't want it to trigger another\n //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n exitEditMode();\n } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n evt.stopPropagation();\n } else if (evt.key === \"Escape\") {\n exitEditMode({ cancelEdit: true });\n }\n };\n\n const className = clsx(classBase, classNameProp, {\n [`${classBase}-editing`]: editing,\n });\n return (\n <div\n className={className}\n onDoubleClick={handleDoubleClick}\n data-text={value}\n ref={forwardedRef}\n >\n {editing ? (\n <Input\n inputProps={{ className: `${classBase}-input` }}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n ref={inputRef}\n style={{ padding: 0 }}\n textAlign=\"left\"\n />\n ) : (\n value\n )}\n </div>\n );\n});\n"],"names":["forwardRef","EditableLabel","useWindow","useComponentCssInjection","editableLabelCss","useRef","useControlled","useIsomorphicLayoutEffect","useCallback","value","clsx","jsx","Input"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldLegacy.js","sources":["../src/form-field-legacy/FormFieldLegacy.tsx"],"sourcesContent":["import { Tooltip, makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type Dispatch,\n type ElementType,\n type FocusEventHandler,\n type ForwardedRef,\n type HTMLAttributes,\n type SetStateAction,\n forwardRef,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { FormFieldLegacyContext } from \"../form-field-context-legacy\";\nimport {\n FormActivationIndicator,\n type FormActivationIndicatorProps,\n} from \"./FormActivationIndicator\";\nimport { FormHelperText, type FormHelperTextProps } from \"./FormHelperText\";\nimport { FormLabel, type FormLabelProps } from \"./FormLabel\";\nimport type { NecessityIndicatorOptions } from \"./NecessityIndicator\";\nimport type { StatusIndicatorProps } from \"./StatusIndicator\";\nimport { classBase } from \"./constant\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport formFieldLegacyCss from \"./FormFieldLegacy.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\nexport type FormFieldHelperTextPlacement = \"bottom\" | \"tooltip\";\nexport type FormFieldValidationStatus = \"error\" | \"warning\";\n\nexport interface A11yValueProps\n extends Pick<NecessityIndicatorOptions, \"required\"> {\n /**\n * If `true`, the FormField will be disabled.\n */\n disabled?: boolean;\n /** id of the helper text node */\n helperTextId?: string;\n /** id of the label node */\n labelId?: string;\n /**\n * The FormField value is Readonly\n */\n readOnly?: boolean;\n\n /**\n * Whether the form field needs to render helper text\n */\n renderHelperText?: boolean;\n}\n\nexport interface FormFieldLegacyProps\n extends HTMLAttributes<HTMLDivElement>,\n A11yValueProps {\n /**\n * The component used for activation indicator. Default to `FormActivationIndicator`.\n */\n ActivationIndicatorComponent?: ElementType<FormActivationIndicatorProps>;\n /**\n * Outer focus ring focus will not be applied. Defaults to false.\n */\n disableFocusRing?: boolean;\n // I hate this fullWidth business. We should support a width prop. The default should be 100% (standard block behaviour)\n // we should also support 'auto' or explicit numeric values\n /**\n * Whether the form field is occupying full width.\n */\n fullWidth?: boolean;\n /**\n * Whether to show the StatusIndicator component for validation states.\n */\n hasStatusIndicator?: boolean;\n /**\n * The helper text content\n */\n helperText?: string;\n /**\n * The component used for the helper text. Default to `FormHelperText`.\n */\n HelperTextComponent?: ElementType<FormHelperTextProps>;\n /**\n * Location the helperText, values: 'bottom' (default) or 'tooltip'.\n */\n helperTextPlacement?: FormFieldHelperTextPlacement;\n /**\n * Props to be applied to the `HelperTextComponent`.\n *\n * Generic on `FormHelperTextProps` is omitted.\n */\n HelperTextProps?: Partial<FormHelperTextProps>;\n /**\n * The label value for the FormField\n */\n label?: string;\n /**\n * The component used for the label. Default to `FormLabel`.\n */\n LabelComponent?: ElementType;\n /**\n * Location the label, values: 'top' (default) or 'left'\n */\n labelPlacement?: FormFieldLabelPlacement;\n /**\n * Props to be applied to the `LabelComponent`\n */\n LabelProps?: Partial<FormLabelProps>;\n /**\n * Override props to be used with the StatusIndicator component\n */\n StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n /**\n * The state for the FormField: Must be one of: 'error'|'warning'|undefined\n */\n validationStatus?: FormFieldValidationStatus;\n /**\n * FormField variants; defaults to primary.\n *\n * **Deprecated:** The 'tertiary' variant has been deprecated\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport interface useA11yValueValue {\n \"aria-labelledby\": A11yValueProps[\"labelId\"];\n \"aria-required\": A11yValueProps[\"required\"];\n \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n disabled: A11yValueProps[\"disabled\"];\n readOnly: A11yValueProps[\"readOnly\"];\n}\n\nconst useA11yValue = ({\n required,\n disabled,\n readOnly,\n labelId,\n helperTextId,\n renderHelperText,\n}: A11yValueProps) => {\n return useMemo(\n () => ({\n \"aria-labelledby\": labelId,\n \"aria-required\": required,\n \"aria-describedby\": renderHelperText ? helperTextId : undefined,\n disabled,\n readOnly,\n }),\n [labelId, disabled, readOnly, required, renderHelperText, helperTextId],\n );\n};\n\n// TODO: Add TS props for this\nexport const useFormFieldLegacy = ({\n onBlur,\n onFocus,\n}: {\n onBlur?: FocusEventHandler<HTMLDivElement>;\n onFocus?: FocusEventHandler<HTMLDivElement>;\n}): [\n { focused: boolean },\n { setFocused: Dispatch<SetStateAction<boolean>> },\n {\n onBlur: FocusEventHandler<HTMLDivElement>;\n onFocus: FocusEventHandler<HTMLDivElement>;\n },\n] => {\n const [focused, setFocused] = useState(false);\n const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n setFocused(false);\n onBlur?.(event);\n };\n const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n setFocused(true);\n onFocus?.(event);\n };\n return [\n {\n focused,\n },\n {\n setFocused,\n },\n {\n onBlur: handleBlur,\n onFocus: handleFocus,\n },\n ];\n};\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const FormFieldLegacy = forwardRef(\n (\n {\n ActivationIndicatorComponent = FormActivationIndicator,\n children,\n className,\n disabled,\n disableFocusRing = false,\n fullWidth = true,\n hasStatusIndicator,\n HelperTextComponent = FormHelperText,\n HelperTextProps,\n helperText,\n helperTextPlacement = \"bottom\",\n label,\n LabelComponent = FormLabel,\n labelPlacement = \"top\",\n LabelProps = { displayedNecessity: \"required\" },\n onBlur,\n onFocus,\n readOnly,\n required,\n StatusIndicatorProps,\n validationStatus,\n variant = \"primary\",\n ...restProps\n }: FormFieldLegacyProps,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field-legacy\",\n css: formFieldLegacyCss,\n window: targetWindow,\n });\n\n const labelId = useId(LabelProps?.id);\n const helperTextId = useId(HelperTextProps?.id);\n const rootRef = useRef<HTMLDivElement>(null);\n\n const renderHelperText = !!helperText;\n\n const a11yValue = useA11yValue({\n required,\n disabled,\n readOnly,\n labelId,\n helperTextId,\n renderHelperText,\n });\n\n const [states, dispatchers, eventHandlers] = useFormFieldLegacy({\n onBlur,\n onFocus,\n });\n\n const hasLabel = label !== undefined;\n const labelTop = hasLabel && labelPlacement === \"top\";\n const labelLeft = hasLabel && labelPlacement === \"left\";\n const isWarning = validationStatus === \"warning\";\n const isError = validationStatus === \"error\";\n const focusClass = disableFocusRing\n ? \"lowFocused\"\n : \"focused\"; /* NOTE: need to look at */\n const inlineHelperText =\n renderHelperText && helperTextPlacement === \"bottom\";\n const tooltipHelperText =\n renderHelperText &&\n helperTextPlacement === \"tooltip\" &&\n !hasStatusIndicator;\n\n const handleTriggerRef = useForkRef(rootRef, ref);\n\n return (\n <Tooltip disabled={!tooltipHelperText} content={helperText}>\n <div\n ref={handleTriggerRef}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"warning\")]: isWarning,\n [withBaseName(\"error\")]: isError,\n [withBaseName(\"fullWidth\")]: fullWidth,\n [withBaseName(focusClass)]: states.focused,\n [withBaseName(\"labelTop\")]: labelTop,\n [withBaseName(\"labelLeft\")]: labelLeft,\n [withBaseName(\"withHelperText\")]: inlineHelperText,\n [withBaseName(variant)]: variant,\n },\n className,\n )}\n {...eventHandlers}\n {...restProps}\n >\n <FormFieldLegacyContext.Provider\n value={{\n ...states,\n ...dispatchers,\n ...eventHandlers,\n a11yProps: a11yValue,\n inFormField: true,\n ref: rootRef,\n }}\n >\n {hasLabel && (\n <LabelComponent\n {...LabelProps}\n validationStatus={validationStatus}\n hasStatusIndicator={hasStatusIndicator}\n StatusIndicatorProps={StatusIndicatorProps}\n className={LabelProps.className}\n label={label}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n tooltipText={helperText}\n id={labelId}\n />\n )}\n {children}\n <ActivationIndicatorComponent\n hasIcon={!hasStatusIndicator}\n validationStatus={validationStatus}\n />\n {renderHelperText && (\n <HelperTextComponent\n helperText={helperText}\n helperTextPlacement={helperTextPlacement}\n {...HelperTextProps}\n id={helperTextId}\n />\n )}\n </FormFieldLegacyContext.Provider>\n </div>\n </Tooltip>\n );\n },\n);\n"],"names":["useMemo","useState","makePrefixer","classBase","forwardRef","FormActivationIndicator","FormHelperText","FormLabel","useWindow","useComponentCssInjection","formFieldLegacyCss","useId","useRef","useForkRef","Tooltip","jsx","clsx","jsxs","FormFieldLegacyContext"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FormFieldLegacy.js","sources":["../src/form-field-legacy/FormFieldLegacy.tsx"],"sourcesContent":["import { Tooltip, makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type Dispatch,\n type ElementType,\n type FocusEventHandler,\n type ForwardedRef,\n type HTMLAttributes,\n type SetStateAction,\n forwardRef,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { FormFieldLegacyContext } from \"../form-field-context-legacy\";\nimport {\n FormActivationIndicator,\n type FormActivationIndicatorProps,\n} from \"./FormActivationIndicator\";\nimport { FormHelperText, type FormHelperTextProps } from \"./FormHelperText\";\nimport { FormLabel, type FormLabelProps } from \"./FormLabel\";\nimport type { NecessityIndicatorOptions } from \"./NecessityIndicator\";\nimport type { StatusIndicatorProps } from \"./StatusIndicator\";\nimport { classBase } from \"./constant\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport formFieldLegacyCss from \"./FormFieldLegacy.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\nexport type FormFieldHelperTextPlacement = \"bottom\" | \"tooltip\";\nexport type FormFieldValidationStatus = \"error\" | \"warning\";\n\nexport interface A11yValueProps\n extends Pick<NecessityIndicatorOptions, \"required\"> {\n /**\n * If `true`, the FormField will be disabled.\n */\n disabled?: boolean;\n /** id of the helper text node */\n helperTextId?: string;\n /** id of the label node */\n labelId?: string;\n /**\n * The FormField value is Readonly\n */\n readOnly?: boolean;\n\n /**\n * Whether the form field needs to render helper text\n */\n renderHelperText?: boolean;\n}\n\nexport interface FormFieldLegacyProps\n extends HTMLAttributes<HTMLDivElement>,\n A11yValueProps {\n /**\n * The component used for activation indicator. Default to `FormActivationIndicator`.\n */\n ActivationIndicatorComponent?: ElementType<FormActivationIndicatorProps>;\n /**\n * Outer focus ring focus will not be applied. Defaults to false.\n */\n disableFocusRing?: boolean;\n // I hate this fullWidth business. We should support a width prop. The default should be 100% (standard block behaviour)\n // we should also support 'auto' or explicit numeric values\n /**\n * Whether the form field is occupying full width.\n */\n fullWidth?: boolean;\n /**\n * Whether to show the StatusIndicator component for validation states.\n */\n hasStatusIndicator?: boolean;\n /**\n * The helper text content\n */\n helperText?: string;\n /**\n * The component used for the helper text. Default to `FormHelperText`.\n */\n HelperTextComponent?: ElementType<FormHelperTextProps>;\n /**\n * Location the helperText, values: 'bottom' (default) or 'tooltip'.\n */\n helperTextPlacement?: FormFieldHelperTextPlacement;\n /**\n * Props to be applied to the `HelperTextComponent`.\n *\n * Generic on `FormHelperTextProps` is omitted.\n */\n HelperTextProps?: Partial<FormHelperTextProps>;\n /**\n * The label value for the FormField\n */\n label?: string;\n /**\n * The component used for the label. Default to `FormLabel`.\n */\n LabelComponent?: ElementType;\n /**\n * Location the label, values: 'top' (default) or 'left'\n */\n labelPlacement?: FormFieldLabelPlacement;\n /**\n * Props to be applied to the `LabelComponent`\n */\n LabelProps?: Partial<FormLabelProps>;\n /**\n * Override props to be used with the StatusIndicator component\n */\n StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n /**\n * The state for the FormField: Must be one of: 'error'|'warning'|undefined\n */\n validationStatus?: FormFieldValidationStatus;\n /**\n * FormField variants; defaults to primary.\n *\n * **Deprecated:** The 'tertiary' variant has been deprecated\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport interface useA11yValueValue {\n \"aria-labelledby\": A11yValueProps[\"labelId\"];\n \"aria-required\": A11yValueProps[\"required\"];\n \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n disabled: A11yValueProps[\"disabled\"];\n readOnly: A11yValueProps[\"readOnly\"];\n}\n\nconst useA11yValue = ({\n required,\n disabled,\n readOnly,\n labelId,\n helperTextId,\n renderHelperText,\n}: A11yValueProps) => {\n return useMemo(\n () => ({\n \"aria-labelledby\": labelId,\n \"aria-required\": required,\n \"aria-describedby\": renderHelperText ? helperTextId : undefined,\n disabled,\n readOnly,\n }),\n [labelId, disabled, readOnly, required, renderHelperText, helperTextId],\n );\n};\n\n// TODO: Add TS props for this\nexport const useFormFieldLegacy = ({\n onBlur,\n onFocus,\n}: {\n onBlur?: FocusEventHandler<HTMLDivElement>;\n onFocus?: FocusEventHandler<HTMLDivElement>;\n}): [\n { focused: boolean },\n { setFocused: Dispatch<SetStateAction<boolean>> },\n {\n onBlur: FocusEventHandler<HTMLDivElement>;\n onFocus: FocusEventHandler<HTMLDivElement>;\n },\n] => {\n const [focused, setFocused] = useState(false);\n const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n setFocused(false);\n onBlur?.(event);\n };\n const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n setFocused(true);\n onFocus?.(event);\n };\n return [\n {\n focused,\n },\n {\n setFocused,\n },\n {\n onBlur: handleBlur,\n onFocus: handleFocus,\n },\n ];\n};\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const FormFieldLegacy = forwardRef(\n (\n {\n ActivationIndicatorComponent = FormActivationIndicator,\n children,\n className,\n disabled,\n disableFocusRing = false,\n fullWidth = true,\n hasStatusIndicator,\n HelperTextComponent = FormHelperText,\n HelperTextProps,\n helperText,\n helperTextPlacement = \"bottom\",\n label,\n LabelComponent = FormLabel,\n labelPlacement = \"top\",\n LabelProps = { displayedNecessity: \"required\" },\n onBlur,\n onFocus,\n readOnly,\n required,\n StatusIndicatorProps,\n validationStatus,\n variant = \"primary\",\n ...restProps\n }: FormFieldLegacyProps,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field-legacy\",\n css: formFieldLegacyCss,\n window: targetWindow,\n });\n\n const labelId = useId(LabelProps?.id);\n const helperTextId = useId(HelperTextProps?.id);\n const rootRef = useRef<HTMLDivElement>(null);\n\n const renderHelperText = !!helperText;\n\n const a11yValue = useA11yValue({\n required,\n disabled,\n readOnly,\n labelId,\n helperTextId,\n renderHelperText,\n });\n\n const [states, dispatchers, eventHandlers] = useFormFieldLegacy({\n onBlur,\n onFocus,\n });\n\n const hasLabel = label !== undefined;\n const labelTop = hasLabel && labelPlacement === \"top\";\n const labelLeft = hasLabel && labelPlacement === \"left\";\n const isWarning = validationStatus === \"warning\";\n const isError = validationStatus === \"error\";\n const focusClass = disableFocusRing\n ? \"lowFocused\"\n : \"focused\"; /* NOTE: need to look at */\n const inlineHelperText =\n renderHelperText && helperTextPlacement === \"bottom\";\n const tooltipHelperText =\n renderHelperText &&\n helperTextPlacement === \"tooltip\" &&\n !hasStatusIndicator;\n\n const handleTriggerRef = useForkRef(rootRef, ref);\n\n return (\n <Tooltip disabled={!tooltipHelperText} content={helperText}>\n <div\n ref={handleTriggerRef}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"warning\")]: isWarning,\n [withBaseName(\"error\")]: isError,\n [withBaseName(\"fullWidth\")]: fullWidth,\n [withBaseName(focusClass)]: states.focused,\n [withBaseName(\"labelTop\")]: labelTop,\n [withBaseName(\"labelLeft\")]: labelLeft,\n [withBaseName(\"withHelperText\")]: inlineHelperText,\n [withBaseName(variant)]: variant,\n },\n className,\n )}\n {...eventHandlers}\n {...restProps}\n >\n <FormFieldLegacyContext.Provider\n value={{\n ...states,\n ...dispatchers,\n ...eventHandlers,\n a11yProps: a11yValue,\n inFormField: true,\n ref: rootRef,\n }}\n >\n {hasLabel && (\n <LabelComponent\n {...LabelProps}\n validationStatus={validationStatus}\n hasStatusIndicator={hasStatusIndicator}\n StatusIndicatorProps={StatusIndicatorProps}\n className={LabelProps.className}\n label={label}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n tooltipText={helperText}\n id={labelId}\n />\n )}\n {children}\n <ActivationIndicatorComponent\n hasIcon={!hasStatusIndicator}\n validationStatus={validationStatus}\n />\n {renderHelperText && (\n <HelperTextComponent\n helperText={helperText}\n helperTextPlacement={helperTextPlacement}\n {...HelperTextProps}\n id={helperTextId}\n />\n )}\n </FormFieldLegacyContext.Provider>\n </div>\n </Tooltip>\n );\n },\n);\n"],"names":["useMemo","useState","makePrefixer","classBase","forwardRef","FormActivationIndicator","FormHelperText","FormLabel","useWindow","useComponentCssInjection","formFieldLegacyCss","useId","useRef","useForkRef","Tooltip","jsx","clsx","jsxs","FormFieldLegacyContext"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusIndicator.js","sources":["../src/form-field-legacy/StatusIndicator.tsx"],"sourcesContent":["import {\n StatusIndicator as BaseStatusIndicator,\n Tooltip,\n type TooltipProps,\n makePrefixer,\n} from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport type { ElementType } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport type StatusIndicatorStatus = \"error\" | \"info\" | \"warning\" | \"success\";\n\nexport interface StatusIndicatorProps extends IconProps {\n hasTooltip?: boolean;\n IconProps?: Partial<IconProps>;\n status?: StatusIndicatorStatus;\n TooltipComponent?: ElementType<TooltipProps>;\n TooltipProps?: Partial<TooltipProps>;\n tooltipText?: string;\n}\n\nexport const StatusIndicator = (props: StatusIndicatorProps) => {\n const {\n TooltipComponent = Tooltip,\n hasTooltip = false,\n TooltipProps,\n tooltipText,\n IconProps,\n className,\n status = \"info\",\n ...restProps\n } = props;\n\n return (\n <TooltipComponent\n hideIcon\n status={status}\n content={tooltipText}\n placement=\"top\"\n disabled={!hasTooltip}\n {...TooltipProps}\n >\n <BaseStatusIndicator\n status={status}\n {...restProps}\n {...IconProps}\n className={clsx(\n withBaseName(\"statusIndicator\"),\n className,\n IconProps?.className,\n )}\n />\n </TooltipComponent>\n );\n};\n"],"names":["makePrefixer","Tooltip","jsx","BaseStatusIndicator","clsx"],"mappings":";;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA;AAapC,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA;AAAA,IACJ,gBAAmB,GAAAC,YAAA;AAAA,IACnB,UAAa,GAAA,KAAA;AAAA,IACb,YAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACT,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EACE,uBAAAC,cAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,QAAQ,EAAA,IAAA;AAAA,MACR,MAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,SAAU,EAAA,KAAA;AAAA,MACV,UAAU,CAAC,UAAA;AAAA,MACV,GAAG,YAAA;AAAA,MAEJ,QAAA,kBAAAA,cAAA;AAAA,QAACC,oBAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACC,GAAG,SAAA;AAAA,UACH,GAAG,SAAA;AAAA,UACJ,SAAW,EAAAC,SAAA;AAAA,YACT,aAAa,iBAAiB,CAAA;AAAA,YAC9B,SAAA;AAAA,YACA,SAAW,IAAA,IAAA,GAAA,
|
|
1
|
+
{"version":3,"file":"StatusIndicator.js","sources":["../src/form-field-legacy/StatusIndicator.tsx"],"sourcesContent":["import {\n StatusIndicator as BaseStatusIndicator,\n Tooltip,\n type TooltipProps,\n makePrefixer,\n} from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport type { ElementType } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport type StatusIndicatorStatus = \"error\" | \"info\" | \"warning\" | \"success\";\n\nexport interface StatusIndicatorProps extends IconProps {\n hasTooltip?: boolean;\n IconProps?: Partial<IconProps>;\n status?: StatusIndicatorStatus;\n TooltipComponent?: ElementType<TooltipProps>;\n TooltipProps?: Partial<TooltipProps>;\n tooltipText?: string;\n}\n\nexport const StatusIndicator = (props: StatusIndicatorProps) => {\n const {\n TooltipComponent = Tooltip,\n hasTooltip = false,\n TooltipProps,\n tooltipText,\n IconProps,\n className,\n status = \"info\",\n ...restProps\n } = props;\n\n return (\n <TooltipComponent\n hideIcon\n status={status}\n content={tooltipText}\n placement=\"top\"\n disabled={!hasTooltip}\n {...TooltipProps}\n >\n <BaseStatusIndicator\n status={status}\n {...restProps}\n {...IconProps}\n className={clsx(\n withBaseName(\"statusIndicator\"),\n className,\n IconProps?.className,\n )}\n />\n </TooltipComponent>\n );\n};\n"],"names":["makePrefixer","Tooltip","jsx","BaseStatusIndicator","clsx"],"mappings":";;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA;AAapC,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA;AAAA,IACJ,gBAAmB,GAAAC,YAAA;AAAA,IACnB,UAAa,GAAA,KAAA;AAAA,IACb,YAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACT,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EACE,uBAAAC,cAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,QAAQ,EAAA,IAAA;AAAA,MACR,MAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,SAAU,EAAA,KAAA;AAAA,MACV,UAAU,CAAC,UAAA;AAAA,MACV,GAAG,YAAA;AAAA,MAEJ,QAAA,kBAAAA,cAAA;AAAA,QAACC,oBAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACC,GAAG,SAAA;AAAA,UACH,GAAG,SAAA;AAAA,UACJ,SAAW,EAAAC,SAAA;AAAA,YACT,aAAa,iBAAiB,CAAA;AAAA,YAC9B,SAAA;AAAA,YACA,SAAW,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA;AAAA;AACb;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormattedInput.js","sources":["../src/formatted-input/FormattedInput.tsx"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useRifm } from \"rifm\";\nimport {\n InputLegacy as Input,\n type InputLegacyProps as InputProps,\n} from \"../input-legacy\";\nimport {\n InputWithMask,\n type InputWithMaskProps,\n baseName,\n} from \"./internal/InputWithMask\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport formattedInputCss from \"./FormattedInput.css\";\n\nexport type MaskFunction = (value: string | undefined) => boolean;\n\nexport interface RifmOptions {\n format?: (str: string) => string;\n replace?: (str: string) => string;\n append?: (str: string) => string;\n mask?: boolean | MaskFunction;\n accept?: RegExp;\n}\n\nexport interface FormattedInputProps extends Omit<InputProps, \"onChange\"> {\n mask?: string;\n onChange?: (value: string) => void;\n rifmOptions?: RifmOptions;\n value?: string;\n defaultValue?: string;\n}\n\nconst defaultFormatter = (string: string): string => string;\nconst defaultRifmOptions: RifmOptions = {};\n\nexport const FormattedInput = forwardRef<HTMLInputElement, FormattedInputProps>(\n function FormattedInput(\n {\n defaultValue = \"\",\n className,\n inputProps,\n mask,\n onChange,\n rifmOptions = defaultRifmOptions,\n value: valueProp,\n textAlign,\n ...other\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-formatted-input\",\n css: formattedInputCss,\n window: targetWindow,\n });\n\n const [valueState, setValueState] = useControlled<string | undefined>({\n default: defaultValue,\n controlled: valueProp,\n name: \"FormattedInput\",\n state: \"value\",\n });\n\n const handleChange = (value: string) => {\n setValueState(value);\n onChange?.(value);\n };\n\n let rifmMask = false;\n\n if (rifmOptions.mask) {\n rifmMask =\n typeof rifmOptions.mask === \"function\"\n ? rifmOptions.mask(valueState)\n : rifmOptions.mask;\n }\n\n const rifm = useRifm({\n format: defaultFormatter,\n accept: /.*/,\n ...rifmOptions,\n mask: rifmMask,\n value: valueState || \"\",\n onChange: handleChange,\n });\n\n return (\n <Input\n className={clsx(baseName, className)}\n inputComponent={InputWithMask}\n inputProps={{ mask, textAlign, ...inputProps } as InputWithMaskProps}\n onChange={rifm.onChange}\n textAlign={textAlign}\n value={rifm.value}\n {...other}\n ref={ref}\n />\n );\n },\n);\n"],"names":["forwardRef","FormattedInput","useWindow","useComponentCssInjection","formattedInputCss","useControlled","rifm","useRifm","jsx","Input","clsx","baseName","InputWithMask"],"mappings":";;;;;;;;;;;;;;AAqCA,MAAM,gBAAA,GAAmB,CAAC,MAA2B,KAAA,MAAA;AACrD,MAAM,qBAAkC,EAAC;AAElC,MAAM,cAAiB,GAAAA,gBAAA;AAAA,EAC5B,SAASC,eACP,CAAA;AAAA,IACE,YAAe,GAAA,EAAA;AAAA,IACf,SAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,kBAAA;AAAA,IACd,KAAO,EAAA,SAAA;AAAA,IACP,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,kBAAkC,CAAA;AAAA,MACpE,OAAS,EAAA,YAAA;AAAA,MACT,UAAY,EAAA,SAAA;AAAA,MACZ,IAAM,EAAA,gBAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,CAAC,KAAkB,KAAA;AACtC,MAAA,aAAA,CAAc,KAAK,CAAA;AACnB,MAAW,QAAA,IAAA,IAAA,GAAA,
|
|
1
|
+
{"version":3,"file":"FormattedInput.js","sources":["../src/formatted-input/FormattedInput.tsx"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useRifm } from \"rifm\";\nimport {\n InputLegacy as Input,\n type InputLegacyProps as InputProps,\n} from \"../input-legacy\";\nimport {\n InputWithMask,\n type InputWithMaskProps,\n baseName,\n} from \"./internal/InputWithMask\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport formattedInputCss from \"./FormattedInput.css\";\n\nexport type MaskFunction = (value: string | undefined) => boolean;\n\nexport interface RifmOptions {\n format?: (str: string) => string;\n replace?: (str: string) => string;\n append?: (str: string) => string;\n mask?: boolean | MaskFunction;\n accept?: RegExp;\n}\n\nexport interface FormattedInputProps extends Omit<InputProps, \"onChange\"> {\n mask?: string;\n onChange?: (value: string) => void;\n rifmOptions?: RifmOptions;\n value?: string;\n defaultValue?: string;\n}\n\nconst defaultFormatter = (string: string): string => string;\nconst defaultRifmOptions: RifmOptions = {};\n\nexport const FormattedInput = forwardRef<HTMLInputElement, FormattedInputProps>(\n function FormattedInput(\n {\n defaultValue = \"\",\n className,\n inputProps,\n mask,\n onChange,\n rifmOptions = defaultRifmOptions,\n value: valueProp,\n textAlign,\n ...other\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-formatted-input\",\n css: formattedInputCss,\n window: targetWindow,\n });\n\n const [valueState, setValueState] = useControlled<string | undefined>({\n default: defaultValue,\n controlled: valueProp,\n name: \"FormattedInput\",\n state: \"value\",\n });\n\n const handleChange = (value: string) => {\n setValueState(value);\n onChange?.(value);\n };\n\n let rifmMask = false;\n\n if (rifmOptions.mask) {\n rifmMask =\n typeof rifmOptions.mask === \"function\"\n ? rifmOptions.mask(valueState)\n : rifmOptions.mask;\n }\n\n const rifm = useRifm({\n format: defaultFormatter,\n accept: /.*/,\n ...rifmOptions,\n mask: rifmMask,\n value: valueState || \"\",\n onChange: handleChange,\n });\n\n return (\n <Input\n className={clsx(baseName, className)}\n inputComponent={InputWithMask}\n inputProps={{ mask, textAlign, ...inputProps } as InputWithMaskProps}\n onChange={rifm.onChange}\n textAlign={textAlign}\n value={rifm.value}\n {...other}\n ref={ref}\n />\n );\n },\n);\n"],"names":["forwardRef","FormattedInput","useWindow","useComponentCssInjection","formattedInputCss","useControlled","rifm","useRifm","jsx","Input","clsx","baseName","InputWithMask"],"mappings":";;;;;;;;;;;;;;AAqCA,MAAM,gBAAA,GAAmB,CAAC,MAA2B,KAAA,MAAA;AACrD,MAAM,qBAAkC,EAAC;AAElC,MAAM,cAAiB,GAAAA,gBAAA;AAAA,EAC5B,SAASC,eACP,CAAA;AAAA,IACE,YAAe,GAAA,EAAA;AAAA,IACf,SAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,kBAAA;AAAA,IACd,KAAO,EAAA,SAAA;AAAA,IACP,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,kBAAkC,CAAA;AAAA,MACpE,OAAS,EAAA,YAAA;AAAA,MACT,UAAY,EAAA,SAAA;AAAA,MACZ,IAAM,EAAA,gBAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,CAAC,KAAkB,KAAA;AACtC,MAAA,aAAA,CAAc,KAAK,CAAA;AACnB,MAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAAA,KACb;AAEA,IAAA,IAAI,QAAW,GAAA,KAAA;AAEf,IAAA,IAAI,YAAY,IAAM,EAAA;AACpB,MACE,QAAA,GAAA,OAAO,YAAY,IAAS,KAAA,UAAA,GACxB,YAAY,IAAK,CAAA,UAAU,IAC3B,WAAY,CAAA,IAAA;AAAA;AAGpB,IAAA,MAAMC,SAAOC,YAAQ,CAAA;AAAA,MACnB,MAAQ,EAAA,gBAAA;AAAA,MACR,MAAQ,EAAA,IAAA;AAAA,MACR,GAAG,WAAA;AAAA,MACH,IAAM,EAAA,QAAA;AAAA,MACN,OAAO,UAAc,IAAA,EAAA;AAAA,MACrB,QAAU,EAAA;AAAA,KACX,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAACC,uBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAK,CAAAC,sBAAA,EAAU,SAAS,CAAA;AAAA,QACnC,cAAgB,EAAAC,2BAAA;AAAA,QAChB,UAAY,EAAA,EAAE,IAAM,EAAA,SAAA,EAAW,GAAG,UAAW,EAAA;AAAA,QAC7C,UAAUN,MAAK,CAAA,QAAA;AAAA,QACf,SAAA;AAAA,QACA,OAAOA,MAAK,CAAA,KAAA;AAAA,QACX,GAAG,KAAA;AAAA,QACJ;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
|
package/dist-cjs/index.js
CHANGED
|
@@ -66,13 +66,16 @@ var DateInputRange = require('./date-input/DateInputRange.js');
|
|
|
66
66
|
var DatePicker = require('./date-picker/DatePicker.js');
|
|
67
67
|
var DatePickerActions = require('./date-picker/DatePickerActions.js');
|
|
68
68
|
var DatePickerContext = require('./date-picker/DatePickerContext.js');
|
|
69
|
+
var DatePickerHelperText = require('./date-picker/DatePickerHelperText.js');
|
|
69
70
|
var DatePickerOverlay = require('./date-picker/DatePickerOverlay.js');
|
|
70
71
|
var DatePickerOverlayProvider = require('./date-picker/DatePickerOverlayProvider.js');
|
|
71
72
|
var DatePickerRangeInput = require('./date-picker/DatePickerRangeInput.js');
|
|
73
|
+
var DatePickerRangeGridPanel = require('./date-picker/DatePickerRangeGridPanel.js');
|
|
72
74
|
var DatePickerRangePanel = require('./date-picker/DatePickerRangePanel.js');
|
|
73
75
|
var DatePickerSingleInput = require('./date-picker/DatePickerSingleInput.js');
|
|
74
|
-
var
|
|
76
|
+
var DatePickerSingleGridPanel = require('./date-picker/DatePickerSingleGridPanel.js');
|
|
75
77
|
var DatePickerTrigger = require('./date-picker/DatePickerTrigger.js');
|
|
78
|
+
var DatePickerSinglePanel = require('./date-picker/DatePickerSinglePanel.js');
|
|
76
79
|
var DeckItem = require('./deck-item/DeckItem.js');
|
|
77
80
|
var DeckLayout = require('./deck-layout/DeckLayout.js');
|
|
78
81
|
var DropdownBase = require('./dropdown/DropdownBase.js');
|
|
@@ -122,9 +125,6 @@ var useWidth = require('./responsive/useWidth.js');
|
|
|
122
125
|
var overflowUtils = require('./responsive/overflowUtils.js');
|
|
123
126
|
var utils = require('./responsive/utils.js');
|
|
124
127
|
var SearchInput = require('./search-input/SearchInput.js');
|
|
125
|
-
var Splitter = require('./splitter/Splitter.js');
|
|
126
|
-
var SplitPanel = require('./splitter/SplitPanel.js');
|
|
127
|
-
var SplitHandle = require('./splitter/SplitHandle.js');
|
|
128
128
|
var StaticList = require('./static-list/StaticList.js');
|
|
129
129
|
var StaticListItem = require('./static-list/StaticListItem.js');
|
|
130
130
|
var StaticListItemContent = require('./static-list/StaticListItemContent.js');
|
|
@@ -234,15 +234,18 @@ exports.DatePickerActions = DatePickerActions.DatePickerActions;
|
|
|
234
234
|
exports.DateRangeSelectionContext = DatePickerContext.DateRangeSelectionContext;
|
|
235
235
|
exports.SingleDateSelectionContext = DatePickerContext.SingleDateSelectionContext;
|
|
236
236
|
exports.useDatePickerContext = DatePickerContext.useDatePickerContext;
|
|
237
|
+
exports.DatePickerHelperText = DatePickerHelperText.DatePickerHelperText;
|
|
237
238
|
exports.DatePickerOverlay = DatePickerOverlay.DatePickerOverlay;
|
|
238
239
|
exports.DatePickerOverlayProvider = DatePickerOverlayProvider.DatePickerOverlayProvider;
|
|
239
240
|
exports.useDatePickerOverlay = DatePickerOverlayProvider.useDatePickerOverlay;
|
|
240
241
|
exports.DatePickerRangeInput = DatePickerRangeInput.DatePickerRangeInput;
|
|
241
242
|
exports.defaultRangeValidator = DatePickerRangeInput.defaultRangeValidator;
|
|
243
|
+
exports.DatePickerRangeGridPanel = DatePickerRangeGridPanel.DatePickerRangeGridPanel;
|
|
242
244
|
exports.DatePickerRangePanel = DatePickerRangePanel.DatePickerRangePanel;
|
|
243
245
|
exports.DatePickerSingleInput = DatePickerSingleInput.DatePickerSingleInput;
|
|
244
|
-
exports.
|
|
246
|
+
exports.DatePickerSingleGridPanel = DatePickerSingleGridPanel.DatePickerSingleGridPanel;
|
|
245
247
|
exports.DatePickerTrigger = DatePickerTrigger.DatePickerTrigger;
|
|
248
|
+
exports.DatePickerSinglePanel = DatePickerSinglePanel.DatePickerSinglePanel;
|
|
246
249
|
exports.DeckItem = DeckItem.DeckItem;
|
|
247
250
|
exports.DeckLayout = DeckLayout.DeckLayout;
|
|
248
251
|
exports.DropdownBase = DropdownBase.DropdownBase;
|
|
@@ -321,9 +324,6 @@ exports.popNextItemByPriority = overflowUtils.popNextItemByPriority;
|
|
|
321
324
|
exports.isResponsiveAttribute = utils.isResponsiveAttribute;
|
|
322
325
|
exports.liftResponsivePropsToFormField = utils.liftResponsivePropsToFormField;
|
|
323
326
|
exports.SearchInput = SearchInput.SearchInput;
|
|
324
|
-
exports.Splitter = Splitter.Splitter;
|
|
325
|
-
exports.SplitPanel = SplitPanel.SplitPanel;
|
|
326
|
-
exports.SplitHandle = SplitHandle.SplitHandle;
|
|
327
327
|
exports.StaticList = StaticList.StaticList;
|
|
328
328
|
exports.StaticListItem = StaticListItem.StaticListItem;
|
|
329
329
|
exports.StaticListItemContent = StaticListItemContent.StaticListItemContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputLegacy.js","sources":["../src/input-legacy/InputLegacy.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type AriaAttributes,\n type ChangeEvent,\n type ElementType,\n type FocusEvent,\n type FocusEventHandler,\n type HTMLAttributes,\n type InputHTMLAttributes,\n type KeyboardEventHandler,\n type MouseEvent,\n type MouseEventHandler,\n type ReactNode,\n forwardRef,\n useRef,\n useState,\n} from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { useCursorOnFocus } from \"./useCursorOnFocus\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport inputLegacyCss from \"./InputLegacy.css\";\n\nconst withBaseName = makePrefixer(\"saltInputLegacy\");\n\n// TODO: Double confirm whether this should be extending DivElement given root is `<div>`.\n// And forwarded ref is not assigned to the root like other components.\nexport interface InputLegacyProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n /**\n * Determines the position of the text cursor on focus of the input.\n *\n * start = place cursor at the beginning<br>\n * end = place cursor at the end<br>\n * \\# = index to place the cursor<br>\n */\n cursorPositionOnFocus?: \"start\" | \"end\" | number;\n /**\n * The value of the `input` element, required for an uncontrolled component.\n */\n defaultValue?: HTMLInputElement[\"defaultValue\"];\n /**\n * If `true`, the component is disabled.\n */\n disabled?: HTMLInputElement[\"disabled\"];\n /**\n * The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * Determines what gets highlighted on focus of the input.\n *\n * If `true` all text will be highlighted.\n * If an array text between those indices will be highlighted\n * e.g. [0,1] will highlight the first character.\n */\n highlightOnFocus?: boolean | number[];\n /**\n * The HTML element to render the Input, e.g. 'input', a custom React component.\n */\n inputComponent?: ElementType;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback for change event.\n */\n onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;\n onFocus?: FocusEventHandler<HTMLInputElement>;\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n onMouseUp?: MouseEventHandler<HTMLInputElement>;\n onMouseMove?: MouseEventHandler<HTMLInputElement>;\n onMouseDown?: MouseEventHandler<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n *\n * Determines the alignment of the input text.\n */\n textAlign?: \"left\" | \"right\" | \"center\";\n type?: HTMLInputElement[\"type\"];\n /**\n * The value of the `input` element, required for a controlled component.\n */\n value?: HTMLInputElement[\"value\"];\n renderSuffix?: (state: {\n disabled?: boolean;\n error?: boolean;\n focused?: boolean;\n margin?: \"dense\" | \"none\" | \"normal\";\n required?: boolean;\n startAdornment?: ReactNode;\n }) => ReactNode;\n endAdornment?: ReactNode;\n startAdornment?: ReactNode;\n}\n\nfunction mergeA11yProps(\n a11yProps: Partial<ReturnType<typeof useFormFieldLegacyProps>[\"a11yProps\"]>,\n inputProps: InputLegacyProps[\"inputProps\"],\n misplacedAriaProps: AriaAttributes,\n) {\n const ariaLabelledBy = clsx(\n a11yProps?.[\"aria-labelledby\"],\n inputProps?.[\"aria-labelledby\"],\n );\n\n return {\n ...misplacedAriaProps,\n ...a11yProps,\n ...inputProps,\n // The weird filtering is due to TokenizedInputBase\n \"aria-labelledby\": ariaLabelledBy\n ? Array.from(new Set(ariaLabelledBy.split(\" \"))).join(\" \")\n : null,\n };\n}\n\nexport const InputLegacy = forwardRef<HTMLInputElement, InputLegacyProps>(\n function Input(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n cursorPositionOnFocus,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n highlightOnFocus,\n id,\n inputComponent: InputComponent = \"input\",\n inputProps: inputPropsProp,\n role,\n style,\n value: valueProp,\n // If we leave both value and defaultValue undefined, we will get a React warning on first edit\n // (uncontrolled to controlled warning) from the React input\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onKeyUp,\n onMouseUp,\n onMouseMove,\n onMouseDown,\n readOnly: readOnlyProp,\n renderSuffix,\n startAdornment,\n textAlign = \"left\",\n type = \"text\",\n ...other\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-input-legacy\",\n css: inputLegacyCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n readOnly: a11yReadOnly,\n disabled: a11yDisabled,\n ...restA11y\n } = {},\n setFocused: setFormFieldFocused,\n inFormField,\n } = useFormFieldLegacyProps();\n\n const [focused, setFocused] = useState(false);\n const inputRef = useRef(null);\n const handleRef = useForkRef(inputRef, ref);\n const cursorOnFocusHelpers = useCursorOnFocus(inputRef, {\n cursorPositionOnFocus,\n highlightOnFocus,\n });\n\n const isDisabled = disabled || a11yDisabled;\n const isReadOnly = readOnlyProp || a11yReadOnly;\n const misplacedAriaProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n role,\n };\n const inputProps = mergeA11yProps(\n restA11y,\n inputPropsProp,\n misplacedAriaProps,\n );\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly\n ? emptyReadOnlyMarker\n : defaultValueProp;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event, value);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFormFieldFocused?.(true);\n setFocused(true);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFormFieldFocused?.(false);\n setFocused(false);\n };\n\n const handleMouseMove = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseMove(event);\n\n onMouseMove?.(event);\n };\n\n const handleMouseUp = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseUp();\n\n onMouseUp?.(event);\n };\n\n const handleMouseDown = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseDown();\n\n onMouseDown?.(event);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(`${textAlign}TextAlign`)]: textAlign,\n [withBaseName(\"formField\")]: inFormField,\n [withBaseName(\"focused\")]: focused && !inFormField,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"inputAdornedStart\")]: startAdornment,\n [withBaseName(\"inputAdornedEnd\")]: endAdornment,\n },\n classNameProp,\n )}\n style={style}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"prefixContainer\")}>\n {startAdornment}\n </div>\n )}\n <InputComponent\n type={type}\n id={id}\n {...inputProps}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n ref={handleRef}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n onFocus={handleFocus}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseMove={handleMouseMove}\n readOnly={isReadOnly}\n />\n {endAdornment && (\n <div className={withBaseName(\"suffixContainer\")}>{endAdornment}</div>\n )}\n {/* TODO: Confirm implementation of suffix */}\n {renderSuffix?.({ disabled, focused })}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","clsx","forwardRef","useWindow","useComponentCssInjection","inputLegacyCss","useFormFieldLegacyProps","useState","useRef","useForkRef","useCursorOnFocus","useControlled","value","jsxs","jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"InputLegacy.js","sources":["../src/input-legacy/InputLegacy.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type AriaAttributes,\n type ChangeEvent,\n type ElementType,\n type FocusEvent,\n type FocusEventHandler,\n type HTMLAttributes,\n type InputHTMLAttributes,\n type KeyboardEventHandler,\n type MouseEvent,\n type MouseEventHandler,\n type ReactNode,\n forwardRef,\n useRef,\n useState,\n} from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { useCursorOnFocus } from \"./useCursorOnFocus\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport inputLegacyCss from \"./InputLegacy.css\";\n\nconst withBaseName = makePrefixer(\"saltInputLegacy\");\n\n// TODO: Double confirm whether this should be extending DivElement given root is `<div>`.\n// And forwarded ref is not assigned to the root like other components.\nexport interface InputLegacyProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n /**\n * Determines the position of the text cursor on focus of the input.\n *\n * start = place cursor at the beginning<br>\n * end = place cursor at the end<br>\n * \\# = index to place the cursor<br>\n */\n cursorPositionOnFocus?: \"start\" | \"end\" | number;\n /**\n * The value of the `input` element, required for an uncontrolled component.\n */\n defaultValue?: HTMLInputElement[\"defaultValue\"];\n /**\n * If `true`, the component is disabled.\n */\n disabled?: HTMLInputElement[\"disabled\"];\n /**\n * The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * Determines what gets highlighted on focus of the input.\n *\n * If `true` all text will be highlighted.\n * If an array text between those indices will be highlighted\n * e.g. [0,1] will highlight the first character.\n */\n highlightOnFocus?: boolean | number[];\n /**\n * The HTML element to render the Input, e.g. 'input', a custom React component.\n */\n inputComponent?: ElementType;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback for change event.\n */\n onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;\n onFocus?: FocusEventHandler<HTMLInputElement>;\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n onMouseUp?: MouseEventHandler<HTMLInputElement>;\n onMouseMove?: MouseEventHandler<HTMLInputElement>;\n onMouseDown?: MouseEventHandler<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n *\n * Determines the alignment of the input text.\n */\n textAlign?: \"left\" | \"right\" | \"center\";\n type?: HTMLInputElement[\"type\"];\n /**\n * The value of the `input` element, required for a controlled component.\n */\n value?: HTMLInputElement[\"value\"];\n renderSuffix?: (state: {\n disabled?: boolean;\n error?: boolean;\n focused?: boolean;\n margin?: \"dense\" | \"none\" | \"normal\";\n required?: boolean;\n startAdornment?: ReactNode;\n }) => ReactNode;\n endAdornment?: ReactNode;\n startAdornment?: ReactNode;\n}\n\nfunction mergeA11yProps(\n a11yProps: Partial<ReturnType<typeof useFormFieldLegacyProps>[\"a11yProps\"]>,\n inputProps: InputLegacyProps[\"inputProps\"],\n misplacedAriaProps: AriaAttributes,\n) {\n const ariaLabelledBy = clsx(\n a11yProps?.[\"aria-labelledby\"],\n inputProps?.[\"aria-labelledby\"],\n );\n\n return {\n ...misplacedAriaProps,\n ...a11yProps,\n ...inputProps,\n // The weird filtering is due to TokenizedInputBase\n \"aria-labelledby\": ariaLabelledBy\n ? Array.from(new Set(ariaLabelledBy.split(\" \"))).join(\" \")\n : null,\n };\n}\n\nexport const InputLegacy = forwardRef<HTMLInputElement, InputLegacyProps>(\n function Input(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n cursorPositionOnFocus,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n highlightOnFocus,\n id,\n inputComponent: InputComponent = \"input\",\n inputProps: inputPropsProp,\n role,\n style,\n value: valueProp,\n // If we leave both value and defaultValue undefined, we will get a React warning on first edit\n // (uncontrolled to controlled warning) from the React input\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onKeyUp,\n onMouseUp,\n onMouseMove,\n onMouseDown,\n readOnly: readOnlyProp,\n renderSuffix,\n startAdornment,\n textAlign = \"left\",\n type = \"text\",\n ...other\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-input-legacy\",\n css: inputLegacyCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n readOnly: a11yReadOnly,\n disabled: a11yDisabled,\n ...restA11y\n } = {},\n setFocused: setFormFieldFocused,\n inFormField,\n } = useFormFieldLegacyProps();\n\n const [focused, setFocused] = useState(false);\n const inputRef = useRef(null);\n const handleRef = useForkRef(inputRef, ref);\n const cursorOnFocusHelpers = useCursorOnFocus(inputRef, {\n cursorPositionOnFocus,\n highlightOnFocus,\n });\n\n const isDisabled = disabled || a11yDisabled;\n const isReadOnly = readOnlyProp || a11yReadOnly;\n const misplacedAriaProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n role,\n };\n const inputProps = mergeA11yProps(\n restA11y,\n inputPropsProp,\n misplacedAriaProps,\n );\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly\n ? emptyReadOnlyMarker\n : defaultValueProp;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event, value);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFormFieldFocused?.(true);\n setFocused(true);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFormFieldFocused?.(false);\n setFocused(false);\n };\n\n const handleMouseMove = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseMove(event);\n\n onMouseMove?.(event);\n };\n\n const handleMouseUp = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseUp();\n\n onMouseUp?.(event);\n };\n\n const handleMouseDown = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseDown();\n\n onMouseDown?.(event);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(`${textAlign}TextAlign`)]: textAlign,\n [withBaseName(\"formField\")]: inFormField,\n [withBaseName(\"focused\")]: focused && !inFormField,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"inputAdornedStart\")]: startAdornment,\n [withBaseName(\"inputAdornedEnd\")]: endAdornment,\n },\n classNameProp,\n )}\n style={style}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"prefixContainer\")}>\n {startAdornment}\n </div>\n )}\n <InputComponent\n type={type}\n id={id}\n {...inputProps}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n ref={handleRef}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n onFocus={handleFocus}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseMove={handleMouseMove}\n readOnly={isReadOnly}\n />\n {endAdornment && (\n <div className={withBaseName(\"suffixContainer\")}>{endAdornment}</div>\n )}\n {/* TODO: Confirm implementation of suffix */}\n {renderSuffix?.({ disabled, focused })}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","clsx","forwardRef","useWindow","useComponentCssInjection","inputLegacyCss","useFormFieldLegacyProps","useState","useRef","useForkRef","useCursorOnFocus","useControlled","value","jsxs","jsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCursorOnFocus.js","sources":["../src/input-legacy/useCursorOnFocus.ts"],"sourcesContent":["import { ownerDocument } from \"@salt-ds/core\";\nimport {\n type MouseEvent,\n type MutableRefObject,\n useEffect,\n useRef,\n} from \"react\";\n\nfunction getSelectionRange(\n input: HTMLInputElement,\n { highlightOnFocus, cursorPositionOnFocus }: useCursorOnFocusProps,\n): [number | null, number | null] {\n // highlightOnFocus highlight first so it takes priority over position on focus\n if (highlightOnFocus === true) {\n return [0, input.value.length];\n }\n if (Array.isArray(highlightOnFocus) && highlightOnFocus.length > 1) {\n return [highlightOnFocus[0], highlightOnFocus[1]];\n }\n\n if (cursorPositionOnFocus === \"start\") {\n return [0, 0];\n }\n\n if (cursorPositionOnFocus === \"end\") {\n return [input.value.length, input.value.length];\n }\n\n if (cursorPositionOnFocus != null && !Number.isNaN(cursorPositionOnFocus)) {\n return [cursorPositionOnFocus, cursorPositionOnFocus];\n }\n return [null, null];\n}\n\nfunction isSafari() {\n return (\n navigator.userAgent.toLowerCase().includes(\"safari\") &&\n !navigator.userAgent.toLowerCase().includes(\"chrome\")\n );\n}\n\nfunction isFirefox() {\n return navigator.userAgent.toLowerCase().includes(\"firefox\");\n}\n\nexport interface useCursorOnFocusProps {\n /**\n * Determines the position of the text cursor on focus of the input.\n *\n * start = place cursor at the beginning\n * end = place cursor at the end\n * \\# = index to place the cursor\n */\n cursorPositionOnFocus?: \"start\" | \"end\" | number;\n /**\n * Determines what gets highlighted on focus of the input.\n *\n * If `true` all text will be highlighted.\n * If an array text between those indices will be highlighted\n * e.g. [0,1] will highlight the first character.\n */\n highlightOnFocus?: boolean | number[];\n}\n\nexport function useCursorOnFocus(\n inputRef: MutableRefObject<HTMLInputElement | null>,\n { cursorPositionOnFocus, highlightOnFocus }: useCursorOnFocusProps,\n) {\n const wasClick = useRef(false);\n const timeoutRef = useRef<number>(-1);\n const originalCursorPosition = useRef<number | null | undefined>(-1);\n const selectionInProgress = useRef(false);\n const mouseMovement = useRef(0);\n\n const selection = useRef<[number | null, number | null]>([null, null]);\n const wasWindowFocus = useRef(false);\n\n const handleMouseDown = () => {\n wasClick.current = true;\n };\n\n const handleMouseMove = (event: MouseEvent) => {\n if (selectionInProgress.current) {\n mouseMovement.current +=\n Math.abs(event.movementX) + Math.abs(event.movementY);\n\n //Prevents the slightest mouse movement triggering the cursor to be repositioned.\n if (mouseMovement.current < 3) {\n event.preventDefault();\n\n return;\n }\n\n if (typeof originalCursorPosition.current === \"number\") {\n // Allows continued highlighted if the mouse down is part of a selection.\n inputRef.current?.setSelectionRange(\n originalCursorPosition.current,\n originalCursorPosition.current,\n );\n }\n\n //Reset so originalCursorPosition is only set once.\n selectionInProgress.current = false;\n }\n };\n\n const handleMouseUp = () => {\n const isValidBrowser = isFirefox() || isSafari();\n if (\n selectionInProgress.current &&\n mouseMovement.current < 3 &&\n isValidBrowser &&\n Array.isArray(selection.current)\n ) {\n const [start, end] = selection.current;\n setTimeout(() => {\n if (\n (inputRef.current?.selectionStart !== start ||\n inputRef.current?.selectionEnd !== end) &&\n typeof start === \"number\" &&\n typeof end === \"number\"\n ) {\n inputRef.current?.setSelectionRange(start, end);\n }\n }, 0);\n }\n\n wasClick.current = false;\n selectionInProgress.current = false;\n mouseMovement.current = 0;\n };\n\n useEffect(() => {\n if (cursorPositionOnFocus != null || highlightOnFocus != null) {\n const handleFocusBehaviour = () => {\n if (!inputRef.current) {\n return;\n }\n\n const [start, end] = getSelectionRange(inputRef.current, {\n highlightOnFocus,\n cursorPositionOnFocus,\n });\n if (start !== null && end !== null) {\n window.clearTimeout(timeoutRef.current);\n const needsTimeout = isSafari() || wasClick.current;\n\n if (wasClick.current) {\n selectionInProgress.current = true;\n mouseMovement.current = 0;\n }\n\n selection.current = [start, end];\n // Keyboard focus needs to be outside setTimeout otherwise a flash of selected text appears.\n if (needsTimeout) {\n // Make's sure setSelectionRange is run after browser has set cursor position.\n timeoutRef.current = window.setTimeout(() => {\n if (wasClick.current) {\n originalCursorPosition.current =\n inputRef.current?.selectionStart;\n }\n inputRef.current?.setSelectionRange(start, end);\n }, 0);\n } else {\n inputRef.current?.setSelectionRange(start, end);\n }\n }\n };\n\n const handleFocusIn = () => {\n // Ignore focus of input on window focus\n if (wasWindowFocus.current) {\n wasWindowFocus.current = false;\n return;\n }\n\n if (cursorPositionOnFocus != null || highlightOnFocus != null) {\n handleFocusBehaviour();\n }\n };\n\n //Reset everything on window re-focus\n const handleWindowFocus = () => {\n const doc = ownerDocument(inputRef.current);\n if (\n doc.visibilityState === \"visible\" &&\n doc.activeElement === inputRef.current\n ) {\n wasClick.current = false;\n selectionInProgress.current = false;\n mouseMovement.current = 0;\n wasWindowFocus.current = true;\n }\n };\n\n const eventName = isSafari() || isFirefox() ? \"focusIn\" : \"focus\";\n const input = inputRef.current;\n const doc = ownerDocument(inputRef.current);\n input?.addEventListener(eventName, handleFocusIn);\n doc.addEventListener(\"visibilitychange\", handleWindowFocus);\n\n return () => {\n input?.removeEventListener(eventName, handleFocusIn);\n doc?.removeEventListener(\"visibilitychange\", handleWindowFocus);\n };\n }\n\n return undefined;\n }, [cursorPositionOnFocus, highlightOnFocus, inputRef]);\n\n return { handleMouseDown, handleMouseMove, handleMouseUp };\n}\n"],"names":["useRef","useEffect","_a","doc","ownerDocument"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useCursorOnFocus.js","sources":["../src/input-legacy/useCursorOnFocus.ts"],"sourcesContent":["import { ownerDocument } from \"@salt-ds/core\";\nimport {\n type MouseEvent,\n type MutableRefObject,\n useEffect,\n useRef,\n} from \"react\";\n\nfunction getSelectionRange(\n input: HTMLInputElement,\n { highlightOnFocus, cursorPositionOnFocus }: useCursorOnFocusProps,\n): [number | null, number | null] {\n // highlightOnFocus highlight first so it takes priority over position on focus\n if (highlightOnFocus === true) {\n return [0, input.value.length];\n }\n if (Array.isArray(highlightOnFocus) && highlightOnFocus.length > 1) {\n return [highlightOnFocus[0], highlightOnFocus[1]];\n }\n\n if (cursorPositionOnFocus === \"start\") {\n return [0, 0];\n }\n\n if (cursorPositionOnFocus === \"end\") {\n return [input.value.length, input.value.length];\n }\n\n if (cursorPositionOnFocus != null && !Number.isNaN(cursorPositionOnFocus)) {\n return [cursorPositionOnFocus, cursorPositionOnFocus];\n }\n return [null, null];\n}\n\nfunction isSafari() {\n return (\n navigator.userAgent.toLowerCase().includes(\"safari\") &&\n !navigator.userAgent.toLowerCase().includes(\"chrome\")\n );\n}\n\nfunction isFirefox() {\n return navigator.userAgent.toLowerCase().includes(\"firefox\");\n}\n\nexport interface useCursorOnFocusProps {\n /**\n * Determines the position of the text cursor on focus of the input.\n *\n * start = place cursor at the beginning\n * end = place cursor at the end\n * \\# = index to place the cursor\n */\n cursorPositionOnFocus?: \"start\" | \"end\" | number;\n /**\n * Determines what gets highlighted on focus of the input.\n *\n * If `true` all text will be highlighted.\n * If an array text between those indices will be highlighted\n * e.g. [0,1] will highlight the first character.\n */\n highlightOnFocus?: boolean | number[];\n}\n\nexport function useCursorOnFocus(\n inputRef: MutableRefObject<HTMLInputElement | null>,\n { cursorPositionOnFocus, highlightOnFocus }: useCursorOnFocusProps,\n) {\n const wasClick = useRef(false);\n const timeoutRef = useRef<number>(-1);\n const originalCursorPosition = useRef<number | null | undefined>(-1);\n const selectionInProgress = useRef(false);\n const mouseMovement = useRef(0);\n\n const selection = useRef<[number | null, number | null]>([null, null]);\n const wasWindowFocus = useRef(false);\n\n const handleMouseDown = () => {\n wasClick.current = true;\n };\n\n const handleMouseMove = (event: MouseEvent) => {\n if (selectionInProgress.current) {\n mouseMovement.current +=\n Math.abs(event.movementX) + Math.abs(event.movementY);\n\n //Prevents the slightest mouse movement triggering the cursor to be repositioned.\n if (mouseMovement.current < 3) {\n event.preventDefault();\n\n return;\n }\n\n if (typeof originalCursorPosition.current === \"number\") {\n // Allows continued highlighted if the mouse down is part of a selection.\n inputRef.current?.setSelectionRange(\n originalCursorPosition.current,\n originalCursorPosition.current,\n );\n }\n\n //Reset so originalCursorPosition is only set once.\n selectionInProgress.current = false;\n }\n };\n\n const handleMouseUp = () => {\n const isValidBrowser = isFirefox() || isSafari();\n if (\n selectionInProgress.current &&\n mouseMovement.current < 3 &&\n isValidBrowser &&\n Array.isArray(selection.current)\n ) {\n const [start, end] = selection.current;\n setTimeout(() => {\n if (\n (inputRef.current?.selectionStart !== start ||\n inputRef.current?.selectionEnd !== end) &&\n typeof start === \"number\" &&\n typeof end === \"number\"\n ) {\n inputRef.current?.setSelectionRange(start, end);\n }\n }, 0);\n }\n\n wasClick.current = false;\n selectionInProgress.current = false;\n mouseMovement.current = 0;\n };\n\n useEffect(() => {\n if (cursorPositionOnFocus != null || highlightOnFocus != null) {\n const handleFocusBehaviour = () => {\n if (!inputRef.current) {\n return;\n }\n\n const [start, end] = getSelectionRange(inputRef.current, {\n highlightOnFocus,\n cursorPositionOnFocus,\n });\n if (start !== null && end !== null) {\n window.clearTimeout(timeoutRef.current);\n const needsTimeout = isSafari() || wasClick.current;\n\n if (wasClick.current) {\n selectionInProgress.current = true;\n mouseMovement.current = 0;\n }\n\n selection.current = [start, end];\n // Keyboard focus needs to be outside setTimeout otherwise a flash of selected text appears.\n if (needsTimeout) {\n // Make's sure setSelectionRange is run after browser has set cursor position.\n timeoutRef.current = window.setTimeout(() => {\n if (wasClick.current) {\n originalCursorPosition.current =\n inputRef.current?.selectionStart;\n }\n inputRef.current?.setSelectionRange(start, end);\n }, 0);\n } else {\n inputRef.current?.setSelectionRange(start, end);\n }\n }\n };\n\n const handleFocusIn = () => {\n // Ignore focus of input on window focus\n if (wasWindowFocus.current) {\n wasWindowFocus.current = false;\n return;\n }\n\n if (cursorPositionOnFocus != null || highlightOnFocus != null) {\n handleFocusBehaviour();\n }\n };\n\n //Reset everything on window re-focus\n const handleWindowFocus = () => {\n const doc = ownerDocument(inputRef.current);\n if (\n doc.visibilityState === \"visible\" &&\n doc.activeElement === inputRef.current\n ) {\n wasClick.current = false;\n selectionInProgress.current = false;\n mouseMovement.current = 0;\n wasWindowFocus.current = true;\n }\n };\n\n const eventName = isSafari() || isFirefox() ? \"focusIn\" : \"focus\";\n const input = inputRef.current;\n const doc = ownerDocument(inputRef.current);\n input?.addEventListener(eventName, handleFocusIn);\n doc.addEventListener(\"visibilitychange\", handleWindowFocus);\n\n return () => {\n input?.removeEventListener(eventName, handleFocusIn);\n doc?.removeEventListener(\"visibilitychange\", handleWindowFocus);\n };\n }\n\n return undefined;\n }, [cursorPositionOnFocus, highlightOnFocus, inputRef]);\n\n return { handleMouseDown, handleMouseMove, handleMouseUp };\n}\n"],"names":["useRef","useEffect","_a","doc","ownerDocument"],"mappings":";;;;;AAQA,SAAS,iBACP,CAAA,KAAA,EACA,EAAE,gBAAA,EAAkB,uBACY,EAAA;AAEhC,EAAA,IAAI,qBAAqB,IAAM,EAAA;AAC7B,IAAA,OAAO,CAAC,CAAA,EAAG,KAAM,CAAA,KAAA,CAAM,MAAM,CAAA;AAAA;AAE/B,EAAA,IAAI,MAAM,OAAQ,CAAA,gBAAgB,CAAK,IAAA,gBAAA,CAAiB,SAAS,CAAG,EAAA;AAClE,IAAA,OAAO,CAAC,gBAAiB,CAAA,CAAC,CAAG,EAAA,gBAAA,CAAiB,CAAC,CAAC,CAAA;AAAA;AAGlD,EAAA,IAAI,0BAA0B,OAAS,EAAA;AACrC,IAAO,OAAA,CAAC,GAAG,CAAC,CAAA;AAAA;AAGd,EAAA,IAAI,0BAA0B,KAAO,EAAA;AACnC,IAAA,OAAO,CAAC,KAAM,CAAA,KAAA,CAAM,MAAQ,EAAA,KAAA,CAAM,MAAM,MAAM,CAAA;AAAA;AAGhD,EAAA,IAAI,yBAAyB,IAAQ,IAAA,CAAC,MAAO,CAAA,KAAA,CAAM,qBAAqB,CAAG,EAAA;AACzE,IAAO,OAAA,CAAC,uBAAuB,qBAAqB,CAAA;AAAA;AAEtD,EAAO,OAAA,CAAC,MAAM,IAAI,CAAA;AACpB;AAEA,SAAS,QAAW,GAAA;AAClB,EAAA,OACE,SAAU,CAAA,SAAA,CAAU,WAAY,EAAA,CAAE,QAAS,CAAA,QAAQ,CACnD,IAAA,CAAC,SAAU,CAAA,SAAA,CAAU,WAAY,EAAA,CAAE,SAAS,QAAQ,CAAA;AAExD;AAEA,SAAS,SAAY,GAAA;AACnB,EAAA,OAAO,SAAU,CAAA,SAAA,CAAU,WAAY,EAAA,CAAE,SAAS,SAAS,CAAA;AAC7D;AAqBO,SAAS,gBACd,CAAA,QAAA,EACA,EAAE,qBAAA,EAAuB,kBACzB,EAAA;AACA,EAAM,MAAA,QAAA,GAAWA,aAAO,KAAK,CAAA;AAC7B,EAAM,MAAA,UAAA,GAAaA,aAAe,EAAE,CAAA;AACpC,EAAM,MAAA,sBAAA,GAAyBA,aAAkC,EAAE,CAAA;AACnE,EAAM,MAAA,mBAAA,GAAsBA,aAAO,KAAK,CAAA;AACxC,EAAM,MAAA,aAAA,GAAgBA,aAAO,CAAC,CAAA;AAE9B,EAAA,MAAM,SAAY,GAAAA,YAAA,CAAuC,CAAC,IAAA,EAAM,IAAI,CAAC,CAAA;AACrE,EAAM,MAAA,cAAA,GAAiBA,aAAO,KAAK,CAAA;AAEnC,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,QAAA,CAAS,OAAU,GAAA,IAAA;AAAA,GACrB;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,KAAsB,KAAA;AAjFjD,IAAA,IAAA,EAAA;AAkFI,IAAA,IAAI,oBAAoB,OAAS,EAAA;AAC/B,MAAc,aAAA,CAAA,OAAA,IACZ,KAAK,GAAI,CAAA,KAAA,CAAM,SAAS,CAAI,GAAA,IAAA,CAAK,GAAI,CAAA,KAAA,CAAM,SAAS,CAAA;AAGtD,MAAI,IAAA,aAAA,CAAc,UAAU,CAAG,EAAA;AAC7B,QAAA,KAAA,CAAM,cAAe,EAAA;AAErB,QAAA;AAAA;AAGF,MAAI,IAAA,OAAO,sBAAuB,CAAA,OAAA,KAAY,QAAU,EAAA;AAEtD,QAAA,CAAA,EAAA,GAAA,QAAA,CAAS,YAAT,IAAkB,GAAA,MAAA,GAAA,EAAA,CAAA,iBAAA;AAAA,UAChB,sBAAuB,CAAA,OAAA;AAAA,UACvB,sBAAuB,CAAA;AAAA,SAAA;AAAA;AAK3B,MAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA;AAAA;AAChC,GACF;AAEA,EAAA,MAAM,gBAAgB,MAAM;AAC1B,IAAM,MAAA,cAAA,GAAiB,SAAU,EAAA,IAAK,QAAS,EAAA;AAC/C,IACE,IAAA,mBAAA,CAAoB,OACpB,IAAA,aAAA,CAAc,OAAU,GAAA,CAAA,IACxB,kBACA,KAAM,CAAA,OAAA,CAAQ,SAAU,CAAA,OAAO,CAC/B,EAAA;AACA,MAAA,MAAM,CAAC,KAAA,EAAO,GAAG,CAAA,GAAI,SAAU,CAAA,OAAA;AAC/B,MAAA,UAAA,CAAW,MAAM;AAnHvB,QAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAoHQ,QAAA,IAAA,CAAA,CAAA,CACG,EAAS,GAAA,QAAA,CAAA,OAAA,KAAT,IAAkB,GAAA,MAAA,GAAA,EAAA,CAAA,cAAA,MAAmB,WACpC,EAAS,GAAA,QAAA,CAAA,OAAA,KAAT,IAAkB,GAAA,MAAA,GAAA,EAAA,CAAA,YAAA,MAAiB,QACrC,OAAO,KAAA,KAAU,QACjB,IAAA,OAAO,QAAQ,QACf,EAAA;AACA,UAAS,CAAA,EAAA,GAAA,QAAA,CAAA,OAAA,KAAT,IAAkB,GAAA,MAAA,GAAA,EAAA,CAAA,iBAAA,CAAkB,KAAO,EAAA,GAAA,CAAA;AAAA;AAC7C,SACC,CAAC,CAAA;AAAA;AAGN,IAAA,QAAA,CAAS,OAAU,GAAA,KAAA;AACnB,IAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA;AAC9B,IAAA,aAAA,CAAc,OAAU,GAAA,CAAA;AAAA,GAC1B;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,qBAAA,IAAyB,IAAQ,IAAA,gBAAA,IAAoB,IAAM,EAAA;AAC7D,MAAA,MAAM,uBAAuB,MAAM;AAtIzC,QAAA,IAAA,EAAA;AAuIQ,QAAI,IAAA,CAAC,SAAS,OAAS,EAAA;AACrB,UAAA;AAAA;AAGF,QAAA,MAAM,CAAC,KAAO,EAAA,GAAG,CAAI,GAAA,iBAAA,CAAkB,SAAS,OAAS,EAAA;AAAA,UACvD,gBAAA;AAAA,UACA;AAAA,SACD,CAAA;AACD,QAAI,IAAA,KAAA,KAAU,IAAQ,IAAA,GAAA,KAAQ,IAAM,EAAA;AAClC,UAAO,MAAA,CAAA,YAAA,CAAa,WAAW,OAAO,CAAA;AACtC,UAAM,MAAA,YAAA,GAAe,QAAS,EAAA,IAAK,QAAS,CAAA,OAAA;AAE5C,UAAA,IAAI,SAAS,OAAS,EAAA;AACpB,YAAA,mBAAA,CAAoB,OAAU,GAAA,IAAA;AAC9B,YAAA,aAAA,CAAc,OAAU,GAAA,CAAA;AAAA;AAG1B,UAAU,SAAA,CAAA,OAAA,GAAU,CAAC,KAAA,EAAO,GAAG,CAAA;AAE/B,UAAA,IAAI,YAAc,EAAA;AAEhB,YAAW,UAAA,CAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AA5JzD,cAAA,IAAAC,GAAA,EAAA,EAAA;AA6Jc,cAAA,IAAI,SAAS,OAAS,EAAA;AACpB,gBAAA,sBAAA,CAAuB,OACrBA,GAAAA,CAAAA,GAAAA,GAAA,QAAS,CAAA,OAAA,KAAT,gBAAAA,GAAkB,CAAA,cAAA;AAAA;AAEtB,cAAS,CAAA,EAAA,GAAA,QAAA,CAAA,OAAA,KAAT,IAAkB,GAAA,MAAA,GAAA,EAAA,CAAA,iBAAA,CAAkB,KAAO,EAAA,GAAA,CAAA;AAAA,eAC1C,CAAC,CAAA;AAAA,WACC,MAAA;AACL,YAAS,CAAA,EAAA,GAAA,QAAA,CAAA,OAAA,KAAT,IAAkB,GAAA,MAAA,GAAA,EAAA,CAAA,iBAAA,CAAkB,KAAO,EAAA,GAAA,CAAA;AAAA;AAC7C;AACF,OACF;AAEA,MAAA,MAAM,gBAAgB,MAAM;AAE1B,QAAA,IAAI,eAAe,OAAS,EAAA;AAC1B,UAAA,cAAA,CAAe,OAAU,GAAA,KAAA;AACzB,UAAA;AAAA;AAGF,QAAI,IAAA,qBAAA,IAAyB,IAAQ,IAAA,gBAAA,IAAoB,IAAM,EAAA;AAC7D,UAAqB,oBAAA,EAAA;AAAA;AACvB,OACF;AAGA,MAAA,MAAM,oBAAoB,MAAM;AAC9B,QAAMC,MAAAA,IAAAA,GAAMC,kBAAc,CAAA,QAAA,CAAS,OAAO,CAAA;AAC1C,QAAA,IACED,KAAI,eAAoB,KAAA,SAAA,IACxBA,IAAI,CAAA,aAAA,KAAkB,SAAS,OAC/B,EAAA;AACA,UAAA,QAAA,CAAS,OAAU,GAAA,KAAA;AACnB,UAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA;AAC9B,UAAA,aAAA,CAAc,OAAU,GAAA,CAAA;AACxB,UAAA,cAAA,CAAe,OAAU,GAAA,IAAA;AAAA;AAC3B,OACF;AAEA,MAAA,MAAM,SAAY,GAAA,QAAA,EAAc,IAAA,SAAA,KAAc,SAAY,GAAA,OAAA;AAC1D,MAAA,MAAM,QAAQ,QAAS,CAAA,OAAA;AACvB,MAAM,MAAA,GAAA,GAAMC,kBAAc,CAAA,QAAA,CAAS,OAAO,CAAA;AAC1C,MAAA,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,iBAAiB,SAAW,EAAA,aAAA,CAAA;AACnC,MAAI,GAAA,CAAA,gBAAA,CAAiB,oBAAoB,iBAAiB,CAAA;AAE1D,MAAA,OAAO,MAAM;AACX,QAAA,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,oBAAoB,SAAW,EAAA,aAAA,CAAA;AACtC,QAAA,GAAA,IAAA,IAAA,GAAA,MAAA,GAAA,GAAA,CAAK,oBAAoB,kBAAoB,EAAA,iBAAA,CAAA;AAAA,OAC/C;AAAA;AAGF,IAAO,OAAA,MAAA;AAAA,GACN,EAAA,CAAC,qBAAuB,EAAA,gBAAA,EAAkB,QAAQ,CAAC,CAAA;AAEtD,EAAO,OAAA,EAAE,eAAiB,EAAA,eAAA,EAAiB,aAAc,EAAA;AAC3D;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Highlighter.js","sources":["../src/list/Highlighter.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport type { ReactElement } from \"react\";\nimport { escapeRegExp } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport highligherCss from \"./Highlighter.css\";\n\nconst withBaseName = makePrefixer(\"saltHighlighter\");\n\nexport interface HighlighterProps {\n matchPattern?: RegExp | string;\n text?: string;\n}\n\nexport const Highlighter = (\n props: HighlighterProps,\n): ReactElement<HighlighterProps> => {\n const { matchPattern, text = \"\" } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-hightligher\",\n css: highligherCss,\n window: targetWindow,\n });\n const matchRegex =\n typeof matchPattern === \"string\"\n ? new RegExp(`(${escapeRegExp(matchPattern)})`, \"gi\")\n : matchPattern;\n\n if (matchRegex === undefined || matchPattern === \"\") {\n return <>{text}</>;\n }\n return (\n <span>\n {text.split(matchRegex).map((part, index) =>\n part.match(matchRegex) ? (\n <strong\n className={withBaseName(\"highlight\")}\n key={`${index}-${part}`}\n >\n {part}\n </strong>\n ) : (\n part\n ),\n )}\n </span>\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","highligherCss","escapeRegExp","jsx"],"mappings":";;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA;AAOtC,MAAA,WAAA,GAAc,CACzB,KACmC,KAAA;AACnC,EAAA,MAAM,EAAE,YAAA,EAAc,IAAO,GAAA,EAAA,EAAO,GAAA,KAAA;AACpC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAA,MAAM,UACJ,GAAA,OAAO,YAAiB,KAAA,QAAA,GACpB,IAAI,MAAA,CAAO,CAAI,CAAA,EAAAC,yBAAA,CAAa,YAAY,CAAC,CAAK,CAAA,CAAA,EAAA,IAAI,CAClD,GAAA,YAAA;AAEN,EAAI,IAAA,UAAA,KAAe,
|
|
1
|
+
{"version":3,"file":"Highlighter.js","sources":["../src/list/Highlighter.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport type { ReactElement } from \"react\";\nimport { escapeRegExp } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport highligherCss from \"./Highlighter.css\";\n\nconst withBaseName = makePrefixer(\"saltHighlighter\");\n\nexport interface HighlighterProps {\n matchPattern?: RegExp | string;\n text?: string;\n}\n\nexport const Highlighter = (\n props: HighlighterProps,\n): ReactElement<HighlighterProps> => {\n const { matchPattern, text = \"\" } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-hightligher\",\n css: highligherCss,\n window: targetWindow,\n });\n const matchRegex =\n typeof matchPattern === \"string\"\n ? new RegExp(`(${escapeRegExp(matchPattern)})`, \"gi\")\n : matchPattern;\n\n if (matchRegex === undefined || matchPattern === \"\") {\n return <>{text}</>;\n }\n return (\n <span>\n {text.split(matchRegex).map((part, index) =>\n part.match(matchRegex) ? (\n <strong\n className={withBaseName(\"highlight\")}\n key={`${index}-${part}`}\n >\n {part}\n </strong>\n ) : (\n part\n ),\n )}\n </span>\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","highligherCss","escapeRegExp","jsx"],"mappings":";;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA;AAOtC,MAAA,WAAA,GAAc,CACzB,KACmC,KAAA;AACnC,EAAA,MAAM,EAAE,YAAA,EAAc,IAAO,GAAA,EAAA,EAAO,GAAA,KAAA;AACpC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAA,MAAM,UACJ,GAAA,OAAO,YAAiB,KAAA,QAAA,GACpB,IAAI,MAAA,CAAO,CAAI,CAAA,EAAAC,yBAAA,CAAa,YAAY,CAAC,CAAK,CAAA,CAAA,EAAA,IAAI,CAClD,GAAA,YAAA;AAEN,EAAI,IAAA,UAAA,KAAe,MAAa,IAAA,YAAA,KAAiB,EAAI,EAAA;AACnD,IAAA,6DAAU,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA;AAEjB,EAAA,uBACGC,cAAA,CAAA,MAAA,EAAA,EACE,QAAK,EAAA,IAAA,CAAA,KAAA,CAAM,UAAU,CAAE,CAAA,GAAA;AAAA,IAAI,CAAC,IAAM,EAAA,KAAA,KACjC,IAAK,CAAA,KAAA,CAAM,UAAU,CACnB,mBAAAA,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QAGlC,QAAA,EAAA;AAAA,OAAA;AAAA,MAFI,CAAA,EAAG,KAAK,CAAA,CAAA,EAAI,IAAI,CAAA;AAAA,KAKvB,GAAA;AAAA,GAGN,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sources":["../src/list/List.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useIdMemo } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ForwardedRef,\n type ReactElement,\n cloneElement,\n forwardRef,\n isValidElement,\n useRef,\n} from \"react\";\nimport {\n type CollectionIndexer,\n type CollectionItem,\n LIST_FOCUS_VISIBLE,\n type ScrollingAPI,\n type SelectionStrategy,\n itemToString as defaultItemToString,\n isSelected,\n useCollectionItems,\n useImperativeScrollingAPI,\n} from \"../common-hooks\";\n\nimport { ListItem as DefaultListItem, ListItemProxy } from \"./ListItem\";\nimport type { ListItemProps, ListProps } from \"./listTypes\";\nimport { useList } from \"./useList\";\nimport { useListHeight } from \"./useListHeight\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport listCss from \"./List.css\";\n\nconst defaultEmptyMessage = \"No data to display\";\n\nconst withBaseName = makePrefixer(\"saltList\");\n\nexport const List = forwardRef(function List<\n Item,\n Selection extends SelectionStrategy = \"default\",\n>(\n {\n ListItem = DefaultListItem,\n ListPlaceholder,\n borderless,\n children,\n className,\n collapsibleHeaders = false,\n defaultHighlightedIndex,\n defaultSelected,\n disabled: listDisabled = false,\n disableFocus = false,\n disableTypeToSelect,\n displayedItemCount = 10,\n emptyMessage,\n focusVisible: focusVisibleProp,\n getItemHeight: getItemHeightProp,\n getItemId,\n height,\n highlightedIndex: highlightedIndexProp,\n id: idProp,\n itemGapSize = 0,\n itemHeight: itemHeightProp,\n itemTextHighlightPattern,\n itemToString = defaultItemToString,\n listHandlers: listHandlersProp,\n maxHeight,\n maxWidth,\n minHeight,\n minWidth,\n onSelect,\n onSelectionChange,\n onHighlight,\n restoreLastFocus,\n selected: selectedProp,\n selectionStrategy,\n checkable = selectionStrategy === \"multiple\",\n scrollingApiRef,\n // TODO do we still need these ?\n selectionKeys,\n showEmptyMessage = false,\n source,\n style: styleProp,\n stickyHeaders,\n tabToSelect,\n width,\n ...htmlAttributes\n }: ListProps<Item, Selection>,\n forwardedRef?: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-list\",\n css: listCss,\n window: targetWindow,\n });\n\n const id = useIdMemo(idProp);\n const rootRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const rowHeightProxyRef = useRef<HTMLDivElement>(null);\n\n const collectionHook = useCollectionItems<Item>({\n id,\n label: \"List\",\n source,\n children,\n options: {\n collapsibleHeaders,\n // Add Group ChildTypes to options\n getItemId,\n itemToString,\n },\n });\n\n const { preferredHeight } = useListHeight({\n borderless,\n displayedItemCount,\n getItemHeight: getItemHeightProp,\n height,\n itemCount: collectionHook.data.length,\n itemGapSize,\n itemHeight: itemHeightProp,\n rowHeightRef: rowHeightProxyRef,\n });\n\n const {\n focusVisible,\n highlightedIndex,\n listControlProps,\n listHandlers,\n listItemHeaderHandlers,\n scrollIntoView,\n selected,\n } = useList<Item, Selection>({\n collapsibleHeaders,\n collectionHook,\n containerRef: rootRef,\n contentRef,\n defaultHighlightedIndex,\n defaultSelected: collectionHook.itemToCollectionItem<\n Selection,\n typeof defaultSelected\n >(defaultSelected),\n disabled: listDisabled,\n disableTypeToSelect,\n highlightedIndex: highlightedIndexProp,\n label: id,\n listHandlers: listHandlersProp, // should this be in context ?\n onSelect,\n onSelectionChange,\n onHighlight,\n restoreLastFocus,\n selected: collectionHook.itemToCollectionItem<\n Selection,\n typeof defaultSelected\n >(selectedProp),\n selectionStrategy,\n selectionKeys,\n stickyHeaders,\n tabToSelect,\n });\n\n useImperativeScrollingAPI({\n collectionHook,\n forwardedRef: scrollingApiRef,\n scrollableRef: rootRef,\n scrollIntoView,\n });\n\n // focusVisible passes as a prop takes precedence\n const appliedFocusVisible = focusVisibleProp ?? focusVisible;\n\n const createHeader: (\n idx: { value: number },\n headerId: string,\n title: string,\n expanded?: boolean,\n ) => ReactElement = function createHeader(idx, headerId, title, expanded) {\n const header = (\n <ListItem\n {...listItemHeaderHandlers}\n className={clsx(\"saltListItemHeader\", {\n focusVisible: collapsibleHeaders && appliedFocusVisible === idx.value,\n })}\n aria-expanded={expanded}\n data-idx={collapsibleHeaders ? idx.value : undefined}\n data-highlighted={idx.value === highlightedIndex || undefined}\n data-sticky={stickyHeaders}\n data-selectable={false}\n id={headerId}\n key={`header-${idx.value}`}\n label={title}\n // role=\"presentation\"\n />\n );\n idx.value += 1;\n return header;\n };\n\n const getItemHeight =\n getItemHeightProp === undefined ? () => itemHeightProp : getItemHeightProp;\n\n function renderCollectionItem(\n list: ReactElement[],\n item: CollectionItem<Item>,\n idx: { value: number },\n ) {\n // Note, a number of these props are specific to ListItem. What if user\n // implements a custom ListItem but neglects to handle all these props.\n // Is that on them ?\n const { disabled, value, id: itemId, label } = item;\n const isChildItem = isValidElement(value);\n const listItemProps: ListItemProps<Item> & {\n key: string;\n \"data-idx\": number;\n } = {\n className: clsx({\n saltHighlighted: idx.value === highlightedIndex,\n saltFocusVisible: appliedFocusVisible === idx.value,\n }),\n disabled: disabled || listDisabled,\n id: itemId,\n item: isChildItem ? undefined : (item?.value ?? undefined),\n itemHeight: getItemHeight(idx.value),\n itemTextHighlightPattern,\n key: itemId,\n \"data-idx\": idx.value,\n label,\n role: \"option\",\n selected: isSelected<Item>(selected, item),\n showCheckbox: checkable,\n };\n list.push(\n isChildItem ? (\n cloneElement(value, listItemProps)\n ) : (\n <ListItem {...listItemProps} />\n ),\n );\n\n idx.value += 1;\n }\n\n const addGroup: (\n list: ReactElement[],\n items: CollectionItem<Item>[],\n idx: { value: number },\n ) => void = function addGroup(\n list: ReactElement[],\n items: CollectionItem<Item>[],\n idx: { value: number },\n ) {\n const { count = 0, id, expanded, label = \"\" } = items[idx.value];\n const header = createHeader(idx, id, label, expanded);\n const childItems: ReactElement | ReactElement[] =\n expanded !== false\n ? [header].concat(\n renderCollectionItems(items, idx, idx.value + count) || [],\n )\n : header;\n\n list.push(\n <div key={id} role=\"group\">\n {childItems}\n </div>,\n );\n };\n\n const renderCollectionItems = (\n items: CollectionItem<Item>[],\n idx: CollectionIndexer = { value: 0 },\n end = items.length,\n ): ReactElement[] | undefined => {\n const listItems: ReactElement[] = [];\n while (idx.value < end) {\n const item = items[idx.value];\n if (item.header && item.label != null) {\n listItems.push(\n createHeader(idx, item.id, item.label, item.expanded === false),\n );\n } else if (item.childNodes) {\n addGroup(listItems, items, idx);\n } else {\n renderCollectionItem(listItems, item, idx);\n }\n }\n return listItems;\n };\n\n function renderEmpty() {\n if (emptyMessage || showEmptyMessage) {\n return (\n <span className={withBaseName(\"empty-message\")}>\n {emptyMessage ?? defaultEmptyMessage}\n </span>\n );\n }\n return null;\n }\n\n const renderContent = () => {\n if (collectionHook.data.length) {\n return renderCollectionItems(collectionHook.data);\n }\n renderEmpty();\n };\n\n const contentHeight = \"auto\";\n const sizeStyles = {\n \"--list-item-gap\": itemGapSize ? `${itemGapSize}px` : undefined,\n minWidth,\n minHeight,\n width: width ?? \"100%\",\n height: height ?? \"100%\",\n maxWidth: maxWidth ?? width,\n maxHeight: maxHeight ?? preferredHeight,\n };\n return (\n <div\n aria-multiselectable={\n selectionStrategy === \"multiple\" ||\n selectionStrategy === \"extended\" ||\n selectionStrategy === \"extended-multi-range\" ||\n undefined\n }\n {...htmlAttributes}\n {...listHandlers}\n {...listControlProps}\n className={clsx(withBaseName(), className, {\n // TODO low-emphasis\n [withBaseName(\"borderless\")]: borderless,\n saltDisabled: listDisabled,\n [withBaseName(\"collapsible\")]: collapsibleHeaders,\n saltFocusVisible: highlightedIndex === LIST_FOCUS_VISIBLE,\n })}\n id={`${id}`}\n ref={useForkRef<HTMLDivElement>(rootRef, forwardedRef)}\n role=\"listbox\"\n style={{ ...styleProp, ...sizeStyles }}\n tabIndex={listDisabled || disableFocus ? undefined : 0}\n >\n <ListItemProxy ref={rowHeightProxyRef} />\n {collectionHook.data.length === 0 && ListPlaceholder !== undefined ? (\n <>\n <ListPlaceholder />\n </>\n ) : (\n <div\n className={withBaseName(\"scrollingContentContainer\")}\n ref={contentRef}\n style={{ height: contentHeight }}\n >\n {renderContent()}\n </div>\n )}\n </div>\n );\n}) as <Item = string, Selection extends SelectionStrategy = \"default\">(\n props: ListProps<Item, Selection> & {\n ref?: ForwardedRef<ScrollingAPI<Item>>;\n },\n) => ReactElement<ListProps<Item, Selection>>;\n"],"names":["makePrefixer","forwardRef","List","ListItem","DefaultListItem","itemToString","defaultItemToString","useWindow","useComponentCssInjection","listCss","useIdMemo","useRef","useCollectionItems","useListHeight","useList","useImperativeScrollingAPI","createHeader","createElement","clsx","isValidElement","isSelected","cloneElement","jsx","addGroup","id","jsxs","LIST_FOCUS_VISIBLE","useForkRef","ListItemProxy","Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"List.js","sources":["../src/list/List.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useIdMemo } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n type ForwardedRef,\n type ReactElement,\n cloneElement,\n forwardRef,\n isValidElement,\n useRef,\n} from \"react\";\nimport {\n type CollectionIndexer,\n type CollectionItem,\n LIST_FOCUS_VISIBLE,\n type ScrollingAPI,\n type SelectionStrategy,\n itemToString as defaultItemToString,\n isSelected,\n useCollectionItems,\n useImperativeScrollingAPI,\n} from \"../common-hooks\";\n\nimport { ListItem as DefaultListItem, ListItemProxy } from \"./ListItem\";\nimport type { ListItemProps, ListProps } from \"./listTypes\";\nimport { useList } from \"./useList\";\nimport { useListHeight } from \"./useListHeight\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport listCss from \"./List.css\";\n\nconst defaultEmptyMessage = \"No data to display\";\n\nconst withBaseName = makePrefixer(\"saltList\");\n\nexport const List = forwardRef(function List<\n Item,\n Selection extends SelectionStrategy = \"default\",\n>(\n {\n ListItem = DefaultListItem,\n ListPlaceholder,\n borderless,\n children,\n className,\n collapsibleHeaders = false,\n defaultHighlightedIndex,\n defaultSelected,\n disabled: listDisabled = false,\n disableFocus = false,\n disableTypeToSelect,\n displayedItemCount = 10,\n emptyMessage,\n focusVisible: focusVisibleProp,\n getItemHeight: getItemHeightProp,\n getItemId,\n height,\n highlightedIndex: highlightedIndexProp,\n id: idProp,\n itemGapSize = 0,\n itemHeight: itemHeightProp,\n itemTextHighlightPattern,\n itemToString = defaultItemToString,\n listHandlers: listHandlersProp,\n maxHeight,\n maxWidth,\n minHeight,\n minWidth,\n onSelect,\n onSelectionChange,\n onHighlight,\n restoreLastFocus,\n selected: selectedProp,\n selectionStrategy,\n checkable = selectionStrategy === \"multiple\",\n scrollingApiRef,\n // TODO do we still need these ?\n selectionKeys,\n showEmptyMessage = false,\n source,\n style: styleProp,\n stickyHeaders,\n tabToSelect,\n width,\n ...htmlAttributes\n }: ListProps<Item, Selection>,\n forwardedRef?: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-list\",\n css: listCss,\n window: targetWindow,\n });\n\n const id = useIdMemo(idProp);\n const rootRef = useRef<HTMLDivElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const rowHeightProxyRef = useRef<HTMLDivElement>(null);\n\n const collectionHook = useCollectionItems<Item>({\n id,\n label: \"List\",\n source,\n children,\n options: {\n collapsibleHeaders,\n // Add Group ChildTypes to options\n getItemId,\n itemToString,\n },\n });\n\n const { preferredHeight } = useListHeight({\n borderless,\n displayedItemCount,\n getItemHeight: getItemHeightProp,\n height,\n itemCount: collectionHook.data.length,\n itemGapSize,\n itemHeight: itemHeightProp,\n rowHeightRef: rowHeightProxyRef,\n });\n\n const {\n focusVisible,\n highlightedIndex,\n listControlProps,\n listHandlers,\n listItemHeaderHandlers,\n scrollIntoView,\n selected,\n } = useList<Item, Selection>({\n collapsibleHeaders,\n collectionHook,\n containerRef: rootRef,\n contentRef,\n defaultHighlightedIndex,\n defaultSelected: collectionHook.itemToCollectionItem<\n Selection,\n typeof defaultSelected\n >(defaultSelected),\n disabled: listDisabled,\n disableTypeToSelect,\n highlightedIndex: highlightedIndexProp,\n label: id,\n listHandlers: listHandlersProp, // should this be in context ?\n onSelect,\n onSelectionChange,\n onHighlight,\n restoreLastFocus,\n selected: collectionHook.itemToCollectionItem<\n Selection,\n typeof defaultSelected\n >(selectedProp),\n selectionStrategy,\n selectionKeys,\n stickyHeaders,\n tabToSelect,\n });\n\n useImperativeScrollingAPI({\n collectionHook,\n forwardedRef: scrollingApiRef,\n scrollableRef: rootRef,\n scrollIntoView,\n });\n\n // focusVisible passes as a prop takes precedence\n const appliedFocusVisible = focusVisibleProp ?? focusVisible;\n\n const createHeader: (\n idx: { value: number },\n headerId: string,\n title: string,\n expanded?: boolean,\n ) => ReactElement = function createHeader(idx, headerId, title, expanded) {\n const header = (\n <ListItem\n {...listItemHeaderHandlers}\n className={clsx(\"saltListItemHeader\", {\n focusVisible: collapsibleHeaders && appliedFocusVisible === idx.value,\n })}\n aria-expanded={expanded}\n data-idx={collapsibleHeaders ? idx.value : undefined}\n data-highlighted={idx.value === highlightedIndex || undefined}\n data-sticky={stickyHeaders}\n data-selectable={false}\n id={headerId}\n key={`header-${idx.value}`}\n label={title}\n // role=\"presentation\"\n />\n );\n idx.value += 1;\n return header;\n };\n\n const getItemHeight =\n getItemHeightProp === undefined ? () => itemHeightProp : getItemHeightProp;\n\n function renderCollectionItem(\n list: ReactElement[],\n item: CollectionItem<Item>,\n idx: { value: number },\n ) {\n // Note, a number of these props are specific to ListItem. What if user\n // implements a custom ListItem but neglects to handle all these props.\n // Is that on them ?\n const { disabled, value, id: itemId, label } = item;\n const isChildItem = isValidElement(value);\n const listItemProps: ListItemProps<Item> & {\n key: string;\n \"data-idx\": number;\n } = {\n className: clsx({\n saltHighlighted: idx.value === highlightedIndex,\n saltFocusVisible: appliedFocusVisible === idx.value,\n }),\n disabled: disabled || listDisabled,\n id: itemId,\n item: isChildItem ? undefined : (item?.value ?? undefined),\n itemHeight: getItemHeight(idx.value),\n itemTextHighlightPattern,\n key: itemId,\n \"data-idx\": idx.value,\n label,\n role: \"option\",\n selected: isSelected<Item>(selected, item),\n showCheckbox: checkable,\n };\n list.push(\n isChildItem ? (\n cloneElement(value, listItemProps)\n ) : (\n <ListItem {...listItemProps} />\n ),\n );\n\n idx.value += 1;\n }\n\n const addGroup: (\n list: ReactElement[],\n items: CollectionItem<Item>[],\n idx: { value: number },\n ) => void = function addGroup(\n list: ReactElement[],\n items: CollectionItem<Item>[],\n idx: { value: number },\n ) {\n const { count = 0, id, expanded, label = \"\" } = items[idx.value];\n const header = createHeader(idx, id, label, expanded);\n const childItems: ReactElement | ReactElement[] =\n expanded !== false\n ? [header].concat(\n renderCollectionItems(items, idx, idx.value + count) || [],\n )\n : header;\n\n list.push(\n <div key={id} role=\"group\">\n {childItems}\n </div>,\n );\n };\n\n const renderCollectionItems = (\n items: CollectionItem<Item>[],\n idx: CollectionIndexer = { value: 0 },\n end = items.length,\n ): ReactElement[] | undefined => {\n const listItems: ReactElement[] = [];\n while (idx.value < end) {\n const item = items[idx.value];\n if (item.header && item.label != null) {\n listItems.push(\n createHeader(idx, item.id, item.label, item.expanded === false),\n );\n } else if (item.childNodes) {\n addGroup(listItems, items, idx);\n } else {\n renderCollectionItem(listItems, item, idx);\n }\n }\n return listItems;\n };\n\n function renderEmpty() {\n if (emptyMessage || showEmptyMessage) {\n return (\n <span className={withBaseName(\"empty-message\")}>\n {emptyMessage ?? defaultEmptyMessage}\n </span>\n );\n }\n return null;\n }\n\n const renderContent = () => {\n if (collectionHook.data.length) {\n return renderCollectionItems(collectionHook.data);\n }\n renderEmpty();\n };\n\n const contentHeight = \"auto\";\n const sizeStyles = {\n \"--list-item-gap\": itemGapSize ? `${itemGapSize}px` : undefined,\n minWidth,\n minHeight,\n width: width ?? \"100%\",\n height: height ?? \"100%\",\n maxWidth: maxWidth ?? width,\n maxHeight: maxHeight ?? preferredHeight,\n };\n return (\n <div\n aria-multiselectable={\n selectionStrategy === \"multiple\" ||\n selectionStrategy === \"extended\" ||\n selectionStrategy === \"extended-multi-range\" ||\n undefined\n }\n {...htmlAttributes}\n {...listHandlers}\n {...listControlProps}\n className={clsx(withBaseName(), className, {\n // TODO low-emphasis\n [withBaseName(\"borderless\")]: borderless,\n saltDisabled: listDisabled,\n [withBaseName(\"collapsible\")]: collapsibleHeaders,\n saltFocusVisible: highlightedIndex === LIST_FOCUS_VISIBLE,\n })}\n id={`${id}`}\n ref={useForkRef<HTMLDivElement>(rootRef, forwardedRef)}\n role=\"listbox\"\n style={{ ...styleProp, ...sizeStyles }}\n tabIndex={listDisabled || disableFocus ? undefined : 0}\n >\n <ListItemProxy ref={rowHeightProxyRef} />\n {collectionHook.data.length === 0 && ListPlaceholder !== undefined ? (\n <>\n <ListPlaceholder />\n </>\n ) : (\n <div\n className={withBaseName(\"scrollingContentContainer\")}\n ref={contentRef}\n style={{ height: contentHeight }}\n >\n {renderContent()}\n </div>\n )}\n </div>\n );\n}) as <Item = string, Selection extends SelectionStrategy = \"default\">(\n props: ListProps<Item, Selection> & {\n ref?: ForwardedRef<ScrollingAPI<Item>>;\n },\n) => ReactElement<ListProps<Item, Selection>>;\n"],"names":["makePrefixer","forwardRef","List","ListItem","DefaultListItem","itemToString","defaultItemToString","useWindow","useComponentCssInjection","listCss","useIdMemo","useRef","useCollectionItems","useListHeight","useList","useImperativeScrollingAPI","createHeader","createElement","clsx","isValidElement","isSelected","cloneElement","jsx","addGroup","id","jsxs","LIST_FOCUS_VISIBLE","useForkRef","ListItemProxy","Fragment"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sources":["../src/list/ListItem.tsx"],"sourcesContent":["import { CheckboxIcon, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ForwardedRef, type HTMLAttributes, forwardRef } from \"react\";\nimport { Highlighter } from \"./Highlighter\";\nimport type { ListItemProps, ListItemType } from \"./listTypes\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport listItemCss from \"./ListItem.css\";\n\nconst withBaseName = makePrefixer(\"saltListItem\");\n\n// A dummy ListItem rendered once and not visible. We measure this to\n// determine height of ListItem and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nexport const ListItemProxy = forwardRef(function ListItemNextProxy(\n props: HTMLAttributes<HTMLDivElement>,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n aria-hidden\n className={clsx(withBaseName(), withBaseName(\"proxy\"))}\n ref={forwardedRef}\n />\n );\n});\n\n// Note: the memo is effective if List label is passed as simple string\n// If children are used, it is the responsibility of caller to memoise\n// these if performance on highlight is perceived to be an issue.\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n function ListItem(\n {\n children,\n className: classNameProp,\n disabled,\n tabIndex,\n item,\n itemHeight,\n itemTextHighlightPattern,\n label,\n selectable: _notUsed,\n selected,\n showCheckbox,\n style: styleProp,\n ...props\n },\n forwardedRef,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-list-item\",\n css: listItemCss,\n window: targetWindow,\n });\n\n const className = clsx(withBaseName(), classNameProp, {\n saltDisabled: disabled,\n [withBaseName(\"checkbox\")]: showCheckbox,\n });\n const style =\n itemHeight !== undefined\n ? {\n ...styleProp,\n height: itemHeight,\n }\n : styleProp;\n\n return (\n <div\n className={className}\n {...props}\n aria-disabled={disabled || undefined}\n aria-selected={selected || undefined}\n ref={forwardedRef}\n style={style}\n >\n {showCheckbox && <CheckboxIcon aria-hidden checked={selected} />}\n {children && typeof children !== \"string\" ? (\n children\n ) : itemTextHighlightPattern == null ? (\n <span className={withBaseName(\"textWrapper\")}>\n {label || children}\n </span>\n ) : (\n <Highlighter\n matchPattern={itemTextHighlightPattern}\n text={label || (children as string)}\n />\n )}\n </div>\n );\n },\n) as ListItemType;\n"],"names":["makePrefixer","forwardRef","jsx","clsx","ListItem","useWindow","useComponentCssInjection","listItemCss","jsxs","CheckboxIcon","Highlighter"],"mappings":";;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA;AAMzC,MAAM,aAAgB,GAAAC,gBAAA,CAAW,SAAS,iBAAA,CAC/C,OACA,YACA,EAAA;AACA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAW,EAAA,IAAA;AAAA,MACX,WAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA,YAAA,CAAa,OAAO,CAAC,CAAA;AAAA,MACrD,GAAK,EAAA;AAAA;AAAA,GACP;AAEJ,CAAC;AAKM,MAAM,QAAW,GAAAF,gBAAA;AAAA,EACtB,SAASG,SACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,wBAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAY,EAAA,QAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAY,GAAAJ,SAAA,CAAK,YAAa,EAAA,EAAG,aAAe,EAAA;AAAA,MACpD,YAAc,EAAA,QAAA;AAAA,MACd,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,KAC7B,CAAA;AACD,IAAM,MAAA,KAAA,GACJ,eAAe,
|
|
1
|
+
{"version":3,"file":"ListItem.js","sources":["../src/list/ListItem.tsx"],"sourcesContent":["import { CheckboxIcon, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ForwardedRef, type HTMLAttributes, forwardRef } from \"react\";\nimport { Highlighter } from \"./Highlighter\";\nimport type { ListItemProps, ListItemType } from \"./listTypes\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport listItemCss from \"./ListItem.css\";\n\nconst withBaseName = makePrefixer(\"saltListItem\");\n\n// A dummy ListItem rendered once and not visible. We measure this to\n// determine height of ListItem and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nexport const ListItemProxy = forwardRef(function ListItemNextProxy(\n props: HTMLAttributes<HTMLDivElement>,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n aria-hidden\n className={clsx(withBaseName(), withBaseName(\"proxy\"))}\n ref={forwardedRef}\n />\n );\n});\n\n// Note: the memo is effective if List label is passed as simple string\n// If children are used, it is the responsibility of caller to memoise\n// these if performance on highlight is perceived to be an issue.\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n function ListItem(\n {\n children,\n className: classNameProp,\n disabled,\n tabIndex,\n item,\n itemHeight,\n itemTextHighlightPattern,\n label,\n selectable: _notUsed,\n selected,\n showCheckbox,\n style: styleProp,\n ...props\n },\n forwardedRef,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-list-item\",\n css: listItemCss,\n window: targetWindow,\n });\n\n const className = clsx(withBaseName(), classNameProp, {\n saltDisabled: disabled,\n [withBaseName(\"checkbox\")]: showCheckbox,\n });\n const style =\n itemHeight !== undefined\n ? {\n ...styleProp,\n height: itemHeight,\n }\n : styleProp;\n\n return (\n <div\n className={className}\n {...props}\n aria-disabled={disabled || undefined}\n aria-selected={selected || undefined}\n ref={forwardedRef}\n style={style}\n >\n {showCheckbox && <CheckboxIcon aria-hidden checked={selected} />}\n {children && typeof children !== \"string\" ? (\n children\n ) : itemTextHighlightPattern == null ? (\n <span className={withBaseName(\"textWrapper\")}>\n {label || children}\n </span>\n ) : (\n <Highlighter\n matchPattern={itemTextHighlightPattern}\n text={label || (children as string)}\n />\n )}\n </div>\n );\n },\n) as ListItemType;\n"],"names":["makePrefixer","forwardRef","jsx","clsx","ListItem","useWindow","useComponentCssInjection","listItemCss","jsxs","CheckboxIcon","Highlighter"],"mappings":";;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA;AAMzC,MAAM,aAAgB,GAAAC,gBAAA,CAAW,SAAS,iBAAA,CAC/C,OACA,YACA,EAAA;AACA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAW,EAAA,IAAA;AAAA,MACX,WAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA,YAAA,CAAa,OAAO,CAAC,CAAA;AAAA,MACrD,GAAK,EAAA;AAAA;AAAA,GACP;AAEJ,CAAC;AAKM,MAAM,QAAW,GAAAF,gBAAA;AAAA,EACtB,SAASG,SACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,wBAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAY,EAAA,QAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAY,GAAAJ,SAAA,CAAK,YAAa,EAAA,EAAG,aAAe,EAAA;AAAA,MACpD,YAAc,EAAA,QAAA;AAAA,MACd,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,KAC7B,CAAA;AACD,IAAM,MAAA,KAAA,GACJ,eAAe,MACX,GAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,MAAQ,EAAA;AAAA,KAEV,GAAA,SAAA;AAEN,IACE,uBAAAK,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,iBAAe,QAAY,IAAA,MAAA;AAAA,QAC3B,iBAAe,QAAY,IAAA,MAAA;AAAA,QAC3B,GAAK,EAAA,YAAA;AAAA,QACL,KAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,YAAA,oBAAiBN,cAAA,CAAAO,iBAAA,EAAA,EAAa,aAAW,EAAA,IAAA,EAAC,SAAS,QAAU,EAAA,CAAA;AAAA,UAC7D,QAAY,IAAA,OAAO,QAAa,KAAA,QAAA,GAC/B,WACE,wBAA4B,IAAA,IAAA,mBAC7BP,cAAA,CAAA,MAAA,EAAA,EAAK,WAAW,YAAa,CAAA,aAAa,CACxC,EAAA,QAAA,EAAA,KAAA,IAAS,UACZ,CAEA,mBAAAA,cAAA;AAAA,YAACQ,uBAAA;AAAA,YAAA;AAAA,cACC,YAAc,EAAA,wBAAA;AAAA,cACd,MAAM,KAAU,IAAA;AAAA;AAAA;AAClB;AAAA;AAAA,KAEJ;AAAA;AAGN;;;;;"}
|