@transferwise/components 46.100.0 → 46.100.2
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.map +1 -1
- package/build/accordion/Accordion.mjs.map +1 -1
- package/build/accordion/AccordionItem/AccordionItem.js.map +1 -1
- package/build/accordion/AccordionItem/AccordionItem.mjs.map +1 -1
- package/build/actionButton/ActionButton.js.map +1 -1
- package/build/actionButton/ActionButton.mjs.map +1 -1
- package/build/actionOption/ActionOption.js.map +1 -1
- package/build/actionOption/ActionOption.mjs.map +1 -1
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/Alert.mjs.map +1 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.js.map +1 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.mjs.map +1 -1
- package/build/avatar/Avatar.js.map +1 -1
- package/build/avatar/Avatar.mjs.map +1 -1
- package/build/avatar/avatarTypes.js.map +1 -1
- package/build/avatar/avatarTypes.mjs.map +1 -1
- package/build/avatarLayout/AvatarLayout.js +1 -1
- package/build/avatarLayout/AvatarLayout.js.map +1 -1
- package/build/avatarLayout/AvatarLayout.mjs +1 -1
- package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
- package/build/avatarView/AvatarView.js.map +1 -1
- package/build/avatarView/AvatarView.mjs.map +1 -1
- package/build/avatarView/NotificationDot.js.map +1 -1
- package/build/avatarView/NotificationDot.mjs.map +1 -1
- package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
- package/build/avatarWrapper/AvatarWrapper.mjs.map +1 -1
- package/build/badge/Badge.js.map +1 -1
- package/build/badge/Badge.mjs.map +1 -1
- package/build/badge/BadgeAssets.js.map +1 -1
- package/build/badge/BadgeAssets.mjs.map +1 -1
- package/build/body/Body.js.map +1 -1
- package/build/body/Body.mjs.map +1 -1
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs.map +1 -1
- package/build/button/Button.resolver.js.map +1 -1
- package/build/button/Button.resolver.mjs.map +1 -1
- package/build/button/LegacyButton.js.map +1 -1
- package/build/button/LegacyButton.mjs.map +1 -1
- package/build/button/legacyUtils/legacyUtils.js.map +1 -1
- package/build/button/legacyUtils/legacyUtils.mjs.map +1 -1
- package/build/card/Card.js.map +1 -1
- package/build/card/Card.mjs.map +1 -1
- package/build/carousel/Carousel.js.map +1 -1
- package/build/carousel/Carousel.mjs.map +1 -1
- package/build/checkbox/Checkbox.js.map +1 -1
- package/build/checkbox/Checkbox.mjs.map +1 -1
- package/build/checkboxButton/CheckboxButton.js.map +1 -1
- package/build/checkboxButton/CheckboxButton.mjs.map +1 -1
- package/build/checkboxOption/CheckboxOption.js.map +1 -1
- package/build/checkboxOption/CheckboxOption.mjs.map +1 -1
- package/build/chevron/Chevron.js.map +1 -1
- package/build/chevron/Chevron.mjs.map +1 -1
- package/build/chips/Chip.js.map +1 -1
- package/build/chips/Chip.mjs.map +1 -1
- package/build/chips/Chips.js.map +1 -1
- package/build/chips/Chips.mjs.map +1 -1
- package/build/circularButton/CircularButton.js.map +1 -1
- package/build/circularButton/CircularButton.mjs.map +1 -1
- package/build/common/DOMOperations/DOMOperations.js.map +1 -1
- package/build/common/DOMOperations/DOMOperations.mjs.map +1 -1
- package/build/common/Option/Option.js.map +1 -1
- package/build/common/Option/Option.mjs.map +1 -1
- package/build/common/RadioButton/RadioButton.js.map +1 -1
- package/build/common/RadioButton/RadioButton.mjs.map +1 -1
- package/build/common/bottomSheet/BottomSheet.js.map +1 -1
- package/build/common/bottomSheet/BottomSheet.mjs.map +1 -1
- package/build/common/card/Card.js.map +1 -1
- package/build/common/card/Card.mjs.map +1 -1
- package/build/common/circle/Circle.js.map +1 -1
- package/build/common/circle/Circle.mjs.map +1 -1
- package/build/common/closeButton/CloseButton.js.map +1 -1
- package/build/common/closeButton/CloseButton.mjs.map +1 -1
- package/build/common/colors.js.map +1 -1
- package/build/common/colors.mjs.map +1 -1
- package/build/common/dateUtils/getDayNames/getDayNames.js.map +1 -1
- package/build/common/dateUtils/getDayNames/getDayNames.mjs.map +1 -1
- package/build/common/dateUtils/getMonthNames/getMonthNames.js.map +1 -1
- package/build/common/dateUtils/getMonthNames/getMonthNames.mjs.map +1 -1
- package/build/common/dateUtils/isDateValid/isDateValid.js.map +1 -1
- package/build/common/dateUtils/isDateValid/isDateValid.mjs.map +1 -1
- package/build/common/dateUtils/moveToWithinRange/moveToWithinRange.js.map +1 -1
- package/build/common/dateUtils/moveToWithinRange/moveToWithinRange.mjs.map +1 -1
- package/build/common/deviceDetection/deviceDetection.js.map +1 -1
- package/build/common/deviceDetection/deviceDetection.mjs.map +1 -1
- package/build/common/direction.js.map +1 -1
- package/build/common/direction.mjs.map +1 -1
- package/build/common/domHelpers/documentIosClick.js.map +1 -1
- package/build/common/domHelpers/documentIosClick.mjs.map +1 -1
- package/build/common/fileType.js.map +1 -1
- package/build/common/fileType.mjs.map +1 -1
- package/build/common/flowHeader/FlowHeader.js.map +1 -1
- package/build/common/flowHeader/FlowHeader.mjs.map +1 -1
- package/build/common/focusBoundary/FocusBoundary.js.map +1 -1
- package/build/common/focusBoundary/FocusBoundary.mjs.map +1 -1
- package/build/common/historyNavigator/historyNavigator.js.map +1 -1
- package/build/common/historyNavigator/historyNavigator.mjs.map +1 -1
- package/build/common/hooks/useConditionalListener/useConditionalListener.js.map +1 -1
- package/build/common/hooks/useConditionalListener/useConditionalListener.mjs.map +1 -1
- package/build/common/hooks/useDirection/useDirection.js.map +1 -1
- package/build/common/hooks/useDirection/useDirection.mjs.map +1 -1
- package/build/common/hooks/useEffectEvent.js.map +1 -1
- package/build/common/hooks/useEffectEvent.mjs.map +1 -1
- package/build/common/hooks/useHasIntersected/useHasIntersected.js.map +1 -1
- package/build/common/hooks/useHasIntersected/useHasIntersected.mjs.map +1 -1
- package/build/common/hooks/useLayout/useLayout.js.map +1 -1
- package/build/common/hooks/useLayout/useLayout.mjs.map +1 -1
- package/build/common/hooks/useMedia.js.map +1 -1
- package/build/common/hooks/useMedia.mjs.map +1 -1
- package/build/common/hooks/useResizeObserver.js.map +1 -1
- package/build/common/hooks/useResizeObserver.mjs.map +1 -1
- package/build/common/hooks/useScreenSize.js.map +1 -1
- package/build/common/hooks/useScreenSize.mjs.map +1 -1
- package/build/common/hooks/useVirtualKeyboard.js.map +1 -1
- package/build/common/hooks/useVirtualKeyboard.mjs.map +1 -1
- package/build/common/initials.js.map +1 -1
- package/build/common/initials.mjs.map +1 -1
- package/build/common/locale/index.js +1 -1
- package/build/common/locale/index.js.map +1 -1
- package/build/common/locale/index.mjs +1 -1
- package/build/common/locale/index.mjs.map +1 -1
- package/build/common/panel/Panel.js.map +1 -1
- package/build/common/panel/Panel.mjs.map +1 -1
- package/build/common/propsValues/breakpoint.js.map +1 -1
- package/build/common/propsValues/breakpoint.mjs.map +1 -1
- package/build/common/propsValues/control.js.map +1 -1
- package/build/common/propsValues/control.mjs.map +1 -1
- package/build/common/propsValues/dateMode.js.map +1 -1
- package/build/common/propsValues/dateMode.mjs.map +1 -1
- package/build/common/propsValues/layouts.js.map +1 -1
- package/build/common/propsValues/layouts.mjs.map +1 -1
- package/build/common/propsValues/markdownNodeType.js.map +1 -1
- package/build/common/propsValues/markdownNodeType.mjs.map +1 -1
- package/build/common/propsValues/monthFormat.js.map +1 -1
- package/build/common/propsValues/monthFormat.mjs.map +1 -1
- package/build/common/propsValues/position.js.map +1 -1
- package/build/common/propsValues/position.mjs.map +1 -1
- package/build/common/propsValues/profileType.js.map +1 -1
- package/build/common/propsValues/profileType.mjs.map +1 -1
- package/build/common/propsValues/scroll.js.map +1 -1
- package/build/common/propsValues/scroll.mjs.map +1 -1
- package/build/common/propsValues/sentiment.js.map +1 -1
- package/build/common/propsValues/sentiment.mjs.map +1 -1
- package/build/common/propsValues/size.js.map +1 -1
- package/build/common/propsValues/size.mjs.map +1 -1
- package/build/common/propsValues/status.js.map +1 -1
- package/build/common/propsValues/status.mjs.map +1 -1
- package/build/common/propsValues/type.js.map +1 -1
- package/build/common/propsValues/type.mjs.map +1 -1
- package/build/common/propsValues/typography.js.map +1 -1
- package/build/common/propsValues/typography.mjs.map +1 -1
- package/build/common/propsValues/variant.js.map +1 -1
- package/build/common/propsValues/variant.mjs.map +1 -1
- package/build/common/propsValues/width.js.map +1 -1
- package/build/common/propsValues/width.mjs.map +1 -1
- package/build/common/responsivePanel/ResponsivePanel.js.map +1 -1
- package/build/common/responsivePanel/ResponsivePanel.mjs.map +1 -1
- package/build/common/textFormat/formatWithPattern/formatWithPattern.js.map +1 -1
- package/build/common/textFormat/formatWithPattern/formatWithPattern.mjs.map +1 -1
- package/build/common/textFormat/getCursorPositionAfterKeystroke/getCursorPositionAfterKeystroke.js.map +1 -1
- package/build/common/textFormat/getCursorPositionAfterKeystroke/getCursorPositionAfterKeystroke.mjs.map +1 -1
- package/build/common/textFormat/getDistanceToSymbol/getDistanceToSymbol.js.map +1 -1
- package/build/common/textFormat/getDistanceToSymbol/getDistanceToSymbol.mjs.map +1 -1
- package/build/common/textFormat/getSymbolsInPatternWithPosition/getSymbolsInPatternWithPosition.js.map +1 -1
- package/build/common/textFormat/getSymbolsInPatternWithPosition/getSymbolsInPatternWithPosition.mjs.map +1 -1
- package/build/common/textFormat/unformatWithPattern/unformatWithPattern.js.map +1 -1
- package/build/common/textFormat/unformatWithPattern/unformatWithPattern.mjs.map +1 -1
- package/build/common/theme.js.map +1 -1
- package/build/common/theme.mjs.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
- package/build/dateInput/DateInput.js.map +1 -1
- package/build/dateInput/DateInput.mjs.map +1 -1
- package/build/dateInput/utils/convertToLocalMidnight/convertToLocalMidnight.js.map +1 -1
- package/build/dateInput/utils/convertToLocalMidnight/convertToLocalMidnight.mjs.map +1 -1
- package/build/dateLookup/DateLookup.js +3 -2
- package/build/dateLookup/DateLookup.js.map +1 -1
- package/build/dateLookup/DateLookup.mjs +3 -2
- package/build/dateLookup/DateLookup.mjs.map +1 -1
- package/build/dateLookup/dateHeader/DateHeader.js.map +1 -1
- package/build/dateLookup/dateHeader/DateHeader.mjs.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
- package/build/dateLookup/dayCalendar/DayCalendar.js.map +1 -1
- package/build/dateLookup/dayCalendar/DayCalendar.mjs.map +1 -1
- package/build/dateLookup/dayCalendar/table/DayCalendarTable.js.map +1 -1
- package/build/dateLookup/dayCalendar/table/DayCalendarTable.mjs.map +1 -1
- package/build/dateLookup/getStartOfDay/getStartOfDay.js.map +1 -1
- package/build/dateLookup/getStartOfDay/getStartOfDay.mjs.map +1 -1
- package/build/dateLookup/monthCalendar/MonthCalendar.js.map +1 -1
- package/build/dateLookup/monthCalendar/MonthCalendar.mjs.map +1 -1
- package/build/dateLookup/monthCalendar/table/MonthCalendarTable.js.map +1 -1
- package/build/dateLookup/monthCalendar/table/MonthCalendarTable.mjs.map +1 -1
- package/build/dateLookup/tableLink/TableLink.js.map +1 -1
- package/build/dateLookup/tableLink/TableLink.mjs.map +1 -1
- package/build/dateLookup/yearCalendar/YearCalendar.js.map +1 -1
- package/build/dateLookup/yearCalendar/YearCalendar.mjs.map +1 -1
- package/build/dateLookup/yearCalendar/table/YearCalendarTable.js.map +1 -1
- package/build/dateLookup/yearCalendar/table/YearCalendarTable.mjs.map +1 -1
- package/build/decision/Decision.js.map +1 -1
- package/build/decision/Decision.mjs.map +1 -1
- package/build/definitionList/DefinitionList.js.map +1 -1
- package/build/definitionList/DefinitionList.mjs.map +1 -1
- package/build/dimmer/Dimmer.js.map +1 -1
- package/build/dimmer/Dimmer.mjs.map +1 -1
- package/build/dimmer/dimmerManager/DimmerManager.js.map +1 -1
- package/build/dimmer/dimmerManager/DimmerManager.mjs.map +1 -1
- package/build/display/Display.js.map +1 -1
- package/build/display/Display.mjs.map +1 -1
- package/build/divider/Divider.js.map +1 -1
- package/build/divider/Divider.mjs.map +1 -1
- package/build/drawer/Drawer.js.map +1 -1
- package/build/drawer/Drawer.mjs.map +1 -1
- package/build/dropFade/DropFade.js.map +1 -1
- package/build/dropFade/DropFade.mjs.map +1 -1
- package/build/emphasis/Emphasis.js.map +1 -1
- package/build/emphasis/Emphasis.mjs.map +1 -1
- package/build/emphasis/EmphasisHtmlTransformer.js.map +1 -1
- package/build/emphasis/EmphasisHtmlTransformer.mjs.map +1 -1
- package/build/field/Field.js.map +1 -1
- package/build/field/Field.mjs.map +1 -1
- package/build/flowNavigation/FlowNavigation.js.map +1 -1
- package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
- package/build/flowNavigation/animatedLabel/AnimatedLabel.js.map +1 -1
- package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs.map +1 -1
- package/build/header/Header.js.map +1 -1
- package/build/header/Header.mjs.map +1 -1
- package/build/i18n/index.js +2 -0
- package/build/i18n/index.js.map +1 -1
- package/build/i18n/index.mjs +2 -0
- package/build/i18n/index.mjs.map +1 -1
- package/build/i18n/nl.json.js +81 -0
- package/build/i18n/nl.json.js.map +1 -0
- package/build/i18n/nl.json.mjs +77 -0
- package/build/i18n/nl.json.mjs.map +1 -0
- package/build/image/Image.js.map +1 -1
- package/build/image/Image.mjs.map +1 -1
- package/build/info/Info.js.map +1 -1
- package/build/info/Info.mjs.map +1 -1
- package/build/info/infoPresentations.js.map +1 -1
- package/build/info/infoPresentations.mjs.map +1 -1
- package/build/inlineAlert/InlineAlert.js.map +1 -1
- package/build/inlineAlert/InlineAlert.mjs.map +1 -1
- package/build/inputs/Input.js.map +1 -1
- package/build/inputs/Input.mjs.map +1 -1
- package/build/inputs/InputGroup.js.map +1 -1
- package/build/inputs/InputGroup.mjs.map +1 -1
- package/build/inputs/SearchInput.js.map +1 -1
- package/build/inputs/SearchInput.mjs.map +1 -1
- package/build/inputs/SelectInput.js.map +1 -1
- package/build/inputs/SelectInput.mjs.map +1 -1
- package/build/inputs/_BottomSheet.js.map +1 -1
- package/build/inputs/_BottomSheet.mjs.map +1 -1
- package/build/inputs/_ButtonInput.js.map +1 -1
- package/build/inputs/_ButtonInput.mjs.map +1 -1
- package/build/inputs/_Popover.js.map +1 -1
- package/build/inputs/_Popover.mjs.map +1 -1
- package/build/inputs/contexts.js.map +1 -1
- package/build/inputs/contexts.mjs.map +1 -1
- package/build/instructionsList/InstructionsList.js.map +1 -1
- package/build/instructionsList/InstructionsList.mjs.map +1 -1
- package/build/label/Label.js.map +1 -1
- package/build/label/Label.mjs.map +1 -1
- package/build/legacylistItem/LegacyListItem.js.map +1 -1
- package/build/legacylistItem/LegacyListItem.mjs.map +1 -1
- package/build/legacylistItem/List.js.map +1 -1
- package/build/legacylistItem/List.mjs.map +1 -1
- package/build/link/Link.js.map +1 -1
- package/build/link/Link.mjs.map +1 -1
- package/build/loader/Loader.js.map +1 -1
- package/build/loader/Loader.mjs.map +1 -1
- package/build/logo/Logo.js.map +1 -1
- package/build/logo/Logo.mjs.map +1 -1
- package/build/logo/logo-assets.js.map +1 -1
- package/build/logo/logo-assets.mjs.map +1 -1
- package/build/main.css +4 -94
- package/build/markdown/Markdown.js.map +1 -1
- package/build/markdown/Markdown.mjs.map +1 -1
- package/build/mocks.js.map +1 -1
- package/build/mocks.mjs.map +1 -1
- package/build/modal/Modal.js.map +1 -1
- package/build/modal/Modal.mjs.map +1 -1
- package/build/money/Money.js.map +1 -1
- package/build/money/Money.mjs.map +1 -1
- package/build/moneyInput/MoneyInput.js.map +1 -1
- package/build/moneyInput/MoneyInput.mjs.map +1 -1
- package/build/moneyInput/currencyFormatting.js.map +1 -1
- package/build/moneyInput/currencyFormatting.mjs.map +1 -1
- package/build/navigationOption/NavigationOption.js.map +1 -1
- package/build/navigationOption/NavigationOption.mjs.map +1 -1
- package/build/navigationOptionsList/NavigationOptionsList.js.map +1 -1
- package/build/navigationOptionsList/NavigationOptionsList.mjs.map +1 -1
- package/build/nudge/Nudge.js.map +1 -1
- package/build/nudge/Nudge.mjs.map +1 -1
- package/build/overlayHeader/OverlayHeader.js.map +1 -1
- package/build/overlayHeader/OverlayHeader.mjs.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
- package/build/phoneNumberInput/data/countries.js.map +1 -1
- package/build/phoneNumberInput/data/countries.mjs.map +1 -1
- package/build/phoneNumberInput/utils/explodeNumberModel/index.js.map +1 -1
- package/build/phoneNumberInput/utils/explodeNumberModel/index.mjs.map +1 -1
- package/build/phoneNumberInput/utils/findCountryByCode/index.js.map +1 -1
- package/build/phoneNumberInput/utils/findCountryByCode/index.mjs.map +1 -1
- package/build/phoneNumberInput/utils/findCountryByPrefix/index.js.map +1 -1
- package/build/phoneNumberInput/utils/findCountryByPrefix/index.mjs.map +1 -1
- package/build/phoneNumberInput/utils/groupCountriesByPrefix/groupCountriesByPrefix.js.map +1 -1
- package/build/phoneNumberInput/utils/groupCountriesByPrefix/groupCountriesByPrefix.mjs.map +1 -1
- package/build/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.js.map +1 -1
- package/build/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.mjs.map +1 -1
- package/build/phoneNumberInput/utils/longestMatchingPrefix/index.js.map +1 -1
- package/build/phoneNumberInput/utils/longestMatchingPrefix/index.mjs.map +1 -1
- package/build/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.js.map +1 -1
- package/build/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.mjs.map +1 -1
- package/build/popover/Popover.js.map +1 -1
- package/build/popover/Popover.mjs.map +1 -1
- package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.js.map +1 -1
- package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.mjs.map +1 -1
- package/build/primitives/PrimitiveButton/PrimitiveButton.js.map +1 -1
- package/build/primitives/PrimitiveButton/PrimitiveButton.mjs.map +1 -1
- package/build/processIndicator/ProcessIndicator.js.map +1 -1
- package/build/processIndicator/ProcessIndicator.mjs.map +1 -1
- package/build/progress/Progress.js.map +1 -1
- package/build/progress/Progress.mjs.map +1 -1
- package/build/progressBar/ProgressBar.js.map +1 -1
- package/build/progressBar/ProgressBar.mjs.map +1 -1
- package/build/promoCard/PromoCard.js.map +1 -1
- package/build/promoCard/PromoCard.mjs.map +1 -1
- package/build/promoCard/PromoCardContext.js.map +1 -1
- package/build/promoCard/PromoCardContext.mjs.map +1 -1
- package/build/promoCard/PromoCardGroup.js.map +1 -1
- package/build/promoCard/PromoCardGroup.mjs.map +1 -1
- package/build/promoCard/PromoCardIndicator.js.map +1 -1
- package/build/promoCard/PromoCardIndicator.mjs.map +1 -1
- package/build/provider/Provider.js.map +1 -1
- package/build/provider/Provider.mjs.map +1 -1
- package/build/provider/direction/DirectionProvider.js.map +1 -1
- package/build/provider/direction/DirectionProvider.mjs.map +1 -1
- package/build/provider/language/LanguageProvider.js.map +1 -1
- package/build/provider/language/LanguageProvider.mjs.map +1 -1
- package/build/provider/overlay/OverlayIdProvider.js.map +1 -1
- package/build/provider/overlay/OverlayIdProvider.mjs.map +1 -1
- package/build/radio/Radio.js.map +1 -1
- package/build/radio/Radio.mjs.map +1 -1
- package/build/radioGroup/RadioGroup.js.map +1 -1
- package/build/radioGroup/RadioGroup.mjs.map +1 -1
- package/build/radioOption/RadioOption.js.map +1 -1
- package/build/radioOption/RadioOption.mjs.map +1 -1
- package/build/section/Section.js.map +1 -1
- package/build/section/Section.mjs.map +1 -1
- package/build/segmentedControl/SegmentedControl.js.map +1 -1
- package/build/segmentedControl/SegmentedControl.mjs.map +1 -1
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.mjs.map +1 -1
- package/build/select/option/Option.js.map +1 -1
- package/build/select/option/Option.mjs.map +1 -1
- package/build/select/searchBox/SearchBox.js.map +1 -1
- package/build/select/searchBox/SearchBox.mjs.map +1 -1
- package/build/slidingPanel/SlidingPanel.js.map +1 -1
- package/build/slidingPanel/SlidingPanel.mjs.map +1 -1
- package/build/snackbar/Snackbar.js.map +1 -1
- package/build/snackbar/Snackbar.mjs.map +1 -1
- package/build/snackbar/SnackbarContext.js.map +1 -1
- package/build/snackbar/SnackbarContext.mjs.map +1 -1
- package/build/snackbar/SnackbarProvider.js.map +1 -1
- package/build/snackbar/SnackbarProvider.mjs.map +1 -1
- package/build/snackbar/useSnackbar.js.map +1 -1
- package/build/snackbar/useSnackbar.mjs.map +1 -1
- package/build/statusIcon/StatusIcon.js.map +1 -1
- package/build/statusIcon/StatusIcon.mjs.map +1 -1
- package/build/stepper/Stepper.js.map +1 -1
- package/build/stepper/Stepper.mjs.map +1 -1
- package/build/stepper/deviceDetection.js.map +1 -1
- package/build/stepper/deviceDetection.mjs.map +1 -1
- package/build/sticky/Sticky.js.map +1 -1
- package/build/sticky/Sticky.mjs.map +1 -1
- package/build/styles/accordion/Accordion.css +27 -16
- package/build/styles/avatar/Avatar.css +95 -50
- package/build/styles/inputs/Input.css +37 -21
- package/build/styles/inputs/TextArea.css +35 -20
- package/build/styles/loader/Loader.css +4 -90
- package/build/styles/main.css +4 -94
- package/build/styles/popover/Popover.css +19 -12
- package/build/styles/select/Select.css +131 -68
- package/build/styles/switch/Switch.css +27 -16
- package/build/styles/tile/Tile.css +31 -18
- package/build/summary/Summary.js.map +1 -1
- package/build/summary/Summary.mjs.map +1 -1
- package/build/switch/Switch.js.map +1 -1
- package/build/switch/Switch.mjs.map +1 -1
- package/build/switchOption/SwitchOption.js.map +1 -1
- package/build/switchOption/SwitchOption.mjs.map +1 -1
- package/build/table/Table.js.map +1 -1
- package/build/table/Table.mjs.map +1 -1
- package/build/table/TableCell.js.map +1 -1
- package/build/table/TableCell.mjs.map +1 -1
- package/build/table/TableHeader.js.map +1 -1
- package/build/table/TableHeader.mjs.map +1 -1
- package/build/table/TableRow.js.map +1 -1
- package/build/table/TableRow.mjs.map +1 -1
- package/build/table/TableStatusText.js.map +1 -1
- package/build/table/TableStatusText.mjs.map +1 -1
- package/build/tabs/Tab.js.map +1 -1
- package/build/tabs/Tab.mjs.map +1 -1
- package/build/tabs/TabList.js.map +1 -1
- package/build/tabs/TabList.mjs.map +1 -1
- package/build/tabs/TabPanel.js.map +1 -1
- package/build/tabs/TabPanel.mjs.map +1 -1
- package/build/tabs/Tabs.js.map +1 -1
- package/build/tabs/Tabs.mjs.map +1 -1
- package/build/tabs/utils.js.map +1 -1
- package/build/tabs/utils.mjs.map +1 -1
- package/build/tile/Tile.js.map +1 -1
- package/build/tile/Tile.mjs.map +1 -1
- package/build/title/Title.js.map +1 -1
- package/build/title/Title.mjs.map +1 -1
- package/build/tooltip/Tooltip.js.map +1 -1
- package/build/tooltip/Tooltip.mjs.map +1 -1
- package/build/typeahead/Typeahead.js.map +1 -1
- package/build/typeahead/Typeahead.mjs.map +1 -1
- package/build/typeahead/typeaheadInput/TypeaheadInput.js.map +1 -1
- package/build/typeahead/typeaheadInput/TypeaheadInput.mjs.map +1 -1
- package/build/typeahead/typeaheadOption/TypeaheadOption.js.map +1 -1
- package/build/typeahead/typeaheadOption/TypeaheadOption.mjs.map +1 -1
- package/build/typeahead/util/highlight.js.map +1 -1
- package/build/typeahead/util/highlight.mjs.map +1 -1
- package/build/types/common/locale/index.d.ts.map +1 -1
- package/build/types/dateLookup/DateLookup.d.ts +2 -2
- package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
- package/build/types/i18n/index.d.ts.map +1 -1
- package/build/types/test-utils/story-config.d.ts +2 -3
- package/build/types/test-utils/story-config.d.ts.map +1 -1
- package/build/upload/Upload.js.map +1 -1
- package/build/upload/Upload.mjs.map +1 -1
- package/build/upload/steps/completeStep/completeStep.js.map +1 -1
- package/build/upload/steps/completeStep/completeStep.mjs.map +1 -1
- package/build/upload/steps/processingStep/processingStep.js.map +1 -1
- package/build/upload/steps/processingStep/processingStep.mjs.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
- package/build/upload/utils/asyncFileRead/asyncFileRead.js.map +1 -1
- package/build/upload/utils/asyncFileRead/asyncFileRead.mjs.map +1 -1
- package/build/upload/utils/getFileType/getFileType.js.map +1 -1
- package/build/upload/utils/getFileType/getFileType.mjs.map +1 -1
- package/build/upload/utils/isSizeValid/isSizeValid.js.map +1 -1
- package/build/upload/utils/isSizeValid/isSizeValid.mjs.map +1 -1
- package/build/upload/utils/isTypeValid/isTypeValid.js.map +1 -1
- package/build/upload/utils/isTypeValid/isTypeValid.mjs.map +1 -1
- package/build/upload/utils/postData/postData.js.map +1 -1
- package/build/upload/utils/postData/postData.mjs.map +1 -1
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
- package/build/uploadInput/uploadButton/defaults.js.map +1 -1
- package/build/uploadInput/uploadButton/defaults.mjs.map +1 -1
- package/build/uploadInput/uploadButton/getAllowedFileTypes.js.map +1 -1
- package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
- package/build/uploadInput/uploadItem/UploadItemLink.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItemLink.mjs.map +1 -1
- package/build/utilities/cssValueWithUnit.js.map +1 -1
- package/build/utilities/cssValueWithUnit.mjs.map +1 -1
- package/build/utilities/logActionRequired.js.map +1 -1
- package/build/utilities/logActionRequired.mjs.map +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.js.map +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.mjs.map +1 -1
- package/build/withId/withId.js.map +1 -1
- package/build/withId/withId.mjs.map +1 -1
- package/build/withNextPortal/withNextPortal.js.map +1 -1
- package/build/withNextPortal/withNextPortal.mjs.map +1 -1
- package/package.json +37 -45
- package/src/accordion/Accordion.css +27 -16
- package/src/accordion/Accordion.story.tsx +31 -22
- package/src/actionButton/ActionButton.story.tsx +3 -3
- package/src/actionOption/ActionOption.story.tsx +2 -3
- package/src/alert/Alert.story.tsx +3 -3
- package/src/alert/Alert.tests.story.tsx +2 -2
- package/src/avatar/Avatar.css +95 -50
- package/src/avatar/Avatar.spec.tsx +7 -4
- package/src/avatar/Avatar.story.tsx +3 -3
- package/src/avatarLayout/AvatarLayout.story.tsx +1 -4
- package/src/avatarLayout/AvatarLayout.tsx +1 -1
- package/src/avatarView/AvatarView.story.tsx +1 -7
- package/src/avatarWrapper/AvatarWrapper.story.tsx +3 -3
- package/src/badge/Badge.story.tsx +49 -29
- package/src/body/Body.story.tsx +0 -1
- package/src/button/Button.accessibility.docs.mdx +1 -1
- package/src/button/Button.story.tsx +3 -3
- package/src/button/Button.tests.story.tsx +2 -2
- package/src/button/LegacyButton.story.tsx +4 -3
- package/src/card/Card.story.tsx +2 -3
- package/src/carousel/Carousel.story.tsx +1 -1
- package/src/checkbox/Checkbox.story.tsx +2 -3
- package/src/checkboxButton/CheckboxButton.story.tsx +3 -3
- package/src/checkboxOption/CheckboxOption.story.tsx +35 -30
- package/src/chevron/Chevron.story.tsx +1 -2
- package/src/chips/Chips.story.tsx +1 -2
- package/src/circularButton/CircularButton.story.tsx +2 -2
- package/src/circularButton/CircularButton.tests.story.tsx +1 -1
- package/src/common/bottomSheet/BottomSheet.story.tsx +7 -6
- package/src/common/card/Card.story.tsx +1 -2
- package/src/common/circle/Circle.story.tsx +2 -3
- package/src/common/locale/index.spec.ts +29 -17
- package/src/common/locale/index.ts +2 -0
- package/src/common/responsivePanel/ResponsivePanel.spec.js +8 -29
- package/src/criticalBanner/CriticalCommsBanner.story.tsx +1 -2
- package/src/dateInput/DateInput.story.tsx +2 -3
- package/src/dateInput/DateInput.tests.story.tsx +2 -2
- package/src/dateLookup/DateLookup.spec.tsx +5 -5
- package/src/dateLookup/DateLookup.story.tsx +43 -71
- package/src/dateLookup/DateLookup.tests.story.tsx +3 -3
- package/src/dateLookup/DateLookup.tsx +4 -1
- package/src/decision/Decision.story.tsx +24 -49
- package/src/definitionList/DefinitionList.story.tsx +1 -1
- package/src/dimmer/Dimmer.story.tsx +2 -2
- package/src/divider/Divider.accessibility.docs.mdx +1 -1
- package/src/divider/Divider.story.tsx +2 -2
- package/src/drawer/Drawer.story.tsx +13 -7
- package/src/dropFade/DropFade.story.tsx +1 -1
- package/src/emphasis/Emphasis.spec.tsx +8 -8
- package/src/emphasis/Emphasis.story.tsx +1 -2
- package/src/field/Field.story.tsx +4 -4
- package/src/flowNavigation/FlowNavigation.story.tsx +305 -260
- package/src/i18n/index.ts +2 -0
- package/src/iconButton/IconButton.story.tsx +2 -3
- package/src/image/Image.story.tsx +27 -54
- package/src/info/Info.story.tsx +3 -2
- package/src/inlineAlert/InlineAlert.story.tsx +1 -1
- package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx +3 -2
- package/src/inputs/Input.css +37 -21
- package/src/inputs/InputGroup.story.tsx +1 -1
- package/src/inputs/SearchInput.story.tsx +1 -1
- package/src/inputs/SelectInput.docs.mdx +1 -1
- package/src/inputs/SelectInput.story.tsx +3 -3
- package/src/inputs/TextArea.css +35 -20
- package/src/instructionsList/InstructionsList.story.tsx +2 -3
- package/src/label/Label.story.tsx +0 -1
- package/src/legacylistItem/LegacyListItem.story.tsx +1 -2
- package/src/loader/Loader.css +4 -90
- package/src/loader/Loader.story.tsx +1 -2
- package/src/logo/Logo.story.tsx +1 -2
- package/src/main.css +4 -94
- package/src/markdown/Markdown.story.tsx +1 -2
- package/src/modal/Modal.story.tsx +13 -8
- package/src/money/Money.story.tsx +1 -1
- package/src/moneyInput/MoneyInput.docs.mdx +1 -1
- package/src/moneyInput/MoneyInput.spec.tsx +8 -5
- package/src/moneyInput/MoneyInput.story.tsx +2 -3
- package/src/moneyInput/currencyFormatting.spec.ts +1 -1
- package/src/navigationOption/NavigationOption.story.tsx +264 -226
- package/src/nudge/Nudge.story.tsx +1 -1
- package/src/overlayHeader/OverlayHeader.story.tsx +32 -24
- package/src/phoneNumberInput/PhoneNumberInput.story.tsx +1 -2
- package/src/phoneNumberInput/utils/setDefaultPrefix/setDefaultPrefix.spec.ts +6 -3
- package/src/popover/Popover.css +19 -12
- package/src/popover/Popover.story.tsx +3 -3
- package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx +2 -3
- package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.tests.story.tsx +2 -2
- package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx +2 -3
- package/src/primitives/PrimitiveButton/stories/PrimitiveButton.tests.story.tsx +2 -3
- package/src/processIndicator/ProcessIndicator.story.tsx +1 -2
- package/src/progress/Progress.story.tsx +1 -1
- package/src/progressBar/ProgressBar.story.tsx +1 -2
- package/src/promoCard/PromoCard.story.tsx +2 -2
- package/src/promoCard/PromoCardGroup.story.tsx +1 -2
- package/src/provider/Provider.spec.tsx +2 -2
- package/src/provider/Provider.story.tsx +1 -1
- package/src/provider/direction/DirectionProvider.spec.tsx +1 -1
- package/src/provider/language/LanguageProvider.spec.tsx +1 -1
- package/src/provider/theme/ThemeProvider.story.tsx +1 -1
- package/src/radio/Radio.story.tsx +59 -42
- package/src/radioGroup/RadioGroup.story.tsx +2 -2
- package/src/radioOption/RadioOption.story.tsx +73 -38
- package/src/segmentedControl/SegmentedControl.story.tsx +1 -1
- package/src/select/Select.css +131 -68
- package/src/select/Select.story.tsx +385 -397
- package/src/slidingPanel/SlidingPanel.story.tsx +30 -13
- package/src/snackbar/Snackbar.story.tsx +50 -36
- package/src/snackbar/Snackbar.tests.story.tsx +3 -2
- package/src/statusIcon/StatusIcon.docs.mdx +1 -1
- package/src/statusIcon/StatusIcon.spec.tsx +8 -5
- package/src/statusIcon/StatusIcon.story.tsx +2 -2
- package/src/stepper/Stepper.story.tsx +2 -3
- package/src/stepper/Stepper.tests.story.tsx +2 -2
- package/src/sticky/Sticky.story.tsx +2 -2
- package/src/summary/Summary.story.tsx +18 -17
- package/src/switch/Switch.css +27 -16
- package/src/switch/Switch.story.tsx +2 -3
- package/src/switchOption/SwitchOption.story.tsx +2 -2
- package/src/table/Table.story.tsx +1 -2
- package/src/tabs/Tabs.story.tsx +0 -1
- package/src/test-utils/story-config.ts +9 -6
- package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx +2 -2
- package/src/tile/Tile.css +31 -18
- package/src/tile/Tile.story.tsx +43 -43
- package/src/tooltip/Tooltip.story.tsx +2 -3
- package/src/typeahead/Typeahead.story.tsx +3 -2
- package/src/upload/Upload.story.tsx +3 -3
- package/src/upload/Upload.tests.story.tsx +2 -2
- package/src/upload/utils/isTypeValid/isTypeValid.spec.ts +3 -1
- package/src/uploadInput/UploadInput.story.tsx +1 -2
- package/src/uploadInput/UploadInput.tests.story.tsx +3 -3
- package/src/withId/withId.docs.mdx +1 -1
- package/src/withId/withId.story.tsx +1 -1
- package/src/common/responsivePanel/__snapshots__/ResponsivePanel.spec.js.snap +0 -21
|
@@ -1,49 +1,62 @@
|
|
|
1
|
-
|
|
2
|
-
}@media (min-width: 768px) {
|
|
3
|
-
}.np-tile {
|
|
1
|
+
.np-tile {
|
|
4
2
|
min-width: 120px;
|
|
5
3
|
border-radius: 10px;
|
|
6
4
|
border-radius: var(--radius-small);
|
|
7
5
|
width: 100%;
|
|
8
|
-
}
|
|
6
|
+
}
|
|
7
|
+
.np-theme-personal .np-tile {
|
|
9
8
|
background-color: rgba(134,167,189,0.10196);
|
|
10
9
|
background-color: var(--color-background-neutral);
|
|
11
|
-
}
|
|
10
|
+
}
|
|
11
|
+
.np-theme-personal .np-tile .tw-avatar .tw-avatar__content {
|
|
12
12
|
background-color: var(--color-contrast);
|
|
13
|
-
}
|
|
13
|
+
}
|
|
14
|
+
.np-tile.decision {
|
|
14
15
|
margin-top: 0;
|
|
15
16
|
border: 1px solid rgba(0,0,0,0.10196);
|
|
16
17
|
border: 1px solid var(--color-border-neutral);
|
|
17
|
-
}
|
|
18
|
+
}
|
|
19
|
+
.np-theme-personal .np-tile.decision {
|
|
18
20
|
border: none;
|
|
19
|
-
}
|
|
21
|
+
}
|
|
22
|
+
.np-theme-personal .np-tile.decision:hover {
|
|
20
23
|
background-color: var(--color-background-neutral-hover);
|
|
21
|
-
}
|
|
24
|
+
}
|
|
25
|
+
.np-theme-personal .np-tile.decision:active {
|
|
22
26
|
background-color: var(--color-background-neutral-active);
|
|
23
|
-
}
|
|
27
|
+
}
|
|
28
|
+
.np-theme-personal .np-tile.decision .np-text-body-default {
|
|
24
29
|
color: #5d7079;
|
|
25
30
|
color: var(--color-content-secondary);
|
|
26
|
-
}
|
|
31
|
+
}
|
|
32
|
+
.np-tile.np-decision__tile--fixed-width {
|
|
27
33
|
width: 300px;
|
|
28
|
-
}
|
|
34
|
+
}
|
|
35
|
+
.np-tile__media {
|
|
29
36
|
width: 100%;
|
|
30
|
-
}
|
|
37
|
+
}
|
|
38
|
+
.np-tile__description {
|
|
31
39
|
color: #5d7079;
|
|
32
40
|
color: var(--color-content-secondary);
|
|
33
41
|
margin-top: 12px;
|
|
34
42
|
margin-top: var(--size-12);
|
|
35
43
|
display: inline-block;
|
|
36
|
-
}
|
|
44
|
+
}
|
|
45
|
+
.np-tile--small.np-decision__tile--fixed-width {
|
|
37
46
|
width: 260px;
|
|
38
|
-
}
|
|
47
|
+
}
|
|
48
|
+
.np-tile--small .np-tile__description {
|
|
39
49
|
margin-top: 4px;
|
|
40
50
|
margin-top: var(--size-4);
|
|
41
|
-
}
|
|
51
|
+
}
|
|
52
|
+
.np-tile:hover .tw-avatar {
|
|
42
53
|
pointer-events: none;
|
|
43
|
-
}
|
|
54
|
+
}
|
|
55
|
+
.np-tile:hover .tw-avatar .tw-avatar__content {
|
|
44
56
|
background-color: #ffffff;
|
|
45
57
|
background-color: var(--color-background-screen);
|
|
46
|
-
}
|
|
58
|
+
}
|
|
59
|
+
.np-tile__description {
|
|
47
60
|
color: #5d7079;
|
|
48
61
|
color: var(--color-content-secondary);
|
|
49
62
|
font-weight: 400;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Summary.js","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /**\n * Action displayed at the bottom of the Summary\n */\n action?: AlertAction;\n /**\n * Decides which html element should wrap the Summary\n */\n as?: ElementType;\n /**\n * Extra classes applied to Summary\n */\n className?: string;\n /**\n * @deprecated please use description instead\n */\n content?: ReactNode;\n /**\n * Summary description\n */\n description?: ReactNode;\n /**\n * @deprecated please use info instead\n */\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /**\n * Infos displayed on help Icon click inside Popover or Modal\n */\n info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n /**\n * @deprecated please use icon instead\n */\n illustration?: ReactNode;\n /**\n * Main Summary Icon\n */\n icon?: ReactNode;\n /**\n * Decides the badge applied to Icon\n */\n status?: StatusNotDone | StatusDone | StatusPending;\n /**\n * Summary title\n */\n title: ReactNode;\n}\n\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n {icon && (\n <div className=\"np-summary__icon\">\n {media}\n {Badge && (\n <div>\n {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n </div>\n )}\n </div>\n )}\n <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n <div className=\"np-summary__title d-flex\">\n <Body\n as=\"span\"\n role=\"heading\"\n aria-level={6}\n type={Typography.BODY_LARGE_BOLD}\n className=\"text-primary text-overflow-wrap m-b-1\"\n >\n {title}\n </Body>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-1 hidden-xs\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </div>\n\n {description && (\n <Body\n as=\"span\"\n type={Typography.BODY_DEFAULT}\n className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n >\n {description}\n </Body>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"np-summary__action\"\n aria-label={action['aria-label']}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </Element>\n );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Link","href","target","text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AA0BA,MAAMA,UAAU,GAAG;AACjB,EAAA,CAACC,aAAM,CAACC,IAAI,GAAGC,qBAAe;EAC9B,CAACF,aAAM,CAACG,OAAO,GAAGC;CACnB;AAED,MAAMC,YAAY,GAAG;AACnB,EAAA,CAACL,aAAM,CAACM,QAAQ,GAAG,eAAe;AAClC,EAAA,CAACN,aAAM,CAACC,IAAI,GAAG,YAAY;EAC3B,CAACD,aAAM,CAACG,OAAO,GAAG;CACnB;AAED,MAAMI,aAAa,GAAG;AACpB,EAAA,CAACP,aAAM,CAACC,IAAI,GAAGO,mBAAS,CAACC,QAAQ;AACjC,EAAA,CAACT,aAAM,CAACG,OAAO,GAAGK,mBAAS,CAACL;CAC7B;
|
|
1
|
+
{"version":3,"file":"Summary.js","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /**\n * Action displayed at the bottom of the Summary\n */\n action?: AlertAction;\n /**\n * Decides which html element should wrap the Summary\n */\n as?: ElementType;\n /**\n * Extra classes applied to Summary\n */\n className?: string;\n /**\n * @deprecated please use description instead\n */\n content?: ReactNode;\n /**\n * Summary description\n */\n description?: ReactNode;\n /**\n * @deprecated please use info instead\n */\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /**\n * Infos displayed on help Icon click inside Popover or Modal\n */\n info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n /**\n * @deprecated please use icon instead\n */\n illustration?: ReactNode;\n /**\n * Main Summary Icon\n */\n icon?: ReactNode;\n /**\n * Decides the badge applied to Icon\n */\n status?: StatusNotDone | StatusDone | StatusPending;\n /**\n * Summary title\n */\n title: ReactNode;\n}\n\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n {icon && (\n <div className=\"np-summary__icon\">\n {media}\n {Badge && (\n <div>\n {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n </div>\n )}\n </div>\n )}\n <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n <div className=\"np-summary__title d-flex\">\n <Body\n as=\"span\"\n role=\"heading\"\n aria-level={6}\n type={Typography.BODY_LARGE_BOLD}\n className=\"text-primary text-overflow-wrap m-b-1\"\n >\n {title}\n </Body>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-1 hidden-xs\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </div>\n\n {description && (\n <Body\n as=\"span\"\n type={Typography.BODY_DEFAULT}\n className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n >\n {description}\n </Body>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"np-summary__action\"\n aria-label={action['aria-label']}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </Element>\n );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Link","href","target","text"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Summary.mjs","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /**\n * Action displayed at the bottom of the Summary\n */\n action?: AlertAction;\n /**\n * Decides which html element should wrap the Summary\n */\n as?: ElementType;\n /**\n * Extra classes applied to Summary\n */\n className?: string;\n /**\n * @deprecated please use description instead\n */\n content?: ReactNode;\n /**\n * Summary description\n */\n description?: ReactNode;\n /**\n * @deprecated please use info instead\n */\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /**\n * Infos displayed on help Icon click inside Popover or Modal\n */\n info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n /**\n * @deprecated please use icon instead\n */\n illustration?: ReactNode;\n /**\n * Main Summary Icon\n */\n icon?: ReactNode;\n /**\n * Decides the badge applied to Icon\n */\n status?: StatusNotDone | StatusDone | StatusPending;\n /**\n * Summary title\n */\n title: ReactNode;\n}\n\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n {icon && (\n <div className=\"np-summary__icon\">\n {media}\n {Badge && (\n <div>\n {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n </div>\n )}\n </div>\n )}\n <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n <div className=\"np-summary__title d-flex\">\n <Body\n as=\"span\"\n role=\"heading\"\n aria-level={6}\n type={Typography.BODY_LARGE_BOLD}\n className=\"text-primary text-overflow-wrap m-b-1\"\n >\n {title}\n </Body>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-1 hidden-xs\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </div>\n\n {description && (\n <Body\n as=\"span\"\n type={Typography.BODY_DEFAULT}\n className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n >\n {description}\n </Body>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"np-summary__action\"\n aria-label={action['aria-label']}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </Element>\n );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Link","href","target","text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AA0BA,MAAMA,UAAU,GAAG;AACjB,EAAA,CAACC,MAAM,CAACC,IAAI,GAAGC,eAAe;EAC9B,CAACF,MAAM,CAACG,OAAO,GAAGC;CACnB;AAED,MAAMC,YAAY,GAAG;AACnB,EAAA,CAACL,MAAM,CAACM,QAAQ,GAAG,eAAe;AAClC,EAAA,CAACN,MAAM,CAACC,IAAI,GAAG,YAAY;EAC3B,CAACD,MAAM,CAACG,OAAO,GAAG;CACnB;AAED,MAAMI,aAAa,GAAG;AACpB,EAAA,CAACP,MAAM,CAACC,IAAI,GAAGO,SAAS,CAACC,QAAQ;AACjC,EAAA,CAACT,MAAM,CAACG,OAAO,GAAGK,SAAS,CAACL;CAC7B;
|
|
1
|
+
{"version":3,"file":"Summary.mjs","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /**\n * Action displayed at the bottom of the Summary\n */\n action?: AlertAction;\n /**\n * Decides which html element should wrap the Summary\n */\n as?: ElementType;\n /**\n * Extra classes applied to Summary\n */\n className?: string;\n /**\n * @deprecated please use description instead\n */\n content?: ReactNode;\n /**\n * Summary description\n */\n description?: ReactNode;\n /**\n * @deprecated please use info instead\n */\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /**\n * Infos displayed on help Icon click inside Popover or Modal\n */\n info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n /**\n * @deprecated please use icon instead\n */\n illustration?: ReactNode;\n /**\n * Main Summary Icon\n */\n icon?: ReactNode;\n /**\n * Decides the badge applied to Icon\n */\n status?: StatusNotDone | StatusDone | StatusPending;\n /**\n * Summary title\n */\n title: ReactNode;\n}\n\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n {icon && (\n <div className=\"np-summary__icon\">\n {media}\n {Badge && (\n <div>\n {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n </div>\n )}\n </div>\n )}\n <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n <div className=\"np-summary__title d-flex\">\n <Body\n as=\"span\"\n role=\"heading\"\n aria-level={6}\n type={Typography.BODY_LARGE_BOLD}\n className=\"text-primary text-overflow-wrap m-b-1\"\n >\n {title}\n </Body>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-1 hidden-xs\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </div>\n\n {description && (\n <Body\n as=\"span\"\n type={Typography.BODY_DEFAULT}\n className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n >\n {description}\n </Body>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"np-summary__action\"\n aria-label={action['aria-label']}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </Element>\n );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Link","href","target","text"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n /**\n * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n */\n 'aria-label'?: string;\n /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n 'aria-labelledby'?: string;\n /** Whether the switch is checked or not */\n checked?: boolean;\n disabled?: boolean;\n /** ID to apply to the switch container */\n id?: string;\n /** Function called when the switch is toggled */\n onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n const {\n checked,\n className,\n id = inputAttributes.id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledbyProp,\n onClick,\n disabled,\n } = props;\n\n const ariaLabelledby =\n (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n return (\n <button\n className={clsx(\n 'np-switch',\n {\n 'np-switch--unchecked': !checked,\n 'np-switch--checked': checked,\n disabled,\n },\n className,\n )}\n type=\"button\"\n role=\"switch\"\n {...inputAttributes}\n id={id}\n aria-checked={checked}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n disabled={disabled}\n onClick={!disabled ? onClick : undefined}\n >\n <span className=\"np-switch--thumb\" />\n </button>\n );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","ariaLabelledby","undefined","_jsx","clsx","type","role","children"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n /**\n * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n */\n 'aria-label'?: string;\n /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n 'aria-labelledby'?: string;\n /** Whether the switch is checked or not */\n checked?: boolean;\n disabled?: boolean;\n /** ID to apply to the switch container */\n id?: string;\n /** Function called when the switch is toggled */\n onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n const {\n checked,\n className,\n id = inputAttributes.id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledbyProp,\n onClick,\n disabled,\n } = props;\n\n const ariaLabelledby =\n (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n return (\n <button\n className={clsx(\n 'np-switch',\n {\n 'np-switch--unchecked': !checked,\n 'np-switch--checked': checked,\n disabled,\n },\n className,\n )}\n type=\"button\"\n role=\"switch\"\n {...inputAttributes}\n id={id}\n aria-checked={checked}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n disabled={disabled}\n onClick={!disabled ? onClick : undefined}\n >\n <span className=\"np-switch--thumb\" />\n </button>\n );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","ariaLabelledby","undefined","_jsx","clsx","type","role","children"],"mappings":";;;;;;;;AAuBA,MAAMA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAI,GAAE,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGV,KAAK;AAET,EAAA,MAAMW,cAAc,GAClB,CAACJ,SAAS,GAAGK,SAAS,GAAGJ,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEY,cAAA,CAAA,QAAA,EAAA;AACER,IAAAA,SAAS,EAAES,SAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACV,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA;KACD,EACDL,SAAS,CACT;AACFU,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,IAAI,EAAC,QAAQ;AAAA,IAAA,GACTf,eAAe;AACnBK,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,cAAA,EAAcF,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AACtB,IAAA,iBAAA,EAAiBI,cAAe;AAChCD,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGG,SAAU;AAAAK,IAAAA,QAAA,eAEzCJ,cAAA,CAAA,MAAA,EAAA;AAAMR,MAAAA,SAAS,EAAC;KAAkB;AACpC,GAAQ,CAAC;AAEb;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.mjs","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n /**\n * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n */\n 'aria-label'?: string;\n /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n 'aria-labelledby'?: string;\n /** Whether the switch is checked or not */\n checked?: boolean;\n disabled?: boolean;\n /** ID to apply to the switch container */\n id?: string;\n /** Function called when the switch is toggled */\n onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n const {\n checked,\n className,\n id = inputAttributes.id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledbyProp,\n onClick,\n disabled,\n } = props;\n\n const ariaLabelledby =\n (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n return (\n <button\n className={clsx(\n 'np-switch',\n {\n 'np-switch--unchecked': !checked,\n 'np-switch--checked': checked,\n disabled,\n },\n className,\n )}\n type=\"button\"\n role=\"switch\"\n {...inputAttributes}\n id={id}\n aria-checked={checked}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n disabled={disabled}\n onClick={!disabled ? onClick : undefined}\n >\n <span className=\"np-switch--thumb\" />\n </button>\n );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","ariaLabelledby","undefined","_jsx","clsx","type","role","children"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"Switch.mjs","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n /**\n * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n */\n 'aria-label'?: string;\n /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n 'aria-labelledby'?: string;\n /** Whether the switch is checked or not */\n checked?: boolean;\n disabled?: boolean;\n /** ID to apply to the switch container */\n id?: string;\n /** Function called when the switch is toggled */\n onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n const {\n checked,\n className,\n id = inputAttributes.id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledbyProp,\n onClick,\n disabled,\n } = props;\n\n const ariaLabelledby =\n (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n return (\n <button\n className={clsx(\n 'np-switch',\n {\n 'np-switch--unchecked': !checked,\n 'np-switch--checked': checked,\n disabled,\n },\n className,\n )}\n type=\"button\"\n role=\"switch\"\n {...inputAttributes}\n id={id}\n aria-checked={checked}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n disabled={disabled}\n onClick={!disabled ? onClick : undefined}\n >\n <span className=\"np-switch--thumb\" />\n </button>\n );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","ariaLabelledby","undefined","_jsx","clsx","type","role","children"],"mappings":";;;;AAuBA,MAAMA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAI,GAAE,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGV,KAAK;AAET,EAAA,MAAMW,cAAc,GAClB,CAACJ,SAAS,GAAGK,SAAS,GAAGJ,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEY,GAAA,CAAA,QAAA,EAAA;AACER,IAAAA,SAAS,EAAES,IAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACV,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA;KACD,EACDL,SAAS,CACT;AACFU,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,IAAI,EAAC,QAAQ;AAAA,IAAA,GACTf,eAAe;AACnBK,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,cAAA,EAAcF,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AACtB,IAAA,iBAAA,EAAiBI,cAAe;AAChCD,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGG,SAAU;AAAAK,IAAAA,QAAA,eAEzCJ,GAAA,CAAA,MAAA,EAAA;AAAMR,MAAAA,SAAS,EAAC;KAAkB;AACpC,GAAQ,CAAC;AAEb;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwitchOption.js","sources":["../../src/switchOption/SwitchOption.tsx"],"sourcesContent":["import { MouseEvent } from 'react';\n\nimport Option from '../common/Option';\nimport Switch from '../switch';\n\nexport type SwitchOptionProps = {\n checked?: boolean;\n complex?: boolean;\n content?: React.ReactNode;\n disabled?: boolean;\n showMediaCircle?: boolean;\n showMediaAtAllSizes?: boolean;\n isContainerAligned?: boolean;\n id?: string;\n media?: React.ReactNode;\n onChange: (newValue: boolean) => void;\n title: React.ReactNode;\n 'aria-label': string;\n};\n\nconst stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {\n if (event) {\n event.stopPropagation();\n event.preventDefault();\n event.nativeEvent?.stopImmediatePropagation?.();\n }\n};\n\nconst SwitchOption = ({\n checked,\n complex,\n content,\n disabled,\n id,\n media,\n onChange,\n title,\n showMediaCircle,\n showMediaAtAllSizes,\n isContainerAligned,\n 'aria-label': ariaLabel,\n}: SwitchOptionProps) => {\n const sharedProps = {\n media,\n title,\n content,\n complex,\n disabled,\n showMediaCircle,\n showMediaAtAllSizes,\n isContainerAligned,\n };\n const toggle = (event?: MouseEvent<HTMLSpanElement>) => {\n stopPropagation(event);\n if (disabled) {\n return;\n }\n\n onChange(!checked);\n };\n\n return (\n <Option\n {...sharedProps}\n className=\"np-switch-option\"\n button={\n <Switch\n id={id}\n checked={checked}\n disabled={disabled}\n aria-label={ariaLabel}\n onClick={toggle}\n />\n }\n onClick={toggle}\n />\n );\n};\n\nexport default SwitchOption;\n"],"names":["stopPropagation","event","preventDefault","nativeEvent","stopImmediatePropagation","SwitchOption","checked","complex","content","disabled","id","media","onChange","title","showMediaCircle","showMediaAtAllSizes","isContainerAligned","ariaLabel","sharedProps","toggle","_jsx","Option","className","button","Switch","onClick"],"mappings":";;;;;;;;AAoBA,MAAMA,eAAe,GAAIC,KAAmC,IAAI;AAC9D,EAAA,IAAIA,KAAK,EAAE;IACTA,KAAK,CAACD,eAAe,EAAE;IACvBC,KAAK,CAACC,cAAc,EAAE;AACtBD,IAAAA,KAAK,CAACE,WAAW,EAAEC,wBAAwB,IAAI;AACjD;AACF,CAAC;
|
|
1
|
+
{"version":3,"file":"SwitchOption.js","sources":["../../src/switchOption/SwitchOption.tsx"],"sourcesContent":["import { MouseEvent } from 'react';\n\nimport Option from '../common/Option';\nimport Switch from '../switch';\n\nexport type SwitchOptionProps = {\n checked?: boolean;\n complex?: boolean;\n content?: React.ReactNode;\n disabled?: boolean;\n showMediaCircle?: boolean;\n showMediaAtAllSizes?: boolean;\n isContainerAligned?: boolean;\n id?: string;\n media?: React.ReactNode;\n onChange: (newValue: boolean) => void;\n title: React.ReactNode;\n 'aria-label': string;\n};\n\nconst stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {\n if (event) {\n event.stopPropagation();\n event.preventDefault();\n event.nativeEvent?.stopImmediatePropagation?.();\n }\n};\n\nconst SwitchOption = ({\n checked,\n complex,\n content,\n disabled,\n id,\n media,\n onChange,\n title,\n showMediaCircle,\n showMediaAtAllSizes,\n isContainerAligned,\n 'aria-label': ariaLabel,\n}: SwitchOptionProps) => {\n const sharedProps = {\n media,\n title,\n content,\n complex,\n disabled,\n showMediaCircle,\n showMediaAtAllSizes,\n isContainerAligned,\n };\n const toggle = (event?: MouseEvent<HTMLSpanElement>) => {\n stopPropagation(event);\n if (disabled) {\n return;\n }\n\n onChange(!checked);\n };\n\n return (\n <Option\n {...sharedProps}\n className=\"np-switch-option\"\n button={\n <Switch\n id={id}\n checked={checked}\n disabled={disabled}\n aria-label={ariaLabel}\n onClick={toggle}\n />\n }\n onClick={toggle}\n />\n );\n};\n\nexport default SwitchOption;\n"],"names":["stopPropagation","event","preventDefault","nativeEvent","stopImmediatePropagation","SwitchOption","checked","complex","content","disabled","id","media","onChange","title","showMediaCircle","showMediaAtAllSizes","isContainerAligned","ariaLabel","sharedProps","toggle","_jsx","Option","className","button","Switch","onClick"],"mappings":";;;;;;;;AAoBA,MAAMA,eAAe,GAAIC,KAAmC,IAAI;AAC9D,EAAA,IAAIA,KAAK,EAAE;IACTA,KAAK,CAACD,eAAe,EAAE;IACvBC,KAAK,CAACC,cAAc,EAAE;AACtBD,IAAAA,KAAK,CAACE,WAAW,EAAEC,wBAAwB,IAAI;AACjD,EAAA;AACF,CAAC;AAED,MAAMC,YAAY,GAAGA,CAAC;EACpBC,OAAO;EACPC,OAAO;EACPC,OAAO;EACPC,QAAQ;EACRC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,eAAe;EACfC,mBAAmB;EACnBC,kBAAkB;AAClB,EAAA,YAAY,EAAEC;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBP,KAAK;IACLE,KAAK;IACLL,OAAO;IACPD,OAAO;IACPE,QAAQ;IACRK,eAAe;IACfC,mBAAmB;AACnBC,IAAAA;GACD;EACD,MAAMG,MAAM,GAAIlB,KAAmC,IAAI;IACrDD,eAAe,CAACC,KAAK,CAAC;AACtB,IAAA,IAAIQ,QAAQ,EAAE;AACZ,MAAA;AACF,IAAA;IAEAG,QAAQ,CAAC,CAACN,OAAO,CAAC;EACpB,CAAC;EAED,oBACEc,cAAA,CAACC,cAAM,EAAA;AAAA,IAAA,GACDH,WAAW;AACfI,IAAAA,SAAS,EAAC,kBAAkB;IAC5BC,MAAM,eACJH,cAAA,CAACI,cAAM,EAAA;AACLd,MAAAA,EAAE,EAAEA,EAAG;AACPJ,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnB,MAAA,YAAA,EAAYQ,SAAU;AACtBQ,MAAAA,OAAO,EAAEN;AAAO,KAAA,CAEnB;AACDM,IAAAA,OAAO,EAAEN;AAAO,GAAA,CAChB;AAEN;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwitchOption.mjs","sources":["../../src/switchOption/SwitchOption.tsx"],"sourcesContent":["import { MouseEvent } from 'react';\n\nimport Option from '../common/Option';\nimport Switch from '../switch';\n\nexport type SwitchOptionProps = {\n checked?: boolean;\n complex?: boolean;\n content?: React.ReactNode;\n disabled?: boolean;\n showMediaCircle?: boolean;\n showMediaAtAllSizes?: boolean;\n isContainerAligned?: boolean;\n id?: string;\n media?: React.ReactNode;\n onChange: (newValue: boolean) => void;\n title: React.ReactNode;\n 'aria-label': string;\n};\n\nconst stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {\n if (event) {\n event.stopPropagation();\n event.preventDefault();\n event.nativeEvent?.stopImmediatePropagation?.();\n }\n};\n\nconst SwitchOption = ({\n checked,\n complex,\n content,\n disabled,\n id,\n media,\n onChange,\n title,\n showMediaCircle,\n showMediaAtAllSizes,\n isContainerAligned,\n 'aria-label': ariaLabel,\n}: SwitchOptionProps) => {\n const sharedProps = {\n media,\n title,\n content,\n complex,\n disabled,\n showMediaCircle,\n showMediaAtAllSizes,\n isContainerAligned,\n };\n const toggle = (event?: MouseEvent<HTMLSpanElement>) => {\n stopPropagation(event);\n if (disabled) {\n return;\n }\n\n onChange(!checked);\n };\n\n return (\n <Option\n {...sharedProps}\n className=\"np-switch-option\"\n button={\n <Switch\n id={id}\n checked={checked}\n disabled={disabled}\n aria-label={ariaLabel}\n onClick={toggle}\n />\n }\n onClick={toggle}\n />\n );\n};\n\nexport default SwitchOption;\n"],"names":["stopPropagation","event","preventDefault","nativeEvent","stopImmediatePropagation","SwitchOption","checked","complex","content","disabled","id","media","onChange","title","showMediaCircle","showMediaAtAllSizes","isContainerAligned","ariaLabel","sharedProps","toggle","_jsx","Option","className","button","Switch","onClick"],"mappings":";;;;AAoBA,MAAMA,eAAe,GAAIC,KAAmC,IAAI;AAC9D,EAAA,IAAIA,KAAK,EAAE;IACTA,KAAK,CAACD,eAAe,EAAE;IACvBC,KAAK,CAACC,cAAc,EAAE;AACtBD,IAAAA,KAAK,CAACE,WAAW,EAAEC,wBAAwB,IAAI;AACjD;AACF,CAAC;
|
|
1
|
+
{"version":3,"file":"SwitchOption.mjs","sources":["../../src/switchOption/SwitchOption.tsx"],"sourcesContent":["import { MouseEvent } from 'react';\n\nimport Option from '../common/Option';\nimport Switch from '../switch';\n\nexport type SwitchOptionProps = {\n checked?: boolean;\n complex?: boolean;\n content?: React.ReactNode;\n disabled?: boolean;\n showMediaCircle?: boolean;\n showMediaAtAllSizes?: boolean;\n isContainerAligned?: boolean;\n id?: string;\n media?: React.ReactNode;\n onChange: (newValue: boolean) => void;\n title: React.ReactNode;\n 'aria-label': string;\n};\n\nconst stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {\n if (event) {\n event.stopPropagation();\n event.preventDefault();\n event.nativeEvent?.stopImmediatePropagation?.();\n }\n};\n\nconst SwitchOption = ({\n checked,\n complex,\n content,\n disabled,\n id,\n media,\n onChange,\n title,\n showMediaCircle,\n showMediaAtAllSizes,\n isContainerAligned,\n 'aria-label': ariaLabel,\n}: SwitchOptionProps) => {\n const sharedProps = {\n media,\n title,\n content,\n complex,\n disabled,\n showMediaCircle,\n showMediaAtAllSizes,\n isContainerAligned,\n };\n const toggle = (event?: MouseEvent<HTMLSpanElement>) => {\n stopPropagation(event);\n if (disabled) {\n return;\n }\n\n onChange(!checked);\n };\n\n return (\n <Option\n {...sharedProps}\n className=\"np-switch-option\"\n button={\n <Switch\n id={id}\n checked={checked}\n disabled={disabled}\n aria-label={ariaLabel}\n onClick={toggle}\n />\n }\n onClick={toggle}\n />\n );\n};\n\nexport default SwitchOption;\n"],"names":["stopPropagation","event","preventDefault","nativeEvent","stopImmediatePropagation","SwitchOption","checked","complex","content","disabled","id","media","onChange","title","showMediaCircle","showMediaAtAllSizes","isContainerAligned","ariaLabel","sharedProps","toggle","_jsx","Option","className","button","Switch","onClick"],"mappings":";;;;AAoBA,MAAMA,eAAe,GAAIC,KAAmC,IAAI;AAC9D,EAAA,IAAIA,KAAK,EAAE;IACTA,KAAK,CAACD,eAAe,EAAE;IACvBC,KAAK,CAACC,cAAc,EAAE;AACtBD,IAAAA,KAAK,CAACE,WAAW,EAAEC,wBAAwB,IAAI;AACjD,EAAA;AACF,CAAC;AAED,MAAMC,YAAY,GAAGA,CAAC;EACpBC,OAAO;EACPC,OAAO;EACPC,OAAO;EACPC,QAAQ;EACRC,EAAE;EACFC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,eAAe;EACfC,mBAAmB;EACnBC,kBAAkB;AAClB,EAAA,YAAY,EAAEC;AAAS,CACL,KAAI;AACtB,EAAA,MAAMC,WAAW,GAAG;IAClBP,KAAK;IACLE,KAAK;IACLL,OAAO;IACPD,OAAO;IACPE,QAAQ;IACRK,eAAe;IACfC,mBAAmB;AACnBC,IAAAA;GACD;EACD,MAAMG,MAAM,GAAIlB,KAAmC,IAAI;IACrDD,eAAe,CAACC,KAAK,CAAC;AACtB,IAAA,IAAIQ,QAAQ,EAAE;AACZ,MAAA;AACF,IAAA;IAEAG,QAAQ,CAAC,CAACN,OAAO,CAAC;EACpB,CAAC;EAED,oBACEc,GAAA,CAACC,MAAM,EAAA;AAAA,IAAA,GACDH,WAAW;AACfI,IAAAA,SAAS,EAAC,kBAAkB;IAC5BC,MAAM,eACJH,GAAA,CAACI,MAAM,EAAA;AACLd,MAAAA,EAAE,EAAEA,EAAG;AACPJ,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnB,MAAA,YAAA,EAAYQ,SAAU;AACtBQ,MAAAA,OAAO,EAAEN;AAAO,KAAA,CAEnB;AACDM,IAAAA,OAAO,EAAEN;AAAO,GAAA,CAChB;AAEN;;;;"}
|
package/build/table/Table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../src/table/Table.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport TableCell from './TableCell';\nimport TableHeader, { TableHeaderType } from './TableHeader';\nimport TableRow, { TableRowClickableType, TableRowType } from './TableRow';\nimport Alert from '../alert';\n\nimport messages from './Table.messages';\nimport Loader from '../loader';\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport { clsx } from 'clsx';\nimport { useTheme } from '@wise/components-theming';\nimport Body from '../body';\n\nexport interface TableProps {\n 'aria-labelledby'?: string;\n data: {\n headers?: TableHeaderType[];\n rows?: TableRowType[] | TableRowClickableType[];\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n };\n loading?: boolean;\n className?: string | undefined;\n fullWidth?: boolean;\n error?: {\n message?: string;\n action?: {\n href?: string;\n text?: string;\n };\n };\n}\n\nconst Table = ({\n 'aria-labelledby': ariaLabelledBy,\n data,\n loading,\n className,\n fullWidth = true,\n error,\n}: TableProps) => {\n const { formatMessage } = useIntl();\n const { theme } = useTheme();\n const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);\n\n const getRowLength = () => {\n const columnsLength = data?.headers?.length ?? 0;\n return data?.onRowClick ? columnsLength + 1 : columnsLength;\n };\n\n const getTableContent = () => {\n if (loading) {\n return (\n <TableRow>\n <TableCell>\n <Loader data-testid=\"np-table-loader\" />\n </TableCell>\n </TableRow>\n );\n }\n\n // Shows the `emptyData` message when there is no data to display\n if (!data?.rows?.length) {\n return (\n <TableRow>\n <TableCell colSpan={data?.headers?.length}>\n <div className=\"np-table-empty-data\" data-testid=\"np-table-empty-data\">\n <StatusIcon sentiment={Sentiment.WARNING} size={Size.MEDIUM} />\n <Body type=\"body-default-bold\">{formatMessage(messages.emptyData)}</Body>\n </div>\n </TableCell>\n </TableRow>\n );\n }\n\n return data?.rows?.map((rowData, rowIndex) => {\n return (\n <TableRow\n key={'table-row-'.concat(rowIndex.toString())}\n rowData={rowData}\n hasSeparator={data?.rows?.length ? data.rows.length - 1 !== rowIndex : false}\n onRowClick={data?.onRowClick}\n />\n );\n });\n };\n\n if (error) {\n return (\n <Alert\n className=\"np-table-error\"\n message={error.message}\n type={Sentiment.NEGATIVE}\n action={{\n href: error?.action?.href ?? '/',\n text: error?.action?.text ?? formatMessage(messages.refreshPage),\n }}\n data-testid=\"np-table-error\"\n />\n );\n }\n\n return (\n <>\n <div aria-live=\"polite\" className=\"sr-only\">\n {formatMessage(messages[loading ? 'loading' : 'loaded'])}\n </div>\n <div\n role={loading ? 'presentation' : 'region'}\n aria-labelledby={ariaLabelledBy}\n className={clsx('np-table-outer-container', className, {\n 'np-theme-personal': theme === 'bright-green',\n 'np-table-outer-container--center': !fullWidth,\n 'np-table-outer-container--full-width': fullWidth,\n })}\n tabIndex={0}\n data-testid=\"np-table-outer-container\"\n >\n <div\n className={clsx('np-table-container', {\n 'np-table-container--loading': loading,\n })}\n data-testid=\"np-table-container\"\n >\n <div className=\"np-table-inner-container\">\n <table className=\"np-table\">\n <thead aria-hidden={isEmptyHeader}>\n <tr>\n {isEmptyHeader ? (\n <TableHeader />\n ) : (\n data?.headers?.map((headerItem: TableHeaderType, index) => (\n <TableHeader\n key={headerItem.header?.concat(index.toString())}\n {...headerItem}\n />\n ))\n )}\n {data?.onRowClick && <TableHeader isActionHeader />}\n </tr>\n </thead>\n <tbody>\n <tr\n key=\"first-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n {getTableContent()}\n <tr\n key=\"last-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </>\n );\n};\n\nexport default Table;\n"],"names":["Table","ariaLabelledBy","data","loading","className","fullWidth","error","formatMessage","useIntl","theme","useTheme","isEmptyHeader","headers","length","getRowLength","columnsLength","onRowClick","getTableContent","_jsx","TableRow","children","TableCell","Loader","rows","colSpan","_jsxs","StatusIcon","sentiment","Sentiment","WARNING","size","Size","MEDIUM","Body","type","messages","emptyData","map","rowData","rowIndex","hasSeparator","concat","toString","Alert","message","NEGATIVE","action","href","text","refreshPage","_Fragment","role","clsx","tabIndex","TableHeader","headerItem","index","header","isActionHeader"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../src/table/Table.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport TableCell from './TableCell';\nimport TableHeader, { TableHeaderType } from './TableHeader';\nimport TableRow, { TableRowClickableType, TableRowType } from './TableRow';\nimport Alert from '../alert';\n\nimport messages from './Table.messages';\nimport Loader from '../loader';\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport { clsx } from 'clsx';\nimport { useTheme } from '@wise/components-theming';\nimport Body from '../body';\n\nexport interface TableProps {\n 'aria-labelledby'?: string;\n data: {\n headers?: TableHeaderType[];\n rows?: TableRowType[] | TableRowClickableType[];\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n };\n loading?: boolean;\n className?: string | undefined;\n fullWidth?: boolean;\n error?: {\n message?: string;\n action?: {\n href?: string;\n text?: string;\n };\n };\n}\n\nconst Table = ({\n 'aria-labelledby': ariaLabelledBy,\n data,\n loading,\n className,\n fullWidth = true,\n error,\n}: TableProps) => {\n const { formatMessage } = useIntl();\n const { theme } = useTheme();\n const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);\n\n const getRowLength = () => {\n const columnsLength = data?.headers?.length ?? 0;\n return data?.onRowClick ? columnsLength + 1 : columnsLength;\n };\n\n const getTableContent = () => {\n if (loading) {\n return (\n <TableRow>\n <TableCell>\n <Loader data-testid=\"np-table-loader\" />\n </TableCell>\n </TableRow>\n );\n }\n\n // Shows the `emptyData` message when there is no data to display\n if (!data?.rows?.length) {\n return (\n <TableRow>\n <TableCell colSpan={data?.headers?.length}>\n <div className=\"np-table-empty-data\" data-testid=\"np-table-empty-data\">\n <StatusIcon sentiment={Sentiment.WARNING} size={Size.MEDIUM} />\n <Body type=\"body-default-bold\">{formatMessage(messages.emptyData)}</Body>\n </div>\n </TableCell>\n </TableRow>\n );\n }\n\n return data?.rows?.map((rowData, rowIndex) => {\n return (\n <TableRow\n key={'table-row-'.concat(rowIndex.toString())}\n rowData={rowData}\n hasSeparator={data?.rows?.length ? data.rows.length - 1 !== rowIndex : false}\n onRowClick={data?.onRowClick}\n />\n );\n });\n };\n\n if (error) {\n return (\n <Alert\n className=\"np-table-error\"\n message={error.message}\n type={Sentiment.NEGATIVE}\n action={{\n href: error?.action?.href ?? '/',\n text: error?.action?.text ?? formatMessage(messages.refreshPage),\n }}\n data-testid=\"np-table-error\"\n />\n );\n }\n\n return (\n <>\n <div aria-live=\"polite\" className=\"sr-only\">\n {formatMessage(messages[loading ? 'loading' : 'loaded'])}\n </div>\n <div\n role={loading ? 'presentation' : 'region'}\n aria-labelledby={ariaLabelledBy}\n className={clsx('np-table-outer-container', className, {\n 'np-theme-personal': theme === 'bright-green',\n 'np-table-outer-container--center': !fullWidth,\n 'np-table-outer-container--full-width': fullWidth,\n })}\n tabIndex={0}\n data-testid=\"np-table-outer-container\"\n >\n <div\n className={clsx('np-table-container', {\n 'np-table-container--loading': loading,\n })}\n data-testid=\"np-table-container\"\n >\n <div className=\"np-table-inner-container\">\n <table className=\"np-table\">\n <thead aria-hidden={isEmptyHeader}>\n <tr>\n {isEmptyHeader ? (\n <TableHeader />\n ) : (\n data?.headers?.map((headerItem: TableHeaderType, index) => (\n <TableHeader\n key={headerItem.header?.concat(index.toString())}\n {...headerItem}\n />\n ))\n )}\n {data?.onRowClick && <TableHeader isActionHeader />}\n </tr>\n </thead>\n <tbody>\n <tr\n key=\"first-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n {getTableContent()}\n <tr\n key=\"last-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </>\n );\n};\n\nexport default Table;\n"],"names":["Table","ariaLabelledBy","data","loading","className","fullWidth","error","formatMessage","useIntl","theme","useTheme","isEmptyHeader","headers","length","getRowLength","columnsLength","onRowClick","getTableContent","_jsx","TableRow","children","TableCell","Loader","rows","colSpan","_jsxs","StatusIcon","sentiment","Sentiment","WARNING","size","Size","MEDIUM","Body","type","messages","emptyData","map","rowData","rowIndex","hasSeparator","concat","toString","Alert","message","NEGATIVE","action","href","text","refreshPage","_Fragment","role","clsx","tabIndex","TableHeader","headerItem","index","header","isActionHeader"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.mjs","sources":["../../src/table/Table.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport TableCell from './TableCell';\nimport TableHeader, { TableHeaderType } from './TableHeader';\nimport TableRow, { TableRowClickableType, TableRowType } from './TableRow';\nimport Alert from '../alert';\n\nimport messages from './Table.messages';\nimport Loader from '../loader';\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport { clsx } from 'clsx';\nimport { useTheme } from '@wise/components-theming';\nimport Body from '../body';\n\nexport interface TableProps {\n 'aria-labelledby'?: string;\n data: {\n headers?: TableHeaderType[];\n rows?: TableRowType[] | TableRowClickableType[];\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n };\n loading?: boolean;\n className?: string | undefined;\n fullWidth?: boolean;\n error?: {\n message?: string;\n action?: {\n href?: string;\n text?: string;\n };\n };\n}\n\nconst Table = ({\n 'aria-labelledby': ariaLabelledBy,\n data,\n loading,\n className,\n fullWidth = true,\n error,\n}: TableProps) => {\n const { formatMessage } = useIntl();\n const { theme } = useTheme();\n const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);\n\n const getRowLength = () => {\n const columnsLength = data?.headers?.length ?? 0;\n return data?.onRowClick ? columnsLength + 1 : columnsLength;\n };\n\n const getTableContent = () => {\n if (loading) {\n return (\n <TableRow>\n <TableCell>\n <Loader data-testid=\"np-table-loader\" />\n </TableCell>\n </TableRow>\n );\n }\n\n // Shows the `emptyData` message when there is no data to display\n if (!data?.rows?.length) {\n return (\n <TableRow>\n <TableCell colSpan={data?.headers?.length}>\n <div className=\"np-table-empty-data\" data-testid=\"np-table-empty-data\">\n <StatusIcon sentiment={Sentiment.WARNING} size={Size.MEDIUM} />\n <Body type=\"body-default-bold\">{formatMessage(messages.emptyData)}</Body>\n </div>\n </TableCell>\n </TableRow>\n );\n }\n\n return data?.rows?.map((rowData, rowIndex) => {\n return (\n <TableRow\n key={'table-row-'.concat(rowIndex.toString())}\n rowData={rowData}\n hasSeparator={data?.rows?.length ? data.rows.length - 1 !== rowIndex : false}\n onRowClick={data?.onRowClick}\n />\n );\n });\n };\n\n if (error) {\n return (\n <Alert\n className=\"np-table-error\"\n message={error.message}\n type={Sentiment.NEGATIVE}\n action={{\n href: error?.action?.href ?? '/',\n text: error?.action?.text ?? formatMessage(messages.refreshPage),\n }}\n data-testid=\"np-table-error\"\n />\n );\n }\n\n return (\n <>\n <div aria-live=\"polite\" className=\"sr-only\">\n {formatMessage(messages[loading ? 'loading' : 'loaded'])}\n </div>\n <div\n role={loading ? 'presentation' : 'region'}\n aria-labelledby={ariaLabelledBy}\n className={clsx('np-table-outer-container', className, {\n 'np-theme-personal': theme === 'bright-green',\n 'np-table-outer-container--center': !fullWidth,\n 'np-table-outer-container--full-width': fullWidth,\n })}\n tabIndex={0}\n data-testid=\"np-table-outer-container\"\n >\n <div\n className={clsx('np-table-container', {\n 'np-table-container--loading': loading,\n })}\n data-testid=\"np-table-container\"\n >\n <div className=\"np-table-inner-container\">\n <table className=\"np-table\">\n <thead aria-hidden={isEmptyHeader}>\n <tr>\n {isEmptyHeader ? (\n <TableHeader />\n ) : (\n data?.headers?.map((headerItem: TableHeaderType, index) => (\n <TableHeader\n key={headerItem.header?.concat(index.toString())}\n {...headerItem}\n />\n ))\n )}\n {data?.onRowClick && <TableHeader isActionHeader />}\n </tr>\n </thead>\n <tbody>\n <tr\n key=\"first-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n {getTableContent()}\n <tr\n key=\"last-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </>\n );\n};\n\nexport default Table;\n"],"names":["Table","ariaLabelledBy","data","loading","className","fullWidth","error","formatMessage","useIntl","theme","useTheme","isEmptyHeader","headers","length","getRowLength","columnsLength","onRowClick","getTableContent","_jsx","TableRow","children","TableCell","Loader","rows","colSpan","_jsxs","StatusIcon","sentiment","Sentiment","WARNING","size","Size","MEDIUM","Body","type","messages","emptyData","map","rowData","rowIndex","hasSeparator","concat","toString","Alert","message","NEGATIVE","action","href","text","refreshPage","_Fragment","role","clsx","tabIndex","TableHeader","headerItem","index","header","isActionHeader"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Table.mjs","sources":["../../src/table/Table.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport TableCell from './TableCell';\nimport TableHeader, { TableHeaderType } from './TableHeader';\nimport TableRow, { TableRowClickableType, TableRowType } from './TableRow';\nimport Alert from '../alert';\n\nimport messages from './Table.messages';\nimport Loader from '../loader';\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport { clsx } from 'clsx';\nimport { useTheme } from '@wise/components-theming';\nimport Body from '../body';\n\nexport interface TableProps {\n 'aria-labelledby'?: string;\n data: {\n headers?: TableHeaderType[];\n rows?: TableRowType[] | TableRowClickableType[];\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n };\n loading?: boolean;\n className?: string | undefined;\n fullWidth?: boolean;\n error?: {\n message?: string;\n action?: {\n href?: string;\n text?: string;\n };\n };\n}\n\nconst Table = ({\n 'aria-labelledby': ariaLabelledBy,\n data,\n loading,\n className,\n fullWidth = true,\n error,\n}: TableProps) => {\n const { formatMessage } = useIntl();\n const { theme } = useTheme();\n const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);\n\n const getRowLength = () => {\n const columnsLength = data?.headers?.length ?? 0;\n return data?.onRowClick ? columnsLength + 1 : columnsLength;\n };\n\n const getTableContent = () => {\n if (loading) {\n return (\n <TableRow>\n <TableCell>\n <Loader data-testid=\"np-table-loader\" />\n </TableCell>\n </TableRow>\n );\n }\n\n // Shows the `emptyData` message when there is no data to display\n if (!data?.rows?.length) {\n return (\n <TableRow>\n <TableCell colSpan={data?.headers?.length}>\n <div className=\"np-table-empty-data\" data-testid=\"np-table-empty-data\">\n <StatusIcon sentiment={Sentiment.WARNING} size={Size.MEDIUM} />\n <Body type=\"body-default-bold\">{formatMessage(messages.emptyData)}</Body>\n </div>\n </TableCell>\n </TableRow>\n );\n }\n\n return data?.rows?.map((rowData, rowIndex) => {\n return (\n <TableRow\n key={'table-row-'.concat(rowIndex.toString())}\n rowData={rowData}\n hasSeparator={data?.rows?.length ? data.rows.length - 1 !== rowIndex : false}\n onRowClick={data?.onRowClick}\n />\n );\n });\n };\n\n if (error) {\n return (\n <Alert\n className=\"np-table-error\"\n message={error.message}\n type={Sentiment.NEGATIVE}\n action={{\n href: error?.action?.href ?? '/',\n text: error?.action?.text ?? formatMessage(messages.refreshPage),\n }}\n data-testid=\"np-table-error\"\n />\n );\n }\n\n return (\n <>\n <div aria-live=\"polite\" className=\"sr-only\">\n {formatMessage(messages[loading ? 'loading' : 'loaded'])}\n </div>\n <div\n role={loading ? 'presentation' : 'region'}\n aria-labelledby={ariaLabelledBy}\n className={clsx('np-table-outer-container', className, {\n 'np-theme-personal': theme === 'bright-green',\n 'np-table-outer-container--center': !fullWidth,\n 'np-table-outer-container--full-width': fullWidth,\n })}\n tabIndex={0}\n data-testid=\"np-table-outer-container\"\n >\n <div\n className={clsx('np-table-container', {\n 'np-table-container--loading': loading,\n })}\n data-testid=\"np-table-container\"\n >\n <div className=\"np-table-inner-container\">\n <table className=\"np-table\">\n <thead aria-hidden={isEmptyHeader}>\n <tr>\n {isEmptyHeader ? (\n <TableHeader />\n ) : (\n data?.headers?.map((headerItem: TableHeaderType, index) => (\n <TableHeader\n key={headerItem.header?.concat(index.toString())}\n {...headerItem}\n />\n ))\n )}\n {data?.onRowClick && <TableHeader isActionHeader />}\n </tr>\n </thead>\n <tbody>\n <tr\n key=\"first-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n {getTableContent()}\n <tr\n key=\"last-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </>\n );\n};\n\nexport default Table;\n"],"names":["Table","ariaLabelledBy","data","loading","className","fullWidth","error","formatMessage","useIntl","theme","useTheme","isEmptyHeader","headers","length","getRowLength","columnsLength","onRowClick","getTableContent","_jsx","TableRow","children","TableCell","Loader","rows","colSpan","_jsxs","StatusIcon","sentiment","Sentiment","WARNING","size","Size","MEDIUM","Body","type","messages","emptyData","map","rowData","rowIndex","hasSeparator","concat","toString","Alert","message","NEGATIVE","action","href","text","refreshPage","_Fragment","role","clsx","tabIndex","TableHeader","headerItem","index","header","isActionHeader"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.js","sources":["../../src/table/TableCell.tsx"],"sourcesContent":["import TableStatusText from './TableStatusText';\nimport StatusIcon from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport React, { ImgHTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\nimport Body from '../body';\nimport Money, { MoneyProps } from '../money';\nimport AvatarView from '../avatarView';\n\ninterface TableCellTypeProp {\n type: 'leading' | 'text' | 'currency' | 'status' | 'media';\n}\n\n// `Media`, `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`\ninterface TableCellTextProps {\n primaryText?: string;\n secondaryText?: string;\n}\n\n// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values\ninterface TableCellStatusProp {\n status?: 'error' | 'success';\n}\n\nexport interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {\n media?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nexport interface TableCellLeading\n extends TableCellTypeProp,\n TableCellTextProps,\n TableCellStatusProp {\n avatar?: {\n src?: string;\n profileName?: string | null;\n };\n}\n\nexport interface TableCellText extends TableCellTypeProp, TableCellStatusProp {\n text?: string;\n}\n\nexport interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {\n primaryCurrency?: MoneyProps;\n secondaryCurrency?: MoneyProps;\n}\n\nexport interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {\n sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';\n}\n\nexport interface TableCellType {\n cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus & TableCellMedia;\n alignment?: 'left' | 'right';\n}\n\n// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.\nexport interface TableCellProps extends TableCellType {\n className?: string;\n colSpan?: number;\n children?: React.ReactNode;\n}\n\nconst TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {\n const getContentMedia = () => {\n let mediaContent = null;\n\n if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {\n mediaContent = (\n <AvatarView profileName={cell?.avatar?.profileName} size={40} imgSrc={cell?.avatar?.src} />\n );\n }\n\n if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {\n mediaContent = (\n <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />\n );\n }\n\n if (cell?.type === 'status') {\n mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;\n }\n\n if (cell?.type === 'media' && cell.media) {\n // eslint-disable-next-line jsx-a11y/alt-text\n mediaContent = <img {...cell.media} />;\n }\n\n if (mediaContent) {\n return (\n <div\n aria-hidden=\"true\"\n className=\"np-table-content-media\"\n data-testid=\"np-table-content-media\"\n >\n {mediaContent}\n </div>\n );\n }\n };\n\n const formatCurrencyValue = (currency?: MoneyProps) => {\n if (currency) {\n return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;\n }\n\n return '';\n };\n\n return (\n <td\n className={clsx(\n 'np-table-cell',\n cell?.type ? `np-table-cell--${cell?.type}` : '',\n `np-table-cell--${alignment}`,\n className,\n )}\n colSpan={colSpan}\n >\n {cell?.type === 'text' && cell?.text && (\n <TableStatusText text={cell?.text} status={cell?.status} />\n )}\n {cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && (\n <div\n className={clsx('np-table-content', {\n 'np-table-content--reversed': alignment === 'right',\n })}\n data-testid=\"np-table-content\"\n >\n {getContentMedia()}\n <div className=\"np-table-content-body\">\n {(cell?.primaryCurrency ?? cell?.primaryText) && (\n <TableStatusText\n text={\n cell?.type === 'currency'\n ? formatCurrencyValue(cell?.primaryCurrency)\n : (cell?.primaryText ?? '')\n }\n status={cell?.type !== 'status' ? cell?.status : undefined}\n typography=\"default-bold\"\n />\n )}\n {(cell?.secondaryCurrency ?? cell?.secondaryText) && (\n <Body>\n {cell?.type === 'currency'\n ? formatCurrencyValue(cell?.secondaryCurrency)\n : cell?.secondaryText}\n </Body>\n )}\n </div>\n </div>\n )}\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n"],"names":["TableCell","cell","alignment","className","colSpan","children","getContentMedia","mediaContent","type","avatar","src","profileName","_jsx","AvatarView","size","imgSrc","primaryCurrency","currency","Flag","code","toLowerCase","intrinsicSize","StatusIcon","sentiment","media","formatCurrencyValue","Money","amount","alwaysShowDecimals","_jsxs","clsx","text","TableStatusText","status","includes","primaryText","undefined","typography","secondaryCurrency","secondaryText","Body"],"mappings":";;;;;;;;;;;;;;AA+
|
|
1
|
+
{"version":3,"file":"TableCell.js","sources":["../../src/table/TableCell.tsx"],"sourcesContent":["import TableStatusText from './TableStatusText';\nimport StatusIcon from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport React, { ImgHTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\nimport Body from '../body';\nimport Money, { MoneyProps } from '../money';\nimport AvatarView from '../avatarView';\n\ninterface TableCellTypeProp {\n type: 'leading' | 'text' | 'currency' | 'status' | 'media';\n}\n\n// `Media`, `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`\ninterface TableCellTextProps {\n primaryText?: string;\n secondaryText?: string;\n}\n\n// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values\ninterface TableCellStatusProp {\n status?: 'error' | 'success';\n}\n\nexport interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {\n media?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nexport interface TableCellLeading\n extends TableCellTypeProp,\n TableCellTextProps,\n TableCellStatusProp {\n avatar?: {\n src?: string;\n profileName?: string | null;\n };\n}\n\nexport interface TableCellText extends TableCellTypeProp, TableCellStatusProp {\n text?: string;\n}\n\nexport interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {\n primaryCurrency?: MoneyProps;\n secondaryCurrency?: MoneyProps;\n}\n\nexport interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {\n sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';\n}\n\nexport interface TableCellType {\n cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus & TableCellMedia;\n alignment?: 'left' | 'right';\n}\n\n// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.\nexport interface TableCellProps extends TableCellType {\n className?: string;\n colSpan?: number;\n children?: React.ReactNode;\n}\n\nconst TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {\n const getContentMedia = () => {\n let mediaContent = null;\n\n if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {\n mediaContent = (\n <AvatarView profileName={cell?.avatar?.profileName} size={40} imgSrc={cell?.avatar?.src} />\n );\n }\n\n if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {\n mediaContent = (\n <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />\n );\n }\n\n if (cell?.type === 'status') {\n mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;\n }\n\n if (cell?.type === 'media' && cell.media) {\n // eslint-disable-next-line jsx-a11y/alt-text\n mediaContent = <img {...cell.media} />;\n }\n\n if (mediaContent) {\n return (\n <div\n aria-hidden=\"true\"\n className=\"np-table-content-media\"\n data-testid=\"np-table-content-media\"\n >\n {mediaContent}\n </div>\n );\n }\n };\n\n const formatCurrencyValue = (currency?: MoneyProps) => {\n if (currency) {\n return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;\n }\n\n return '';\n };\n\n return (\n <td\n className={clsx(\n 'np-table-cell',\n cell?.type ? `np-table-cell--${cell?.type}` : '',\n `np-table-cell--${alignment}`,\n className,\n )}\n colSpan={colSpan}\n >\n {cell?.type === 'text' && cell?.text && (\n <TableStatusText text={cell?.text} status={cell?.status} />\n )}\n {cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && (\n <div\n className={clsx('np-table-content', {\n 'np-table-content--reversed': alignment === 'right',\n })}\n data-testid=\"np-table-content\"\n >\n {getContentMedia()}\n <div className=\"np-table-content-body\">\n {(cell?.primaryCurrency ?? cell?.primaryText) && (\n <TableStatusText\n text={\n cell?.type === 'currency'\n ? formatCurrencyValue(cell?.primaryCurrency)\n : (cell?.primaryText ?? '')\n }\n status={cell?.type !== 'status' ? cell?.status : undefined}\n typography=\"default-bold\"\n />\n )}\n {(cell?.secondaryCurrency ?? cell?.secondaryText) && (\n <Body>\n {cell?.type === 'currency'\n ? formatCurrencyValue(cell?.secondaryCurrency)\n : cell?.secondaryText}\n </Body>\n )}\n </div>\n </div>\n )}\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n"],"names":["TableCell","cell","alignment","className","colSpan","children","getContentMedia","mediaContent","type","avatar","src","profileName","_jsx","AvatarView","size","imgSrc","primaryCurrency","currency","Flag","code","toLowerCase","intrinsicSize","StatusIcon","sentiment","media","formatCurrencyValue","Money","amount","alwaysShowDecimals","_jsxs","clsx","text","TableStatusText","status","includes","primaryText","undefined","typography","secondaryCurrency","secondaryText","Body"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCell.mjs","sources":["../../src/table/TableCell.tsx"],"sourcesContent":["import TableStatusText from './TableStatusText';\nimport StatusIcon from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport React, { ImgHTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\nimport Body from '../body';\nimport Money, { MoneyProps } from '../money';\nimport AvatarView from '../avatarView';\n\ninterface TableCellTypeProp {\n type: 'leading' | 'text' | 'currency' | 'status' | 'media';\n}\n\n// `Media`, `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`\ninterface TableCellTextProps {\n primaryText?: string;\n secondaryText?: string;\n}\n\n// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values\ninterface TableCellStatusProp {\n status?: 'error' | 'success';\n}\n\nexport interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {\n media?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nexport interface TableCellLeading\n extends TableCellTypeProp,\n TableCellTextProps,\n TableCellStatusProp {\n avatar?: {\n src?: string;\n profileName?: string | null;\n };\n}\n\nexport interface TableCellText extends TableCellTypeProp, TableCellStatusProp {\n text?: string;\n}\n\nexport interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {\n primaryCurrency?: MoneyProps;\n secondaryCurrency?: MoneyProps;\n}\n\nexport interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {\n sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';\n}\n\nexport interface TableCellType {\n cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus & TableCellMedia;\n alignment?: 'left' | 'right';\n}\n\n// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.\nexport interface TableCellProps extends TableCellType {\n className?: string;\n colSpan?: number;\n children?: React.ReactNode;\n}\n\nconst TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {\n const getContentMedia = () => {\n let mediaContent = null;\n\n if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {\n mediaContent = (\n <AvatarView profileName={cell?.avatar?.profileName} size={40} imgSrc={cell?.avatar?.src} />\n );\n }\n\n if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {\n mediaContent = (\n <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />\n );\n }\n\n if (cell?.type === 'status') {\n mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;\n }\n\n if (cell?.type === 'media' && cell.media) {\n // eslint-disable-next-line jsx-a11y/alt-text\n mediaContent = <img {...cell.media} />;\n }\n\n if (mediaContent) {\n return (\n <div\n aria-hidden=\"true\"\n className=\"np-table-content-media\"\n data-testid=\"np-table-content-media\"\n >\n {mediaContent}\n </div>\n );\n }\n };\n\n const formatCurrencyValue = (currency?: MoneyProps) => {\n if (currency) {\n return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;\n }\n\n return '';\n };\n\n return (\n <td\n className={clsx(\n 'np-table-cell',\n cell?.type ? `np-table-cell--${cell?.type}` : '',\n `np-table-cell--${alignment}`,\n className,\n )}\n colSpan={colSpan}\n >\n {cell?.type === 'text' && cell?.text && (\n <TableStatusText text={cell?.text} status={cell?.status} />\n )}\n {cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && (\n <div\n className={clsx('np-table-content', {\n 'np-table-content--reversed': alignment === 'right',\n })}\n data-testid=\"np-table-content\"\n >\n {getContentMedia()}\n <div className=\"np-table-content-body\">\n {(cell?.primaryCurrency ?? cell?.primaryText) && (\n <TableStatusText\n text={\n cell?.type === 'currency'\n ? formatCurrencyValue(cell?.primaryCurrency)\n : (cell?.primaryText ?? '')\n }\n status={cell?.type !== 'status' ? cell?.status : undefined}\n typography=\"default-bold\"\n />\n )}\n {(cell?.secondaryCurrency ?? cell?.secondaryText) && (\n <Body>\n {cell?.type === 'currency'\n ? formatCurrencyValue(cell?.secondaryCurrency)\n : cell?.secondaryText}\n </Body>\n )}\n </div>\n </div>\n )}\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n"],"names":["TableCell","cell","alignment","className","colSpan","children","getContentMedia","mediaContent","type","avatar","src","profileName","_jsx","AvatarView","size","imgSrc","primaryCurrency","currency","Flag","code","toLowerCase","intrinsicSize","StatusIcon","sentiment","media","formatCurrencyValue","Money","amount","alwaysShowDecimals","_jsxs","clsx","text","TableStatusText","status","includes","primaryText","undefined","typography","secondaryCurrency","secondaryText","Body"],"mappings":";;;;;;;;;;AA+
|
|
1
|
+
{"version":3,"file":"TableCell.mjs","sources":["../../src/table/TableCell.tsx"],"sourcesContent":["import TableStatusText from './TableStatusText';\nimport StatusIcon from '../statusIcon';\nimport { Flag } from '@wise/art';\nimport React, { ImgHTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\nimport Body from '../body';\nimport Money, { MoneyProps } from '../money';\nimport AvatarView from '../avatarView';\n\ninterface TableCellTypeProp {\n type: 'leading' | 'text' | 'currency' | 'status' | 'media';\n}\n\n// `Media`, `Leading` and `Status` cell types have 2 text fields: `primaryText` and `secondaryText`\ninterface TableCellTextProps {\n primaryText?: string;\n secondaryText?: string;\n}\n\n// `Leading`, `Text` and `Currency` cells' types can have a status indicator with `error` or `success` values\ninterface TableCellStatusProp {\n status?: 'error' | 'success';\n}\n\nexport interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {\n media?: ImgHTMLAttributes<HTMLImageElement>;\n}\n\nexport interface TableCellLeading\n extends TableCellTypeProp,\n TableCellTextProps,\n TableCellStatusProp {\n avatar?: {\n src?: string;\n profileName?: string | null;\n };\n}\n\nexport interface TableCellText extends TableCellTypeProp, TableCellStatusProp {\n text?: string;\n}\n\nexport interface TableCellCurrency extends TableCellTypeProp, TableCellStatusProp {\n primaryCurrency?: MoneyProps;\n secondaryCurrency?: MoneyProps;\n}\n\nexport interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {\n sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';\n}\n\nexport interface TableCellType {\n cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus & TableCellMedia;\n alignment?: 'left' | 'right';\n}\n\n// These properties should be exported only on the lib level to prevent visual issues because of incorrect usage.\nexport interface TableCellProps extends TableCellType {\n className?: string;\n colSpan?: number;\n children?: React.ReactNode;\n}\n\nconst TableCell = ({ cell, alignment = 'left', className, colSpan, children }: TableCellProps) => {\n const getContentMedia = () => {\n let mediaContent = null;\n\n if (cell?.type === 'leading' && (cell?.avatar?.src || cell?.avatar?.profileName)) {\n mediaContent = (\n <AvatarView profileName={cell?.avatar?.profileName} size={40} imgSrc={cell?.avatar?.src} />\n );\n }\n\n if (cell?.type === 'currency' && cell?.primaryCurrency?.currency) {\n mediaContent = (\n <Flag code={cell?.primaryCurrency?.currency?.toLowerCase()} intrinsicSize={24} />\n );\n }\n\n if (cell?.type === 'status') {\n mediaContent = <StatusIcon size={24} sentiment={cell?.sentiment ?? 'neutral'} />;\n }\n\n if (cell?.type === 'media' && cell.media) {\n // eslint-disable-next-line jsx-a11y/alt-text\n mediaContent = <img {...cell.media} />;\n }\n\n if (mediaContent) {\n return (\n <div\n aria-hidden=\"true\"\n className=\"np-table-content-media\"\n data-testid=\"np-table-content-media\"\n >\n {mediaContent}\n </div>\n );\n }\n };\n\n const formatCurrencyValue = (currency?: MoneyProps) => {\n if (currency) {\n return <Money amount={currency.amount} currency={currency.currency} alwaysShowDecimals />;\n }\n\n return '';\n };\n\n return (\n <td\n className={clsx(\n 'np-table-cell',\n cell?.type ? `np-table-cell--${cell?.type}` : '',\n `np-table-cell--${alignment}`,\n className,\n )}\n colSpan={colSpan}\n >\n {cell?.type === 'text' && cell?.text && (\n <TableStatusText text={cell?.text} status={cell?.status} />\n )}\n {cell?.type && ['leading', 'currency', 'status', 'media'].includes(cell?.type) && (\n <div\n className={clsx('np-table-content', {\n 'np-table-content--reversed': alignment === 'right',\n })}\n data-testid=\"np-table-content\"\n >\n {getContentMedia()}\n <div className=\"np-table-content-body\">\n {(cell?.primaryCurrency ?? cell?.primaryText) && (\n <TableStatusText\n text={\n cell?.type === 'currency'\n ? formatCurrencyValue(cell?.primaryCurrency)\n : (cell?.primaryText ?? '')\n }\n status={cell?.type !== 'status' ? cell?.status : undefined}\n typography=\"default-bold\"\n />\n )}\n {(cell?.secondaryCurrency ?? cell?.secondaryText) && (\n <Body>\n {cell?.type === 'currency'\n ? formatCurrencyValue(cell?.secondaryCurrency)\n : cell?.secondaryText}\n </Body>\n )}\n </div>\n </div>\n )}\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n"],"names":["TableCell","cell","alignment","className","colSpan","children","getContentMedia","mediaContent","type","avatar","src","profileName","_jsx","AvatarView","size","imgSrc","primaryCurrency","currency","Flag","code","toLowerCase","intrinsicSize","StatusIcon","sentiment","media","formatCurrencyValue","Money","amount","alwaysShowDecimals","_jsxs","clsx","text","TableStatusText","status","includes","primaryText","undefined","typography","secondaryCurrency","secondaryText","Body"],"mappings":";;;;;;;;;;AA+DA,MAAMA,SAAS,GAAGA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,SAAS,GAAG,MAAM;EAAEC,SAAS;EAAEC,OAAO;AAAEC,EAAAA;AAAQ,CAAkB,KAAI;EAC/F,MAAMC,eAAe,GAAGA,MAAK;IAC3B,IAAIC,YAAY,GAAG,IAAI;AAEvB,IAAA,IAAIN,IAAI,EAAEO,IAAI,KAAK,SAAS,KAAKP,IAAI,EAAEQ,MAAM,EAAEC,GAAG,IAAIT,IAAI,EAAEQ,MAAM,EAAEE,WAAW,CAAC,EAAE;MAChFJ,YAAY,gBACVK,GAAA,CAACC,UAAU,EAAA;AAACF,QAAAA,WAAW,EAAEV,IAAI,EAAEQ,MAAM,EAAEE,WAAY;AAACG,QAAAA,IAAI,EAAE,EAAG;AAACC,QAAAA,MAAM,EAAEd,IAAI,EAAEQ,MAAM,EAAEC;AAAI,OAAA,CACzF;AACH,IAAA;IAEA,IAAIT,IAAI,EAAEO,IAAI,KAAK,UAAU,IAAIP,IAAI,EAAEe,eAAe,EAAEC,QAAQ,EAAE;MAChEV,YAAY,gBACVK,GAAA,CAACM,IAAI,EAAA;QAACC,IAAI,EAAElB,IAAI,EAAEe,eAAe,EAAEC,QAAQ,EAAEG,WAAW,EAAG;AAACC,QAAAA,aAAa,EAAE;AAAG,OAAA,CAC/E;AACH,IAAA;AAEA,IAAA,IAAIpB,IAAI,EAAEO,IAAI,KAAK,QAAQ,EAAE;MAC3BD,YAAY,gBAAGK,GAAA,CAACU,UAAU,EAAA;AAACR,QAAAA,IAAI,EAAE,EAAG;AAACS,QAAAA,SAAS,EAAEtB,IAAI,EAAEsB,SAAS,IAAI;AAAU,QAAG;AAClF,IAAA;IAEA,IAAItB,IAAI,EAAEO,IAAI,KAAK,OAAO,IAAIP,IAAI,CAACuB,KAAK,EAAE;AACxC;AACAjB,MAAAA,YAAY,gBAAGK,GAAA,CAAA,KAAA,EAAA;AAAA,QAAA,GAASX,IAAI,CAACuB;AAAK,OAAC,CAAG;AACxC,IAAA;AAEA,IAAA,IAAIjB,YAAY,EAAE;AAChB,MAAA,oBACEK,GAAA,CAAA,KAAA,EAAA;AACE,QAAA,aAAA,EAAY,MAAM;AAClBT,QAAAA,SAAS,EAAC,wBAAwB;AAClC,QAAA,aAAA,EAAY,wBAAwB;AAAAE,QAAAA,QAAA,EAEnCE;AAAY,OACV,CAAC;AAEV,IAAA;EACF,CAAC;EAED,MAAMkB,mBAAmB,GAAIR,QAAqB,IAAI;AACpD,IAAA,IAAIA,QAAQ,EAAE;MACZ,oBAAOL,GAAA,CAACc,KAAK,EAAA;QAACC,MAAM,EAAEV,QAAQ,CAACU,MAAO;QAACV,QAAQ,EAAEA,QAAQ,CAACA,QAAS;QAACW,kBAAkB,EAAA;AAAA,OAAA,CAAG;AAC3F,IAAA;AAEA,IAAA,OAAO,EAAE;EACX,CAAC;AAED,EAAA,oBACEC,IAAA,CAAA,IAAA,EAAA;IACE1B,SAAS,EAAE2B,IAAI,CACb,eAAe,EACf7B,IAAI,EAAEO,IAAI,GAAG,CAAA,eAAA,EAAkBP,IAAI,EAAEO,IAAI,CAAA,CAAE,GAAG,EAAE,EAChD,kBAAkBN,SAAS,CAAA,CAAE,EAC7BC,SAAS,CACT;AACFC,IAAAA,OAAO,EAAEA,OAAQ;AAAAC,IAAAA,QAAA,EAAA,CAEhBJ,IAAI,EAAEO,IAAI,KAAK,MAAM,IAAIP,IAAI,EAAE8B,IAAI,iBAClCnB,GAAA,CAACoB,eAAe,EAAA;MAACD,IAAI,EAAE9B,IAAI,EAAE8B,IAAK;MAACE,MAAM,EAAEhC,IAAI,EAAEgC;KAAO,CACzD,EACAhC,IAAI,EAAEO,IAAI,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC0B,QAAQ,CAACjC,IAAI,EAAEO,IAAI,CAAC,iBAC5EqB,IAAA,CAAA,KAAA,EAAA;AACE1B,MAAAA,SAAS,EAAE2B,IAAI,CAAC,kBAAkB,EAAE;QAClC,4BAA4B,EAAE5B,SAAS,KAAK;AAC7C,OAAA,CAAE;AACH,MAAA,aAAA,EAAY,kBAAkB;AAAAG,MAAAA,QAAA,EAAA,CAE7BC,eAAe,EAAE,eAClBuB,IAAA,CAAA,KAAA,EAAA;AAAK1B,QAAAA,SAAS,EAAC,uBAAuB;AAAAE,QAAAA,QAAA,EAAA,CACnC,CAACJ,IAAI,EAAEe,eAAe,IAAIf,IAAI,EAAEkC,WAAW,kBAC1CvB,GAAA,CAACoB,eAAe,EAAA;AACdD,UAAAA,IAAI,EACF9B,IAAI,EAAEO,IAAI,KAAK,UAAU,GACrBiB,mBAAmB,CAACxB,IAAI,EAAEe,eAAe,CAAC,GACzCf,IAAI,EAAEkC,WAAW,IAAI,EAC3B;UACDF,MAAM,EAAEhC,IAAI,EAAEO,IAAI,KAAK,QAAQ,GAAGP,IAAI,EAAEgC,MAAM,GAAGG,SAAU;AAC3DC,UAAAA,UAAU,EAAC;AAAc,SAAA,CAE5B,EACA,CAACpC,IAAI,EAAEqC,iBAAiB,IAAIrC,IAAI,EAAEsC,aAAa,kBAC9C3B,GAAA,CAAC4B,IAAI,EAAA;AAAAnC,UAAAA,QAAA,EACFJ,IAAI,EAAEO,IAAI,KAAK,UAAU,GACtBiB,mBAAmB,CAACxB,IAAI,EAAEqC,iBAAiB,CAAC,GAC5CrC,IAAI,EAAEsC;AAAa,SACnB,CACP;AAAA,OACE,CACP;KAAK,CACN,EACAlC,QAAQ;AAAA,GACP,CAAC;AAET;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.js","sources":["../../src/table/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from './Table.messages';\nimport TableStatusText from './TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n header?: string;\n className?: string;\n alignment?: 'left' | 'right';\n status?: 'error';\n width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n header,\n className,\n alignment = 'left',\n status,\n width,\n isActionHeader = false,\n}: TableHeaderProps) => {\n const { formatMessage } = useIntl();\n\n const getHeaderContent = () => {\n if (isActionHeader) {\n // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n return (\n <TableStatusText\n text={formatMessage(messages.actionHeader)}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n />\n );\n }\n\n if (header) {\n return (\n <TableStatusText\n text={header}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n status={status}\n typography=\"default-bold\"\n />\n );\n }\n\n // If headers are empty, we still should render empty headers to keep visual consistency\n return (\n <div\n className=\"np-table-header-content np-text-body-default-bold\"\n data-testid=\"np-table-empty-header\"\n >\n \n </div>\n );\n };\n\n return (\n <th\n className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n 'np-table-header--error': status === 'error',\n 'np-table-header--action': isActionHeader,\n })}\n style={{ minWidth: width, width }}\n >\n {getHeaderContent()}\n </th>\n );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"TableHeader.js","sources":["../../src/table/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from './Table.messages';\nimport TableStatusText from './TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n header?: string;\n className?: string;\n alignment?: 'left' | 'right';\n status?: 'error';\n width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n header,\n className,\n alignment = 'left',\n status,\n width,\n isActionHeader = false,\n}: TableHeaderProps) => {\n const { formatMessage } = useIntl();\n\n const getHeaderContent = () => {\n if (isActionHeader) {\n // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n return (\n <TableStatusText\n text={formatMessage(messages.actionHeader)}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n />\n );\n }\n\n if (header) {\n return (\n <TableStatusText\n text={header}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n status={status}\n typography=\"default-bold\"\n />\n );\n }\n\n // If headers are empty, we still should render empty headers to keep visual consistency\n return (\n <div\n className=\"np-table-header-content np-text-body-default-bold\"\n data-testid=\"np-table-empty-header\"\n >\n \n </div>\n );\n };\n\n return (\n <th\n className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n 'np-table-header--error': status === 'error',\n 'np-table-header--action': isActionHeader,\n })}\n style={{ minWidth: width, width }}\n >\n {getHeaderContent()}\n </th>\n );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;;;;;AAiBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,MAAM;EACNC,SAAS;AACTC,EAAAA,SAAS,GAAG,MAAM;EAClBC,MAAM;EACNC,KAAK;AACLC,EAAAA,cAAc,GAAG;AAAK,CACL,KAAI;EACrB,MAAM;AAAEC,IAAAA;GAAe,GAAGC,iBAAO,EAAE;EAEnC,MAAMC,gBAAgB,GAAGA,MAAK;AAC5B,IAAA,IAAIH,cAAc,EAAE;AAClB;MACA,oBACEI,cAAA,CAACC,uBAAe,EAAA;AACdC,QAAAA,IAAI,EAAEL,aAAa,CAACM,sBAAQ,CAACC,YAAY,CAAE;AAC3CZ,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA;AAAG,OAAA,CACxE;AAEN,IAAA;AAEA,IAAA,IAAIL,MAAM,EAAE;MACV,oBACES,cAAA,CAACC,uBAAe,EAAA;AACdC,QAAAA,IAAI,EAAEX,MAAO;AACbC,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA,CAAG;AACxEF,QAAAA,MAAM,EAAEA,MAAO;AACfW,QAAAA,UAAU,EAAC;AAAc,OAAA,CACzB;AAEN,IAAA;AAEA;AACA,IAAA,oBACEL,cAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAC,mDAAmD;AAC7D,MAAA,aAAA,EAAY,uBAAuB;AAAAc,MAAAA,QAAA,EAEnC;AACF,KAAK,CAAC;EAEV,CAAC;AAED,EAAA,oBACEN,cAAA,CAAA,IAAA,EAAA;IACER,SAAS,EAAEe,SAAI,CAAC,iBAAiB,EAAEf,SAAS,EAAE,CAAA,iBAAA,EAAoBC,SAAS,CAAA,CAAE,EAAE;MAC7E,wBAAwB,EAAEC,MAAM,KAAK,OAAO;AAC5C,MAAA,yBAAyB,EAAEE;AAC5B,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAEd,KAAK;AAAEA,MAAAA;KAAQ;IAAAW,QAAA,EAEjCP,gBAAgB;AAAE,GACjB,CAAC;AAET;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.mjs","sources":["../../src/table/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from './Table.messages';\nimport TableStatusText from './TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n header?: string;\n className?: string;\n alignment?: 'left' | 'right';\n status?: 'error';\n width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n header,\n className,\n alignment = 'left',\n status,\n width,\n isActionHeader = false,\n}: TableHeaderProps) => {\n const { formatMessage } = useIntl();\n\n const getHeaderContent = () => {\n if (isActionHeader) {\n // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n return (\n <TableStatusText\n text={formatMessage(messages.actionHeader)}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n />\n );\n }\n\n if (header) {\n return (\n <TableStatusText\n text={header}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n status={status}\n typography=\"default-bold\"\n />\n );\n }\n\n // If headers are empty, we still should render empty headers to keep visual consistency\n return (\n <div\n className=\"np-table-header-content np-text-body-default-bold\"\n data-testid=\"np-table-empty-header\"\n >\n \n </div>\n );\n };\n\n return (\n <th\n className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n 'np-table-header--error': status === 'error',\n 'np-table-header--action': isActionHeader,\n })}\n style={{ minWidth: width, width }}\n >\n {getHeaderContent()}\n </th>\n );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"TableHeader.mjs","sources":["../../src/table/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from './Table.messages';\nimport TableStatusText from './TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n header?: string;\n className?: string;\n alignment?: 'left' | 'right';\n status?: 'error';\n width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n header,\n className,\n alignment = 'left',\n status,\n width,\n isActionHeader = false,\n}: TableHeaderProps) => {\n const { formatMessage } = useIntl();\n\n const getHeaderContent = () => {\n if (isActionHeader) {\n // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n return (\n <TableStatusText\n text={formatMessage(messages.actionHeader)}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n />\n );\n }\n\n if (header) {\n return (\n <TableStatusText\n text={header}\n className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n status={status}\n typography=\"default-bold\"\n />\n );\n }\n\n // If headers are empty, we still should render empty headers to keep visual consistency\n return (\n <div\n className=\"np-table-header-content np-text-body-default-bold\"\n data-testid=\"np-table-empty-header\"\n >\n \n </div>\n );\n };\n\n return (\n <th\n className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n 'np-table-header--error': status === 'error',\n 'np-table-header--action': isActionHeader,\n })}\n style={{ minWidth: width, width }}\n >\n {getHeaderContent()}\n </th>\n );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;AAiBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,MAAM;EACNC,SAAS;AACTC,EAAAA,SAAS,GAAG,MAAM;EAClBC,MAAM;EACNC,KAAK;AACLC,EAAAA,cAAc,GAAG;AAAK,CACL,KAAI;EACrB,MAAM;AAAEC,IAAAA;GAAe,GAAGC,OAAO,EAAE;EAEnC,MAAMC,gBAAgB,GAAGA,MAAK;AAC5B,IAAA,IAAIH,cAAc,EAAE;AAClB;MACA,oBACEI,GAAA,CAACC,eAAe,EAAA;AACdC,QAAAA,IAAI,EAAEL,aAAa,CAACM,QAAQ,CAACC,YAAY,CAAE;AAC3CZ,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA;AAAG,OAAA,CACxE;AAEN,IAAA;AAEA,IAAA,IAAIL,MAAM,EAAE;MACV,oBACES,GAAA,CAACC,eAAe,EAAA;AACdC,QAAAA,IAAI,EAAEX,MAAO;AACbC,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA,CAAG;AACxEF,QAAAA,MAAM,EAAEA,MAAO;AACfW,QAAAA,UAAU,EAAC;AAAc,OAAA,CACzB;AAEN,IAAA;AAEA;AACA,IAAA,oBACEL,GAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAC,mDAAmD;AAC7D,MAAA,aAAA,EAAY,uBAAuB;AAAAc,MAAAA,QAAA,EAEnC;AACF,KAAK,CAAC;EAEV,CAAC;AAED,EAAA,oBACEN,GAAA,CAAA,IAAA,EAAA;IACER,SAAS,EAAEe,IAAI,CAAC,iBAAiB,EAAEf,SAAS,EAAE,CAAA,iBAAA,EAAoBC,SAAS,CAAA,CAAE,EAAE;MAC7E,wBAAwB,EAAEC,MAAM,KAAK,OAAO;AAC5C,MAAA,yBAAyB,EAAEE;AAC5B,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAEd,KAAK;AAAEA,MAAAA;KAAQ;IAAAW,QAAA,EAEjCP,gBAAgB;AAAE,GACjB,CAAC;AAET;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.js","sources":["../../src/table/TableRow.tsx"],"sourcesContent":["import React from 'react';\nimport TableCell, { TableCellProps } from './TableCell';\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport { clsx } from 'clsx';\n\nexport interface TableRowType {\n cells?: TableCellProps[];\n}\n\nexport interface TableRowClickableType extends TableRowType {\n id: number | string; // `id` is mandatory for clickable rows\n}\n\nexport interface TableRowProps {\n rowData?: TableRowType | TableRowClickableType;\n hasSeparator?: boolean;\n children?: React.ReactNode;\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n}\n\nconst TableRow = ({ rowData, hasSeparator = false, children, onRowClick }: TableRowProps) => {\n return (\n <>\n <tr\n className={clsx('np-table-row', { 'np-table-row--clickable': !!onRowClick })}\n data-testid=\"np-table-row\"\n role={onRowClick ? 'button' : undefined}\n tabIndex={0}\n onClick={onRowClick && rowData ? () => onRowClick(rowData) : undefined}\n onKeyDown={({ key }) => {\n if (onRowClick && rowData && key === 'Enter') {\n onRowClick(rowData);\n }\n }}\n >\n {rowData?.cells\n ? rowData?.cells?.map((item, index) => {\n const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;\n return <TableCell key={itemIndex} {...item} />;\n })\n : children}\n {onRowClick && (\n <TableCell className=\"np-table-cell--action\">\n <div aria-hidden=\"true\">\n <Chevron orientation={Position.RIGHT} />\n </div>\n </TableCell>\n )}\n </tr>\n {hasSeparator && (\n <tr\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--separator\"\n data-testid=\"np-table-row--separator\"\n >\n <td\n className=\"np-table-cell np-table-cell--cosmetic\"\n colSpan={onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length}\n data-testid=\"np-table-cell--cosmetic\"\n >\n <div className=\"np-table-cell-separator\" data-testid=\"np-table-cell-separator\" />\n </td>\n </tr>\n )}\n </>\n );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowData","hasSeparator","children","onRowClick","_jsxs","_Fragment","className","clsx","role","undefined","tabIndex","onClick","onKeyDown","key","cells","map","item","index","itemIndex","cell","text","concat","toString","_jsx","TableCell","Chevron","orientation","Position","RIGHT","colSpan","Number","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"TableRow.js","sources":["../../src/table/TableRow.tsx"],"sourcesContent":["import React from 'react';\nimport TableCell, { TableCellProps } from './TableCell';\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport { clsx } from 'clsx';\n\nexport interface TableRowType {\n cells?: TableCellProps[];\n}\n\nexport interface TableRowClickableType extends TableRowType {\n id: number | string; // `id` is mandatory for clickable rows\n}\n\nexport interface TableRowProps {\n rowData?: TableRowType | TableRowClickableType;\n hasSeparator?: boolean;\n children?: React.ReactNode;\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n}\n\nconst TableRow = ({ rowData, hasSeparator = false, children, onRowClick }: TableRowProps) => {\n return (\n <>\n <tr\n className={clsx('np-table-row', { 'np-table-row--clickable': !!onRowClick })}\n data-testid=\"np-table-row\"\n role={onRowClick ? 'button' : undefined}\n tabIndex={0}\n onClick={onRowClick && rowData ? () => onRowClick(rowData) : undefined}\n onKeyDown={({ key }) => {\n if (onRowClick && rowData && key === 'Enter') {\n onRowClick(rowData);\n }\n }}\n >\n {rowData?.cells\n ? rowData?.cells?.map((item, index) => {\n const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;\n return <TableCell key={itemIndex} {...item} />;\n })\n : children}\n {onRowClick && (\n <TableCell className=\"np-table-cell--action\">\n <div aria-hidden=\"true\">\n <Chevron orientation={Position.RIGHT} />\n </div>\n </TableCell>\n )}\n </tr>\n {hasSeparator && (\n <tr\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--separator\"\n data-testid=\"np-table-row--separator\"\n >\n <td\n className=\"np-table-cell np-table-cell--cosmetic\"\n colSpan={onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length}\n data-testid=\"np-table-cell--cosmetic\"\n >\n <div className=\"np-table-cell-separator\" data-testid=\"np-table-cell-separator\" />\n </td>\n </tr>\n )}\n </>\n );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowData","hasSeparator","children","onRowClick","_jsxs","_Fragment","className","clsx","role","undefined","tabIndex","onClick","onKeyDown","key","cells","map","item","index","itemIndex","cell","text","concat","toString","_jsx","TableCell","Chevron","orientation","Position","RIGHT","colSpan","Number","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,QAAQ,GAAGA,CAAC;EAAEC,OAAO;AAAEC,EAAAA,YAAY,GAAG,KAAK;EAAEC,QAAQ;AAAEC,EAAAA;AAAU,CAAiB,KAAI;EAC1F,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAH,IAAAA,QAAA,gBACEE,eAAA,CAAA,IAAA,EAAA;AACEE,MAAAA,SAAS,EAAEC,SAAI,CAAC,cAAc,EAAE;QAAE,yBAAyB,EAAE,CAAC,CAACJ;AAAU,OAAE,CAAE;AAC7E,MAAA,aAAA,EAAY,cAAc;AAC1BK,MAAAA,IAAI,EAAEL,UAAU,GAAG,QAAQ,GAAGM,SAAU;AACxCC,MAAAA,QAAQ,EAAE,CAAE;MACZC,OAAO,EAAER,UAAU,IAAIH,OAAO,GAAG,MAAMG,UAAU,CAACH,OAAO,CAAC,GAAGS,SAAU;AACvEG,MAAAA,SAAS,EAAEA,CAAC;AAAEC,QAAAA;AAAG,OAAE,KAAI;AACrB,QAAA,IAAIV,UAAU,IAAIH,OAAO,IAAIa,GAAG,KAAK,OAAO,EAAE;UAC5CV,UAAU,CAACH,OAAO,CAAC;AACrB,QAAA;MACF,CAAE;AAAAE,MAAAA,QAAA,EAAA,CAEDF,OAAO,EAAEc,KAAK,GACXd,OAAO,EAAEc,KAAK,EAAEC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAI;QAClC,MAAMC,SAAS,GAAGF,IAAI,CAACG,IAAI,EAAEC,IAAI,GAAGJ,IAAI,CAACG,IAAI,EAAEC,IAAI,CAACC,MAAM,CAACJ,KAAK,CAACK,QAAQ,EAAE,CAAC,GAAGL,KAAK;QACpF,oBAAOM,cAAA,CAACC,iBAAS,EAAA;UAAA,GAAqBR;AAAI,SAAA,EAAnBE,UAAuB;MAChD,CAAC,CAAC,GACFhB,QAAQ,EACXC,UAAU,iBACToB,cAAA,CAACC,iBAAS,EAAA;AAAClB,QAAAA,SAAS,EAAC,uBAAuB;AAAAJ,QAAAA,QAAA,eAC1CqB,cAAA,CAAA,KAAA,EAAA;AAAK,UAAA,aAAA,EAAY,MAAM;UAAArB,QAAA,eACrBqB,cAAA,CAACE,eAAO,EAAA;YAACC,WAAW,EAAEC,iBAAQ,CAACC;WAAM;SAClC;AACP,OAAW,CACZ;AAAA,KACC,CACJ,EAAC3B,YAAY,iBACXsB,cAAA,CAAA,IAAA,EAAA;AACE,MAAA,aAAA,EAAY,MAAM;AAClBjB,MAAAA,SAAS,EAAC,sCAAsC;AAChD,MAAA,aAAA,EAAY,yBAAyB;AAAAJ,MAAAA,QAAA,eAErCqB,cAAA,CAAA,IAAA,EAAA;AACEjB,QAAAA,SAAS,EAAC,uCAAuC;AACjDuB,QAAAA,OAAO,EAAE1B,UAAU,GAAG2B,MAAM,CAAC9B,OAAO,EAAEc,KAAK,EAAEiB,MAAM,CAAC,GAAG,CAAC,GAAG/B,OAAO,EAAEc,KAAK,EAAEiB,MAAO;AAClF,QAAA,aAAA,EAAY,yBAAyB;AAAA7B,QAAAA,QAAA,eAErCqB,cAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAC,yBAAyB;UAAC,aAAA,EAAY;SAAyB;OAC5E;AACN,KAAI,CACL;AAAA,GACH,CAAG;AAEP;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.mjs","sources":["../../src/table/TableRow.tsx"],"sourcesContent":["import React from 'react';\nimport TableCell, { TableCellProps } from './TableCell';\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport { clsx } from 'clsx';\n\nexport interface TableRowType {\n cells?: TableCellProps[];\n}\n\nexport interface TableRowClickableType extends TableRowType {\n id: number | string; // `id` is mandatory for clickable rows\n}\n\nexport interface TableRowProps {\n rowData?: TableRowType | TableRowClickableType;\n hasSeparator?: boolean;\n children?: React.ReactNode;\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n}\n\nconst TableRow = ({ rowData, hasSeparator = false, children, onRowClick }: TableRowProps) => {\n return (\n <>\n <tr\n className={clsx('np-table-row', { 'np-table-row--clickable': !!onRowClick })}\n data-testid=\"np-table-row\"\n role={onRowClick ? 'button' : undefined}\n tabIndex={0}\n onClick={onRowClick && rowData ? () => onRowClick(rowData) : undefined}\n onKeyDown={({ key }) => {\n if (onRowClick && rowData && key === 'Enter') {\n onRowClick(rowData);\n }\n }}\n >\n {rowData?.cells\n ? rowData?.cells?.map((item, index) => {\n const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;\n return <TableCell key={itemIndex} {...item} />;\n })\n : children}\n {onRowClick && (\n <TableCell className=\"np-table-cell--action\">\n <div aria-hidden=\"true\">\n <Chevron orientation={Position.RIGHT} />\n </div>\n </TableCell>\n )}\n </tr>\n {hasSeparator && (\n <tr\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--separator\"\n data-testid=\"np-table-row--separator\"\n >\n <td\n className=\"np-table-cell np-table-cell--cosmetic\"\n colSpan={onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length}\n data-testid=\"np-table-cell--cosmetic\"\n >\n <div className=\"np-table-cell-separator\" data-testid=\"np-table-cell-separator\" />\n </td>\n </tr>\n )}\n </>\n );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowData","hasSeparator","children","onRowClick","_jsxs","_Fragment","className","clsx","role","undefined","tabIndex","onClick","onKeyDown","key","cells","map","item","index","itemIndex","cell","text","concat","toString","_jsx","TableCell","Chevron","orientation","Position","RIGHT","colSpan","Number","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"TableRow.mjs","sources":["../../src/table/TableRow.tsx"],"sourcesContent":["import React from 'react';\nimport TableCell, { TableCellProps } from './TableCell';\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport { clsx } from 'clsx';\n\nexport interface TableRowType {\n cells?: TableCellProps[];\n}\n\nexport interface TableRowClickableType extends TableRowType {\n id: number | string; // `id` is mandatory for clickable rows\n}\n\nexport interface TableRowProps {\n rowData?: TableRowType | TableRowClickableType;\n hasSeparator?: boolean;\n children?: React.ReactNode;\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n}\n\nconst TableRow = ({ rowData, hasSeparator = false, children, onRowClick }: TableRowProps) => {\n return (\n <>\n <tr\n className={clsx('np-table-row', { 'np-table-row--clickable': !!onRowClick })}\n data-testid=\"np-table-row\"\n role={onRowClick ? 'button' : undefined}\n tabIndex={0}\n onClick={onRowClick && rowData ? () => onRowClick(rowData) : undefined}\n onKeyDown={({ key }) => {\n if (onRowClick && rowData && key === 'Enter') {\n onRowClick(rowData);\n }\n }}\n >\n {rowData?.cells\n ? rowData?.cells?.map((item, index) => {\n const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;\n return <TableCell key={itemIndex} {...item} />;\n })\n : children}\n {onRowClick && (\n <TableCell className=\"np-table-cell--action\">\n <div aria-hidden=\"true\">\n <Chevron orientation={Position.RIGHT} />\n </div>\n </TableCell>\n )}\n </tr>\n {hasSeparator && (\n <tr\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--separator\"\n data-testid=\"np-table-row--separator\"\n >\n <td\n className=\"np-table-cell np-table-cell--cosmetic\"\n colSpan={onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length}\n data-testid=\"np-table-cell--cosmetic\"\n >\n <div className=\"np-table-cell-separator\" data-testid=\"np-table-cell-separator\" />\n </td>\n </tr>\n )}\n </>\n );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowData","hasSeparator","children","onRowClick","_jsxs","_Fragment","className","clsx","role","undefined","tabIndex","onClick","onKeyDown","key","cells","map","item","index","itemIndex","cell","text","concat","toString","_jsx","TableCell","Chevron","orientation","Position","RIGHT","colSpan","Number","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,QAAQ,GAAGA,CAAC;EAAEC,OAAO;AAAEC,EAAAA,YAAY,GAAG,KAAK;EAAEC,QAAQ;AAAEC,EAAAA;AAAU,CAAiB,KAAI;EAC1F,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAH,IAAAA,QAAA,gBACEE,IAAA,CAAA,IAAA,EAAA;AACEE,MAAAA,SAAS,EAAEC,IAAI,CAAC,cAAc,EAAE;QAAE,yBAAyB,EAAE,CAAC,CAACJ;AAAU,OAAE,CAAE;AAC7E,MAAA,aAAA,EAAY,cAAc;AAC1BK,MAAAA,IAAI,EAAEL,UAAU,GAAG,QAAQ,GAAGM,SAAU;AACxCC,MAAAA,QAAQ,EAAE,CAAE;MACZC,OAAO,EAAER,UAAU,IAAIH,OAAO,GAAG,MAAMG,UAAU,CAACH,OAAO,CAAC,GAAGS,SAAU;AACvEG,MAAAA,SAAS,EAAEA,CAAC;AAAEC,QAAAA;AAAG,OAAE,KAAI;AACrB,QAAA,IAAIV,UAAU,IAAIH,OAAO,IAAIa,GAAG,KAAK,OAAO,EAAE;UAC5CV,UAAU,CAACH,OAAO,CAAC;AACrB,QAAA;MACF,CAAE;AAAAE,MAAAA,QAAA,EAAA,CAEDF,OAAO,EAAEc,KAAK,GACXd,OAAO,EAAEc,KAAK,EAAEC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAI;QAClC,MAAMC,SAAS,GAAGF,IAAI,CAACG,IAAI,EAAEC,IAAI,GAAGJ,IAAI,CAACG,IAAI,EAAEC,IAAI,CAACC,MAAM,CAACJ,KAAK,CAACK,QAAQ,EAAE,CAAC,GAAGL,KAAK;QACpF,oBAAOM,GAAA,CAACC,SAAS,EAAA;UAAA,GAAqBR;AAAI,SAAA,EAAnBE,UAAuB;MAChD,CAAC,CAAC,GACFhB,QAAQ,EACXC,UAAU,iBACToB,GAAA,CAACC,SAAS,EAAA;AAAClB,QAAAA,SAAS,EAAC,uBAAuB;AAAAJ,QAAAA,QAAA,eAC1CqB,GAAA,CAAA,KAAA,EAAA;AAAK,UAAA,aAAA,EAAY,MAAM;UAAArB,QAAA,eACrBqB,GAAA,CAACE,OAAO,EAAA;YAACC,WAAW,EAAEC,QAAQ,CAACC;WAAM;SAClC;AACP,OAAW,CACZ;AAAA,KACC,CACJ,EAAC3B,YAAY,iBACXsB,GAAA,CAAA,IAAA,EAAA;AACE,MAAA,aAAA,EAAY,MAAM;AAClBjB,MAAAA,SAAS,EAAC,sCAAsC;AAChD,MAAA,aAAA,EAAY,yBAAyB;AAAAJ,MAAAA,QAAA,eAErCqB,GAAA,CAAA,IAAA,EAAA;AACEjB,QAAAA,SAAS,EAAC,uCAAuC;AACjDuB,QAAAA,OAAO,EAAE1B,UAAU,GAAG2B,MAAM,CAAC9B,OAAO,EAAEc,KAAK,EAAEiB,MAAM,CAAC,GAAG,CAAC,GAAG/B,OAAO,EAAEc,KAAK,EAAEiB,MAAO;AAClF,QAAA,aAAA,EAAY,yBAAyB;AAAA7B,QAAAA,QAAA,eAErCqB,GAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAC,yBAAyB;UAAC,aAAA,EAAY;SAAyB;OAC5E;AACN,KAAI,CACL;AAAA,GACH,CAAG;AAEP;;;;"}
|