@pega/cosmos-react-core 2.0.0-dev.18.0 → 2.0.0-dev.20.0
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/lib/components/Actions/Actions.js +1 -1
- package/lib/components/Actions/Actions.js.map +1 -1
- package/lib/components/AppShell/AppHeader.js +1 -1
- package/lib/components/AppShell/AppHeader.js.map +1 -1
- package/lib/components/AppShell/AppShell.js +13 -13
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/AppShell/AppShellList.js +6 -6
- package/lib/components/AppShell/AppShellList.js.map +1 -1
- package/lib/components/AppShell/Drawer.js +2 -2
- package/lib/components/AppShell/Drawer.js.map +1 -1
- package/lib/components/AppShell/Operator.js +3 -3
- package/lib/components/AppShell/Operator.js.map +1 -1
- package/lib/components/AppShell/SkipNavigation.js +2 -2
- package/lib/components/AppShell/SkipNavigation.js.map +1 -1
- package/lib/components/Avatar/Avatar.js +1 -1
- package/lib/components/Avatar/Avatar.js.map +1 -1
- package/lib/components/Backdrop/Backdrop.js +1 -1
- package/lib/components/Backdrop/Backdrop.js.map +1 -1
- package/lib/components/Badges/Alert.js +1 -1
- package/lib/components/Badges/Alert.js.map +1 -1
- package/lib/components/Badges/Count.js +1 -1
- package/lib/components/Badges/Count.js.map +1 -1
- package/lib/components/Badges/Selection.js +1 -1
- package/lib/components/Badges/Selection.js.map +1 -1
- package/lib/components/Badges/Status.js +1 -1
- package/lib/components/Badges/Status.js.map +1 -1
- package/lib/components/Badges/Tag.js +1 -1
- package/lib/components/Badges/Tag.js.map +1 -1
- package/lib/components/Banner/Banner.js +3 -3
- package/lib/components/Banner/Banner.js.map +1 -1
- package/lib/components/Boolean/BooleanDisplay.js +1 -1
- package/lib/components/Boolean/BooleanDisplay.js.map +1 -1
- package/lib/components/Breadcrumbs/Breadcrumbs.js +5 -5
- package/lib/components/Breadcrumbs/Breadcrumbs.js.map +1 -1
- package/lib/components/Button/BareButton.js +2 -2
- package/lib/components/Button/BareButton.js.map +1 -1
- package/lib/components/Button/BareRoleButton.d.ts +12 -0
- package/lib/components/Button/BareRoleButton.d.ts.map +1 -0
- package/lib/components/Button/BareRoleButton.js +20 -0
- package/lib/components/Button/BareRoleButton.js.map +1 -0
- package/lib/components/Button/Button.js +2 -2
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/Card/Card.js +1 -1
- package/lib/components/Card/Card.js.map +1 -1
- package/lib/components/Card/CardContent.js +1 -1
- package/lib/components/Card/CardContent.js.map +1 -1
- package/lib/components/Card/CardFooter.js +2 -2
- package/lib/components/Card/CardFooter.js.map +1 -1
- package/lib/components/Card/CardHeader.js +1 -1
- package/lib/components/Card/CardHeader.js.map +1 -1
- package/lib/components/Card/CardMedia.js +1 -1
- package/lib/components/Card/CardMedia.js.map +1 -1
- package/lib/components/Card/CollapsibleCard.js +1 -1
- package/lib/components/Card/CollapsibleCard.js.map +1 -1
- package/lib/components/Card/SelectableCard.js +1 -1
- package/lib/components/Card/SelectableCard.js.map +1 -1
- package/lib/components/Checkbox/Checkbox.js +1 -1
- package/lib/components/Checkbox/Checkbox.js.map +1 -1
- package/lib/components/ColorPicker/ColorPicker.js +3 -3
- package/lib/components/ColorPicker/ColorPicker.js.map +1 -1
- package/lib/components/ComboBox/ComboBox.js +12 -12
- package/lib/components/ComboBox/ComboBox.js.map +1 -1
- package/lib/components/ComboBox/ComboBoxInput.js +4 -4
- package/lib/components/ComboBox/ComboBoxInput.js.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.d.ts.map +1 -1
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js +14 -10
- package/lib/components/ComboBox/MultiSelectInput/MultiSelectInput.js.map +1 -1
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.d.ts.map +1 -1
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js +15 -11
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js.map +1 -1
- package/lib/components/Configuration/Configuration.js +5 -5
- package/lib/components/Configuration/Configuration.js.map +1 -1
- package/lib/components/Currency/CurrencyDisplay.js +1 -1
- package/lib/components/Currency/CurrencyDisplay.js.map +1 -1
- package/lib/components/Currency/CurrencyInput.js +12 -12
- package/lib/components/Currency/CurrencyInput.js.map +1 -1
- package/lib/components/DateTime/DateTimeDisplay.d.ts.map +1 -1
- package/lib/components/DateTime/DateTimeDisplay.js +2 -1
- package/lib/components/DateTime/DateTimeDisplay.js.map +1 -1
- package/lib/components/DateTime/DurationDisplay.d.ts.map +1 -1
- package/lib/components/DateTime/DurationDisplay.js +11 -6
- package/lib/components/DateTime/DurationDisplay.js.map +1 -1
- package/lib/components/DateTime/Input/DateInput.js +6 -6
- package/lib/components/DateTime/Input/DateInput.js.map +1 -1
- package/lib/components/DateTime/Input/DateRangeInput.js +1 -1
- package/lib/components/DateTime/Input/DateRangeInput.js.map +1 -1
- package/lib/components/DateTime/Input/DateTime.styles.d.ts.map +1 -1
- package/lib/components/DateTime/Input/DateTime.styles.js +13 -2
- package/lib/components/DateTime/Input/DateTime.styles.js.map +1 -1
- package/lib/components/DateTime/Input/DateTimeInput.js +9 -9
- package/lib/components/DateTime/Input/DateTimeInput.js.map +1 -1
- package/lib/components/DateTime/Input/DayOfWeekInput.js +2 -2
- package/lib/components/DateTime/Input/DayOfWeekInput.js.map +1 -1
- package/lib/components/DateTime/Input/Duration/DurationInput.js +2 -2
- package/lib/components/DateTime/Input/Duration/DurationInput.js.map +1 -1
- package/lib/components/DateTime/Input/Duration/NumberUnit.js +2 -2
- package/lib/components/DateTime/Input/Duration/NumberUnit.js.map +1 -1
- package/lib/components/DateTime/Input/Duration/Time.js +2 -2
- package/lib/components/DateTime/Input/Duration/Time.js.map +1 -1
- package/lib/components/DateTime/Input/MonthInput.js +6 -6
- package/lib/components/DateTime/Input/MonthInput.js.map +1 -1
- package/lib/components/DateTime/Input/PartInput.js +1 -1
- package/lib/components/DateTime/Input/PartInput.js.map +1 -1
- package/lib/components/DateTime/Input/QuarterInput.js +6 -6
- package/lib/components/DateTime/Input/QuarterInput.js.map +1 -1
- package/lib/components/DateTime/Input/TimeInput.js +9 -9
- package/lib/components/DateTime/Input/TimeInput.js.map +1 -1
- package/lib/components/DateTime/Input/WeekInput.js +6 -6
- package/lib/components/DateTime/Input/WeekInput.js.map +1 -1
- package/lib/components/DateTime/Picker/Calendar.js +11 -11
- package/lib/components/DateTime/Picker/Calendar.js.map +1 -1
- package/lib/components/DateTime/Picker/DatePicker.d.ts.map +1 -1
- package/lib/components/DateTime/Picker/DatePicker.js +7 -9
- package/lib/components/DateTime/Picker/DatePicker.js.map +1 -1
- package/lib/components/DateTime/Picker/DateRangePicker.d.ts.map +1 -1
- package/lib/components/DateTime/Picker/DateRangePicker.js +7 -9
- package/lib/components/DateTime/Picker/DateRangePicker.js.map +1 -1
- package/lib/components/DateTime/Picker/TimePicker.js +4 -4
- package/lib/components/DateTime/Picker/TimePicker.js.map +1 -1
- package/lib/components/DateTime/Picker/Weeks.js +4 -4
- package/lib/components/DateTime/Picker/Weeks.js.map +1 -1
- package/lib/components/DateTime/Picker/utils.d.ts +1 -0
- package/lib/components/DateTime/Picker/utils.d.ts.map +1 -1
- package/lib/components/DateTime/Picker/utils.js +3 -0
- package/lib/components/DateTime/Picker/utils.js.map +1 -1
- package/lib/components/Drawer/Drawer.js +1 -1
- package/lib/components/Drawer/Drawer.js.map +1 -1
- package/lib/components/Email/EmailDisplay.js +2 -2
- package/lib/components/Email/EmailDisplay.js.map +1 -1
- package/lib/components/EmojiPicker/EmojiDisplay.js +1 -1
- package/lib/components/EmojiPicker/EmojiDisplay.js.map +1 -1
- package/lib/components/EmojiPicker/EmojiPicker.js +1 -1
- package/lib/components/EmojiPicker/EmojiPicker.js.map +1 -1
- package/lib/components/EmptyState/EmptyState.js +1 -1
- package/lib/components/EmptyState/EmptyState.js.map +1 -1
- package/lib/components/ErrorState/ErrorState.js +1 -1
- package/lib/components/ErrorState/ErrorState.js.map +1 -1
- package/lib/components/ExpandCollapse/ExpandCollapse.js +1 -1
- package/lib/components/ExpandCollapse/ExpandCollapse.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroup.js +3 -3
- package/lib/components/FieldGroup/FieldGroup.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroupList.js +4 -4
- package/lib/components/FieldGroup/FieldGroupList.js.map +1 -1
- package/lib/components/FieldValueList/FieldValueList.js +5 -5
- package/lib/components/FieldValueList/FieldValueList.js.map +1 -1
- package/lib/components/File/FileDisplay.js +7 -7
- package/lib/components/File/FileDisplay.js.map +1 -1
- package/lib/components/File/FileInput.js +10 -10
- package/lib/components/File/FileInput.js.map +1 -1
- package/lib/components/File/FileItem.js +1 -1
- package/lib/components/File/FileItem.js.map +1 -1
- package/lib/components/File/FileUploadItem.js +4 -4
- package/lib/components/File/FileUploadItem.js.map +1 -1
- package/lib/components/File/FileVisual.js +4 -4
- package/lib/components/File/FileVisual.js.map +1 -1
- package/lib/components/Flex/Flex.js +1 -1
- package/lib/components/Flex/Flex.js.map +1 -1
- package/lib/components/Form/Form.js +1 -1
- package/lib/components/Form/Form.js.map +1 -1
- package/lib/components/FormControl/FormControl.js +1 -1
- package/lib/components/FormControl/FormControl.js.map +1 -1
- package/lib/components/FormField/FormField.js +7 -7
- package/lib/components/FormField/FormField.js.map +1 -1
- package/lib/components/Grid/Grid.js +1 -1
- package/lib/components/Grid/Grid.js.map +1 -1
- package/lib/components/Icon/Icon.js +1 -1
- package/lib/components/Icon/Icon.js.map +1 -1
- package/lib/components/Image/Image.js +1 -1
- package/lib/components/Image/Image.js.map +1 -1
- package/lib/components/Input/Input.js +11 -11
- package/lib/components/Input/Input.js.map +1 -1
- package/lib/components/Label/Label.js +1 -1
- package/lib/components/Label/Label.js.map +1 -1
- package/lib/components/Link/Link.js +1 -1
- package/lib/components/Link/Link.js.map +1 -1
- package/lib/components/List/CommaSeparatedList.js +3 -3
- package/lib/components/List/CommaSeparatedList.js.map +1 -1
- package/lib/components/List/List.js +1 -1
- package/lib/components/List/List.js.map +1 -1
- package/lib/components/List/OrderedList.js +1 -1
- package/lib/components/List/OrderedList.js.map +1 -1
- package/lib/components/List/UnorderedList.js +1 -1
- package/lib/components/List/UnorderedList.js.map +1 -1
- package/lib/components/Location/CurrentLocationButton.js +1 -1
- package/lib/components/Location/CurrentLocationButton.js.map +1 -1
- package/lib/components/Location/LocationDisplay.js +7 -7
- package/lib/components/Location/LocationDisplay.js.map +1 -1
- package/lib/components/Location/LocationInput.js +19 -19
- package/lib/components/Location/LocationInput.js.map +1 -1
- package/lib/components/Location/LocationView.js +1 -1
- package/lib/components/Location/LocationView.js.map +1 -1
- package/lib/components/Menu/FlyoutMenuList.js +3 -3
- package/lib/components/Menu/FlyoutMenuList.js.map +1 -1
- package/lib/components/Menu/Menu.d.ts.map +1 -1
- package/lib/components/Menu/Menu.js +4 -3
- package/lib/components/Menu/Menu.js.map +1 -1
- package/lib/components/Menu/Menu.types.d.ts +3 -1
- package/lib/components/Menu/Menu.types.d.ts.map +1 -1
- package/lib/components/Menu/Menu.types.js.map +1 -1
- package/lib/components/Menu/MenuGroup.js +2 -2
- package/lib/components/Menu/MenuGroup.js.map +1 -1
- package/lib/components/Menu/MenuItem.js +11 -11
- package/lib/components/Menu/MenuItem.js.map +1 -1
- package/lib/components/Menu/MenuList.js +5 -5
- package/lib/components/Menu/MenuList.js.map +1 -1
- package/lib/components/Menu/MenuListHeader.js +2 -2
- package/lib/components/Menu/MenuListHeader.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.js +3 -3
- package/lib/components/MenuButton/MenuButton.js.map +1 -1
- package/lib/components/MetaList/MetaList.js +4 -4
- package/lib/components/MetaList/MetaList.js.map +1 -1
- package/lib/components/Modal/DockedModals.d.ts.map +1 -1
- package/lib/components/Modal/DockedModals.js +4 -6
- package/lib/components/Modal/DockedModals.js.map +1 -1
- package/lib/components/Modal/MinimizedModal.d.ts.map +1 -1
- package/lib/components/Modal/MinimizedModal.js +37 -34
- package/lib/components/Modal/MinimizedModal.js.map +1 -1
- package/lib/components/Modal/Modal.js +8 -8
- package/lib/components/Modal/Modal.js.map +1 -1
- package/lib/components/Modal/ModalManager.js +6 -6
- package/lib/components/Modal/ModalManager.js.map +1 -1
- package/lib/components/MultiStep/MultiStep.js +7 -7
- package/lib/components/MultiStep/MultiStep.js.map +1 -1
- package/lib/components/Number/NumberDisplay.js +1 -1
- package/lib/components/Number/NumberDisplay.js.map +1 -1
- package/lib/components/Number/NumberInput.js +5 -5
- package/lib/components/Number/NumberInput.js.map +1 -1
- package/lib/components/PageTemplates/CategorySubPage.js +7 -7
- package/lib/components/PageTemplates/CategorySubPage.js.map +1 -1
- package/lib/components/PageTemplates/DashboardPage.d.ts +4 -0
- package/lib/components/PageTemplates/DashboardPage.d.ts.map +1 -1
- package/lib/components/PageTemplates/DashboardPage.js +19 -12
- package/lib/components/PageTemplates/DashboardPage.js.map +1 -1
- package/lib/components/PageTemplates/PageTemplates.js +20 -20
- package/lib/components/PageTemplates/PageTemplates.js.map +1 -1
- package/lib/components/PageTemplates/index.d.ts +1 -0
- package/lib/components/PageTemplates/index.d.ts.map +1 -1
- package/lib/components/PageTemplates/index.js +1 -0
- package/lib/components/PageTemplates/index.js.map +1 -1
- package/lib/components/Pagination/Pagination.js +3 -3
- package/lib/components/Pagination/Pagination.js.map +1 -1
- package/lib/components/Phone/PhoneDisplay.js +2 -2
- package/lib/components/Phone/PhoneDisplay.js.map +1 -1
- package/lib/components/Phone/PhoneInput.js +3 -3
- package/lib/components/Phone/PhoneInput.js.map +1 -1
- package/lib/components/Popover/Popover.js +1 -1
- package/lib/components/Popover/Popover.js.map +1 -1
- package/lib/components/Popover/PopoverManager.js +2 -2
- package/lib/components/Popover/PopoverManager.js.map +1 -1
- package/lib/components/Progress/Bar.js +1 -1
- package/lib/components/Progress/Bar.js.map +1 -1
- package/lib/components/Progress/Ellipsis.js +1 -1
- package/lib/components/Progress/Ellipsis.js.map +1 -1
- package/lib/components/Progress/Progress.js +2 -2
- package/lib/components/Progress/Progress.js.map +1 -1
- package/lib/components/Progress/Ring.js +1 -1
- package/lib/components/Progress/Ring.js.map +1 -1
- package/lib/components/RadioButton/RadioButton.js +1 -1
- package/lib/components/RadioButton/RadioButton.js.map +1 -1
- package/lib/components/RadioCheck/RadioCheck.js +2 -2
- package/lib/components/RadioCheck/RadioCheck.js.map +1 -1
- package/lib/components/RadioCheckGroup/RadioCheckGroup.js +10 -10
- package/lib/components/RadioCheckGroup/RadioCheckGroup.js.map +1 -1
- package/lib/components/Rating/Rating.js +2 -2
- package/lib/components/Rating/Rating.js.map +1 -1
- package/lib/components/SearchInput/SearchInput.js +2 -2
- package/lib/components/SearchInput/SearchInput.js.map +1 -1
- package/lib/components/Select/Option.js +1 -1
- package/lib/components/Select/Option.js.map +1 -1
- package/lib/components/Select/Select.js +13 -13
- package/lib/components/Select/Select.js.map +1 -1
- package/lib/components/Sentiment/Sentiment.js +1 -1
- package/lib/components/Sentiment/Sentiment.js.map +1 -1
- package/lib/components/Skeleton/LineSkeleton.js +1 -1
- package/lib/components/Skeleton/LineSkeleton.js.map +1 -1
- package/lib/components/Skeleton/ParagraphSkeleton.js +1 -1
- package/lib/components/Skeleton/ParagraphSkeleton.js.map +1 -1
- package/lib/components/Skeleton/RectangleSkeleton.js +1 -1
- package/lib/components/Skeleton/RectangleSkeleton.js.map +1 -1
- package/lib/components/Slider/Slider.js +5 -5
- package/lib/components/Slider/Slider.js.map +1 -1
- package/lib/components/Slider/SliderTicks.js +4 -4
- package/lib/components/Slider/SliderTicks.js.map +1 -1
- package/lib/components/SummaryItem/SummaryItem.d.ts +1 -1
- package/lib/components/SummaryItem/SummaryItem.d.ts.map +1 -1
- package/lib/components/SummaryItem/SummaryItem.js +2 -2
- package/lib/components/SummaryItem/SummaryItem.js.map +1 -1
- package/lib/components/SummaryList/SummaryList.js +3 -3
- package/lib/components/SummaryList/SummaryList.js.map +1 -1
- package/lib/components/SummaryList/ViewAll.js +1 -1
- package/lib/components/SummaryList/ViewAll.js.map +1 -1
- package/lib/components/Switch/Switch.js +1 -1
- package/lib/components/Switch/Switch.js.map +1 -1
- package/lib/components/Table/Table.d.ts.map +1 -1
- package/lib/components/Table/Table.js +13 -8
- package/lib/components/Table/Table.js.map +1 -1
- package/lib/components/Tabs/Tab.js +1 -1
- package/lib/components/Tabs/Tab.js.map +1 -1
- package/lib/components/Tabs/TabPanel.js +1 -1
- package/lib/components/Tabs/TabPanel.js.map +1 -1
- package/lib/components/Tabs/Tabs.js +4 -4
- package/lib/components/Tabs/Tabs.js.map +1 -1
- package/lib/components/Text/Text.js +1 -1
- package/lib/components/Text/Text.js.map +1 -1
- package/lib/components/TextArea/TextArea.js +23 -23
- package/lib/components/TextArea/TextArea.js.map +1 -1
- package/lib/components/Toaster/Toaster.js +4 -4
- package/lib/components/Toaster/Toaster.js.map +1 -1
- package/lib/components/Tooltip/Tooltip.js +1 -1
- package/lib/components/Tooltip/Tooltip.js.map +1 -1
- package/lib/components/Tree/StandardTree.js +6 -6
- package/lib/components/Tree/StandardTree.js.map +1 -1
- package/lib/components/Tree/Tree.js +3 -3
- package/lib/components/Tree/Tree.js.map +1 -1
- package/lib/components/URL/URLDisplay.js +2 -2
- package/lib/components/URL/URLDisplay.js.map +1 -1
- package/lib/hooks/useFocusWithin.d.ts +1 -1
- package/lib/hooks/useFocusWithin.d.ts.map +1 -1
- package/lib/hooks/useFocusWithin.js +21 -16
- package/lib/hooks/useFocusWithin.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +2 -1
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.json +2 -1
- package/lib/i18n/i18n.d.ts +4 -2
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/theme/theme.d.ts +30 -30
- package/lib/utils/utils.d.ts +13 -0
- package/lib/utils/utils.d.ts.map +1 -1
- package/lib/utils/utils.js +15 -0
- package/lib/utils/utils.js.map +1 -1
- package/package.json +2 -2
|
@@ -102,33 +102,33 @@ const Modal = forwardRef((props, refArg) => {
|
|
|
102
102
|
}
|
|
103
103
|
}, [progress]);
|
|
104
104
|
const maximized = stretch || state === 'maximized';
|
|
105
|
-
const modal = (_jsxs(Flex,
|
|
105
|
+
const modal = (_jsxs(Flex, { ...restProps, container: { direction: 'column' }, ref: modalRef, as: StyledModal, forwardedAs: as, onClick: (e) => e.stopPropagation(), alert: alert, role: alert ? 'alertdialog' : 'dialog', stretch: maximized, center: center, "aria-labelledby": `${id}-heading`, "aria-modal": state === 'docked' ? 'false' : 'true', state: state, "aria-live": 'polite', "aria-busy": progress ? 'true' : 'false', children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 1 }, item: { shrink: 0 }, as: StyledModalHeader, hasAction: minimizable || dismissible, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, as: Text, variant: 'h2', id: `${id}-heading`, children: [_jsx("span", { children: heading }, void 0), typeof count === 'number' && _jsx(Count, { children: count }, void 0)] }, void 0), _jsxs(Flex, { container: true, children: [maximizable && !alert && state !== 'maximized' && (_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('modal_maximize'), onClick: () => {
|
|
106
106
|
if (onRequestMaximize?.() !== false) {
|
|
107
107
|
maximize();
|
|
108
108
|
}
|
|
109
|
-
}
|
|
109
|
+
}, children: _jsx(Icon, { name: 'scale-up' }, void 0) }, void 0)), dockable && !alert && state !== 'docked' && (_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('modal_dock'), onClick: () => {
|
|
110
110
|
if (onRequestDock?.() !== false) {
|
|
111
111
|
dock();
|
|
112
112
|
}
|
|
113
|
-
}
|
|
113
|
+
}, children: _jsx(Icon, { name: 'scale-down' }, void 0) }, void 0)), minimizable && !alert && (_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('modal_minimize'), onClick: () => {
|
|
114
114
|
if (onRequestMinimize?.() !== false) {
|
|
115
115
|
minimize();
|
|
116
116
|
}
|
|
117
|
-
}
|
|
117
|
+
}, children: _jsx(Icon, { name: 'minus' }, void 0) }, void 0)), dismissible && !alert && (_jsx(Button, { icon: true, variant: 'simple', "aria-label": t('modal_close'), onClick: () => {
|
|
118
118
|
tryDismiss();
|
|
119
119
|
if (dockable) {
|
|
120
120
|
onBeforeClose?.();
|
|
121
121
|
unmount();
|
|
122
122
|
onAfterClose?.();
|
|
123
123
|
}
|
|
124
|
-
}, ref: closeButtonRef
|
|
125
|
-
const renderModal = state === 'docked' ? (modal) : (_jsx(Backdrop,
|
|
124
|
+
}, ref: closeButtonRef, children: _jsx(Icon, { name: 'times' }, void 0) }, void 0))] }, void 0)] }, void 0), _jsxs(Flex, { item: { grow: 1 }, as: StyledModalContent, ref: modalContentRef, children: [children && _jsx(StyledModalChildrenWrap, { children: children }, void 0), _jsx(Progress, { visible: !!progress, placement: 'local', message: typeof progress === 'object' ? progress.message : t('loading') }, void 0)] }, void 0), actions && (_jsx(Flex, { container: { justify: 'between' }, item: { shrink: 0 }, as: StyledModalActions, children: actions }, void 0))] }, void 0));
|
|
125
|
+
const renderModal = state === 'docked' ? (modal) : (_jsx(Backdrop, { ref: backdropRef, container: {
|
|
126
126
|
alignItems: center || maximized ? 'center' : 'start'
|
|
127
127
|
}, transitionSpeed: 'slow', open: state === 'open' || state === 'maximized', onBeforeTransitionIn: onBeforeOpen, onAfterTransitionIn: onAfterOpen, onBeforeTransitionOut: onBeforeClose, onAfterTransitionOut: () => {
|
|
128
128
|
unmount();
|
|
129
129
|
onAfterClose?.();
|
|
130
|
-
}
|
|
131
|
-
return state === 'minimized' ? _jsx(MinimizedModal,
|
|
130
|
+
}, children: modal }, void 0));
|
|
131
|
+
return state === 'minimized' ? _jsx(MinimizedModal, { ...props, ...restProps }, void 0) : renderModal;
|
|
132
132
|
});
|
|
133
133
|
export default Modal;
|
|
134
134
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useContext,\n useEffect,\n MouseEvent,\n useRef\n} from 'react';\n\nimport Progress from '../Progress';\nimport { getFocusables } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport { ForwardProps } from '../../types';\nimport {\n useAfterInitialEffect,\n useConsolidatedRef,\n useI18n,\n useOuterEvent,\n useUID\n} from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as scaleUpIcon from '../Icon/icons/scale-up.icon';\nimport * as scaleDownIcon from '../Icon/icons/scale-down.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\n\nimport { ModalManagerContext } from './Contexts';\nimport MinimizedModal from './MinimizedModal';\nimport type { ModalProps } from './Modal.types';\nimport {\n StyledModal,\n StyledModalHeader,\n StyledModalContent,\n StyledModalActions,\n StyledModalChildrenWrap\n} from './Modal.styles';\n\nregisterIcon(timesIcon, minusIcon, scaleUpIcon, scaleDownIcon);\n\nconst Modal: FunctionComponent<ModalProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ModalProps>, refArg: Ref<HTMLElement>) => {\n const {\n as,\n progress = false,\n heading,\n count,\n children,\n actions,\n stretch = false,\n center = false,\n defaultFocus,\n onBeforeOpen,\n onAfterOpen,\n onBeforeClose,\n onAfterClose,\n onRequestDismiss,\n onRequestMinimize,\n onRequestMaximize,\n onRequestDock,\n onRequestActivate,\n ...restProps\n } = props;\n\n const { ModalContext } = useContext(ModalManagerContext);\n const {\n alert,\n dismissible,\n minimizable,\n maximizable,\n dockable,\n state,\n dismiss,\n minimize,\n maximize,\n dock,\n unmount,\n top\n } = useContext(ModalContext);\n\n const modalRef = useConsolidatedRef(refArg);\n const modalContentRef = useRef<HTMLDivElement>(null);\n const backdropRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLButtonElement>(null);\n const id = useUID();\n const t = useI18n();\n\n const tryDismiss = () => {\n if (onRequestDismiss?.() !== false) {\n dismiss();\n }\n };\n\n const setFocus = () => {\n const focusables = getFocusables(modalRef);\n\n if (defaultFocus?.current) {\n defaultFocus.current.focus();\n } else {\n const focusable =\n focusables.find(el => {\n return modalContentRef.current?.contains(el);\n }) ??\n closeButtonRef.current ??\n focusables[0];\n\n focusable?.focus();\n }\n };\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (dismissible && (state === 'open' || state === 'maximized') && e.key === 'Escape' && top) {\n tryDismiss();\n return;\n }\n\n if (e.key === 'Tab') {\n const focusables = getFocusables(modalRef);\n if (!focusables || focusables.length < 2) return;\n const firstFocusable = focusables[0];\n const lastFocusable = focusables[focusables.length - 1];\n\n if (\n document.activeElement === modalRef.current ||\n (document.activeElement === firstFocusable && e.shiftKey)\n ) {\n lastFocusable?.focus();\n e.preventDefault();\n } else if (document.activeElement === lastFocusable && !e.shiftKey) {\n firstFocusable?.focus();\n e.preventDefault();\n }\n }\n };\n\n useOuterEvent('mousedown', [modalRef], e => {\n if (['minimized', 'docked', 'closed'].includes(state)) return;\n\n if (dismissible) {\n if (e.target === backdropRef.current) {\n tryDismiss();\n }\n } else {\n modalRef.current?.focus();\n }\n });\n\n useEffect(() => {\n document.addEventListener('keydown', onKeyDown);\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [onKeyDown]);\n\n useEffect(() => {\n if (state === 'minimized') return;\n if (state === 'open' || state === 'maximized' || state === 'docked') setFocus();\n }, [state]);\n\n // Set a ref based on the initial progress state to be used later to check for setting focus.\n const focusOnProgressChange = useRef(!!progress);\n useAfterInitialEffect(() => {\n // If the progress prop changed and we have already set focus we are done.\n if (!progress && focusOnProgressChange.current) {\n setFocus();\n focusOnProgressChange.current = false;\n }\n }, [progress]);\n\n const maximized = stretch || state === 'maximized';\n\n const modal = (\n <Flex\n {...restProps}\n container={{ direction: 'column' }}\n ref={modalRef}\n as={StyledModal}\n forwardedAs={as}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n alert={alert}\n role={alert ? 'alertdialog' : 'dialog'}\n stretch={maximized}\n center={center}\n aria-labelledby={`${id}-heading`}\n aria-modal={state === 'docked' ? 'false' : 'true'}\n state={state}\n // FOR PR REVIEW: This may be too much, this may be fine...\n aria-live='polite'\n aria-busy={progress ? 'true' : 'false'}\n >\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n item={{ shrink: 0 }}\n as={StyledModalHeader}\n hasAction={minimizable || dismissible}\n >\n <Flex\n container={{ alignItems: 'center', gap: 1 }}\n as={Text}\n variant='h2'\n id={`${id}-heading`}\n >\n <span>{heading}</span>\n {typeof count === 'number' && <Count>{count}</Count>}\n </Flex>\n\n <Flex container>\n {maximizable && !alert && state !== 'maximized' && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_maximize')}\n onClick={() => {\n if (onRequestMaximize?.() !== false) {\n maximize();\n }\n }}\n >\n <Icon name='scale-up' />\n </Button>\n )}\n {dockable && !alert && state !== 'docked' && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_dock')}\n onClick={() => {\n if (onRequestDock?.() !== false) {\n dock();\n }\n }}\n >\n <Icon name='scale-down' />\n </Button>\n )}\n {minimizable && !alert && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_minimize')}\n onClick={() => {\n if (onRequestMinimize?.() !== false) {\n minimize();\n }\n }}\n >\n <Icon name='minus' />\n </Button>\n )}\n {dismissible && !alert && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_close')}\n onClick={() => {\n tryDismiss();\n if (dockable) {\n onBeforeClose?.();\n unmount();\n onAfterClose?.();\n }\n }}\n ref={closeButtonRef}\n >\n <Icon name='times' />\n </Button>\n )}\n </Flex>\n </Flex>\n\n <Flex item={{ grow: 1 }} as={StyledModalContent} ref={modalContentRef}>\n {children && <StyledModalChildrenWrap>{children}</StyledModalChildrenWrap>}\n\n <Progress\n visible={!!progress}\n placement='local'\n message={typeof progress === 'object' ? progress.message : t('loading')}\n />\n </Flex>\n\n {actions && (\n <Flex container={{ justify: 'between' }} item={{ shrink: 0 }} as={StyledModalActions}>\n {actions}\n </Flex>\n )}\n </Flex>\n );\n\n const renderModal =\n state === 'docked' ? (\n modal\n ) : (\n <Backdrop\n ref={backdropRef}\n container={{\n alignItems: center || maximized ? 'center' : 'start'\n }}\n transitionSpeed='slow'\n open={state === 'open' || state === 'maximized'}\n onBeforeTransitionIn={onBeforeOpen}\n onAfterTransitionIn={onAfterOpen}\n onBeforeTransitionOut={onBeforeClose}\n onAfterTransitionOut={() => {\n unmount();\n onAfterClose?.();\n }}\n >\n {modal}\n </Backdrop>\n );\n\n return state === 'minimized' ? <MinimizedModal {...props} {...restProps} /> : renderModal;\n }\n);\n\nexport default Modal;\n"]}
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useContext,\n useEffect,\n MouseEvent,\n useRef\n} from 'react';\n\nimport Progress from '../Progress';\nimport { getFocusables } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport { ForwardProps } from '../../types';\nimport {\n useAfterInitialEffect,\n useConsolidatedRef,\n useI18n,\n useOuterEvent,\n useUID\n} from '../../hooks';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as scaleUpIcon from '../Icon/icons/scale-up.icon';\nimport * as scaleDownIcon from '../Icon/icons/scale-down.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\n\nimport { ModalManagerContext } from './Contexts';\nimport MinimizedModal from './MinimizedModal';\nimport type { ModalProps } from './Modal.types';\nimport {\n StyledModal,\n StyledModalHeader,\n StyledModalContent,\n StyledModalActions,\n StyledModalChildrenWrap\n} from './Modal.styles';\n\nregisterIcon(timesIcon, minusIcon, scaleUpIcon, scaleDownIcon);\n\nconst Modal: FunctionComponent<ModalProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<ModalProps>, refArg: Ref<HTMLElement>) => {\n const {\n as,\n progress = false,\n heading,\n count,\n children,\n actions,\n stretch = false,\n center = false,\n defaultFocus,\n onBeforeOpen,\n onAfterOpen,\n onBeforeClose,\n onAfterClose,\n onRequestDismiss,\n onRequestMinimize,\n onRequestMaximize,\n onRequestDock,\n onRequestActivate,\n ...restProps\n } = props;\n\n const { ModalContext } = useContext(ModalManagerContext);\n const {\n alert,\n dismissible,\n minimizable,\n maximizable,\n dockable,\n state,\n dismiss,\n minimize,\n maximize,\n dock,\n unmount,\n top\n } = useContext(ModalContext);\n\n const modalRef = useConsolidatedRef(refArg);\n const modalContentRef = useRef<HTMLDivElement>(null);\n const backdropRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLButtonElement>(null);\n const id = useUID();\n const t = useI18n();\n\n const tryDismiss = () => {\n if (onRequestDismiss?.() !== false) {\n dismiss();\n }\n };\n\n const setFocus = () => {\n const focusables = getFocusables(modalRef);\n\n if (defaultFocus?.current) {\n defaultFocus.current.focus();\n } else {\n const focusable =\n focusables.find(el => {\n return modalContentRef.current?.contains(el);\n }) ??\n closeButtonRef.current ??\n focusables[0];\n\n focusable?.focus();\n }\n };\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (dismissible && (state === 'open' || state === 'maximized') && e.key === 'Escape' && top) {\n tryDismiss();\n return;\n }\n\n if (e.key === 'Tab') {\n const focusables = getFocusables(modalRef);\n if (!focusables || focusables.length < 2) return;\n const firstFocusable = focusables[0];\n const lastFocusable = focusables[focusables.length - 1];\n\n if (\n document.activeElement === modalRef.current ||\n (document.activeElement === firstFocusable && e.shiftKey)\n ) {\n lastFocusable?.focus();\n e.preventDefault();\n } else if (document.activeElement === lastFocusable && !e.shiftKey) {\n firstFocusable?.focus();\n e.preventDefault();\n }\n }\n };\n\n useOuterEvent('mousedown', [modalRef], e => {\n if (['minimized', 'docked', 'closed'].includes(state)) return;\n\n if (dismissible) {\n if (e.target === backdropRef.current) {\n tryDismiss();\n }\n } else {\n modalRef.current?.focus();\n }\n });\n\n useEffect(() => {\n document.addEventListener('keydown', onKeyDown);\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [onKeyDown]);\n\n useEffect(() => {\n if (state === 'minimized') return;\n if (state === 'open' || state === 'maximized' || state === 'docked') setFocus();\n }, [state]);\n\n // Set a ref based on the initial progress state to be used later to check for setting focus.\n const focusOnProgressChange = useRef(!!progress);\n useAfterInitialEffect(() => {\n // If the progress prop changed and we have already set focus we are done.\n if (!progress && focusOnProgressChange.current) {\n setFocus();\n focusOnProgressChange.current = false;\n }\n }, [progress]);\n\n const maximized = stretch || state === 'maximized';\n\n const modal = (\n <Flex\n {...restProps}\n container={{ direction: 'column' }}\n ref={modalRef}\n as={StyledModal}\n forwardedAs={as}\n onClick={(e: MouseEvent) => e.stopPropagation()}\n alert={alert}\n role={alert ? 'alertdialog' : 'dialog'}\n stretch={maximized}\n center={center}\n aria-labelledby={`${id}-heading`}\n aria-modal={state === 'docked' ? 'false' : 'true'}\n state={state}\n // FOR PR REVIEW: This may be too much, this may be fine...\n aria-live='polite'\n aria-busy={progress ? 'true' : 'false'}\n >\n <Flex\n container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n item={{ shrink: 0 }}\n as={StyledModalHeader}\n hasAction={minimizable || dismissible}\n >\n <Flex\n container={{ alignItems: 'center', gap: 1 }}\n as={Text}\n variant='h2'\n id={`${id}-heading`}\n >\n <span>{heading}</span>\n {typeof count === 'number' && <Count>{count}</Count>}\n </Flex>\n\n <Flex container>\n {maximizable && !alert && state !== 'maximized' && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_maximize')}\n onClick={() => {\n if (onRequestMaximize?.() !== false) {\n maximize();\n }\n }}\n >\n <Icon name='scale-up' />\n </Button>\n )}\n {dockable && !alert && state !== 'docked' && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_dock')}\n onClick={() => {\n if (onRequestDock?.() !== false) {\n dock();\n }\n }}\n >\n <Icon name='scale-down' />\n </Button>\n )}\n {minimizable && !alert && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_minimize')}\n onClick={() => {\n if (onRequestMinimize?.() !== false) {\n minimize();\n }\n }}\n >\n <Icon name='minus' />\n </Button>\n )}\n {dismissible && !alert && (\n <Button\n icon\n variant='simple'\n aria-label={t('modal_close')}\n onClick={() => {\n tryDismiss();\n if (dockable) {\n onBeforeClose?.();\n unmount();\n onAfterClose?.();\n }\n }}\n ref={closeButtonRef}\n >\n <Icon name='times' />\n </Button>\n )}\n </Flex>\n </Flex>\n\n <Flex item={{ grow: 1 }} as={StyledModalContent} ref={modalContentRef}>\n {children && <StyledModalChildrenWrap>{children}</StyledModalChildrenWrap>}\n\n <Progress\n visible={!!progress}\n placement='local'\n message={typeof progress === 'object' ? progress.message : t('loading')}\n />\n </Flex>\n\n {actions && (\n <Flex container={{ justify: 'between' }} item={{ shrink: 0 }} as={StyledModalActions}>\n {actions}\n </Flex>\n )}\n </Flex>\n );\n\n const renderModal =\n state === 'docked' ? (\n modal\n ) : (\n <Backdrop\n ref={backdropRef}\n container={{\n alignItems: center || maximized ? 'center' : 'start'\n }}\n transitionSpeed='slow'\n open={state === 'open' || state === 'maximized'}\n onBeforeTransitionIn={onBeforeOpen}\n onAfterTransitionIn={onAfterOpen}\n onBeforeTransitionOut={onBeforeClose}\n onAfterTransitionOut={() => {\n unmount();\n onAfterClose?.();\n }}\n >\n {modal}\n </Backdrop>\n );\n\n return state === 'minimized' ? <MinimizedModal {...props} {...restProps} /> : renderModal;\n }\n);\n\nexport default Modal;\n"]}
|
|
@@ -72,7 +72,7 @@ const reducer = (modals, payload) => {
|
|
|
72
72
|
return modals;
|
|
73
73
|
}
|
|
74
74
|
};
|
|
75
|
-
const WrappedModal = ({ Component, id, options: { alert, dismissible, dockable, minimizable, maximizable }, state, methods, props, top }) => (_jsx(ModalContext.Provider,
|
|
75
|
+
const WrappedModal = ({ Component, id, options: { alert, dismissible, dockable, minimizable, maximizable }, state, methods, props, top }) => (_jsx(ModalContext.Provider, { value: {
|
|
76
76
|
id,
|
|
77
77
|
alert,
|
|
78
78
|
dismissible,
|
|
@@ -82,7 +82,7 @@ const WrappedModal = ({ Component, id, options: { alert, dismissible, dockable,
|
|
|
82
82
|
state,
|
|
83
83
|
top,
|
|
84
84
|
...methods
|
|
85
|
-
}
|
|
85
|
+
}, children: _jsx(Component, { ...props }, void 0) }, void 0));
|
|
86
86
|
const RenderModals = ({ modals }) => {
|
|
87
87
|
const { open, minimized, alerts } = modals.reduce((obj, modal) => {
|
|
88
88
|
if (modal.options.alert)
|
|
@@ -215,16 +215,16 @@ const ModalManager = ({ children, context = ModalManagerContext }) => {
|
|
|
215
215
|
: {
|
|
216
216
|
...priorCtx,
|
|
217
217
|
create: (Comp, props, opts) => {
|
|
218
|
-
const WrappedComp = compProps => (_jsx(ModalManager,
|
|
218
|
+
const WrappedComp = compProps => (_jsx(ModalManager, { context: context, children: _jsx(Comp, { ...compProps }, void 0) }, void 0));
|
|
219
219
|
return priorCtx.create(WrappedComp, props, opts);
|
|
220
220
|
}
|
|
221
221
|
}, [priorCtx, context]);
|
|
222
222
|
// Don't create additional Modal portals.
|
|
223
223
|
if (priorCtx[initializedKey])
|
|
224
|
-
return (_jsx(ModalManagerContext.Provider,
|
|
225
|
-
return (_jsxs(ModalManagerContext.Provider,
|
|
224
|
+
return (_jsx(ModalManagerContext.Provider, { value: priorCtxValue, children: children }, void 0));
|
|
225
|
+
return (_jsxs(ModalManagerContext.Provider, { value: providerValue, children: [children, modals.length > 0 &&
|
|
226
226
|
portalTarget &&
|
|
227
|
-
createPortal(_jsx(RenderModals, { modals: modals }, void 0), portalTarget)] }
|
|
227
|
+
createPortal(_jsx(RenderModals, { modals: modals }, void 0), portalTarget)] }, void 0));
|
|
228
228
|
};
|
|
229
229
|
export default ModalManager;
|
|
230
230
|
//# sourceMappingURL=ModalManager.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalManager.js","sourceRoot":"","sources":["../../../src/components/Modal/ModalManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useReducer,\n useMemo,\n useEffect,\n useContext,\n FunctionComponent,\n ComponentType,\n Dispatch,\n useRef\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { createUID, getScrollbarWidth, testElForOverflow } from '../../utils';\nimport { useConfiguration } from '../../hooks';\nimport { OmitStrict } from '../../types';\n\nimport DockedModals from './DockedModals';\nimport {\n ModalMethods,\n ModalOptions,\n ModalObject,\n ModalManagerProps,\n initializedKey,\n ModalState\n} from './Modal.types';\nimport { ModalContext, ModalManagerContext } from './Contexts';\n\ntype ModalAction =\n | 'create'\n | 'update'\n | 'minimize'\n | 'maximize'\n | 'dock'\n | 'activate'\n | 'dismiss'\n | 'unmount';\n\ntype ModalReducerPayload<P extends object> =\n | { action: 'create'; modal: ModalObject<P> }\n | {\n action: 'update';\n modal: Partial<OmitStrict<ModalObject<P>, 'props'>> &\n Pick<ModalObject, 'id'> & { props: Partial<ModalObject<P>['props']> };\n }\n | {\n action: Exclude<ModalAction, 'create' | 'update'>;\n modal: Pick<ModalObject, 'id'>;\n };\n\nconst reducer = <P extends object>(\n modals: ModalObject[],\n payload: ModalReducerPayload<P>\n): ModalObject<any>[] => {\n switch (payload.action) {\n case 'create':\n return [\n ...modals.map(modal => {\n if (\n (!payload.modal.options.alert &&\n payload.modal.state === 'open' &&\n !modal.options.alert &&\n modal.state === 'open' &&\n modal.options.minimizable) ||\n payload.modal.options.dockable\n ) {\n modal.state = 'minimized';\n }\n\n return modal;\n }),\n payload.modal\n ];\n\n case 'unmount':\n return modals.filter(modal => modal.id !== payload.modal.id);\n\n case 'dismiss':\n return modals.map(modal => {\n modal.state = modal.id === payload.modal.id ? 'closed' : modal.state;\n return modal;\n });\n\n case 'update':\n return modals.map(modal => {\n modal.props =\n modal.id === payload.modal.id ? { ...modal.props, ...payload.modal.props } : modal.props;\n return modal;\n });\n\n case 'activate':\n return modals.map(modal => {\n if (modal.id === payload.modal.id && !modal.options.dockable) {\n modal.state = 'open';\n } else if (modal.id === payload.modal.id && modal.options.dockable) {\n modal.state = 'docked';\n } else if (!modal.options.alert && modal.state === 'open' && modal.options.minimizable) {\n modal.state = 'minimized';\n }\n\n return modal;\n });\n\n case 'minimize':\n return modals.map(modal => {\n modal.state =\n modal.id === payload.modal.id && modal.options.minimizable ? 'minimized' : modal.state;\n return modal;\n });\n\n case 'maximize':\n return modals.map(modal => {\n modal.state =\n modal.id === payload.modal.id && modal.options.maximizable ? 'maximized' : modal.state;\n return modal;\n });\n\n case 'dock':\n return modals.map(modal => {\n modal.state =\n modal.id === payload.modal.id && modal.options.dockable ? 'docked' : 'minimized';\n return modal;\n });\n\n default:\n return modals;\n }\n};\n\nconst WrappedModal = ({\n Component,\n id,\n options: { alert, dismissible, dockable, minimizable, maximizable },\n state,\n methods,\n props,\n top\n}: ModalObject & { top: boolean }) => (\n <ModalContext.Provider\n value={{\n id,\n alert,\n dismissible,\n minimizable,\n maximizable,\n dockable,\n state,\n top,\n ...methods\n }}\n >\n <Component {...props} />\n </ModalContext.Provider>\n);\n\nconst RenderModals = ({ modals }: { modals: ModalObject[] }) => {\n const { open, minimized, alerts } = modals.reduce<{\n open: ModalObject[];\n minimized: ModalObject[];\n alerts: ModalObject[];\n }>(\n (obj, modal) => {\n if (modal.options.alert) obj.alerts.push(modal);\n else if (modal.state === 'minimized' || modal.state === 'docked') {\n obj.minimized.push(modal);\n } else obj.open.push(modal);\n\n return obj;\n },\n { open: [], minimized: [], alerts: [] }\n );\n\n return (\n <>\n {open.map((modal, i) => (\n <WrappedModal\n {...modal}\n top={alerts.length === 0 && i === open.length - 1}\n key={modal.id}\n />\n ))}\n {minimized.length > 0 && (\n <DockedModals>\n {minimized.map(modal => (\n <WrappedModal {...modal} top={false} key={modal.id} />\n ))}\n </DockedModals>\n )}\n {alerts.map((modal, i) => (\n <WrappedModal {...modal} top={i === open.length - 1} key={modal.id} />\n ))}\n </>\n );\n};\n\nconst ModalManager: FunctionComponent<ModalManagerProps> = ({\n children,\n context = ModalManagerContext\n}) => {\n const [modals, dispatch] = useReducer(reducer, []);\n const styleCache = useRef('');\n const overflowProperty = useRef<'' | 'overflow' | 'overflowX' | 'overflowY' | 'hidden'>('');\n\n const providerValue = useMemo(\n () => ({\n create: <P extends object>(\n Component: ComponentType<P>,\n props?: P,\n options?: ModalOptions\n ) => {\n const id = options?.id || createUID();\n\n const methods: ModalMethods<P> = {\n dismiss: () => {\n dispatch({ action: 'dismiss', modal: { id } });\n options?.onDismiss?.(id);\n },\n update: updateProps => {\n (dispatch as Dispatch<ModalReducerPayload<P>>)({\n action: 'update',\n modal: { id, props: updateProps }\n });\n },\n minimize: () => {\n dispatch({ action: 'minimize', modal: { id } });\n options?.onMinimize?.(id);\n },\n maximize: () => {\n dispatch({ action: 'maximize', modal: { id } });\n options?.onMaximize?.(id);\n },\n dock: () => {\n dispatch({ action: 'dock', modal: { id } });\n options?.onDock?.(id);\n },\n activate: () => {\n dispatch({ action: 'activate', modal: { id } });\n options?.onActivate?.(id);\n },\n unmount: () => {\n dispatch({ action: 'unmount', modal: { id } });\n }\n };\n\n let defaultState: ModalState;\n if (options?.defaultMinimized) {\n defaultState = 'minimized';\n } else if (options?.dockable) {\n defaultState = 'docked';\n } else {\n defaultState = 'open';\n }\n\n (dispatch as Dispatch<ModalReducerPayload<P>>)({\n action: 'create',\n modal: {\n id,\n methods,\n Component,\n props,\n state: defaultState,\n options: {\n alert: false,\n minimizable: false,\n maximizable: false,\n dockable: false,\n defaultMinimized: false,\n unmountWhenMinimized: true,\n ...options,\n dismissible: !!(options?.alert ? false : options?.dismissible ?? true)\n }\n }\n });\n\n return methods;\n },\n ModalContext,\n [initializedKey]: true\n }),\n []\n );\n\n useEffect(() => {\n if (modals.some(modal => modal.state === 'open' && !modal.options.dockable)) {\n if (!overflowProperty.current) {\n requestAnimationFrame(() => {\n overflowProperty.current = 'overflow';\n styleCache.current = document.body.style.overflow;\n if (document.body.style.overflowX) {\n styleCache.current = document.body.style.overflowX;\n overflowProperty.current = 'overflowX';\n } else if (document.body.style.overflowY) {\n styleCache.current = document.body.style.overflowY;\n overflowProperty.current = 'overflowY';\n }\n if (testElForOverflow(document.body))\n document.body.style.paddingInlineEnd = `${getScrollbarWidth()}px`;\n document.body.style.overflow = 'hidden';\n });\n }\n } else if (overflowProperty.current) {\n requestAnimationFrame(() => {\n document.body.style.paddingInlineEnd = '';\n switch (overflowProperty.current) {\n case 'overflowX':\n document.body.style.overflowX = styleCache.current;\n break;\n case 'overflowY':\n document.body.style.overflowY = styleCache.current;\n break;\n default:\n document.body.style.overflow = styleCache.current;\n break;\n }\n styleCache.current = '';\n overflowProperty.current = '';\n });\n }\n }, [modals]);\n\n const { portalTarget } = useConfiguration();\n\n const priorCtx = useContext(context);\n\n const priorCtxValue = useMemo(\n () =>\n context === ModalManagerContext\n ? priorCtx\n : {\n ...priorCtx,\n create: (Comp, props, opts) => {\n const WrappedComp: typeof Comp = compProps => (\n <ModalManager context={context}>\n <Comp {...compProps} />\n </ModalManager>\n );\n return priorCtx.create(WrappedComp, props, opts);\n }\n },\n [priorCtx, context]\n );\n\n // Don't create additional Modal portals.\n if (priorCtx[initializedKey])\n return (\n <ModalManagerContext.Provider value={priorCtxValue}>{children}</ModalManagerContext.Provider>\n );\n\n return (\n <ModalManagerContext.Provider value={providerValue}>\n {children}\n {modals.length > 0 &&\n portalTarget &&\n createPortal(<RenderModals modals={modals} />, portalTarget)}\n </ModalManagerContext.Provider>\n );\n};\n\nexport default ModalManager;\n"]}
|
|
1
|
+
{"version":3,"file":"ModalManager.js","sourceRoot":"","sources":["../../../src/components/Modal/ModalManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useReducer,\n useMemo,\n useEffect,\n useContext,\n FunctionComponent,\n ComponentType,\n Dispatch,\n useRef\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { createUID, getScrollbarWidth, testElForOverflow } from '../../utils';\nimport { useConfiguration } from '../../hooks';\nimport { OmitStrict } from '../../types';\n\nimport DockedModals from './DockedModals';\nimport {\n ModalMethods,\n ModalOptions,\n ModalObject,\n ModalManagerProps,\n initializedKey,\n ModalState\n} from './Modal.types';\nimport { ModalContext, ModalManagerContext } from './Contexts';\n\ntype ModalAction =\n | 'create'\n | 'update'\n | 'minimize'\n | 'maximize'\n | 'dock'\n | 'activate'\n | 'dismiss'\n | 'unmount';\n\ntype ModalReducerPayload<P extends object> =\n | { action: 'create'; modal: ModalObject<P> }\n | {\n action: 'update';\n modal: Partial<OmitStrict<ModalObject<P>, 'props'>> &\n Pick<ModalObject, 'id'> & { props: Partial<ModalObject<P>['props']> };\n }\n | {\n action: Exclude<ModalAction, 'create' | 'update'>;\n modal: Pick<ModalObject, 'id'>;\n };\n\nconst reducer = <P extends object>(\n modals: ModalObject[],\n payload: ModalReducerPayload<P>\n): ModalObject<any>[] => {\n switch (payload.action) {\n case 'create':\n return [\n ...modals.map(modal => {\n if (\n (!payload.modal.options.alert &&\n payload.modal.state === 'open' &&\n !modal.options.alert &&\n modal.state === 'open' &&\n modal.options.minimizable) ||\n payload.modal.options.dockable\n ) {\n modal.state = 'minimized';\n }\n\n return modal;\n }),\n payload.modal\n ];\n\n case 'unmount':\n return modals.filter(modal => modal.id !== payload.modal.id);\n\n case 'dismiss':\n return modals.map(modal => {\n modal.state = modal.id === payload.modal.id ? 'closed' : modal.state;\n return modal;\n });\n\n case 'update':\n return modals.map(modal => {\n modal.props =\n modal.id === payload.modal.id ? { ...modal.props, ...payload.modal.props } : modal.props;\n return modal;\n });\n\n case 'activate':\n return modals.map(modal => {\n if (modal.id === payload.modal.id && !modal.options.dockable) {\n modal.state = 'open';\n } else if (modal.id === payload.modal.id && modal.options.dockable) {\n modal.state = 'docked';\n } else if (!modal.options.alert && modal.state === 'open' && modal.options.minimizable) {\n modal.state = 'minimized';\n }\n\n return modal;\n });\n\n case 'minimize':\n return modals.map(modal => {\n modal.state =\n modal.id === payload.modal.id && modal.options.minimizable ? 'minimized' : modal.state;\n return modal;\n });\n\n case 'maximize':\n return modals.map(modal => {\n modal.state =\n modal.id === payload.modal.id && modal.options.maximizable ? 'maximized' : modal.state;\n return modal;\n });\n\n case 'dock':\n return modals.map(modal => {\n modal.state =\n modal.id === payload.modal.id && modal.options.dockable ? 'docked' : 'minimized';\n return modal;\n });\n\n default:\n return modals;\n }\n};\n\nconst WrappedModal = ({\n Component,\n id,\n options: { alert, dismissible, dockable, minimizable, maximizable },\n state,\n methods,\n props,\n top\n}: ModalObject & { top: boolean }) => (\n <ModalContext.Provider\n value={{\n id,\n alert,\n dismissible,\n minimizable,\n maximizable,\n dockable,\n state,\n top,\n ...methods\n }}\n >\n <Component {...props} />\n </ModalContext.Provider>\n);\n\nconst RenderModals = ({ modals }: { modals: ModalObject[] }) => {\n const { open, minimized, alerts } = modals.reduce<{\n open: ModalObject[];\n minimized: ModalObject[];\n alerts: ModalObject[];\n }>(\n (obj, modal) => {\n if (modal.options.alert) obj.alerts.push(modal);\n else if (modal.state === 'minimized' || modal.state === 'docked') {\n obj.minimized.push(modal);\n } else obj.open.push(modal);\n\n return obj;\n },\n { open: [], minimized: [], alerts: [] }\n );\n\n return (\n <>\n {open.map((modal, i) => (\n <WrappedModal\n {...modal}\n top={alerts.length === 0 && i === open.length - 1}\n key={modal.id}\n />\n ))}\n {minimized.length > 0 && (\n <DockedModals>\n {minimized.map(modal => (\n <WrappedModal {...modal} top={false} key={modal.id} />\n ))}\n </DockedModals>\n )}\n {alerts.map((modal, i) => (\n <WrappedModal {...modal} top={i === open.length - 1} key={modal.id} />\n ))}\n </>\n );\n};\n\nconst ModalManager: FunctionComponent<ModalManagerProps> = ({\n children,\n context = ModalManagerContext\n}) => {\n const [modals, dispatch] = useReducer(reducer, []);\n const styleCache = useRef('');\n const overflowProperty = useRef<'' | 'overflow' | 'overflowX' | 'overflowY' | 'hidden'>('');\n\n const providerValue = useMemo(\n () => ({\n create: <P extends object>(\n Component: ComponentType<P>,\n props?: P,\n options?: ModalOptions\n ) => {\n const id = options?.id || createUID();\n\n const methods: ModalMethods<P> = {\n dismiss: () => {\n dispatch({ action: 'dismiss', modal: { id } });\n options?.onDismiss?.(id);\n },\n update: updateProps => {\n (dispatch as Dispatch<ModalReducerPayload<P>>)({\n action: 'update',\n modal: { id, props: updateProps }\n });\n },\n minimize: () => {\n dispatch({ action: 'minimize', modal: { id } });\n options?.onMinimize?.(id);\n },\n maximize: () => {\n dispatch({ action: 'maximize', modal: { id } });\n options?.onMaximize?.(id);\n },\n dock: () => {\n dispatch({ action: 'dock', modal: { id } });\n options?.onDock?.(id);\n },\n activate: () => {\n dispatch({ action: 'activate', modal: { id } });\n options?.onActivate?.(id);\n },\n unmount: () => {\n dispatch({ action: 'unmount', modal: { id } });\n }\n };\n\n let defaultState: ModalState;\n if (options?.defaultMinimized) {\n defaultState = 'minimized';\n } else if (options?.dockable) {\n defaultState = 'docked';\n } else {\n defaultState = 'open';\n }\n\n (dispatch as Dispatch<ModalReducerPayload<P>>)({\n action: 'create',\n modal: {\n id,\n methods,\n Component,\n props,\n state: defaultState,\n options: {\n alert: false,\n minimizable: false,\n maximizable: false,\n dockable: false,\n defaultMinimized: false,\n unmountWhenMinimized: true,\n ...options,\n dismissible: !!(options?.alert ? false : options?.dismissible ?? true)\n }\n }\n });\n\n return methods;\n },\n ModalContext,\n [initializedKey]: true\n }),\n []\n );\n\n useEffect(() => {\n if (modals.some(modal => modal.state === 'open' && !modal.options.dockable)) {\n if (!overflowProperty.current) {\n requestAnimationFrame(() => {\n overflowProperty.current = 'overflow';\n styleCache.current = document.body.style.overflow;\n if (document.body.style.overflowX) {\n styleCache.current = document.body.style.overflowX;\n overflowProperty.current = 'overflowX';\n } else if (document.body.style.overflowY) {\n styleCache.current = document.body.style.overflowY;\n overflowProperty.current = 'overflowY';\n }\n if (testElForOverflow(document.body))\n document.body.style.paddingInlineEnd = `${getScrollbarWidth()}px`;\n document.body.style.overflow = 'hidden';\n });\n }\n } else if (overflowProperty.current) {\n requestAnimationFrame(() => {\n document.body.style.paddingInlineEnd = '';\n switch (overflowProperty.current) {\n case 'overflowX':\n document.body.style.overflowX = styleCache.current;\n break;\n case 'overflowY':\n document.body.style.overflowY = styleCache.current;\n break;\n default:\n document.body.style.overflow = styleCache.current;\n break;\n }\n styleCache.current = '';\n overflowProperty.current = '';\n });\n }\n }, [modals]);\n\n const { portalTarget } = useConfiguration();\n\n const priorCtx = useContext(context);\n\n const priorCtxValue = useMemo(\n () =>\n context === ModalManagerContext\n ? priorCtx\n : {\n ...priorCtx,\n create: (Comp, props, opts) => {\n const WrappedComp: typeof Comp = compProps => (\n <ModalManager context={context}>\n <Comp {...compProps} />\n </ModalManager>\n );\n return priorCtx.create(WrappedComp, props, opts);\n }\n },\n [priorCtx, context]\n );\n\n // Don't create additional Modal portals.\n if (priorCtx[initializedKey])\n return (\n <ModalManagerContext.Provider value={priorCtxValue}>{children}</ModalManagerContext.Provider>\n );\n\n return (\n <ModalManagerContext.Provider value={providerValue}>\n {children}\n {modals.length > 0 &&\n portalTarget &&\n createPortal(<RenderModals modals={modals} />, portalTarget)}\n </ModalManagerContext.Provider>\n );\n};\n\nexport default ModalManager;\n"]}
|
|
@@ -23,7 +23,7 @@ const FormProgress = ({ steps, currentId, ...restProps }) => {
|
|
|
23
23
|
useEffect(() => {
|
|
24
24
|
setCurrentStepEl(stepRefs.current[curIdx]);
|
|
25
25
|
}, [stepRefs.current, curIdx]);
|
|
26
|
-
return (_jsxs(StyledFormProgress,
|
|
26
|
+
return (_jsxs(StyledFormProgress, { ...restProps, container: { alignItems: 'center' }, role: 'progressbar', "aria-valuenow": curIdx, "aria-valuemin": 0, "aria-valuetext": curStep.name, "aria-valuemax": steps.length, children: [_jsx(CurrentStepPopover, { show: true, target: currentStepEl, placement: popoverPlacement, modifiers: [
|
|
27
27
|
{
|
|
28
28
|
name: 'offset',
|
|
29
29
|
options: {
|
|
@@ -33,11 +33,11 @@ const FormProgress = ({ steps, currentId, ...restProps }) => {
|
|
|
33
33
|
]
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
|
-
]
|
|
37
|
-
return (_jsx(StepMarker,
|
|
36
|
+
], children: _jsx(Text, { variant: 'h4', children: curStep.name }, void 0) }, void 0), _jsx(Flex, { container: { justify: 'between', alignItems: 'center' }, item: { grow: 1 }, children: steps.map((step, index) => {
|
|
37
|
+
return (_jsx(StepMarker, { ref: (el) => {
|
|
38
38
|
stepRefs.current[index] = el;
|
|
39
|
-
}, "aria-label": step.name, "aria-describedby": step.id, current: index === curIdx, depth: step.depth, prior: index < curIdx, onClick: step.onClick
|
|
40
|
-
}) }
|
|
39
|
+
}, "aria-label": step.name, "aria-describedby": step.id, current: index === curIdx, depth: step.depth, prior: index < curIdx, onClick: step.onClick, children: index !== curIdx && (_jsx(Tooltip, { id: step.id, target: stepRefs.current[index], showDelay: 'none', hideDelay: 'short', portal: false, children: step.name }, void 0)) }, step.id));
|
|
40
|
+
}) }, void 0), _jsx(StyledBar, { children: _jsx(StyledFill, { style: { '--fillScale': fillScale } }, void 0) }, void 0)] }, void 0));
|
|
41
41
|
};
|
|
42
42
|
const MultiStep = forwardRef(({ currentId, steps, ...restProps }, ref) => {
|
|
43
43
|
const multiStepContentRef = useRef(null);
|
|
@@ -47,10 +47,10 @@ const MultiStep = forwardRef(({ currentId, steps, ...restProps }, ref) => {
|
|
|
47
47
|
if (focusableElements.length)
|
|
48
48
|
focusableElements[0].focus();
|
|
49
49
|
}, [currentId]);
|
|
50
|
-
return (_jsxs(Flex,
|
|
50
|
+
return (_jsxs(Flex, { as: StyledMultiStep, ref: ref, container: {
|
|
51
51
|
direction: 'column',
|
|
52
52
|
gap: 3
|
|
53
|
-
}
|
|
53
|
+
}, ...restProps, children: [_jsx(FormProgress, { steps: steps, currentId: currentId }, void 0), _jsx(Form, { ref: multiStepContentRef, actions: currentStep.actions, banners: currentStep.banners, children: currentStep.content }, void 0)] }, void 0));
|
|
54
54
|
});
|
|
55
55
|
export default MultiStep;
|
|
56
56
|
//# sourceMappingURL=MultiStep.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiStep.js","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EACL,UAAU,EAIV,MAAM,EACN,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,eAAe,EAAE,EACtB,kBAAkB,EAClB,UAAU,EACV,SAAS,EACT,UAAU,EACV,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAG5B,MAAM,YAAY,GAAqD,CAAC,EACtE,KAAK,EACL,SAAS,EACT,GAAG,SAAS,EACG,EAAE,EAAE;IACnB,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9B,MAAM,SAAS,GAAG,MAAM,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAE9C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,UAAU,EAAE,CAAC;IACvD,MAAM,QAAQ,GAAG,MAAM,CAAgB,EAAE,CAAC,CAAC;IAC3C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,IAAI,gBAAgB,GAAoC,KAAK,CAAC;IAC9D,IAAI,MAAM,KAAK,CAAC;QAAE,gBAAgB,GAAG,WAAW,CAAC;SAC5C,IAAI,MAAM,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;QAAE,gBAAgB,GAAG,SAAS,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAE/B,OAAO,CACL,MAAC,kBAAkB,
|
|
1
|
+
{"version":3,"file":"MultiStep.js","sourceRoot":"","sources":["../../../src/components/MultiStep/MultiStep.tsx"],"names":[],"mappings":"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","sourcesContent":["import { remToPx, stripUnit } from 'polished';\nimport {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n CSSProperties,\n useRef,\n useEffect\n} from 'react';\n\nimport { useElement, useTheme } from '../../hooks';\nimport { ForwardProps } from '../../types';\nimport { getFocusables, tryCatch } from '../../utils';\nimport Flex from '../Flex';\nimport Form from '../Form';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\n\nimport StyledMultiStep, {\n CurrentStepPopover,\n StepMarker,\n StyledBar,\n StyledFill,\n StyledFormProgress\n} from './MultiStep.styles';\nimport MultiStepProps from './MultiStep.types';\n\nconst FormProgress: FunctionComponent<MultiStepProps & ForwardProps> = ({\n steps,\n currentId,\n ...restProps\n}: MultiStepProps) => {\n const curIdx = steps.findIndex(step => step.id === currentId);\n const curStep = steps[curIdx];\n const fillScale = curIdx / (steps.length - 1);\n\n const [currentStepEl, setCurrentStepEl] = useElement();\n const stepRefs = useRef<HTMLElement[]>([]);\n const theme = useTheme();\n\n let popoverPlacement: 'top' | 'top-start' | 'top-end' = 'top';\n if (curIdx === 0) popoverPlacement = 'top-start';\n else if (curIdx === steps.length - 1) popoverPlacement = 'top-end';\n\n useEffect(() => {\n setCurrentStepEl(stepRefs.current[curIdx]);\n }, [stepRefs.current, curIdx]);\n\n return (\n <StyledFormProgress\n {...restProps}\n container={{ alignItems: 'center' }}\n role='progressbar'\n aria-valuenow={curIdx}\n aria-valuemin={0}\n aria-valuetext={curStep.name}\n aria-valuemax={steps.length}\n >\n <CurrentStepPopover\n show\n target={currentStepEl}\n placement={popoverPlacement}\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: [\n 0,\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n )\n ]\n }\n }\n ]}\n >\n <Text variant='h4'>{curStep.name}</Text>\n </CurrentStepPopover>\n <Flex container={{ justify: 'between', alignItems: 'center' }} item={{ grow: 1 }}>\n {steps.map((step, index) => {\n return (\n <StepMarker\n key={step.id}\n ref={(el: HTMLElement) => {\n stepRefs.current[index] = el;\n }}\n aria-label={step.name}\n aria-describedby={step.id}\n current={index === curIdx}\n depth={step.depth}\n prior={index < curIdx}\n onClick={step.onClick}\n >\n {index !== curIdx && (\n <Tooltip\n id={step.id}\n target={stepRefs.current[index]}\n showDelay='none'\n hideDelay='short'\n portal={false}\n >\n {step.name}\n </Tooltip>\n )}\n </StepMarker>\n );\n })}\n </Flex>\n\n <StyledBar>\n <StyledFill style={{ '--fillScale': fillScale } as CSSProperties} />\n </StyledBar>\n </StyledFormProgress>\n );\n};\n\nconst MultiStep: FunctionComponent<MultiStepProps & ForwardProps> = forwardRef(\n (\n { currentId, steps, ...restProps }: PropsWithoutRef<MultiStepProps>,\n ref: MultiStepProps['ref']\n ) => {\n const multiStepContentRef = useRef(null);\n const currentStep = steps.find(step => step.id === currentId)!;\n\n useEffect(() => {\n const focusableElements = getFocusables(multiStepContentRef);\n\n if (focusableElements.length) focusableElements[0].focus();\n }, [currentId]);\n\n return (\n <Flex\n as={StyledMultiStep}\n ref={ref}\n container={{\n direction: 'column',\n gap: 3\n }}\n {...restProps}\n >\n <FormProgress steps={steps} currentId={currentId} />\n <Form ref={multiStepContentRef} actions={currentStep.actions} banners={currentStep.banners}>\n {currentStep.content}\n </Form>\n </Flex>\n );\n }\n);\n\nexport default MultiStep;\n"]}
|
|
@@ -6,7 +6,7 @@ import { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';
|
|
|
6
6
|
const NumberDisplay = forwardRef(({ value = '', unit = '', unitPlacement = 'after', formattingOptions = {}, ...restProps }, ref) => {
|
|
7
7
|
const { locale } = useConfiguration();
|
|
8
8
|
const { showDecimal = true, numberOfDecimals = NUMBER_MAX_DECIMAL_PLACES, showGroupSeparators = true } = formattingOptions;
|
|
9
|
-
return (_jsx("span",
|
|
9
|
+
return (_jsx("span", { ref: ref, ...restProps, children: value ? (`${unit && unitPlacement === 'before' ? `${unit} ` : ''}${getFormattedValue(!showDecimal ? getInteger(value) : value, locale, showGroupSeparators, numberOfDecimals)}${unit && unitPlacement === 'after' ? ` ${unit}` : ''}`) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" }, void 0)) }, void 0));
|
|
10
10
|
});
|
|
11
11
|
export default NumberDisplay;
|
|
12
12
|
//# sourceMappingURL=NumberDisplay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AA8BhE,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EACE,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,EAAE,EACT,aAAa,GAAG,OAAO,EACvB,iBAAiB,GAAG,EAAE,EACtB,GAAG,SAAS,EACwB,EACtC,GAA8B,EAC9B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,EACJ,WAAW,GAAG,IAAI,EAClB,gBAAgB,GAAG,yBAAyB,EAC5C,mBAAmB,GAAG,IAAI,EAC3B,GAAG,iBAAiB,CAAC;IAEtB,OAAO,CACL,
|
|
1
|
+
{"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AA8BhE,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EACE,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,EAAE,EACT,aAAa,GAAG,OAAO,EACvB,iBAAiB,GAAG,EAAE,EACtB,GAAG,SAAS,EACwB,EACtC,GAA8B,EAC9B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,EACJ,WAAW,GAAG,IAAI,EAClB,gBAAgB,GAAG,yBAAyB,EAC5C,mBAAmB,GAAG,IAAI,EAC3B,GAAG,iBAAiB,CAAC;IAEtB,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,CAAC,CAAC,CAAC,CACP,GAAG,IAAI,IAAI,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,iBAAiB,CACzE,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EACxC,MAAM,EACN,mBAAmB,EACnB,gBAAgB,CACjB,GAAG,IAAI,IAAI,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAC1D,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,qCAAsB,CAC/C,WACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useConfiguration } from '../../hooks';\n\nimport { getFormattedValue, getInteger } from './utils';\nimport { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\n\nexport interface NumberDisplayProps extends BaseProps {\n /** Number value */\n value?: string;\n /** Unit to be included in the text, for example '%' */\n unit?: string;\n /**\n * Determines the placement of the unit.\n * @default \"after\"\n */\n unitPlacement?: 'before' | 'after';\n formattingOptions?: {\n /** Determines whether decimal places should be shown. The value is simply truncated if true.\n * @default true\n */\n showDecimal?: boolean;\n /** Determines the maximum number of decimal places. The value is simply truncated to the number of places.\n * @default variable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1.\n */\n numberOfDecimals?: number;\n /** Determines whether group separators should be shown.\n * @default true\n */\n showGroupSeparators?: boolean;\n };\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLAnchorElement>;\n}\n\nconst NumberDisplay: FunctionComponent<NumberDisplayProps & ForwardProps> = forwardRef(\n (\n {\n value = '',\n unit = '',\n unitPlacement = 'after',\n formattingOptions = {},\n ...restProps\n }: PropsWithoutRef<NumberDisplayProps>,\n ref: NumberDisplayProps['ref']\n ) => {\n const { locale } = useConfiguration();\n const {\n showDecimal = true,\n numberOfDecimals = NUMBER_MAX_DECIMAL_PLACES,\n showGroupSeparators = true\n } = formattingOptions;\n\n return (\n <span ref={ref} {...restProps}>\n {value ? (\n `${unit && unitPlacement === 'before' ? `${unit} ` : ''}${getFormattedValue(\n !showDecimal ? getInteger(value) : value,\n locale,\n showGroupSeparators,\n numberOfDecimals\n )}${unit && unitPlacement === 'after' ? ` ${unit}` : ''}`\n ) : (\n <span aria-hidden='true'>––</span>\n )}\n </span>\n );\n }\n);\n\nexport default NumberDisplay;\n"]}
|
|
@@ -69,20 +69,20 @@ const NumberInput = forwardRef((props, ref) => {
|
|
|
69
69
|
return (ariaLabel ||
|
|
70
70
|
`${t('numeric_input') || 'Numeric Input'}${(label || unit) && ':'} ${label} ${unit && `${t('measured_in') || 'in'} ${unit}`}.`);
|
|
71
71
|
}, [ariaLabel]);
|
|
72
|
-
const NumberInputComp = (_jsxs(_Fragment, { children: [unit && unitPlacement === 'before' && _jsx(Text, { children: unit }, void 0), _jsx(Input,
|
|
72
|
+
const NumberInputComp = (_jsxs(_Fragment, { children: [unit && unitPlacement === 'before' && _jsx(Text, { children: unit }, void 0), _jsx(Input, { inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onBlur: onInputBlur, "aria-label": computedAriaLabel, ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps } }, void 0), unit && unitPlacement === 'after' && _jsx(Text, { children: unit }, void 0)] }, void 0));
|
|
73
73
|
const onMinusClick = () => {
|
|
74
74
|
onChange?.(getDecrementedValue(value, min, max, step));
|
|
75
75
|
};
|
|
76
76
|
const onPlusClick = () => {
|
|
77
77
|
onChange?.(getIncrementedValue(value, min, max, step));
|
|
78
78
|
};
|
|
79
|
-
const StepperComp = (_jsxs(Flex,
|
|
79
|
+
const StepperComp = (_jsxs(Flex, { as: StyledStepperInput, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, unitPlacement: unitPlacement, children: [_jsx(Button, { variant: 'simple', icon: true, onClick: onMinusClick, "aria-label": t('number_decrement_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'minus' }, void 0) }, void 0), _jsx(Flex, { container: { alignItems: 'center', wrap: 'nowrap', justify: 'center' }, item: { grow: 1 }, ref: containerRef, onClick: (e) => {
|
|
80
80
|
if (e.target === containerRef.current)
|
|
81
81
|
inputRef?.current?.focus();
|
|
82
|
-
}
|
|
83
|
-
const NumberComp = (_jsx(Flex,
|
|
82
|
+
}, children: NumberInputComp }, void 0), _jsx(Button, { variant: 'simple', icon: true, onClick: onPlusClick, "aria-label": t('number_increment_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0));
|
|
83
|
+
const NumberComp = (_jsx(Flex, { as: StyledNumberInput, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, children: NumberInputComp }, void 0));
|
|
84
84
|
const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;
|
|
85
|
-
return label ? (_jsx(FormField,
|
|
85
|
+
return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp }, void 0)) : (Comp);
|
|
86
86
|
});
|
|
87
87
|
export default NumberInput;
|
|
88
88
|
//# sourceMappingURL=NumberInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n forwardRef,\n FunctionComponent,\n KeyboardEvent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport Input from '../Input';\nimport { useConfiguration, useConsolidatedRef, useI18n, useUID } from '../../hooks';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport NumberInputProps, { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n getCleanedValue,\n getDecimal,\n getDecrementedValue,\n getFormattedValue,\n getIncrementedValue,\n getInteger\n} from './utils';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n status,\n label,\n labelHidden,\n info,\n required,\n disabled,\n readOnly,\n value = '',\n onChange,\n onBlur,\n unit,\n unitPlacement = 'after',\n showDecimal = true,\n numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n showGroupSeparators = true,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n variant,\n 'aria-label': ariaLabel,\n ...restProps\n } = props;\n\n const { locale } = useConfiguration();\n const [cursor, setCursor] = useState(0);\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLElement>(null);\n const numberOfDecimals = useMemo(\n () => (showDecimal ? numberOfDecimalsProp : 0),\n [showDecimal, numberOfDecimalsProp]\n );\n\n useEffect(() => {\n inputRef.current?.setSelectionRange(cursor, cursor);\n }, [cursor]);\n\n const formattedValue = useMemo(\n () =>\n getFormattedValue(\n !showDecimal ? getInteger(value) : value,\n locale,\n showGroupSeparators,\n numberOfDecimals\n ),\n [showDecimal, value, numberOfDecimals, showGroupSeparators, locale]\n );\n\n const onInputChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n const selectionStart = e.target.selectionStart;\n const decimal = getDecimal(locale);\n const cleanedInputValue = getCleanedValue(inputValue, decimal, numberOfDecimals);\n if (cleanedInputValue === value) return;\n onChange?.(cleanedInputValue);\n if (selectionStart !== undefined && selectionStart !== null) {\n const formattedVal = getFormattedValue(\n cleanedInputValue,\n locale,\n showGroupSeparators,\n numberOfDecimals\n );\n const cursorPosition =\n selectionStart + (formattedVal.length - e.target.value.length) || 1;\n setCursor(cursorPosition);\n }\n },\n [onChange, locale, value, numberOfDecimals, showDecimal, cursor, showGroupSeparators]\n );\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n if (readOnly) return;\n switch (ev.key) {\n case 'ArrowUp':\n ev.preventDefault();\n onChange?.(getIncrementedValue(value, min, max, step));\n break;\n case 'ArrowDown':\n ev.preventDefault();\n onChange?.(getDecrementedValue(value, min, max, step));\n break;\n default:\n }\n },\n [value, min, max, step, onChange]\n );\n\n const onInputBlur = useCallback(() => {\n let parsableValue = value;\n if (Number.isNaN(parseFloat(value))) {\n parsableValue = '';\n } else if (value?.endsWith('.')) {\n parsableValue = value.slice(0, -1);\n }\n onBlur?.(parsableValue);\n }, [value]);\n\n const t = useI18n();\n\n const computedAriaLabel: string = useMemo(() => {\n return (\n ariaLabel ||\n `${t('numeric_input') || 'Numeric Input'}${(label || unit) && ':'} ${label} ${\n unit && `${t('measured_in') || 'in'} ${unit}`\n }.`\n );\n }, [ariaLabel]);\n\n const NumberInputComp = (\n <>\n {unit && unitPlacement === 'before' && <Text>{unit}</Text>}\n <Input\n inputMode='numeric'\n ref={inputRef}\n value={formattedValue}\n onKeyDown={onKeyDown}\n onBlur={onInputBlur}\n aria-label={computedAriaLabel}\n {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n />\n {unit && unitPlacement === 'after' && <Text>{unit}</Text>}\n </>\n );\n\n const onMinusClick = () => {\n onChange?.(getDecrementedValue(value, min, max, step));\n };\n\n const onPlusClick = () => {\n onChange?.(getIncrementedValue(value, min, max, step));\n };\n\n const StepperComp = (\n <Flex\n as={StyledStepperInput}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n size={formattedValue?.length}\n unitPlacement={unitPlacement}\n >\n <Button\n variant='simple'\n icon\n onClick={onMinusClick}\n aria-label={t('number_decrement_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='minus' />\n </Button>\n <Flex\n container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n item={{ grow: 1 }}\n ref={containerRef}\n onClick={(e: MouseEvent) => {\n if (e.target === containerRef.current) inputRef?.current?.focus();\n }}\n >\n {NumberInputComp}\n </Flex>\n <Button\n variant='simple'\n icon\n onClick={onPlusClick}\n aria-label={t('number_increment_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='plus' />\n </Button>\n </Flex>\n );\n\n const NumberComp = (\n <Flex\n as={StyledNumberInput}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n {NumberInputComp}\n </Flex>\n );\n\n const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;\n\n return label ? (\n <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default NumberInput;\n"]}
|
|
1
|
+
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n forwardRef,\n FunctionComponent,\n KeyboardEvent,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport Input from '../Input';\nimport { useConfiguration, useConsolidatedRef, useI18n, useUID } from '../../hooks';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport NumberInputProps, { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n getCleanedValue,\n getDecimal,\n getDecrementedValue,\n getFormattedValue,\n getIncrementedValue,\n getInteger\n} from './utils';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n status,\n label,\n labelHidden,\n info,\n required,\n disabled,\n readOnly,\n value = '',\n onChange,\n onBlur,\n unit,\n unitPlacement = 'after',\n showDecimal = true,\n numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n showGroupSeparators = true,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n variant,\n 'aria-label': ariaLabel,\n ...restProps\n } = props;\n\n const { locale } = useConfiguration();\n const [cursor, setCursor] = useState(0);\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLElement>(null);\n const numberOfDecimals = useMemo(\n () => (showDecimal ? numberOfDecimalsProp : 0),\n [showDecimal, numberOfDecimalsProp]\n );\n\n useEffect(() => {\n inputRef.current?.setSelectionRange(cursor, cursor);\n }, [cursor]);\n\n const formattedValue = useMemo(\n () =>\n getFormattedValue(\n !showDecimal ? getInteger(value) : value,\n locale,\n showGroupSeparators,\n numberOfDecimals\n ),\n [showDecimal, value, numberOfDecimals, showGroupSeparators, locale]\n );\n\n const onInputChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n const selectionStart = e.target.selectionStart;\n const decimal = getDecimal(locale);\n const cleanedInputValue = getCleanedValue(inputValue, decimal, numberOfDecimals);\n if (cleanedInputValue === value) return;\n onChange?.(cleanedInputValue);\n if (selectionStart !== undefined && selectionStart !== null) {\n const formattedVal = getFormattedValue(\n cleanedInputValue,\n locale,\n showGroupSeparators,\n numberOfDecimals\n );\n const cursorPosition =\n selectionStart + (formattedVal.length - e.target.value.length) || 1;\n setCursor(cursorPosition);\n }\n },\n [onChange, locale, value, numberOfDecimals, showDecimal, cursor, showGroupSeparators]\n );\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n if (readOnly) return;\n switch (ev.key) {\n case 'ArrowUp':\n ev.preventDefault();\n onChange?.(getIncrementedValue(value, min, max, step));\n break;\n case 'ArrowDown':\n ev.preventDefault();\n onChange?.(getDecrementedValue(value, min, max, step));\n break;\n default:\n }\n },\n [value, min, max, step, onChange]\n );\n\n const onInputBlur = useCallback(() => {\n let parsableValue = value;\n if (Number.isNaN(parseFloat(value))) {\n parsableValue = '';\n } else if (value?.endsWith('.')) {\n parsableValue = value.slice(0, -1);\n }\n onBlur?.(parsableValue);\n }, [value]);\n\n const t = useI18n();\n\n const computedAriaLabel: string = useMemo(() => {\n return (\n ariaLabel ||\n `${t('numeric_input') || 'Numeric Input'}${(label || unit) && ':'} ${label} ${\n unit && `${t('measured_in') || 'in'} ${unit}`\n }.`\n );\n }, [ariaLabel]);\n\n const NumberInputComp = (\n <>\n {unit && unitPlacement === 'before' && <Text>{unit}</Text>}\n <Input\n inputMode='numeric'\n ref={inputRef}\n value={formattedValue}\n onKeyDown={onKeyDown}\n onBlur={onInputBlur}\n aria-label={computedAriaLabel}\n {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n />\n {unit && unitPlacement === 'after' && <Text>{unit}</Text>}\n </>\n );\n\n const onMinusClick = () => {\n onChange?.(getDecrementedValue(value, min, max, step));\n };\n\n const onPlusClick = () => {\n onChange?.(getIncrementedValue(value, min, max, step));\n };\n\n const StepperComp = (\n <Flex\n as={StyledStepperInput}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n size={formattedValue?.length}\n unitPlacement={unitPlacement}\n >\n <Button\n variant='simple'\n icon\n onClick={onMinusClick}\n aria-label={t('number_decrement_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='minus' />\n </Button>\n <Flex\n container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n item={{ grow: 1 }}\n ref={containerRef}\n onClick={(e: MouseEvent) => {\n if (e.target === containerRef.current) inputRef?.current?.focus();\n }}\n >\n {NumberInputComp}\n </Flex>\n <Button\n variant='simple'\n icon\n onClick={onPlusClick}\n aria-label={t('number_increment_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='plus' />\n </Button>\n </Flex>\n );\n\n const NumberComp = (\n <Flex\n as={StyledNumberInput}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n {NumberInputComp}\n </Flex>\n );\n\n const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;\n\n return label ? (\n <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default NumberInput;\n"]}
|
|
@@ -12,7 +12,7 @@ import Progress from '../Progress';
|
|
|
12
12
|
import { StyledTemplate, StyledTemplateRow, StyledPageArticle, StyledArticleHeader, StyledPageActionCol, StyledPageTitle, StyledMenuColumn, StyledCategoryHeadingRow, StyledCategoryIconBlock, StyledNav, StyledNavList, StyledNavGroup, StyledNavGroupList, StyledNavGroupHeader, StyledNavItem, StyledSkipNavigation } from './CategorySubPage.styles';
|
|
13
13
|
const NavItem = ({ item: { href, text, active, ...restProps } }) => {
|
|
14
14
|
const isAnchor = !!href;
|
|
15
|
-
return (_jsx(StyledNavItem,
|
|
15
|
+
return (_jsx(StyledNavItem, { as: 'li', selected: !!active, tabType: 'horizontal', inverted: false, "aria-current": active ? 'page' : undefined, children: _jsx(Button, { ...restProps, href: isAnchor ? href : undefined, variant: 'text', children: text }, void 0) }, void 0));
|
|
16
16
|
};
|
|
17
17
|
const NavGroup = ({ item }) => {
|
|
18
18
|
const mappedGroupedItems = useMemo(() => {
|
|
@@ -29,7 +29,7 @@ const NavGroup = ({ item }) => {
|
|
|
29
29
|
}, [item.title, item.items]);
|
|
30
30
|
const groupLabelId = useUID();
|
|
31
31
|
if (titledGroup) {
|
|
32
|
-
return (_jsxs(StyledNavGroup,
|
|
32
|
+
return (_jsxs(StyledNavGroup, { as: 'li', children: [_jsx(StyledNavGroupHeader, { variant: 'h3', id: groupLabelId, children: item.title }, void 0), _jsx(StyledNavGroupList, { "aria-labelledby": groupLabelId, children: mappedGroupedItems }, void 0)] }, void 0));
|
|
33
33
|
}
|
|
34
34
|
if (anonGroup) {
|
|
35
35
|
return _jsx(StyledNavGroup, { children: mappedGroupedItems }, void 0);
|
|
@@ -48,17 +48,17 @@ const CategorySubPage = forwardRef(({ viewLoading = false, category, categoryIco
|
|
|
48
48
|
!!icon && _jsx(Icon, { name: icon }, void 0),
|
|
49
49
|
!!text && text));
|
|
50
50
|
}, []);
|
|
51
|
-
return (_jsx(StyledTemplate, { children: _jsxs(Flex,
|
|
51
|
+
return (_jsx(StyledTemplate, { children: _jsxs(Flex, { ...restProps, ref: templateRef, as: StyledTemplateRow, container: { alignItems: 'stretch', wrap: 'nowrap' }, children: [_jsxs(StyledMenuColumn, { children: [_jsx(StyledSkipNavigation, { onClick: () => {
|
|
52
52
|
if (articleRef.current)
|
|
53
53
|
articleRef.current.focus();
|
|
54
|
-
}
|
|
54
|
+
}, children: "Skip to page content" }, void 0), _jsxs(Flex, { as: StyledCategoryHeadingRow, container: { alignItems: 'center' }, children: [categoryIcon && (_jsx(Flex, { as: StyledCategoryIconBlock, container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: categoryIcon }, void 0) }, void 0)), _jsx(Text, { variant: 'h1', children: category }, void 0)] }, void 0), _jsx(StyledNav, { children: _jsx(StyledNavList, { children: navItemGroups.map((navItem, index) => {
|
|
55
55
|
const key = hasProp(navItem, 'title') ? navItem.title : `navItem${index}`;
|
|
56
56
|
return _jsx(NavGroup, { item: navItem }, key);
|
|
57
|
-
}) }, void 0) }, void 0)] }, void 0), _jsxs(Flex,
|
|
57
|
+
}) }, void 0) }, void 0)] }, void 0), _jsxs(Flex, { as: StyledPageArticle, item: { grow: 1 }, ref: articleRef, "aria-label": pageTitle || 'Main Content', tabIndex: 0, children: [viewLoading && _jsx(Progress, { placement: 'local' }, void 0), !viewLoading && (_jsxs(_Fragment, { children: [(pageTitle || pageActions) && (_jsxs(Flex, { as: StyledArticleHeader, container: {
|
|
58
58
|
justify: 'between',
|
|
59
59
|
alignItems: 'center',
|
|
60
60
|
wrap: 'wrap'
|
|
61
|
-
}
|
|
61
|
+
}, children: [pageTitle && _jsx(StyledPageTitle, { children: pageTitle }, void 0), pageActions && !!pageActions.length && (_jsxs(_Fragment, { children: [pageActions.length <= maxActions && (_jsx(StyledPageActionCol, { children: pageActions.reverse().map(mappedAction) }, void 0)), pageActions.length > maxActions && (_jsxs(StyledPageActionCol, { children: [_jsx(MenuButton, { text: 'Actions', menu: {
|
|
62
62
|
items: pageActions
|
|
63
63
|
.slice(maxActions - 1)
|
|
64
64
|
.map(({ id, text, onClick, ...rest }) => ({
|
|
@@ -70,7 +70,7 @@ const CategorySubPage = forwardRef(({ viewLoading = false, category, categoryIco
|
|
|
70
70
|
} }, void 0), pageActions
|
|
71
71
|
.slice(0, maxActions - 1)
|
|
72
72
|
.reverse()
|
|
73
|
-
.map(mappedAction)] }, void 0))] }, void 0))] }
|
|
73
|
+
.map(mappedAction)] }, void 0))] }, void 0))] }, void 0)), region] }, void 0))] }, void 0)] }, void 0) }, void 0));
|
|
74
74
|
});
|
|
75
75
|
export default CategorySubPage;
|
|
76
76
|
//# sourceMappingURL=CategorySubPage.js.map
|