@transferwise/components 46.94.2 → 46.95.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/build/accordion/Accordion.js +4 -2
- package/build/accordion/Accordion.js.map +1 -1
- package/build/accordion/AccordionItem/AccordionItem.js +6 -4
- package/build/accordion/AccordionItem/AccordionItem.js.map +1 -1
- package/build/actionButton/ActionButton.js +3 -1
- package/build/actionButton/ActionButton.js.map +1 -1
- package/build/actionOption/ActionOption.js +5 -3
- package/build/actionOption/ActionOption.js.map +1 -1
- package/build/alert/Alert.js +4 -4
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.js +4 -2
- package/build/alert/inlineMarkdown/InlineMarkdown.js.map +1 -1
- package/build/avatar/Avatar.js +3 -1
- package/build/avatar/Avatar.js.map +1 -1
- package/build/avatarLayout/AvatarLayout.js +5 -3
- package/build/avatarLayout/AvatarLayout.js.map +1 -1
- package/build/avatarView/AvatarView.js +9 -7
- package/build/avatarView/AvatarView.js.map +1 -1
- package/build/avatarView/NotificationDot.js +3 -1
- package/build/avatarView/NotificationDot.js.map +1 -1
- package/build/avatarWrapper/AvatarWrapper.js +8 -6
- package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
- package/build/avatarWrapper/AvatarWrapper.mjs +1 -1
- package/build/avatarWrapper/index.js +3 -1
- package/build/avatarWrapper/index.js.map +1 -1
- package/build/badge/Badge.js +3 -1
- package/build/badge/Badge.js.map +1 -1
- package/build/badge/Badge.mjs.map +1 -1
- package/build/badge/BadgeAssets.js +9 -7
- package/build/badge/BadgeAssets.js.map +1 -1
- package/build/badge/BadgeAssets.mjs +2 -2
- package/build/badge/BadgeAssets.mjs.map +1 -1
- package/build/body/Body.js +3 -1
- package/build/body/Body.js.map +1 -1
- package/build/button/Button.js +8 -6
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.resolver.js +5 -3
- package/build/button/Button.resolver.js.map +1 -1
- package/build/button/LegacyButton.js +5 -3
- package/build/button/LegacyButton.js.map +1 -1
- package/build/card/Card.js +6 -4
- package/build/card/Card.js.map +1 -1
- package/build/carousel/Carousel.js +7 -5
- package/build/carousel/Carousel.js.map +1 -1
- package/build/checkbox/Checkbox.js +6 -4
- package/build/checkbox/Checkbox.js.map +1 -1
- package/build/checkboxButton/CheckboxButton.js +3 -1
- package/build/checkboxButton/CheckboxButton.js.map +1 -1
- package/build/checkboxOption/CheckboxOption.js +5 -3
- package/build/checkboxOption/CheckboxOption.js.map +1 -1
- package/build/chevron/Chevron.js +3 -1
- package/build/chevron/Chevron.js.map +1 -1
- package/build/chips/Chip.js +4 -2
- package/build/chips/Chip.js.map +1 -1
- package/build/chips/Chips.js +5 -3
- package/build/chips/Chips.js.map +1 -1
- package/build/chips/Chips.messages.js +3 -1
- package/build/chips/Chips.messages.js.map +1 -1
- package/build/circularButton/CircularButton.js +5 -3
- package/build/circularButton/CircularButton.js.map +1 -1
- package/build/common/Option/Option.js +7 -5
- package/build/common/Option/Option.js.map +1 -1
- package/build/common/Option/Option.mjs +2 -2
- package/build/common/Option/Option.mjs.map +1 -1
- package/build/common/RadioButton/RadioButton.js +3 -1
- package/build/common/RadioButton/RadioButton.js.map +1 -1
- package/build/common/action/Action.js +2 -2
- package/build/common/action/Action.js.map +1 -1
- package/build/common/bottomSheet/BottomSheet.js +4 -2
- package/build/common/bottomSheet/BottomSheet.js.map +1 -1
- package/build/common/card/Card.js +3 -1
- package/build/common/card/Card.js.map +1 -1
- package/build/common/circle/Circle.js +3 -1
- package/build/common/circle/Circle.js.map +1 -1
- package/build/common/closeButton/CloseButton.js +1 -1
- package/build/common/closeButton/CloseButton.js.map +1 -1
- package/build/common/closeButton/CloseButton.messages.js +3 -1
- package/build/common/closeButton/CloseButton.messages.js.map +1 -1
- package/build/common/flowHeader/FlowHeader.js +3 -1
- package/build/common/flowHeader/FlowHeader.js.map +1 -1
- package/build/common/focusBoundary/FocusBoundary.js +3 -1
- package/build/common/focusBoundary/FocusBoundary.js.map +1 -1
- package/build/common/historyNavigator/historyNavigator.js +3 -1
- package/build/common/historyNavigator/historyNavigator.js.map +1 -1
- package/build/common/locale/index.js +0 -24
- package/build/common/locale/index.js.map +1 -1
- package/build/common/locale/index.mjs +0 -24
- package/build/common/locale/index.mjs.map +1 -1
- package/build/common/panel/Panel.js +3 -1
- package/build/common/panel/Panel.js.map +1 -1
- package/build/common/responsivePanel/ResponsivePanel.js +5 -3
- package/build/common/responsivePanel/ResponsivePanel.js.map +1 -1
- package/build/common/textFormat/formatWithPattern/formatWithPattern.js +4 -2
- package/build/common/textFormat/formatWithPattern/formatWithPattern.js.map +1 -1
- package/build/common/textFormat/getCountOfSymbolsInSelection/getCountOfSymbolsInSelection.js +4 -2
- package/build/common/textFormat/getCountOfSymbolsInSelection/getCountOfSymbolsInSelection.js.map +1 -1
- package/build/common/textFormat/getCursorPositionAfterKeystroke/getCursorPositionAfterKeystroke.js +4 -2
- package/build/common/textFormat/getCursorPositionAfterKeystroke/getCursorPositionAfterKeystroke.js.map +1 -1
- package/build/common/textFormat/getDistanceToSymbol/getDistanceToSymbol.js +2 -2
- package/build/common/textFormat/getDistanceToSymbol/getDistanceToSymbol.js.map +1 -1
- package/build/common/textFormat/getSymbolsInPatternWithPosition/getSymbolsInPatternWithPosition.js +3 -1
- package/build/common/textFormat/getSymbolsInPatternWithPosition/getSymbolsInPatternWithPosition.js.map +1 -1
- package/build/common/textFormat/unformatWithPattern/unformatWithPattern.js +3 -1
- package/build/common/textFormat/unformatWithPattern/unformatWithPattern.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.js +3 -1
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/dateInput/DateInput.js +15 -13
- package/build/dateInput/DateInput.js.map +1 -1
- package/build/dateInput/DateInput.messages.js +3 -1
- package/build/dateInput/DateInput.messages.js.map +1 -1
- package/build/dateInput/DateInput.mjs +3 -3
- package/build/dateInput/DateInput.mjs.map +1 -1
- package/build/dateLookup/DateLookup.js +8 -6
- package/build/dateLookup/DateLookup.js.map +1 -1
- package/build/dateLookup/DateLookup.messages.js +3 -1
- package/build/dateLookup/DateLookup.messages.js.map +1 -1
- package/build/dateLookup/dateHeader/DateHeader.js +10 -8
- package/build/dateLookup/dateHeader/DateHeader.js.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.js +8 -6
- package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.messages.js +4 -2
- package/build/dateLookup/dateTrigger/DateTrigger.messages.js.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.messages.mjs +2 -2
- package/build/dateLookup/dateTrigger/DateTrigger.messages.mjs.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.mjs +2 -2
- package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
- package/build/dateLookup/dayCalendar/DayCalendar.js +6 -4
- package/build/dateLookup/dayCalendar/DayCalendar.js.map +1 -1
- package/build/dateLookup/dayCalendar/table/DayCalendarTable.js +4 -2
- package/build/dateLookup/dayCalendar/table/DayCalendarTable.js.map +1 -1
- package/build/dateLookup/monthCalendar/MonthCalendar.js +6 -4
- package/build/dateLookup/monthCalendar/MonthCalendar.js.map +1 -1
- package/build/dateLookup/monthCalendar/table/MonthCalendarTable.js +4 -2
- package/build/dateLookup/monthCalendar/table/MonthCalendarTable.js.map +1 -1
- package/build/dateLookup/tableLink/TableLink.js +4 -2
- package/build/dateLookup/tableLink/TableLink.js.map +1 -1
- package/build/dateLookup/yearCalendar/YearCalendar.js +6 -4
- package/build/dateLookup/yearCalendar/YearCalendar.js.map +1 -1
- package/build/dateLookup/yearCalendar/table/YearCalendarTable.js +4 -2
- package/build/dateLookup/yearCalendar/table/YearCalendarTable.js.map +1 -1
- package/build/decision/Decision.js +2 -2
- package/build/decision/Decision.js.map +1 -1
- package/build/definitionList/DefinitionList.js +4 -2
- package/build/definitionList/DefinitionList.js.map +1 -1
- package/build/dimmer/Dimmer.js +3 -3
- package/build/dimmer/Dimmer.js.map +1 -1
- package/build/dimmer/dimmerManager/DimmerManager.js +3 -1
- package/build/dimmer/dimmerManager/DimmerManager.js.map +1 -1
- package/build/display/Display.js +3 -1
- package/build/display/Display.js.map +1 -1
- package/build/divider/Divider.js +35 -0
- package/build/divider/Divider.js.map +1 -0
- package/build/divider/Divider.mjs +31 -0
- package/build/divider/Divider.mjs.map +1 -0
- package/build/drawer/Drawer.js +4 -2
- package/build/drawer/Drawer.js.map +1 -1
- package/build/dropFade/DropFade.js +3 -1
- package/build/dropFade/DropFade.js.map +1 -1
- package/build/emphasis/Emphasis.js +4 -2
- package/build/emphasis/Emphasis.js.map +1 -1
- package/build/emphasis/EmphasisHtmlTransformer.js +3 -1
- package/build/emphasis/EmphasisHtmlTransformer.js.map +1 -1
- package/build/field/Field.js +1 -1
- package/build/field/Field.js.map +1 -1
- package/build/flowNavigation/FlowNavigation.js +8 -6
- package/build/flowNavigation/FlowNavigation.js.map +1 -1
- package/build/flowNavigation/FlowNavigation.messages.js +3 -1
- package/build/flowNavigation/FlowNavigation.messages.js.map +1 -1
- package/build/flowNavigation/animatedLabel/AnimatedLabel.js +5 -3
- package/build/flowNavigation/animatedLabel/AnimatedLabel.js.map +1 -1
- package/build/header/Header.js +4 -4
- package/build/header/Header.js.map +1 -1
- package/build/i18n/commonMessages/Button.messages.js +3 -1
- package/build/i18n/commonMessages/Button.messages.js.map +1 -1
- package/build/i18n/cs.json +22 -5
- package/build/i18n/cs.json.js +25 -6
- package/build/i18n/cs.json.js.map +1 -1
- package/build/i18n/cs.json.mjs +22 -5
- package/build/i18n/cs.json.mjs.map +1 -1
- package/build/i18n/de.json.js +3 -1
- package/build/i18n/de.json.js.map +1 -1
- package/build/i18n/en.json.js +3 -1
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/es.json.js +3 -1
- package/build/i18n/es.json.js.map +1 -1
- package/build/i18n/fr.json.js +3 -1
- package/build/i18n/fr.json.js.map +1 -1
- package/build/i18n/hu.json.js +3 -1
- package/build/i18n/hu.json.js.map +1 -1
- package/build/i18n/id.json.js +3 -1
- package/build/i18n/id.json.js.map +1 -1
- package/build/i18n/index.js +22 -20
- package/build/i18n/index.js.map +1 -1
- package/build/i18n/it.json.js +3 -1
- package/build/i18n/it.json.js.map +1 -1
- package/build/i18n/ja.json.js +3 -1
- package/build/i18n/ja.json.js.map +1 -1
- package/build/i18n/pl.json.js +3 -1
- package/build/i18n/pl.json.js.map +1 -1
- package/build/i18n/pt.json.js +3 -1
- package/build/i18n/pt.json.js.map +1 -1
- package/build/i18n/ro.json.js +3 -1
- package/build/i18n/ro.json.js.map +1 -1
- package/build/i18n/ru.json.js +3 -1
- package/build/i18n/ru.json.js.map +1 -1
- package/build/i18n/th.json.js +3 -1
- package/build/i18n/th.json.js.map +1 -1
- package/build/i18n/tr.json.js +3 -1
- package/build/i18n/tr.json.js.map +1 -1
- package/build/i18n/uk.json.js +3 -1
- package/build/i18n/uk.json.js.map +1 -1
- package/build/i18n/zh-CN.json.js +3 -1
- package/build/i18n/zh-CN.json.js.map +1 -1
- package/build/i18n/zh-HK.json.js +3 -1
- package/build/i18n/zh-HK.json.js.map +1 -1
- package/build/iconButton/IconButton.js +5 -3
- package/build/iconButton/IconButton.js.map +1 -1
- package/build/index.js +84 -82
- package/build/index.js.map +1 -1
- package/build/index.mjs +3 -2
- package/build/index.mjs.map +1 -1
- package/build/info/Info.js +8 -6
- package/build/info/Info.js.map +1 -1
- package/build/info/Info.messages.js +3 -1
- package/build/info/Info.messages.js.map +1 -1
- package/build/inlineAlert/InlineAlert.js +5 -3
- package/build/inlineAlert/InlineAlert.js.map +1 -1
- package/build/inputWithDisplayFormat/InputWithDisplayFormat.js +4 -2
- package/build/inputWithDisplayFormat/InputWithDisplayFormat.js.map +1 -1
- package/build/inputs/SelectInput.js +3 -3
- package/build/inputs/SelectInput.js.map +1 -1
- package/build/inputs/SelectInput.messages.js +3 -1
- package/build/inputs/SelectInput.messages.js.map +1 -1
- package/build/inputs/SelectInput.mjs +2 -2
- package/build/inputs/SelectInput.mjs.map +1 -1
- package/build/instructionsList/InstructionsList.js +4 -2
- package/build/instructionsList/InstructionsList.js.map +1 -1
- package/build/label/Label.js +3 -3
- package/build/label/Label.js.map +1 -1
- package/build/label/Label.messages.js +3 -1
- package/build/label/Label.messages.js.map +1 -1
- package/build/link/Link.js +5 -3
- package/build/link/Link.js.map +1 -1
- package/build/link/Link.messages.js +3 -1
- package/build/link/Link.messages.js.map +1 -1
- package/build/listItem/ListItem.js +5 -3
- package/build/listItem/ListItem.js.map +1 -1
- package/build/loader/Loader.js +3 -1
- package/build/loader/Loader.js.map +1 -1
- package/build/main.css +25 -1
- package/build/markdown/Markdown.js +3 -1
- package/build/markdown/Markdown.js.map +1 -1
- package/build/modal/Modal.js +5 -3
- package/build/modal/Modal.js.map +1 -1
- package/build/money/Money.js +3 -1
- package/build/money/Money.js.map +1 -1
- package/build/moneyInput/MoneyInput.js +7 -5
- package/build/moneyInput/MoneyInput.js.map +1 -1
- package/build/moneyInput/MoneyInput.messages.js +3 -1
- package/build/moneyInput/MoneyInput.messages.js.map +1 -1
- package/build/navigationOption/NavigationOption.js +5 -3
- package/build/navigationOption/NavigationOption.js.map +1 -1
- package/build/navigationOptionsList/NavigationOptionsList.js +3 -1
- package/build/navigationOptionsList/NavigationOptionsList.js.map +1 -1
- package/build/nudge/Nudge.js +2 -2
- package/build/nudge/Nudge.js.map +1 -1
- package/build/overlayHeader/OverlayHeader.js +4 -2
- package/build/overlayHeader/OverlayHeader.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.js +5 -3
- package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.messages.js +3 -1
- package/build/phoneNumberInput/PhoneNumberInput.messages.js.map +1 -1
- package/build/phoneNumberInput/data/countries.js +3 -1
- package/build/phoneNumberInput/data/countries.js.map +1 -1
- package/build/phoneNumberInput/utils/findCountryByCode/index.js +1 -1
- package/build/phoneNumberInput/utils/findCountryByCode/index.js.map +1 -1
- package/build/phoneNumberInput/utils/findCountryByPrefix/index.js +1 -1
- package/build/phoneNumberInput/utils/findCountryByPrefix/index.js.map +1 -1
- package/build/popover/Popover.js +5 -3
- package/build/popover/Popover.js.map +1 -1
- package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.js +3 -1
- package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.js.map +1 -1
- package/build/primitives/PrimitiveButton/PrimitiveButton.js +4 -2
- package/build/primitives/PrimitiveButton/PrimitiveButton.js.map +1 -1
- package/build/processIndicator/ProcessIndicator.js +3 -1
- package/build/processIndicator/ProcessIndicator.js.map +1 -1
- package/build/progress/Progress.js +3 -1
- package/build/progress/Progress.js.map +1 -1
- package/build/progressBar/ProgressBar.js +7 -5
- package/build/progressBar/ProgressBar.js.map +1 -1
- package/build/promoCard/PromoCard.js +8 -6
- package/build/promoCard/PromoCard.js.map +1 -1
- package/build/promoCard/PromoCardGroup.js +3 -1
- package/build/promoCard/PromoCardGroup.js.map +1 -1
- package/build/promoCard/PromoCardIndicator.js +5 -3
- package/build/promoCard/PromoCardIndicator.js.map +1 -1
- package/build/provider/Provider.js +4 -2
- package/build/provider/Provider.js.map +1 -1
- package/build/radio/Radio.js +6 -4
- package/build/radio/Radio.js.map +1 -1
- package/build/radioGroup/RadioGroup.js +4 -2
- package/build/radioGroup/RadioGroup.js.map +1 -1
- package/build/radioOption/RadioOption.js +5 -3
- package/build/radioOption/RadioOption.js.map +1 -1
- package/build/section/Section.js +3 -1
- package/build/section/Section.js.map +1 -1
- package/build/segmentedControl/SegmentedControl.js +5 -3
- package/build/segmentedControl/SegmentedControl.js.map +1 -1
- package/build/select/Select.js +13 -11
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.messages.js +3 -1
- package/build/select/Select.messages.js.map +1 -1
- package/build/select/option/Option.js +6 -4
- package/build/select/option/Option.js.map +1 -1
- package/build/select/option/index.js +3 -1
- package/build/select/option/index.js.map +1 -1
- package/build/select/searchBox/SearchBox.js +3 -1
- package/build/select/searchBox/SearchBox.js.map +1 -1
- package/build/selectOption/SelectOption.js +10 -8
- package/build/selectOption/SelectOption.js.map +1 -1
- package/build/selectOption/SelectOption.messages.js +3 -1
- package/build/selectOption/SelectOption.messages.js.map +1 -1
- package/build/snackbar/Snackbar.js +3 -3
- package/build/snackbar/Snackbar.js.map +1 -1
- package/build/snackbar/SnackbarProvider.js +3 -1
- package/build/snackbar/SnackbarProvider.js.map +1 -1
- package/build/snackbar/useSnackbar.js +3 -1
- package/build/snackbar/useSnackbar.js.map +1 -1
- package/build/statusIcon/StatusIcon.js +12 -10
- package/build/statusIcon/StatusIcon.js.map +1 -1
- package/build/statusIcon/StatusIcon.messages.js +3 -1
- package/build/statusIcon/StatusIcon.messages.js.map +1 -1
- package/build/stepper/Stepper.js +4 -2
- package/build/stepper/Stepper.js.map +1 -1
- package/build/sticky/Sticky.js +3 -1
- package/build/sticky/Sticky.js.map +1 -1
- package/build/styles/common/Option/Option.css +1 -1
- package/build/styles/divider/Divider.css +24 -0
- package/build/styles/main.css +25 -1
- package/build/summary/Summary.js +9 -7
- package/build/summary/Summary.js.map +1 -1
- package/build/summary/Summary.messages.js +3 -1
- package/build/summary/Summary.messages.js.map +1 -1
- package/build/switch/Switch.js +3 -1
- package/build/switch/Switch.js.map +1 -1
- package/build/switchOption/SwitchOption.js +5 -3
- package/build/switchOption/SwitchOption.js.map +1 -1
- package/build/table/Table.js +16 -14
- package/build/table/Table.js.map +1 -1
- package/build/table/Table.messages.js +3 -1
- package/build/table/Table.messages.js.map +1 -1
- package/build/table/TableCell.js +9 -7
- package/build/table/TableCell.js.map +1 -1
- package/build/table/TableHeader.js +6 -4
- package/build/table/TableHeader.js.map +1 -1
- package/build/table/TableRow.js +6 -4
- package/build/table/TableRow.js.map +1 -1
- package/build/table/TableStatusText.js +4 -2
- package/build/table/TableStatusText.js.map +1 -1
- package/build/tabs/Tab.js +3 -1
- package/build/tabs/Tab.js.map +1 -1
- package/build/tabs/TabList.js +3 -1
- package/build/tabs/TabList.js.map +1 -1
- package/build/tabs/TabPanel.js +3 -1
- package/build/tabs/TabPanel.js.map +1 -1
- package/build/tabs/Tabs.js +6 -4
- package/build/tabs/Tabs.js.map +1 -1
- package/build/textareaWithDisplayFormat/TextareaWithDisplayFormat.js +4 -2
- package/build/textareaWithDisplayFormat/TextareaWithDisplayFormat.js.map +1 -1
- package/build/tile/Tile.js +5 -3
- package/build/tile/Tile.js.map +1 -1
- package/build/title/Title.js +3 -1
- package/build/title/Title.js.map +1 -1
- package/build/tooltip/Tooltip.js +3 -1
- package/build/tooltip/Tooltip.js.map +1 -1
- package/build/typeahead/Typeahead.js +8 -6
- package/build/typeahead/Typeahead.js.map +1 -1
- package/build/typeahead/Typeahead.messages.js +3 -1
- package/build/typeahead/Typeahead.messages.js.map +1 -1
- package/build/typeahead/typeaheadInput/TypeaheadInput.js +3 -1
- package/build/typeahead/typeaheadInput/TypeaheadInput.js.map +1 -1
- package/build/typeahead/typeaheadOption/TypeaheadOption.js +5 -3
- package/build/typeahead/typeaheadOption/TypeaheadOption.js.map +1 -1
- package/build/typeahead/util/highlight.js +3 -1
- package/build/typeahead/util/highlight.js.map +1 -1
- package/build/types/badge/Badge.d.ts +1 -1
- package/build/types/badge/Badge.d.ts.map +1 -1
- package/build/types/badge/BadgeAssets.d.ts.map +1 -1
- package/build/types/common/locale/index.d.ts +1 -1
- package/build/types/common/locale/index.d.ts.map +1 -1
- package/build/types/dateInput/DateInput.d.ts +1 -1
- package/build/types/dateInput/DateInput.d.ts.map +1 -1
- package/build/types/divider/Divider.d.ts +29 -0
- package/build/types/divider/Divider.d.ts.map +1 -0
- package/build/types/divider/index.d.ts +3 -0
- package/build/types/divider/index.d.ts.map +1 -0
- package/build/types/index.d.ts +2 -0
- package/build/types/index.d.ts.map +1 -1
- package/build/upload/Upload.js +17 -17
- package/build/upload/Upload.js.map +1 -1
- package/build/upload/Upload.messages.js +3 -1
- package/build/upload/Upload.messages.js.map +1 -1
- package/build/upload/steps/completeStep/completeStep.js +30 -6
- package/build/upload/steps/completeStep/completeStep.js.map +1 -1
- package/build/upload/steps/completeStep/completeStep.mjs +24 -2
- package/build/upload/steps/completeStep/completeStep.mjs.map +1 -1
- package/build/upload/steps/processingStep/processingStep.js +6 -4
- package/build/upload/steps/processingStep/processingStep.js.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.js +5 -3
- package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
- package/build/uploadInput/UploadInput.js +13 -11
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.messages.js +3 -1
- package/build/uploadInput/UploadInput.messages.js.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.js +8 -8
- package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.messages.js +3 -1
- package/build/uploadInput/uploadButton/UploadButton.messages.js.map +1 -1
- package/build/uploadInput/uploadButton/getAllowedFileTypes.js +3 -1
- package/build/uploadInput/uploadButton/getAllowedFileTypes.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.js +12 -12
- package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.messages.js +3 -1
- package/build/uploadInput/uploadItem/UploadItem.messages.js.map +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.js +19 -17
- package/build/withDisplayFormat/WithDisplayFormat.js.map +1 -1
- package/build/withId/withId.js +3 -1
- package/build/withId/withId.js.map +1 -1
- package/build/withNextPortal/withNextPortal.js +3 -1
- package/build/withNextPortal/withNextPortal.js.map +1 -1
- package/package.json +7 -8
- package/src/badge/Badge.tsx +1 -1
- package/src/badge/BadgeAssets.tsx +2 -2
- package/src/common/Option/Option.css +1 -1
- package/src/common/Option/Option.less +2 -2
- package/src/common/Option/Option.tsx +1 -1
- package/src/common/locale/index.ts +1 -1
- package/src/dateInput/DateInput.tsx +7 -1
- package/src/divider/Divider.accessibility.docs.mdx +61 -0
- package/src/divider/Divider.css +24 -0
- package/src/divider/Divider.less +31 -0
- package/src/divider/Divider.spec.tsx +60 -0
- package/src/divider/Divider.story.tsx +130 -0
- package/src/divider/Divider.tsx +54 -0
- package/src/divider/index.ts +2 -0
- package/src/i18n/cs.json +22 -5
- package/src/index.ts +2 -0
- package/src/main.css +25 -1
- package/src/main.less +1 -0
- package/src/upload/steps/completeStep/completeStep.tsx +1 -1
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var icons = require('@transferwise/icons');
|
|
4
6
|
var clsx = require('clsx');
|
|
5
7
|
var React = require('react');
|
|
@@ -114,13 +116,13 @@ const Carousel = ({
|
|
|
114
116
|
className: clsx.clsx('carousel-wrapper', className),
|
|
115
117
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
116
118
|
className: "d-flex justify-content-between carousel__header",
|
|
117
|
-
children: [typeof header === 'string' ? /*#__PURE__*/jsxRuntime.jsx(Title, {
|
|
119
|
+
children: [typeof header === 'string' ? /*#__PURE__*/jsxRuntime.jsx(Title.default, {
|
|
118
120
|
as: "span",
|
|
119
121
|
type: "title-body",
|
|
120
122
|
children: header
|
|
121
123
|
}) : header, areActionButtonsEnabled ? /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
122
124
|
className: "hidden-xs d-inline-flex",
|
|
123
|
-
children: [/*#__PURE__*/jsxRuntime.jsx(IconButton, {
|
|
125
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
|
|
124
126
|
size: 32,
|
|
125
127
|
tabIndex: -1,
|
|
126
128
|
priority: "tertiary",
|
|
@@ -129,7 +131,7 @@ const Carousel = ({
|
|
|
129
131
|
"data-testid": "scroll-carousel-left",
|
|
130
132
|
onClick: () => scrollCarousel('left'),
|
|
131
133
|
children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronLeft, {})
|
|
132
|
-
}), /*#__PURE__*/jsxRuntime.jsx(IconButton, {
|
|
134
|
+
}), /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
|
|
133
135
|
size: 32,
|
|
134
136
|
tabIndex: -1,
|
|
135
137
|
className: "m-l-1",
|
|
@@ -199,7 +201,7 @@ const Carousel = ({
|
|
|
199
201
|
id: card.id,
|
|
200
202
|
role: "listitem",
|
|
201
203
|
"aria-labelledby": `${card.id}-anchor`,
|
|
202
|
-
children: /*#__PURE__*/jsxRuntime.jsx(PromoCard, {
|
|
204
|
+
children: /*#__PURE__*/jsxRuntime.jsx(PromoCard.default, {
|
|
203
205
|
...card,
|
|
204
206
|
type: undefined,
|
|
205
207
|
...sharedProps,
|
|
@@ -274,5 +276,5 @@ const isVisible = (container, el) => {
|
|
|
274
276
|
return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;
|
|
275
277
|
};
|
|
276
278
|
|
|
277
|
-
|
|
279
|
+
exports.default = Carousel;
|
|
278
280
|
//# sourceMappingURL=Carousel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":["../../src/carousel/Carousel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport IconButton from '../iconButton';\nimport Title from '../title';\nimport type { PromoCardLinkProps } from '../promoCard/PromoCard';\nimport PromoCard from '../promoCard/PromoCard';\n\nexport type CarouselCardCommon = {\n id: string;\n href?: string;\n hrefTarget?: HTMLAnchorElement['target'];\n onClick?: () => void;\n className?: string;\n styles?: CSSProperties;\n};\n\nexport type CarouselDefaultCard = CarouselCardCommon & {\n type: 'anchor' | 'button';\n content: ReactNode;\n};\n\nexport type CarouselPromoCard = CarouselCardCommon & {\n type: 'promo';\n} & Omit<PromoCardLinkProps, 'type'>;\n\nexport type CarouselCard = CarouselDefaultCard | CarouselPromoCard;\nexport interface CarouselProps {\n header: string | ReactNode;\n className?: string;\n cards: CarouselCard[];\n onClick?: (cardId: string) => void;\n}\n\ntype CardsReference = {\n type: 'promo' | 'default';\n cardElement: HTMLDivElement | HTMLAnchorElement;\n anchorElement?: HTMLAnchorElement;\n};\n\nconst LEFT_SCROLL_OFFSET = 8;\n\nconst Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }) => {\n const [scrollPosition, setScrollPosition] = useState(0);\n const [previousScrollPosition, setPreviousScrollPosition] = useState(0);\n const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);\n const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');\n const carouselElementRef = useRef<HTMLDivElement>(null);\n const carouselCardsRef = useRef<CardsReference[]>([]);\n\n const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;\n\n const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;\n\n const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);\n\n const updateScrollButtonsState = () => {\n if (carouselElementRef.current) {\n const { scrollWidth, offsetWidth } = carouselElementRef.current;\n\n const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;\n setScrollIsAtEnd(scrollAtEnd);\n }\n\n const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';\n\n const cardsInFullViewIds: string[] = [];\n carouselCardsRef.current.forEach((card) => {\n if (isVisible(carouselElementRef.current as HTMLElement, card.cardElement as HTMLElement)) {\n // eslint-disable-next-line functional/immutable-data\n cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');\n }\n });\n\n if (cardsInFullViewIds.length >= 1) {\n const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;\n const visibleCardId = cardsInFullViewIds[visibleCardIndex];\n setVisibleCardOnMobileView(visibleCardId);\n setFocusedCard(visibleCardId);\n }\n\n setPreviousScrollPosition(scrollPosition);\n };\n\n const scrollCarousel = (direction: 'left' | 'right' = 'right') => {\n if (carouselElementRef.current) {\n const { scrollWidth } = carouselElementRef.current;\n\n const cardWidth = scrollWidth / carouselCardsRef.current.length;\n\n const res = Math.floor(cardWidth - cardWidth * 0.05);\n\n carouselElementRef.current.scrollBy({\n left: direction === 'right' ? res : -res,\n behavior: 'smooth',\n });\n }\n };\n\n const handleOnKeyDown = (\n event: React.KeyboardEvent<HTMLAnchorElement | HTMLDivElement>,\n index: number,\n ) => {\n if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;\n const nextCard = cards[nextIndex];\n if (nextCard) {\n const ref = carouselCardsRef.current[nextIndex];\n if (ref.type === 'promo') {\n ref.anchorElement?.focus();\n } else {\n ref.cardElement?.focus();\n }\n\n scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);\n event.preventDefault();\n }\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.currentTarget.click();\n }\n };\n\n const scrollCardIntoView = (element: HTMLElement, card: CarouselCard) => {\n element.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n });\n\n setFocusedCard(card.id);\n };\n\n useEffect(() => {\n updateScrollButtonsState();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [scrollPosition]);\n\n useEffect(() => {\n window.addEventListener('resize', updateScrollButtonsState);\n\n return () => {\n window.removeEventListener('resize', updateScrollButtonsState);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const addElementToCardsRefArray = (index: number, ref: Partial<CardsReference>) => {\n if (ref) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: ref.type ?? carouselCardsRef.current?.[index]?.type,\n cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,\n anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement,\n };\n }\n };\n\n return (\n <div className={clsx('carousel-wrapper', className)}>\n <div className=\"d-flex justify-content-between carousel__header\">\n {typeof header === 'string' ? (\n <Title as=\"span\" type=\"title-body\">\n {header}\n </Title>\n ) : (\n header\n )}\n {areActionButtonsEnabled ? (\n <div className=\"hidden-xs d-inline-flex\">\n <IconButton\n size={32}\n tabIndex={-1}\n priority=\"tertiary\"\n disabled={!isLeftActionButtonEnabled}\n aria-hidden=\"true\"\n data-testid=\"scroll-carousel-left\"\n onClick={() => scrollCarousel('left')}\n >\n <ChevronLeft />\n </IconButton>\n <IconButton\n size={32}\n tabIndex={-1}\n className=\"m-l-1\"\n priority=\"tertiary\"\n aria-hidden=\"true\"\n data-testid=\"scroll-carousel-right\"\n disabled={scrollIsAtEnd}\n onClick={() => scrollCarousel()}\n >\n <ChevronRight />\n </IconButton>\n </div>\n ) : null}\n </div>\n <div\n ref={carouselElementRef}\n tabIndex={-1}\n role=\"list\"\n className=\"carousel\"\n onScroll={(event) => {\n const target = event.target as HTMLElement;\n setScrollPosition(target.scrollLeft);\n }}\n >\n {cards?.map((card, index) => {\n const sharedProps = {\n id: card.id,\n className: clsx('carousel__card', {\n 'carousel__card--focused': card.id === focusedCard,\n }),\n onClick: () => {\n card.onClick?.();\n onClick?.(card.id);\n },\n onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLDivElement>) => {\n scrollCardIntoView(event.currentTarget, card);\n },\n };\n\n const cardContent =\n card.type !== 'promo' ? (\n <div\n id={`${card.id}-content`}\n className={clsx('carousel__card-content', {\n [card.className ?? '']: !!card.className,\n })}\n style={card.styles}\n >\n {card.content}\n </div>\n ) : null;\n\n if (card.type === 'button') {\n return (\n <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n <div\n {...sharedProps}\n ref={(el) => {\n if (el) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: 'default',\n cardElement: el,\n };\n }\n }}\n role=\"button\"\n tabIndex={0}\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n >\n {cardContent}\n </div>\n </div>\n );\n }\n\n if (card.type === 'promo') {\n return (\n <div key={card.id} id={card.id} role=\"listitem\" aria-labelledby={`${card.id}-anchor`}>\n <PromoCard\n {...{ ...card, type: undefined }}\n {...{ ...sharedProps }}\n ref={(el: HTMLDivElement | null) => {\n if (el) {\n addElementToCardsRefArray(index, {\n type: 'promo',\n cardElement: el,\n });\n }\n }}\n anchorRef={(el: HTMLAnchorElement) => {\n if (el) {\n addElementToCardsRefArray(index, {\n type: 'promo',\n anchorElement: el,\n });\n }\n }}\n anchorId={`${card.id}-anchor`}\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n />\n </div>\n );\n }\n\n return (\n <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n <a\n {...sharedProps}\n ref={(el) => {\n if (el) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: 'default',\n cardElement: el,\n };\n }\n }}\n href={card.href}\n target={card.hrefTarget}\n rel=\"noreferrer\"\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n >\n {cardContent}\n </a>\n </div>\n );\n })}\n </div>\n <div className=\"visible-xs\">\n <div className=\"carousel__indicators\">\n {cards?.map((card, index) => (\n <button\n key={`${card.id}-indicator`}\n data-testid={`${card.id}-indicator`}\n tabIndex={-1}\n aria-hidden\n type=\"button\"\n className={clsx('carousel__indicator', {\n 'carousel__indicator--selected': card.id === visibleCardOnMobileView,\n })}\n onClick={() => {\n scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);\n }}\n />\n ))}\n </div>\n </div>\n </div>\n );\n};\n\nconst isVisible = (container: HTMLElement, el: HTMLElement) => {\n const cWidth = container.offsetWidth;\n const cScrollOffset = container.scrollLeft;\n\n const elemLeft = el.offsetLeft - container.offsetLeft;\n const elemRight = elemLeft + el.offsetWidth;\n\n return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;\n};\n\nexport default Carousel;\n"],"names":["LEFT_SCROLL_OFFSET","Carousel","header","className","cards","onClick","scrollPosition","setScrollPosition","useState","previousScrollPosition","setPreviousScrollPosition","scrollIsAtEnd","setScrollIsAtEnd","visibleCardOnMobileView","setVisibleCardOnMobileView","carouselElementRef","useRef","carouselCardsRef","isLeftActionButtonEnabled","areActionButtonsEnabled","focusedCard","setFocusedCard","id","updateScrollButtonsState","current","scrollWidth","offsetWidth","scrollAtEnd","scrollDirecton","cardsInFullViewIds","forEach","card","isVisible","cardElement","push","getAttribute","length","visibleCardIndex","visibleCardId","scrollCarousel","direction","cardWidth","res","Math","floor","scrollBy","left","behavior","handleOnKeyDown","event","index","key","nextIndex","nextCard","ref","type","anchorElement","focus","scrollCardIntoView","preventDefault","currentTarget","click","element","scrollIntoView","block","inline","useEffect","window","addEventListener","removeEventListener","addElementToCardsRefArray","_jsxs","clsx","children","_jsx","Title","as","IconButton","size","tabIndex","priority","disabled","ChevronLeft","ChevronRight","role","onScroll","target","scrollLeft","map","sharedProps","onFocus","cardContent","style","styles","content","el","onKeyDown","PromoCard","undefined","anchorRef","anchorId","href","hrefTarget","rel","container","cWidth","cScrollOffset","elemLeft","offsetLeft","elemRight"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":["../../src/carousel/Carousel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport IconButton from '../iconButton';\nimport Title from '../title';\nimport type { PromoCardLinkProps } from '../promoCard/PromoCard';\nimport PromoCard from '../promoCard/PromoCard';\n\nexport type CarouselCardCommon = {\n id: string;\n href?: string;\n hrefTarget?: HTMLAnchorElement['target'];\n onClick?: () => void;\n className?: string;\n styles?: CSSProperties;\n};\n\nexport type CarouselDefaultCard = CarouselCardCommon & {\n type: 'anchor' | 'button';\n content: ReactNode;\n};\n\nexport type CarouselPromoCard = CarouselCardCommon & {\n type: 'promo';\n} & Omit<PromoCardLinkProps, 'type'>;\n\nexport type CarouselCard = CarouselDefaultCard | CarouselPromoCard;\nexport interface CarouselProps {\n header: string | ReactNode;\n className?: string;\n cards: CarouselCard[];\n onClick?: (cardId: string) => void;\n}\n\ntype CardsReference = {\n type: 'promo' | 'default';\n cardElement: HTMLDivElement | HTMLAnchorElement;\n anchorElement?: HTMLAnchorElement;\n};\n\nconst LEFT_SCROLL_OFFSET = 8;\n\nconst Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }) => {\n const [scrollPosition, setScrollPosition] = useState(0);\n const [previousScrollPosition, setPreviousScrollPosition] = useState(0);\n const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);\n const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState<string>('');\n const carouselElementRef = useRef<HTMLDivElement>(null);\n const carouselCardsRef = useRef<CardsReference[]>([]);\n\n const isLeftActionButtonEnabled = scrollPosition > LEFT_SCROLL_OFFSET;\n\n const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;\n\n const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);\n\n const updateScrollButtonsState = () => {\n if (carouselElementRef.current) {\n const { scrollWidth, offsetWidth } = carouselElementRef.current;\n\n const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + LEFT_SCROLL_OFFSET;\n setScrollIsAtEnd(scrollAtEnd);\n }\n\n const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';\n\n const cardsInFullViewIds: string[] = [];\n carouselCardsRef.current.forEach((card) => {\n if (isVisible(carouselElementRef.current as HTMLElement, card.cardElement as HTMLElement)) {\n // eslint-disable-next-line functional/immutable-data\n cardsInFullViewIds.push(card.cardElement.getAttribute('id') ?? '');\n }\n });\n\n if (cardsInFullViewIds.length >= 1) {\n const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;\n const visibleCardId = cardsInFullViewIds[visibleCardIndex];\n setVisibleCardOnMobileView(visibleCardId);\n setFocusedCard(visibleCardId);\n }\n\n setPreviousScrollPosition(scrollPosition);\n };\n\n const scrollCarousel = (direction: 'left' | 'right' = 'right') => {\n if (carouselElementRef.current) {\n const { scrollWidth } = carouselElementRef.current;\n\n const cardWidth = scrollWidth / carouselCardsRef.current.length;\n\n const res = Math.floor(cardWidth - cardWidth * 0.05);\n\n carouselElementRef.current.scrollBy({\n left: direction === 'right' ? res : -res,\n behavior: 'smooth',\n });\n }\n };\n\n const handleOnKeyDown = (\n event: React.KeyboardEvent<HTMLAnchorElement | HTMLDivElement>,\n index: number,\n ) => {\n if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;\n const nextCard = cards[nextIndex];\n if (nextCard) {\n const ref = carouselCardsRef.current[nextIndex];\n if (ref.type === 'promo') {\n ref.anchorElement?.focus();\n } else {\n ref.cardElement?.focus();\n }\n\n scrollCardIntoView(carouselCardsRef.current[nextIndex].cardElement, nextCard);\n event.preventDefault();\n }\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.currentTarget.click();\n }\n };\n\n const scrollCardIntoView = (element: HTMLElement, card: CarouselCard) => {\n element.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n });\n\n setFocusedCard(card.id);\n };\n\n useEffect(() => {\n updateScrollButtonsState();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [scrollPosition]);\n\n useEffect(() => {\n window.addEventListener('resize', updateScrollButtonsState);\n\n return () => {\n window.removeEventListener('resize', updateScrollButtonsState);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const addElementToCardsRefArray = (index: number, ref: Partial<CardsReference>) => {\n if (ref) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: ref.type ?? carouselCardsRef.current?.[index]?.type,\n cardElement: ref.cardElement ?? carouselCardsRef.current?.[index]?.cardElement,\n anchorElement: ref.anchorElement ?? carouselCardsRef.current?.[index]?.anchorElement,\n };\n }\n };\n\n return (\n <div className={clsx('carousel-wrapper', className)}>\n <div className=\"d-flex justify-content-between carousel__header\">\n {typeof header === 'string' ? (\n <Title as=\"span\" type=\"title-body\">\n {header}\n </Title>\n ) : (\n header\n )}\n {areActionButtonsEnabled ? (\n <div className=\"hidden-xs d-inline-flex\">\n <IconButton\n size={32}\n tabIndex={-1}\n priority=\"tertiary\"\n disabled={!isLeftActionButtonEnabled}\n aria-hidden=\"true\"\n data-testid=\"scroll-carousel-left\"\n onClick={() => scrollCarousel('left')}\n >\n <ChevronLeft />\n </IconButton>\n <IconButton\n size={32}\n tabIndex={-1}\n className=\"m-l-1\"\n priority=\"tertiary\"\n aria-hidden=\"true\"\n data-testid=\"scroll-carousel-right\"\n disabled={scrollIsAtEnd}\n onClick={() => scrollCarousel()}\n >\n <ChevronRight />\n </IconButton>\n </div>\n ) : null}\n </div>\n <div\n ref={carouselElementRef}\n tabIndex={-1}\n role=\"list\"\n className=\"carousel\"\n onScroll={(event) => {\n const target = event.target as HTMLElement;\n setScrollPosition(target.scrollLeft);\n }}\n >\n {cards?.map((card, index) => {\n const sharedProps = {\n id: card.id,\n className: clsx('carousel__card', {\n 'carousel__card--focused': card.id === focusedCard,\n }),\n onClick: () => {\n card.onClick?.();\n onClick?.(card.id);\n },\n onFocus: (event: React.FocusEvent<HTMLAnchorElement | HTMLDivElement>) => {\n scrollCardIntoView(event.currentTarget, card);\n },\n };\n\n const cardContent =\n card.type !== 'promo' ? (\n <div\n id={`${card.id}-content`}\n className={clsx('carousel__card-content', {\n [card.className ?? '']: !!card.className,\n })}\n style={card.styles}\n >\n {card.content}\n </div>\n ) : null;\n\n if (card.type === 'button') {\n return (\n <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n <div\n {...sharedProps}\n ref={(el) => {\n if (el) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: 'default',\n cardElement: el,\n };\n }\n }}\n role=\"button\"\n tabIndex={0}\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n >\n {cardContent}\n </div>\n </div>\n );\n }\n\n if (card.type === 'promo') {\n return (\n <div key={card.id} id={card.id} role=\"listitem\" aria-labelledby={`${card.id}-anchor`}>\n <PromoCard\n {...{ ...card, type: undefined }}\n {...{ ...sharedProps }}\n ref={(el: HTMLDivElement | null) => {\n if (el) {\n addElementToCardsRefArray(index, {\n type: 'promo',\n cardElement: el,\n });\n }\n }}\n anchorRef={(el: HTMLAnchorElement) => {\n if (el) {\n addElementToCardsRefArray(index, {\n type: 'promo',\n anchorElement: el,\n });\n }\n }}\n anchorId={`${card.id}-anchor`}\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n />\n </div>\n );\n }\n\n return (\n <div key={card.id} aria-labelledby={`${card.id}-content`} role=\"listitem\">\n <a\n {...sharedProps}\n ref={(el) => {\n if (el) {\n // eslint-disable-next-line functional/immutable-data\n carouselCardsRef.current[index] = {\n type: 'default',\n cardElement: el,\n };\n }\n }}\n href={card.href}\n target={card.hrefTarget}\n rel=\"noreferrer\"\n onKeyDown={(event) => handleOnKeyDown(event, index)}\n >\n {cardContent}\n </a>\n </div>\n );\n })}\n </div>\n <div className=\"visible-xs\">\n <div className=\"carousel__indicators\">\n {cards?.map((card, index) => (\n <button\n key={`${card.id}-indicator`}\n data-testid={`${card.id}-indicator`}\n tabIndex={-1}\n aria-hidden\n type=\"button\"\n className={clsx('carousel__indicator', {\n 'carousel__indicator--selected': card.id === visibleCardOnMobileView,\n })}\n onClick={() => {\n scrollCardIntoView(carouselCardsRef.current[index].cardElement, card);\n }}\n />\n ))}\n </div>\n </div>\n </div>\n );\n};\n\nconst isVisible = (container: HTMLElement, el: HTMLElement) => {\n const cWidth = container.offsetWidth;\n const cScrollOffset = container.scrollLeft;\n\n const elemLeft = el.offsetLeft - container.offsetLeft;\n const elemRight = elemLeft + el.offsetWidth;\n\n return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;\n};\n\nexport default Carousel;\n"],"names":["LEFT_SCROLL_OFFSET","Carousel","header","className","cards","onClick","scrollPosition","setScrollPosition","useState","previousScrollPosition","setPreviousScrollPosition","scrollIsAtEnd","setScrollIsAtEnd","visibleCardOnMobileView","setVisibleCardOnMobileView","carouselElementRef","useRef","carouselCardsRef","isLeftActionButtonEnabled","areActionButtonsEnabled","focusedCard","setFocusedCard","id","updateScrollButtonsState","current","scrollWidth","offsetWidth","scrollAtEnd","scrollDirecton","cardsInFullViewIds","forEach","card","isVisible","cardElement","push","getAttribute","length","visibleCardIndex","visibleCardId","scrollCarousel","direction","cardWidth","res","Math","floor","scrollBy","left","behavior","handleOnKeyDown","event","index","key","nextIndex","nextCard","ref","type","anchorElement","focus","scrollCardIntoView","preventDefault","currentTarget","click","element","scrollIntoView","block","inline","useEffect","window","addEventListener","removeEventListener","addElementToCardsRefArray","_jsxs","clsx","children","_jsx","Title","as","IconButton","size","tabIndex","priority","disabled","ChevronLeft","ChevronRight","role","onScroll","target","scrollLeft","map","sharedProps","onFocus","cardContent","style","styles","content","el","onKeyDown","PromoCard","undefined","anchorRef","anchorId","href","hrefTarget","rel","container","cWidth","cScrollOffset","elemLeft","offsetLeft","elemRight"],"mappings":"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"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var clsx = require('clsx');
|
|
4
6
|
var Body = require('../body/Body.js');
|
|
5
7
|
var CheckboxButton = require('../checkboxButton/CheckboxButton.js');
|
|
@@ -54,7 +56,7 @@ function Checkbox({
|
|
|
54
56
|
className: clsx.clsx({
|
|
55
57
|
disabled
|
|
56
58
|
}),
|
|
57
|
-
children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxButton, {
|
|
59
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxButton.default, {
|
|
58
60
|
className: "p-r-2",
|
|
59
61
|
checked: checked,
|
|
60
62
|
disabled: innerDisabled,
|
|
@@ -62,14 +64,14 @@ function Checkbox({
|
|
|
62
64
|
onFocus: onFocus,
|
|
63
65
|
onChange: () => onChange(!checked),
|
|
64
66
|
onBlur: onBlur
|
|
65
|
-
}), /*#__PURE__*/jsxRuntime.jsxs(Body, {
|
|
67
|
+
}), /*#__PURE__*/jsxRuntime.jsxs(Body.default, {
|
|
66
68
|
as: "span",
|
|
67
69
|
className: "np-checkbox__text",
|
|
68
70
|
type: secondary ? typography.Typography.BODY_LARGE_BOLD : typography.Typography.BODY_LARGE,
|
|
69
71
|
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
70
72
|
className: required ? 'has-required' : undefined,
|
|
71
73
|
children: label
|
|
72
|
-
}), secondary && /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
74
|
+
}), secondary && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
73
75
|
as: "span",
|
|
74
76
|
children: secondary
|
|
75
77
|
})]
|
|
@@ -78,5 +80,5 @@ function Checkbox({
|
|
|
78
80
|
});
|
|
79
81
|
}
|
|
80
82
|
|
|
81
|
-
|
|
83
|
+
exports.default = Checkbox;
|
|
82
84
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n 'checkbox-disabled': disabled,\n },\n className,\n );\n\n const innerDisabled = disabled || readOnly;\n return (\n <div id={id} className={classList}>\n <label className={clsx({ disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n 'checkbox-disabled': disabled,\n },\n className,\n );\n\n const innerDisabled = disabled || readOnly;\n return (\n <div id={id} className={classList}>\n <label className={clsx({ disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA,MAAAA;AACc,CAAA,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,SAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;AACxB,IAAA,mBAAmB,EAAEJ,QAAAA;GACtB,EACDG,SAAS,CACV,CAAA;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ,CAAA;AAC1C,EAAA,oBACEW,cAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAChCC,eAAA,CAAA,OAAA,EAAA;MAAOX,SAAS,EAAEM,SAAI,CAAC;AAAET,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACnCD,cAAA,CAACG,sBAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,OAAO;AACjBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAEjB,CAAA,eAAAO,eAAA,CAACE,YAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,cAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX,KAAAA;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,cAAA,CAACI,YAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACR,CAAA;KAAO,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var clsx = require('clsx');
|
|
4
6
|
var React = require('react');
|
|
5
7
|
var contexts = require('../inputs/contexts.js');
|
|
@@ -43,5 +45,5 @@ const CheckboxButton = /*#__PURE__*/React.forwardRef(function CheckboxButton({
|
|
|
43
45
|
});
|
|
44
46
|
});
|
|
45
47
|
|
|
46
|
-
|
|
48
|
+
exports.default = CheckboxButton;
|
|
47
49
|
//# sourceMappingURL=CheckboxButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxButton.js","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement> & {\n indeterminate?: boolean;\n};\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n { checked, indeterminate = false, className, disabled, onChange, ...rest },\n reference,\n) {\n const inputAttributes = useInputAttributes();\n\n const internalRef = useRef<HTMLInputElement>(null);\n\n useImperativeHandle(reference, () => internalRef.current ?? ({} as HTMLInputElement));\n\n useEffect(() => {\n if (internalRef.current) {\n // eslint-disable-next-line functional/immutable-data\n internalRef.current.indeterminate = indeterminate;\n }\n }, [indeterminate, reference]);\n\n return (\n <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n <input\n {...inputAttributes}\n {...rest}\n ref={reference ?? internalRef}\n type=\"checkbox\"\n disabled={disabled}\n checked={checked}\n onChange={onChange}\n />\n <span className=\"tw-checkbox-button\">\n <span className=\"tw-checkbox-check\" />\n <span className=\"np-tw-checkbox-indeterminate\" />\n </span>\n </span>\n );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","indeterminate","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","internalRef","useRef","useImperativeHandle","current","useEffect","_jsxs","clsx","children","_jsx","ref","type"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CheckboxButton.js","sources":["../../src/checkboxButton/CheckboxButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { InputHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type CheckboxButtonProps = InputHTMLAttributes<HTMLInputElement> & {\n indeterminate?: boolean;\n};\n\nconst CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(function CheckboxButton(\n { checked, indeterminate = false, className, disabled, onChange, ...rest },\n reference,\n) {\n const inputAttributes = useInputAttributes();\n\n const internalRef = useRef<HTMLInputElement>(null);\n\n useImperativeHandle(reference, () => internalRef.current ?? ({} as HTMLInputElement));\n\n useEffect(() => {\n if (internalRef.current) {\n // eslint-disable-next-line functional/immutable-data\n internalRef.current.indeterminate = indeterminate;\n }\n }, [indeterminate, reference]);\n\n return (\n <span className={clsx('np-checkbox-button', className, disabled && 'disabled')}>\n <input\n {...inputAttributes}\n {...rest}\n ref={reference ?? internalRef}\n type=\"checkbox\"\n disabled={disabled}\n checked={checked}\n onChange={onChange}\n />\n <span className=\"tw-checkbox-button\">\n <span className=\"tw-checkbox-check\" />\n <span className=\"np-tw-checkbox-indeterminate\" />\n </span>\n </span>\n );\n});\n\nexport default CheckboxButton;\n"],"names":["CheckboxButton","forwardRef","checked","indeterminate","className","disabled","onChange","rest","reference","inputAttributes","useInputAttributes","internalRef","useRef","useImperativeHandle","current","useEffect","_jsxs","clsx","children","_jsx","ref","type"],"mappings":";;;;;;;;;AASA,MAAMA,cAAc,gBAAGC,gBAAU,CAAwC,SAASD,cAAcA,CAC9F;EAAEE,OAAO;AAAEC,EAAAA,aAAa,GAAG,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAM,CAAA,EAC1EC,SAAS,EAAA;AAET,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE,CAAA;AAE5C,EAAA,MAAMC,WAAW,GAAGC,YAAM,CAAmB,IAAI,CAAC,CAAA;EAElDC,yBAAmB,CAACL,SAAS,EAAE,MAAMG,WAAW,CAACG,OAAO,IAAK,EAAuB,CAAC,CAAA;AAErFC,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIJ,WAAW,CAACG,OAAO,EAAE;AACvB;AACAH,MAAAA,WAAW,CAACG,OAAO,CAACX,aAAa,GAAGA,aAAa,CAAA;AACnD,KAAA;AACF,GAAC,EAAE,CAACA,aAAa,EAAEK,SAAS,CAAC,CAAC,CAAA;AAE9B,EAAA,oBACEQ,eAAA,CAAA,MAAA,EAAA;IAAMZ,SAAS,EAAEa,SAAI,CAAC,oBAAoB,EAAEb,SAAS,EAAEC,QAAQ,IAAI,UAAU,CAAE;AAAAa,IAAAA,QAAA,gBAC7EC,cAAA,CAAA,OAAA,EAAA;AAAA,MAAA,GACMV,eAAe;AAAA,MAAA,GACfF,IAAI;MACRa,GAAG,EAAEZ,SAAS,IAAIG,WAAY;AAC9BU,MAAAA,IAAI,EAAC,UAAU;AACfhB,MAAAA,QAAQ,EAAEA,QAAS;AACnBH,MAAAA,OAAO,EAAEA,OAAQ;AACjBI,MAAAA,QAAQ,EAAEA,QAAAA;KAEZ,CAAA,eAAAU,eAAA,CAAA,MAAA,EAAA;AAAMZ,MAAAA,SAAS,EAAC,oBAAoB;AAAAc,MAAAA,QAAA,gBAClCC,cAAA,CAAA,MAAA,EAAA;AAAMf,QAAAA,SAAS,EAAC,mBAAA;OAChB,CAAA,eAAAe,cAAA,CAAA,MAAA,EAAA;AAAMf,QAAAA,SAAS,EAAC,8BAAA;AAA8B,OAChD,CAAA,CAAA;AAAA,KAAM,CACR,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX,CAAC;;;;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var React = require('react');
|
|
4
6
|
var CheckboxButton = require('../checkboxButton/CheckboxButton.js');
|
|
5
7
|
var Option = require('../common/Option/Option.js');
|
|
@@ -11,11 +13,11 @@ const CheckboxOption = /*#__PURE__*/React.forwardRef(({
|
|
|
11
13
|
onChange,
|
|
12
14
|
...rest
|
|
13
15
|
}, reference) => {
|
|
14
|
-
return /*#__PURE__*/jsxRuntime.jsx(Option, {
|
|
16
|
+
return /*#__PURE__*/jsxRuntime.jsx(Option.default, {
|
|
15
17
|
...rest,
|
|
16
18
|
ref: reference,
|
|
17
19
|
disabled: disabled,
|
|
18
|
-
button: /*#__PURE__*/jsxRuntime.jsx(CheckboxButton, {
|
|
20
|
+
button: /*#__PURE__*/jsxRuntime.jsx(CheckboxButton.default, {
|
|
19
21
|
checked: checked,
|
|
20
22
|
disabled: disabled,
|
|
21
23
|
onChange: () => onChange?.(!checked)
|
|
@@ -23,5 +25,5 @@ const CheckboxOption = /*#__PURE__*/React.forwardRef(({
|
|
|
23
25
|
});
|
|
24
26
|
});
|
|
25
27
|
|
|
26
|
-
|
|
28
|
+
exports.default = CheckboxOption;
|
|
27
29
|
//# sourceMappingURL=CheckboxOption.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxOption.js","sources":["../../src/checkboxOption/CheckboxOption.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport CheckboxButton from '../checkboxButton';\nimport Option from '../common/Option';\nimport { ReferenceType, BaseOptionProps } from '../common/Option/Option';\n\nexport type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {\n /**\n * The checked state of the checkbox.\n */\n checked?: boolean;\n /**\n * Function to call when the checkbox option is clicked\n */\n onChange?: (value: boolean) => void;\n};\n\nconst CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(\n ({ checked, disabled, onChange, ...rest }, reference) => {\n return (\n <Option\n {...rest}\n ref={reference}\n disabled={disabled}\n button={\n <CheckboxButton\n checked={checked}\n disabled={disabled}\n onChange={() => onChange?.(!checked)}\n />\n }\n />\n );\n },\n);\n\nexport default CheckboxOption;\n"],"names":["CheckboxOption","forwardRef","checked","disabled","onChange","rest","reference","_jsx","Option","ref","button","CheckboxButton"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CheckboxOption.js","sources":["../../src/checkboxOption/CheckboxOption.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport CheckboxButton from '../checkboxButton';\nimport Option from '../common/Option';\nimport { ReferenceType, BaseOptionProps } from '../common/Option/Option';\n\nexport type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {\n /**\n * The checked state of the checkbox.\n */\n checked?: boolean;\n /**\n * Function to call when the checkbox option is clicked\n */\n onChange?: (value: boolean) => void;\n};\n\nconst CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(\n ({ checked, disabled, onChange, ...rest }, reference) => {\n return (\n <Option\n {...rest}\n ref={reference}\n disabled={disabled}\n button={\n <CheckboxButton\n checked={checked}\n disabled={disabled}\n onChange={() => onChange?.(!checked)}\n />\n }\n />\n );\n },\n);\n\nexport default CheckboxOption;\n"],"names":["CheckboxOption","forwardRef","checked","disabled","onChange","rest","reference","_jsx","Option","ref","button","CheckboxButton"],"mappings":";;;;;;;;;AAiBA,MAAMA,cAAc,gBAAGC,gBAAU,CAC/B,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;CAAM,EAAEC,SAAS,KAAI;EACtD,oBACEC,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDH,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfH,IAAAA,QAAQ,EAAEA,QAAS;IACnBO,MAAM,eACJH,cAAA,CAACI,sBAAc,EAAA;AACbT,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,QAAQ,EAAEA,MAAMA,QAAQ,GAAG,CAACF,OAAO,CAAA;KAEvC,CAAA;AAAC,GACD,CAAA,CAAA;AAEN,CAAC;;;;"}
|
package/build/chevron/Chevron.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var icons = require('@transferwise/icons');
|
|
4
6
|
var clsx = require('clsx');
|
|
5
7
|
require('../common/theme.js');
|
|
@@ -72,5 +74,5 @@ const Chevron = ({
|
|
|
72
74
|
});
|
|
73
75
|
};
|
|
74
76
|
|
|
75
|
-
|
|
77
|
+
exports.default = Chevron;
|
|
76
78
|
//# sourceMappingURL=Chevron.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chevron.js","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport { clsx } from 'clsx';\n\nimport {\n Size,\n Position,\n PositionTop,\n PositionBottom,\n PositionRight,\n PositionLeft,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n [Size.EXTRA_SMALL]: 10,\n [Size.SMALL]: 16,\n [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n size?: SizeExtraSmall | SizeSmall | SizeMedium;\n disabled?: boolean;\n className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n return (\n <span className={clsx('tw-icon', 'tw-icon-chevron', className)} role=\"presentation\" aria-hidden>\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n <path\n fillRule=\"evenodd\"\n d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n />\n </svg>\n </span>\n );\n};\n\nconst Chevron = ({\n orientation = Position.BOTTOM,\n size = Size.SMALL,\n disabled = false,\n className,\n}: ChevronProps) => {\n const classNameValue = clsx('tw-chevron', { 'chevron-color': !disabled }, orientation, className);\n\n if (size === Size.EXTRA_SMALL) {\n return <ExtraSmallChevron className={classNameValue} />;\n }\n\n const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","clsx","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Chevron.js","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport { clsx } from 'clsx';\n\nimport {\n Size,\n Position,\n PositionTop,\n PositionBottom,\n PositionRight,\n PositionLeft,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n [Size.EXTRA_SMALL]: 10,\n [Size.SMALL]: 16,\n [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n size?: SizeExtraSmall | SizeSmall | SizeMedium;\n disabled?: boolean;\n className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n return (\n <span className={clsx('tw-icon', 'tw-icon-chevron', className)} role=\"presentation\" aria-hidden>\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n <path\n fillRule=\"evenodd\"\n d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n />\n </svg>\n </span>\n );\n};\n\nconst Chevron = ({\n orientation = Position.BOTTOM,\n size = Size.SMALL,\n disabled = false,\n className,\n}: ChevronProps) => {\n const classNameValue = clsx('tw-chevron', { 'chevron-color': !disabled }, orientation, className);\n\n if (size === Size.EXTRA_SMALL) {\n return <ExtraSmallChevron className={classNameValue} />;\n }\n\n const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","clsx","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,cAAc,GAAG;AACrB,EAAA,CAACC,SAAI,CAACC,WAAW,GAAG,EAAE;AACtB,EAAA,CAACD,SAAI,CAACE,KAAK,GAAG,EAAE;EAChB,CAACF,SAAI,CAACG,MAAM,GAAG,EAAA;CAChB,CAAA;AAaD,MAAMC,iBAAiB,GAAGA,CAAC;AAAEC,EAAAA,SAAAA;AAAS,CAA0B,KAAI;AAClE,EAAA,oBACEC,cAAA,CAAA,MAAA,EAAA;IAAMD,SAAS,EAAEE,SAAI,CAAC,SAAS,EAAE,iBAAiB,EAAEF,SAAS,CAAE;AAACG,IAAAA,IAAI,EAAC,cAAc;IAAC,aAAW,EAAA,IAAA;AAAAC,IAAAA,QAAA,eAC7FH,cAAA,CAAA,KAAA,EAAA;AAAKI,MAAAA,KAAK,EAAC,IAAI;AAACC,MAAAA,MAAM,EAAC,IAAI;AAACC,MAAAA,OAAO,EAAC,WAAW;AAACC,MAAAA,IAAI,EAAC,cAAc;AAACC,MAAAA,SAAS,EAAC,OAAO;AAAAL,MAAAA,QAAA,eACnFH,cAAA,CAAA,MAAA,EAAA;AACES,QAAAA,QAAQ,EAAC,SAAS;AAClBC,QAAAA,CAAC,EAAC,wGAAA;OAEN,CAAA;KAAK,CAAA;AACP,GAAM,CAAC,CAAA;AAEX,CAAC,CAAA;AAEKC,MAAAA,OAAO,GAAGA,CAAC;EACfC,WAAW,GAAGC,iBAAQ,CAACC,MAAM;QAC7BC,MAAI,GAAGrB,SAAI,CAACE,KAAK;AACjBoB,EAAAA,QAAQ,GAAG,KAAK;AAChBjB,EAAAA,SAAAA;AACa,CAAA,KAAI;AACjB,EAAA,MAAMkB,cAAc,GAAGhB,SAAI,CAAC,YAAY,EAAE;AAAE,IAAA,eAAe,EAAE,CAACe,QAAAA;AAAU,GAAA,EAAEJ,WAAW,EAAEb,SAAS,CAAC,CAAA;AAEjG,EAAA,IAAIgB,MAAI,KAAKrB,SAAI,CAACC,WAAW,EAAE;IAC7B,oBAAOK,cAAA,CAACF,iBAAiB,EAAA;AAACC,MAAAA,SAAS,EAAEkB,cAAAA;AAAe,KAAA,CAAG,CAAA;AACzD,GAAA;AAEA,EAAA,MAAMC,SAAS,GAAGzB,cAAc,CAACsB,MAAI,CAAa,CAAA;EAElD,oBAAOf,cAAA,CAACmB,eAAS,EAAA;AAACpB,IAAAA,SAAS,EAAEkB,cAAe;AAACF,IAAAA,IAAI,EAAEG,SAAAA;AAAU,IAAG,CAAA;AAClE;;;;"}
|
package/build/chips/Chip.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var componentsTheming = require('@wise/components-theming');
|
|
4
6
|
var clsx = require('clsx');
|
|
5
7
|
var React = require('react');
|
|
@@ -62,7 +64,7 @@ const Chip = ({
|
|
|
62
64
|
onClick,
|
|
63
65
|
onKeyPress
|
|
64
66
|
}),
|
|
65
|
-
children: [isModern ? /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
67
|
+
children: [isModern ? /*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
66
68
|
"aria-hidden": !!onRemove,
|
|
67
69
|
type: typography.Typography.BODY_DEFAULT_BOLD,
|
|
68
70
|
children: label
|
|
@@ -81,5 +83,5 @@ const Chip = ({
|
|
|
81
83
|
}, value);
|
|
82
84
|
};
|
|
83
85
|
|
|
84
|
-
|
|
86
|
+
exports.default = Chip;
|
|
85
87
|
//# sourceMappingURL=Chip.js.map
|
package/build/chips/Chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n value?: ChipValue;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n closeButton?: AriaLabelProperty;\n 'aria-checked'?: boolean;\n role?: string;\n} & AriaLabelProperty &\n CommonProps;\n\nconst Chip = ({\n label,\n value,\n onRemove,\n onClick,\n onKeyPress,\n className = undefined,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n role,\n closeButton,\n}: Props) => {\n const isActionable = onClick || onKeyPress;\n const defaultRole = isActionable ? 'button' : undefined;\n const tabIndex = isActionable ? 0 : -1;\n\n const { isModern } = useTheme();\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n useEffect(() => {\n if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n closeButtonReference.current?.focus();\n }\n previousCloseButtonShown.current = closeButtonReference.current != null;\n }, [onRemove]);\n\n return (\n <div\n key={value}\n role={role ?? defaultRole}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n aria-checked={ariaChecked}\n className={clsx(\n 'np-chip',\n 'd-flex',\n 'align-items-center',\n 'justify-content-between',\n onRemove ? 'np-chip--removable' : '',\n className,\n )}\n {...(isActionable && { onClick, onKeyPress })}\n >\n {isModern ? (\n <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n {label}\n </Body>\n ) : (\n <span aria-hidden=\"false\" className=\"np-chip-label\">\n {label}\n </span>\n )}\n {onRemove ? (\n <CloseButton\n ref={closeButtonReference}\n className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n aria-label={closeButton?.['aria-label']}\n size=\"sm\"\n filled={isModern}\n onClick={onRemove}\n />\n ) : null}\n </div>\n );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Chip.js","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n value?: ChipValue;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n closeButton?: AriaLabelProperty;\n 'aria-checked'?: boolean;\n role?: string;\n} & AriaLabelProperty &\n CommonProps;\n\nconst Chip = ({\n label,\n value,\n onRemove,\n onClick,\n onKeyPress,\n className = undefined,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n role,\n closeButton,\n}: Props) => {\n const isActionable = onClick || onKeyPress;\n const defaultRole = isActionable ? 'button' : undefined;\n const tabIndex = isActionable ? 0 : -1;\n\n const { isModern } = useTheme();\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n useEffect(() => {\n if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n closeButtonReference.current?.focus();\n }\n previousCloseButtonShown.current = closeButtonReference.current != null;\n }, [onRemove]);\n\n return (\n <div\n key={value}\n role={role ?? defaultRole}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n aria-checked={ariaChecked}\n className={clsx(\n 'np-chip',\n 'd-flex',\n 'align-items-center',\n 'justify-content-between',\n onRemove ? 'np-chip--removable' : '',\n className,\n )}\n {...(isActionable && { onClick, onKeyPress })}\n >\n {isModern ? (\n <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n {label}\n </Body>\n ) : (\n <span aria-hidden=\"false\" className=\"np-chip-label\">\n {label}\n </span>\n )}\n {onRemove ? (\n <CloseButton\n ref={closeButtonReference}\n className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n aria-label={closeButton?.['aria-label']}\n size=\"sm\"\n filled={isModern}\n onClick={onRemove}\n />\n ) : null}\n </div>\n );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA,WAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU,CAAA;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS,CAAA;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;EAEtC,MAAM;AAAEG,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAE/B,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC,CAAA;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBX,SAAS,CAAC,CAAA;AACvEa,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE,CAAA;AACvC,KAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI,CAAA;AACzE,GAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEoB,eAAA,CAAA,KAAA,EAAA;IAEEb,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEkB,SAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBrB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA,UAAAA;KAAY,CAAA;AAAAoB,IAAAA,QAAA,EAE3CV,CAAAA,QAAQ,gBACPW,cAAA,CAACC,YAAI,EAAA;MAAC,aAAa,EAAA,CAAC,CAACxB,QAAS;MAACyB,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DxB,KAAAA;KACG,CAAC,gBAEPyB,cAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,OAAO;AAACpB,MAAAA,SAAS,EAAC,eAAe;AAAAmB,MAAAA,QAAA,EAChDxB,KAAAA;AAAK,KACF,CACP,EACAE,QAAQ,gBACPuB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAES,QAAQ,GAAG,CAAA,YAAA,CAAc,GAAG,CAAqB,kBAAA,CAAA;MAC5D,YAAYJ,EAAAA,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;AACTC,MAAAA,MAAM,EAAEnB,QAAS;AACjBX,MAAAA,OAAO,EAAED,QAAAA;KACT,CAAA,GACA,IAAI,CAAA;AAAA,GAAA,EAjCHD,KAkCF,CAAC,CAAA;AAEV;;;;"}
|
package/build/chips/Chips.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var clsx = require('clsx');
|
|
4
6
|
var reactIntl = require('react-intl');
|
|
5
7
|
var Chip = require('./Chip.js');
|
|
@@ -28,13 +30,13 @@ const Chips = ({
|
|
|
28
30
|
role: !multiple ? 'radiogroup' : 'group',
|
|
29
31
|
children: chips.map(chip => {
|
|
30
32
|
const chipSelected = isSelected(chip.value);
|
|
31
|
-
return /*#__PURE__*/jsxRuntime.jsx(Chip, {
|
|
33
|
+
return /*#__PURE__*/jsxRuntime.jsx(Chip.default, {
|
|
32
34
|
role: !multiple ? 'radio' : 'checkbox',
|
|
33
35
|
"aria-checked": chipSelected,
|
|
34
36
|
value: chip.value,
|
|
35
37
|
label: chip.label,
|
|
36
38
|
closeButton: {
|
|
37
|
-
'aria-label': intl.formatMessage(Chips_messages.ariaLabel, {
|
|
39
|
+
'aria-label': intl.formatMessage(Chips_messages.default.ariaLabel, {
|
|
38
40
|
choice: chip.label
|
|
39
41
|
})
|
|
40
42
|
},
|
|
@@ -53,5 +55,5 @@ const Chips = ({
|
|
|
53
55
|
});
|
|
54
56
|
};
|
|
55
57
|
|
|
56
|
-
|
|
58
|
+
exports.default = Chips;
|
|
57
59
|
//# sourceMappingURL=Chips.js.map
|
package/build/chips/Chips.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chips.js","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n value: ChipValue;\n label: string;\n};\n\nexport type ChipsProps = CommonProps &\n AriaLabelProperty & {\n /** List of chips with string labels and string/number values */\n chips: readonly Chip[];\n /** Callback which is invoked when a chip is selected or deselected */\n onChange: ({\n isEnabled,\n selectedValue,\n }: {\n isEnabled: boolean;\n selectedValue: ChipValue;\n }) => void;\n /** Used to manage which chips are selected */\n selected: ChipValue | readonly ChipValue[];\n /** Used to activate multi-selection */\n multiple?: boolean;\n };\n\nconst Chips = ({\n chips,\n onChange,\n selected,\n 'aria-label': ariaLabel,\n className,\n multiple,\n}: ChipsProps) => {\n const intl = useIntl();\n\n const isSelected = (value: ChipValue) =>\n Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n };\n\n return (\n <div\n className={clsx('np-chips d-flex', className)}\n aria-label={ariaLabel}\n role={!multiple ? 'radiogroup' : 'group'}\n >\n {chips.map((chip) => {\n const chipSelected = isSelected(chip.value);\n return (\n <Chip\n key={chip.value}\n role={!multiple ? 'radio' : 'checkbox'}\n aria-checked={chipSelected}\n value={chip.value}\n label={chip.label}\n closeButton={{\n 'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n }}\n className={clsx('text-xs-nowrap', {\n 'np-chip--selected': chipSelected,\n 'p-r-1': multiple && chipSelected,\n })}\n {...(multiple && chipSelected\n ? {\n onRemove: () => handleOnChange(chip.value, chipSelected),\n }\n : {\n onClick: () => handleOnChange(chip.value, chipSelected),\n onKeyPress: () => handleOnChange(chip.value, chipSelected),\n })}\n />\n );\n })}\n </div>\n );\n};\n\nexport default Chips;\n"],"names":["Chips","chips","onChange","selected","ariaLabel","className","multiple","intl","useIntl","isSelected","value","Array","isArray","includes","handleOnChange","selectedValue","isCurrentlyEnabled","isEnabled","_jsx","clsx","role","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Chips.js","sources":["../../src/chips/Chips.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { CommonProps, AriaLabelProperty } from '../common';\n\nimport Chip from './Chip';\nimport messages from './Chips.messages';\n\nexport type ChipValue = string | number;\n\nexport type Chip = {\n value: ChipValue;\n label: string;\n};\n\nexport type ChipsProps = CommonProps &\n AriaLabelProperty & {\n /** List of chips with string labels and string/number values */\n chips: readonly Chip[];\n /** Callback which is invoked when a chip is selected or deselected */\n onChange: ({\n isEnabled,\n selectedValue,\n }: {\n isEnabled: boolean;\n selectedValue: ChipValue;\n }) => void;\n /** Used to manage which chips are selected */\n selected: ChipValue | readonly ChipValue[];\n /** Used to activate multi-selection */\n multiple?: boolean;\n };\n\nconst Chips = ({\n chips,\n onChange,\n selected,\n 'aria-label': ariaLabel,\n className,\n multiple,\n}: ChipsProps) => {\n const intl = useIntl();\n\n const isSelected = (value: ChipValue) =>\n Array.isArray(selected) ? selected.includes(value) : selected === value;\n\n const handleOnChange = (selectedValue: ChipValue, isCurrentlyEnabled: boolean) => {\n onChange({ isEnabled: !isCurrentlyEnabled, selectedValue });\n };\n\n return (\n <div\n className={clsx('np-chips d-flex', className)}\n aria-label={ariaLabel}\n role={!multiple ? 'radiogroup' : 'group'}\n >\n {chips.map((chip) => {\n const chipSelected = isSelected(chip.value);\n return (\n <Chip\n key={chip.value}\n role={!multiple ? 'radio' : 'checkbox'}\n aria-checked={chipSelected}\n value={chip.value}\n label={chip.label}\n closeButton={{\n 'aria-label': intl.formatMessage(messages.ariaLabel, { choice: chip.label }),\n }}\n className={clsx('text-xs-nowrap', {\n 'np-chip--selected': chipSelected,\n 'p-r-1': multiple && chipSelected,\n })}\n {...(multiple && chipSelected\n ? {\n onRemove: () => handleOnChange(chip.value, chipSelected),\n }\n : {\n onClick: () => handleOnChange(chip.value, chipSelected),\n onKeyPress: () => handleOnChange(chip.value, chipSelected),\n })}\n />\n );\n })}\n </div>\n );\n};\n\nexport default Chips;\n"],"names":["Chips","chips","onChange","selected","ariaLabel","className","multiple","intl","useIntl","isSelected","value","Array","isArray","includes","handleOnChange","selectedValue","isCurrentlyEnabled","isEnabled","_jsx","clsx","role","children","map","chip","chipSelected","Chip","label","closeButton","formatMessage","messages","choice","onRemove","onClick","onKeyPress"],"mappings":";;;;;;;;;;AAiCMA,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;AACR,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;AACTC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EAEtB,MAAMC,UAAU,GAAIC,KAAgB,IAClCC,KAAK,CAACC,OAAO,CAACT,QAAQ,CAAC,GAAGA,QAAQ,CAACU,QAAQ,CAACH,KAAK,CAAC,GAAGP,QAAQ,KAAKO,KAAK,CAAA;AAEzE,EAAA,MAAMI,cAAc,GAAGA,CAACC,aAAwB,EAAEC,kBAA2B,KAAI;AAC/Ed,IAAAA,QAAQ,CAAC;MAAEe,SAAS,EAAE,CAACD,kBAAkB;AAAED,MAAAA,aAAAA;AAAe,KAAA,CAAC,CAAA;GAC5D,CAAA;AAED,EAAA,oBACEG,cAAA,CAAA,KAAA,EAAA;AACEb,IAAAA,SAAS,EAAEc,SAAI,CAAC,iBAAiB,EAAEd,SAAS,CAAE;AAC9C,IAAA,YAAA,EAAYD,SAAU;AACtBgB,IAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,YAAY,GAAG,OAAQ;AAAAe,IAAAA,QAAA,EAExCpB,KAAK,CAACqB,GAAG,CAAEC,IAAI,IAAI;AAClB,MAAA,MAAMC,YAAY,GAAGf,UAAU,CAACc,IAAI,CAACb,KAAK,CAAC,CAAA;MAC3C,oBACEQ,cAAA,CAACO,YAAI,EAAA;AAEHL,QAAAA,IAAI,EAAE,CAACd,QAAQ,GAAG,OAAO,GAAG,UAAW;AACvC,QAAA,cAAA,EAAckB,YAAa;QAC3Bd,KAAK,EAAEa,IAAI,CAACb,KAAM;QAClBgB,KAAK,EAAEH,IAAI,CAACG,KAAM;AAClBC,QAAAA,WAAW,EAAE;UACX,YAAY,EAAEpB,IAAI,CAACqB,aAAa,CAACC,sBAAQ,CAACzB,SAAS,EAAE;YAAE0B,MAAM,EAAEP,IAAI,CAACG,KAAAA;WAAO,CAAA;SAC3E;AACFrB,QAAAA,SAAS,EAAEc,SAAI,CAAC,gBAAgB,EAAE;AAChC,UAAA,mBAAmB,EAAEK,YAAY;UACjC,OAAO,EAAElB,QAAQ,IAAIkB,YAAAA;AACtB,SAAA,CAAE;QAAA,IACElB,QAAQ,IAAIkB,YAAY,GACzB;UACEO,QAAQ,EAAEA,MAAMjB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY,CAAA;AACxD,SAAA,GACD;UACEQ,OAAO,EAAEA,MAAMlB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY,CAAC;UACvDS,UAAU,EAAEA,MAAMnB,cAAc,CAACS,IAAI,CAACb,KAAK,EAAEc,YAAY,CAAA;SAC1D,CAAA;OAnBAD,EAAAA,IAAI,CAACb,KAoBV,CAAA,CAAA;KAEL,CAAA;AAAC,GACC,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var reactIntl = require('react-intl');
|
|
4
6
|
|
|
5
7
|
var messages = reactIntl.defineMessages({
|
|
@@ -8,5 +10,5 @@ var messages = reactIntl.defineMessages({
|
|
|
8
10
|
}
|
|
9
11
|
});
|
|
10
12
|
|
|
11
|
-
|
|
13
|
+
exports.default = messages;
|
|
12
14
|
//# sourceMappingURL=Chips.messages.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chips.messages.js","sources":["../../src/chips/Chips.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n ariaLabel: {\n id: 'neptune.Chips.ariaLabel',\n defaultMessage: 'Clear {choice}',\n description: 'Clear button for chip',\n },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Chips.messages.js","sources":["../../src/chips/Chips.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n ariaLabel: {\n id: 'neptune.Chips.ariaLabel',\n defaultMessage: 'Clear {choice}',\n description: 'Clear button for chip',\n },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA,yBAAA;AAGH,GAAA;AACF,CAAA,CAAC;;;;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var clsx = require('clsx');
|
|
4
6
|
var Body = require('../body/Body.js');
|
|
5
7
|
require('../common/theme.js');
|
|
@@ -43,7 +45,7 @@ const CircularButton = ({
|
|
|
43
45
|
className: clsx.clsx('np-circular-btn', `np-circular-btn-${priority}-${type}`, {
|
|
44
46
|
'np-circular-btn-disabled': disabled
|
|
45
47
|
}, className),
|
|
46
|
-
children: [/*#__PURE__*/jsxRuntime.jsx(IconButton, {
|
|
48
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
|
|
47
49
|
size: isTinyViewport ? 32 : 56,
|
|
48
50
|
priority: priority,
|
|
49
51
|
type: ['accent', 'positive'].includes(type) ? 'default' : type,
|
|
@@ -51,7 +53,7 @@ const CircularButton = ({
|
|
|
51
53
|
disabled: disabled,
|
|
52
54
|
onClick: onClick,
|
|
53
55
|
children: icon
|
|
54
|
-
}), /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
56
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
55
57
|
as: "span",
|
|
56
58
|
className: clsx.clsx('np-circular-btn-label', {
|
|
57
59
|
disabled
|
|
@@ -62,5 +64,5 @@ const CircularButton = ({
|
|
|
62
64
|
});
|
|
63
65
|
};
|
|
64
66
|
|
|
65
|
-
|
|
67
|
+
exports.default = CircularButton;
|
|
66
68
|
//# sourceMappingURL=CircularButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport IconButton, { IconButtonProps } from '../iconButton';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated use `'default'` instead\n */\ntype DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;\n\nexport interface CircularButtonProps {\n className?: string;\n children: string;\n disabled?: boolean;\n icon: React.ReactElement<{ size?: unknown }> | React.ReactNode;\n onClick?: React.MouseEventHandler<HTMLInputElement> &\n React.MouseEventHandler<HTMLButtonElement> &\n React.MouseEventHandler<HTMLAnchorElement>;\n priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n /**\n * `\"accent\"` and `\"positive\"` values are **deprecated**, please use `\"default\"` instead\n */\n type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n className,\n children,\n disabled,\n icon,\n onClick,\n priority = Priority.PRIMARY,\n type = 'default',\n}: CircularButtonProps) => {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <label\n className={clsx(\n 'np-circular-btn',\n `np-circular-btn-${priority}-${type}`,\n { 'np-circular-btn-disabled': disabled },\n className,\n )}\n >\n <IconButton\n size={isTinyViewport ? 32 : 56}\n priority={priority}\n type={['accent', 'positive'].includes(type) ? 'default' : (type as IconButtonProps['type'])}\n className={clsx('m-b-1')}\n disabled={disabled}\n onClick={onClick}\n >\n {icon}\n </IconButton>\n <Body\n as=\"span\"\n className={clsx('np-circular-btn-label', { disabled })}\n type={Typography.BODY_DEFAULT_BOLD}\n >\n {children}\n </Body>\n </label>\n );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","onClick","priority","Priority","PRIMARY","type","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","clsx","_jsx","IconButton","size","includes","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport IconButton, { IconButtonProps } from '../iconButton';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated use `'default'` instead\n */\ntype DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;\n\nexport interface CircularButtonProps {\n className?: string;\n children: string;\n disabled?: boolean;\n icon: React.ReactElement<{ size?: unknown }> | React.ReactNode;\n onClick?: React.MouseEventHandler<HTMLInputElement> &\n React.MouseEventHandler<HTMLButtonElement> &\n React.MouseEventHandler<HTMLAnchorElement>;\n priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n /**\n * `\"accent\"` and `\"positive\"` values are **deprecated**, please use `\"default\"` instead\n */\n type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n className,\n children,\n disabled,\n icon,\n onClick,\n priority = Priority.PRIMARY,\n type = 'default',\n}: CircularButtonProps) => {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <label\n className={clsx(\n 'np-circular-btn',\n `np-circular-btn-${priority}-${type}`,\n { 'np-circular-btn-disabled': disabled },\n className,\n )}\n >\n <IconButton\n size={isTinyViewport ? 32 : 56}\n priority={priority}\n type={['accent', 'positive'].includes(type) ? 'default' : (type as IconButtonProps['type'])}\n className={clsx('m-b-1')}\n disabled={disabled}\n onClick={onClick}\n >\n {icon}\n </IconButton>\n <Body\n as=\"span\"\n className={clsx('np-circular-btn-label', { disabled })}\n type={Typography.BODY_DEFAULT_BOLD}\n >\n {children}\n </Body>\n </label>\n );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","onClick","priority","Priority","PRIMARY","type","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","clsx","_jsx","IconButton","size","includes","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,OAAO;EACPC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;AAC3BC,EAAAA,IAAI,GAAG,SAAA;AACa,CAAA,KAAI;EACxB,MAAMC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,oBACEC,eAAA,CAAA,OAAA,EAAA;IACEb,SAAS,EAAEc,SAAI,CACb,iBAAiB,EACjB,mBAAmBT,QAAQ,CAAA,CAAA,EAAIG,IAAI,CAAA,CAAE,EACrC;AAAE,MAAA,0BAA0B,EAAEN,QAAAA;KAAU,EACxCF,SAAS,CACT;IAAAC,QAAA,EAAA,cAEFc,cAAA,CAACC,kBAAU,EAAA;AACTC,MAAAA,IAAI,EAAER,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/BJ,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAACU,QAAQ,CAACV,IAAI,CAAC,GAAG,SAAS,GAAIA,IAAiC;AAC5FR,MAAAA,SAAS,EAAEc,SAAI,CAAC,OAAO,CAAE;AACzBZ,MAAAA,QAAQ,EAAEA,QAAS;AACnBE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAEhBE,IAAAA;AAAI,KACK,CACZ,eAAAY,cAAA,CAACI,YAAI,EAAA;AACHC,MAAAA,EAAE,EAAC,MAAM;AACTpB,MAAAA,SAAS,EAAEc,SAAI,CAAC,uBAAuB,EAAE;AAAEZ,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MACvDM,IAAI,EAAEa,qBAAU,CAACC,iBAAkB;AAAArB,MAAAA,QAAA,EAElCA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var clsx = require('clsx');
|
|
4
6
|
var React = require('react');
|
|
5
7
|
var Body = require('../../body/Body.js');
|
|
@@ -50,7 +52,7 @@ const Option = /*#__PURE__*/React.forwardRef(({
|
|
|
50
52
|
})
|
|
51
53
|
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
52
54
|
className: "media-body",
|
|
53
|
-
children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
55
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
54
56
|
type: "body-large-bold"
|
|
55
57
|
// for a11y this needs to be a header but for SEO it shouldn't be `h*` tag
|
|
56
58
|
// so we enable header semantics via `role` and `aria-level` attrs
|
|
@@ -59,7 +61,7 @@ const Option = /*#__PURE__*/React.forwardRef(({
|
|
|
59
61
|
"aria-level": "4",
|
|
60
62
|
className: "text-primary np-option__title",
|
|
61
63
|
children: title
|
|
62
|
-
}), content && /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
64
|
+
}), content && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
63
65
|
className: "d-block np-option__body",
|
|
64
66
|
children: content
|
|
65
67
|
})]
|
|
@@ -67,12 +69,12 @@ const Option = /*#__PURE__*/React.forwardRef(({
|
|
|
67
69
|
className: "media-right",
|
|
68
70
|
children: button
|
|
69
71
|
})]
|
|
70
|
-
}), additionalContent ? /*#__PURE__*/jsxRuntime.
|
|
72
|
+
}), additionalContent ? /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
71
73
|
className: "np-option-additional-content",
|
|
72
|
-
children:
|
|
74
|
+
children: additionalContent
|
|
73
75
|
}) : null]
|
|
74
76
|
});
|
|
75
77
|
});
|
|
76
78
|
|
|
77
|
-
|
|
79
|
+
exports.default = Option;
|
|
78
80
|
//# sourceMappingURL=Option.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.js","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {\n 'aria-label'?: string;\n 'aria-expanded'?: boolean;\n 'aria-controls'?: string;\n media?: ReactNode;\n name?: string;\n htmlFor?: string;\n title: ReactNode;\n content?: ReactNode;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n as?: ElementType;\n disabled?: boolean;\n button?: ReactNode;\n decision?: boolean;\n complex?: boolean;\n inverseMediaCircle?: boolean;\n className?: string;\n showMediaAtAllSizes?: boolean;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n additionalContent?: ReactNode;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps | AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement | HTMLAnchorElement;\n\nconst Option = forwardRef<ReferenceType, OptionProps>(\n (\n {\n media = '',\n title,\n content,\n as: component,\n button,\n decision = true,\n disabled = false,\n complex,\n inverseMediaCircle = true,\n className,\n showMediaAtAllSizes,\n showMediaCircle = true,\n isContainerAligned = false,\n additionalContent,\n ...rest\n },\n reference,\n ) => {\n const Element = component ?? 'label';\n\n return (\n <Element\n {...rest}\n ref={reference}\n className={clsx('np-option', className, {\n 'decision-complex': complex,\n decision,\n disabled,\n 'np-option__sm-media': showMediaAtAllSizes,\n 'np-option__container-aligned': isContainerAligned,\n })}\n disabled={disabled && Element === 'button'}\n >\n <div className={clsx('media')}>\n {media && (\n <div className=\"media-left\">\n {showMediaCircle ? (\n <div\n className={clsx('circle circle-sm text-primary', {\n 'circle-inverse': inverseMediaCircle,\n })}\n >\n {media}\n </div>\n ) : (\n <div className=\"np-option__no-media-circle\">{media}</div>\n )}\n </div>\n )}\n <div className=\"media-body\">\n {/* @ts-expect-error div can have role and aria-lavel props */}\n <Body\n type=\"body-large-bold\"\n // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag\n // so we enable header semantics via `role` and `aria-level` attrs\n role=\"heading\"\n aria-level=\"4\"\n className=\"text-primary np-option__title\"\n >\n {title}\n </Body>\n {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n </div>\n <div className=\"media-right\">{button}</div>\n </div>\n {additionalContent ? (\n <div className=\"np-option-additional-content\">
|
|
1
|
+
{"version":3,"file":"Option.js","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {\n 'aria-label'?: string;\n 'aria-expanded'?: boolean;\n 'aria-controls'?: string;\n media?: ReactNode;\n name?: string;\n htmlFor?: string;\n title: ReactNode;\n content?: ReactNode;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n as?: ElementType;\n disabled?: boolean;\n button?: ReactNode;\n decision?: boolean;\n complex?: boolean;\n inverseMediaCircle?: boolean;\n className?: string;\n showMediaAtAllSizes?: boolean;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n additionalContent?: ReactNode;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps | AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement | HTMLAnchorElement;\n\nconst Option = forwardRef<ReferenceType, OptionProps>(\n (\n {\n media = '',\n title,\n content,\n as: component,\n button,\n decision = true,\n disabled = false,\n complex,\n inverseMediaCircle = true,\n className,\n showMediaAtAllSizes,\n showMediaCircle = true,\n isContainerAligned = false,\n additionalContent,\n ...rest\n },\n reference,\n ) => {\n const Element = component ?? 'label';\n\n return (\n <Element\n {...rest}\n ref={reference}\n className={clsx('np-option', className, {\n 'decision-complex': complex,\n decision,\n disabled,\n 'np-option__sm-media': showMediaAtAllSizes,\n 'np-option__container-aligned': isContainerAligned,\n })}\n disabled={disabled && Element === 'button'}\n >\n <div className={clsx('media')}>\n {media && (\n <div className=\"media-left\">\n {showMediaCircle ? (\n <div\n className={clsx('circle circle-sm text-primary', {\n 'circle-inverse': inverseMediaCircle,\n })}\n >\n {media}\n </div>\n ) : (\n <div className=\"np-option__no-media-circle\">{media}</div>\n )}\n </div>\n )}\n <div className=\"media-body\">\n {/* @ts-expect-error div can have role and aria-lavel props */}\n <Body\n type=\"body-large-bold\"\n // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag\n // so we enable header semantics via `role` and `aria-level` attrs\n role=\"heading\"\n aria-level=\"4\"\n className=\"text-primary np-option__title\"\n >\n {title}\n </Body>\n {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n </div>\n <div className=\"media-right\">{button}</div>\n </div>\n {additionalContent ? (\n <div className=\"np-option-additional-content\">{additionalContent}</div>\n ) : null}\n </Element>\n );\n },\n);\n\nexport default Option;\n"],"names":["Option","forwardRef","media","title","content","as","component","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","additionalContent","rest","reference","Element","_jsxs","ref","clsx","children","_jsx","Body","type","role"],"mappings":";;;;;;;;;AAAA;AAsCA,MAAMA,MAAM,gBAAGC,gBAAU,CACvB,CACE;AACEC,EAAAA,KAAK,GAAG,EAAE;EACVC,KAAK;EACLC,OAAO;AACPC,EAAAA,EAAE,EAAEC,SAAS;EACbC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPC,EAAAA,kBAAkB,GAAG,IAAI;EACzBC,SAAS;EACTC,mBAAmB;AACnBC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,kBAAkB,GAAG,KAAK;EAC1BC,iBAAiB;EACjB,GAAGC,IAAAA;AACJ,CAAA,EACDC,SAAS,KACP;AACF,EAAA,MAAMC,OAAO,GAAGb,SAAS,IAAI,OAAO,CAAA;EAEpC,oBACEc,eAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFF,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfN,IAAAA,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAEV,SAAS,EAAE;AACtC,MAAA,kBAAkB,EAAEF,OAAO;MAC3BF,QAAQ;MACRC,QAAQ;AACR,MAAA,qBAAqB,EAAEI,mBAAmB;AAC1C,MAAA,8BAA8B,EAAEE,kBAAAA;KACjC,CAAE;AACHN,IAAAA,QAAQ,EAAEA,QAAQ,IAAIU,OAAO,KAAK,QAAS;AAAAI,IAAAA,QAAA,gBAE3CH,eAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAEU,SAAI,CAAC,OAAO,CAAE;MAAAC,QAAA,EAAA,CAC3BrB,KAAK,iBACJsB,cAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EACxBT,eAAe,gBACdU,cAAA,CAAA,KAAA,EAAA;AACEZ,UAAAA,SAAS,EAAEU,SAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,gBAAgB,EAAEX,kBAAAA;AACnB,WAAA,CAAE;AAAAY,UAAAA,QAAA,EAEFrB,KAAAA;SACE,CAAC,gBAENsB,cAAA,CAAA,KAAA,EAAA;AAAKZ,UAAAA,SAAS,EAAC,4BAA4B;AAAAW,UAAAA,QAAA,EAAErB,KAAAA;SAAW,CAAA;OAEvD,CACN,eACDkB,eAAA,CAAA,KAAA,EAAA;AAAKR,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EAAA,cAEzBC,cAAA,CAACC,YAAI,EAAA;AACHC,UAAAA,IAAI,EAAC,iBAAA;AACL;AACA;AAAA;AACAC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAW,GAAG;AACdf,UAAAA,SAAS,EAAC,+BAA+B;AAAAW,UAAAA,QAAA,EAExCpB,KAAAA;AAAK,SACF,CACN,EAACC,OAAO,iBAAIoB,cAAA,CAACC,YAAI,EAAA;AAACb,UAAAA,SAAS,EAAC,yBAAyB;AAAAW,UAAAA,QAAA,EAAEnB,OAAAA;AAAO,SAAO,CAAC,CAAA;OACnE,CACL,eAAAoB,cAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,aAAa;AAAAW,QAAAA,QAAA,EAAEhB,MAAAA;AAAM,OAAM,CAC5C,CAAA;AAAA,KAAK,CACL,EAACS,iBAAiB,gBAChBQ,cAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,8BAA8B;AAAAW,MAAAA,QAAA,EAAEP,iBAAAA;KAAuB,CAAC,GACrE,IAAI,CAAA;AAAA,GACD,CAAC,CAAA;AAEd,CAAC;;;;"}
|