@transferwise/components 37.0.0 → 37.0.1-beta.23
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/CHANGELOG.md +264 -0
- package/build/es/no-polyfill/accordion/Accordion.js +1 -1
- package/build/es/no-polyfill/accordion/AccordionItem/AccordionItem.js +1 -1
- package/build/es/no-polyfill/actionOption/ActionOption.js +1 -1
- package/build/es/no-polyfill/actionOption/ActionOption.story.js +1 -1
- package/build/es/no-polyfill/alert/Alert.js +1 -1
- package/build/es/no-polyfill/alert/inlineMarkdown/InlineMarkdown.js +1 -1
- package/build/es/no-polyfill/alert/withArrow/withArrow.js +1 -1
- package/build/es/no-polyfill/avatar/Avatar.js +1 -1
- package/build/es/no-polyfill/avatarWrapper/AvatarWrapper.js +1 -1
- package/build/es/no-polyfill/badge/Badge.js +1 -1
- package/build/es/no-polyfill/button/Button.js +1 -2
- package/build/es/no-polyfill/card/Card.js +2 -5
- package/build/es/no-polyfill/checkbox/Checkbox.js +1 -1
- package/build/es/no-polyfill/checkboxButton/CheckboxButton.js +1 -1
- package/build/es/no-polyfill/checkboxOption/CheckboxOption.js +1 -1
- package/build/es/no-polyfill/chevron/Chevron.js +1 -1
- package/build/es/no-polyfill/chip/Chip.js +8 -2
- package/build/es/no-polyfill/circularButton/CircularButton.js +1 -1
- package/build/es/no-polyfill/common/Option/Option.js +1 -1
- package/build/es/no-polyfill/common/Option/OptionDocumentation.js +1 -0
- package/build/es/no-polyfill/common/RadioButton/RadioButton.js +1 -1
- package/build/es/no-polyfill/common/bottomSheet/BottomSheet.js +4 -6
- package/build/es/no-polyfill/common/closeButton/CloseButton.js +1 -1
- package/build/es/no-polyfill/common/focusBoundary/FocusBoundary.js +1 -1
- package/build/es/no-polyfill/common/focusBoundary/utils/getFocusableElements.js +2 -2
- package/build/es/no-polyfill/common/focusBoundary/utils/resetFocus.js +2 -2
- package/build/es/no-polyfill/common/historyNavigator/historyNavigator.js +1 -1
- package/build/es/no-polyfill/common/hooks/useClientWidth/useClientWidth.js +2 -1
- package/build/es/no-polyfill/common/hooks/useConditionalListener/useConditionalListener.js +3 -5
- package/build/es/no-polyfill/common/hooks/useHasIntersected/useHasIntersected.js +3 -2
- package/build/es/no-polyfill/common/keyCodes.js +1 -0
- package/build/es/no-polyfill/common/panel/Panel.js +2 -3
- package/build/es/no-polyfill/common/requirements.js +2 -2
- package/build/es/no-polyfill/common/responsivePanel/ResponsivePanel.js +1 -1
- package/build/es/no-polyfill/common/textFormat/getCursorPositionAfterKeystroke/getCursorPositionAfterKeystroke.js +1 -1
- package/build/es/no-polyfill/common/textFormat/unformatWithPattern/unformatWithPattern.js +1 -1
- package/build/es/no-polyfill/dateInput/DateInput.js +3 -4
- package/build/es/no-polyfill/dateInput/DateInput.messages.js +1 -0
- package/build/es/no-polyfill/dateLookup/DateLookup.js +1 -1
- package/build/es/no-polyfill/dateLookup/dateTrigger/DateTrigger.js +1 -1
- package/build/es/no-polyfill/dateLookup/dayCalendar/DayCalendar.js +1 -1
- package/build/es/no-polyfill/dateLookup/dayCalendar/table/DayCalendarTable.js +3 -3
- package/build/es/no-polyfill/dateLookup/header/Header.js +1 -1
- package/build/es/no-polyfill/dateLookup/monthCalendar/MonthCalendar.js +1 -1
- package/build/es/no-polyfill/dateLookup/monthCalendar/table/MonthCalendarTable.js +1 -1
- package/build/es/no-polyfill/dateLookup/tableLink/TableLink.js +1 -1
- package/build/es/no-polyfill/dateLookup/yearCalendar/YearCalendar.js +1 -1
- package/build/es/no-polyfill/dateLookup/yearCalendar/table/YearCalendarTable.js +1 -1
- package/build/es/no-polyfill/decision/Decision.js +5 -5
- package/build/es/no-polyfill/definitionList/DefinitionList.js +1 -1
- package/build/es/no-polyfill/dimmer/Dimmer.js +3 -3
- package/build/es/no-polyfill/drawer/Drawer.js +1 -1
- package/build/es/no-polyfill/dynamicFieldDefinitionList/DynamicFieldDefinitionList.js +1 -1
- package/build/es/no-polyfill/dynamicFieldDefinitionList/FormattedValue/FormattedValue.js +2 -4
- package/build/es/no-polyfill/dynamicFieldDefinitionList/utils/text-format.js +1 -1
- package/build/es/no-polyfill/emphasis/Emphasis.js +1 -1
- package/build/es/no-polyfill/flowNavigation/FlowNavigation.js +1 -1
- package/build/es/no-polyfill/flowNavigation/animatedLabel/AnimatedLabel.js +1 -1
- package/build/es/no-polyfill/flowNavigation/backButton/BackButton.js +1 -1
- package/build/es/no-polyfill/header/Header.js +1 -1
- package/build/es/no-polyfill/i18n/en.json +3 -2
- package/build/es/no-polyfill/i18n/index.js +1 -1
- package/build/es/no-polyfill/image/Image.js +4 -5
- package/build/es/no-polyfill/info/Info.js +1 -1
- package/build/es/no-polyfill/inlineAlert/InlineAlert.js +1 -1
- package/build/es/no-polyfill/instructionsList/InstructionsList.js +1 -1
- package/build/es/no-polyfill/lab/mobileNav/MobileNav.js +2 -2
- package/build/es/no-polyfill/lab/pagination/Pagination.js +1 -1
- package/build/es/no-polyfill/lab/pagination/paginationLink/PaginationLink.js +1 -1
- package/build/es/no-polyfill/link/Link.js +4 -3
- package/build/es/no-polyfill/link/Link.spec.js +1 -0
- package/build/es/no-polyfill/link/Link.story.js +1 -0
- package/build/es/no-polyfill/loader/Loader.js +7 -3
- package/build/es/no-polyfill/logo/Logo.js +1 -1
- package/build/es/no-polyfill/markdown/Markdown.js +1 -1
- package/build/es/no-polyfill/modal/Modal.js +1 -1
- package/build/es/no-polyfill/money/Money.js +1 -1
- package/build/es/no-polyfill/moneyInput/MoneyInput.js +1 -2
- package/build/es/no-polyfill/navigationOption/NavigationOption.js +1 -1
- package/build/es/no-polyfill/navigationOptionsList/NavigationOptionsList.js +1 -1
- package/build/es/no-polyfill/nudge/Nudge.js +1 -1
- package/build/es/no-polyfill/overlayHeader/OverlayHeader.js +1 -1
- package/build/es/no-polyfill/phoneNumberInput/PhoneNumberInput.js +1 -1
- package/build/es/no-polyfill/phoneNumberInput/utils/explodeNumberModel/index.js +2 -1
- package/build/es/no-polyfill/phoneNumberInput/utils/filterOptionsForQuery/index.js +1 -0
- package/build/es/no-polyfill/phoneNumberInput/utils/findCountryByCode/index.js +1 -1
- package/build/es/no-polyfill/phoneNumberInput/utils/findCountryByPrefix/index.js +1 -1
- package/build/es/no-polyfill/phoneNumberInput/utils/isOptionAndFitsQuery/isOptionAndFitsQuery.js +1 -0
- package/build/es/no-polyfill/phoneNumberInput/utils/setDefaultPrefix/index.js +2 -0
- package/build/es/no-polyfill/popover/Popover.js +1 -1
- package/build/es/no-polyfill/processIndicator/ProcessIndicator.js +4 -1
- package/build/es/no-polyfill/provider/Provider.js +1 -1
- package/build/es/no-polyfill/provider/direction/DirectionProvider.js +1 -1
- package/build/es/no-polyfill/radio/Radio.js +1 -1
- package/build/es/no-polyfill/radioGroup/RadioGroup.js +2 -2
- package/build/es/no-polyfill/radioOption/RadioOption.js +1 -1
- package/build/es/no-polyfill/select/Select.js +3 -5
- package/build/es/no-polyfill/select/option/Option.js +1 -1
- package/build/es/no-polyfill/select/searchBox/SearchBox.js +1 -1
- package/build/es/no-polyfill/sizeSwapper/SizeSwapper.js +4 -2
- package/build/es/no-polyfill/slidingPanel/SlidingPanel.js +2 -2
- package/build/es/no-polyfill/snackbar/Snackbar.js +1 -1
- package/build/es/no-polyfill/snackbar/SnackbarProvider.js +1 -1
- package/build/es/no-polyfill/stepper/Stepper.js +1 -1
- package/build/es/no-polyfill/stepper/deviceDetection.js +2 -1
- package/build/es/no-polyfill/summary/Summary.js +1 -4
- package/build/es/no-polyfill/switch/Switch.js +1 -1
- package/build/es/no-polyfill/switch/Switch.story.js +1 -1
- package/build/es/no-polyfill/switchOption/SwitchOption.js +1 -1
- package/build/es/no-polyfill/switchOption/SwitchOption.story.js +1 -1
- package/build/es/no-polyfill/tabs/Tab.js +1 -1
- package/build/es/no-polyfill/tabs/Tabs.js +1 -1
- package/build/es/no-polyfill/tile/Tile.js +1 -1
- package/build/es/no-polyfill/tooltip/Tooltip.js +1 -1
- package/build/es/no-polyfill/typeahead/Typeahead.js +1 -2
- package/build/es/no-polyfill/typeahead/typeaheadInput/TypeaheadInput.js +1 -1
- package/build/es/no-polyfill/typeahead/typeaheadOption/TypeaheadOption.js +1 -1
- package/build/es/no-polyfill/typeahead/util/highlight.js +1 -1
- package/build/es/no-polyfill/upload/Upload.js +3 -5
- package/build/es/no-polyfill/upload/steps/completeStep/completeStep.js +1 -1
- package/build/es/no-polyfill/upload/steps/mediaUploadStep/mediaUploadStep.js +1 -1
- package/build/es/no-polyfill/upload/steps/processingStep/processingStep.js +1 -1
- package/build/es/no-polyfill/upload/steps/uploadImageStep/uploadImageStep.js +1 -1
- package/build/es/no-polyfill/upload/utils/asyncFileRead/asyncFileRead.js +1 -1
- package/build/es/no-polyfill/upload/utils/getSupportedSpotMimeTypes/getSupportedSpotMimeTypes.js +1 -1
- package/build/es/no-polyfill/upload/utils/index.js +1 -1
- package/build/es/no-polyfill/uploadInput/UploadInput.js +4 -6
- package/build/es/no-polyfill/uploadInput/UploadInput.spec.js +1 -1
- package/build/es/no-polyfill/uploadInput/UploadInput.story.js +1 -1
- package/build/es/no-polyfill/uploadInput/types.js +1 -0
- package/build/es/no-polyfill/uploadInput/uploadButton/UploadButton.js +1 -1
- package/build/es/no-polyfill/uploadInput/uploadButton/UploadButton.spec.js +3 -1
- package/build/es/no-polyfill/uploadInput/uploadButton/getAllowedFileTypes.spec.js +1 -1
- package/build/es/no-polyfill/uploadInput/uploadItem/UploadItem.js +2 -2
- package/build/es/no-polyfill/uploadInput/uploadItem/UploadItem.spec.js +1 -1
- package/build/es/no-polyfill/uploadInput/uploadItem/UploadItemBody.js +1 -1
- package/build/es/no-polyfill/utilities/{deprecatedProp/deprecatedProp.js → deprecatedProperty/deprecatedProperty.js} +0 -0
- package/build/es/no-polyfill/utilities/deprecatedProperty/index.js +1 -0
- package/build/es/no-polyfill/utilities/index.js +1 -1
- package/build/es/no-polyfill/utilities/logActionRequired.js +1 -1
- package/build/es/no-polyfill/withDisplayFormat/WithDisplayFormat.js +2 -2
- package/build/es/no-polyfill/withNextPortal/withNextPortal.js +1 -1
- package/build/es/no-polyfill/withNormaliser/WithNormalizer.js +3 -0
- package/build/es/polyfill/accordion/Accordion.js +1 -1
- package/build/es/polyfill/accordion/AccordionItem/AccordionItem.js +1 -1
- package/build/es/polyfill/actionOption/ActionOption.js +1 -1
- package/build/es/polyfill/actionOption/ActionOption.story.js +1 -1
- package/build/es/polyfill/alert/Alert.js +1 -1
- package/build/es/polyfill/alert/inlineMarkdown/InlineMarkdown.js +1 -1
- package/build/es/polyfill/alert/withArrow/withArrow.js +1 -1
- package/build/es/polyfill/avatar/Avatar.js +1 -1
- package/build/es/polyfill/avatarWrapper/AvatarWrapper.js +1 -1
- package/build/es/polyfill/badge/Badge.js +1 -1
- package/build/es/polyfill/button/Button.js +1 -2
- package/build/es/polyfill/card/Card.js +2 -5
- package/build/es/polyfill/checkbox/Checkbox.js +1 -1
- package/build/es/polyfill/checkboxButton/CheckboxButton.js +1 -1
- package/build/es/polyfill/checkboxOption/CheckboxOption.js +1 -1
- package/build/es/polyfill/chevron/Chevron.js +1 -1
- package/build/es/polyfill/chip/Chip.js +8 -2
- package/build/es/polyfill/circularButton/CircularButton.js +1 -1
- package/build/es/polyfill/common/Option/Option.js +1 -1
- package/build/es/polyfill/common/Option/OptionDocumentation.js +1 -0
- package/build/es/polyfill/common/RadioButton/RadioButton.js +1 -1
- package/build/es/polyfill/common/bottomSheet/BottomSheet.js +4 -6
- package/build/es/polyfill/common/closeButton/CloseButton.js +1 -1
- package/build/es/polyfill/common/focusBoundary/FocusBoundary.js +1 -1
- package/build/es/polyfill/common/focusBoundary/utils/getFocusableElements.js +2 -2
- package/build/es/polyfill/common/focusBoundary/utils/resetFocus.js +2 -2
- package/build/es/polyfill/common/historyNavigator/historyNavigator.js +1 -1
- package/build/es/polyfill/common/hooks/useClientWidth/useClientWidth.js +2 -1
- package/build/es/polyfill/common/hooks/useConditionalListener/useConditionalListener.js +3 -5
- package/build/es/polyfill/common/hooks/useHasIntersected/useHasIntersected.js +3 -2
- package/build/es/polyfill/common/keyCodes.js +1 -0
- package/build/es/polyfill/common/panel/Panel.js +2 -3
- package/build/es/polyfill/common/requirements.js +2 -2
- package/build/es/polyfill/common/responsivePanel/ResponsivePanel.js +1 -1
- package/build/es/polyfill/common/textFormat/getCursorPositionAfterKeystroke/getCursorPositionAfterKeystroke.js +1 -1
- package/build/es/polyfill/common/textFormat/unformatWithPattern/unformatWithPattern.js +1 -1
- package/build/es/polyfill/dateInput/DateInput.js +3 -4
- package/build/es/polyfill/dateInput/DateInput.messages.js +1 -0
- package/build/es/polyfill/dateLookup/DateLookup.js +1 -1
- package/build/es/polyfill/dateLookup/dateTrigger/DateTrigger.js +1 -1
- package/build/es/polyfill/dateLookup/dayCalendar/DayCalendar.js +1 -1
- package/build/es/polyfill/dateLookup/dayCalendar/table/DayCalendarTable.js +3 -3
- package/build/es/polyfill/dateLookup/header/Header.js +1 -1
- package/build/es/polyfill/dateLookup/monthCalendar/MonthCalendar.js +1 -1
- package/build/es/polyfill/dateLookup/monthCalendar/table/MonthCalendarTable.js +1 -1
- package/build/es/polyfill/dateLookup/tableLink/TableLink.js +1 -1
- package/build/es/polyfill/dateLookup/yearCalendar/YearCalendar.js +1 -1
- package/build/es/polyfill/dateLookup/yearCalendar/table/YearCalendarTable.js +1 -1
- package/build/es/polyfill/decision/Decision.js +5 -5
- package/build/es/polyfill/definitionList/DefinitionList.js +1 -1
- package/build/es/polyfill/dimmer/Dimmer.js +3 -3
- package/build/es/polyfill/drawer/Drawer.js +1 -1
- package/build/es/polyfill/dynamicFieldDefinitionList/DynamicFieldDefinitionList.js +1 -1
- package/build/es/polyfill/dynamicFieldDefinitionList/FormattedValue/FormattedValue.js +2 -4
- package/build/es/polyfill/dynamicFieldDefinitionList/utils/text-format.js +1 -1
- package/build/es/polyfill/emphasis/Emphasis.js +1 -1
- package/build/es/polyfill/flowNavigation/FlowNavigation.js +1 -1
- package/build/es/polyfill/flowNavigation/animatedLabel/AnimatedLabel.js +1 -1
- package/build/es/polyfill/flowNavigation/backButton/BackButton.js +1 -1
- package/build/es/polyfill/header/Header.js +1 -1
- package/build/es/polyfill/i18n/en.json +3 -2
- package/build/es/polyfill/i18n/index.js +1 -1
- package/build/es/polyfill/image/Image.js +4 -5
- package/build/es/polyfill/info/Info.js +1 -1
- package/build/es/polyfill/inlineAlert/InlineAlert.js +1 -1
- package/build/es/polyfill/instructionsList/InstructionsList.js +1 -1
- package/build/es/polyfill/lab/mobileNav/MobileNav.js +2 -2
- package/build/es/polyfill/lab/pagination/Pagination.js +1 -1
- package/build/es/polyfill/lab/pagination/paginationLink/PaginationLink.js +1 -1
- package/build/es/polyfill/link/Link.js +4 -3
- package/build/es/polyfill/link/Link.spec.js +1 -0
- package/build/es/polyfill/link/Link.story.js +1 -0
- package/build/es/polyfill/loader/Loader.js +7 -3
- package/build/es/polyfill/logo/Logo.js +1 -1
- package/build/es/polyfill/markdown/Markdown.js +1 -1
- package/build/es/polyfill/modal/Modal.js +1 -1
- package/build/es/polyfill/money/Money.js +1 -1
- package/build/es/polyfill/moneyInput/MoneyInput.js +1 -2
- package/build/es/polyfill/navigationOption/NavigationOption.js +1 -1
- package/build/es/polyfill/navigationOptionsList/NavigationOptionsList.js +1 -1
- package/build/es/polyfill/nudge/Nudge.js +1 -1
- package/build/es/polyfill/overlayHeader/OverlayHeader.js +1 -1
- package/build/es/polyfill/phoneNumberInput/PhoneNumberInput.js +1 -1
- package/build/es/polyfill/phoneNumberInput/utils/explodeNumberModel/index.js +3 -2
- package/build/es/polyfill/phoneNumberInput/utils/filterOptionsForQuery/index.js +1 -0
- package/build/es/polyfill/phoneNumberInput/utils/findCountryByCode/index.js +1 -1
- package/build/es/polyfill/phoneNumberInput/utils/findCountryByPrefix/index.js +1 -1
- package/build/es/polyfill/phoneNumberInput/utils/isOptionAndFitsQuery/isOptionAndFitsQuery.js +1 -0
- package/build/es/polyfill/phoneNumberInput/utils/setDefaultPrefix/index.js +2 -0
- package/build/es/polyfill/popover/Popover.js +1 -1
- package/build/es/polyfill/processIndicator/ProcessIndicator.js +4 -1
- package/build/es/polyfill/provider/Provider.js +1 -1
- package/build/es/polyfill/provider/direction/DirectionProvider.js +1 -1
- package/build/es/polyfill/radio/Radio.js +1 -1
- package/build/es/polyfill/radioGroup/RadioGroup.js +2 -2
- package/build/es/polyfill/radioOption/RadioOption.js +1 -1
- package/build/es/polyfill/select/Select.js +3 -5
- package/build/es/polyfill/select/option/Option.js +1 -1
- package/build/es/polyfill/select/searchBox/SearchBox.js +1 -1
- package/build/es/polyfill/sizeSwapper/SizeSwapper.js +4 -2
- package/build/es/polyfill/slidingPanel/SlidingPanel.js +2 -2
- package/build/es/polyfill/snackbar/Snackbar.js +1 -1
- package/build/es/polyfill/snackbar/SnackbarProvider.js +1 -1
- package/build/es/polyfill/stepper/Stepper.js +1 -1
- package/build/es/polyfill/stepper/deviceDetection.js +2 -1
- package/build/es/polyfill/summary/Summary.js +1 -4
- package/build/es/polyfill/switch/Switch.js +1 -1
- package/build/es/polyfill/switch/Switch.story.js +1 -1
- package/build/es/polyfill/switchOption/SwitchOption.js +1 -1
- package/build/es/polyfill/switchOption/SwitchOption.story.js +1 -1
- package/build/es/polyfill/tabs/Tab.js +1 -1
- package/build/es/polyfill/tabs/Tabs.js +1 -1
- package/build/es/polyfill/tile/Tile.js +1 -1
- package/build/es/polyfill/tooltip/Tooltip.js +1 -1
- package/build/es/polyfill/typeahead/Typeahead.js +1 -2
- package/build/es/polyfill/typeahead/typeaheadInput/TypeaheadInput.js +1 -1
- package/build/es/polyfill/typeahead/typeaheadOption/TypeaheadOption.js +1 -1
- package/build/es/polyfill/typeahead/util/highlight.js +1 -1
- package/build/es/polyfill/upload/Upload.js +3 -5
- package/build/es/polyfill/upload/steps/completeStep/completeStep.js +1 -1
- package/build/es/polyfill/upload/steps/mediaUploadStep/mediaUploadStep.js +1 -1
- package/build/es/polyfill/upload/steps/processingStep/processingStep.js +1 -1
- package/build/es/polyfill/upload/steps/uploadImageStep/uploadImageStep.js +1 -1
- package/build/es/polyfill/upload/utils/asyncFileRead/asyncFileRead.js +1 -1
- package/build/es/polyfill/upload/utils/getSupportedSpotMimeTypes/getSupportedSpotMimeTypes.js +2 -2
- package/build/es/polyfill/upload/utils/index.js +1 -1
- package/build/es/polyfill/uploadInput/UploadInput.js +4 -6
- package/build/es/polyfill/uploadInput/UploadInput.spec.js +1 -1
- package/build/es/polyfill/uploadInput/UploadInput.story.js +1 -1
- package/build/es/polyfill/uploadInput/types.js +1 -0
- package/build/es/polyfill/uploadInput/uploadButton/UploadButton.js +1 -1
- package/build/es/polyfill/uploadInput/uploadButton/UploadButton.spec.js +3 -1
- package/build/es/polyfill/uploadInput/uploadButton/getAllowedFileTypes.spec.js +1 -1
- package/build/es/polyfill/uploadInput/uploadItem/UploadItem.js +2 -2
- package/build/es/polyfill/uploadInput/uploadItem/UploadItem.spec.js +1 -1
- package/build/es/polyfill/uploadInput/uploadItem/UploadItemBody.js +1 -1
- package/build/es/polyfill/utilities/{deprecatedProp/deprecatedProp.js → deprecatedProperty/deprecatedProperty.js} +0 -0
- package/build/es/polyfill/utilities/deprecatedProperty/index.js +1 -0
- package/build/es/polyfill/utilities/index.js +1 -1
- package/build/es/polyfill/utilities/logActionRequired.js +1 -1
- package/build/es/polyfill/withDisplayFormat/WithDisplayFormat.js +2 -2
- package/build/es/polyfill/withNextPortal/withNextPortal.js +1 -1
- package/build/es/polyfill/withNormaliser/WithNormalizer.js +3 -0
- package/build/i18n/en.json +3 -2
- package/build/main.css +1 -1
- package/build/styles/accordion/Accordion.css +1 -1
- package/build/styles/avatar/Avatar.css +1 -1
- package/build/styles/card/Card.css +1 -1
- package/build/styles/chip/Chip.css +1 -1
- package/build/styles/circularButton/CircularButton.css +1 -1
- package/build/styles/common/RadioButton/RadioButton.css +1 -1
- package/build/styles/common/bottomSheet/BottomSheet.css +1 -1
- package/build/styles/common/closeButton/CloseButton.css +1 -1
- package/build/styles/dateLookup/DateLookup.css +1 -1
- package/build/styles/dateLookup/dateTrigger/DateTrigger.css +1 -1
- package/build/styles/drawer/Drawer.css +1 -1
- package/build/styles/emphasis/Emphasis.css +1 -1
- package/build/styles/flowNavigation/FlowNavigation.css +1 -1
- package/build/styles/flowNavigation/backButton/BackButton.css +1 -1
- package/build/styles/info/Info.css +1 -1
- package/build/styles/instructionsList/InstructionsList.css +1 -1
- package/build/styles/lab/mobileNav/MobileNav.css +1 -1
- package/build/styles/lab/pagination/Pagination.css +1 -1
- package/build/styles/loader/Loader.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/styles/moneyInput/MoneyInput.css +1 -1
- package/build/styles/navigationOption/NavigationOption.css +1 -1
- package/build/styles/nudge/Nudge.css +1 -1
- package/build/styles/overlayHeader/OverlayHeader.css +1 -1
- package/build/styles/popover/Popover.css +1 -1
- package/build/styles/snackbar/Snackbar.css +1 -1
- package/build/styles/stepper/Stepper.css +1 -1
- package/build/styles/summary/Summary.css +1 -1
- package/build/styles/switch/Switch.css +1 -1
- package/build/styles/tabs/Tabs.css +1 -1
- package/build/styles/tile/Tile.css +1 -1
- package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css +1 -1
- package/build/styles/uploadInput/UploadInput.css +1 -1
- package/build/styles/uploadInput/uploadButton/UploadButton.css +1 -1
- package/build/styles/uploadInput/uploadItem/UploadItem.css +1 -1
- package/build/types/actionOption/ActionOption.story.d.ts +1 -1
- package/build/types/alert/Alert.d.ts +1 -1
- package/build/types/badge/Badge.d.ts +1 -1
- package/build/types/chip/Chip.d.ts +8 -2
- package/build/types/common/bottomSheet/BottomSheet.d.ts +3 -1
- package/build/types/common/commonProps.d.ts +1 -1
- package/build/types/common/focusBoundary/utils/getFocusableElements.d.ts +1 -1
- package/build/types/common/focusBoundary/utils/resetFocus.d.ts +1 -1
- package/build/types/common/hooks/useHasIntersected/useHasIntersected.d.ts +4 -1
- package/build/types/{link/Link.messages.d.ts → dateInput/DateInput.messages.d.ts} +8 -5
- package/build/types/link/Link.d.ts +5 -4
- package/build/types/link/Link.spec.d.ts +1 -0
- package/build/types/link/Link.story.d.ts +9 -0
- package/build/types/loader/Loader.d.ts +6 -1
- package/build/types/modal/Modal.d.ts +0 -1
- package/build/types/nudge/Nudge.d.ts +1 -0
- package/build/types/switch/Switch.story.d.ts +2 -1
- package/build/types/switchOption/SwitchOption.story.d.ts +1 -1
- package/build/types/test-utils/index.d.ts +17 -5
- package/build/types/upload/Upload.d.ts +1 -1
- package/build/types/upload/utils/index.d.ts +0 -1
- package/build/types/uploadInput/UploadInput.d.ts +8 -4
- package/build/types/uploadInput/UploadInput.story.d.ts +11 -10
- package/build/types/uploadInput/uploadButton/UploadButton.d.ts +1 -0
- package/build/types/uploadInput/uploadItem/UploadItem.d.ts +8 -1
- package/build/types/uploadInput/uploadItem/UploadItemBody.d.ts +3 -2
- package/build/types/utilities/{deprecatedProp/deprecatedProp.d.ts → deprecatedProperty/deprecatedProperty.d.ts} +2 -2
- package/build/types/utilities/deprecatedProperty/index.d.ts +1 -0
- package/build/types/utilities/index.d.ts +1 -1
- package/build/types/withDisplayFormat/WithDisplayFormat.d.ts +1 -1
- package/build/types/withNextPortal/withNextPortal.d.ts +1 -2
- package/build/umd/no-polyfill/main.js +1 -1
- package/build/umd/polyfill/main.js +1 -1
- package/package.json +18 -18
- package/build/es/no-polyfill/common/Option/OptionDocs.js +0 -1
- package/build/es/no-polyfill/link/Link.messages.js +0 -1
- package/build/es/no-polyfill/upload/utils/generateErrorMessage/generateErrorMessage.js +0 -1
- package/build/es/no-polyfill/upload/utils/generateErrorMessage/index.js +0 -1
- package/build/es/no-polyfill/utilities/deprecatedProp/index.js +0 -1
- package/build/es/polyfill/common/Option/OptionDocs.js +0 -1
- package/build/es/polyfill/link/Link.messages.js +0 -1
- package/build/es/polyfill/upload/utils/generateErrorMessage/generateErrorMessage.js +0 -1
- package/build/es/polyfill/upload/utils/generateErrorMessage/index.js +0 -1
- package/build/es/polyfill/utilities/deprecatedProp/index.js +0 -1
- package/build/types/upload/utils/generateErrorMessage/generateErrorMessage.d.ts +0 -1
- package/build/types/upload/utils/generateErrorMessage/index.d.ts +0 -1
- package/build/types/utilities/deprecatedProp/index.d.ts +0 -1
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import{Component,createRef}from"react";import PropTypes from"prop-types";import classNames from"classnames";import Transition from"react-transition-group/Transition";import Option from"./option";import Chevron from"../chevron";import KeyCodes from"../common/keyCodes";import{Breakpoint}from"../common";import{addClickClassToDocumentOnIos,removeClickClassFromDocumentOnIos}from"../common/domHelpers";import{addClassAndTriggerReflow,removeClass}from"./domHelpers";import Dimmer from"../dimmer";import SlidingPanel from"../slidingPanel";import SearchBox from"./searchBox";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";function clamp(a,b,c){return Math.max(Math.min(b,c),a)}function actionableOption(a){return!a.header&&!a.separator&&!a.disabled}var isFunction=function(a){return a&&"[object Function]"==={}.toString.call(a)};function stopPropagation(a){a.stopPropagation(),a.preventDefault(),a.nativeEvent&&a.nativeEvent.stopImmediatePropagation&&a.nativeEvent.stopImmediatePropagation()}function getShouldRenderWithPortal(){return"undefined"!=typeof document&&"undefined"!=typeof window&&window.matchMedia&&window.matchMedia("(max-width: ".concat(Breakpoint.SMALL,"px)")).matches}var BOOTSTRAP_DROPDOWN_ANIMATION_TIME=200,defer=function(a){return setTimeout(a,0)},includesString=function(a,b){return-1<a.toLowerCase().indexOf(b.toLowerCase())},arrayIncludesString=function(a,b){return a.some(function(a){return includesString(a,b)})},defaultFilterFunction=function(a,b){return a.label&&includesString(a.label,b)||a.note&&includesString(a.note,b)||a.secondary&&includesString(a.secondary,b)||a.currency&&includesString(a.currency,b)||a.searchStrings&&arrayIncludesString(a.searchStrings,b)},Select=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"handleResize",function(){d.setState({shouldRenderWithPortal:getShouldRenderWithPortal()})}),_defineProperty(_assertThisInitialized(d),"handleOnFocus",function(a){return d.props.onFocus&&d.props.onFocus(a)}),_defineProperty(_assertThisInitialized(d),"handleOnBlur",function(a){var b=d.props.onBlur,c=a.nativeEvent;if(c){var e=c.relatedTarget,f=a.currentTarget;if(f&&e&&f.contains(e))return}b&&b(a)}),_defineProperty(_assertThisInitialized(d),"getOptions",function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:d.props.options,b=d.props.search;if(!b||!d.state.searchValue)return a;var c=isFunction(b)?b:defaultFilterFunction;return a.filter(function(a){return c(a,d.state.searchValue)})}),_defineProperty(_assertThisInitialized(d),"handleSearchChange",function(a){d.props.onSearchChange?d.props.onSearchChange(a.target.value):d.setState({searchValue:a.target.value})}),_defineProperty(_assertThisInitialized(d),"handleKeyDown",function(a){var b=d.state.open;switch(a.keyCode){case KeyCodes.UP:b?d.moveFocusWithDifference(-1):d.open(),a.preventDefault();break;case KeyCodes.DOWN:b?d.moveFocusWithDifference(1):d.open(),a.preventDefault();break;case KeyCodes.SPACE:a.target!==d.searchBoxRef.current&&(b?d.selectKeyboardFocusedOption():d.open(),a.preventDefault());break;case KeyCodes.ENTER:b?d.selectKeyboardFocusedOption():d.open(),a.preventDefault();break;case KeyCodes.ESCAPE:d.close(),a.preventDefault();break;case KeyCodes.TAB:b&&d.selectKeyboardFocusedOption();break;default:}}),_defineProperty(_assertThisInitialized(d),"handleButtonClick",function(){d.props.disabled||d.open()}),_defineProperty(_assertThisInitialized(d),"handleDocumentClick",function(){d.state.open&&d.close()}),_defineProperty(_assertThisInitialized(d),"handleTouchStart",function(a){a.currentTarget===a.target&&d.state.open&&d.close()}),_defineProperty(_assertThisInitialized(d),"style",function(a){return d.props.classNames[a]||a}),_defineProperty(_assertThisInitialized(d),"renderOption",function(a,b){var c;if(a.separator)return/*#__PURE__*/_jsx("li",{className:d.style("divider")},b);if(a.header)return/*#__PURE__*/_jsx("li",{onClick:stopPropagation,onKeyPress:stopPropagation,className:d.style("dropdown-header"),children:a.header},b);var e=d.props.selected&&d.props.selected.value===a.value,f=d.state.keyboardFocusedOptionIndex===d.getIndexWithoutHeadersForIndexWithHeaders(b),g=classNames(d.style("tw-dropdown-item"),d.style("tw-dropdown-item--clickable"),(c={},_defineProperty(c,d.style("active"),e),_defineProperty(c,d.style("tw-dropdown-item--focused"),f&&!a.disabled),_defineProperty(c,d.style("disabled"),a.disabled),c));return/*#__PURE__*/_jsx("li",{onClick:a.disabled?stopPropagation:d.createSelectHandlerForOption(a),onKeyPress:a.disabled?stopPropagation:d.createSelectHandlerForOption(a),className:g,children:/*#__PURE__*/_jsx("a",{disabled:a.disabled,children:/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},a),{},{classNames:d.props.classNames}))})},b)}),d.state={open:!1,searchValue:"",keyboardFocusedOptionIndex:null},d.searchBoxRef=/*#__PURE__*/createRef(),d.dropdownMenuRef=/*#__PURE__*/createRef(),d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"componentDidMount",value:function componentDidMount(){this.setState({shouldRenderWithPortal:getShouldRenderWithPortal()}),window.addEventListener("resize",this.handleResize)}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.close(),window.removeEventListener("resize",this.handleResize)}},{key:"getIndexWithoutHeadersForIndexWithHeaders",value:function getIndexWithoutHeadersForIndexWithHeaders(a){return this.getOptions().reduce(function(b,c,d){return d<a&&actionableOption(c)?b+1:b},0)}},{key:"selectKeyboardFocusedOption",value:function selectKeyboardFocusedOption(){if(null!==this.state.keyboardFocusedOptionIndex){var a=this.state.keyboardFocusedOptionIndex;this.selectOption(this.getOptions().filter(actionableOption)[a])}}},{key:"moveFocusWithDifference",value:function moveFocusWithDifference(a){var b=this;this.setState(function(c,d){var e=b.getOptions(d.options).filter(actionableOption),f=e.reduce(function(a,b,c){return null===a?d.selected&&d.selected.value===b.value?c:null:a},null),g=c.keyboardFocusedOptionIndex,h=g;if(null===g&&null===f)return{keyboardFocusedOptionIndex:0};null===g&&null!==f&&(h=f);var i=h+a,j=clamp(0,e.length-1,i);return{keyboardFocusedOptionIndex:j}})}},{key:"open",value:function open(){var a=this;this.setState({open:!0},function(){var b="undefined"!=typeof window&&window.matchMedia&&!!window.matchMedia("(pointer: coarse)").matches,c=!!a.props.onSearchChange||!!a.props.search;defer(function(){!b&&c&&a.searchBoxRef.current&&a.searchBoxRef.current.focus(),addClickClassToDocumentOnIos(),document.addEventListener("click",a.handleDocumentClick,!1)})})}},{key:"close",value:function close(){var a=this;this.setState({open:!1,keyboardFocusedOptionIndex:null},function(){defer(function(){removeClickClassFromDocumentOnIos(),document.removeEventListener("click",a.handleDocumentClick,!1)})})}},{key:"createSelectHandlerForOption",value:function createSelectHandlerForOption(a){var b=this;return function(c){stopPropagation(c),b.selectOption(a)}}},{key:"selectOption",value:function selectOption(a){a&&!a.placeholder?this.props.onChange(a):this.props.onChange(null),this.close()}},{key:"renderOptionsList",value:function renderOptionsList(){var a,b=this.props,c=b.dropdownRight,d=b.dropdownWidth,e=b.onSearchChange,f=b.placeholder,g=b.required,h=b.search,i=b.searchValue,j=b.searchPlaceholder,k=this.state.open,l=this.style,m=!!e||!!h,n=classNames(l("tw-select"),l("dropdown-menu"),(a={},_defineProperty(a,l("dropdown-menu-".concat(c,"-right")),c),_defineProperty(a,l("dropdown-menu-".concat(d)),d),_defineProperty(a,l("dropdown-menu--open"),k),a)),o=/*#__PURE__*/_jsxs("ul",{className:n,children:[g||m||!f?"":this.renderPlaceHolderOption(),m&&/*#__PURE__*/_jsx(SearchBox,{classNames:this.props.classNames,onChange:this.handleSearchChange,onClick:stopPropagation,value:i||this.state.searchValue,ref:this.searchBoxRef,placeholder:j}),this.renderOptions()]});return o}},{key:"renderOptions",value:function renderOptions(){return this.getOptions().map(this.renderOption)}},{key:"renderPlaceHolderOption",value:function renderPlaceHolderOption(){var a=this.props.placeholder;return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{onClick:this.createSelectHandlerForOption({placeholder:a}),onKeyPress:this.createSelectHandlerForOption({placeholder:a}),className:classNames(this.style("tw-dropdown-item--clickable"),this.style("tw-dropdown-item--divider")),children:/*#__PURE__*/_jsx("a",{children:a})}))}},{key:"renderButtonInternals",value:function renderButtonInternals(){var a=this.props,b=a.selected,c=a.placeholder;return b?/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},b),{},{classNames:this.props.classNames,selected:!0})):/*#__PURE__*/_jsx("span",{className:this.style("form-control-placeholder"),children:c})}},{key:"render",value:function render(){var a,b,c=this,d=this.props,e=d.disabled,f=d.size,g=d.block,h=d.id,i=d.dropdownUp,j=d.inverse,k=this.state,l=k.open,m=k.shouldRenderWithPortal,n=this.style,o=classNames(n("tw-select"),n("btn-group"),(a={},_defineProperty(a,n("btn-block"),g),_defineProperty(a,n("dropup"),i),_defineProperty(a,n("dropdown"),!i),a)),p=classNames(n("btn"),n("btn-input"),(b={},_defineProperty(b,"".concat(n("btn-input-inverse")," ").concat(n("btn-addon")),j),_defineProperty(b,n("btn-xs"),"xs"===f),_defineProperty(b,n("btn-sm"),"sm"===f),_defineProperty(b,n("btn-md"),"md"===f),_defineProperty(b,n("btn-lg"),"lg"===f),b),n("dropdown-toggle")),q=n("open");return/*#__PURE__*/ (// A transition is used here in order to mount and unmount the dropdown menu while retaining animations
|
|
1
|
+
import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import classNames from"classnames";import PropTypes from"prop-types";import{Component,createRef}from"react";import Transition from"react-transition-group/Transition";import Chevron from"../chevron";import{Breakpoint}from"../common";import{addClickClassToDocumentOnIos,removeClickClassFromDocumentOnIos}from"../common/domHelpers";import KeyCodes from"../common/keyCodes";import Dimmer from"../dimmer";import SlidingPanel from"../slidingPanel";import{addClassAndTriggerReflow,removeClass}from"./domHelpers";import Option from"./option";import SearchBox from"./searchBox";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";function clamp(a,b,c){return Math.max(Math.min(b,c),a)}function actionableOption(a){return!a.header&&!a.separator&&!a.disabled}var isFunction=function(a){return a&&"[object Function]"==={}.toString.call(a)};function stopPropagation(a){a.stopPropagation(),a.preventDefault(),a.nativeEvent&&a.nativeEvent.stopImmediatePropagation&&a.nativeEvent.stopImmediatePropagation()}function getShouldRenderWithPortal(){return"undefined"!=typeof document&&"undefined"!=typeof window&&window.matchMedia&&window.matchMedia("(max-width: ".concat(Breakpoint.SMALL,"px)")).matches}var OPTIONS_PAGE_SIZE=50,BOOTSTRAP_DROPDOWN_ANIMATION_TIME=200,defer=function(a){return setTimeout(a,0)},includesString=function(a,b){return a.toLowerCase().includes(b.toLowerCase())},arrayIncludesString=function(a,b){return a.some(function(a){return includesString(a,b)})},defaultFilterFunction=function(a,b){return a.label&&includesString(a.label,b)||a.note&&includesString(a.note,b)||a.secondary&&includesString(a.secondary,b)||a.currency&&includesString(a.currency,b)||a.searchStrings&&arrayIncludesString(a.searchStrings,b)},Select=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"handleResize",function(){d.setState({shouldRenderWithPortal:getShouldRenderWithPortal()})}),_defineProperty(_assertThisInitialized(d),"handleOnFocus",function(a){return d.props.onFocus&&d.props.onFocus(a)}),_defineProperty(_assertThisInitialized(d),"handleOnBlur",function(a){var b=d.props.onBlur,c=a.nativeEvent;if(c){var e=c.relatedTarget,f=a.currentTarget;if(f&&e&&f.contains(e))return}b&&b(a)}),_defineProperty(_assertThisInitialized(d),"getOptions",function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:d.props.options,b=d.props.search;if(!b||!d.state.searchValue)return a;var c=isFunction(b)?b:defaultFilterFunction;return a.filter(function(a){return c(a,d.state.searchValue)})}),_defineProperty(_assertThisInitialized(d),"handleSearchChange",function(a){d.setState({numberOfOptionsShown:OPTIONS_PAGE_SIZE}),d.props.onSearchChange?d.props.onSearchChange(a.target.value):d.setState({searchValue:a.target.value})}),_defineProperty(_assertThisInitialized(d),"handleKeyDown",function(a){var b=d.state.open;switch(a.keyCode){case KeyCodes.UP:b?d.moveFocusWithDifference(-1):d.open(),a.preventDefault();break;case KeyCodes.DOWN:b?d.moveFocusWithDifference(1):d.open(),a.preventDefault();break;case KeyCodes.SPACE:a.target!==d.searchBoxRef.current&&(b?d.selectKeyboardFocusedOption():d.open(),a.preventDefault());break;case KeyCodes.ENTER:b?d.selectKeyboardFocusedOption():d.open(),a.preventDefault();break;case KeyCodes.ESCAPE:d.close(),a.preventDefault();break;case KeyCodes.TAB:b&&d.selectKeyboardFocusedOption();break;default:}}),_defineProperty(_assertThisInitialized(d),"handleButtonClick",function(){d.props.disabled||d.open()}),_defineProperty(_assertThisInitialized(d),"handleDocumentClick",function(){d.state.open&&d.close()}),_defineProperty(_assertThisInitialized(d),"handleTouchStart",function(a){a.currentTarget===a.target&&d.state.open&&d.close()}),_defineProperty(_assertThisInitialized(d),"style",function(a){return d.props.classNames[a]||a}),_defineProperty(_assertThisInitialized(d),"renderOption",function(a,b){var c;if(a.separator)return/*#__PURE__*/_jsx("li",{className:d.style("divider")},b);if(a.header)return/*#__PURE__*/_jsx("li",{className:d.style("dropdown-header"),onClick:stopPropagation,onKeyPress:stopPropagation,children:a.header},b);var e=d.props.selected&&d.props.selected.value===a.value,f=d.state.keyboardFocusedOptionIndex===d.getIndexWithoutHeadersForIndexWithHeaders(b),g=classNames(d.style("tw-dropdown-item"),d.style("tw-dropdown-item--clickable"),(c={},_defineProperty(c,d.style("active"),e),_defineProperty(c,d.style("tw-dropdown-item--focused"),f&&!a.disabled),_defineProperty(c,d.style("disabled"),a.disabled),c));return/*#__PURE__*/_jsx("li",{className:g,onClick:a.disabled?stopPropagation:d.createSelectHandlerForOption(a),onKeyPress:a.disabled?stopPropagation:d.createSelectHandlerForOption(a),children:/*#__PURE__*/_jsx("a",{disabled:a.disabled,children:/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},a),{},{classNames:d.props.classNames}))})},b)}),d.state={open:!1,searchValue:"",keyboardFocusedOptionIndex:null,numberOfOptionsShown:OPTIONS_PAGE_SIZE},d.searchBoxRef=/*#__PURE__*/createRef(),d.dropdownMenuRef=/*#__PURE__*/createRef(),d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"componentDidMount",value:function componentDidMount(){this.setState({shouldRenderWithPortal:getShouldRenderWithPortal()}),window.addEventListener("resize",this.handleResize)}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.close(),window.removeEventListener("resize",this.handleResize)}},{key:"getIndexWithoutHeadersForIndexWithHeaders",value:function getIndexWithoutHeadersForIndexWithHeaders(a){return this.getOptions().reduce(function(b,c,d){return d<a&&actionableOption(c)?b+1:b},0)}},{key:"selectKeyboardFocusedOption",value:function selectKeyboardFocusedOption(){if(null!==this.state.keyboardFocusedOptionIndex){var a=this.state.keyboardFocusedOptionIndex;this.selectOption(this.getOptions().filter(actionableOption)[a])}}},{key:"moveFocusWithDifference",value:function moveFocusWithDifference(a){var b=this;this.setState(function(c,d){var e=b.getOptions(d.options).filter(actionableOption),f=e.reduce(function(a,b,c){return null===a?d.selected&&d.selected.value===b.value?c:null:a},null),g=c.keyboardFocusedOptionIndex,h=g;if(null===g&&null===f)return{keyboardFocusedOptionIndex:0};null===g&&null!==f&&(h=f);var i=h+a,j=clamp(0,e.length-1,i);return{keyboardFocusedOptionIndex:j}})}},{key:"open",value:function open(){var a=this;this.setState({open:!0},function(){var b="undefined"!=typeof window&&window.matchMedia&&!!window.matchMedia("(pointer: coarse)").matches,c=!!a.props.onSearchChange||!!a.props.search;defer(function(){!b&&c&&a.searchBoxRef.current&&a.searchBoxRef.current.focus(),addClickClassToDocumentOnIos(),document.addEventListener("click",a.handleDocumentClick,!1)})})}},{key:"close",value:function close(){var a=this;this.setState({open:!1,keyboardFocusedOptionIndex:null},function(){defer(function(){removeClickClassFromDocumentOnIos(),document.removeEventListener("click",a.handleDocumentClick,!1)})})}},{key:"createSelectHandlerForOption",value:function createSelectHandlerForOption(a){var b=this;return function(c){stopPropagation(c),b.selectOption(a)}}},{key:"selectOption",value:function selectOption(a){a&&!a.placeholder?this.props.onChange(a):this.props.onChange(null),this.close()}},{key:"renderOptionsList",value:function renderOptionsList(){var a,b=this.props,c=b.dropdownRight,d=b.dropdownWidth,e=b.onSearchChange,f=b.placeholder,g=b.required,h=b.search,i=b.searchValue,j=b.searchPlaceholder,k=this.state.open,l=this.style,m=!!e||!!h,n=classNames(l("tw-select"),l("dropdown-menu"),(a={},_defineProperty(a,l("dropdown-menu-".concat(c,"-right")),c),_defineProperty(a,l("dropdown-menu-".concat(d)),d),_defineProperty(a,l("dropdown-menu--open"),k),a));return/*#__PURE__*/_jsxs("ul",{className:n,children:[g||m||!f?"":this.renderPlaceHolderOption(),m&&/*#__PURE__*/_jsx(SearchBox,{ref:this.searchBoxRef,classNames:this.props.classNames,value:i||this.state.searchValue,placeholder:j,onChange:this.handleSearchChange,onClick:stopPropagation}),this.renderOptions(),this.state.numberOfOptionsShown<this.getOptions().length?this.renderShowMore():""]})}},{key:"renderOptions",value:function renderOptions(){return this.getOptions().slice(0,this.state.numberOfOptionsShown).map(this.renderOption)}},{key:"renderShowMore",value:function renderShowMore(){return/*#__PURE__*/ (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */_jsx("li",{className:classNames(this.style("tw-dropdown-item--clickable"),this.style("tw-dropdown-item--divider"),this.style("show-more")),onClick:this.showMore.bind(this),onKeyPress:this.showMore.bind(this),children:/*#__PURE__*/_jsx("a",{children:"..."})}))}},{key:"showMore",value:function showMore(a){stopPropagation(a),this.setState(function(a){return{numberOfOptionsShown:a.numberOfOptionsShown+OPTIONS_PAGE_SIZE}})}},{key:"renderPlaceHolderOption",value:function renderPlaceHolderOption(){var a=this.props.placeholder;return/*#__PURE__*/_jsx("li",{className:classNames(this.style("tw-dropdown-item--clickable"),this.style("tw-dropdown-item--divider")),onClick:this.createSelectHandlerForOption({placeholder:a}),onKeyPress:this.createSelectHandlerForOption({placeholder:a}),children:/*#__PURE__*/_jsx("a",{children:a})})}},{key:"renderButtonInternals",value:function renderButtonInternals(){var a=this.props,b=a.selected,c=a.placeholder;return b?/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},b),{},{classNames:this.props.classNames,selected:!0})):/*#__PURE__*/_jsx("span",{className:this.style("form-control-placeholder"),children:c})}},{key:"render",value:function render(){var a,b,c=this,d=this.props,e=d.disabled,f=d.size,g=d.block,h=d.id,i=d.dropdownUp,j=d.inverse,k=this.state,l=k.open,m=k.shouldRenderWithPortal,n=this.style,o=classNames(n("tw-select"),n("btn-group"),(a={},_defineProperty(a,n("btn-block"),g),_defineProperty(a,n("dropup"),i),_defineProperty(a,n("dropdown"),!i),a)),p=classNames(n("btn"),n("btn-input"),(b={},_defineProperty(b,"".concat(n("btn-input-inverse")," ").concat(n("btn-addon")),j),_defineProperty(b,n("btn-xs"),"xs"===f),_defineProperty(b,n("btn-sm"),"sm"===f),_defineProperty(b,n("btn-md"),"md"===f),_defineProperty(b,n("btn-lg"),"lg"===f),b),n("dropdown-toggle")),q=n("open");return/*#__PURE__*/ (// A transition is used here in order to mount and unmount the dropdown menu while retaining animations
|
|
2
2
|
_jsx(_Fragment,{children:/*#__PURE__*/_jsxs("div",{// eslint-disable-line jsx-a11y/no-static-element-interactions
|
|
3
|
-
|
|
4
|
-
value:PropTypes.any.isRequired,label:PropTypes.node,icon:PropTypes.node,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node}),/**
|
|
3
|
+
ref:this.dropdownMenuRef,className:o,onKeyDown:this.handleKeyDown,onTouchMove:this.handleTouchStart,onFocus:this.handleOnFocus,onBlur:this.handleOnBlur,children:[/*#__PURE__*/_jsxs("button",{disabled:e,className:p,type:"button",id:h,"aria-expanded":l,onClick:this.handleButtonClick,children:[this.renderButtonInternals(),/*#__PURE__*/_jsx(Chevron,{disabled:e,className:"".concat(n("tw-icon")," ").concat(n("tw-chevron-up-icon")," ").concat(n("tw-chevron")," ").concat(n("bottom")," ").concat(n("tw-select-chevron"))})]}),m?/*#__PURE__*/_jsx(Dimmer,{open:l,children:/*#__PURE__*/_jsx(SlidingPanel,{open:l,position:"bottom",children:this.renderOptionsList()})}):/*#__PURE__*/_jsx(Transition,{in:l,timeout:BOOTSTRAP_DROPDOWN_ANIMATION_TIME,onEntering:function onEntering(){c.dropdownMenuRef.current&&addClassAndTriggerReflow(c.dropdownMenuRef.current,q)},onExit:function onExit(){c.dropdownMenuRef.current&&removeClass(c.dropdownMenuRef.current,q)},children:function children(a){return"exited"!==a&&c.renderOptionsList()}})]})}))}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(a,b){var c=!!a.options.length;if(b.open&&(""!==a.searchValue||""!==b.searchValue)){if(c&&null===b.keyboardFocusedOptionIndex)return{keyboardFocusedOptionIndex:0};if(!c&&null!==b.keyboardFocusedOptionIndex)return{keyboardFocusedOptionIndex:null}}return null}}]),b}(Component);export{Select as default};Select.propTypes={placeholder:PropTypes.string,id:PropTypes.string,required:PropTypes.bool,disabled:PropTypes.bool,inverse:PropTypes.bool,dropdownRight:PropTypes.oneOf(["xs","sm","md","lg","xl"]),dropdownWidth:PropTypes.oneOf(["sm","md","lg"]),size:PropTypes.oneOf(["sm","md","lg"]),block:PropTypes.bool,selected:PropTypes.shape({value:PropTypes.any.isRequired,label:PropTypes.node,icon:PropTypes.node,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node}),/**
|
|
5
4
|
* Search toggle
|
|
6
5
|
* if `true` default search functionality being enabled (not case sensitive search in option labels & currency props)
|
|
7
6
|
* if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
|
|
8
|
-
*/search:PropTypes.oneOfType([PropTypes.bool,PropTypes.func]),onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,options:PropTypes.arrayOf(PropTypes.shape({
|
|
9
|
-
value:PropTypes.any,label:PropTypes.node,header:PropTypes.node,icon:PropTypes.node,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node,separator:PropTypes.bool,disabled:PropTypes.bool,searchStrings:PropTypes.arrayOf(PropTypes.string)})).isRequired,/**
|
|
7
|
+
*/search:PropTypes.oneOfType([PropTypes.bool,PropTypes.func]),onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,options:PropTypes.arrayOf(PropTypes.shape({value:PropTypes.any,label:PropTypes.node,header:PropTypes.node,icon:PropTypes.node,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node,separator:PropTypes.bool,disabled:PropTypes.bool,searchStrings:PropTypes.arrayOf(PropTypes.string)})).isRequired,/**
|
|
10
8
|
* To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
|
|
11
9
|
* DO NOT USE TOGETHER WITH `search` PROPERTY
|
|
12
10
|
*/onSearchChange:PropTypes.func,searchValue:PropTypes.string,searchPlaceholder:PropTypes.string,classNames:PropTypes.objectOf(PropTypes.string),dropdownUp:PropTypes.bool},Select.defaultProps={id:void 0,placeholder:void 0,size:"md",dropdownRight:null,dropdownWidth:null,inverse:!1,required:!1,disabled:!1,block:!0,selected:null,onFocus:null,onBlur:null,onSearchChange:void 0,search:!1,searchValue:"",searchPlaceholder:"Search...",classNames:{},dropdownUp:!1};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import PropTypes from"prop-types";import{cloneElement}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=function(a){var b=a.currency,c=a.label,d=a.note,e=a.secondary,f=a.icon,g=a.classNames,h=a.selected,i=function(a){return a.map(function(a){return g[a]||a}).join(" ")},j=b?"".concat(i(["currency-flag","currency-flag-".concat(b.toLowerCase()),"".concat(h?"hidden-xs":"")])):null;return/*#__PURE__*/_jsxs("span",{children:[b?/*#__PURE__*/_jsx("i",{className:j}):f&&/*#__PURE__*/cloneElement(f,{size:24,className:"".concat(i(["tw-icon"]))}),c,d&&/*#__PURE__*/_jsx("span",{className:"small m-l-1",children:d}),e&&/*#__PURE__*/_jsx("span",{className:"small text-ellipsis",children:e})]})};Option.propTypes={label:PropTypes.node.isRequired,currency:PropTypes.string,note:PropTypes.node,secondary:PropTypes.node,icon:PropTypes.node,classNames:PropTypes.objectOf(PropTypes.string),selected:PropTypes.bool},Option.defaultProps={currency:"",note:"",secondary:"",icon:null,classNames:{},selected:!1};export default Option;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{Search as SearchIcon}from"@transferwise/icons";import classnames from"classnames";import PropTypes from"prop-types";import{forwardRef}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var SearchBox=/*#__PURE__*/forwardRef(function(a,b){var c=a.classNames,d=a.onChange,e=a.onClick,f=a.placeholder,g=a.value,h=function(a){return c[a]||a};return/*#__PURE__*/_jsx("li",{className:h("tw-dropdown-item--divider"),children:/*#__PURE__*/_jsx("a",{className:"".concat(h("tw-select-filter-link")," ").concat(h("p-a-0")),children:/*#__PURE__*/_jsxs("div",{className:h("input-group"),children:[/*#__PURE__*/_jsx("span",{className:h("input-group-addon"),children:/*#__PURE__*/_jsx(SearchIcon,{className:classnames(h("tw-icon"),h("tw-icon-search"))})}),/*#__PURE__*/_jsx("input",{ref:b,type:"text",className:classnames(h("tw-select-filter"),h("form-control")),placeholder:f,value:g,spellCheck:"false",onChange:d,onClick:e})]})})})});SearchBox.propTypes={classNames:PropTypes.objectOf(PropTypes.string),onChange:PropTypes.func.isRequired,onClick:PropTypes.func.isRequired,placeholder:PropTypes.string,value:PropTypes.string},SearchBox.defaultProps={classNames:{},value:"",placeholder:void 0};export default SearchBox;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import classNames from"classnames";import PropTypes from"prop-types";import{forwardRef,useRef}from"react";import{Breakpoint}from"../common";import{useClientWidth}from"../common/hooks";import{jsx as _jsx}from"react/jsx-runtime";var Layout={COLUMN:"COLUMN"},SizeSwapper=/*#__PURE__*/forwardRef(function(a,b){var c=a.items,d=a.inline,e=useRef(null),f=useClientWidth({ref:b||e}),g=_slicedToArray(f,1),h=g[0];if(!c||0===c.length)return null;// If all breakpoints are specified and clientWidth never > breakpoint itemsToRender can be undefined.
|
|
2
|
+
// Do not use deconstruct here to get items and layout.
|
|
3
|
+
var i=[];// Always return parent container even if there are no items to display to
|
|
2
4
|
// keep the ref on DOM and let clientWidth be calculated properly.
|
|
3
|
-
return h?i=c.filter(function(a){var b=a.breakpoint,c=void 0===b?0:b;return h>=c}).pop():i.items=c.map(function(a){var b=a.items;return Object.values(b)}),/*#__PURE__*/_jsx("div",{className:classNames("np-size-swapper",{"d-flex":!d,"d-inline-flex":d,"flex-column":i&&i.layout===Layout.COLUMN,"flex-wrap":i&&i.wrap}),style:{visibility:h?"visible":"hidden"},
|
|
5
|
+
return h?i=c.filter(function(a){var b=a.breakpoint,c=void 0===b?0:b;return h>=c}).pop():i.items=c.map(function(a){var b=a.items;return Object.values(b)}),/*#__PURE__*/_jsx("div",{ref:e,className:classNames("np-size-swapper",{"d-flex":!d,"d-inline-flex":d,"flex-column":i&&i.layout===Layout.COLUMN,"flex-wrap":i&&i.wrap}),style:{visibility:h?"visible":"hidden"},children:i&&i.items})});SizeSwapper.Breakpoint=Breakpoint,SizeSwapper.Layout=Layout,SizeSwapper.propTypes={inline:PropTypes.bool,/** List of items that will appear at the specified breakpoint and presented in row or columns depending on layout */items:PropTypes.arrayOf(PropTypes.shape({items:PropTypes.arrayOf(PropTypes.element),breakpoint:PropTypes.number,layout:PropTypes.oneOf([SizeSwapper.Layout.COLUMN]),wrap:PropTypes.bool})).isRequired},SizeSwapper.defaultProps={inline:!1};export default SizeSwapper;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","className","open","position","showSlidingPanelBorder","slidingPanelPositionFixed"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import
|
|
2
|
-
,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:classNames("sliding-panel--open-".concat(f),g&&"sliding-panel--border-".concat(f),{"sliding-panel--fixed":h},"sliding-panel"),appear:!0,unmountOnExit:!0,children:/*#__PURE__*/_jsx("div",{className:classNames("sliding-panel",d),
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","className","open","position","showSlidingPanelBorder","slidingPanelPositionFixed"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import PropTypes from"prop-types";import{forwardRef}from"react";import CSSTransition from"react-transition-group/CSSTransition";import{jsx as _jsx}from"react/jsx-runtime";export var EXIT_ANIMATION=350;var SlidingPanel=/*#__PURE__*/forwardRef(function(a,b){var c=a.children,d=a.className,e=a.open,f=a.position,g=a.showSlidingPanelBorder,h=a.slidingPanelPositionFixed,i=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsx(CSSTransition,_objectSpread(_objectSpread({},i),{},{in:e// Wait for animation to finish before unmount.
|
|
2
|
+
,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:classNames("sliding-panel--open-".concat(f),g&&"sliding-panel--border-".concat(f),{"sliding-panel--fixed":h},"sliding-panel"),appear:!0,unmountOnExit:!0,children:/*#__PURE__*/_jsx("div",{ref:b,className:classNames("sliding-panel",d),children:c})}))});SlidingPanel.propTypes={children:PropTypes.node,className:PropTypes.string,open:PropTypes.bool,position:PropTypes.oneOf(["top","bottom","left","right"]),showSlidingPanelBorder:PropTypes.bool,slidingPanelPositionFixed:PropTypes.bool},SlidingPanel.defaultProps={children:null,className:void 0,open:!1,position:"left",showSlidingPanelBorder:!1,slidingPanelPositionFixed:!1};export default SlidingPanel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import
|
|
1
|
+
import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import CSSTransition from"react-transition-group/CSSTransition";import{Theme}from"../common";import{DirectionContext}from"../provider/direction";import withNextPortal from"../withNextPortal/withNextPortal";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var CSS_TRANSITION_DURATION=400;export var Snackbar=/*#__PURE__*/function(a){function b(){var a;return _classCallCheck(this,b),a=c.call(this),_defineProperty(_assertThisInitialized(a),"setLeaveTimeout",function(){var b=a.props.timeout;a.timeout=setTimeout(function(){a.setState({visible:!1})},b)}),a.state={visible:!1,text:""},a}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"componentWillUnmount",value:function componentWillUnmount(){clearTimeout(this.timeout),clearTimeout(this.transitionTimeout)}},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(a,b){return!!a.text&&(a.timestamp!==this.props.timestamp||b.visible!==this.state.visible||b.text!==this.state.text)}},{key:"componentDidUpdate",value:function componentDidUpdate(a){var b=this,c=this.props,d=c.action,e=c.text,f=c.theme,g=c.timestamp;a.text?a.timestamp!==g&&(clearTimeout(this.timeout),this.state.visible?this.setState({visible:!1},function(){b.transitionTimeout=setTimeout(function(){b.setState({visible:!0,action:d,text:e,theme:f}),b.setLeaveTimeout()},CSS_TRANSITION_DURATION)}):(this.setState({visible:!0,action:d,text:e,theme:f}),this.setLeaveTimeout())):this.setState({visible:!0,action:d,text:e,theme:f},function(){b.setLeaveTimeout()})}},{key:"render",value:function render(){var a="rtl"===this.context,b=this.state,c=b.action,d=b.text,e=b.theme,f=b.visible,g=this.props.timeout;return/*#__PURE__*/_jsx("div",{className:classNames("snackbar",{"snackbar--rtl":a}),children:/*#__PURE__*/_jsx(CSSTransition,{in:f,classNames:"snackbar__text-container",timeout:{appear:0,enter:g,exit:CSS_TRANSITION_DURATION},unmountOnExit:!0,children:/*#__PURE__*/_jsxs("span",{className:"snackbar__text snackbar__text--".concat(e),children:[d,c?/*#__PURE__*/_jsx("button",{type:"button",className:"snackbar__text__action",onClick:c.onClick,children:c.label}):null]})})})}}]),b}(Component);Snackbar.contextType=DirectionContext,Snackbar.propTypes={action:PropTypes.shape({label:PropTypes.string.isRequired,onClick:PropTypes.func.isRequired}),text:PropTypes.node.isRequired,theme:PropTypes.oneOf(["light","dark"]),timeout:PropTypes.number.isRequired,timestamp:PropTypes.number.isRequired},Snackbar.defaultProps={action:null,theme:Theme.LIGHT};export default withNextPortal(Snackbar);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import
|
|
1
|
+
import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import PropTypes from"prop-types";import{Component}from"react";import SnackbarPortal from"./Snackbar";import{SnackbarContext}from"./SnackbarContext";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var SnackbarProvider=/*#__PURE__*/function(a){function b(){var a;return _classCallCheck(this,b),a=c.call(this),_defineProperty(_assertThisInitialized(a),"create",function(b){var c=b.action,d=b.text,e=b.theme;a.setState({action:c,text:d,theme:e,timestamp:Date.now()})}),a.state={text:"",timestamp:0},a}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"render",value:function render(){var a=this.state,b=a.action,c=a.text,d=a.theme,e=a.timestamp;return/*#__PURE__*/_jsxs(SnackbarContext.Provider,{value:{createSnackbar:this.create},children:[/*#__PURE__*/_jsx(SnackbarPortal,{action:b,text:c,timestamp:e,timeout:this.props.timeout,theme:d}),this.props.children]})}}]),b}(Component);SnackbarProvider.propTypes={children:PropTypes.node.isRequired,timeout:PropTypes.number},SnackbarProvider.defaultProps={timeout:4500};export default SnackbarProvider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import PropTypes from"prop-types";import
|
|
1
|
+
import classNames from"classnames";import PropTypes from"prop-types";import{Position}from"../common";import Tooltip from"../tooltip";import{isTouchDevice}from"./deviceDetection";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";function clamp(a,b,c){return Math.max(Math.min(b,c),a)}/* eslint-disable react/no-array-index-key */var Stepper=function(a){var b=a.steps,c=a.activeStep,d=a.className;if(0===b.length)return null;var e=clamp(0,b.length-1,c),f=1/(b.length-1),g=e/(b.length-1),h=Math.max(g-f,0),i=Math.min(e,1)*f;return/*#__PURE__*/_jsxs("div",{className:classNames("tw-stepper",d),children:[/*#__PURE__*/_jsxs("div",{className:"progress",children:[/*#__PURE__*/_jsx("div",{className:"progress-bar-filler",style:{width:"".concat(100*h,"%")}}),/*#__PURE__*/_jsx("div",{className:"progress-bar-ending",style:{width:"".concat(100*i,"%")}})]}),/*#__PURE__*/_jsx("ul",{className:"tw-stepper-steps p-t-1 m-b-0",children:b.map(function renderStep(a,b){var c=b===e,d=a.onClick&&!c,g=/*#__PURE__*/_jsx("button",{type:"button",className:"btn-unstyled tw-stepper__step-label",disabled:!d,onClick:function onClick(){return d&&a.onClick()},children:/*#__PURE__*/_jsx("small",{children:a.label})});return/*#__PURE__*/_jsx("li",{style:{left:"".concat(100*(b*f),"%")},className:"\n hidden-xs\n tw-stepper__step\n ".concat(c?"tw-stepper__step--active":"","\n ").concat(d?"tw-stepper__step--clickable":"","\n "),children:a.hoverLabel&&!isTouchDevice()?/*#__PURE__*/_jsx(Tooltip,{position:Position.BOTTOM,label:a.hoverLabel,children:g}):g},b)})})]})};/* eslint-enable react/no-array-index-key */Stepper.propTypes={steps:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.node.isRequired,onClick:PropTypes.func,hoverLabel:PropTypes.node})).isRequired,activeStep:PropTypes.number,className:PropTypes.string},Stepper.defaultProps={activeStep:0,className:void 0};export default Stepper;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
function supportsTouchEvents(){var a="undefined"!=typeof window&&window.ontouchstart!==void 0,b="undefined"!=typeof navigator&&navigator.maxTouchPoints,c="undefined"!=typeof window&&window.DocumentTouch&&document instanceof window.DocumentTouch
|
|
1
|
+
function supportsTouchEvents(){var a="undefined"!=typeof window&&window.ontouchstart!==void 0,b="undefined"!=typeof navigator&&navigator.maxTouchPoints,c="undefined"!=typeof window&&window.DocumentTouch&&document instanceof window.DocumentTouch;// eslint-disable-next-line compat/compat
|
|
2
|
+
return!!(a||b||c)}function userAgentSuggestsTouchDevice(){var a=["android","iemobile","iphone","ipad","ipod","blackberry","bada"].map(function(a){return"(".concat(a,")")}).join("|"),b=new RegExp(a,"ig");return"undefined"!=typeof navigator&&!!navigator.userAgent.match(b)}// Important: this is not fool-proof! It gives false positives and negatives, and will be outdated.
|
|
2
3
|
// Only use this for small vanity changes where it still works either way.
|
|
3
4
|
export function isTouchDevice(){return supportsTouchEvents()||userAgentSuggestsTouchDevice()}
|
|
@@ -1,4 +1 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";var _statusLabels;import classNames from"classnames";import{cloneElement}from"react";import{useIntl}from"react-intl";import
|
|
2
|
-
description:PropTypes.node,/** @deprecated please use info instead */help:deprecated(PropTypes.shape({content:PropTypes.node.isRequired,title:PropTypes.node}),{component:"Summary",newProp:"info",expiryDate:expiryDate}),/** Infos displayed on help Icon click inside Popover or Modal */ // eslint-disable-next-line
|
|
3
|
-
info:PropTypes.shape({"aria-label":PropTypes.string.isRequired,content:PropTypes.node.isRequired,onClick:PropTypes.func,presentation:PropTypes.oneOf(["POPOVER","MODAL"]),title:PropTypes.node}),/** @deprecated please use icon instead */illustration:deprecated(PropTypes.node,{component:"Summary",newProp:"icon",expiryDate:expiryDate}),/** Main Summary Icon */ // eslint-disable-next-line
|
|
4
|
-
icon:requiredIf(PropTypes.node,function(a){var b=a.illustration;return!b}),/** Decides the badge applied to Icon */status:PropTypes.oneOf(["notDone","done","pending"]),/** Summary title */title:PropTypes.node.isRequired},Summary.defaultProps={action:null,as:"div",className:null,content:null,help:null,illustration:null,status:null};export default Summary;
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";var _statusLabels;import{CheckCircle as CheckCircleIcon,PendingCircle as PendingCircleIcon}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{cloneElement}from"react";import{useIntl}from"react-intl";import requiredIf from"react-required-if";import{Status,Size}from"../common";import{useDirection}from"../common/hooks";import Info from"../info";import{deprecated}from"../utilities";import messages from"./Summary.messages";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var BadgeIcons={done:CheckCircleIcon,pending:PendingCircleIcon},statusLabels=(_statusLabels={},_defineProperty(_statusLabels,Status.NOT_DONE,"statusNotDone"),_defineProperty(_statusLabels,Status.DONE,"statusDone"),_defineProperty(_statusLabels,Status.PENDING,"statusPending"),_statusLabels),expiryDate=new Date("03-01-2021"),Summary=function(a){var b=a.action,c=a.as,d=a.className,e=a.content,f=a.description,g=void 0===f?e:f,h=a.help,i=a.icon,j=a.illustration,k=a.info,l=void 0===k?h:k,m=a.status,n=a.title,o=useIntl(),p=useDirection(),q=p.isRTL,r=j;if(i){var s,t=null===i||void 0===i||null===(s=i.props)||void 0===s?void 0:s.size;r=24===t?i:/*#__PURE__*/cloneElement(i,{size:24})}var u=m&&BadgeIcons[m];return/*#__PURE__*/_jsxs(c,{className:classNames("np-summary d-flex align-items-start",d),"aria-label":m&&o.formatMessage(messages[statusLabels[m]]),children:[/*#__PURE__*/_jsxs("div",{className:"np-summary__icon",children:[r,u&&/*#__PURE__*/_jsx(u,{size:16,filled:!0,className:"np-summary-icon__".concat(m)})]}),/*#__PURE__*/_jsxs("div",{className:classNames("np-summary__body",{"m-l-2":!q,"m-r-2":q}),children:[/*#__PURE__*/_jsxs("div",{className:"np-summary__title d-flex",children:[/*#__PURE__*/_jsx("strong",{children:n}),l&&/*#__PURE__*/_jsx(Info,{"aria-label":l["aria-label"],className:classNames({"m-l-1":!q,"m-r-1":q},"hidden-xs"),content:l.content,presentation:l.presentation,title:l.title,onClick:l.onClick})]}),g&&/*#__PURE__*/_jsx("div",{className:"np-summary__description",children:g}),b&&/*#__PURE__*/_jsx("a",{href:b.href,target:b.target,className:"np-summary__action","aria-label":b["aria-label"],onClick:b.onClick,children:b.text})]}),l&&/*#__PURE__*/_jsx(Info,{"aria-label":l["aria-label"],className:"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl",content:l.content,presentation:l.presentation,size:Size.LARGE,title:l.title,onClick:l.onClick})]})};Summary.propTypes={/** Action displayed at the bottom of the Summary */action:PropTypes.shape({text:PropTypes.node.isRequired,href:PropTypes.string.isRequired,"aria-label":PropTypes.string,target:PropTypes.string,onClick:PropTypes.func}),/** Decides which html element should wrap the Summary */as:PropTypes.string,/** Extra classes applied to Summary */className:PropTypes.string,/** @deprecated please use description instead */content:deprecated(PropTypes.node,{component:"Summary",newProp:"description",expiryDate:expiryDate}),/** Summary description */description:PropTypes.node,/** @deprecated please use info instead */help:deprecated(PropTypes.shape({content:PropTypes.node.isRequired,title:PropTypes.node}),{component:"Summary",newProp:"info",expiryDate:expiryDate}),/** Infos displayed on help Icon click inside Popover or Modal */info:PropTypes.shape({"aria-label":PropTypes.string.isRequired,content:PropTypes.node.isRequired,onClick:PropTypes.func,presentation:PropTypes.oneOf(["POPOVER","MODAL"]),title:PropTypes.node}),/** @deprecated please use icon instead */illustration:deprecated(PropTypes.node,{component:"Summary",newProp:"icon",expiryDate:expiryDate}),/** Main Summary Icon */icon:requiredIf(PropTypes.node,function(a){var b=a.illustration;return!b}),/** Decides the badge applied to Icon */status:PropTypes.oneOf(["notDone","done","pending"]),/** Summary title */title:PropTypes.node.isRequired},Summary.defaultProps={action:null,as:"div",className:null,content:null,help:null,illustration:null,status:null};export default Summary;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{CheckCircle,CrossCircle}from"@transferwise/icons";import classnames from"classnames";import{useDirection}from"../common/hooks";import KeyCodes from"../common/keyCodes";import{logActionRequiredIf}from"../utilities";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Switch=function(a){var b=useDirection(),c=b.isRTL,d=a.checked,e=a.className,f=a.id,g=a.onClick,h=a.disabled,i=a["aria-label"],j=i?void 0:a["aria-labelledby"];return logActionRequiredIf("Switch now expects either `aria-label` or `aria-labelledby`, and will soon make these props required. Please update your usage to provide one or the other.",!i&&!j),/*#__PURE__*/_jsxs("span",{className:classnames("np-switch",{"np-switch--rtl":c,"np-switch--unchecked":!d,"np-switch--checked":d,"np-switch--disabled":h},e),tabIndex:0,role:"switch","aria-checked":d,"aria-label":i,"aria-labelledby":j,id:f,"aria-disabled":h,onClick:h?void 0:g,onKeyDown:h?void 0:function handleKeyDown(a){("32"===a.code||a.keyCode===KeyCodes.SPACE)&&(a.preventDefault(),g())},children:[/*#__PURE__*/_jsx("span",{className:"np-switch--thumb",children:d?/*#__PURE__*/_jsx(CheckCircle,{filled:!0,size:24}):/*#__PURE__*/_jsx(CrossCircle,{filled:!0,size:24})}),/*#__PURE__*/_jsx("input",{type:"checkbox",checked:d,readOnly:!0})]})};export default Switch;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useState}from"react";import Switch from"./Switch";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Switch,title:"Switch"};export var
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useState}from"react";import Switch from"./Switch";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Switch,title:"Switch"};export var Basic=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1];return/*#__PURE__*/_jsxs("div",{className:"d-flex flex-column",children:[/*#__PURE__*/_jsx("label",{id:"labelID",htmlFor:"switchId",children:"A switch with a label"}),/*#__PURE__*/_jsx(Switch,{checked:c,className:"a-class-name","aria-labelledby":"labelID",id:"switchId",onClick:function onClick(){return d(!c)}}),/*#__PURE__*/_jsx(Switch,{checked:!0,disabled:!0,className:"a-class-name m-t-4","aria-label":"I'm a switch without label",onClick:function onClick(){return d(!c)}}),/*#__PURE__*/_jsx(Switch,{checked:!1,disabled:!1,className:"a-class-name m-t-4","aria-label":"I'm a switch without label",onClick:function onClick(){return d(!c)}}),/*#__PURE__*/_jsx(Switch,{checked:!1,disabled:!0,className:"a-class-name m-t-4","aria-label":"I'm a switch without label",onClick:function onClick(){return d(!c)}})]})};export var Disabled=function(){var a=useState(!1),b=_slicedToArray(a,2),c=b[0],d=b[1];return/*#__PURE__*/_jsxs("div",{className:"d-flex flex-column",children:[/*#__PURE__*/_jsx(Switch,{checked:c,disabled:!0,className:"a-class-name","aria-labelledby":"labelID",id:"switchId",onClick:function onClick(){return d(!c)}}),/*#__PURE__*/_jsx(Switch,{checked:!c,disabled:!0,className:"a-class-name","aria-labelledby":"labelID",id:"switchId",onClick:function onClick(){return d(!c)}})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import Option from"../common/Option";import Switch from"../switch";import{jsx as _jsx}from"react/jsx-runtime";var SwitchOption=function(a){var b=a.checked,c=a.complex,d=a.content,e=a.disabled,f=a.id,g=a.media,h=a.onChange,i=a.title,j=a.showMediaAtAllSizes,k=a["aria-label"],l=function(a){
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import Option from"../common/Option";import Switch from"../switch";import{jsx as _jsx}from"react/jsx-runtime";var stopPropagation=function(a){a&&(a.stopPropagation(),a.preventDefault(),a.nativeEvent&&a.nativeEvent.stopImmediatePropagation&&a.nativeEvent.stopImmediatePropagation())},SwitchOption=function(a){var b=a.checked,c=a.complex,d=a.content,e=a.disabled,f=a.id,g=a.media,h=a.onChange,i=a.title,j=a.showMediaAtAllSizes,k=a["aria-label"],l=function(a){stopPropagation(a);e||h(!b)};return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},{media:g,title:i,content:d,complex:c,disabled:e,showMediaAtAllSizes:j}),{},{button:/*#__PURE__*/_jsx(Switch,{id:f,checked:b,disabled:e,"aria-label":k,onClick:l}),onClick:l}))};export default SwitchOption;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{text,boolean}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import SwitchOption from"./SwitchOption";import{jsx as _jsx}from"react/jsx-runtime";export default{component:SwitchOption,title:"SwitchOption"};export var Basic=function(){var a=useState(!1),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("title","Switch option"),f=text("content","Normally, the button and icon are vertically centered."),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1);return/*#__PURE__*/_jsx(SwitchOption,{media:/*#__PURE__*/_jsx(FastFlagIcon,{}),title:e,content:f,id:"id",checked:c,complex:!1,disabled:g,showMediaAtAllSizes:h,"aria-label":e,onChange:d})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import classNames from"classnames";import PropTypes from"prop-types";import{forwardRef,useEffect,useRef}from"react";import{jsx as _jsx}from"react/jsx-runtime";var Tab=/*#__PURE__*/forwardRef(function(a,b){var c=a.children,d=a.id,e=a.disabled,f=a.panelId,g=a.selected,h=a.onKeyDown,i=a.onClick,j=a.style,k=a.focusTab,l=useRef(!0),m=function(){return l.current?void(l.current=!1):void(g&&k&&k())};return useEffect(function(){m()},[g]),/*#__PURE__*/_jsx("li",{ref:b,className:classNames("tabs__tab",{"tabs__tab--selected":g,"tabs__tab--disabled":e}),role:"tab",id:d,"aria-selected":g?"true":"false","aria-disabled":e?"true":"false","aria-controls":e?null:f,tabIndex:"0",style:j,onKeyDown:e?null:h,onClick:i,children:c})});Tab.defaultProps={disabled:!1,selected:!1,onClick:null,style:null,focusTab:null},Tab.propTypes={children:PropTypes.node.isRequired,disabled:PropTypes.bool,selected:PropTypes.bool,id:PropTypes.string.isRequired,panelId:PropTypes.string.isRequired,onKeyDown:PropTypes.func.isRequired,onClick:PropTypes.func,style:PropTypes.shape({width:PropTypes.string}),focusTab:PropTypes.func};export default Tab;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import{Component,Fragment}from"react";import PropTypes from"prop-types";import classNames from"classnames";import clamp from"lodash.clamp";import{Spring}from"react-spring/renderprops.cjs";import Tab from"./Tab";import TabList from"./TabList";import TabPanel from"./TabPanel";import KeyCodes from"../common/keyCodes";import{getElasticDragDifference,getSwipeDifference,swipedLeftToRight,swipedRightToLeft,swipeShouldChangeTab,getVelocity}from"./utils";import{Size,Width}from"../common";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var MIN_INDEX=0,enabledTabsFilter=function(a){return!a.disabled},SpacerWidth={default:0,xs:8,sm:16,md:24,lg:32},Tabs=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"container",null),_defineProperty(_assertThisInitialized(d),"containerWidth",0),_defineProperty(_assertThisInitialized(d),"tabRefs",[]),_defineProperty(_assertThisInitialized(d),"handleResize",function(){d.setContainerWidth(d.container),d.setState(function(a){var b=a.selectedTabIndex;return{translateTo:-(d.containerWidth*b)}})}),_defineProperty(_assertThisInitialized(d),"setContainerRefAndWidth",function(a){d.container=a,d.setContainerWidth(a)}),_defineProperty(_assertThisInitialized(d),"setContainerWidth",function(a){if(a){var b=a.getBoundingClientRect(),c=b.width;d.containerWidth=c}}),_defineProperty(_assertThisInitialized(d),"isTabDisabled",function(a){var b=d.props.tabs;return b[a]&&b[a].disabled}),_defineProperty(_assertThisInitialized(d),"getAllTabsWidth",function(){return d.tabRefs.map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"getDistanceToSelectedTab",function(a){return d.tabRefs.filter(function(b,c){return c<a}).map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"setTabWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.headerWidth,e=b.selected,f=d.getAllTabsWidth();!a&&(c===Width.BLOCK||d.containerWidth<f)&&d.setState({fullWidthTabs:!0,translateLineX:"".concat(100*e,"%")}),a&&c===Width.AUTO&&d.containerWidth>=f&&d.setState({fullWidthTabs:!1,translateLineX:"".concat(d.getDistanceToSelectedTab(e),"px")})}),_defineProperty(_assertThisInitialized(d),"getTabLineWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.selected,e=b.tabs;if(a)return"".concat(100*(1/e.length),"%");var f=d.tabRefs[c]||d.tabRefs[d.tabRefs.length-1],g=f?f.getBoundingClientRect().width:0;return"".concat(g,"px")}),_defineProperty(_assertThisInitialized(d),"getTabToSelect",function(a,b,c){var e=a;if(swipedLeftToRight(b,c)){if(e-=1,e>MIN_INDEX&&d.isTabDisabled(e))return d.getTabToSelect(e,b,c);}else if(swipedRightToLeft(b,c)&&(e+=1,e<d.MAX_INDEX&&d.isTabDisabled(e)))return d.getTabToSelect(e,b,c);return e=clamp(e,Math.max(a-1,MIN_INDEX),Math.min(a+1,d.MAX_INDEX)),d.isTabDisabled(e)?a:e}),_defineProperty(_assertThisInitialized(d),"swipedOverHalfOfContainer",function(a){return .5<=a/d.containerWidth}),_defineProperty(_assertThisInitialized(d),"calculateApplicableDragDifference",function(a){var b=a.currentSelected,c=a.nextSelected,e=a.start,f=a.end,g=getSwipeDifference(e,f),h=getElasticDragDifference(g);return swipedLeftToRight(e,f)?b>MIN_INDEX&&b!==c?Math.min(g,d.containerWidth):h:!!swipedRightToLeft(e,f)&&(b<d.MAX_INDEX&&b!==c?-Math.min(g,d.containerWidth):-h)}),_defineProperty(_assertThisInitialized(d),"switchTab",function(a){var b=d.props.onTabSelect;b(a)}),_defineProperty(_assertThisInitialized(d),"animateToTab",function(a,b){d.animateLine(a),d.animatePanel(d.getTabIndexWithoutDisabledTabs(a),b)}),_defineProperty(_assertThisInitialized(d),"animateLine",function(a){d.setState(function(b){return{translateLineX:b.fullWidthTabs?"".concat(100*a,"%"):"".concat(d.getDistanceToSelectedTab(a),"px")}})}),_defineProperty(_assertThisInitialized(d),"animatePanel",function(a){var b=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1],c=d.state.translateTo,e=c,f=-(d.containerWidth*a);d.setState({selectedTabIndex:a,isAnimating:!b&&e!==f,translateFrom:e,translateTo:f})}),_defineProperty(_assertThisInitialized(d),"disableScroll",function(a){var b=d.state.isSwiping;b&&a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"handleTabClick",function(a){return function(){d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"onKeyDown",function(a){return function(b){b&&b.keyCode===KeyCodes.ENTER&&d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"handleTouchStart",function(a){var b={x:a.nativeEvent.touches[0].clientX,y:a.nativeEvent.touches[0].clientY,time:Date.now()};d.setState({start:b,currentSwipe:[b]}),a.persist()}),_defineProperty(_assertThisInitialized(d),"handleTouchMove",function(a){var b=d.state.start,c=d.props.selected,e=d.getTabIndexWithoutDisabledTabs(c),f={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},g=getSwipeDifference(b,f),h=getSwipeDifference(b,f,"y"),i=d.state,j=i.isScrolling,k=i.isSwiping;if(a.persist(),j||k||(g>h?k=!0:j=!0),d.setState({isScrolling:j,isSwiping:k}),k){var n=d.getTabToSelect(c,b,f);d.animateLine(d.swipedOverHalfOfContainer(g)?n:c);var l=d.calculateApplicableDragDifference({currentSelected:c,nextSelected:n,start:b,end:f}),m=!!l&&-(d.containerWidth*e)+l;d.setState(function(a){return{currentSwipe:[].concat(_toConsumableArray(a.currentSwipe),[f]),translateFrom:m||a.translateFrom,translateTo:m||a.translateTo}})}}),_defineProperty(_assertThisInitialized(d),"handleTouchEnd",function(a){var b=d.state,c=b.start,e=b.isSwiping,f=d.props.selected,g={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},h=getSwipeDifference(c,g),i=getVelocity([].concat(_toConsumableArray(d.state.currentSwipe),[g]));d.setState({currentSwipe:[]});var j=f;a.persist(),e&&((swipeShouldChangeTab(c,g)||d.swipedOverHalfOfContainer(h))&&(j=d.getTabToSelect(j,c,g)),j===f?d.animateToTab(j):(d.switchTab(j),d.setState({lastSwipeVelocity:i}))),d.setState({isSwiping:!1,isScrolling:!1})}),d.state={start:null,translateX:0,translateFrom:0,translateTo:0,translateLineX:null,isAnimating:!1,isSwiping:!1,isScrolling:!1,lastSwipeVelocity:0,fullWidthTabs:a.headerWidth===Width.BLOCK},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"filteredTabsLength",get:function get(){return this.props.tabs.filter(enabledTabsFilter).length}},{key:"MAX_INDEX",get:function get(){return this.props.tabs.length-1}},{key:"componentDidMount",value:function componentDidMount(){var a=this.props.selected;this.setTabWidth(),this.switchTab(clamp(a,MIN_INDEX,this.MAX_INDEX)),this.animateToTab(clamp(a,MIN_INDEX,this.MAX_INDEX),!0),document.body.addEventListener("touchmove",this.disableScroll,{passive:!1}),document.body.addEventListener("touchforcechange",this.disableScroll,{passive:!1}),window.addEventListener("resize",this.handleResize)}},{key:"componentDidUpdate",value:function componentDidUpdate(a,b){var c=this.props.selected,d=a.selected,e=this.props.tabs[c],f=e&&e.disabled,g=a.tabs[d],h=g&&g.disabled,i=this.props.tabs.length,j=a.tabs.length,k=this.props.tabs.filter(enabledTabsFilter).length,l=a.tabs.filter(enabledTabsFilter).length,m=this.props.headerWidth,n=a.headerWidth,o=this.props.animatePanelsOnClick,p=!o&&!b.isSwiping;(m!==n||i!==j)&&this.setTabWidth(),(c!==d||k!==l||f!==h)&&this.animateToTab(clamp(c,MIN_INDEX,this.MAX_INDEX),c===d||p)}},{key:"componentWillUnmount",value:function componentWillUnmount(){document.body.removeEventListener("touchmove",this.disableScroll),document.body.removeEventListener("touchforcechange",this.disableScroll),window.removeEventListener("resize",this.handleResize)}},{key:"getTabIndexWithoutDisabledTabs",value:function getTabIndexWithoutDisabledTabs(a){return a-this.props.tabs.slice(0,a).filter(function(a){return!enabledTabsFilter(a)}).length}},{key:"render",value:function render(){var a=this,b=this.props,c=b.tabs,d=b.changeTabOnSwipe,e=b.name,f=b.selected,g=b.className,h=b.transitionSpacing,i=this.state,j=i.isSwiping,k=i.translateLineX,l=i.isAnimating,m=i.translateFrom,n=i.translateTo,o=i.lastSwipeVelocity,p=i.fullWidthTabs,q=SpacerWidth[h],r=this.filteredTabsLength,s=Math.abs(-m-this.containerWidth*f),t=j?1-s/this.containerWidth:1-Math.abs(s/this.containerWidth-1),u=(Number.isNaN(t)?0:t)*Math.min(10*Math.E,10*o*Math.E),v=l||j,w=r*this.containerWidth+2*q,x=function(a){var b=a.id;return 0<q&&/*#__PURE__*/_jsx("div",{style:{width:q,display:v?"block":"none"}},b)};return/*#__PURE__*/_jsxs("div",{onTouchStart:d?this.handleTouchStart:void 0,onTouchEnd:d?this.handleTouchEnd:void 0,onTouchMove:d?this.handleTouchMove:void 0,className:classNames("tabs",g),children:[/*#__PURE__*/_jsxs(TabList,{children:[c.map(function(b,d){var g=b.title,h=b.disabled;return/*#__PURE__*/_jsx(Tab,_objectSpread(_objectSpread({id:"".concat(e,"-tab-").concat(d),panelId:"".concat(e,"-panel-").concat(d),selected:f===d,disabled:h,onClick:h?null:a.handleTabClick(d),onKeyDown:a.onKeyDown(d),ref:function ref(b){a.tabRefs[d]=b},focusTab:function focusTab(){a.tabRefs[d].focus()}},p?{style:{width:"".concat(100*(1/c.length),"%")}}:{}),{},{children:g}),g)}),k?/*#__PURE__*/_jsx("div",{className:classNames("tabs__line"),style:{width:this.getTabLineWidth(),transform:"translateX(".concat(k,")")}}):null]}),/*#__PURE__*/_jsx("div",{className:"tabs__panel-container",ref:this.setContainerRefAndWidth,style:{overflow:v?"hidden":"visible"},children:/*#__PURE__*/_jsx(Spring,{from:{transform:"translateX(".concat(m-q,"px)")},to:{transform:"translateX(".concat(n-q,"px)")},config:{precision:j?1:.01,velocity:j?0:u,clamp:!0},onRest:function onRest(){l&&a.setState({isAnimating:!1,lastSwipeVelocity:0})},children:function children(b){return/*#__PURE__*/_jsx("div",{className:"tabs__slider",style:{width:v?"".concat(w,"px"):"100%",transform:v?b.transform:"translateX(0px)"},children:c.map(function(b,d){var g=b.content,h=b.disabled;return h?null:/*#__PURE__*/_jsxs(Fragment,{children:[d===f&&/*#__PURE__*/_jsx(x,{id:"left-spacer"}),/*#__PURE__*/_jsx(TabPanel,{tabId:"".concat(e,"-tab-").concat(d),id:"".concat(e,"-panel-").concat(d),style:{width:v?"".concat(a.containerWidth,"px"):"100%",display:v||d===f?"block":"none"},children:g},c[d].title),d===f&&/*#__PURE__*/_jsx(x,{id:"right-spacer"})]},"".concat(c[d].title,"-fragment"))})})}})})]})}}]),b}(Component),SpacerSizes=_objectSpread(_objectSpread({},Size),{},{NONE:"default"});Tabs.propTypes={tabs:PropTypes.arrayOf(PropTypes.shape({title:PropTypes.string.isRequired,content:PropTypes.node.isRequired,disabled:PropTypes.bool.isRequired})).isRequired,selected:PropTypes.number.isRequired,onTabSelect:PropTypes.func.isRequired,name:PropTypes.string.isRequired,animatePanelsOnClick:PropTypes.bool,changeTabOnSwipe:PropTypes.bool,className:PropTypes.string,transitionSpacing:PropTypes.oneOf(["default","xs","sm","md","lg"]),headerWidth:PropTypes.oneOf(["auto","block"])},Tabs.defaultProps={animatePanelsOnClick:!1,changeTabOnSwipe:!0,className:"",transitionSpacing:SpacerSizes.NONE,headerWidth:Width.BLOCK};export default Tabs;
|
|
1
|
+
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import classNames from"classnames";import clamp from"lodash.clamp";import PropTypes from"prop-types";import{Component,Fragment}from"react";import{Spring}from"react-spring/renderprops.cjs";import{Size,Width}from"../common";import KeyCodes from"../common/keyCodes";import Tab from"./Tab";import TabList from"./TabList";import TabPanel from"./TabPanel";import{getElasticDragDifference,getSwipeDifference,swipedLeftToRight,swipedRightToLeft,swipeShouldChangeTab,getVelocity}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var MIN_INDEX=0,enabledTabsFilter=function(a){return!a.disabled},SpacerWidth={default:0,xs:8,sm:16,md:24,lg:32},Tabs=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"container",null),_defineProperty(_assertThisInitialized(d),"containerWidth",0),_defineProperty(_assertThisInitialized(d),"tabRefs",[]),_defineProperty(_assertThisInitialized(d),"handleResize",function(){d.setContainerWidth(d.container),d.setState(function(a){var b=a.selectedTabIndex;return{translateTo:-(d.containerWidth*b)}})}),_defineProperty(_assertThisInitialized(d),"setContainerRefAndWidth",function(a){d.container=a,d.setContainerWidth(a)}),_defineProperty(_assertThisInitialized(d),"setContainerWidth",function(a){if(a){var b=a.getBoundingClientRect(),c=b.width;d.containerWidth=c}}),_defineProperty(_assertThisInitialized(d),"isTabDisabled",function(a){var b=d.props.tabs;return b[a]&&b[a].disabled}),_defineProperty(_assertThisInitialized(d),"getAllTabsWidth",function(){return d.tabRefs.map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"getDistanceToSelectedTab",function(a){return d.tabRefs.filter(function(b,c){return c<a}).map(function(a){return a?a.getBoundingClientRect().width:0}).reduce(function(c,a){return c+a},0)}),_defineProperty(_assertThisInitialized(d),"setTabWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.headerWidth,e=b.selected,f=d.getAllTabsWidth();!a&&(c===Width.BLOCK||d.containerWidth<f)&&d.setState({fullWidthTabs:!0,translateLineX:"".concat(100*e,"%")}),a&&c===Width.AUTO&&d.containerWidth>=f&&d.setState({fullWidthTabs:!1,translateLineX:"".concat(d.getDistanceToSelectedTab(e),"px")})}),_defineProperty(_assertThisInitialized(d),"getTabLineWidth",function(){var a=d.state.fullWidthTabs,b=d.props,c=b.selected,e=b.tabs;if(a)return"".concat(100*(1/e.length),"%");var f=d.tabRefs[c]||d.tabRefs[d.tabRefs.length-1],g=f?f.getBoundingClientRect().width:0;return"".concat(g,"px")}),_defineProperty(_assertThisInitialized(d),"getTabToSelect",function(a,b,c){var e=a;if(swipedLeftToRight(b,c)){if(e-=1,e>MIN_INDEX&&d.isTabDisabled(e))return d.getTabToSelect(e,b,c);}else if(swipedRightToLeft(b,c)&&(e+=1,e<d.MAX_INDEX&&d.isTabDisabled(e)))return d.getTabToSelect(e,b,c);return e=clamp(e,Math.max(a-1,MIN_INDEX),Math.min(a+1,d.MAX_INDEX)),d.isTabDisabled(e)?a:e}),_defineProperty(_assertThisInitialized(d),"swipedOverHalfOfContainer",function(a){return .5<=a/d.containerWidth}),_defineProperty(_assertThisInitialized(d),"calculateApplicableDragDifference",function(a){var b=a.currentSelected,c=a.nextSelected,e=a.start,f=a.end,g=getSwipeDifference(e,f),h=getElasticDragDifference(g);return swipedLeftToRight(e,f)?b>MIN_INDEX&&b!==c?Math.min(g,d.containerWidth):h:!!swipedRightToLeft(e,f)&&(b<d.MAX_INDEX&&b!==c?-Math.min(g,d.containerWidth):-h)}),_defineProperty(_assertThisInitialized(d),"switchTab",function(a){var b=d.props.onTabSelect;b(a)}),_defineProperty(_assertThisInitialized(d),"animateToTab",function(a,b){d.animateLine(a),d.animatePanel(d.getTabIndexWithoutDisabledTabs(a),b)}),_defineProperty(_assertThisInitialized(d),"animateLine",function(a){d.setState(function(b){return{translateLineX:b.fullWidthTabs?"".concat(100*a,"%"):"".concat(d.getDistanceToSelectedTab(a),"px")}})}),_defineProperty(_assertThisInitialized(d),"animatePanel",function(a){var b=!!(1<arguments.length&&void 0!==arguments[1])&&arguments[1],c=d.state.translateTo,e=c,f=-(d.containerWidth*a);d.setState({selectedTabIndex:a,isAnimating:!b&&e!==f,translateFrom:e,translateTo:f})}),_defineProperty(_assertThisInitialized(d),"disableScroll",function(a){var b=d.state.isSwiping;b&&a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"handleTabClick",function(a){return function(){d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"onKeyDown",function(a){return function(b){b&&b.keyCode===KeyCodes.ENTER&&d.switchTab(a)}}),_defineProperty(_assertThisInitialized(d),"handleTouchStart",function(a){var b={x:a.nativeEvent.touches[0].clientX,y:a.nativeEvent.touches[0].clientY,time:Date.now()};d.setState({start:b,currentSwipe:[b]}),a.persist()}),_defineProperty(_assertThisInitialized(d),"handleTouchMove",function(a){var b=d.state.start,c=d.props.selected,e=d.getTabIndexWithoutDisabledTabs(c),f={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},g=getSwipeDifference(b,f),h=getSwipeDifference(b,f,"y"),i=d.state,j=i.isScrolling,k=i.isSwiping;if(a.persist(),j||k||(g>h?k=!0:j=!0),d.setState({isScrolling:j,isSwiping:k}),k){var n=d.getTabToSelect(c,b,f);d.animateLine(d.swipedOverHalfOfContainer(g)?n:c);var l=d.calculateApplicableDragDifference({currentSelected:c,nextSelected:n,start:b,end:f}),m=!!l&&-(d.containerWidth*e)+l;d.setState(function(a){return{currentSwipe:[].concat(_toConsumableArray(a.currentSwipe),[f]),translateFrom:m||a.translateFrom,translateTo:m||a.translateTo}})}}),_defineProperty(_assertThisInitialized(d),"handleTouchEnd",function(a){var b=d.state,c=b.start,e=b.isSwiping,f=d.props.selected,g={x:a.nativeEvent.changedTouches[0].clientX,y:a.nativeEvent.changedTouches[0].clientY,time:Date.now()},h=getSwipeDifference(c,g),i=getVelocity([].concat(_toConsumableArray(d.state.currentSwipe),[g]));d.setState({currentSwipe:[]});var j=f;a.persist(),e&&((swipeShouldChangeTab(c,g)||d.swipedOverHalfOfContainer(h))&&(j=d.getTabToSelect(j,c,g)),j===f?d.animateToTab(j):(d.switchTab(j),d.setState({lastSwipeVelocity:i}))),d.setState({isSwiping:!1,isScrolling:!1})}),d.state={start:null,translateX:0,translateFrom:0,translateTo:0,translateLineX:null,isAnimating:!1,isSwiping:!1,isScrolling:!1,lastSwipeVelocity:0,fullWidthTabs:a.headerWidth===Width.BLOCK},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"filteredTabsLength",get:function get(){return this.props.tabs.filter(enabledTabsFilter).length}},{key:"MAX_INDEX",get:function get(){return this.props.tabs.length-1}},{key:"componentDidMount",value:function componentDidMount(){var a=this.props.selected;this.setTabWidth(),this.switchTab(clamp(a,MIN_INDEX,this.MAX_INDEX)),this.animateToTab(clamp(a,MIN_INDEX,this.MAX_INDEX),!0),document.body.addEventListener("touchmove",this.disableScroll,{passive:!1}),document.body.addEventListener("touchforcechange",this.disableScroll,{passive:!1}),window.addEventListener("resize",this.handleResize)}},{key:"componentDidUpdate",value:function componentDidUpdate(a,b){var c=this.props.selected,d=a.selected,e=this.props.tabs[c],f=e&&e.disabled,g=a.tabs[d],h=g&&g.disabled,i=this.props.tabs.length,j=a.tabs.length,k=this.props.tabs.filter(enabledTabsFilter).length,l=a.tabs.filter(enabledTabsFilter).length,m=this.props.headerWidth,n=a.headerWidth,o=this.props.animatePanelsOnClick,p=!o&&!b.isSwiping;(m!==n||i!==j)&&this.setTabWidth(),(c!==d||k!==l||f!==h)&&this.animateToTab(clamp(c,MIN_INDEX,this.MAX_INDEX),c===d||p)}},{key:"componentWillUnmount",value:function componentWillUnmount(){document.body.removeEventListener("touchmove",this.disableScroll),document.body.removeEventListener("touchforcechange",this.disableScroll),window.removeEventListener("resize",this.handleResize)}},{key:"getTabIndexWithoutDisabledTabs",value:function getTabIndexWithoutDisabledTabs(a){return a-this.props.tabs.slice(0,a).filter(function(a){return!enabledTabsFilter(a)}).length}},{key:"render",value:function render(){var a=this,b=this.props,c=b.tabs,d=b.changeTabOnSwipe,e=b.name,f=b.selected,g=b.className,h=b.transitionSpacing,i=b.headerWidth,j=this.state,k=j.isSwiping,l=j.translateLineX,m=j.isAnimating,n=j.translateFrom,o=j.translateTo,p=j.lastSwipeVelocity,q=j.fullWidthTabs,r=SpacerWidth[h],s=this.filteredTabsLength,t=Math.abs(-n-this.containerWidth*f),u=k?1-t/this.containerWidth:1-Math.abs(t/this.containerWidth-1),v=(Number.isNaN(u)?0:u)*Math.min(10*Math.E,10*p*Math.E),w=m||k,x=s*this.containerWidth+2*r,y=function(a){var b=a.id;return 0<r&&/*#__PURE__*/_jsx("div",{style:{width:r,display:w?"block":"none"}},b)};return/*#__PURE__*/_jsxs("div",{className:classNames("tabs",g,{"tabs--auto-width":i===Width.AUTO}),onTouchStart:d?this.handleTouchStart:void 0,onTouchEnd:d?this.handleTouchEnd:void 0,onTouchMove:d?this.handleTouchMove:void 0,children:[/*#__PURE__*/_jsxs(TabList,{children:[c.map(function(b,d){var g=b.title,h=b.disabled;return/*#__PURE__*/_jsx(Tab,_objectSpread(_objectSpread({ref:function ref(b){a.tabRefs[d]=b},id:"".concat(e,"-tab-").concat(d),panelId:"".concat(e,"-panel-").concat(d),selected:f===d,disabled:h,focusTab:function focusTab(){a.tabRefs[d].focus()},onClick:h?null:a.handleTabClick(d),onKeyDown:a.onKeyDown(d)},q?{style:{width:"".concat(100*(1/c.length),"%")}}:{}),{},{children:g}),g)}),l?/*#__PURE__*/_jsx("div",{className:classNames("tabs__line"),style:{width:this.getTabLineWidth(),transform:"translateX(".concat(l,")")}}):null]}),/*#__PURE__*/_jsx("div",{ref:this.setContainerRefAndWidth,className:"tabs__panel-container",style:{overflow:w?"hidden":"visible"},children:/*#__PURE__*/_jsx(Spring,{from:{transform:"translateX(".concat(n-r,"px)")},to:{transform:"translateX(".concat(o-r,"px)")},config:{precision:k?1:.01,velocity:k?0:v,clamp:!0},onRest:function onRest(){m&&a.setState({isAnimating:!1,lastSwipeVelocity:0})},children:function children(b){return/*#__PURE__*/_jsx("div",{className:"tabs__slider",style:{width:w?"".concat(x,"px"):"100%",transform:w?b.transform:"translateX(0px)"},children:c.map(function(b,d){var g=b.content,h=b.disabled;return h?null:/*#__PURE__*/_jsxs(Fragment,{children:[d===f&&/*#__PURE__*/_jsx(y,{id:"left-spacer"}),/*#__PURE__*/_jsx(TabPanel,{tabId:"".concat(e,"-tab-").concat(d),id:"".concat(e,"-panel-").concat(d),style:{width:w?"".concat(a.containerWidth,"px"):"100%",display:w||d===f?"block":"none"},children:g},c[d].title),d===f&&/*#__PURE__*/_jsx(y,{id:"right-spacer"})]},"".concat(c[d].title,"-fragment"))})})}})})]})}}]),b}(Component),SpacerSizes=_objectSpread(_objectSpread({},Size),{},{NONE:"default"});Tabs.propTypes={tabs:PropTypes.arrayOf(PropTypes.shape({title:PropTypes.string.isRequired,content:PropTypes.node.isRequired,disabled:PropTypes.bool.isRequired})).isRequired,selected:PropTypes.number.isRequired,onTabSelect:PropTypes.func.isRequired,name:PropTypes.string.isRequired,animatePanelsOnClick:PropTypes.bool,changeTabOnSwipe:PropTypes.bool,className:PropTypes.string,transitionSpacing:PropTypes.oneOf(["default","xs","sm","md","lg"]),headerWidth:PropTypes.oneOf(["auto","block"])},Tabs.defaultProps={animatePanelsOnClick:!1,changeTabOnSwipe:!0,className:"",transitionSpacing:SpacerSizes.NONE,headerWidth:Width.BLOCK};export default Tabs;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import classNames from"classnames";import PropTypes from"prop-types";import{Size,Key}from"../common";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var Tile=function(a){var b=a.className,c=a.description,d=a.disabled,e=a.href,f=a.target,g=a.media,h=a.onClick,i=a.size,j=a.title,k=i===Size.SMALL;return/*#__PURE__*/_jsxs("a",{className:classNames("decision","flex-column","np-tile","text-no-decoration","text-xs-center",b,{"p-y-5 p-x-4":!k,"np-tile--small p-a-2":k,disabled:d}),href:e,target:f,"aria-label":j,onClick:d?null:h,onKeyDown:d?null:function(a){var b=a.key;(b===Key.ENTER||Key.SPACE.includes(b))&&h()},children:[/*#__PURE__*/_jsx("div",{className:"np-tile__media d-flex justify-content-center",children:g}),/*#__PURE__*/_jsx("div",{className:"np-tile__title",children:j}),c&&/*#__PURE__*/_jsx("div",{className:"np-tile__description",children:c})]})};Tile.propTypes={/** Classes to apply to the Tile container */className:PropTypes.string,description:PropTypes.node,disabled:PropTypes.bool,href:PropTypes.string.isRequired,target:PropTypes.oneOf(["_self","_blank","_parent","_top"]),/** Accepts only Avatar and images */media:PropTypes.node.isRequired,/** Function called onClick or onKeyDown */onClick:PropTypes.func.isRequired,/** The size applied to Tile */size:PropTypes.oneOf(["sm","md"]),title:PropTypes.node.isRequired},Tile.defaultProps={className:"",description:null,disabled:!1,size:Size.MEDIUM,target:void 0};export default Tile;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import
|
|
1
|
+
import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import PropTypes from"prop-types";import{Component}from"react";import{Position}from"../common";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";function getTooltipStyle(a,b,c,d){return c===Position.TOP?{top:"".concat(a.offsetTop-b.offsetHeight-d,"px"),left:"".concat(a.offsetLeft+a.offsetWidth/2-b.offsetWidth/2,"px")}:c===Position.LEFT?{top:"".concat(a.offsetTop+a.offsetHeight/2-b.offsetHeight/2,"px"),left:"".concat(a.offsetLeft-b.offsetWidth-d,"px")}:c===Position.RIGHT?{top:"".concat(a.offsetTop+a.offsetHeight/2-b.offsetHeight/2,"px"),left:"".concat(a.offsetLeft+a.offsetWidth+d,"px")}:c===Position.BOTTOM?{top:"".concat(a.offsetTop+a.offsetHeight+d,"px"),left:"".concat(a.offsetLeft+a.offsetWidth/2-b.offsetWidth/2,"px")}:{}}var Tooltip=/*#__PURE__*/function(a){function b(){var a;return _classCallCheck(this,b),a=c.call(this),_defineProperty(_assertThisInitialized(a),"ensureHidden",function(b){a.state.show||(b.stopPropagation(),a.hide())}),a.state={show:!1,tooltipId:null},a}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"componentDidMount",value:function componentDidMount(){this.setState({tooltipId:Math.random().toString(36).slice(7)})}},{key:"show",value:function show(){this.setState(function(){return{show:!0}})}},{key:"hide",value:function hide(){this.setState(function(){return{show:!1}})}},{key:"render",value:function render(){var a=this,b=this.state.tooltipId,c=this.props,d=c.position,e=c.children,f=c.label,g=c.offset,h=this.elementReference&&this.tooltipReference?getTooltipStyle(this.elementReference,this.tooltipReference,d,g):{};return/*#__PURE__*/_jsxs("span",{ref:function ref(b){a.elementReference=b},"aria-describedby":b,className:"tw-tooltip-container",onMouseOver:function onMouseOver(){return a.show()},onFocus:function onFocus(){return a.show()},onMouseOut:function onMouseOut(){return a.hide()},onBlur:function onBlur(){return a.hide()},children:[/*#__PURE__*/_jsxs("div",{ref:function ref(b){a.tooltipReference=b},className:"tooltip fade ".concat(d," ").concat(this.state.show?"in":""),role:"tooltip",style:h,id:b,onMouseOver:this.ensureHidden,onFocus:this.ensureHidden,children:[/*#__PURE__*/_jsx("div",{className:"tooltip-arrow"}),/*#__PURE__*/_jsx("div",{className:"tooltip-inner",children:f})]}),e]})}}]),b}(Component);Tooltip.propTypes={children:PropTypes.oneOfType([PropTypes.element,PropTypes.arrayOf(PropTypes.element),PropTypes.string]).isRequired,position:PropTypes.oneOf(["top","bottom","left","right"]),label:PropTypes.node.isRequired,offset:PropTypes.number},Tooltip.defaultProps={position:Position.TOP,offset:0};export default Tooltip;
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}/* eslint-disable jsx-a11y/anchor-is-valid */ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */import{Component}from"react";import PropTypes from"prop-types";import debounce from"lodash.debounce";import clamp from"lodash.clamp";import classNames from"classnames";import{Cross as CrossIcon}from"@transferwise/icons";import KeyCodes from"../common/keyCodes";import TypeaheadInput from"./typeaheadInput/TypeaheadInput";import TypeaheadOption from"./typeaheadOption/TypeaheadOption";import InlineAlert from"../inlineAlert";import Chip from"../chip";import{addClickClassToDocumentOnIos,removeClickClassFromDocumentOnIos}from"../common/domHelpers";import{Size,Sentiment}from"../common";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_MIN_QUERY_LENGTH=3,SEARCH_DELAY=200,Typeahead=/*#__PURE__*/function(a){function b(a){var d;_classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"handleOnFocus",function(){var a=d.props.onFocus;d.showMenu(),a&&d.props.onFocus()}),_defineProperty(_assertThisInitialized(d),"onOptionSelected",function(a,b){a.preventDefault(),d.selectItem(b)}),_defineProperty(_assertThisInitialized(d),"handleOnChange",function(a){var b=d.state,c=b.optionsShown,e=b.selected,f=d.props,g=f.multiple,h=f.onInputChange;c||d.showMenu();var i=a.target.value;!g&&0<e.length&&d.updateSelectedValue([]),d.setState({query:i},function(){d.handleSearchDebounced(i),h&&h(i)})}),_defineProperty(_assertThisInitialized(d),"handleOnPaste",function(a){var b=d.props,c=b.allowNew,e=b.multiple,f=b.chipSeparators,g=d.state.selected;if(c&&e&&0<f.length){a.preventDefault();var j=a.clipboardData.getData("text");if(j){var h=new RegExp(f.join("|")),i=j.split(h).map(function(a){return{label:a.trim()}}).filter(function(a){return a.label});d.updateSelectedValue([].concat(_toConsumableArray(g),_toConsumableArray(i)))}}}),_defineProperty(_assertThisInitialized(d),"handleOnKeyDown",function(a){var b=d.props,c=b.showSuggestions,e=b.allowNew,f=b.multiple,g=b.chipSeparators,h=b.options,i=d.state,j=i.keyboardFocusedOptionIndex,k=i.query,l=i.selected;if(!c&&e&&f&&-1!==["Enter","Tab"].concat(_toConsumableArray(g)).indexOf(a.key)&&k.trim())a.preventDefault(),d.selectItem({label:k});else switch(a.keyCode){case KeyCodes.DOWN:a.preventDefault(),d.moveFocusedOption(1);break;case KeyCodes.UP:a.preventDefault(),d.moveFocusedOption(-1);break;case KeyCodes.ENTER:a.preventDefault(),h[j]?d.selectItem(h[j]):e&&k.trim()&&d.selectItem({label:k});break;case KeyCodes.BACKSPACE:f&&!k&&0<l.length&&d.updateSelectedValue(l.slice(0,-1));break;default:}}),_defineProperty(_assertThisInitialized(d),"selectItem",function(a){var b,c=d.props.multiple,e=_toConsumableArray(d.state.selected);c?(e.push(a),b=""):(e=[a],b=a.label),d.updateSelectedValue(e),d.hideMenu(),d.setState({query:b})}),_defineProperty(_assertThisInitialized(d),"stopPropagation",function(a){a.stopPropagation(),a.preventDefault(),a.nativeEvent&&a.nativeEvent.stopImmediatePropagation&&a.nativeEvent.stopImmediatePropagation()}),_defineProperty(_assertThisInitialized(d),"handleSearch",function(a){var b=d.props.onSearch;b&&b(a),d.setState(function(a){return{keyboardFocusedOptionIndex:null===a.keyboardFocusedOptionIndex?null:0}})}),_defineProperty(_assertThisInitialized(d),"handleDocumentClick",function(){if(d.state.optionsShown){d.hideMenu();var a=d.props,b=a.allowNew,c=a.onBlur,e=a.autoFillOnBlur,f=d.state.query;d.setState({isFocused:!1}),b&&e&&f.trim()&&d.selectItem({label:f}),c&&c()}}),_defineProperty(_assertThisInitialized(d),"showMenu",function(){d.setState({isFocused:!0,optionsShown:!0},function(){addClickClassToDocumentOnIos(),document.addEventListener("click",d.handleDocumentClick,!1)})}),_defineProperty(_assertThisInitialized(d),"hideMenu",function(){d.setState({optionsShown:!1,keyboardFocusedOptionIndex:null},function(){removeClickClassFromDocumentOnIos(),document.removeEventListener("click",d.handleDocumentClick,!1)})}),_defineProperty(_assertThisInitialized(d),"updateSelectedValue",function(a){var b=d.props,c=b.onChange,e=b.validateChip,f=a.some(function(a){return!e(a)});d.setState({selected:a,errorState:f},function(){c(a)})}),_defineProperty(_assertThisInitialized(d),"clear",function(a){a.preventDefault(),0<d.state.selected.length&&d.updateSelectedValue([]),d.setState({query:""})}),_defineProperty(_assertThisInitialized(d),"removeChip",function(a){var b=d.state.selected;0<b.length&&d.updateSelectedValue(_toConsumableArray(b.filter(function(b){return b!==a})))}),_defineProperty(_assertThisInitialized(d),"renderChip",function(a,b){var c=d.props.validateChip(a);return/*#__PURE__*/_jsx(Chip,{hasError:!c,label:a.label,onRemove:function onRemove(){return d.removeChip(a)}},b)}),_defineProperty(_assertThisInitialized(d),"renderMenu",function(a){var b=a.footer,c=a.options,e=a.id,f=a.keyboardFocusedOptionIndex,g=a.query,h=a.allowNew,i=a.showNewEntry,j=a.dropdownOpen,k=_toConsumableArray(c);return h&&g.trim()&&c.every(function(a){return a.label.trim().toUpperCase()!==g.trim().toUpperCase()})&&i&&k.push({label:g}),/*#__PURE__*/_jsx("div",{className:classNames("dropdown btn-group btn-block",{open:j}),id:"menu-".concat(e),children:/*#__PURE__*/_jsxs("ul",{className:"dropdown-menu",role:"menu","aria-labelledby":"dropdownMenu1",children:[k.map(function(a,b){return/*#__PURE__*/_jsx(TypeaheadOption,{query:g,option:a,selected:f===b,onClick:function onClick(b){d.onOptionSelected(b,a)}},"".concat(a.label).concat(b.toString()))}),b]})})});var e=a.searchDelay,f=a.initialValue,g=a.multiple;d.handleSearchDebounced=debounce(d.handleSearch,e);var h=!g&&0<f.length?f[0].label:"";return d.state={selected:f,errorState:!1,query:h,keyboardFocusedOptionIndex:null},d}// eslint-disable-next-line
|
|
2
|
-
_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(a){a.multiple!==this.props.multiple&&this.setState(function(b){var c=b.selected;return!a.multiple&&0<c.length?{query:c[0].label,selected:[c[0]]}:{query:""}})}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.handleSearchDebounced.cancel()}},{key:"moveFocusedOption",value:function moveFocusedOption(a){var b=this;this.setState(function(c){var d=c.keyboardFocusedOptionIndex,e=b.props.options,f=0;return null!==d&&(f=clamp(d+a,0,e.length-1)),{keyboardFocusedOptionIndex:f}})}},{key:"render",value:function render(){var a=this.props,b=a.id,c=a.placeholder,d=a.multiple,e=a.size,f=a.addon,g=a.name,h=a.clearable,i=a.allowNew,j=a.footer,k=a.showSuggestions,l=a.showNewEntry,m=a.options,n=a.minQueryLength,o=a.autoFocus,p=a.maxHeight,q=a.alert,r=a.inputAutoComplete,s=this.state,t=s.errorState,u=s.query,v=s.selected,w=s.optionsShown,x=s.keyboardFocusedOptionIndex,y=h&&(u||0<v.length),z=w&&k&&u.length>=n,A=this.renderMenu({footer:j,options:m,keyboardFocusedOptionIndex:x,query:u,allowNew:i,showNewEntry:l,dropdownOpen:z}),B=t||q&&q.type===Sentiment.ERROR,C=!t&&q||q&&q.type===Sentiment.ERROR,D=C&&q.type===Sentiment.WARNING;return/*#__PURE__*/_jsx("div",{id:b,className:classNames("typeahead","typeahead-".concat(e),{"typeahead--has-value":0<v.length,"typeahead--empty":0===v.length,"typeahead--multiple":d,open:z}),onClick:this.stopPropagation,children:/*#__PURE__*/_jsxs("div",{className:classNames("form-group",{"has-error":B,"has-warning":D}),children:[/*#__PURE__*/_jsxs("div",{className:"input-group input-group-".concat(e),children:[f&&/*#__PURE__*/_jsx("span",{className:"input-group-addon",children:f}),/*#__PURE__*/_jsx(TypeaheadInput,{autoFocus:o,multiple:d,optionsShown:w,placeholder:c,selected:v,maxHeight:p,name:g,value:u,typeaheadId:b,renderChip:this.renderChip,onChange:this.handleOnChange,onKeyDown:this.handleOnKeyDown,onFocus:this.handleOnFocus,onPaste:this.handleOnPaste,autoComplete:r}),y&&/*#__PURE__*/_jsx("div",{className:"input-group-addon",children:/*#__PURE__*/_jsx("button",{type:"button",className:"btn-unstyled",onClick:this.clear,children:/*#__PURE__*/_jsx(CrossIcon,{})})})]}),C&&/*#__PURE__*/_jsx(InlineAlert,{type:q.type,children:q.message}),A]})})}}]),b}(Component);export{Typeahead as default};Typeahead.propTypes={id:PropTypes.string.isRequired,name:PropTypes.string.isRequired,options:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.string.isRequired,note:PropTypes.string,secondary:PropTypes.string})).isRequired,initialValue:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.string.isRequired,note:PropTypes.string,secondary:PropTypes.string})),onChange:PropTypes.func.isRequired,allowNew:PropTypes.bool,autoFocus:PropTypes.bool,clearable:PropTypes.bool,multiple:PropTypes.bool,showSuggestions:PropTypes.bool,showNewEntry:PropTypes.bool,searchDelay:PropTypes.number,maxHeight:PropTypes.number,minQueryLength:PropTypes.number,addon:PropTypes.node,placeholder:PropTypes.string,alert:PropTypes.shape({message:PropTypes.string.isRequired,type:PropTypes.oneOf(["error","warning"]).isRequired}),footer:PropTypes.node,validateChip:PropTypes.func,onSearch:PropTypes.func,onBlur:PropTypes.func,onInputChange:PropTypes.func,onFocus:PropTypes.func,chipSeparators:PropTypes.arrayOf(PropTypes.string),size:PropTypes.oneOf(["md","lg"]),inputAutoComplete:PropTypes.string,autoFillOnBlur:PropTypes.bool},Typeahead.defaultProps={allowNew:!1,autoFocus:!1,clearable:!0,multiple:!1,maxHeight:null,showSuggestions:!0,showNewEntry:!0,searchDelay:SEARCH_DELAY,minQueryLength:3,addon:null,placeholder:null,alert:null,footer:null,size:Size.MEDIUM,chipSeparators:[],initialValue:[],onSearch:null,onBlur:null,onInputChange:null,onFocus:null,validateChip:function validateChip(){return!0},inputAutoComplete:"new-password",autoFillOnBlur:!0};
|
|
1
|
+
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}/* eslint-disable jsx-a11y/anchor-is-valid */ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */import{Cross as CrossIcon}from"@transferwise/icons";import classNames from"classnames";import clamp from"lodash.clamp";import debounce from"lodash.debounce";import PropTypes from"prop-types";import{Component}from"react";import Chip from"../chip";import{Size,Sentiment}from"../common";import{addClickClassToDocumentOnIos,removeClickClassFromDocumentOnIos}from"../common/domHelpers";import KeyCodes from"../common/keyCodes";import InlineAlert from"../inlineAlert";import TypeaheadInput from"./typeaheadInput/TypeaheadInput";import TypeaheadOption from"./typeaheadOption/TypeaheadOption";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_MIN_QUERY_LENGTH=3,SEARCH_DELAY=200,Typeahead=/*#__PURE__*/function(a){function b(a){var d;_classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"handleOnFocus",function(){var a=d.props.onFocus;d.showMenu(),a&&d.props.onFocus()}),_defineProperty(_assertThisInitialized(d),"onOptionSelected",function(a,b){a.preventDefault(),d.selectItem(b)}),_defineProperty(_assertThisInitialized(d),"handleOnChange",function(a){var b=d.state,c=b.optionsShown,e=b.selected,f=d.props,g=f.multiple,h=f.onInputChange;c||d.showMenu();var i=a.target.value;!g&&0<e.length&&d.updateSelectedValue([]),d.setState({query:i},function(){d.handleSearchDebounced(i),h&&h(i)})}),_defineProperty(_assertThisInitialized(d),"handleOnPaste",function(a){var b=d.props,c=b.allowNew,e=b.multiple,f=b.chipSeparators,g=d.state.selected;if(c&&e&&0<f.length){a.preventDefault();var j=a.clipboardData.getData("text");if(j){var h=new RegExp(f.join("|")),i=j.split(h).map(function(a){return{label:a.trim()}}).filter(function(a){return a.label});d.updateSelectedValue([].concat(_toConsumableArray(g),_toConsumableArray(i)))}}}),_defineProperty(_assertThisInitialized(d),"handleOnKeyDown",function(a){var b=d.props,c=b.showSuggestions,e=b.allowNew,f=b.multiple,g=b.chipSeparators,h=b.options,i=d.state,j=i.keyboardFocusedOptionIndex,k=i.query,l=i.selected;if(!c&&e&&f&&["Enter","Tab"].concat(_toConsumableArray(g)).includes(a.key)&&k.trim())a.preventDefault(),d.selectItem({label:k});else switch(a.keyCode){case KeyCodes.DOWN:a.preventDefault(),d.moveFocusedOption(1);break;case KeyCodes.UP:a.preventDefault(),d.moveFocusedOption(-1);break;case KeyCodes.ENTER:a.preventDefault(),h[j]?d.selectItem(h[j]):e&&k.trim()&&d.selectItem({label:k});break;case KeyCodes.BACKSPACE:f&&!k&&0<l.length&&d.updateSelectedValue(l.slice(0,-1));break;default:}}),_defineProperty(_assertThisInitialized(d),"selectItem",function(a){var b,c=d.props.multiple,e=_toConsumableArray(d.state.selected);c?(e.push(a),b=""):(e=[a],b=a.label),d.updateSelectedValue(e),d.hideMenu(),d.setState({query:b})}),_defineProperty(_assertThisInitialized(d),"stopPropagation",function(a){a.stopPropagation(),a.preventDefault(),a.nativeEvent&&a.nativeEvent.stopImmediatePropagation&&a.nativeEvent.stopImmediatePropagation()}),_defineProperty(_assertThisInitialized(d),"handleSearch",function(a){var b=d.props.onSearch;b&&b(a),d.setState(function(a){return{keyboardFocusedOptionIndex:null===a.keyboardFocusedOptionIndex?null:0}})}),_defineProperty(_assertThisInitialized(d),"handleDocumentClick",function(){if(d.state.optionsShown){d.hideMenu();var a=d.props,b=a.allowNew,c=a.onBlur,e=a.autoFillOnBlur,f=d.state.query;d.setState({isFocused:!1}),b&&e&&f.trim()&&d.selectItem({label:f}),c&&c()}}),_defineProperty(_assertThisInitialized(d),"showMenu",function(){d.setState({isFocused:!0,optionsShown:!0},function(){addClickClassToDocumentOnIos(),document.addEventListener("click",d.handleDocumentClick,!1)})}),_defineProperty(_assertThisInitialized(d),"hideMenu",function(){d.setState({optionsShown:!1,keyboardFocusedOptionIndex:null},function(){removeClickClassFromDocumentOnIos(),document.removeEventListener("click",d.handleDocumentClick,!1)})}),_defineProperty(_assertThisInitialized(d),"updateSelectedValue",function(a){var b=d.props,c=b.onChange,e=b.validateChip,f=a.some(function(a){return!e(a)});d.setState({selected:a,errorState:f},function(){c(a)})}),_defineProperty(_assertThisInitialized(d),"clear",function(a){a.preventDefault(),0<d.state.selected.length&&d.updateSelectedValue([]),d.setState({query:""})}),_defineProperty(_assertThisInitialized(d),"removeChip",function(a){var b=d.state.selected;0<b.length&&d.updateSelectedValue(_toConsumableArray(b.filter(function(b){return b!==a})))}),_defineProperty(_assertThisInitialized(d),"renderChip",function(a,b){var c=d.props.validateChip(a);return/*#__PURE__*/_jsx(Chip,{hasError:!c,label:a.label,onRemove:function onRemove(){return d.removeChip(a)}},b)}),_defineProperty(_assertThisInitialized(d),"renderMenu",function(a){var b=a.footer,c=a.options,e=a.id,f=a.keyboardFocusedOptionIndex,g=a.query,h=a.allowNew,i=a.showNewEntry,j=a.dropdownOpen,k=_toConsumableArray(c);return h&&g.trim()&&c.every(function(a){return a.label.trim().toUpperCase()!==g.trim().toUpperCase()})&&i&&k.push({label:g}),/*#__PURE__*/_jsx("div",{className:classNames("dropdown btn-group btn-block",{open:j}),id:"menu-".concat(e),children:/*#__PURE__*/_jsxs("ul",{className:"dropdown-menu",role:"menu","aria-labelledby":"dropdownMenu1",children:[k.map(function(a,b){return/*#__PURE__*/_jsx(TypeaheadOption,{query:g,option:a,selected:f===b,onClick:function onClick(b){d.onOptionSelected(b,a)}},"".concat(a.label).concat(b.toString()))}),b]})})});var e=a.searchDelay,f=a.initialValue,g=a.multiple;d.handleSearchDebounced=debounce(d.handleSearch,e);var h=!g&&0<f.length?f[0].label:"";return d.state={selected:f,errorState:!1,query:h,keyboardFocusedOptionIndex:null},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(a){a.multiple!==this.props.multiple&&this.setState(function(b){var c=b.selected;return!a.multiple&&0<c.length?{query:c[0].label,selected:[c[0]]}:{query:""}})}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.handleSearchDebounced.cancel()}},{key:"moveFocusedOption",value:function moveFocusedOption(a){var b=this;this.setState(function(c){var d=c.keyboardFocusedOptionIndex,e=b.props.options,f=0;return null!==d&&(f=clamp(d+a,0,e.length-1)),{keyboardFocusedOptionIndex:f}})}},{key:"render",value:function render(){var a=this.props,b=a.id,c=a.placeholder,d=a.multiple,e=a.size,f=a.addon,g=a.name,h=a.clearable,i=a.allowNew,j=a.footer,k=a.showSuggestions,l=a.showNewEntry,m=a.options,n=a.minQueryLength,o=a.autoFocus,p=a.maxHeight,q=a.alert,r=a.inputAutoComplete,s=this.state,t=s.errorState,u=s.query,v=s.selected,w=s.optionsShown,x=s.keyboardFocusedOptionIndex,y=h&&(u||0<v.length),z=w&&k&&u.length>=n,A=this.renderMenu({footer:j,options:m,keyboardFocusedOptionIndex:x,query:u,allowNew:i,showNewEntry:l,dropdownOpen:z}),B=t||q&&q.type===Sentiment.ERROR,C=!t&&q||q&&q.type===Sentiment.ERROR,D=C&&q.type===Sentiment.WARNING;return/*#__PURE__*/_jsx("div",{id:b,className:classNames("typeahead","typeahead-".concat(e),{"typeahead--has-value":0<v.length,"typeahead--empty":0===v.length,"typeahead--multiple":d,open:z}),onClick:this.stopPropagation,children:/*#__PURE__*/_jsxs("div",{className:classNames("form-group",{"has-error":B,"has-warning":D}),children:[/*#__PURE__*/_jsxs("div",{className:"input-group input-group-".concat(e),children:[f&&/*#__PURE__*/_jsx("span",{className:"input-group-addon",children:f}),/*#__PURE__*/_jsx(TypeaheadInput,{autoFocus:o,multiple:d,optionsShown:w,placeholder:c,selected:v,maxHeight:p,name:g,value:u,typeaheadId:b,renderChip:this.renderChip,autoComplete:r,onChange:this.handleOnChange,onKeyDown:this.handleOnKeyDown,onFocus:this.handleOnFocus,onPaste:this.handleOnPaste}),y&&/*#__PURE__*/_jsx("div",{className:"input-group-addon",children:/*#__PURE__*/_jsx("button",{type:"button",className:"btn-unstyled",onClick:this.clear,children:/*#__PURE__*/_jsx(CrossIcon,{})})})]}),C&&/*#__PURE__*/_jsx(InlineAlert,{type:q.type,children:q.message}),A]})})}}]),b}(Component);export{Typeahead as default};Typeahead.propTypes={id:PropTypes.string.isRequired,name:PropTypes.string.isRequired,options:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.string.isRequired,note:PropTypes.string,secondary:PropTypes.string})).isRequired,initialValue:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.string.isRequired,note:PropTypes.string,secondary:PropTypes.string})),onChange:PropTypes.func.isRequired,allowNew:PropTypes.bool,autoFocus:PropTypes.bool,clearable:PropTypes.bool,multiple:PropTypes.bool,showSuggestions:PropTypes.bool,showNewEntry:PropTypes.bool,searchDelay:PropTypes.number,maxHeight:PropTypes.number,minQueryLength:PropTypes.number,addon:PropTypes.node,placeholder:PropTypes.string,alert:PropTypes.shape({message:PropTypes.string.isRequired,type:PropTypes.oneOf(["error","warning"]).isRequired}),footer:PropTypes.node,validateChip:PropTypes.func,onSearch:PropTypes.func,onBlur:PropTypes.func,onInputChange:PropTypes.func,onFocus:PropTypes.func,chipSeparators:PropTypes.arrayOf(PropTypes.string),size:PropTypes.oneOf(["md","lg"]),inputAutoComplete:PropTypes.string,autoFillOnBlur:PropTypes.bool},Typeahead.defaultProps={allowNew:!1,autoFocus:!1,clearable:!0,multiple:!1,maxHeight:null,showSuggestions:!0,showNewEntry:!0,searchDelay:SEARCH_DELAY,minQueryLength:3,addon:null,placeholder:null,alert:null,footer:null,size:Size.MEDIUM,chipSeparators:[],initialValue:[],onSearch:null,onBlur:null,onInputChange:null,onFocus:null,validateChip:function validateChip(){return!0},inputAutoComplete:"new-password",autoFillOnBlur:!0};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}/* eslint-disable jsx-a11y/no-autofocus */ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */import
|
|
1
|
+
import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}/* eslint-disable jsx-a11y/no-autofocus */ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */import classnames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_INPUT_MIN_WIDTH=10,TypeaheadInput=/*#__PURE__*/function(a){function b(){var a;return _classCallCheck(this,b),a=c.call(this),_defineProperty(_assertThisInitialized(a),"recalculateWidth",function(){requestAnimationFrame(function(){a.setState({inputWidth:Math.max(DEFAULT_INPUT_MIN_WIDTH,a.sizerRef.scrollWidth+10)})})}),_defineProperty(_assertThisInitialized(a),"renderInput",function(){var b=a.props,c=b.typeaheadId,d=b.autoFocus,e=b.multiple,f=b.name,g=b.optionsShown,h=b.placeholder,i=b.selected,j=b.value,k=b.onChange,l=b.onKeyDown,m=b.onFocus,n=b.onPaste,o=b.autoComplete,p=a.state.inputWidth,q=!e||0===i.length;return/*#__PURE__*/_jsx("input",{ref:function ref(b){a.inputRef=b},className:classnames({"typeahead__input form-control":e,"form-control":!e}),type:"text",name:f,id:"input-".concat(c),autoFocus:d,placeholder:q?h:"","aria-autocomplete":"list","aria-expanded":g,"aria-haspopup":"listbox","aria-controls":"menu-".concat(c),autoComplete:o,role:"combobox",value:j,style:e&&0<i.length?{width:p}:{},onChange:k,onKeyDown:l,onClick:m,onFocus:m,onPaste:n})}),a.state={inputWidth:DEFAULT_INPUT_MIN_WIDTH},a}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"componentDidMount",value:function componentDidMount(){var a=this.props.autoFocus;a&&this.inputRef.focus()}},{key:"componentDidUpdate",value:function componentDidUpdate(a){a.value!==this.props.value&&this.props.multiple&&this.recalculateWidth()}},{key:"render",value:function render(){var a=this,b=this.props,c=b.multiple,d=b.selected,e=b.value,f=b.maxHeight,g=b.renderChip;return c?/*#__PURE__*/_jsxs("div",{className:"form-control typeahead__input-container",style:f&&{maxHeight:f},onClick:function onClick(){a.inputRef.focus()},children:[/*#__PURE__*/_jsxs("div",{className:"typeahead__input-wrapper",children:[d&&d.map(function(a,b){return g(a,b)}),this.renderInput(),/*#__PURE__*/_jsx("div",{className:"typeahead__input-aligner"})]}),/*#__PURE__*/_jsx("div",{ref:function ref(b){a.sizerRef=b},className:"sizer form-control typeahead__input",children:e})]}):this.renderInput()}}]),b}(Component);export{TypeaheadInput as default};TypeaheadInput.propTypes={typeaheadId:PropTypes.string.isRequired,name:PropTypes.string.isRequired,autoFocus:PropTypes.bool,multiple:PropTypes.bool.isRequired,value:PropTypes.string.isRequired,selected:PropTypes.arrayOf(PropTypes.object),placeholder:PropTypes.string,optionsShown:PropTypes.bool,maxHeight:PropTypes.number,autoComplete:PropTypes.string.isRequired,onChange:PropTypes.func.isRequired,renderChip:PropTypes.func.isRequired,onKeyDown:PropTypes.func.isRequired,onFocus:PropTypes.func.isRequired,onPaste:PropTypes.func.isRequired},TypeaheadInput.defaultProps={autoFocus:!1,maxHeight:null,placeholder:"",optionsShown:!1,selected:[]};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/* eslint-disable jsx-a11y/anchor-is-valid */import
|
|
1
|
+
/* eslint-disable jsx-a11y/anchor-is-valid */import classNames from"classnames";import PropTypes from"prop-types";import hightlight from"../util/highlight";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=function(a){var b=a.option,c=a.selected,d=a.onClick,e=a.query,f=b.label,g=b.note,h=b.secondary;return/*#__PURE__*/_jsx("li",{role:"option","aria-selected":"false",className:classNames("typeahead__option tw-dropdown-item tw-dropdown-item--clickable",{"tw-dropdown-item--focused":c}),children:/*#__PURE__*/_jsxs("a",{className:"dropdown-item",href:"#",onClick:d,children:[/*#__PURE__*/_jsx("span",{children:hightlight(f,e)}),g&&/*#__PURE__*/_jsx("span",{className:"small m-l-1",children:g}),h&&/*#__PURE__*/_jsx("span",{className:"small text-ellipsis",children:h})]})})};Option.propTypes={option:PropTypes.shape({label:PropTypes.string.isRequired,note:PropTypes.string,secondary:PropTypes.string}).isRequired,query:PropTypes.string,selected:PropTypes.bool,onClick:PropTypes.func},Option.defaultProps={selected:!1,query:"",onClick:function onClick(){}};export default Option;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default function hightlight(a,b){if(a&&b){var c=a.toUpperCase().indexOf(b.trim().toUpperCase()),d=c+b.trim().length;if(-1!==c)return/*#__PURE__*/_jsxs(_Fragment,{children:[a.
|
|
1
|
+
import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default function hightlight(a,b){if(a&&b){var c=a.toUpperCase().indexOf(b.trim().toUpperCase()),d=c+b.trim().length;if(-1!==c)return/*#__PURE__*/_jsxs(_Fragment,{children:[a.slice(0,Math.max(0,c)),/*#__PURE__*/_jsx("strong",{children:a.slice(c,d)}),a.slice(Math.max(0,d))]})}return a}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _defineProperty from"@babel/runtime/helpers/defineProperty";var _UPLOAD_STEP_COMPONEN;import _regeneratorRuntime from"@babel/runtime/regenerator";function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import{Plus as PlusIcon}from"@transferwise/icons";import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{injectIntl}from"react-intl";import{Status}from"../common";import messages from"./Upload.messages";import{UploadImageStep,MediaUploadStep,ProcessingStep,CompleteStep}from"./steps";import{UploadStep}from"./uploadSteps";import{postData,asyncFileRead,isSizeValid,isTypeValid,getFileType}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var PROCESS_STATE=["error","success"],ANIMATION_FIX=10,MAX_SIZE_DEFAULT=5e6,UPLOAD_STEP_COMPONENTS=(_UPLOAD_STEP_COMPONEN={},_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.UPLOAD_IMAGE_STEP,UploadImageStep),_defineProperty(_UPLOAD_STEP_COMPONEN,UploadStep.MEDIA_UPLOAD_STEP,MediaUploadStep),_UPLOAD_STEP_COMPONEN),Upload=/*#__PURE__*/function(a){function b(a){var d;return _classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"onAnimationCompleted",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(b){var c,e,f,g,h,i,j;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:c=d.state,e=c.response,f=c.isProcessing,g=c.fileName,h=d.props.animationDelay,f&&b===Status.SUCCEEDED&&(i=d.props.onSuccess,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return i?i(e,g):{}})},h)),f&&b===Status.FAILED&&(j=d.props.onFailure,d.timeouts=setTimeout(function(){d.setState({isProcessing:!1,isComplete:!0},function(){return j?j(e):{}})},h));case 4:case"end":return a.stop();}},a)}));return function(){return a.apply(this,arguments)}}()),_defineProperty(_assertThisInitialized(d),"asyncPost",function(a){var b=d.props.httpOptions,c=b||{},e=c.fileInputName,f=void 0===e?a.name:e,g=c.data,h=void 0===g?{}:g,i=new FormData;return i.append(f,a),Object.keys(h).forEach(function(a){return i.append(a,h[a])}),postData(d.prepareHttpOptions(b),i)}),_defineProperty(_assertThisInitialized(d),"asyncResponse",function(a,b){d.timeouts=setTimeout(function(){d.setState({response:a,isError:b===PROCESS_STATE[0],isSuccess:b===PROCESS_STATE[1]})},ANIMATION_FIX)}),_defineProperty(_assertThisInitialized(d),"prepareHttpOptions",function(a){if(!a.url)throw new Error("You must supply a URL to post image data asynchronously");return a}),_defineProperty(_assertThisInitialized(d),"handleOnClear",function(a){a.preventDefault();var b=d.props.onCancel;b&&b(),d.reset()}),_defineProperty(_assertThisInitialized(d),"reset",function(){d.dragCounter=0,clearTimeout(d.timeouts),d.setState({isComplete:!1,isError:!1,isProcessing:!1,isSuccess:!1})}),_defineProperty(_assertThisInitialized(d),"showDataImage",function(a){var b=d.state.isImage;b&&d.setState({uploadedImage:a})}),_defineProperty(_assertThisInitialized(d),"fileDropped",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(b){var c,e,f,g,h,i,j,k,l;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:if(c=d.props,e=c.httpOptions,f=c.maxSize,g=c.onStart,h=c.usDisabled,i=c.usAccept,!h){a.next=3;break}return a.abrupt("return",!1);case 3:if(b){a.next=5;break}throw new Error("Could not retrieve file");case 5:return d.setState({fileName:b.name,isDroppable:!1,isProcessing:!0}),g&&g(b),j=null,a.prev=8,a.next=11,asyncFileRead(b);case 11:j=a.sent,a.next=17;break;case 14:a.prev=14,a.t0=a["catch"](8),d.asyncResponse(a.t0,PROCESS_STATE[0]);case 17:if(j){a.next=19;break}return a.abrupt("return",!1);case 19:if(d.setState({isImage:getFileType(b,j).includes("image")}),isTypeValid(b,i,j)){a.next=24;break}return k={status:415,statusText:"Unsupported Media Type"},d.asyncResponse(k,PROCESS_STATE[0]),a.abrupt("return",!1);case 24:if(isSizeValid(b,f)){a.next=28;break}return l={status:413,statusText:"Request Entity Too Large"},d.asyncResponse(l,PROCESS_STATE[0]),a.abrupt("return",!1);case 28:if(!e){a.next=32;break}return a.next=31,d.asyncPost(b).then(function(a){return d.asyncResponse(a,"success")}).then(function(){return d.showDataImage(j),!0}).catch(function(a){return d.asyncResponse(a,PROCESS_STATE[0]),!1});case 31:return a.abrupt("return",a.sent);case 32:return d.showDataImage(j),d.asyncResponse(j,"success"),a.abrupt("return",!0);case 35:case"end":return a.stop();}},a,null,[[8,14]])}));return function(){return a.apply(this,arguments)}}()),d.dragCounter=0,d.timeouts=null,d.state={fileName:"",isComplete:!1,isError:!1,isImage:!1,isProcessing:!1,isSuccess:!1,response:null,uploadedImage:null},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"getErrorMessage",value:function getErrorMessage(a){return 413===a?this.props.csTooLargeMessage||this.props.intl.formatMessage(messages.csTooLargeMessage):415===a?this.props.csWrongTypeMessage||this.props.intl.formatMessage(messages.csWrongTypeMessage):this.props.csFailureText||this.props.intl.formatMessage(messages.csFailureText)}},{key:"onDragLeave",value:function onDragLeave(a){a.preventDefault(),this.dragCounter-=1,0===this.dragCounter&&this.setState({isDroppable:!1})}},{key:"onDragEnter",value:function onDragEnter(a){a.preventDefault(),this.dragCounter+=1;var b=this.props.usDisabled;1!==this.dragCounter||b||this.setState({isDroppable:!0})}},{key:"onDrop",value:function onDrop(a){a.preventDefault(),this.reset(),a.dataTransfer&&a.dataTransfer.files&&a.dataTransfer.files[0]&&this.fileDropped(a.dataTransfer.files[0])}},{key:"render",value:function render(){var a=this,b=this.props,c=b.usDropMessage,d=b.usAccept,e=b.usButtonText,f=b.usDisabled,g=b.usHelpImage,h=b.usLabel,i=b.usPlaceholder,j=b.psButtonText,k=b.psProcessingText,l=b.csButtonText,m=b.csSuccessText,n=b.size,o=b.uploadStep,p=b.intl,q=this.state,r=q.response,s=q.fileName,t=q.isComplete,u=q.isDroppable,v=q.isError,w=q.isImage,x=q.isProcessing,y=q.isSuccess,z=q.uploadedImage,A=UPLOAD_STEP_COMPONENTS[o]||UploadImageStep;return/*#__PURE__*/_jsxs("div",{className:classNames({droppable:!0,"tw-droppable-sm droppable-sm":"sm"===n,"tw-droppable-md droppable-md":"md"===n||!n,"tw-droppable-lg droppable-lg":"lg"===n,"droppable-dropping":u,"droppable-processing":x,"droppable-complete":t}),onDragEnter:function onDragEnter(b){return a.onDragEnter(b)},onDragLeave:function onDragLeave(b){return a.onDragLeave(b)},onDrop:function onDrop(b){return a.onDrop(b)},onDragOver:function onDragOver(a){return a.preventDefault()},children:[!x&&!t&&/*#__PURE__*/_jsx(A,{fileDropped:function fileDropped(b){return a.fileDropped(b)},isComplete:t,usAccept:d,usButtonText:e||p.formatMessage(messages.usButtonText),usDisabled:f,usHelpImage:g,usLabel:h,usPlaceholder:i||p.formatMessage(messages.usPlaceholder)}),x&&/*#__PURE__*/_jsx(ProcessingStep,{isComplete:t,isError:v,isSuccess:y,psButtonText:j||p.formatMessage(messages.psButtonText),psProcessingText:k||p.formatMessage(messages.psProcessingText),onAnimationCompleted:function onAnimationCompleted(b){return a.onAnimationCompleted(b)},onClear:function onClear(b){return a.handleOnClear(b)}}),(y||v||t)&&/*#__PURE__*/_jsx(CompleteStep,{fileName:s,isComplete:t,isError:v,isImage:w,csButtonText:l||p.formatMessage(messages.csButtonText),csFailureText:this.getErrorMessage(null===r||void 0===r?void 0:r.status),csSuccessText:m||p.formatMessage(messages.csSuccessText),uploadedImage:z,onClear:function onClear(b){return a.handleOnClear(b)}}),!x&&/*#__PURE__*/_jsx("div",{className:"droppable-dropping-card droppable-card",children:/*#__PURE__*/_jsxs("div",{className:"droppable-card-content",children:[/*#__PURE__*/_jsx("div",{className:"circle circle-sm p-t-1 text-primary",children:/*#__PURE__*/_jsx(PlusIcon,{})}),/*#__PURE__*/_jsx("h4",{className:"m-t-3",children:c||p.formatMessage(messages.usDropMessage)})]})})]})}}]),b}(Component);/*
|
|
2
2
|
* This delay is required for the isError/isSuccess to be fired after isProcessing so the processIndicator, will be
|
|
3
3
|
* rendered first and then updated with the right status.
|
|
4
|
-
*/Upload.propTypes={animationDelay:PropTypes.number,csButtonText:PropTypes.string,csFailureText:PropTypes.string,csSuccessText:PropTypes.string,csTooLargeMessage:PropTypes.string,csWrongTypeMessage:PropTypes.string,httpOptions:PropTypes.shape({url:PropTypes.string.isRequired,method:PropTypes.oneOf(["POST","PUT","PATCH"]),fileInputName:PropTypes.string
|
|
5
|
-
data:PropTypes.object,// eslint-disable-next-line react/forbid-prop-types
|
|
6
|
-
headers:PropTypes.object}),maxSize:PropTypes.number,onCancel:PropTypes.func,onFailure:PropTypes.func,onStart:PropTypes.func,onSuccess:PropTypes.func,psButtonText:PropTypes.string,psProcessingText:PropTypes.string,size:PropTypes.oneOf(["sm","md","lg"]),/**
|
|
4
|
+
*/Upload.propTypes={animationDelay:PropTypes.number,csButtonText:PropTypes.string,csFailureText:PropTypes.string,csSuccessText:PropTypes.string,csTooLargeMessage:PropTypes.string,csWrongTypeMessage:PropTypes.string,httpOptions:PropTypes.shape({url:PropTypes.string.isRequired,method:PropTypes.oneOf(["POST","PUT","PATCH"]),fileInputName:PropTypes.string,data:PropTypes.object,headers:PropTypes.object}),maxSize:PropTypes.number,onCancel:PropTypes.func,onFailure:PropTypes.func,onStart:PropTypes.func,onSuccess:PropTypes.func,psButtonText:PropTypes.string,psProcessingText:PropTypes.string,size:PropTypes.oneOf(["sm","md","lg"]),/**
|
|
7
5
|
* You can provide multiple rules separated by comma, e.g.: "application/pdf,image/*".
|
|
8
6
|
* Using "*" will allow every file type to be uploaded.
|
|
9
|
-
|
|
7
|
+
*/usAccept:PropTypes.string,usButtonText:PropTypes.string,usDisabled:PropTypes.bool,usDropMessage:PropTypes.string,usHelpImage:PropTypes.node,usLabel:PropTypes.string,usPlaceholder:PropTypes.string,uploadStep:PropTypes.oneOf(["uploadImageStep","mediaUploadStep"])},Upload.defaultProps={animationDelay:700,csButtonText:void 0,csFailureText:void 0,csSuccessText:void 0,csTooLargeMessage:void 0,csWrongTypeMessage:void 0,httpOptions:null,maxSize:MAX_SIZE_DEFAULT,onCancel:null,onFailure:null,onStart:null,onSuccess:null,psButtonText:void 0,psProcessingText:void 0,size:"md",usAccept:"image/*",usButtonText:void 0,usDisabled:!1,usDropMessage:void 0,usHelpImage:"",usLabel:"",usPlaceholder:void 0,uploadStep:UploadStep.UPLOAD_IMAGE_STEP};// this export is necessary for react-to-typescript-definitions
|
|
10
8
|
// to be able to properly generate TS types, this is due to us wrapping this component in `injectIntl` before exporting
|
|
11
9
|
export{Upload};export default injectIntl(Upload);
|