@transferwise/components 46.94.1 → 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 +33 -26
- package/build/dateLookup/dateHeader/DateHeader.js.map +1 -1
- package/build/dateLookup/dateHeader/DateHeader.mjs +27 -22
- package/build/dateLookup/dateHeader/DateHeader.mjs.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/nl.json +73 -0
- 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 +27 -8
- 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/button/Button.css +2 -2
- package/build/styles/common/Option/Option.css +1 -1
- package/build/styles/dateLookup/DateLookup.css +0 -5
- package/build/styles/divider/Divider.css +24 -0
- package/build/styles/main.css +27 -8
- 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/dateLookup/dateHeader/DateHeader.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/types/upload/Upload.d.ts.map +1 -1
- package/build/upload/Upload.js +20 -18
- 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/Upload.mjs +3 -1
- package/build/upload/Upload.mjs.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 +10 -11
- package/src/badge/Badge.tsx +1 -1
- package/src/badge/BadgeAssets.tsx +2 -2
- package/src/button/Button.css +2 -2
- package/src/button/Button.less +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/dateLookup/DateLookup.css +0 -5
- package/src/dateLookup/DateLookup.less +0 -4
- package/src/dateLookup/dateHeader/DateHeader.tsx +24 -26
- 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/i18n/nl.json +73 -0
- package/src/index.ts +2 -0
- package/src/main.css +27 -8
- package/src/main.less +1 -0
- package/src/upload/Upload.spec.tsx +293 -0
- package/src/upload/Upload.tsx +5 -1
- package/src/upload/steps/completeStep/completeStep.spec.tsx +51 -0
- package/src/upload/steps/completeStep/completeStep.tsx +1 -1
- package/src/upload/steps/processingStep/processingStep.spec.tsx +59 -0
- package/src/upload/steps/uploadImageStep/uploadImageStep.spec.tsx +79 -0
- package/src/upload/Upload.events.spec.js +0 -49
- package/src/upload/Upload.spec.js +0 -305
- package/src/upload/steps/completeStep/completeStep.spec.js +0 -51
- package/src/upload/steps/processingStep/processingStep.spec.js +0 -55
- package/src/upload/steps/uploadImageStep/uploadImageStep.spec.js +0 -91
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YearCalendarTable.js","sources":["../../../../src/dateLookup/yearCalendar/table/YearCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../getFocusableTime/getFocusableTime';\nimport TableLink from '../../tableLink';\n\ninterface YearCalendarTableProps {\n selectedDate: Date | null;\n min: Date | null;\n max: Date | null;\n viewYear: number;\n placeholder: string;\n onSelect: (year: number) => void;\n}\n\nconst ROWS = 5;\nconst COLS = 4;\nconst YEAR_ONLY_FORMAT: Intl.DateTimeFormatOptions = { year: 'numeric' };\n\nconst YearCalendarTable = ({\n selectedDate,\n min,\n max,\n viewYear,\n placeholder,\n onSelect,\n}: YearCalendarTableProps) => {\n const { locale } = useIntl();\n const startYear = viewYear - (viewYear % 20);\n const getLink = (year: number) => {\n return (\n <TableLink\n item={year}\n type=\"year\"\n title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}\n active={isActive(year)}\n disabled={isDisabled(year)}\n today={isThisYear(year)}\n autofocus={autofocusYear === year}\n onClick={onSelect}\n />\n );\n };\n\n const isActive = (year: number) => {\n return !!(selectedDate && year === selectedDate.getFullYear());\n };\n\n const isThisYear = (year: number) => {\n return year === new Date().getFullYear();\n };\n\n const isDisabled = (year: number) => {\n return !!((min && year < min.getFullYear()) || (max && year > max.getFullYear()));\n };\n\n const autofocusYear = (() => {\n const years = Array.from({ length: ROWS * COLS }, (_, index) => startYear + index);\n return getFocusableTime({ isActive, isNow: isThisYear, isDisabled, timeSpan: years });\n })();\n\n return (\n <table className=\"table table-condensed table-bordered tw-date-lookup-calendar m-b-0\">\n <thead className=\"sr-only\">\n <tr>\n <th colSpan={COLS}>{placeholder}</th>\n </tr>\n </thead>\n <tbody>\n {Array.from({ length: ROWS }, (_, rowIndex) => (\n <tr key={rowIndex}>\n {Array.from({ length: COLS }, (_, colIndex) => (\n <td key={colIndex}>{getLink(startYear + rowIndex * COLS + colIndex)}</td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n );\n};\n\nexport default YearCalendarTable;\n"],"names":["ROWS","COLS","YEAR_ONLY_FORMAT","year","YearCalendarTable","selectedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","startYear","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","disabled","isDisabled","today","isThisYear","autofocus","autofocusYear","onClick","getFullYear","years","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":"
|
|
1
|
+
{"version":3,"file":"YearCalendarTable.js","sources":["../../../../src/dateLookup/yearCalendar/table/YearCalendarTable.tsx"],"sourcesContent":["import { formatDate } from '@transferwise/formatting';\nimport { useIntl } from 'react-intl';\n\nimport { getFocusableTime } from '../../getFocusableTime/getFocusableTime';\nimport TableLink from '../../tableLink';\n\ninterface YearCalendarTableProps {\n selectedDate: Date | null;\n min: Date | null;\n max: Date | null;\n viewYear: number;\n placeholder: string;\n onSelect: (year: number) => void;\n}\n\nconst ROWS = 5;\nconst COLS = 4;\nconst YEAR_ONLY_FORMAT: Intl.DateTimeFormatOptions = { year: 'numeric' };\n\nconst YearCalendarTable = ({\n selectedDate,\n min,\n max,\n viewYear,\n placeholder,\n onSelect,\n}: YearCalendarTableProps) => {\n const { locale } = useIntl();\n const startYear = viewYear - (viewYear % 20);\n const getLink = (year: number) => {\n return (\n <TableLink\n item={year}\n type=\"year\"\n title={formatDate(new Date(year, 0), locale, YEAR_ONLY_FORMAT)}\n active={isActive(year)}\n disabled={isDisabled(year)}\n today={isThisYear(year)}\n autofocus={autofocusYear === year}\n onClick={onSelect}\n />\n );\n };\n\n const isActive = (year: number) => {\n return !!(selectedDate && year === selectedDate.getFullYear());\n };\n\n const isThisYear = (year: number) => {\n return year === new Date().getFullYear();\n };\n\n const isDisabled = (year: number) => {\n return !!((min && year < min.getFullYear()) || (max && year > max.getFullYear()));\n };\n\n const autofocusYear = (() => {\n const years = Array.from({ length: ROWS * COLS }, (_, index) => startYear + index);\n return getFocusableTime({ isActive, isNow: isThisYear, isDisabled, timeSpan: years });\n })();\n\n return (\n <table className=\"table table-condensed table-bordered tw-date-lookup-calendar m-b-0\">\n <thead className=\"sr-only\">\n <tr>\n <th colSpan={COLS}>{placeholder}</th>\n </tr>\n </thead>\n <tbody>\n {Array.from({ length: ROWS }, (_, rowIndex) => (\n <tr key={rowIndex}>\n {Array.from({ length: COLS }, (_, colIndex) => (\n <td key={colIndex}>{getLink(startYear + rowIndex * COLS + colIndex)}</td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n );\n};\n\nexport default YearCalendarTable;\n"],"names":["ROWS","COLS","YEAR_ONLY_FORMAT","year","YearCalendarTable","selectedDate","min","max","viewYear","placeholder","onSelect","locale","useIntl","startYear","getLink","_jsx","TableLink","item","type","title","formatDate","Date","active","isActive","disabled","isDisabled","today","isThisYear","autofocus","autofocusYear","onClick","getFullYear","years","Array","from","length","_","index","getFocusableTime","isNow","timeSpan","_jsxs","className","children","colSpan","rowIndex","colIndex"],"mappings":"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"}
|
|
@@ -63,7 +63,7 @@ const Decision = ({
|
|
|
63
63
|
list
|
|
64
64
|
},
|
|
65
65
|
onClick
|
|
66
|
-
}, key) => /*#__PURE__*/jsxRuntime.jsx(NavigationOption
|
|
66
|
+
}, key) => /*#__PURE__*/jsxRuntime.jsx(NavigationOption.default
|
|
67
67
|
// eslint-disable-next-line react/no-array-index-key
|
|
68
68
|
, {
|
|
69
69
|
"aria-label": ariaLabel,
|
|
@@ -99,7 +99,7 @@ const Decision = ({
|
|
|
99
99
|
},
|
|
100
100
|
onClick,
|
|
101
101
|
title
|
|
102
|
-
}, key) => /*#__PURE__*/jsxRuntime.jsx(Tile
|
|
102
|
+
}, key) => /*#__PURE__*/jsxRuntime.jsx(Tile.default
|
|
103
103
|
// eslint-disable-next-line react/no-array-index-key
|
|
104
104
|
, {
|
|
105
105
|
className: clsx.clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Decision.js","sources":["../../src/decision/Decision.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Size, Breakpoint, SizeSmall, SizeMedium } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport NavigationOption from '../navigationOption';\nimport Tile from '../tile';\n\ninterface DecisionOption {\n 'aria-label'?: string;\n description?: React.ReactNode;\n disabled?: boolean;\n href?: string;\n target?: React.HTMLAttributeAnchorTarget;\n media: {\n block: React.ReactNode;\n list: React.ReactNode;\n };\n onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n title: React.ReactNode;\n}\n\nexport enum DecisionPresentation {\n LIST = 'LIST',\n LIST_BLOCK = 'LIST_BLOCK',\n LIST_BLOCK_GRID = 'LIST_BLOCK_GRID',\n}\n\nexport enum DecisionType {\n NAVIGATION = 'NAVIGATION',\n}\n\nexport interface DecisionProps {\n /** A list of elements to be rendered */\n options: readonly DecisionOption[];\n /** Handles the display mode of the component */\n presentation?: `${DecisionPresentation}`;\n /** Size currently affects only Tile dimension */\n size?: SizeSmall | SizeMedium;\n /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */\n type?: `${DecisionType}`;\n\n /** Display media in a circle in list presentation */\n showMediaCircleInList?: boolean;\n\n /** Sets navigation options to be aligned with the parent container */\n isContainerAligned?: boolean;\n}\n\nconst Decision = ({\n options,\n presentation = DecisionPresentation.LIST,\n size = Size.MEDIUM,\n type = DecisionType.NAVIGATION,\n showMediaCircleInList = true,\n isContainerAligned = false,\n}: DecisionProps) => {\n const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n const screenSm = useScreenSize(Breakpoint.SMALL);\n\n if (type === DecisionType.NAVIGATION) {\n const renderedOptions = options.map(\n (\n {\n 'aria-label': ariaLabel,\n title,\n description,\n disabled,\n href,\n target,\n media: { list },\n onClick,\n },\n key,\n ) => (\n <NavigationOption\n // eslint-disable-next-line react/no-array-index-key\n key={`nav-${key}`}\n aria-label={ariaLabel}\n complex={false}\n content={description}\n disabled={disabled}\n href={href}\n target={target}\n media={list}\n showMediaAtAllSizes\n showMediaCircle={showMediaCircleInList}\n isContainerAligned={isContainerAligned}\n title={title}\n onClick={onClick}\n />\n ),\n );\n\n if (\n presentation === DecisionPresentation.LIST_BLOCK ||\n presentation === DecisionPresentation.LIST_BLOCK_GRID\n ) {\n const isSmall = size === Size.SMALL;\n const breakpoint = isSmall ? screenXs : screenSm;\n\n const isGrid = presentation === DecisionPresentation.LIST_BLOCK_GRID;\n\n return (\n <div\n className={clsx(\n 'np-decision d-flex',\n {\n 'np-decision--small': isSmall,\n 'np-decision--grid': isGrid,\n },\n breakpoint ? isGrid && 'flex-wrap' : 'flex-column',\n )}\n >\n {breakpoint\n ? options.map(\n (\n {\n 'aria-label': ariaLabel,\n description,\n disabled,\n href,\n target,\n media: { block },\n onClick,\n title,\n },\n key,\n ) => (\n <Tile\n // eslint-disable-next-line react/no-array-index-key\n key={`tile-${key}`}\n className={clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {\n 'np-decision__tile--fixed-width': isGrid,\n })}\n aria-label={ariaLabel}\n description={description}\n disabled={disabled}\n href={href}\n target={target}\n media={block}\n size={isSmall ? Size.SMALL : Size.MEDIUM}\n title={title}\n onClick={onClick}\n />\n ),\n )\n : renderedOptions}\n </div>\n );\n }\n // LIST\n return <>{renderedOptions}</>;\n }\n return null;\n};\n\nexport default Decision;\n"],"names":["DecisionPresentation","DecisionType","Decision","options","presentation","LIST","size","Size","MEDIUM","type","NAVIGATION","showMediaCircleInList","isContainerAligned","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","renderedOptions","map","ariaLabel","title","description","disabled","href","target","media","list","onClick","key","_jsx","NavigationOption","complex","content","showMediaAtAllSizes","showMediaCircle","LIST_BLOCK","LIST_BLOCK_GRID","isSmall","breakpoint","isGrid","className","clsx","children","block","Tile","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBYA,sCAIX;AAJD,CAAA,UAAYA,oBAAoB,EAAA;AAC9BA,EAAAA,oBAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACbA,EAAAA,oBAAA,CAAA,YAAA,CAAA,GAAA,YAAyB,CAAA;AACzBA,EAAAA,oBAAA,CAAA,iBAAA,CAAA,GAAA,iBAAmC,CAAA;AACrC,CAAC,EAJWA,4BAAoB,KAApBA,4BAAoB,GAI/B,EAAA,CAAA,CAAA,CAAA;AAEWC,8BAEX;AAFD,CAAA,UAAYA,YAAY,EAAA;AACtBA,EAAAA,YAAA,CAAA,YAAA,CAAA,GAAA,YAAyB,CAAA;AAC3B,CAAC,EAFWA,oBAAY,KAAZA,oBAAY,GAEvB,EAAA,CAAA,CAAA,CAAA;AAmBKC,MAAAA,QAAQ,GAAGA,CAAC;EAChBC,OAAO;EACPC,YAAY,GAAGJ,4BAAoB,CAACK,IAAI;QACxCC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAClBC,IAAI,GAAGR,oBAAY,CAACS,UAAU;AAC9BC,EAAAA,qBAAqB,GAAG,IAAI;AAC5BC,EAAAA,kBAAkB,GAAG,KAAA;AAAK,CACZ,KAAI;AAClB,EAAA,MAAMC,QAAQ,GAAGC,2BAAa,CAACC,qBAAU,CAACC,WAAW,CAAC,CAAA;AACtD,EAAA,MAAMC,QAAQ,GAAGH,2BAAa,CAACC,qBAAU,CAACG,KAAK,CAAC,CAAA;AAEhD,EAAA,IAAIT,IAAI,KAAKR,oBAAY,CAACS,UAAU,EAAE;AACpC,IAAA,MAAMS,eAAe,GAAGhB,OAAO,CAACiB,GAAG,CACjC,CACE;AACE,MAAA,YAAY,EAAEC,SAAS;MACvBC,KAAK;MACLC,WAAW;MACXC,QAAQ;MACRC,IAAI;MACJC,MAAM;AACNC,MAAAA,KAAK,EAAE;AAAEC,QAAAA,IAAAA;OAAM;AACfC,MAAAA,OAAAA;AAAO,KACR,EACDC,GAAG,kBAEHC,cAAA,CAACC,
|
|
1
|
+
{"version":3,"file":"Decision.js","sources":["../../src/decision/Decision.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Size, Breakpoint, SizeSmall, SizeMedium } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport NavigationOption from '../navigationOption';\nimport Tile from '../tile';\n\ninterface DecisionOption {\n 'aria-label'?: string;\n description?: React.ReactNode;\n disabled?: boolean;\n href?: string;\n target?: React.HTMLAttributeAnchorTarget;\n media: {\n block: React.ReactNode;\n list: React.ReactNode;\n };\n onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n title: React.ReactNode;\n}\n\nexport enum DecisionPresentation {\n LIST = 'LIST',\n LIST_BLOCK = 'LIST_BLOCK',\n LIST_BLOCK_GRID = 'LIST_BLOCK_GRID',\n}\n\nexport enum DecisionType {\n NAVIGATION = 'NAVIGATION',\n}\n\nexport interface DecisionProps {\n /** A list of elements to be rendered */\n options: readonly DecisionOption[];\n /** Handles the display mode of the component */\n presentation?: `${DecisionPresentation}`;\n /** Size currently affects only Tile dimension */\n size?: SizeSmall | SizeMedium;\n /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */\n type?: `${DecisionType}`;\n\n /** Display media in a circle in list presentation */\n showMediaCircleInList?: boolean;\n\n /** Sets navigation options to be aligned with the parent container */\n isContainerAligned?: boolean;\n}\n\nconst Decision = ({\n options,\n presentation = DecisionPresentation.LIST,\n size = Size.MEDIUM,\n type = DecisionType.NAVIGATION,\n showMediaCircleInList = true,\n isContainerAligned = false,\n}: DecisionProps) => {\n const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n const screenSm = useScreenSize(Breakpoint.SMALL);\n\n if (type === DecisionType.NAVIGATION) {\n const renderedOptions = options.map(\n (\n {\n 'aria-label': ariaLabel,\n title,\n description,\n disabled,\n href,\n target,\n media: { list },\n onClick,\n },\n key,\n ) => (\n <NavigationOption\n // eslint-disable-next-line react/no-array-index-key\n key={`nav-${key}`}\n aria-label={ariaLabel}\n complex={false}\n content={description}\n disabled={disabled}\n href={href}\n target={target}\n media={list}\n showMediaAtAllSizes\n showMediaCircle={showMediaCircleInList}\n isContainerAligned={isContainerAligned}\n title={title}\n onClick={onClick}\n />\n ),\n );\n\n if (\n presentation === DecisionPresentation.LIST_BLOCK ||\n presentation === DecisionPresentation.LIST_BLOCK_GRID\n ) {\n const isSmall = size === Size.SMALL;\n const breakpoint = isSmall ? screenXs : screenSm;\n\n const isGrid = presentation === DecisionPresentation.LIST_BLOCK_GRID;\n\n return (\n <div\n className={clsx(\n 'np-decision d-flex',\n {\n 'np-decision--small': isSmall,\n 'np-decision--grid': isGrid,\n },\n breakpoint ? isGrid && 'flex-wrap' : 'flex-column',\n )}\n >\n {breakpoint\n ? options.map(\n (\n {\n 'aria-label': ariaLabel,\n description,\n disabled,\n href,\n target,\n media: { block },\n onClick,\n title,\n },\n key,\n ) => (\n <Tile\n // eslint-disable-next-line react/no-array-index-key\n key={`tile-${key}`}\n className={clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {\n 'np-decision__tile--fixed-width': isGrid,\n })}\n aria-label={ariaLabel}\n description={description}\n disabled={disabled}\n href={href}\n target={target}\n media={block}\n size={isSmall ? Size.SMALL : Size.MEDIUM}\n title={title}\n onClick={onClick}\n />\n ),\n )\n : renderedOptions}\n </div>\n );\n }\n // LIST\n return <>{renderedOptions}</>;\n }\n return null;\n};\n\nexport default Decision;\n"],"names":["DecisionPresentation","DecisionType","Decision","options","presentation","LIST","size","Size","MEDIUM","type","NAVIGATION","showMediaCircleInList","isContainerAligned","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","renderedOptions","map","ariaLabel","title","description","disabled","href","target","media","list","onClick","key","_jsx","NavigationOption","complex","content","showMediaAtAllSizes","showMediaCircle","LIST_BLOCK","LIST_BLOCK_GRID","isSmall","breakpoint","isGrid","className","clsx","children","block","Tile","_Fragment"],"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
|
require('../common/theme.js');
|
|
5
7
|
require('../common/direction.js');
|
|
@@ -75,7 +77,7 @@ function DefinitionList({
|
|
|
75
77
|
children: value
|
|
76
78
|
}), action ? /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
77
79
|
className: clsx.clsx(isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2', 'tw-definition-list__action'),
|
|
78
|
-
children: /*#__PURE__*/jsxRuntime.jsx(Button_resolver, {
|
|
80
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
|
|
79
81
|
as: "button",
|
|
80
82
|
size: "sm",
|
|
81
83
|
v2: true,
|
|
@@ -88,5 +90,5 @@ function DefinitionList({
|
|
|
88
90
|
});
|
|
89
91
|
}
|
|
90
92
|
|
|
91
|
-
|
|
93
|
+
exports.default = DefinitionList;
|
|
92
94
|
//# sourceMappingURL=DefinitionList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefinitionList.js","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Layout } from '../common';\nimport Button from '../button';\n\nexport interface DefinitionListDefinition {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n title: React.ReactNode;\n value: React.ReactNode;\n key: string;\n}\n\nexport type DefinitionListLayout =\n `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n definitions?: DefinitionListDefinition[];\n layout?: DefinitionListLayout;\n muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n layout: DefinitionListLayout,\n action: DefinitionListDefinition['action'],\n) => {\n const classes = ['d-flex'];\n\n if (action) {\n if (isLayoutHorizontal(layout)) {\n classes.push('align-items-center');\n } else {\n classes.push('align-items-start');\n }\n }\n\n if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n } else {\n classes.push('justify-content-between');\n }\n\n if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n classes.push('text-sm-justify');\n }\n\n return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n definitions = defaultDefinitions,\n layout = 'VERTICAL_TWO_COLUMN',\n muted,\n}: DefinitionListProps) {\n return (\n <dl\n className={clsx('tw-definition-list d-flex ', {\n 'text-muted': muted,\n 'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n 'tw-definition-list--columns flex-column flex-row--sm':\n layout === Layout.VERTICAL_TWO_COLUMN,\n 'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n })}\n >\n {definitions\n .filter((definition) => definition)\n .map(({ action, title, value, key }) => (\n <div key={key} className=\"tw-definition-list__item\">\n <dt>{title}</dt>\n <dd className={clsx(...getAlignmentClasses(layout, action))}>\n <div>{value}</div>\n {action ? (\n <div\n className={clsx(\n isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n 'tw-definition-list__action',\n )}\n >\n <Button as=\"button\" size=\"sm\" v2 onClick={action.onClick}>\n {action.label}\n </Button>\n </div>\n ) : null}\n </dd>\n </div>\n ))}\n </dl>\n );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","Button","as","size","v2","onClick","label"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DefinitionList.js","sources":["../../src/definitionList/DefinitionList.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Layout } from '../common';\nimport Button from '../button';\n\nexport interface DefinitionListDefinition {\n action?: {\n label: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n title: React.ReactNode;\n value: React.ReactNode;\n key: string;\n}\n\nexport type DefinitionListLayout =\n `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;\n\nexport interface DefinitionListProps {\n definitions?: DefinitionListDefinition[];\n layout?: DefinitionListLayout;\n muted?: boolean;\n}\n\nconst isLayoutHorizontal = (layout: DefinitionListLayout) =>\n layout === Layout.HORIZONTAL_LEFT_ALIGNED ||\n layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||\n layout === Layout.HORIZONTAL_JUSTIFIED;\n\nconst getAlignmentClasses = (\n layout: DefinitionListLayout,\n action: DefinitionListDefinition['action'],\n) => {\n const classes = ['d-flex'];\n\n if (action) {\n if (isLayoutHorizontal(layout)) {\n classes.push('align-items-center');\n } else {\n classes.push('align-items-start');\n }\n }\n\n if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {\n classes.push('text-sm-right tw-definition-list--right-aligned-desktop');\n } else {\n classes.push('justify-content-between');\n }\n\n if (layout === Layout.HORIZONTAL_JUSTIFIED) {\n classes.push('text-sm-justify');\n }\n\n return classes;\n};\n\nconst defaultDefinitions = [] satisfies DefinitionListProps['definitions'];\n\nexport default function DefinitionList({\n definitions = defaultDefinitions,\n layout = 'VERTICAL_TWO_COLUMN',\n muted,\n}: DefinitionListProps) {\n return (\n <dl\n className={clsx('tw-definition-list d-flex ', {\n 'text-muted': muted,\n 'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,\n 'tw-definition-list--columns flex-column flex-row--sm':\n layout === Layout.VERTICAL_TWO_COLUMN,\n 'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),\n })}\n >\n {definitions\n .filter((definition) => definition)\n .map(({ action, title, value, key }) => (\n <div key={key} className=\"tw-definition-list__item\">\n <dt>{title}</dt>\n <dd className={clsx(...getAlignmentClasses(layout, action))}>\n <div>{value}</div>\n {action ? (\n <div\n className={clsx(\n isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',\n 'tw-definition-list__action',\n )}\n >\n <Button as=\"button\" size=\"sm\" v2 onClick={action.onClick}>\n {action.label}\n </Button>\n </div>\n ) : null}\n </dd>\n </div>\n ))}\n </dl>\n );\n}\n"],"names":["isLayoutHorizontal","layout","Layout","HORIZONTAL_LEFT_ALIGNED","HORIZONTAL_RIGHT_ALIGNED","HORIZONTAL_JUSTIFIED","getAlignmentClasses","action","classes","push","defaultDefinitions","DefinitionList","definitions","muted","_jsx","className","clsx","VERTICAL_ONE_COLUMN","VERTICAL_TWO_COLUMN","children","filter","definition","map","title","value","key","_jsxs","Button","as","size","v2","onClick","label"],"mappings":"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"}
|
package/build/dimmer/Dimmer.js
CHANGED
|
@@ -36,7 +36,7 @@ var withNextPortal = require('../withNextPortal/withNextPortal.js');
|
|
|
36
36
|
var DimmerManager = require('./dimmerManager/DimmerManager.js');
|
|
37
37
|
|
|
38
38
|
const EXIT_ANIMATION = 350;
|
|
39
|
-
const dimmerManager = new DimmerManager();
|
|
39
|
+
const dimmerManager = new DimmerManager.default();
|
|
40
40
|
const handleTouchMove = event => {
|
|
41
41
|
const isTouchedElementDimmer = event.target.classList.contains('dimmer');
|
|
42
42
|
// disable scroll on iOS devices for Dimmer area
|
|
@@ -137,7 +137,7 @@ const Dimmer = ({
|
|
|
137
137
|
onExited: onExited,
|
|
138
138
|
children: /*#__PURE__*/jsxRuntime.jsx(DimmerContentWrapper, {
|
|
139
139
|
scrollBody: !transparent,
|
|
140
|
-
children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
|
|
140
|
+
children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary.default, {
|
|
141
141
|
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
142
142
|
ref: dimmerReference,
|
|
143
143
|
className: clsx.clsx('dimmer', {
|
|
@@ -194,7 +194,7 @@ const DimmerContentWrapper = ({
|
|
|
194
194
|
}, [scrollBody]);
|
|
195
195
|
return children;
|
|
196
196
|
};
|
|
197
|
-
var Dimmer$1 = withNextPortal(Dimmer);
|
|
197
|
+
var Dimmer$1 = withNextPortal.default(Dimmer);
|
|
198
198
|
|
|
199
199
|
exports.Dimmer = Dimmer;
|
|
200
200
|
exports.DimmerContentWrapper = DimmerContentWrapper;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dimmer.js","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n addNoScrollClass,\n removeNoScrollClass,\n type CommonProps,\n type PositionBottom,\n type PositionCenter,\n type PositionTop,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n children?: ReactNode;\n disableClickToClose?: boolean;\n contentPosition?: PositionTop | PositionCenter | PositionBottom;\n fadeContentOnEnter?: boolean;\n fadeContentOnExit?: boolean;\n open?: boolean;\n scrollable?: boolean;\n transparent?: boolean;\n onClose?: (event: KeyboardEvent | MouseEvent) => void;\n onExited?: () => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n // disable scroll on iOS devices for Dimmer area\n // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n // note: scrolling still works for children(s) as expected\n if (isIosDevice() && isTouchedElementDimmer) {\n event.stopPropagation();\n event.preventDefault();\n }\n};\n\nconst Dimmer = ({\n children,\n className,\n disableClickToClose = false,\n contentPosition,\n fadeContentOnEnter = false,\n fadeContentOnExit = false,\n open = false,\n scrollable = false,\n transparent = false,\n onClose,\n onExited: handleExited,\n}: DimmerProps) => {\n const [hasNotExited, setHasNotExited] = useState(false);\n const dimmerReference = useRef<HTMLDivElement>(null);\n\n const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n if (event.target === dimmerReference.current) {\n onClose?.(event);\n }\n };\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n if (disableClickToClose || !onClose) {\n return;\n }\n\n closeOnClick(event);\n };\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key !== 'Escape') {\n return;\n }\n event.stopPropagation();\n\n if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n onClose(event);\n }\n },\n [onClose],\n );\n\n const onEnter = () => {\n setHasNotExited(true);\n\n if (dimmerReference.current) {\n dimmerManager.add(dimmerReference.current);\n }\n };\n const onExited = () => {\n setHasNotExited(false);\n\n if (dimmerReference.current) {\n dimmerManager.remove(dimmerReference.current);\n }\n\n handleExited?.();\n };\n\n useEffect(() => {\n const localReferenceCopy = dimmerReference.current;\n\n if (open) {\n document.addEventListener('keydown', handleKeyDown);\n localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n }\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n\n localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n };\n }, [handleKeyDown, open]);\n\n return (\n <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n <CSSTransition\n nodeRef={dimmerReference}\n in={open}\n appear\n // Wait for animation to finish before unmount.\n timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n classNames={{\n enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n enterDone: clsx('dimmer--enter-done', {\n 'dimmer--enter-fade': fadeContentOnEnter,\n }),\n exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n }}\n unmountOnExit\n onEnter={onEnter}\n onExited={onExited}\n >\n <DimmerContentWrapper scrollBody={!transparent}>\n <FocusBoundary>\n <div\n ref={dimmerReference}\n className={clsx(\n 'dimmer',\n { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n className,\n )}\n role=\"presentation\"\n onClick={handleClick}\n >\n <div\n className={clsx(\n 'dimmer-content-positioner',\n contentPosition != null && [\n 'd-flex justify-content-center',\n {\n 'align-items-start': contentPosition === 'top',\n 'align-items-center': contentPosition === 'center',\n 'align-items-end': contentPosition === 'bottom',\n },\n ],\n )}\n >\n {children}\n </div>\n </div>\n </FocusBoundary>\n </DimmerContentWrapper>\n </CSSTransition>\n </DimmerWrapper>\n );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n open: boolean;\n hasNotExited: boolean;\n children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n const { screenMode, theme } = useTheme();\n\n return open || hasNotExited ? (\n <ThemeProvider\n theme=\"personal\"\n screenMode={theme === 'personal' ? screenMode : 'light'}\n isNotRootProvider\n >\n {children}\n </ThemeProvider>\n ) : (\n <>{children}</>\n );\n};\n\nexport const DimmerContentWrapper = ({\n children,\n scrollBody,\n}: {\n children: React.ReactElement;\n scrollBody: boolean;\n}) => {\n useEffect(() => {\n if (scrollBody) {\n addNoScrollClass();\n }\n\n return () => {\n if (scrollBody) {\n removeNoScrollClass();\n }\n };\n }, [scrollBody]);\n\n return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","onExited","handleExited","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","isNotRootProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dimmer.js","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n addNoScrollClass,\n removeNoScrollClass,\n type CommonProps,\n type PositionBottom,\n type PositionCenter,\n type PositionTop,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n children?: ReactNode;\n disableClickToClose?: boolean;\n contentPosition?: PositionTop | PositionCenter | PositionBottom;\n fadeContentOnEnter?: boolean;\n fadeContentOnExit?: boolean;\n open?: boolean;\n scrollable?: boolean;\n transparent?: boolean;\n onClose?: (event: KeyboardEvent | MouseEvent) => void;\n onExited?: () => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n // disable scroll on iOS devices for Dimmer area\n // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n // note: scrolling still works for children(s) as expected\n if (isIosDevice() && isTouchedElementDimmer) {\n event.stopPropagation();\n event.preventDefault();\n }\n};\n\nconst Dimmer = ({\n children,\n className,\n disableClickToClose = false,\n contentPosition,\n fadeContentOnEnter = false,\n fadeContentOnExit = false,\n open = false,\n scrollable = false,\n transparent = false,\n onClose,\n onExited: handleExited,\n}: DimmerProps) => {\n const [hasNotExited, setHasNotExited] = useState(false);\n const dimmerReference = useRef<HTMLDivElement>(null);\n\n const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n if (event.target === dimmerReference.current) {\n onClose?.(event);\n }\n };\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n if (disableClickToClose || !onClose) {\n return;\n }\n\n closeOnClick(event);\n };\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key !== 'Escape') {\n return;\n }\n event.stopPropagation();\n\n if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n onClose(event);\n }\n },\n [onClose],\n );\n\n const onEnter = () => {\n setHasNotExited(true);\n\n if (dimmerReference.current) {\n dimmerManager.add(dimmerReference.current);\n }\n };\n const onExited = () => {\n setHasNotExited(false);\n\n if (dimmerReference.current) {\n dimmerManager.remove(dimmerReference.current);\n }\n\n handleExited?.();\n };\n\n useEffect(() => {\n const localReferenceCopy = dimmerReference.current;\n\n if (open) {\n document.addEventListener('keydown', handleKeyDown);\n localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n }\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n\n localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n };\n }, [handleKeyDown, open]);\n\n return (\n <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n <CSSTransition\n nodeRef={dimmerReference}\n in={open}\n appear\n // Wait for animation to finish before unmount.\n timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n classNames={{\n enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n enterDone: clsx('dimmer--enter-done', {\n 'dimmer--enter-fade': fadeContentOnEnter,\n }),\n exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n }}\n unmountOnExit\n onEnter={onEnter}\n onExited={onExited}\n >\n <DimmerContentWrapper scrollBody={!transparent}>\n <FocusBoundary>\n <div\n ref={dimmerReference}\n className={clsx(\n 'dimmer',\n { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n className,\n )}\n role=\"presentation\"\n onClick={handleClick}\n >\n <div\n className={clsx(\n 'dimmer-content-positioner',\n contentPosition != null && [\n 'd-flex justify-content-center',\n {\n 'align-items-start': contentPosition === 'top',\n 'align-items-center': contentPosition === 'center',\n 'align-items-end': contentPosition === 'bottom',\n },\n ],\n )}\n >\n {children}\n </div>\n </div>\n </FocusBoundary>\n </DimmerContentWrapper>\n </CSSTransition>\n </DimmerWrapper>\n );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n open: boolean;\n hasNotExited: boolean;\n children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n const { screenMode, theme } = useTheme();\n\n return open || hasNotExited ? (\n <ThemeProvider\n theme=\"personal\"\n screenMode={theme === 'personal' ? screenMode : 'light'}\n isNotRootProvider\n >\n {children}\n </ThemeProvider>\n ) : (\n <>{children}</>\n );\n};\n\nexport const DimmerContentWrapper = ({\n children,\n scrollBody,\n}: {\n children: React.ReactElement;\n scrollBody: boolean;\n}) => {\n useEffect(() => {\n if (scrollBody) {\n addNoScrollClass();\n }\n\n return () => {\n if (scrollBody) {\n removeNoScrollClass();\n }\n };\n }, [scrollBody]);\n\n return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","onExited","handleExited","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","isNotRootProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"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
|
/**
|
|
4
6
|
* Dimmer state management inspired by Material UI's ModalManager (https://github.com/mui-org/material-ui)
|
|
5
7
|
*/
|
|
@@ -32,5 +34,5 @@ class DimmerManager {
|
|
|
32
34
|
}
|
|
33
35
|
}
|
|
34
36
|
|
|
35
|
-
|
|
37
|
+
exports.default = DimmerManager;
|
|
36
38
|
//# sourceMappingURL=DimmerManager.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DimmerManager.js","sources":["../../../src/dimmer/dimmerManager/DimmerManager.ts"],"sourcesContent":["/**\n * Dimmer state management inspired by Material UI's ModalManager (https://github.com/mui-org/material-ui)\n */\nexport default class DimmerManager {\n /**\n * Dimmer refs\n */\n private readonly dimmers: Element[];\n\n constructor() {\n this.dimmers = [];\n }\n\n add(dimmer: Element): number {\n let dimmerIndex = this.dimmers.indexOf(dimmer);\n if (dimmerIndex !== -1) {\n return dimmerIndex;\n }\n\n dimmerIndex = this.dimmers.length;\n this.dimmers.push(dimmer);\n return dimmerIndex;\n }\n\n remove(dimmer: Element): number {\n const dimmerIndex = this.dimmers.indexOf(dimmer);\n\n if (dimmerIndex !== -1) {\n this.dimmers.splice(dimmerIndex, 1);\n }\n return dimmerIndex;\n }\n\n isTop(dimmer: Element): boolean {\n return this.dimmers.length > 0 && this.dimmers[this.dimmers.length - 1] === dimmer;\n }\n}\n"],"names":["DimmerManager","dimmers","constructor","add","dimmer","dimmerIndex","indexOf","length","push","remove","splice","isTop"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DimmerManager.js","sources":["../../../src/dimmer/dimmerManager/DimmerManager.ts"],"sourcesContent":["/**\n * Dimmer state management inspired by Material UI's ModalManager (https://github.com/mui-org/material-ui)\n */\nexport default class DimmerManager {\n /**\n * Dimmer refs\n */\n private readonly dimmers: Element[];\n\n constructor() {\n this.dimmers = [];\n }\n\n add(dimmer: Element): number {\n let dimmerIndex = this.dimmers.indexOf(dimmer);\n if (dimmerIndex !== -1) {\n return dimmerIndex;\n }\n\n dimmerIndex = this.dimmers.length;\n this.dimmers.push(dimmer);\n return dimmerIndex;\n }\n\n remove(dimmer: Element): number {\n const dimmerIndex = this.dimmers.indexOf(dimmer);\n\n if (dimmerIndex !== -1) {\n this.dimmers.splice(dimmerIndex, 1);\n }\n return dimmerIndex;\n }\n\n isTop(dimmer: Element): boolean {\n return this.dimmers.length > 0 && this.dimmers[this.dimmers.length - 1] === dimmer;\n }\n}\n"],"names":["DimmerManager","dimmers","constructor","add","dimmer","dimmerIndex","indexOf","length","push","remove","splice","isTop"],"mappings":";;;;AAAA;;AAEG;AACW,MAAOA,aAAa,CAAA;AAChC;;AAEG;EACcC,OAAO,CAAA;AAExBC,EAAAA,WAAAA,GAAA;IACE,IAAI,CAACD,OAAO,GAAG,EAAE,CAAA;AACnB,GAAA;EAEAE,GAAGA,CAACC,MAAe,EAAA;IACjB,IAAIC,WAAW,GAAG,IAAI,CAACJ,OAAO,CAACK,OAAO,CAACF,MAAM,CAAC,CAAA;AAC9C,IAAA,IAAIC,WAAW,KAAK,CAAC,CAAC,EAAE;AACtB,MAAA,OAAOA,WAAW,CAAA;AACpB,KAAA;AAEAA,IAAAA,WAAW,GAAG,IAAI,CAACJ,OAAO,CAACM,MAAM,CAAA;AACjC,IAAA,IAAI,CAACN,OAAO,CAACO,IAAI,CAACJ,MAAM,CAAC,CAAA;AACzB,IAAA,OAAOC,WAAW,CAAA;AACpB,GAAA;EAEAI,MAAMA,CAACL,MAAe,EAAA;IACpB,MAAMC,WAAW,GAAG,IAAI,CAACJ,OAAO,CAACK,OAAO,CAACF,MAAM,CAAC,CAAA;AAEhD,IAAA,IAAIC,WAAW,KAAK,CAAC,CAAC,EAAE;MACtB,IAAI,CAACJ,OAAO,CAACS,MAAM,CAACL,WAAW,EAAE,CAAC,CAAC,CAAA;AACrC,KAAA;AACA,IAAA,OAAOA,WAAW,CAAA;AACpB,GAAA;EAEAM,KAAKA,CAACP,MAAe,EAAA;IACnB,OAAO,IAAI,CAACH,OAAO,CAACM,MAAM,GAAG,CAAC,IAAI,IAAI,CAACN,OAAO,CAAC,IAAI,CAACA,OAAO,CAACM,MAAM,GAAG,CAAC,CAAC,KAAKH,MAAM,CAAA;AACpF,GAAA;AACD;;;;"}
|
package/build/display/Display.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
|
require('../common/theme.js');
|
|
5
7
|
require('../common/direction.js');
|
|
@@ -40,5 +42,5 @@ function Display({
|
|
|
40
42
|
});
|
|
41
43
|
}
|
|
42
44
|
|
|
43
|
-
|
|
45
|
+
exports.default = Display;
|
|
44
46
|
//# sourceMappingURL=Display.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Display.js","sources":["../../src/display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n id?: string;\n type?: DisplayTypes;\n className?: string;\n}>;\n\nfunction Display({\n as: Heading = 'h1',\n type = Typography.DISPLAY_LARGE,\n children,\n className,\n id,\n}: Props) {\n return (\n <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>\n {children}\n </Heading>\n );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Display.js","sources":["../../src/display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n id?: string;\n type?: DisplayTypes;\n className?: string;\n}>;\n\nfunction Display({\n as: Heading = 'h1',\n type = Typography.DISPLAY_LARGE,\n children,\n className,\n id,\n}: Props) {\n return (\n <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>\n {children}\n </Heading>\n );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,qBAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAAA;AACM,CAAA,EAAA;EACN,oBACEC,cAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;AAACD,IAAAA,SAAS,EAAEG,SAAI,CAAC,YAAY,EAAE,CAAA,QAAA,EAAWP,IAAI,CAAA,CAAE,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAC1FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var clsx = require('clsx');
|
|
6
|
+
require('react');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
|
|
9
|
+
const Divider = ({
|
|
10
|
+
className,
|
|
11
|
+
isContent = false,
|
|
12
|
+
testId,
|
|
13
|
+
level = 'section',
|
|
14
|
+
...props
|
|
15
|
+
}) => {
|
|
16
|
+
const levelClass = level && level !== 'section' ? `wds-Divider--${level}` : '';
|
|
17
|
+
const commonProps = {
|
|
18
|
+
className: clsx.clsx('wds-Divider', levelClass, className),
|
|
19
|
+
'data-testid': testId
|
|
20
|
+
};
|
|
21
|
+
const divProps = {
|
|
22
|
+
...commonProps,
|
|
23
|
+
role: 'presentation'
|
|
24
|
+
};
|
|
25
|
+
return isContent ? /*#__PURE__*/jsxRuntime.jsx("hr", {
|
|
26
|
+
...commonProps,
|
|
27
|
+
...props
|
|
28
|
+
}) : /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
29
|
+
...divProps,
|
|
30
|
+
...props
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
exports.default = Divider;
|
|
35
|
+
//# sourceMappingURL=Divider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Divider.js","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n /**\n * If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.\n * Otherwise, a non-semantic `<div role=\"presentation\">` is used for purely visual separation.\n * @default false\n */\n isContent?: boolean;\n\n /**\n * Alters the visual style of the divider, accommodating different types\n * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.\n * @default 'section'\n */\n level?: 'section' | 'subsection' | 'content';\n\n className?: string;\n testId?: string;\n}\n\n/**\n * @param {boolean} [isContent=false] - If `true`, uses a semantic `<hr>` for accessible separation; otherwise uses `<div role=\"presentation\">`.\n * @param {string} [className] - Optional class names for adding custom styling to the divider.\n * @param {string} [testId] - Provides a `data-testid` for testing frameworks.\n * @param {'section' | 'subsection' | 'content'} [level='section'] - Defines the visual style for the divider.\n *\n * @see {@link Divider} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n className,\n isContent = false,\n testId,\n level = 'section',\n ...props\n}) => {\n const levelClass = level && level !== 'section' ? `wds-Divider--${level}` : '';\n\n const commonProps = {\n className: clsx('wds-Divider', levelClass, className),\n 'data-testid': testId,\n };\n\n const divProps = {\n ...commonProps,\n role: 'presentation',\n };\n\n return isContent ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","className","isContent","testId","level","props","levelClass","commonProps","clsx","divProps","role","_jsx"],"mappings":";;;;;;;;AA+BMA,MAAAA,OAAO,GAAoCA,CAAC;EAChDC,SAAS;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,MAAM;AACNC,EAAAA,KAAK,GAAG,SAAS;EACjB,GAAGC,KAAAA;AAAK,CACT,KAAI;AACH,EAAA,MAAMC,UAAU,GAAGF,KAAK,IAAIA,KAAK,KAAK,SAAS,GAAG,CAAgBA,aAAAA,EAAAA,KAAK,CAAE,CAAA,GAAG,EAAE,CAAA;AAE9E,EAAA,MAAMG,WAAW,GAAG;IAClBN,SAAS,EAAEO,SAAI,CAAC,aAAa,EAAEF,UAAU,EAAEL,SAAS,CAAC;AACrD,IAAA,aAAa,EAAEE,MAAAA;GAChB,CAAA;AAED,EAAA,MAAMM,QAAQ,GAAG;AACf,IAAA,GAAGF,WAAW;AACdG,IAAAA,IAAI,EAAE,cAAA;GACP,CAAA;EAED,OAAOR,SAAS,gBAAGS,cAAA,CAAA,IAAA,EAAA;AAAA,IAAA,GAAQJ,WAAW;IAAA,GAAMF,KAAAA;GAAS,CAAA,gBAAGM,cAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASF,QAAQ;IAAA,GAAMJ,KAAAA;AAAK,IAAI,CAAA;AAC1F;;;;"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { clsx } from 'clsx';
|
|
2
|
+
import 'react';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
const Divider = ({
|
|
6
|
+
className,
|
|
7
|
+
isContent = false,
|
|
8
|
+
testId,
|
|
9
|
+
level = 'section',
|
|
10
|
+
...props
|
|
11
|
+
}) => {
|
|
12
|
+
const levelClass = level && level !== 'section' ? `wds-Divider--${level}` : '';
|
|
13
|
+
const commonProps = {
|
|
14
|
+
className: clsx('wds-Divider', levelClass, className),
|
|
15
|
+
'data-testid': testId
|
|
16
|
+
};
|
|
17
|
+
const divProps = {
|
|
18
|
+
...commonProps,
|
|
19
|
+
role: 'presentation'
|
|
20
|
+
};
|
|
21
|
+
return isContent ? /*#__PURE__*/jsx("hr", {
|
|
22
|
+
...commonProps,
|
|
23
|
+
...props
|
|
24
|
+
}) : /*#__PURE__*/jsx("div", {
|
|
25
|
+
...divProps,
|
|
26
|
+
...props
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export { Divider as default };
|
|
31
|
+
//# sourceMappingURL=Divider.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Divider.mjs","sources":["../../src/divider/Divider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent } from 'react';\n\nexport interface DividerProps {\n /**\n * If `true`, renders the Divider as a semantic `<hr>`, providing clear separation to assistive technologies.\n * Otherwise, a non-semantic `<div role=\"presentation\">` is used for purely visual separation.\n * @default false\n */\n isContent?: boolean;\n\n /**\n * Alters the visual style of the divider, accommodating different types\n * of separated content. Accepts `'section'`, `'subsection'`, or `'content'`.\n * @default 'section'\n */\n level?: 'section' | 'subsection' | 'content';\n\n className?: string;\n testId?: string;\n}\n\n/**\n * @param {boolean} [isContent=false] - If `true`, uses a semantic `<hr>` for accessible separation; otherwise uses `<div role=\"presentation\">`.\n * @param {string} [className] - Optional class names for adding custom styling to the divider.\n * @param {string} [testId] - Provides a `data-testid` for testing frameworks.\n * @param {'section' | 'subsection' | 'content'} [level='section'] - Defines the visual style for the divider.\n *\n * @see {@link Divider} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/layouts-divider--docs|Storybook Wise Design}\n */\nconst Divider: FunctionComponent<DividerProps> = ({\n className,\n isContent = false,\n testId,\n level = 'section',\n ...props\n}) => {\n const levelClass = level && level !== 'section' ? `wds-Divider--${level}` : '';\n\n const commonProps = {\n className: clsx('wds-Divider', levelClass, className),\n 'data-testid': testId,\n };\n\n const divProps = {\n ...commonProps,\n role: 'presentation',\n };\n\n return isContent ? <hr {...commonProps} {...props} /> : <div {...divProps} {...props} />;\n};\n\nexport default Divider;\n"],"names":["Divider","className","isContent","testId","level","props","levelClass","commonProps","clsx","divProps","role","_jsx"],"mappings":";;;;AA+BMA,MAAAA,OAAO,GAAoCA,CAAC;EAChDC,SAAS;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,MAAM;AACNC,EAAAA,KAAK,GAAG,SAAS;EACjB,GAAGC,KAAAA;AAAK,CACT,KAAI;AACH,EAAA,MAAMC,UAAU,GAAGF,KAAK,IAAIA,KAAK,KAAK,SAAS,GAAG,CAAgBA,aAAAA,EAAAA,KAAK,CAAE,CAAA,GAAG,EAAE,CAAA;AAE9E,EAAA,MAAMG,WAAW,GAAG;IAClBN,SAAS,EAAEO,IAAI,CAAC,aAAa,EAAEF,UAAU,EAAEL,SAAS,CAAC;AACrD,IAAA,aAAa,EAAEE,MAAAA;GAChB,CAAA;AAED,EAAA,MAAMM,QAAQ,GAAG;AACf,IAAA,GAAGF,WAAW;AACdG,IAAAA,IAAI,EAAE,cAAA;GACP,CAAA;EAED,OAAOR,SAAS,gBAAGS,GAAA,CAAA,IAAA,EAAA;AAAA,IAAA,GAAQJ,WAAW;IAAA,GAAMF,KAAAA;GAAS,CAAA,gBAAGM,GAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASF,QAAQ;IAAA,GAAMJ,KAAAA;AAAK,IAAI,CAAA;AAC1F;;;;"}
|
package/build/drawer/Drawer.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 React = require('react');
|
|
5
7
|
require('../common/theme.js');
|
|
@@ -67,7 +69,7 @@ function Drawer({
|
|
|
67
69
|
className: clsx.clsx('np-drawer-header', {
|
|
68
70
|
'np-drawer-header--withborder': headerTitle
|
|
69
71
|
}),
|
|
70
|
-
children: [headerTitle && /*#__PURE__*/jsxRuntime.jsx(Title, {
|
|
72
|
+
children: [headerTitle && /*#__PURE__*/jsxRuntime.jsx(Title.default, {
|
|
71
73
|
id: titleId,
|
|
72
74
|
type: typography.Typography.TITLE_BODY,
|
|
73
75
|
children: headerTitle
|
|
@@ -86,5 +88,5 @@ function Drawer({
|
|
|
86
88
|
});
|
|
87
89
|
}
|
|
88
90
|
|
|
89
|
-
|
|
91
|
+
exports.default = Drawer;
|
|
90
92
|
//# sourceMappingURL=Drawer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. */\n children?: React.ReactNode;\n className?: string;\n /** The content to appear in the drawer footer. */\n footerContent?: React.ReactNode;\n /** The content to appear in the drawer header. */\n headerTitle?: React.ReactNode;\n /** The status of Drawer either open or not. */\n open?: boolean;\n /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n /** The action to perform on close click. */\n onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n onUnmount?: () => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n onUnmount,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose} onExited={onUnmount}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n className={clsx('np-drawer', className)}\n >\n <div\n className={clsx('np-drawer-header', {\n 'np-drawer-header--withborder': headerTitle,\n })}\n >\n {headerTitle && (\n <Title id={titleId} type={Typography.TITLE_BODY}>\n {headerTitle}\n </Title>\n )}\n <CloseButton onClick={onClose} />\n </div>\n {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","onUnmount","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","onExited","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HTMLAttributes, useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport type DrawerProps = {\n /** The content to appear in the drawer body. */\n children?: React.ReactNode;\n className?: string;\n /** The content to appear in the drawer footer. */\n footerContent?: React.ReactNode;\n /** The content to appear in the drawer header. */\n headerTitle?: React.ReactNode;\n /** The status of Drawer either open or not. */\n open?: boolean;\n /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n /** The action to perform on close click. */\n onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n onUnmount?: () => void;\n} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;\n\nexport default function Drawer({\n children,\n className,\n footerContent,\n headerTitle,\n onClose,\n onUnmount,\n open = false,\n position = 'right',\n role = 'dialog',\n 'aria-labelledby': ariaLabelledBy,\n}: DrawerProps) {\n logActionRequiredIf(\n 'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n !onClose,\n );\n\n const { isMobile } = useLayout();\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return (\n <Dimmer open={open} onClose={onClose} onExited={onUnmount}>\n <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n <div\n id={overlayId}\n role={role}\n aria-modal\n aria-labelledby={ariaLabelledBy || (headerTitle ? titleId : undefined)}\n className={clsx('np-drawer', className)}\n >\n <div\n className={clsx('np-drawer-header', {\n 'np-drawer-header--withborder': headerTitle,\n })}\n >\n {headerTitle && (\n <Title id={titleId} type={Typography.TITLE_BODY}>\n {headerTitle}\n </Title>\n )}\n <CloseButton onClick={onClose} />\n </div>\n {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n </div>\n </SlidingPanel>\n </Dimmer>\n );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","onUnmount","open","position","role","ariaLabelledBy","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","onExited","SlidingPanel","Position","BOTTOM","_jsxs","id","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;EACPC,SAAS;AACTC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAO;AAClBC,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,iBAAiB,EAAEC,cAAAA;AACP,CAAA,EAAA;AACZC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACN,OAAO,CACT,CAAA;EAED,MAAM;AAAEO,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC,CAAA;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACb,IAAAA,IAAI,EAAEA,IAAK;AAACF,IAAAA,OAAO,EAAEA,OAAQ;AAACgB,IAAAA,QAAQ,EAAEf,SAAU;IAAAL,QAAA,eACxDkB,cAAA,CAACG,oBAAY,EAAA;AAACf,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEI,QAAQ,GAAGW,iBAAQ,CAACC,MAAM,GAAGhB,UAAS;AAAAP,MAAAA,QAAA,eACxEwB,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAEV,SAAU;AACdP,QAAAA,IAAI,EAAEA,IAAK;QACX,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBC,cAAc,KAAKN,WAAW,GAAGU,OAAO,GAAGa,SAAS,CAAE;AACvEzB,QAAAA,SAAS,EAAE0B,SAAI,CAAC,WAAW,EAAE1B,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCwB,eAAA,CAAA,KAAA,EAAA;AACEvB,UAAAA,SAAS,EAAE0B,SAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAExB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVe,cAAA,CAACU,aAAK,EAAA;AAACH,YAAAA,EAAE,EAAEZ,OAAQ;YAACgB,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAA/B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDe,cAAA,CAACc,uBAAW,EAAA;AAACC,YAAAA,OAAO,EAAE7B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIkB,cAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAE0B,SAAI,CAAC,mBAAmB,CAAE;AAAA3B,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIgB,cAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAE0B,SAAI,CAAC,kBAAkB,CAAE;AAAA3B,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OAC9E,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}
|
|
@@ -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 reactTransitionGroup = require('react-transition-group');
|
|
5
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -44,5 +46,5 @@ const DropFade = ({
|
|
|
44
46
|
});
|
|
45
47
|
};
|
|
46
48
|
|
|
47
|
-
|
|
49
|
+
exports.default = DropFade;
|
|
48
50
|
//# sourceMappingURL=DropFade.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropFade.js","sources":["../../src/dropFade/DropFade.tsx"],"sourcesContent":["import React, { useRef, useState, ReactElement } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nconst DropFade = ({ children, show }: { children: ReactElement; show: boolean }) => {\n const reference = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number | undefined>(0);\n\n const clonedChild = React.cloneElement(children);\n\n return (\n <CSSTransition\n nodeRef={reference}\n in={show}\n timeout={300}\n classNames=\"np-dropfade\"\n onEntering={() => {\n // Set height so we can animate to the correct height\n setHeight(reference.current?.scrollHeight || 0);\n }}\n // Un-set height, as we don't want to presume it should be that height forever\n onEntered={() => setHeight(undefined)}\n onExit={() => {\n setHeight(reference.current?.scrollHeight || 0);\n }}\n onExiting={() => {\n setHeight(0);\n }}\n >\n <div ref={reference} style={{ height }} className=\"np-dropfade\">\n {clonedChild}\n </div>\n </CSSTransition>\n );\n};\n\nexport default DropFade;\n"],"names":["DropFade","children","show","reference","useRef","height","setHeight","useState","clonedChild","React","cloneElement","_jsx","CSSTransition","nodeRef","in","timeout","classNames","onEntering","current","scrollHeight","onEntered","undefined","onExit","onExiting","ref","style","className"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DropFade.js","sources":["../../src/dropFade/DropFade.tsx"],"sourcesContent":["import React, { useRef, useState, ReactElement } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nconst DropFade = ({ children, show }: { children: ReactElement; show: boolean }) => {\n const reference = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number | undefined>(0);\n\n const clonedChild = React.cloneElement(children);\n\n return (\n <CSSTransition\n nodeRef={reference}\n in={show}\n timeout={300}\n classNames=\"np-dropfade\"\n onEntering={() => {\n // Set height so we can animate to the correct height\n setHeight(reference.current?.scrollHeight || 0);\n }}\n // Un-set height, as we don't want to presume it should be that height forever\n onEntered={() => setHeight(undefined)}\n onExit={() => {\n setHeight(reference.current?.scrollHeight || 0);\n }}\n onExiting={() => {\n setHeight(0);\n }}\n >\n <div ref={reference} style={{ height }} className=\"np-dropfade\">\n {clonedChild}\n </div>\n </CSSTransition>\n );\n};\n\nexport default DropFade;\n"],"names":["DropFade","children","show","reference","useRef","height","setHeight","useState","clonedChild","React","cloneElement","_jsx","CSSTransition","nodeRef","in","timeout","classNames","onEntering","current","scrollHeight","onEntered","undefined","onExit","onExiting","ref","style","className"],"mappings":";;;;;;;;;;;;AAGMA,MAAAA,QAAQ,GAAGA,CAAC;EAAEC,QAAQ;AAAEC,EAAAA,IAAAA;AAAiD,CAAA,KAAI;AACjF,EAAA,MAAMC,SAAS,GAAGC,YAAM,CAAiB,IAAI,CAAC,CAAA;EAC9C,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,CAAC,CAAC,CAAA;AAE3D,EAAA,MAAMC,WAAW,gBAAGC,sBAAK,CAACC,YAAY,CAACT,QAAQ,CAAC,CAAA;EAEhD,oBACEU,cAAA,CAACC,kCAAa,EAAA;AACZC,IAAAA,OAAO,EAAEV,SAAU;AACnBW,IAAAA,EAAE,EAAEZ,IAAK;AACTa,IAAAA,OAAO,EAAE,GAAI;AACbC,IAAAA,UAAU,EAAC,aAAa;IACxBC,UAAU,EAAEA,MAAK;AACf;MACAX,SAAS,CAACH,SAAS,CAACe,OAAO,EAAEC,YAAY,IAAI,CAAC,CAAC,CAAA;AACjD,KAAA;AACA;AAAA;AACAC,IAAAA,SAAS,EAAEA,MAAMd,SAAS,CAACe,SAAS,CAAE;IACtCC,MAAM,EAAEA,MAAK;MACXhB,SAAS,CAACH,SAAS,CAACe,OAAO,EAAEC,YAAY,IAAI,CAAC,CAAC,CAAA;KAC/C;IACFI,SAAS,EAAEA,MAAK;MACdjB,SAAS,CAAC,CAAC,CAAC,CAAA;KACZ;AAAAL,IAAAA,QAAA,eAEFU,cAAA,CAAA,KAAA,EAAA;AAAKa,MAAAA,GAAG,EAAErB,SAAU;AAACsB,MAAAA,KAAK,EAAE;AAAEpB,QAAAA,MAAAA;OAAS;AAACqB,MAAAA,SAAS,EAAC,aAAa;AAAAzB,MAAAA,QAAA,EAC5DO,WAAAA;KACE,CAAA;AACP,GAAe,CAAC,CAAA;AAEpB;;;;"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var EmphasisHtmlTransformer = require('./EmphasisHtmlTransformer.js');
|
|
4
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
7
|
|
|
6
8
|
const SUPPORTED_TAGS = ['important', 'positive', 'negative', 'warning'];
|
|
7
|
-
const emphasisHtmlTransformer = new EmphasisHtmlTransformer(SUPPORTED_TAGS);
|
|
9
|
+
const emphasisHtmlTransformer = new EmphasisHtmlTransformer.default(SUPPORTED_TAGS);
|
|
8
10
|
const Emphasis = ({
|
|
9
11
|
text = undefined
|
|
10
12
|
}) => {
|
|
@@ -20,5 +22,5 @@ const Emphasis = ({
|
|
|
20
22
|
}) : null;
|
|
21
23
|
};
|
|
22
24
|
|
|
23
|
-
|
|
25
|
+
exports.default = Emphasis;
|
|
24
26
|
//# sourceMappingURL=Emphasis.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Emphasis.js","sources":["../../src/emphasis/Emphasis.tsx"],"sourcesContent":["import EmphasisHtmlTransformer from './EmphasisHtmlTransformer';\n\nconst SUPPORTED_TAGS = ['important', 'positive', 'negative', 'warning'];\nconst emphasisHtmlTransformer = new EmphasisHtmlTransformer(SUPPORTED_TAGS);\n\nexport type EmphasisProps = {\n text?: string;\n};\n\nconst Emphasis = ({ text = undefined }: EmphasisProps) => {\n if (!text) {\n return null;\n }\n\n const transformedText = emphasisHtmlTransformer.transform(text);\n // eslint-disable-next-line react/no-danger\n return transformedText ? <span dangerouslySetInnerHTML={{ __html: transformedText }} /> : null;\n};\n\nexport default Emphasis;\n"],"names":["SUPPORTED_TAGS","emphasisHtmlTransformer","EmphasisHtmlTransformer","Emphasis","text","undefined","transformedText","transform","_jsx","dangerouslySetInnerHTML","__html"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Emphasis.js","sources":["../../src/emphasis/Emphasis.tsx"],"sourcesContent":["import EmphasisHtmlTransformer from './EmphasisHtmlTransformer';\n\nconst SUPPORTED_TAGS = ['important', 'positive', 'negative', 'warning'];\nconst emphasisHtmlTransformer = new EmphasisHtmlTransformer(SUPPORTED_TAGS);\n\nexport type EmphasisProps = {\n text?: string;\n};\n\nconst Emphasis = ({ text = undefined }: EmphasisProps) => {\n if (!text) {\n return null;\n }\n\n const transformedText = emphasisHtmlTransformer.transform(text);\n // eslint-disable-next-line react/no-danger\n return transformedText ? <span dangerouslySetInnerHTML={{ __html: transformedText }} /> : null;\n};\n\nexport default Emphasis;\n"],"names":["SUPPORTED_TAGS","emphasisHtmlTransformer","EmphasisHtmlTransformer","Emphasis","text","undefined","transformedText","transform","_jsx","dangerouslySetInnerHTML","__html"],"mappings":";;;;;;;AAEA,MAAMA,cAAc,GAAG,CAAC,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,CAAC,CAAA;AACvE,MAAMC,uBAAuB,GAAG,IAAIC,+BAAuB,CAACF,cAAc,CAAC,CAAA;AAMrEG,MAAAA,QAAQ,GAAGA,CAAC;AAAEC,EAAAA,IAAI,GAAGC,SAAAA;AAA0B,CAAA,KAAI;EACvD,IAAI,CAACD,IAAI,EAAE;AACT,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AAEA,EAAA,MAAME,eAAe,GAAGL,uBAAuB,CAACM,SAAS,CAACH,IAAI,CAAC,CAAA;AAC/D;EACA,OAAOE,eAAe,gBAAGE,cAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,uBAAuB,EAAE;AAAEC,MAAAA,MAAM,EAAEJ,eAAAA;AAAiB,KAAA;IAAI,GAAG,IAAI,CAAA;AAChG;;;;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
const ESCAPED_OPENING_CHEVRON = '<';
|
|
4
6
|
const ESCAPED_CLOSING_CHEVRON = '>';
|
|
5
7
|
class EmphasisHtmlTransformer {
|
|
@@ -35,5 +37,5 @@ class EmphasisHtmlTransformer {
|
|
|
35
37
|
}
|
|
36
38
|
}
|
|
37
39
|
|
|
38
|
-
|
|
40
|
+
exports.default = EmphasisHtmlTransformer;
|
|
39
41
|
//# sourceMappingURL=EmphasisHtmlTransformer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmphasisHtmlTransformer.js","sources":["../../src/emphasis/EmphasisHtmlTransformer.ts"],"sourcesContent":["const ESCAPED_OPENING_CHEVRON = '<';\nconst ESCAPED_CLOSING_CHEVRON = '>';\n\ntype Tags = {\n transformed: {\n opening: string;\n closing: string;\n };\n escapedRegex: {\n opening: RegExp;\n closing: RegExp;\n };\n};\n\nclass EmphasisHtmlTransformer {\n tags: Tags[];\n\n constructor(whitelistedTags?: string[]) {\n this.tags = (whitelistedTags || []).map((tag) => {\n return {\n transformed: {\n opening: `<em class=\"emphasis emphasis--${tag}\">`,\n closing: '</em>',\n },\n escapedRegex: {\n opening: new RegExp(`${ESCAPED_OPENING_CHEVRON}${tag}${ESCAPED_CLOSING_CHEVRON}`, 'g'),\n closing: new RegExp(`${ESCAPED_OPENING_CHEVRON}/${tag}${ESCAPED_CLOSING_CHEVRON}`, 'g'),\n },\n };\n });\n }\n\n // Algorithm:\n // 1) Escape all dangerous characters (<,>,&)\n // 2) Replace all escaped, whitelisted tags with styled spans.\n // 3) Transform new line characters to `<br />`s\n //\n // Note: for simplicity this doesn't support tags with non-standard whitespaces, e.g. <positive></ positive>\n transform(unsafe: string): string | null {\n if (!unsafe) {\n return null;\n }\n\n const safe = unsafe.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');\n\n return this.tags\n .reduce((accumulator, tag) => {\n return accumulator\n .replace(tag.escapedRegex.opening, tag.transformed.opening)\n .replace(tag.escapedRegex.closing, tag.transformed.closing);\n }, safe)\n .replace(/\\\\n|\\n/g, '<br />');\n }\n}\n\nexport default EmphasisHtmlTransformer;\n"],"names":["ESCAPED_OPENING_CHEVRON","ESCAPED_CLOSING_CHEVRON","EmphasisHtmlTransformer","tags","constructor","whitelistedTags","map","tag","transformed","opening","closing","escapedRegex","RegExp","transform","unsafe","safe","replace","reduce","accumulator"],"mappings":"
|
|
1
|
+
{"version":3,"file":"EmphasisHtmlTransformer.js","sources":["../../src/emphasis/EmphasisHtmlTransformer.ts"],"sourcesContent":["const ESCAPED_OPENING_CHEVRON = '<';\nconst ESCAPED_CLOSING_CHEVRON = '>';\n\ntype Tags = {\n transformed: {\n opening: string;\n closing: string;\n };\n escapedRegex: {\n opening: RegExp;\n closing: RegExp;\n };\n};\n\nclass EmphasisHtmlTransformer {\n tags: Tags[];\n\n constructor(whitelistedTags?: string[]) {\n this.tags = (whitelistedTags || []).map((tag) => {\n return {\n transformed: {\n opening: `<em class=\"emphasis emphasis--${tag}\">`,\n closing: '</em>',\n },\n escapedRegex: {\n opening: new RegExp(`${ESCAPED_OPENING_CHEVRON}${tag}${ESCAPED_CLOSING_CHEVRON}`, 'g'),\n closing: new RegExp(`${ESCAPED_OPENING_CHEVRON}/${tag}${ESCAPED_CLOSING_CHEVRON}`, 'g'),\n },\n };\n });\n }\n\n // Algorithm:\n // 1) Escape all dangerous characters (<,>,&)\n // 2) Replace all escaped, whitelisted tags with styled spans.\n // 3) Transform new line characters to `<br />`s\n //\n // Note: for simplicity this doesn't support tags with non-standard whitespaces, e.g. <positive></ positive>\n transform(unsafe: string): string | null {\n if (!unsafe) {\n return null;\n }\n\n const safe = unsafe.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');\n\n return this.tags\n .reduce((accumulator, tag) => {\n return accumulator\n .replace(tag.escapedRegex.opening, tag.transformed.opening)\n .replace(tag.escapedRegex.closing, tag.transformed.closing);\n }, safe)\n .replace(/\\\\n|\\n/g, '<br />');\n }\n}\n\nexport default EmphasisHtmlTransformer;\n"],"names":["ESCAPED_OPENING_CHEVRON","ESCAPED_CLOSING_CHEVRON","EmphasisHtmlTransformer","tags","constructor","whitelistedTags","map","tag","transformed","opening","closing","escapedRegex","RegExp","transform","unsafe","safe","replace","reduce","accumulator"],"mappings":";;;;AAAA,MAAMA,uBAAuB,GAAG,MAAM,CAAA;AACtC,MAAMC,uBAAuB,GAAG,MAAM,CAAA;AAatC,MAAMC,uBAAuB,CAAA;EAC3BC,IAAI,CAAA;EAEJC,WAAAA,CAAYC,eAA0B,EAAA;IACpC,IAAI,CAACF,IAAI,GAAG,CAACE,eAAe,IAAI,EAAE,EAAEC,GAAG,CAAEC,GAAG,IAAI;MAC9C,OAAO;AACLC,QAAAA,WAAW,EAAE;UACXC,OAAO,EAAE,CAAiCF,8BAAAA,EAAAA,GAAG,CAAI,EAAA,CAAA;AACjDG,UAAAA,OAAO,EAAE,OAAA;SACV;AACDC,QAAAA,YAAY,EAAE;AACZF,UAAAA,OAAO,EAAE,IAAIG,MAAM,CAAC,CAAGZ,EAAAA,uBAAuB,CAAGO,EAAAA,GAAG,CAAGN,EAAAA,uBAAuB,CAAE,CAAA,EAAE,GAAG,CAAC;AACtFS,UAAAA,OAAO,EAAE,IAAIE,MAAM,CAAC,CAAGZ,EAAAA,uBAAuB,CAAIO,CAAAA,EAAAA,GAAG,CAAGN,EAAAA,uBAAuB,CAAE,CAAA,EAAE,GAAG,CAAA;AACvF,SAAA;OACF,CAAA;AACH,KAAC,CAAC,CAAA;AACJ,GAAA;AAEA;AACA;AACA;AACA;AACA;AACA;EACAY,SAASA,CAACC,MAAc,EAAA;IACtB,IAAI,CAACA,MAAM,EAAE;AACX,MAAA,OAAO,IAAI,CAAA;AACb,KAAA;IAEA,MAAMC,IAAI,GAAGD,MAAM,CAACE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAACA,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;IAEtF,OAAO,IAAI,CAACb,IAAI,CACbc,MAAM,CAAC,CAACC,WAAW,EAAEX,GAAG,KAAI;AAC3B,MAAA,OAAOW,WAAW,CACfF,OAAO,CAACT,GAAG,CAACI,YAAY,CAACF,OAAO,EAAEF,GAAG,CAACC,WAAW,CAACC,OAAO,CAAC,CAC1DO,OAAO,CAACT,GAAG,CAACI,YAAY,CAACD,OAAO,EAAEH,GAAG,CAACC,WAAW,CAACE,OAAO,CAAC,CAAA;KAC9D,EAAEK,IAAI,CAAC,CACPC,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAA;AACjC,GAAA;AACD;;;;"}
|
package/build/field/Field.js
CHANGED
|
@@ -93,7 +93,7 @@ const Field = ({
|
|
|
93
93
|
className: "np-field-control",
|
|
94
94
|
children: children
|
|
95
95
|
})]
|
|
96
|
-
}) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert, {
|
|
96
|
+
}) : children, message && /*#__PURE__*/jsxRuntime.jsx(InlineAlert.default, {
|
|
97
97
|
type: sentiment$1,
|
|
98
98
|
id: messageId,
|
|
99
99
|
iconLabel: messageIconLabel,
|
package/build/field/Field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n FieldLabelIdContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n id?: string | null;\n /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n label?: React.ReactNode;\n required?: boolean;\n /** @deprecated use `description` prop instead */\n hint?: React.ReactNode;\n message?: React.ReactNode;\n /**\n * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n messageIconLabel?: string;\n description?: React.ReactNode;\n /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n error?: React.ReactNode;\n sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n className?: string;\n children?: React.ReactNode;\n};\n\nexport const Field = ({\n id,\n label,\n required = true,\n message: propMessage,\n messageIconLabel,\n hint,\n description = hint,\n sentiment: propType = Sentiment.NEUTRAL,\n className,\n children,\n ...props\n}: FieldProps) => {\n const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n const message = propMessage || props.error;\n const hasError = sentiment === Sentiment.NEGATIVE;\n\n const labelId = useId();\n\n const fallbackInputId = useId();\n const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n const messageId = useId();\n const descriptionId = useId();\n\n /**\n * form control can have multiple messages to describe it,\n * e.g the description underneath the label and inline alert\n */\n function ariaDescribedbyByIds() {\n const messageIds = [];\n if (description) {\n messageIds.push(descriptionId);\n }\n if (message) {\n messageIds.push(messageId);\n }\n return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n }\n\n return (\n <FieldLabelIdContextProvider value={labelId}>\n <InputIdContextProvider value={inputId}>\n <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n <InputInvalidProvider value={hasError}>\n <div\n className={clsx(\n 'np-field form-group d-block',\n {\n 'has-success': sentiment === Sentiment.POSITIVE,\n 'has-warning': sentiment === Sentiment.WARNING,\n 'has-error': hasError,\n 'has-info': sentiment === Sentiment.NEUTRAL,\n },\n className,\n )}\n >\n {label != null ? (\n <>\n <Label id={labelId} htmlFor={inputId}>\n {required ? label : <Label.Optional>{label}</Label.Optional>}\n </Label>\n <Label.Description id={descriptionId}>{description}</Label.Description>\n <div className=\"np-field-control\">{children}</div>\n </>\n ) : (\n children\n )}\n\n {message && (\n <InlineAlert type={sentiment} id={messageId} iconLabel={messageIconLabel}>\n {message}\n </InlineAlert>\n )}\n </div>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelIdContextProvider>\n );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlineAlert","type","iconLabel"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n FieldLabelIdContextProvider,\n InputDescribedByProvider,\n InputIdContextProvider,\n InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n id?: string | null;\n /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n label?: React.ReactNode;\n required?: boolean;\n /** @deprecated use `description` prop instead */\n hint?: React.ReactNode;\n message?: React.ReactNode;\n /**\n * Override for the [InlineAlert icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n messageIconLabel?: string;\n description?: React.ReactNode;\n /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n error?: React.ReactNode;\n sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n className?: string;\n children?: React.ReactNode;\n};\n\nexport const Field = ({\n id,\n label,\n required = true,\n message: propMessage,\n messageIconLabel,\n hint,\n description = hint,\n sentiment: propType = Sentiment.NEUTRAL,\n className,\n children,\n ...props\n}: FieldProps) => {\n const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n const message = propMessage || props.error;\n const hasError = sentiment === Sentiment.NEGATIVE;\n\n const labelId = useId();\n\n const fallbackInputId = useId();\n const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n const messageId = useId();\n const descriptionId = useId();\n\n /**\n * form control can have multiple messages to describe it,\n * e.g the description underneath the label and inline alert\n */\n function ariaDescribedbyByIds() {\n const messageIds = [];\n if (description) {\n messageIds.push(descriptionId);\n }\n if (message) {\n messageIds.push(messageId);\n }\n return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n }\n\n return (\n <FieldLabelIdContextProvider value={labelId}>\n <InputIdContextProvider value={inputId}>\n <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n <InputInvalidProvider value={hasError}>\n <div\n className={clsx(\n 'np-field form-group d-block',\n {\n 'has-success': sentiment === Sentiment.POSITIVE,\n 'has-warning': sentiment === Sentiment.WARNING,\n 'has-error': hasError,\n 'has-info': sentiment === Sentiment.NEUTRAL,\n },\n className,\n )}\n >\n {label != null ? (\n <>\n <Label id={labelId} htmlFor={inputId}>\n {required ? label : <Label.Optional>{label}</Label.Optional>}\n </Label>\n <Label.Description id={descriptionId}>{description}</Label.Description>\n <div className=\"np-field-control\">{children}</div>\n </>\n ) : (\n children\n )}\n\n {message && (\n <InlineAlert type={sentiment} id={messageId} iconLabel={messageIconLabel}>\n {message}\n </InlineAlert>\n )}\n </div>\n </InputInvalidProvider>\n </InputDescribedByProvider>\n </InputIdContextProvider>\n </FieldLabelIdContextProvider>\n );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlineAlert","type","iconLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,OAAO,EAAEC,WAAW;EACpBC,gBAAgB;EAChBC,IAAI;AACJC,EAAAA,WAAW,GAAGD,IAAI;AAClBE,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,mBAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC,KAAAA;AAAK,CACG,KAAI;EACf,MAAMN,WAAS,GAAGM,KAAK,CAACC,KAAK,GAAGL,mBAAS,CAACM,QAAQ,GAAGP,QAAQ,CAAA;AAC7D,EAAA,MAAMN,OAAO,GAAGC,WAAW,IAAIU,KAAK,CAACC,KAAK,CAAA;AAC1C,EAAA,MAAME,QAAQ,GAAGT,WAAS,KAAKE,mBAAS,CAACM,QAAQ,CAAA;AAEjD,EAAA,MAAME,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,eAAe,GAAGD,WAAK,EAAE,CAAA;EAC/B,MAAME,OAAO,GAAGrB,EAAE,KAAK,IAAI,GAAIA,EAAE,IAAIoB,eAAe,GAAIE,SAAS,CAAA;AAEjE,EAAA,MAAMC,SAAS,GAAGJ,WAAK,EAAE,CAAA;AACzB,EAAA,MAAMK,aAAa,GAAGL,WAAK,EAAE,CAAA;AAE7B;;;AAGG;EACH,SAASM,oBAAoBA,GAAA;IAC3B,MAAMC,UAAU,GAAG,EAAE,CAAA;AACrB,IAAA,IAAInB,WAAW,EAAE;AACfmB,MAAAA,UAAU,CAACC,IAAI,CAACH,aAAa,CAAC,CAAA;AAChC,KAAA;AACA,IAAA,IAAIrB,OAAO,EAAE;AACXuB,MAAAA,UAAU,CAACC,IAAI,CAACJ,SAAS,CAAC,CAAA;AAC5B,KAAA;AACA,IAAA,OAAOG,UAAU,CAACE,MAAM,GAAG,CAAC,GAAGF,UAAU,CAACG,IAAI,CAAC,GAAG,CAAC,GAAGP,SAAS,CAAA;AACjE,GAAA;EAEA,oBACEQ,cAAA,CAACC,oCAA2B,EAAA;AAACC,IAAAA,KAAK,EAAEd,OAAQ;IAAAL,QAAA,eAC1CiB,cAAA,CAACG,+BAAsB,EAAA;AAACD,MAAAA,KAAK,EAAEX,OAAQ;MAAAR,QAAA,eACrCiB,cAAA,CAACI,iCAAwB,EAAA;QAACF,KAAK,EAAEP,oBAAoB,EAAG;QAAAZ,QAAA,eACtDiB,cAAA,CAACK,6BAAoB,EAAA;AAACH,UAAAA,KAAK,EAAEf,QAAS;AAAAJ,UAAAA,QAAA,eACpCuB,eAAA,CAAA,KAAA,EAAA;AACExB,YAAAA,SAAS,EAAEyB,SAAI,CACb,6BAA6B,EAC7B;AACE,cAAA,aAAa,EAAE7B,WAAS,KAAKE,mBAAS,CAAC4B,QAAQ;AAC/C,cAAA,aAAa,EAAE9B,WAAS,KAAKE,mBAAS,CAAC6B,OAAO;AAC9C,cAAA,WAAW,EAAEtB,QAAQ;AACrB,cAAA,UAAU,EAAET,WAAS,KAAKE,mBAAS,CAACC,OAAAA;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDZ,KAAK,IAAI,IAAI,gBACZmC,eAAA,CAAAI,mBAAA,EAAA;cAAA3B,QAAA,EAAA,cACEiB,cAAA,CAACW,WAAK,EAAA;AAACzC,gBAAAA,EAAE,EAAEkB,OAAQ;AAACwB,gBAAAA,OAAO,EAAErB,OAAQ;gBAAAR,QAAA,EAClCX,QAAQ,GAAGD,KAAK,gBAAG6B,cAAA,CAACW,WAAK,CAACE,QAAQ,EAAA;AAAA9B,kBAAAA,QAAA,EAAEZ,KAAAA;iBAAsB,CAAA;AAAC,eACvD,CACP,eAAA6B,cAAA,CAACW,WAAK,CAACG,WAAW,EAAA;AAAC5C,gBAAAA,EAAE,EAAEwB,aAAc;AAAAX,gBAAAA,QAAA,EAAEN,WAAAA;eAA+B,CACtE,eAAAuB,cAAA,CAAA,KAAA,EAAA;AAAKlB,gBAAAA,SAAS,EAAC,kBAAkB;AAAAC,gBAAAA,QAAA,EAAEA,QAAAA;AAAQ,eAAM,CACnD,CAAA;aAAA,CAAG,GAEHA,QACD,EAEAV,OAAO,iBACN2B,cAAA,CAACe,mBAAW,EAAA;AAACC,cAAAA,IAAI,EAAEtC,WAAU;AAACR,cAAAA,EAAE,EAAEuB,SAAU;AAACwB,cAAAA,SAAS,EAAE1C,gBAAiB;AAAAQ,cAAAA,QAAA,EACtEV,OAAAA;AAAO,aACG,CACd,CAAA;WACE,CAAA;SACe,CAAA;OACE,CAAA;KACJ,CAAA;AAC1B,GAA6B,CAAC,CAAA;AAElC;;;;"}
|