@pega/cosmos-react-core 4.0.0-dev.23.0 → 4.0.0-dev.24.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.d.ts.map +1 -1
- package/lib/components/Actions/Actions.js +1 -1
- package/lib/components/Actions/Actions.js.map +1 -1
- package/lib/components/AdditionalInfo/AdditionalInfo.d.ts.map +1 -1
- package/lib/components/AdditionalInfo/AdditionalInfo.js +3 -2
- package/lib/components/AdditionalInfo/AdditionalInfo.js.map +1 -1
- package/lib/components/AppShell/AppHeader.d.ts.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.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.js +1 -1
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/AppShell/Operator.d.ts.map +1 -1
- package/lib/components/AppShell/Operator.js +1 -1
- package/lib/components/AppShell/Operator.js.map +1 -1
- package/lib/components/Avatar/Avatar.d.ts.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.d.ts.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.d.ts.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.d.ts.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.d.ts.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.d.ts.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.d.ts.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.d.ts.map +1 -1
- package/lib/components/Banner/Banner.js +2 -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 +1 -1
- package/lib/components/Breadcrumbs/Breadcrumbs.js.map +1 -1
- package/lib/components/Button/BareButton.js +1 -1
- package/lib/components/Button/BareButton.js.map +1 -1
- package/lib/components/Button/BareRoleButton.js +1 -1
- package/lib/components/Button/BareRoleButton.js.map +1 -1
- package/lib/components/Button/Button.d.ts.map +1 -1
- package/lib/components/Button/Button.js +1 -1
- package/lib/components/Button/Button.js.map +1 -1
- package/lib/components/Card/Card.d.ts.map +1 -1
- package/lib/components/Card/Card.js +1 -1
- package/lib/components/Card/Card.js.map +1 -1
- package/lib/components/Card/CardHeader.js +1 -1
- package/lib/components/Card/CardHeader.js.map +1 -1
- package/lib/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/lib/components/Checkbox/Checkbox.js +3 -1
- package/lib/components/Checkbox/Checkbox.js.map +1 -1
- package/lib/components/ColorPicker/ColorPicker.d.ts.map +1 -1
- package/lib/components/ColorPicker/ColorPicker.js +1 -1
- package/lib/components/ColorPicker/ColorPicker.js.map +1 -1
- package/lib/components/ComboBox/ComboBox.d.ts.map +1 -1
- package/lib/components/ComboBox/ComboBox.js +1 -1
- package/lib/components/ComboBox/ComboBox.js.map +1 -1
- package/lib/components/ComboBox/ComboBoxInput.js +1 -1
- 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 +1 -1
- 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 +1 -1
- package/lib/components/ComboBox/SingleSelectInput/SingleSelectInput.js.map +1 -1
- package/lib/components/CompositeInput/CompositeInput.d.ts.map +1 -1
- package/lib/components/CompositeInput/CompositeInput.js +2 -6
- package/lib/components/CompositeInput/CompositeInput.js.map +1 -1
- package/lib/components/CreditCard/CreditCardDisplay.js +1 -1
- package/lib/components/CreditCard/CreditCardDisplay.js.map +1 -1
- package/lib/components/CreditCard/CreditCardInput.js +1 -1
- package/lib/components/CreditCard/CreditCardInput.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.d.ts.map +1 -1
- package/lib/components/Currency/CurrencyInput.js +1 -1
- package/lib/components/Currency/CurrencyInput.js.map +1 -1
- package/lib/components/DateTime/DateTimeDisplay.js +1 -1
- package/lib/components/DateTime/DateTimeDisplay.js.map +1 -1
- package/lib/components/DateTime/DurationDisplay.js +1 -1
- package/lib/components/DateTime/DurationDisplay.js.map +1 -1
- package/lib/components/DateTime/Input/DateInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/DateInput.js +1 -1
- 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/DateTimeInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/DateTimeInput.js +1 -1
- package/lib/components/DateTime/Input/DateTimeInput.js.map +1 -1
- package/lib/components/DateTime/Input/DayOfWeekInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/DayOfWeekInput.js +1 -12
- package/lib/components/DateTime/Input/DayOfWeekInput.js.map +1 -1
- package/lib/components/DateTime/Input/Duration/DurationInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/Duration/DurationInput.js +1 -1
- package/lib/components/DateTime/Input/Duration/DurationInput.js.map +1 -1
- package/lib/components/DateTime/Input/MonthInput.js +1 -1
- package/lib/components/DateTime/Input/MonthInput.js.map +1 -1
- package/lib/components/DateTime/Input/PartInput.d.ts.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 +1 -1
- package/lib/components/DateTime/Input/QuarterInput.js.map +1 -1
- package/lib/components/DateTime/Input/TimeInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/TimeInput.js +2 -5
- package/lib/components/DateTime/Input/TimeInput.js.map +1 -1
- package/lib/components/DateTime/Input/TimeRangeInput.js +1 -1
- package/lib/components/DateTime/Input/TimeRangeInput.js.map +1 -1
- package/lib/components/DateTime/Input/WeekInput.d.ts.map +1 -1
- package/lib/components/DateTime/Input/WeekInput.js +2 -3
- package/lib/components/DateTime/Input/WeekInput.js.map +1 -1
- package/lib/components/DateTime/Input/utils.d.ts +3 -0
- package/lib/components/DateTime/Input/utils.d.ts.map +1 -1
- package/lib/components/DateTime/Input/utils.js +11 -0
- package/lib/components/DateTime/Input/utils.js.map +1 -1
- package/lib/components/DateTime/Picker/Calendar.d.ts.map +1 -1
- package/lib/components/DateTime/Picker/Calendar.js +1 -1
- package/lib/components/DateTime/Picker/Calendar.js.map +1 -1
- package/lib/components/DateTime/Picker/Weeks.d.ts.map +1 -1
- package/lib/components/DateTime/Picker/Weeks.js +1 -1
- package/lib/components/DateTime/Picker/Weeks.js.map +1 -1
- package/lib/components/Dialog/Dialog.d.ts.map +1 -1
- package/lib/components/Dialog/Dialog.js +1 -1
- package/lib/components/Dialog/Dialog.js.map +1 -1
- package/lib/components/Dialog/FormDialog.d.ts.map +1 -1
- package/lib/components/Dialog/FormDialog.js +5 -9
- package/lib/components/Dialog/FormDialog.js.map +1 -1
- package/lib/components/Dialog/InfoDialog.d.ts.map +1 -1
- package/lib/components/Dialog/InfoDialog.js +4 -3
- package/lib/components/Dialog/InfoDialog.js.map +1 -1
- package/lib/components/Drawer/Drawer.d.ts.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 +1 -1
- package/lib/components/Email/EmailDisplay.js.map +1 -1
- package/lib/components/EmojiPicker/EmojiPicker.d.ts.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 +1 -1
- package/lib/components/FieldGroup/FieldGroup.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroupList.js +1 -1
- package/lib/components/FieldGroup/FieldGroupList.js.map +1 -1
- package/lib/components/FieldValueList/FieldValueList.js +1 -1
- package/lib/components/FieldValueList/FieldValueList.js.map +1 -1
- package/lib/components/File/FileDisplay.js +1 -1
- package/lib/components/File/FileDisplay.js.map +1 -1
- package/lib/components/File/FileInput.d.ts.map +1 -1
- package/lib/components/File/FileInput.js +1 -1
- package/lib/components/File/FileInput.js.map +1 -1
- package/lib/components/File/FileItem.d.ts.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.d.ts.map +1 -1
- package/lib/components/File/FileUploadItem.js +1 -1
- package/lib/components/File/FileUploadItem.js.map +1 -1
- package/lib/components/File/FileVisual.d.ts.map +1 -1
- package/lib/components/File/FileVisual.js +1 -1
- package/lib/components/File/FileVisual.js.map +1 -1
- package/lib/components/Flex/Flex.d.ts.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.d.ts.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.d.ts.map +1 -1
- package/lib/components/FormField/FormField.js +1 -1
- package/lib/components/FormField/FormField.js.map +1 -1
- package/lib/components/FormField/index.d.ts +1 -1
- package/lib/components/FormField/index.d.ts.map +1 -1
- package/lib/components/FormField/index.js +1 -1
- package/lib/components/FormField/index.js.map +1 -1
- package/lib/components/Grid/Grid.d.ts.map +1 -1
- package/lib/components/Grid/Grid.js +1 -1
- package/lib/components/Grid/Grid.js.map +1 -1
- package/lib/components/HTML/HTML.d.ts.map +1 -1
- package/lib/components/HTML/HTML.js +1 -1
- package/lib/components/HTML/HTML.js.map +1 -1
- package/lib/components/Icon/Icon.d.ts.map +1 -1
- package/lib/components/Icon/Icon.js +1 -1
- package/lib/components/Icon/Icon.js.map +1 -1
- package/lib/components/Icon/iconNames.d.ts +1 -1
- package/lib/components/Icon/iconNames.d.ts.map +1 -1
- package/lib/components/Icon/iconNames.js +1 -0
- package/lib/components/Icon/iconNames.js.map +1 -1
- package/lib/components/Icon/icons/live-transcript.icon.d.ts +5 -0
- package/lib/components/Icon/icons/live-transcript.icon.d.ts.map +1 -0
- package/lib/components/Icon/icons/live-transcript.icon.js +7 -0
- package/lib/components/Icon/icons/live-transcript.icon.js.map +1 -0
- package/lib/components/Icon/streamline-icons/code-search.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/code-search.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/code-search.icon.js.map +1 -1
- package/lib/components/Icon/streamline-icons/copy.icon.d.ts +5 -0
- package/lib/components/Icon/streamline-icons/copy.icon.d.ts.map +1 -0
- package/lib/components/Icon/streamline-icons/copy.icon.js +7 -0
- package/lib/components/Icon/streamline-icons/copy.icon.js.map +1 -0
- package/lib/components/Icon/streamline-icons/search.icon.d.ts.map +1 -1
- package/lib/components/Icon/streamline-icons/search.icon.js +1 -1
- package/lib/components/Icon/streamline-icons/search.icon.js.map +1 -1
- package/lib/components/Icon/streamlineIconNames.d.ts +1 -1
- package/lib/components/Icon/streamlineIconNames.d.ts.map +1 -1
- package/lib/components/Icon/streamlineIconNames.js +1 -0
- package/lib/components/Icon/streamlineIconNames.js.map +1 -1
- package/lib/components/IconPicker/IconPicker.js +1 -1
- package/lib/components/IconPicker/IconPicker.js.map +1 -1
- package/lib/components/Image/Image.d.ts.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.d.ts.map +1 -1
- package/lib/components/Input/Input.js +1 -1
- package/lib/components/Input/Input.js.map +1 -1
- package/lib/components/Label/Label.d.ts.map +1 -1
- package/lib/components/Label/Label.js +1 -1
- package/lib/components/Label/Label.js.map +1 -1
- package/lib/components/Lightbox/Lightbox.d.ts.map +1 -1
- package/lib/components/Lightbox/Lightbox.js +1 -1
- package/lib/components/Lightbox/Lightbox.js.map +1 -1
- package/lib/components/Link/Link.d.ts.map +1 -1
- package/lib/components/Link/Link.js +3 -4
- package/lib/components/Link/Link.js.map +1 -1
- package/lib/components/List/CommaSeparatedList.js +1 -1
- package/lib/components/List/CommaSeparatedList.js.map +1 -1
- package/lib/components/List/List.d.ts.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.d.ts.map +1 -1
- package/lib/components/List/OrderedList.js +3 -1
- package/lib/components/List/OrderedList.js.map +1 -1
- package/lib/components/List/UnorderedList.d.ts.map +1 -1
- package/lib/components/List/UnorderedList.js +3 -1
- package/lib/components/List/UnorderedList.js.map +1 -1
- package/lib/components/ListToolbar/ListToolbar.js +1 -1
- package/lib/components/ListToolbar/ListToolbar.js.map +1 -1
- package/lib/components/ListToolbar/PresetMenuPopover.d.ts.map +1 -1
- package/lib/components/ListToolbar/PresetMenuPopover.js +10 -4
- package/lib/components/ListToolbar/PresetMenuPopover.js.map +1 -1
- package/lib/components/Location/LocationDisplay.js +1 -1
- package/lib/components/Location/LocationDisplay.js.map +1 -1
- package/lib/components/Location/LocationInput.d.ts.map +1 -1
- package/lib/components/Location/LocationInput.js +1 -1
- package/lib/components/Location/LocationInput.js.map +1 -1
- package/lib/components/Menu/FlyoutMenuList.d.ts.map +1 -1
- package/lib/components/Menu/FlyoutMenuList.js +1 -1
- 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 +1 -1
- package/lib/components/Menu/Menu.js.map +1 -1
- package/lib/components/Menu/MenuList.js +1 -1
- package/lib/components/Menu/MenuList.js.map +1 -1
- package/lib/components/MenuButton/MenuButton.d.ts.map +1 -1
- package/lib/components/MenuButton/MenuButton.js +8 -6
- package/lib/components/MenuButton/MenuButton.js.map +1 -1
- package/lib/components/MetaList/MetaList.d.ts.map +1 -1
- package/lib/components/MetaList/MetaList.js +1 -1
- 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 +1 -1
- package/lib/components/Modal/DockedModals.js.map +1 -1
- package/lib/components/Modal/Modal.d.ts.map +1 -1
- package/lib/components/Modal/Modal.js +2 -5
- package/lib/components/Modal/Modal.js.map +1 -1
- package/lib/components/MultiStepForm/MultiStepForm.js +1 -1
- package/lib/components/MultiStepForm/MultiStepForm.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 +1 -1
- package/lib/components/Number/NumberInput.js.map +1 -1
- package/lib/components/Number/NumberRangeInput.js +1 -1
- package/lib/components/Number/NumberRangeInput.js.map +1 -1
- package/lib/components/PageTemplates/CategorySubPage.js +1 -1
- package/lib/components/PageTemplates/CategorySubPage.js.map +1 -1
- package/lib/components/PageTemplates/DashboardPage.js +2 -2
- package/lib/components/PageTemplates/DashboardPage.js.map +1 -1
- package/lib/components/PageTemplates/PageTemplates.d.ts.map +1 -1
- package/lib/components/PageTemplates/PageTemplates.js +11 -11
- package/lib/components/PageTemplates/PageTemplates.js.map +1 -1
- package/lib/components/Paragraph/ParagraphDisplay.js +1 -1
- package/lib/components/Paragraph/ParagraphDisplay.js.map +1 -1
- package/lib/components/Phone/PhoneDisplay.js +1 -1
- package/lib/components/Phone/PhoneDisplay.js.map +1 -1
- package/lib/components/Phone/PhoneInput.js +1 -1
- package/lib/components/Phone/PhoneInput.js.map +1 -1
- package/lib/components/Popover/Popover.d.ts.map +1 -1
- package/lib/components/Popover/Popover.js +1 -1
- package/lib/components/Popover/Popover.js.map +1 -1
- package/lib/components/Progress/Bar.d.ts.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.d.ts.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.d.ts.map +1 -1
- package/lib/components/Progress/Progress.js +1 -1
- package/lib/components/Progress/Progress.js.map +1 -1
- package/lib/components/Progress/Ring.d.ts.map +1 -1
- package/lib/components/Progress/Ring.js +1 -1
- package/lib/components/Progress/Ring.js.map +1 -1
- package/lib/components/QRCode/QRCode.d.ts.map +1 -1
- package/lib/components/QRCode/QRCode.js +1 -1
- package/lib/components/QRCode/QRCode.js.map +1 -1
- package/lib/components/RadioButton/RadioButton.d.ts.map +1 -1
- package/lib/components/RadioButton/RadioButton.js +3 -1
- package/lib/components/RadioButton/RadioButton.js.map +1 -1
- package/lib/components/RadioCheck/RadioCheck.d.ts.map +1 -1
- package/lib/components/RadioCheck/RadioCheck.js +15 -5
- package/lib/components/RadioCheck/RadioCheck.js.map +1 -1
- package/lib/components/RadioCheckGroup/RadioCheckGroup.d.ts.map +1 -1
- package/lib/components/RadioCheckGroup/RadioCheckGroup.js +1 -1
- package/lib/components/RadioCheckGroup/RadioCheckGroup.js.map +1 -1
- package/lib/components/Rating/Rating.d.ts.map +1 -1
- package/lib/components/Rating/Rating.js +3 -6
- package/lib/components/Rating/Rating.js.map +1 -1
- package/lib/components/SearchInput/SearchInput.d.ts.map +1 -1
- package/lib/components/SearchInput/SearchInput.js +4 -12
- package/lib/components/SearchInput/SearchInput.js.map +1 -1
- package/lib/components/Select/Select.d.ts.map +1 -1
- package/lib/components/Select/Select.js +1 -1
- package/lib/components/Select/Select.js.map +1 -1
- package/lib/components/Sentiment/Sentiment.d.ts.map +1 -1
- package/lib/components/Sentiment/Sentiment.js +1 -1
- package/lib/components/Sentiment/Sentiment.js.map +1 -1
- package/lib/components/Slider/Slider.d.ts.map +1 -1
- package/lib/components/Slider/Slider.js +1 -1
- package/lib/components/Slider/Slider.js.map +1 -1
- package/lib/components/Slider/Slider.styles.d.ts.map +1 -1
- package/lib/components/Slider/Slider.styles.js +3 -3
- package/lib/components/Slider/Slider.styles.js.map +1 -1
- package/lib/components/SummaryItem/SummaryItem.js +1 -1
- package/lib/components/SummaryItem/SummaryItem.js.map +1 -1
- package/lib/components/SummaryList/SummaryList.d.ts.map +1 -1
- package/lib/components/SummaryList/SummaryList.js +1 -1
- package/lib/components/SummaryList/SummaryList.js.map +1 -1
- package/lib/components/SummaryList/ViewAll.d.ts.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.d.ts.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 +1 -1
- package/lib/components/Table/Table.js.map +1 -1
- package/lib/components/Tabs/Tab.d.ts +2 -0
- package/lib/components/Tabs/Tab.d.ts.map +1 -1
- package/lib/components/Tabs/Tab.js +19 -3
- package/lib/components/Tabs/Tab.js.map +1 -1
- package/lib/components/Tabs/TabPanel.d.ts.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.d.ts.map +1 -1
- package/lib/components/Tabs/Tabs.js +3 -3
- package/lib/components/Tabs/Tabs.js.map +1 -1
- package/lib/components/Tabs/Tabs.types.d.ts +2 -0
- package/lib/components/Tabs/Tabs.types.d.ts.map +1 -1
- package/lib/components/Tabs/Tabs.types.js.map +1 -1
- package/lib/components/Text/Text.d.ts.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.d.ts.map +1 -1
- package/lib/components/TextArea/TextArea.js +1 -1
- package/lib/components/TextArea/TextArea.js.map +1 -1
- package/lib/components/Toaster/Toaster.d.ts.map +1 -1
- package/lib/components/Toaster/Toaster.js +1 -1
- package/lib/components/Toaster/Toaster.js.map +1 -1
- package/lib/components/Tooltip/Tooltip.d.ts.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 +2 -2
- package/lib/components/Tree/StandardTree.js.map +1 -1
- package/lib/components/Tree/Tree.d.ts.map +1 -1
- package/lib/components/Tree/Tree.js +2 -2
- package/lib/components/Tree/Tree.js.map +1 -1
- package/lib/components/URL/URLDisplay.js +1 -1
- package/lib/components/URL/URLDisplay.js.map +1 -1
- package/lib/components/VisuallyHiddenText/VisuallyHiddenText.d.ts.map +1 -1
- package/lib/components/VisuallyHiddenText/VisuallyHiddenText.js +3 -1
- package/lib/components/VisuallyHiddenText/VisuallyHiddenText.js.map +1 -1
- package/lib/hooks/useEscape.d.ts +3 -0
- package/lib/hooks/useEscape.d.ts.map +1 -1
- package/lib/hooks/useEscape.js +5 -2
- package/lib/hooks/useEscape.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +25 -14
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +25 -14
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +28 -16
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +25 -14
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/styles/GlobalStyle.d.ts +2 -2
- package/lib/styles/GlobalStyle.d.ts.map +1 -1
- package/lib/styles/GlobalStyle.js +2 -2
- package/lib/styles/GlobalStyle.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, useState, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { ForwardProps } from '../../types';\nimport Text from '../Text';\nimport { useConfiguration, useConsolidatedRef, useI18n, useLiveLog } from '../../hooks';\nimport Flex from '../Flex';\n\nimport { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\nimport { StyledMessage, StyledProgress, StyledProgressBackdrop } from './Progress.styles';\n\nconst variantMap = {\n ring: Ring,\n bar: Bar,\n ellipsis: Ellipsis\n} as const;\n\nconst delayDuration = 100;\nconst minVisibleDuration = 1000;\n\nconst Progress: FC<ProgressProps & ForwardProps> = forwardRef(\n (\n {\n variant = 'ring',\n placement = 'global',\n visible: visibleProp = true,\n focusOnVisible = false,\n delay = false,\n onTransitionEndIn,\n onTransitionEndOut,\n value,\n message,\n liveConfig,\n ...restProps\n }: PropsWithoutRef<ProgressProps>,\n ref: ProgressProps['ref']\n ) => {\n const t = useI18n();\n const { portalTarget } = useConfiguration();\n const { announcePolite } = useLiveLog();\n const progressEl = useConsolidatedRef<HTMLDivElement>(ref);\n\n // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.\n const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);\n const [nullRender, setNullRender] = useState(!isVisibleState);\n\n // Refs for timestamps and timeout ids.\n const timeBeforeVisibleRender = useRef<number>();\n const timeAfterVisibleRender = useRef<number>();\n const delayTimer = useRef<number>();\n const minVisibleTimer = useRef<number>();\n\n const hasBackdrop = placement === 'global' || placement === 'local';\n const valString = typeof value === 'number' ? `${value}%` : undefined;\n const label = message && valString ? `${message} - ${valString}` : message || valString;\n\n const renderVisible = () => {\n setIsVisibleState(true);\n setNullRender(false);\n };\n\n const renderNotVisible = () => {\n setIsVisibleState(false);\n // With a transition, setNullRender needs to be called in Backdrop's onAfterTransitionOut.\n if (!hasBackdrop) {\n setNullRender(true);\n }\n };\n\n // Handle render and visible state.\n useEffect(\n () => {\n if (visibleProp) {\n // Capture a timestamp for additional timers.\n timeBeforeVisibleRender.current = Date.now();\n\n if (delay) {\n delayTimer.current = window.setTimeout(renderVisible, delayDuration);\n } else {\n renderVisible();\n }\n } else if (\n // A timer was started to render visible either avoid it or render null.\n delayTimer.current !== undefined\n ) {\n // If a timeout has started to render visible, clear it.\n clearTimeout(delayTimer.current);\n\n // If the indicator has already rendered visible.\n if (timeAfterVisibleRender.current !== undefined) {\n const timeElapsedSinceLastVisibleRender = Date.now() - timeAfterVisibleRender.current;\n\n // If the indicator has been visible for long enough we can remove it.\n if (timeElapsedSinceLastVisibleRender >= minVisibleDuration) {\n renderNotVisible();\n } else {\n // Hold off removing until we hit the minimum visible time.\n minVisibleTimer.current = window.setTimeout(\n renderNotVisible,\n minVisibleDuration - timeElapsedSinceLastVisibleRender\n );\n }\n } else {\n renderNotVisible();\n }\n } else {\n renderNotVisible();\n }\n },\n // visibleProp is the only triggerable dependency. Others values will be captured.\n [visibleProp]\n );\n\n // Live announcement\n useEffect(\n () => {\n if (liveConfig?.contextualLabel && isVisibleState) {\n announcePolite({\n message: `${liveConfig.contextualLabel}, ${label ?? t('loading')}`,\n type: 'status'\n });\n }\n },\n // isVisibleState is the only triggerable dependency. Others values will be captured.\n [isVisibleState]\n );\n\n // Auto focusing and render timestamping.\n useEffect(\n () => {\n if (!nullRender && isVisibleState) {\n // After a visible render set a timestamp for timers above.\n timeAfterVisibleRender.current = Date.now();\n\n if (focusOnVisible) progressEl.current?.focus();\n }\n },\n // nullRender is the only triggerable dependency. Others values will be captured.\n [nullRender]\n );\n\n if (nullRender) return null;\n\n const CompVariant = variantMap[variant];\n\n let indicator = (\n <CompVariant\n aria-label={typeof value !== 'number' ? label : t('loading')}\n as={placement === 'inline' ? 'span' : undefined}\n {...restProps}\n placement={placement}\n value={value}\n aria-valuetext={typeof value === 'number' ? label : undefined}\n ref={progressEl}\n tabIndex={-1}\n />\n );\n\n if (placement !== 'inline') {\n indicator = (\n <Flex\n container={{ direction: 'column', alignItems: 'center', gap: 0.5 }}\n as={StyledProgress}\n placement={placement}\n >\n {indicator}\n {message && (\n <Text as={StyledMessage} variant='secondary' aria-hidden='true'>\n {message}\n </Text>\n )}\n </Flex>\n );\n }\n\n const content = hasBackdrop ? (\n <StyledProgressBackdrop\n open={isVisibleState}\n container={{ direction: 'column' }}\n position={placement === 'global' ? 'fixed' : 'absolute'}\n variant='light'\n alpha={0.8}\n onAfterTransitionIn={onTransitionEndIn}\n onAfterTransitionOut={() => {\n setNullRender(true);\n onTransitionEndOut?.();\n }}\n >\n {indicator}\n </StyledProgressBackdrop>\n ) : (\n indicator\n );\n\n return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n }\n);\n\nexport default Progress;\n"]}
|
|
1
|
+
{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, useState, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { ForwardProps } from '../../types';\nimport Text from '../Text';\nimport { useConfiguration, useConsolidatedRef, useI18n, useLiveLog } from '../../hooks';\nimport Flex from '../Flex';\n\nimport { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\nimport { StyledMessage, StyledProgress, StyledProgressBackdrop } from './Progress.styles';\n\nconst variantMap = {\n ring: Ring,\n bar: Bar,\n ellipsis: Ellipsis\n} as const;\n\nconst delayDuration = 100;\nconst minVisibleDuration = 1000;\n\nconst Progress: FC<ProgressProps & ForwardProps> = forwardRef(function Progress(\n {\n variant = 'ring',\n placement = 'global',\n visible: visibleProp = true,\n focusOnVisible = false,\n delay = false,\n onTransitionEndIn,\n onTransitionEndOut,\n value,\n message,\n liveConfig,\n ...restProps\n }: PropsWithoutRef<ProgressProps>,\n ref: ProgressProps['ref']\n) {\n const t = useI18n();\n const { portalTarget } = useConfiguration();\n const { announcePolite } = useLiveLog();\n const progressEl = useConsolidatedRef<HTMLDivElement>(ref);\n\n // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.\n const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);\n const [nullRender, setNullRender] = useState(!isVisibleState);\n\n // Refs for timestamps and timeout ids.\n const timeBeforeVisibleRender = useRef<number>();\n const timeAfterVisibleRender = useRef<number>();\n const delayTimer = useRef<number>();\n const minVisibleTimer = useRef<number>();\n\n const hasBackdrop = placement === 'global' || placement === 'local';\n const valString = typeof value === 'number' ? `${value}%` : undefined;\n const label = message && valString ? `${message} - ${valString}` : message || valString;\n\n const renderVisible = () => {\n setIsVisibleState(true);\n setNullRender(false);\n };\n\n const renderNotVisible = () => {\n setIsVisibleState(false);\n // With a transition, setNullRender needs to be called in Backdrop's onAfterTransitionOut.\n if (!hasBackdrop) {\n setNullRender(true);\n }\n };\n\n // Handle render and visible state.\n useEffect(\n () => {\n if (visibleProp) {\n // Capture a timestamp for additional timers.\n timeBeforeVisibleRender.current = Date.now();\n\n if (delay) {\n delayTimer.current = window.setTimeout(renderVisible, delayDuration);\n } else {\n renderVisible();\n }\n } else if (\n // A timer was started to render visible either avoid it or render null.\n delayTimer.current !== undefined\n ) {\n // If a timeout has started to render visible, clear it.\n clearTimeout(delayTimer.current);\n\n // If the indicator has already rendered visible.\n if (timeAfterVisibleRender.current !== undefined) {\n const timeElapsedSinceLastVisibleRender = Date.now() - timeAfterVisibleRender.current;\n\n // If the indicator has been visible for long enough we can remove it.\n if (timeElapsedSinceLastVisibleRender >= minVisibleDuration) {\n renderNotVisible();\n } else {\n // Hold off removing until we hit the minimum visible time.\n minVisibleTimer.current = window.setTimeout(\n renderNotVisible,\n minVisibleDuration - timeElapsedSinceLastVisibleRender\n );\n }\n } else {\n renderNotVisible();\n }\n } else {\n renderNotVisible();\n }\n },\n // visibleProp is the only triggerable dependency. Others values will be captured.\n [visibleProp]\n );\n\n // Live announcement\n useEffect(\n () => {\n if (liveConfig?.contextualLabel && isVisibleState) {\n announcePolite({\n message: `${liveConfig.contextualLabel}, ${label ?? t('loading')}`,\n type: 'status'\n });\n }\n },\n // isVisibleState is the only triggerable dependency. Others values will be captured.\n [isVisibleState]\n );\n\n // Auto focusing and render timestamping.\n useEffect(\n () => {\n if (!nullRender && isVisibleState) {\n // After a visible render set a timestamp for timers above.\n timeAfterVisibleRender.current = Date.now();\n\n if (focusOnVisible) progressEl.current?.focus();\n }\n },\n // nullRender is the only triggerable dependency. Others values will be captured.\n [nullRender]\n );\n\n if (nullRender) return null;\n\n const CompVariant = variantMap[variant];\n\n let indicator = (\n <CompVariant\n aria-label={typeof value !== 'number' ? label : t('loading')}\n as={placement === 'inline' ? 'span' : undefined}\n {...restProps}\n placement={placement}\n value={value}\n aria-valuetext={typeof value === 'number' ? label : undefined}\n ref={progressEl}\n tabIndex={-1}\n />\n );\n\n if (placement !== 'inline') {\n indicator = (\n <Flex\n container={{ direction: 'column', alignItems: 'center', gap: 0.5 }}\n as={StyledProgress}\n placement={placement}\n >\n {indicator}\n {message && (\n <Text as={StyledMessage} variant='secondary' aria-hidden='true'>\n {message}\n </Text>\n )}\n </Flex>\n );\n }\n\n const content = hasBackdrop ? (\n <StyledProgressBackdrop\n open={isVisibleState}\n container={{ direction: 'column' }}\n position={placement === 'global' ? 'fixed' : 'absolute'}\n variant='light'\n alpha={0.8}\n onAfterTransitionIn={onTransitionEndIn}\n onAfterTransitionOut={() => {\n setNullRender(true);\n onTransitionEndOut?.();\n }}\n >\n {indicator}\n </StyledProgressBackdrop>\n ) : (\n indicator\n );\n\n return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n});\n\nexport default Progress;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Ring.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Ring.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"Ring.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Ring.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CA6BzC,CAAC;AAEH,eAAe,IAAI,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { StyledProgressRing } from './Progress.styles';
|
|
4
|
-
const Ring = forwardRef(({ value, minValue = 0, maxValue = 100, placement, ...restProps }, ref)
|
|
4
|
+
const Ring = forwardRef(function Ring({ value, minValue = 0, maxValue = 100, placement, ...restProps }, ref) {
|
|
5
5
|
let strokeDashoffset;
|
|
6
6
|
const circumference = 18 * Math.PI;
|
|
7
7
|
if (typeof value !== 'number')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Ring.js","sourceRoot":"","sources":["../../../src/components/Progress/Ring.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAGvD,MAAM,IAAI,GAAqC,UAAU,
|
|
1
|
+
{"version":3,"file":"Ring.js","sourceRoot":"","sources":["../../../src/components/Progress/Ring.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAGvD,MAAM,IAAI,GAAqC,UAAU,CAAC,SAAS,IAAI,CACrE,EAAE,KAAK,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,GAAG,EAAE,SAAS,EAAE,GAAG,SAAS,EAAkC,EAChG,GAAyB;IAEzB,IAAI,gBAAgB,CAAC;IACrB,MAAM,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IAEnC,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,gBAAgB,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;SAC5E,IAAI,KAAK,GAAG,QAAQ,IAAI,QAAQ,GAAG,QAAQ;QAAE,gBAAgB,GAAG,CAAC,CAAC;SAClE,IAAI,KAAK,GAAG,QAAQ;QAAE,gBAAgB,GAAG,aAAa,CAAC;;QACvD,gBAAgB,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG,aAAa,CAAC;IAEzF,OAAO,CACL,KAAC,kBAAkB,IACjB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,aAAa,mBACH,QAAQ,mBACR,QAAQ,mBACR,KAAK,EACpB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,OAAO,KAAK,KAAK,QAAQ,KAClC,SAAS,YAEb,eAAK,OAAO,EAAC,WAAW,aACtB,kBAAU,EACV,iBAAQ,eAAe,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,gBAAgB,EAAE,GAAI,IACnE,GACa,CACtB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef } from 'react';\n\nimport { ForwardProps } from '../../types';\n\nimport { StyledProgressRing } from './Progress.styles';\nimport { ProgressProps } from './Progress.types';\n\nconst Ring: FC<ProgressProps & ForwardProps> = forwardRef(function Ring(\n { value, minValue = 0, maxValue = 100, placement, ...restProps }: PropsWithoutRef<ProgressProps>,\n ref: ProgressProps['ref']\n) {\n let strokeDashoffset;\n const circumference = 18 * Math.PI;\n\n if (typeof value !== 'number') strokeDashoffset = (1 - 33 / 100) * circumference;\n else if (value > maxValue || minValue > maxValue) strokeDashoffset = 0;\n else if (value < minValue) strokeDashoffset = circumference;\n else strokeDashoffset = (1 - (value - minValue) / (maxValue - minValue)) * circumference;\n\n return (\n <StyledProgressRing\n ref={ref}\n role='progressbar'\n aria-valuemin={minValue}\n aria-valuemax={maxValue}\n aria-valuenow={value}\n placement={placement}\n determinate={typeof value === 'number'}\n {...restProps}\n >\n <svg viewBox='0 0 20 20'>\n <circle />\n <circle strokeDasharray={circumference} style={{ strokeDashoffset }} />\n </svg>\n </StyledProgressRing>\n );\n});\n\nexport default Ring;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QRCode.d.ts","sourceRoot":"","sources":["../../../src/components/QRCode/QRCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAOtD,eAAO,MAAM,oBAAoB,yGAQ/B,CAAC;AAIH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,GAAG,cAAc,CAAC,CAAC;CAC9C;AAED,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"QRCode.d.ts","sourceRoot":"","sources":["../../../src/components/QRCode/QRCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAOtD,eAAO,MAAM,oBAAoB,yGAQ/B,CAAC;AAIH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,GAAG,cAAc,CAAC,CAAC;CAC9C;AAED,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA2CxD,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -17,7 +17,7 @@ export const StyledEmptyQRWrapper = styled.div(({ theme }) => {
|
|
|
17
17
|
`;
|
|
18
18
|
});
|
|
19
19
|
StyledEmptyQRWrapper.defaultProps = defaultThemeProp;
|
|
20
|
-
const QRCode = forwardRef(({ value, label = value, ...restProps }, ref)
|
|
20
|
+
const QRCode = forwardRef(function QRCode({ value, label = value, ...restProps }, ref) {
|
|
21
21
|
const [dataURL, setDataURL] = useState('');
|
|
22
22
|
const t = useI18n();
|
|
23
23
|
const mounted = useRef(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QRCode.js","sourceRoot":"","sources":["../../../src/components/QRCode/QRCode.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAIV,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,SAAS,MAAM,QAAQ,CAAC;AACpC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,UAAU,CAAC;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,UAAU,MAAM,eAAe,CAAC;AAEvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,OAAO,GAAG,CAAA;cACE,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;aAC/B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;8BACb,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;0BACrC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;GAElD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAWrD,MAAM,MAAM,GAAkD,UAAU,
|
|
1
|
+
{"version":3,"file":"QRCode.js","sourceRoot":"","sources":["../../../src/components/QRCode/QRCode.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAIV,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,SAAS,MAAM,QAAQ,CAAC;AACpC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,KAAK,MAAM,UAAU,CAAC;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,UAAU,MAAM,eAAe,CAAC;AAEvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,OAAO,GAAG,CAAA;cACE,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;aAC/B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;8BACb,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;0BACrC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;GAElD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAWrD,MAAM,MAAM,GAAkD,UAAU,CAAC,SAAS,MAAM,CACtF,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,SAAS,EAAgC,EACpE,GAAuB;IAEvB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9B,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC;aACvB,IAAI,CAAC,OAAO,CAAC,EAAE;YACd,IAAI,OAAO,CAAC,OAAO;gBAAE,UAAU,CAAC,OAAO,CAAC,CAAC;QAC3C,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,UAAU,CAAC,EAAE,CAAC,CAAC;QACjB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,KAAC,KAAK,OAAK,SAAS,EAAE,GAAG,EAAE,GAA4B,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,GAAI,CACtF,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,QAAQ;YACjB,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,CAAC;SACP,EACD,EAAE,EAAE,oBAAoB,YAExB,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,uBAAuB,CAAC,GAAI,GAC9C,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport * as QRCodeLib from 'qrcode';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport { useI18n } from '../../hooks';\nimport EmptyState from '../EmptyState';\n\nexport const StyledEmptyQRWrapper = styled.div(({ theme }) => {\n return css`\n height: ${theme.base['content-width'].xs};\n width: ${theme.base['content-width'].xs};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: calc(${theme.base['border-radius']} / 2);\n text-align: center;\n `;\n});\n\nStyledEmptyQRWrapper.defaultProps = defaultThemeProp;\n\nexport interface QRCodeProps extends BaseProps {\n /** Text that need to be encoded into QR code. */\n value: string;\n /** The HTML alt attribute for the image. */\n label?: string;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLImageElement | HTMLDivElement>;\n}\n\nconst QRCode: FunctionComponent<QRCodeProps & ForwardProps> = forwardRef(function QRCode(\n { value, label = value, ...restProps }: PropsWithoutRef<QRCodeProps>,\n ref: QRCodeProps['ref']\n) {\n const [dataURL, setDataURL] = useState('');\n const t = useI18n();\n\n const mounted = useRef(false);\n useEffect(() => {\n mounted.current = true;\n return () => {\n mounted.current = false;\n };\n }, []);\n\n useEffect(() => {\n QRCodeLib.toDataURL(value)\n .then(results => {\n if (mounted.current) setDataURL(results);\n })\n .catch(() => {\n setDataURL('');\n });\n }, [value]);\n\n return dataURL ? (\n <Image {...restProps} ref={ref as Ref<HTMLImageElement>} src={dataURL} alt={label} />\n ) : (\n <Flex\n {...restProps}\n ref={ref}\n container={{\n direction: 'column',\n alignItems: 'center',\n justify: 'center',\n gap: 1,\n pad: 2\n }}\n as={StyledEmptyQRWrapper}\n >\n <EmptyState message={t('qr_code_not_available')} />\n </Flex>\n );\n});\n\nexport default QRCode;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,oEAAoE;IACpE,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD;;;OAGG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACvD;AAGD,QAAA,MAAM,EAAE,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,EAAE,EAAmB,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,oEAAoE;IACpE,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD;;;OAGG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACvD;AAGD,QAAA,MAAM,EAAE,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAK1C,CAAC;AAKH,eAAe,EAAE,CAAC"}
|
|
@@ -2,7 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import RadioCheck from '../RadioCheck';
|
|
4
4
|
// Odd issue with SB doc prop table not being generated when called RadioButton...so using RB
|
|
5
|
-
const RB = forwardRef((props, ref)
|
|
5
|
+
const RB = forwardRef(function RB(props, ref) {
|
|
6
|
+
return _jsx(RadioCheck, { ...props, type: 'radio', ref: ref });
|
|
7
|
+
});
|
|
6
8
|
// Adding here for doc purposes only
|
|
7
9
|
RB.defaultProps = RadioCheck.defaultProps;
|
|
8
10
|
export default RB;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,UAAU,EAAO,MAAM,OAAO,CAAC;AAGzD,OAAO,UAA+B,MAAM,eAAe,CAAC;AAgC5D,6FAA6F;AAC7F,MAAM,EAAE,GAAwC,UAAU,
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,UAAU,EAAO,MAAM,OAAO,CAAC;AAGzD,OAAO,UAA+B,MAAM,eAAe,CAAC;AAgC5D,6FAA6F;AAC7F,MAAM,EAAE,GAAwC,UAAU,CAAC,SAAS,EAAE,CACpE,KAAuB,EACvB,GAA0B;IAE1B,OAAO,KAAC,UAAU,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,GAAI,CAAC;AAC1D,CAAC,CAAC,CAAC;AAEH,oCAAoC;AACpC,EAAE,CAAC,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC;AAE1C,eAAe,EAAE,CAAC","sourcesContent":["import { ChangeEvent, FC, forwardRef, Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport RadioCheck, { RadioCheckProps } from '../RadioCheck';\nimport type { ForwardProps, NoChildrenProp } from '../../types';\n\nexport interface RadioButtonProps extends NoChildrenProp {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Sets checked prop via onChange when using as controlled component. */\n checked?: RadioCheckProps['checked'];\n /** Initialize checked prop when using as uncontrolled component. */\n defaultChecked?: RadioCheckProps['defaultChecked'];\n /**\n * Sets Radio Button to an an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-radio-buttons).\n * @default false\n */\n indeterminate?: RadioCheckProps['indeterminate'];\n /** Callback invoked when this particular radio button is selected. */\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n}\n\n// Odd issue with SB doc prop table not being generated when called RadioButton...so using RB\nconst RB: FC<RadioButtonProps & ForwardProps> = forwardRef(function RB(\n props: RadioButtonProps,\n ref: Ref<HTMLInputElement>\n) {\n return <RadioCheck {...props} type='radio' ref={ref} />;\n});\n\n// Adding here for doc purposes only\nRB.defaultProps = RadioCheck.defaultProps;\n\nexport default RB;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioCheck.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EACF,GAAG,EAKH,iBAAiB,EACjB,oBAAoB,EACrB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAGrE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMtE,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8BAA8B;IAC9B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,8CAA8C;IAC9C,SAAS,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,sBAAsB,mJAiDlC,CAAC;AAIF,eAAO,MAAM,qBAAqB,2GAiGhC,CAAC;AAIH,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"RadioCheck.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EACF,GAAG,EAKH,iBAAiB,EACjB,oBAAoB,EACrB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAGrE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMtE,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8BAA8B;IAC9B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,8CAA8C;IAC9C,SAAS,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,sBAAsB,mJAiDlC,CAAC;AAIF,eAAO,MAAM,qBAAqB,2GAiGhC,CAAC;AAIH,eAAO,MAAM,gBAAgB,qJAkD5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kKAgEhC,CAAC;AAIF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CA2FjD,CAAC;AAEH,eAAe,UAAU,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import { forwardRef, useEffect } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { readableColor, hideVisually, mix } from 'polished';
|
|
5
|
-
import FormField from '../FormField';
|
|
5
|
+
import FormField, { StyledFormFieldInfo } from '../FormField';
|
|
6
6
|
import { StyledFormControl } from '../FormControl';
|
|
7
7
|
import { defaultThemeProp } from '../../theme';
|
|
8
8
|
import { tryCatch } from '../../utils';
|
|
@@ -135,6 +135,11 @@ export const StyledRadioCheck = styled.div(props => {
|
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
+
> ${StyledFormFieldInfo} {
|
|
139
|
+
margin: 0;
|
|
140
|
+
padding-inline-start: calc(${base.spacing} / 4);
|
|
141
|
+
}
|
|
142
|
+
|
|
138
143
|
${!(disabled || readOnly) &&
|
|
139
144
|
css `
|
|
140
145
|
&:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {
|
|
@@ -148,7 +153,6 @@ export const StyledRadioCheckCard = styled.label(({ disabled, readOnly, status,
|
|
|
148
153
|
const useBorderColor = status === 'error' ? formField.error['status-color'] : palette['border-line'];
|
|
149
154
|
return css `
|
|
150
155
|
min-width: min-content;
|
|
151
|
-
align-items: start;
|
|
152
156
|
cursor: pointer;
|
|
153
157
|
background-color: ${card.background};
|
|
154
158
|
border-radius: ${card['border-radius']};
|
|
@@ -176,15 +180,21 @@ export const StyledRadioCheckCard = styled.label(({ disabled, readOnly, status,
|
|
|
176
180
|
`}
|
|
177
181
|
|
|
178
182
|
> ${StyledLabel} {
|
|
179
|
-
display:
|
|
180
|
-
|
|
183
|
+
display: flex;
|
|
184
|
+
align-items: center;
|
|
181
185
|
color: ${label.color};
|
|
182
186
|
font-weight: ${label['font-weight']};
|
|
187
|
+
margin: 0;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
> ${StyledFormFieldInfo} {
|
|
191
|
+
margin: 0;
|
|
192
|
+
padding-inline-start: calc(${spacing} / 4);
|
|
183
193
|
}
|
|
184
194
|
`;
|
|
185
195
|
});
|
|
186
196
|
StyledRadioCheckCard.defaultProps = defaultThemeProp;
|
|
187
|
-
const RadioCheck = forwardRef((props, ref)
|
|
197
|
+
const RadioCheck = forwardRef(function RadioCheck(props, ref) {
|
|
188
198
|
const uid = useUID();
|
|
189
199
|
const t = useI18n();
|
|
190
200
|
const { type, id = uid, label, required = false, disabled = false, indeterminate = false, readOnly = false, variant = 'simple', onClick, onKeyDown, status, info, additionalInfo, ...restProps } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FC,\n Ref,\n useEffect,\n MouseEvent,\n KeyboardEvent,\n PropsWithoutRef,\n MouseEventHandler,\n KeyboardEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, hideVisually, mix } from 'polished';\n\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface RadioCheckProps extends BaseProps, NoChildrenProp {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Sets the type of input. */\n type: 'radio' | 'checkbox';\n /** Sets checked prop via onChange when using as controlled component. */\n checked?: boolean;\n /** Initialize checked prop when using as uncontrolled component. */\n defaultChecked?: boolean;\n /**\n * Sets control to an an indeterminate state.\n * @default false\n */\n indeterminate?: boolean;\n /**\n * Controls the styling of the RadioCheck.\n * @default 'simple'\n */\n variant?: 'simple' | 'card';\n /** Callback function for onClick events. */\n onClick?: MouseEventHandler<HTMLInputElement>;\n /** Callback function for onKeyDown events. */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** info like error, success, warning messages */\n info?: FormControlProps['info'];\n /** Ref forwarded to the underlying input. */\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n props => {\n const {\n theme: {\n base: {\n spacing,\n palette: { 'primary-background': primaryBackground }\n },\n components: {\n 'form-field': formField,\n 'radio-check': {\n size,\n 'touch-size': touchSize,\n 'background-color': backgroundColor,\n 'border-color': borderColor,\n 'border-width': borderWidth\n }\n }\n },\n status\n } = props;\n\n const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n const useBackgroundColor =\n status && formField[status]\n ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n : backgroundColor;\n\n return css`\n display: flex;\n flex-shrink: 0;\n position: relative;\n width: ${size};\n height: ${size};\n margin-inline-end: ${spacing};\n border: ${borderWidth} solid ${useBorderColor};\n background-color: ${useBackgroundColor};\n\n @media (pointer: coarse) {\n width: ${touchSize};\n height: ${touchSize};\n }\n\n &::after {\n content: '';\n display: none;\n }\n `;\n }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n const {\n disabled,\n theme: {\n base: { 'border-radius': baseBorderRadius },\n components: {\n 'form-control': {\n ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n ':read-only': { 'background-color': readOnlyBackgroundColor }\n },\n 'radio-check': {\n ':checked': {\n 'background-color': checkedBackgroundColor,\n 'border-color': checkedBorderColor\n }\n },\n checkbox: { 'border-radius': checkRadius },\n 'radio-button': { 'border-radius': radioRadius }\n }\n }\n } = props;\n\n const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n const foreground = tryCatch(() => readableColor(backgroundColor));\n\n const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n const { ltr } = useDirection();\n\n return css`\n ${!disabled &&\n css`\n &:focus ${prcSelector} {\n box-shadow: ${shadow};\n border-color: ${focusBorderColor};\n }\n `}\n\n &:checked\n ${prcSelector},\n &:checked:disabled\n ${prcSelector},\n &[type='checkbox']:indeterminate\n ${prcSelector},\n &[type='checkbox']:indeterminate:disabled\n ${prcSelector} {\n border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n background-color: ${backgroundColor};\n\n &::after {\n display: block;\n }\n }\n\n &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n border-radius: ${radioRadius};\n }\n\n &[type='radio'] ${prcSelector}::after {\n margin: auto;\n width: 100%;\n height: 100%;\n background-color: ${foreground};\n transform: scale(0.4);\n }\n\n &[type='checkbox'] ${prcSelector} {\n border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n }\n\n &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n &::after {\n width: 40%;\n height: 75%;\n ${ltr\n ? css`\n transform: rotate(45deg) translate(50%, -30%);\n `\n : css`\n transform: rotate(45deg) translate(-50%, 30%);\n `}\n border-right: 0.15em solid ${foreground};\n border-bottom: 0.15em solid ${foreground};\n }\n }\n\n &[type='checkbox']:indeterminate ${prcSelector} {\n display: flex;\n &::after {\n width: 90%;\n height: 0.15em;\n margin: auto;\n background-color: ${foreground};\n }\n }\n\n ${hideVisually}\n `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n props => {\n const {\n disabled,\n readOnly,\n theme: {\n base,\n components: {\n 'radio-check': {\n label: { color: labelColor, 'font-weight': labelFontWeight }\n },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n } = props;\n\n const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n return css`\n > ${StyledLabel} {\n cursor: pointer;\n display: flex;\n align-items: center;\n font-weight: ${labelFontWeight};\n word-break: break-word;\n font-size: ${fontSize.s};\n color: ${labelColor};\n margin: 0;\n min-height: ${base['hit-area']['mouse-min']};\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n }\n\n ${!(disabled || readOnly) &&\n css`\n &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n `}\n `;\n }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n ({\n disabled,\n readOnly,\n status,\n theme: {\n base: { palette, shadow, spacing },\n components: {\n card,\n 'form-field': formField,\n 'radio-check': { label },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n }) => {\n const useBorderColor =\n status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n return css`\n min-width: min-content;\n align-items: start;\n cursor: pointer;\n background-color: ${card.background};\n border-radius: ${card['border-radius']};\n border: 0.0625rem solid ${useBorderColor};\n padding: ${spacing};\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n\n ${!(disabled || readOnly) &&\n css`\n :hover:not(:focus-within) {\n border-color: ${hoverBorderColor};\n ${StyledLabel} ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n }\n\n :focus-within {\n box-shadow: ${shadow.focus};\n border-color: transparent;\n }\n `}\n\n > ${StyledLabel} {\n display: grid;\n grid-template-columns: auto 1fr;\n color: ${label.color};\n font-weight: ${label['font-weight']};\n }\n `;\n }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck: FC<RadioCheckProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<RadioCheckProps>, ref: RadioCheckProps['ref']) => {\n const uid = useUID();\n const t = useI18n();\n\n const {\n type,\n id = uid,\n label,\n required = false,\n disabled = false,\n indeterminate = false,\n readOnly = false,\n variant = 'simple',\n onClick,\n onKeyDown,\n status,\n info,\n additionalInfo,\n ...restProps\n } = props;\n\n const isRadio = type === 'radio';\n const card = variant === 'card';\n const newRef = useConsolidatedRef(ref);\n\n useEffect(() => {\n if (!isRadio && newRef.current) {\n newRef.current.indeterminate = !!indeterminate;\n }\n }, [newRef, indeterminate, isRadio]);\n\n return (\n <FormField\n as={card ? StyledRadioCheckCard : StyledRadioCheck}\n label={\n <>\n <StyledPseudoRadioCheck\n status={status}\n isRadio={isRadio}\n as={StyledFormControl}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n />\n <>\n {label}\n {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n </>\n </>\n }\n labelAs={card ? 'div' : undefined}\n id={id}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n info={info}\n isRadioCheck\n inline\n labelAfter\n additionalInfo={additionalInfo}\n >\n <StyledRadioCheckInput\n {...restProps}\n id={id}\n type={type}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onClick={(e: MouseEvent<HTMLInputElement>) => {\n if (readOnly) e.preventDefault();\n\n onClick?.(e);\n }}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (type === 'checkbox' && readOnly && e.key === ' ') {\n e.preventDefault();\n }\n if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n e.preventDefault();\n }\n\n onKeyDown?.(e);\n }}\n ref={newRef}\n />\n </FormField>\n );\n }\n);\n\nexport default RadioCheck;\n"]}
|
|
1
|
+
{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FC,\n Ref,\n useEffect,\n MouseEvent,\n KeyboardEvent,\n PropsWithoutRef,\n MouseEventHandler,\n KeyboardEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, hideVisually, mix } from 'polished';\n\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface RadioCheckProps extends BaseProps, NoChildrenProp {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Sets the type of input. */\n type: 'radio' | 'checkbox';\n /** Sets checked prop via onChange when using as controlled component. */\n checked?: boolean;\n /** Initialize checked prop when using as uncontrolled component. */\n defaultChecked?: boolean;\n /**\n * Sets control to an an indeterminate state.\n * @default false\n */\n indeterminate?: boolean;\n /**\n * Controls the styling of the RadioCheck.\n * @default 'simple'\n */\n variant?: 'simple' | 'card';\n /** Callback function for onClick events. */\n onClick?: MouseEventHandler<HTMLInputElement>;\n /** Callback function for onKeyDown events. */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** info like error, success, warning messages */\n info?: FormControlProps['info'];\n /** Ref forwarded to the underlying input. */\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n props => {\n const {\n theme: {\n base: {\n spacing,\n palette: { 'primary-background': primaryBackground }\n },\n components: {\n 'form-field': formField,\n 'radio-check': {\n size,\n 'touch-size': touchSize,\n 'background-color': backgroundColor,\n 'border-color': borderColor,\n 'border-width': borderWidth\n }\n }\n },\n status\n } = props;\n\n const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n const useBackgroundColor =\n status && formField[status]\n ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n : backgroundColor;\n\n return css`\n display: flex;\n flex-shrink: 0;\n position: relative;\n width: ${size};\n height: ${size};\n margin-inline-end: ${spacing};\n border: ${borderWidth} solid ${useBorderColor};\n background-color: ${useBackgroundColor};\n\n @media (pointer: coarse) {\n width: ${touchSize};\n height: ${touchSize};\n }\n\n &::after {\n content: '';\n display: none;\n }\n `;\n }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n const {\n disabled,\n theme: {\n base: { 'border-radius': baseBorderRadius },\n components: {\n 'form-control': {\n ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n ':read-only': { 'background-color': readOnlyBackgroundColor }\n },\n 'radio-check': {\n ':checked': {\n 'background-color': checkedBackgroundColor,\n 'border-color': checkedBorderColor\n }\n },\n checkbox: { 'border-radius': checkRadius },\n 'radio-button': { 'border-radius': radioRadius }\n }\n }\n } = props;\n\n const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n const foreground = tryCatch(() => readableColor(backgroundColor));\n\n const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n const { ltr } = useDirection();\n\n return css`\n ${!disabled &&\n css`\n &:focus ${prcSelector} {\n box-shadow: ${shadow};\n border-color: ${focusBorderColor};\n }\n `}\n\n &:checked\n ${prcSelector},\n &:checked:disabled\n ${prcSelector},\n &[type='checkbox']:indeterminate\n ${prcSelector},\n &[type='checkbox']:indeterminate:disabled\n ${prcSelector} {\n border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n background-color: ${backgroundColor};\n\n &::after {\n display: block;\n }\n }\n\n &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n border-radius: ${radioRadius};\n }\n\n &[type='radio'] ${prcSelector}::after {\n margin: auto;\n width: 100%;\n height: 100%;\n background-color: ${foreground};\n transform: scale(0.4);\n }\n\n &[type='checkbox'] ${prcSelector} {\n border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n }\n\n &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n &::after {\n width: 40%;\n height: 75%;\n ${ltr\n ? css`\n transform: rotate(45deg) translate(50%, -30%);\n `\n : css`\n transform: rotate(45deg) translate(-50%, 30%);\n `}\n border-right: 0.15em solid ${foreground};\n border-bottom: 0.15em solid ${foreground};\n }\n }\n\n &[type='checkbox']:indeterminate ${prcSelector} {\n display: flex;\n &::after {\n width: 90%;\n height: 0.15em;\n margin: auto;\n background-color: ${foreground};\n }\n }\n\n ${hideVisually}\n `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n props => {\n const {\n disabled,\n readOnly,\n theme: {\n base,\n components: {\n 'radio-check': {\n label: { color: labelColor, 'font-weight': labelFontWeight }\n },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n } = props;\n\n const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n return css`\n > ${StyledLabel} {\n cursor: pointer;\n display: flex;\n align-items: center;\n font-weight: ${labelFontWeight};\n word-break: break-word;\n font-size: ${fontSize.s};\n color: ${labelColor};\n margin: 0;\n min-height: ${base['hit-area']['mouse-min']};\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${base.spacing} / 4);\n }\n\n ${!(disabled || readOnly) &&\n css`\n &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n `}\n `;\n }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n ({\n disabled,\n readOnly,\n status,\n theme: {\n base: { palette, shadow, spacing },\n components: {\n card,\n 'form-field': formField,\n 'radio-check': { label },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n }) => {\n const useBorderColor =\n status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n return css`\n min-width: min-content;\n cursor: pointer;\n background-color: ${card.background};\n border-radius: ${card['border-radius']};\n border: 0.0625rem solid ${useBorderColor};\n padding: ${spacing};\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n\n ${!(disabled || readOnly) &&\n css`\n :hover:not(:focus-within) {\n border-color: ${hoverBorderColor};\n ${StyledLabel} ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n }\n\n :focus-within {\n box-shadow: ${shadow.focus};\n border-color: transparent;\n }\n `}\n\n > ${StyledLabel} {\n display: flex;\n align-items: center;\n color: ${label.color};\n font-weight: ${label['font-weight']};\n margin: 0;\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${spacing} / 4);\n }\n `;\n }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck: FC<RadioCheckProps & ForwardProps> = forwardRef(function RadioCheck(\n props: PropsWithoutRef<RadioCheckProps>,\n ref: RadioCheckProps['ref']\n) {\n const uid = useUID();\n const t = useI18n();\n\n const {\n type,\n id = uid,\n label,\n required = false,\n disabled = false,\n indeterminate = false,\n readOnly = false,\n variant = 'simple',\n onClick,\n onKeyDown,\n status,\n info,\n additionalInfo,\n ...restProps\n } = props;\n\n const isRadio = type === 'radio';\n const card = variant === 'card';\n const newRef = useConsolidatedRef(ref);\n\n useEffect(() => {\n if (!isRadio && newRef.current) {\n newRef.current.indeterminate = !!indeterminate;\n }\n }, [newRef, indeterminate, isRadio]);\n\n return (\n <FormField\n as={card ? StyledRadioCheckCard : StyledRadioCheck}\n label={\n <>\n <StyledPseudoRadioCheck\n status={status}\n isRadio={isRadio}\n as={StyledFormControl}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n />\n <>\n {label}\n {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n </>\n </>\n }\n labelAs={card ? 'div' : undefined}\n id={id}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n info={info}\n isRadioCheck\n inline\n labelAfter\n additionalInfo={additionalInfo}\n >\n <StyledRadioCheckInput\n {...restProps}\n id={id}\n type={type}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onClick={(e: MouseEvent<HTMLInputElement>) => {\n if (readOnly) e.preventDefault();\n\n onClick?.(e);\n }}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (type === 'checkbox' && readOnly && e.key === ' ') {\n e.preventDefault();\n }\n if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n e.preventDefault();\n }\n\n onKeyDown?.(e);\n }}\n ref={newRef}\n />\n </FormField>\n );\n});\n\nexport default RadioCheck;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,GAAG,EAKH,YAAY,EACZ,WAAW,EAIZ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAkB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIhD,MAAM,WAAW,oBAAoB;IACnC,sDAAsD;IACtD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAOD,eAAO,MAAM,qBAAqB,8GAMjC,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,GAAG,EAKH,YAAY,EACZ,WAAW,EAIZ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAkB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIhD,MAAM,WAAW,oBAAoB;IACnC,sDAAsD;IACtD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAOD,eAAO,MAAM,qBAAqB,8GAMjC,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,GAAG,YAAY,CA6F5D,CAAC;AAIF,eAAe,eAAe,CAAC"}
|
|
@@ -16,7 +16,7 @@ export const StyledRadioCheckGroup = styled.fieldset `
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
`;
|
|
19
|
-
const RadioCheckGroup = forwardRef((props, ref)
|
|
19
|
+
const RadioCheckGroup = forwardRef(function RadioCheckGroup(props, ref) {
|
|
20
20
|
const uid = useUID();
|
|
21
21
|
const { children, name = uid, disabled, onChange, readOnly, inline = false, autoStack = true, variant = 'simple', ...restProps } = props;
|
|
22
22
|
const [optionsEl, setOptionsEl] = useElement();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,UAAU,EAEV,QAAQ,EACR,YAAY,EAGZ,QAAQ,EACR,SAAS,EACT,MAAM,EACP,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,SAA6B,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AA+CjD,MAAM,YAAY,GAAG;IACnB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,QAAQ,CAAA;;QAE5C,eAAe;;;;CAItB,CAAC;AAEF,MAAM,eAAe,GAA4C,UAAU,CACzE,
|
|
1
|
+
{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n Ref,\n forwardRef,\n PropsWithoutRef,\n Children,\n cloneElement,\n ReactElement,\n ChangeEvent,\n useState,\n useEffect,\n useRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport FormField, { FormFieldProps } from '../FormField';\nimport { StyledFormField } from '../FormField/FormField';\nimport { FormControlProps } from '../FormControl';\nimport { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport { useElement, useUID } from '../../hooks';\n\nexport interface RadioCheckGroupProps {\n /** Accepts Checkboxes or RadioButtons as children. */\n children: ReactElement | ReactElement[];\n /**\n * Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n * Additionally, onChange can be passed to individual children.\n * Both handlers will be called, child followed by group.\n */\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /**\n * Layout field elements inline in a row.\n * @default false\n */\n inline?: FormFieldProps['inline'];\n /** Used to toggle the auto stacking feature of an inlined group.\n * @default true\n */\n autoStack?: boolean;\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /**\n * Controls the styling of the child RadioChecks.\n * @default 'simple'\n */\n variant?: RadioCheckProps['variant'];\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** Ref forwarded to the wrapping element. */\n ref?: Ref<HTMLElement>;\n}\n\nconst defaultProps = {\n required: false,\n disabled: false\n};\n\nexport const StyledRadioCheckGroup = styled.fieldset`\n &[disabled] {\n > ${StyledFormField} {\n opacity: unset;\n }\n }\n`;\n\nconst RadioCheckGroup: FC<RadioCheckGroupProps & ForwardProps> = forwardRef(\n function RadioCheckGroup(\n props: PropsWithoutRef<RadioCheckGroupProps>,\n ref: RadioCheckGroupProps['ref']\n ) {\n const uid = useUID();\n const {\n children,\n name = uid,\n disabled,\n onChange,\n readOnly,\n inline = false,\n autoStack = true,\n variant = 'simple',\n ...restProps\n } = props;\n\n const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n const [renderInline, setRenderInline] = useState(inline);\n const renderInlineRef = useRef(inline);\n const minInlineWidth = useRef(0);\n\n useEffect(() => {\n if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1) {\n if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n renderInlineRef.current = false;\n setRenderInline(false);\n }\n },\n { root: optionsEl, threshold: 1 }\n );\n\n const resizeObserver = new ResizeObserver(entries => {\n if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n renderInlineRef.current = true;\n setRenderInline(true);\n }\n });\n\n intersectionObserver.observe(optionsEl.lastChild as Element);\n resizeObserver.observe(optionsEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [optionsEl, inline, autoStack]);\n\n return (\n <FormField\n {...{\n as: StyledRadioCheckGroup,\n labelAs: 'legend',\n ref,\n name,\n disabled,\n ...restProps\n }}\n >\n <Flex\n ref={setOptionsEl}\n container={{\n direction: renderInline ? 'row' : 'column',\n colGap: 2,\n rowGap: variant === 'card' ? 1 : 0,\n wrap: 'wrap'\n }}\n >\n {Children.map(children, child =>\n cloneElement(child, {\n name,\n disabled: disabled || child.props.disabled,\n readOnly: readOnly || child.props.readOnly,\n variant,\n onChange: onChange\n ? (e: ChangeEvent<HTMLInputElement>) => {\n if (!(readOnly || child.props.readOnly)) {\n child.props.onChange?.(e);\n onChange(e);\n }\n }\n : child.props.onChange\n })\n )}\n </Flex>\n </FormField>\n );\n }\n);\n\nRadioCheckGroup.defaultProps = defaultProps;\n\nexport default RadioCheckGroup;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAS3E,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA2BD,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,mBAAmB,+HAU9B,CAAC;AAkCH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA6BzD,CAAC;AAIF,eAAe,MAAM,CAAC"}
|
|
@@ -4,6 +4,7 @@ import { defaultThemeProp } from '../../theme';
|
|
|
4
4
|
import Icon, { registerIcon } from '../Icon';
|
|
5
5
|
import * as starIcon from '../Icon/icons/star.icon';
|
|
6
6
|
import * as starSolidIcon from '../Icon/icons/star-solid.icon';
|
|
7
|
+
import Flex from '../Flex';
|
|
7
8
|
registerIcon(starIcon, starSolidIcon);
|
|
8
9
|
const DEFAULT_MAX_RATING = 5;
|
|
9
10
|
const defaultProps = {
|
|
@@ -11,10 +12,6 @@ const defaultProps = {
|
|
|
11
12
|
maxRating: DEFAULT_MAX_RATING,
|
|
12
13
|
tabIndex: 0
|
|
13
14
|
};
|
|
14
|
-
const StyledRating = styled.div `
|
|
15
|
-
display: inline-block;
|
|
16
|
-
vertical-align: middle;
|
|
17
|
-
`;
|
|
18
15
|
const StyledRatingItemsContainer = styled.div(props => {
|
|
19
16
|
const { theme } = props;
|
|
20
17
|
return css `
|
|
@@ -40,7 +37,7 @@ export const StyledPartialRating = styled.div(props => {
|
|
|
40
37
|
white-space: nowrap;
|
|
41
38
|
`;
|
|
42
39
|
});
|
|
43
|
-
const StyledRatingMetaInfo = styled.
|
|
40
|
+
const StyledRatingMetaInfo = styled.div(props => {
|
|
44
41
|
const { theme } = props;
|
|
45
42
|
return css `
|
|
46
43
|
margin-inline-start: ${theme.base.spacing};
|
|
@@ -67,7 +64,7 @@ const Rating = (props) => {
|
|
|
67
64
|
}
|
|
68
65
|
starsOutline.push(_jsx(RatingItem, { fill: fillValue }, `star-${i}`));
|
|
69
66
|
}
|
|
70
|
-
return (_jsxs(
|
|
67
|
+
return (_jsxs(Flex, { container: { alignItems: 'center' }, "aria-label": ariaLabel, tabIndex: tabIndex, ...restProps, children: [_jsx(StyledRatingItemsContainer, { children: starsOutline }), metaInfo && _jsxs(StyledRatingMetaInfo, { children: ["(", metaInfo, ")"] }), ' '] }));
|
|
71
68
|
};
|
|
72
69
|
Rating.defaultProps = defaultProps;
|
|
73
70
|
export default Rating;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { registerIcon } from '../Icon';\nimport * as starIcon from '../Icon/icons/star.icon';\nimport * as starSolidIcon from '../Icon/icons/star-solid.icon';\nimport Flex from '../Flex';\n\nregisterIcon(starIcon, starSolidIcon);\n\nexport interface RatingProps extends BaseProps, NoChildrenProp {\n /**\n * Sets the rating to read only.\n * @default false\n */\n readOnly?: boolean;\n /**\n * The maximum rating allowed. Must be an integer greater than 1.\n * @default 5\n */\n maxRating?: number;\n /** The value of the Rating. Could be a decimal or integer. */\n value: number;\n /** Text that is displayed in parentheses inline with the Rating stars. */\n metaInfo?: string;\n /** Aria label for screen readers. */\n 'aria-label'?: string;\n /**\n * The tabIndex to control focus.\n * @default 0\n */\n tabIndex?: number;\n}\n\nconst DEFAULT_MAX_RATING = 5;\n\nconst defaultProps: Partial<RatingProps> = {\n readOnly: false,\n maxRating: DEFAULT_MAX_RATING,\n tabIndex: 0\n};\n\nconst StyledRatingItemsContainer = styled.div(props => {\n const { theme } = props;\n return css`\n color: ${theme.components.rating.color};\n line-height: 1;\n vertical-align: middle;\n display: inline-block;\n `;\n});\n\nStyledRatingItemsContainer.defaultProps = defaultThemeProp;\n\nconst StyledPartialRatingContainer = styled.div`\n position: relative;\n display: inline-block;\n`;\n\ninterface StyledPartialRatingProps {\n ratingPercentage: number;\n}\n\nexport const StyledPartialRating = styled.div<StyledPartialRatingProps>(props => {\n const { ratingPercentage } = props;\n return css`\n display: inline-block;\n position: absolute;\n inset-inline-start: 0;\n width: ${ratingPercentage}%;\n overflow: hidden;\n white-space: nowrap;\n `;\n});\n\nconst StyledRatingMetaInfo = styled.div(props => {\n const { theme } = props;\n return css`\n margin-inline-start: ${theme.base.spacing};\n `;\n});\n\nStyledRatingMetaInfo.defaultProps = defaultThemeProp;\n\ninterface RatingItemProps {\n fill: number;\n}\n\nconst RatingItem: FunctionComponent<RatingItemProps> = (props: RatingItemProps) => {\n const { fill, ...restProps } = props;\n const fillPercentage = Math.round((100 / 1) * fill);\n return (\n <>\n {fillPercentage === 0 && <Icon {...restProps} name='star' />}\n {fillPercentage === 100 && <Icon {...restProps} name='star-solid' />}\n {fillPercentage > 0 && fillPercentage < 100 && (\n <StyledPartialRatingContainer>\n <Icon {...restProps} name='star' />\n <StyledPartialRating ratingPercentage={fillPercentage}>\n <Icon {...restProps} name='star-solid' />\n </StyledPartialRating>\n </StyledPartialRatingContainer>\n )}\n </>\n );\n};\n\nconst Rating: FunctionComponent<RatingProps & ForwardProps> = (props: RatingProps) => {\n const starsOutline = [];\n const { 'aria-label': ariaLabel, metaInfo, tabIndex, readOnly, ...restProps } = props;\n\n let { maxRating, value } = props;\n maxRating = typeof maxRating !== 'number' ? DEFAULT_MAX_RATING : maxRating;\n maxRating = Math.max(1, maxRating);\n value = Math.min(maxRating, value);\n\n const isDecimalValue = Math.round(value) !== value;\n for (let i = 1; i <= maxRating; i += 1) {\n let fillValue = i <= value ? 1 : 0;\n if (isDecimalValue && Math.ceil(value) === i) {\n fillValue = value - Math.floor(value);\n }\n starsOutline.push(<RatingItem key={`star-${i}`} fill={fillValue} />);\n }\n\n return (\n <Flex\n container={{ alignItems: 'center' }}\n aria-label={ariaLabel}\n tabIndex={tabIndex}\n {...restProps}\n >\n <StyledRatingItemsContainer>{starsOutline}</StyledRatingItemsContainer>\n {metaInfo && <StyledRatingMetaInfo>({metaInfo})</StyledRatingMetaInfo>}{' '}\n </Flex>\n );\n};\n\nRating.defaultProps = defaultProps;\n\nexport default Rating;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAYlD,OAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAmB1C,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpG,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEtF,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,yEAAyE;IACzE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,wEAAwE;IACxE,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IACvD,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAYlD,OAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAmB1C,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpG,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEtF,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,yEAAyE;IACzE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,wEAAwE;IACxE,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IACvD,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA8OnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -13,7 +13,7 @@ import { createStringMatcher } from '../../utils';
|
|
|
13
13
|
import VisuallyHiddenText from '../VisuallyHiddenText';
|
|
14
14
|
import { StyledCancelButton, StyledResultsPopover, StyledSearchButton, StyledSearchFilterText, StyledSearchInput, StyledSearchMenu, StyledSearchResultsContainer, StyledSearchTextInput, StyledMenuButton } from './SearchInput.styles';
|
|
15
15
|
registerIcon(searchIcon);
|
|
16
|
-
const SearchInput = forwardRef((props, ref)
|
|
16
|
+
const SearchInput = forwardRef(function SearchInput(props, ref) {
|
|
17
17
|
const t = useI18n();
|
|
18
18
|
const { value = '', defaultFilter, filters, onFilterChange, searchResults, recentSearches, loading: loadingProp, advancedSearchLink, placeholder = t('search_placeholder_default'), onSearchChange, onSearchSubmit, searchInputAriaLabel, resultsPopover = true, ...restProps } = props;
|
|
19
19
|
const instructionTextId = useUID();
|
|
@@ -23,7 +23,6 @@ const SearchInput = forwardRef((props, ref) => {
|
|
|
23
23
|
const filtersRef = useRef(null);
|
|
24
24
|
const searchResultsRef = useRef(null);
|
|
25
25
|
const [searchMenuOpen, setSearchMenuOpen] = useState(false);
|
|
26
|
-
const [filterMenuOpen, setFilterMenuOpen] = useState(false);
|
|
27
26
|
const [searchResultItems, setSearchResultItems] = useState(undefined);
|
|
28
27
|
const [selectedFilter, setSelectedFilter] = useState(defaultFilter ?? '');
|
|
29
28
|
const [downPressed, setDownPressed] = useState(false);
|
|
@@ -37,13 +36,11 @@ const SearchInput = forwardRef((props, ref) => {
|
|
|
37
36
|
const [selectedFilterValue, setSelectedFilterValue] = useState('All');
|
|
38
37
|
const searchMenuVisible = (resultsPopover && showSearchMenu && searchMenuOpen) || (!resultsPopover && showSearchMenu);
|
|
39
38
|
useEscape(e => {
|
|
40
|
-
e.preventDefault();
|
|
41
39
|
if (searchMenuOpen) {
|
|
40
|
+
e.preventDefault();
|
|
41
|
+
e.stopPropagation();
|
|
42
42
|
setSearchMenuOpen(false);
|
|
43
43
|
}
|
|
44
|
-
if (filterMenuOpen) {
|
|
45
|
-
setFilterMenuOpen(false);
|
|
46
|
-
}
|
|
47
44
|
});
|
|
48
45
|
const onKeyDown = useCallback((e) => {
|
|
49
46
|
if (e.key === 'Enter' && !downPressed) {
|
|
@@ -53,9 +50,6 @@ const SearchInput = forwardRef((props, ref) => {
|
|
|
53
50
|
setDownPressed(true);
|
|
54
51
|
}
|
|
55
52
|
}, [onSearchSubmit, downPressed, value]);
|
|
56
|
-
useOuterEvent('click', [filterButtonRef], () => {
|
|
57
|
-
setFilterMenuOpen(false);
|
|
58
|
-
});
|
|
59
53
|
useOuterEvent('click', [searchResultsRef, inputRef, filtersRef], () => {
|
|
60
54
|
setSearchMenuOpen(false);
|
|
61
55
|
});
|
|
@@ -125,9 +119,7 @@ const SearchInput = forwardRef((props, ref) => {
|
|
|
125
119
|
}, autoComplete: 'off' }), value && (_jsx(StyledCancelButton, { icon: true, onClick: () => {
|
|
126
120
|
onSearchChange?.('');
|
|
127
121
|
inputRef.current?.focus();
|
|
128
|
-
}, variant: 'simple', compact: true, label: t('clear'), children: _jsx(Icon, { name: 'times' }) }))] }), showSearchMenu && resultsPopover && (_jsx(Popover, { as: StyledResultsPopover, target: inputRef.current, show: searchMenuOpen, placement: 'bottom-start', modifiers: [sameWidth],
|
|
129
|
-
setSearchMenuOpen(false);
|
|
130
|
-
}, ref: searchResultsRef, children: searchMenu })), !resultsPopover && showSearchMenu && (_jsx(StyledSearchResultsContainer, { children: searchMenu })), searchMenuVisible && (_jsx(VisuallyHiddenText, { id: instructionTextId, children: `${t('search_instructions')} ` }))] }));
|
|
122
|
+
}, variant: 'simple', compact: true, label: t('clear'), children: _jsx(Icon, { name: 'times' }) }))] }), showSearchMenu && resultsPopover && (_jsx(Popover, { as: StyledResultsPopover, target: inputRef.current, show: searchMenuOpen, placement: 'bottom-start', modifiers: [sameWidth], ref: searchResultsRef, children: searchMenu })), !resultsPopover && showSearchMenu && (_jsx(StyledSearchResultsContainer, { children: searchMenu })), searchMenuVisible && (_jsx(VisuallyHiddenText, { id: instructionTextId, children: `${t('search_instructions')} ` }))] }));
|
|
131
123
|
});
|
|
132
124
|
export default SearchInput;
|
|
133
125
|
//# sourceMappingURL=SearchInput.js.map
|