@dnb/eufemia 9.16.3 → 9.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +50 -0
- package/assets/assets/icons/above_the_line.svg +1 -1
- package/assets/assets/icons/eufemia-icons-pdf-categorized.tgz +0 -0
- package/assets/assets/icons/eufemia-icons-pdf.tgz +0 -0
- package/assets/assets/icons/facebook.svg +3 -0
- package/assets/assets/icons/facebook_medium.svg +3 -0
- package/assets/assets/icons/fridge.svg +1 -1
- package/assets/assets/icons/information_circled.svg +2 -1
- package/assets/assets/icons/information_circled_medium.svg +2 -1
- package/assets/assets/icons/instagram.svg +5 -0
- package/assets/assets/icons/instagram_medium.svg +12 -0
- package/assets/assets/icons/linkedin.svg +3 -0
- package/assets/assets/icons/linkedin_medium.svg +3 -0
- package/assets/assets/icons/motorcycle_medium.svg +2 -2
- package/assets/assets/icons/paragraph.svg +1 -1
- package/assets/assets/icons/scooter_medium.svg +2 -2
- package/assets/assets/icons/tag.svg +4 -0
- package/assets/assets/icons/tag_medium.svg +4 -0
- package/assets/icons/above_the_line.svg +1 -1
- package/assets/icons/eufemia-icons-pdf-categorized.tgz +0 -0
- package/assets/icons/eufemia-icons-pdf.tgz +0 -0
- package/assets/icons/facebook.svg +3 -0
- package/assets/icons/facebook_medium.svg +3 -0
- package/assets/icons/fridge.svg +1 -1
- package/assets/icons/information_circled.svg +2 -1
- package/assets/icons/information_circled_medium.svg +2 -1
- package/assets/icons/instagram.svg +5 -0
- package/assets/icons/instagram_medium.svg +12 -0
- package/assets/icons/linkedin.svg +3 -0
- package/assets/icons/linkedin_medium.svg +3 -0
- package/assets/icons/motorcycle_medium.svg +2 -2
- package/assets/icons/paragraph.svg +1 -1
- package/assets/icons/scooter_medium.svg +2 -2
- package/assets/icons/tag.svg +4 -0
- package/assets/icons/tag_medium.svg +4 -0
- package/cjs/components/Tag.d.ts +14 -0
- package/cjs/components/Tag.js +52 -0
- package/cjs/components/accordion/Accordion.d.ts +7 -7
- package/cjs/components/autocomplete/Autocomplete.d.ts +13 -13
- package/cjs/components/autocomplete/style/dnb-autocomplete.css +0 -2
- package/cjs/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
- package/cjs/components/breadcrumb/Breadcrumb.js +5 -3
- package/cjs/components/breadcrumb/style/_breadcrumb.scss +7 -4
- package/cjs/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
- package/cjs/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
- package/cjs/components/button/Button.d.ts +7 -7
- package/cjs/components/button/Button.js +7 -5
- package/cjs/components/button/style/_button.scss +0 -4
- package/cjs/components/button/style/dnb-button.css +0 -2
- package/cjs/components/button/style/dnb-button.min.css +1 -1
- package/cjs/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
- package/cjs/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
- package/cjs/components/button/style/themes/dnb-button-theme-ui.css +4 -13
- package/cjs/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
- package/cjs/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
- package/cjs/components/checkbox/Checkbox.d.ts +3 -3
- package/cjs/components/date-picker/DatePicker.d.ts +14 -14
- package/cjs/components/date-picker/DatePickerAddon.d.ts +1 -1
- package/cjs/components/date-picker/DatePickerCalendar.d.ts +1 -1
- package/cjs/components/date-picker/DatePickerInput.d.ts +1 -1
- package/cjs/components/date-picker/style/dnb-date-picker.css +0 -6
- package/cjs/components/date-picker/style/dnb-date-picker.min.css +1 -1
- package/cjs/components/dropdown/Dropdown.d.ts +9 -9
- package/cjs/components/dropdown/style/dnb-dropdown.css +0 -2
- package/cjs/components/dropdown/style/dnb-dropdown.min.css +1 -1
- package/cjs/components/form-row/FormRow.d.ts +4 -4
- package/cjs/components/form-set/FormSet.d.ts +6 -6
- package/cjs/components/global-error/GlobalError.d.ts +1 -1
- package/cjs/components/global-error/style/dnb-global-error.css +0 -2
- package/cjs/components/global-error/style/dnb-global-error.min.css +1 -1
- package/cjs/components/global-status/GlobalStatus.d.ts +5 -5
- package/cjs/components/global-status/GlobalStatus.js +21 -73
- package/cjs/components/global-status/style/_global-status.scss +14 -12
- package/cjs/components/global-status/style/dnb-global-status.css +13 -17
- package/cjs/components/global-status/style/dnb-global-status.min.css +1 -1
- package/cjs/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
- package/cjs/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
- package/cjs/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
- package/cjs/components/heading/Heading.d.ts +2 -2
- package/cjs/components/heading/HeadingProvider.d.ts +2 -2
- package/cjs/components/help-button/HelpButton.d.ts +200 -0
- package/cjs/components/icon/Icon.d.ts +1 -1
- package/cjs/components/icon-primary/IconPrimary.d.ts +1 -1
- package/cjs/components/index.d.ts +2 -0
- package/cjs/components/index.js +8 -0
- package/cjs/components/input/Input.d.ts +9 -9
- package/cjs/components/input/style/dnb-input.css +0 -2
- package/cjs/components/input/style/dnb-input.min.css +1 -1
- package/cjs/components/input/style/themes/dnb-input-theme-ui.css +11 -2
- package/cjs/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
- package/cjs/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
- package/cjs/components/input-masked/InputMasked.d.ts +11 -11
- package/cjs/components/input-masked/InputMasked.js +6 -3
- package/cjs/components/input-masked/InputMaskedElement.js +1 -4
- package/cjs/components/input-masked/InputMaskedHooks.js +68 -54
- package/cjs/components/input-masked/InputMaskedUtils.js +17 -22
- package/cjs/components/input-masked/style/dnb-input-masked.css +0 -2
- package/cjs/components/input-masked/style/dnb-input-masked.min.css +1 -1
- package/cjs/components/lib.js +9 -0
- package/cjs/components/modal/Modal.js +158 -300
- package/cjs/components/modal/ModalContent.js +183 -272
- package/cjs/components/modal/ModalRoot.js +194 -0
- package/cjs/components/modal/components/CloseButton.js +125 -0
- package/cjs/components/modal/components/ModalHeader.js +124 -0
- package/cjs/components/modal/{ModalHeader.js → components/ModalHeaderBar.js} +50 -162
- package/cjs/components/modal/{ModalInner.js → components/ModalInner.js} +11 -19
- package/cjs/components/modal/helpers.js +80 -0
- package/cjs/components/modal/style/_modal-mixins.scss +4 -4
- package/cjs/components/modal/style/_modal.scss +13 -30
- package/cjs/components/modal/style/dnb-modal.css +27 -47
- package/cjs/components/modal/style/dnb-modal.min.css +1 -1
- package/cjs/components/modal/types.js +1 -0
- package/cjs/components/number-format/NumberFormat.d.ts +8 -8
- package/cjs/components/pagination/Pagination.d.ts +30 -30
- package/cjs/components/pagination/PaginationProvider.d.ts +2 -2
- package/cjs/components/pagination/style/dnb-pagination.css +0 -2
- package/cjs/components/pagination/style/dnb-pagination.min.css +1 -1
- package/cjs/components/radio/Radio.d.ts +4 -4
- package/cjs/components/radio/RadioGroup.d.ts +3 -3
- package/cjs/components/section/Section.d.ts +3 -2
- package/cjs/components/section/style/themes/dnb-section-theme-ui.css +77 -19
- package/cjs/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
- package/cjs/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
- package/cjs/components/skeleton/Skeleton.d.ts +2 -2
- package/cjs/components/slider/Slider.d.ts +4 -4
- package/cjs/components/slider/style/dnb-slider.css +0 -2
- package/cjs/components/slider/style/dnb-slider.min.css +1 -1
- package/cjs/components/step-indicator/StepIndicator.d.ts +6 -6
- package/cjs/components/step-indicator/StepIndicator.js +4 -98
- package/cjs/components/step-indicator/StepIndicatorContext.d.ts +2 -1
- package/cjs/components/step-indicator/StepIndicatorContext.js +221 -19
- package/cjs/components/step-indicator/StepIndicatorItem.d.ts +2 -2
- package/cjs/components/step-indicator/StepIndicatorItem.js +4 -6
- package/cjs/components/step-indicator/StepIndicatorModal.js +40 -49
- package/cjs/components/step-indicator/StepIndicatorProps.js +1 -1
- package/cjs/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
- package/cjs/components/step-indicator/StepIndicatorSidebar.js +57 -54
- package/cjs/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
- package/cjs/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
- package/cjs/components/step-indicator/style/_step-indicator.scss +17 -4
- package/cjs/components/step-indicator/style/dnb-step-indicator.css +14 -6
- package/cjs/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
- package/cjs/components/switch/Switch.d.ts +5 -5
- package/cjs/components/tabs/Tabs.d.ts +4 -4
- package/cjs/components/tabs/TabsContentWrapper.d.ts +1 -1
- package/cjs/components/tag/Tag.js +97 -0
- package/cjs/components/tag/index.d.ts +8 -0
- package/cjs/components/tag/index.js +52 -0
- package/cjs/components/tag/style/_tag.scss +26 -0
- package/cjs/components/tag/style/dnb-tag.css +109 -0
- package/cjs/components/tag/style/dnb-tag.min.css +1 -0
- package/cjs/components/tag/style/dnb-tag.scss +12 -0
- package/cjs/components/tag/style/index.d.ts +6 -0
- package/cjs/components/tag/style/index.js +3 -0
- package/cjs/components/tag/style.js +3 -0
- package/cjs/components/textarea/Textarea.d.ts +4 -4
- package/cjs/components/textarea/style/_textarea.scss +4 -0
- package/cjs/components/textarea/style/dnb-textarea.css +3 -0
- package/cjs/components/textarea/style/dnb-textarea.min.css +1 -1
- package/cjs/components/toggle-button/ToggleButton.d.ts +6 -6
- package/cjs/components/toggle-button/ToggleButton.js +6 -2
- package/cjs/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
- package/cjs/components/toggle-button/style/dnb-toggle-button.css +0 -2
- package/cjs/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
- package/cjs/components/tooltip/Tooltip.d.ts +5 -5
- package/cjs/components/tooltip/TooltipContainer.d.ts +3 -3
- package/cjs/components/tooltip/TooltipPortal.d.ts +1 -1
- package/cjs/components/tooltip/TooltipWithEvents.d.ts +1 -1
- package/cjs/fragments/scroll-view/ScrollView.js +7 -16
- package/cjs/icons/above_the_line.js +1 -1
- package/cjs/icons/facebook.js +35 -0
- package/cjs/icons/facebook_medium.js +35 -0
- package/cjs/icons/fridge.js +1 -1
- package/cjs/icons/icons-meta.json +24 -0
- package/cjs/icons/icons-pdf.lock +1 -1
- package/cjs/icons/icons-svg.lock +1 -1
- package/cjs/icons/index.d.ts +16 -0
- package/cjs/icons/index.js +64 -0
- package/cjs/icons/information_circled.js +11 -4
- package/cjs/icons/information_circled_medium.js +10 -4
- package/cjs/icons/instagram.js +47 -0
- package/cjs/icons/instagram_medium.js +54 -0
- package/cjs/icons/linkedin.js +32 -0
- package/cjs/icons/linkedin_medium.js +32 -0
- package/cjs/icons/motorcycle_medium.js +2 -2
- package/cjs/icons/paragraph.js +1 -1
- package/cjs/icons/scooter_medium.js +2 -2
- package/cjs/icons/secondary_icons.js +32 -0
- package/cjs/icons/secondary_icons_medium.js +32 -0
- package/cjs/icons/tag.js +41 -0
- package/cjs/icons/tag_medium.js +41 -0
- package/cjs/index.d.ts +2 -0
- package/cjs/index.js +8 -0
- package/cjs/shared/Context.js +2 -1
- package/cjs/shared/EventEmitter.js +6 -8
- package/cjs/shared/component-helper.js +108 -76
- package/cjs/shared/helpers.js +36 -11
- package/cjs/style/core/helper-classes/skip-link.scss +1 -1
- package/cjs/style/dnb-ui-components.css +107 -76
- package/cjs/style/dnb-ui-components.min.css +5 -5
- package/cjs/style/dnb-ui-components.scss +1 -0
- package/cjs/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
- package/cjs/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
- package/cjs/style/themes/theme-ui/dnb-theme-ui.css +94 -82
- package/cjs/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
- package/components/Tag.d.ts +14 -0
- package/components/Tag.js +3 -0
- package/components/accordion/Accordion.d.ts +7 -7
- package/components/autocomplete/Autocomplete.d.ts +13 -13
- package/components/autocomplete/style/dnb-autocomplete.css +0 -2
- package/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
- package/components/breadcrumb/Breadcrumb.js +5 -3
- package/components/breadcrumb/Breadcrumb.tsx +9 -0
- package/components/breadcrumb/style/_breadcrumb.scss +7 -4
- package/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
- package/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
- package/components/button/Button.d.ts +7 -7
- package/components/button/Button.js +7 -5
- package/components/button/style/_button.scss +0 -4
- package/components/button/style/dnb-button.css +0 -2
- package/components/button/style/dnb-button.min.css +1 -1
- package/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
- package/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
- package/components/button/style/themes/dnb-button-theme-ui.css +4 -13
- package/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
- package/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
- package/components/checkbox/Checkbox.d.ts +3 -3
- package/components/date-picker/DatePicker.d.ts +14 -14
- package/components/date-picker/DatePickerAddon.d.ts +1 -1
- package/components/date-picker/DatePickerCalendar.d.ts +1 -1
- package/components/date-picker/DatePickerInput.d.ts +1 -1
- package/components/date-picker/style/dnb-date-picker.css +0 -6
- package/components/date-picker/style/dnb-date-picker.min.css +1 -1
- package/components/dropdown/Dropdown.d.ts +9 -9
- package/components/dropdown/style/dnb-dropdown.css +0 -2
- package/components/dropdown/style/dnb-dropdown.min.css +1 -1
- package/components/form-row/FormRow.d.ts +4 -4
- package/components/form-set/FormSet.d.ts +6 -6
- package/components/global-error/GlobalError.d.ts +1 -1
- package/components/global-error/style/dnb-global-error.css +0 -2
- package/components/global-error/style/dnb-global-error.min.css +1 -1
- package/components/global-status/GlobalStatus.d.ts +5 -5
- package/components/global-status/GlobalStatus.js +18 -71
- package/components/global-status/style/_global-status.scss +14 -12
- package/components/global-status/style/dnb-global-status.css +13 -17
- package/components/global-status/style/dnb-global-status.min.css +1 -1
- package/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
- package/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
- package/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
- package/components/heading/Heading.d.ts +2 -2
- package/components/heading/HeadingProvider.d.ts +2 -2
- package/components/help-button/HelpButton.d.ts +200 -0
- package/components/icon/Icon.d.ts +1 -1
- package/components/index.d.ts +2 -0
- package/components/index.js +2 -1
- package/components/input/Input.d.ts +9 -9
- package/components/input/style/dnb-input.css +0 -2
- package/components/input/style/dnb-input.min.css +1 -1
- package/components/input/style/themes/dnb-input-theme-ui.css +11 -2
- package/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
- package/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
- package/components/input-masked/InputMasked.d.ts +11 -11
- package/components/input-masked/InputMasked.js +6 -4
- package/components/input-masked/InputMaskedElement.js +1 -4
- package/components/input-masked/InputMaskedHooks.js +66 -48
- package/components/input-masked/InputMaskedUtils.js +18 -23
- package/components/input-masked/style/dnb-input-masked.css +0 -2
- package/components/input-masked/style/dnb-input-masked.min.css +1 -1
- package/components/lib.js +3 -1
- package/components/modal/Modal.js +147 -279
- package/components/modal/Modal.tsx +524 -0
- package/components/modal/ModalContent.js +175 -253
- package/components/modal/ModalContent.tsx +515 -0
- package/components/modal/ModalContext.tsx +10 -0
- package/components/modal/ModalRoot.js +145 -0
- package/components/modal/ModalRoot.tsx +131 -0
- package/components/modal/components/CloseButton.js +72 -0
- package/components/modal/components/CloseButton.tsx +56 -0
- package/components/modal/components/ModalHeader.js +70 -0
- package/components/modal/components/ModalHeader.tsx +79 -0
- package/components/modal/components/ModalHeaderBar.js +122 -0
- package/components/modal/components/ModalHeaderBar.tsx +118 -0
- package/components/modal/{ModalInner.js → components/ModalInner.js} +11 -17
- package/components/modal/components/ModalInner.tsx +45 -0
- package/components/modal/helpers.js +64 -0
- package/components/modal/helpers.ts +63 -0
- package/components/modal/style/_modal-mixins.scss +4 -4
- package/components/modal/style/_modal.scss +13 -30
- package/components/modal/style/dnb-modal.css +27 -47
- package/components/modal/style/dnb-modal.min.css +1 -1
- package/components/modal/types.js +1 -0
- package/{cjs/components/modal/Modal.d.ts → components/modal/types.ts} +125 -179
- package/components/number-format/NumberFormat.d.ts +8 -8
- package/components/pagination/Pagination.d.ts +30 -30
- package/components/pagination/PaginationProvider.d.ts +2 -2
- package/components/pagination/style/dnb-pagination.css +0 -2
- package/components/pagination/style/dnb-pagination.min.css +1 -1
- package/components/radio/Radio.d.ts +4 -4
- package/components/radio/RadioGroup.d.ts +3 -3
- package/components/section/Section.d.ts +3 -1
- package/components/section/style/themes/dnb-section-theme-ui.css +77 -19
- package/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
- package/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
- package/components/skeleton/Skeleton.d.ts +2 -2
- package/components/slider/Slider.d.ts +4 -4
- package/components/slider/style/dnb-slider.css +0 -2
- package/components/slider/style/dnb-slider.min.css +1 -1
- package/components/step-indicator/StepIndicator.d.ts +6 -6
- package/components/step-indicator/StepIndicator.js +4 -91
- package/components/step-indicator/StepIndicatorContext.d.ts +2 -1
- package/components/step-indicator/StepIndicatorContext.js +196 -18
- package/components/step-indicator/StepIndicatorItem.d.ts +2 -2
- package/components/step-indicator/StepIndicatorItem.js +3 -5
- package/components/step-indicator/StepIndicatorModal.js +33 -32
- package/components/step-indicator/StepIndicatorProps.js +1 -1
- package/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
- package/components/step-indicator/StepIndicatorSidebar.js +54 -52
- package/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
- package/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
- package/components/step-indicator/style/_step-indicator.scss +17 -4
- package/components/step-indicator/style/dnb-step-indicator.css +14 -6
- package/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
- package/components/switch/Switch.d.ts +5 -5
- package/components/tabs/Tabs.d.ts +4 -4
- package/components/tabs/TabsContentWrapper.d.ts +1 -1
- package/components/tag/Tag.js +63 -0
- package/components/tag/Tag.tsx +95 -0
- package/components/tag/index.d.ts +8 -0
- package/components/tag/index.js +3 -0
- package/components/tag/style/_tag.scss +26 -0
- package/components/tag/style/dnb-tag.css +109 -0
- package/components/tag/style/dnb-tag.min.css +1 -0
- package/components/tag/style/dnb-tag.scss +12 -0
- package/components/tag/style/index.d.ts +6 -0
- package/components/tag/style/index.js +1 -0
- package/components/tag/style.js +1 -0
- package/components/textarea/Textarea.d.ts +4 -4
- package/components/textarea/style/_textarea.scss +4 -0
- package/components/textarea/style/dnb-textarea.css +3 -0
- package/components/textarea/style/dnb-textarea.min.css +1 -1
- package/components/toggle-button/ToggleButton.d.ts +6 -6
- package/components/toggle-button/ToggleButton.js +6 -2
- package/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
- package/components/toggle-button/style/dnb-toggle-button.css +0 -2
- package/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
- package/components/tooltip/Tooltip.d.ts +5 -5
- package/components/tooltip/TooltipContainer.d.ts +3 -3
- package/components/tooltip/TooltipPortal.d.ts +1 -1
- package/components/tooltip/TooltipWithEvents.d.ts +1 -1
- package/es/components/Tag.d.ts +14 -0
- package/es/components/Tag.js +3 -0
- package/es/components/accordion/Accordion.d.ts +7 -7
- package/es/components/autocomplete/Autocomplete.d.ts +13 -13
- package/es/components/autocomplete/style/dnb-autocomplete.css +0 -2
- package/es/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
- package/es/components/breadcrumb/Breadcrumb.js +5 -3
- package/es/components/breadcrumb/Breadcrumb.tsx +9 -0
- package/es/components/breadcrumb/style/_breadcrumb.scss +7 -4
- package/es/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
- package/es/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
- package/es/components/button/Button.d.ts +7 -7
- package/es/components/button/Button.js +8 -5
- package/es/components/button/style/_button.scss +0 -4
- package/es/components/button/style/dnb-button.css +0 -2
- package/es/components/button/style/dnb-button.min.css +1 -1
- package/es/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
- package/es/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
- package/es/components/button/style/themes/dnb-button-theme-ui.css +4 -13
- package/es/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
- package/es/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
- package/es/components/checkbox/Checkbox.d.ts +3 -3
- package/es/components/date-picker/DatePicker.d.ts +14 -14
- package/es/components/date-picker/DatePickerAddon.d.ts +1 -1
- package/es/components/date-picker/DatePickerCalendar.d.ts +1 -1
- package/es/components/date-picker/DatePickerInput.d.ts +1 -1
- package/es/components/date-picker/style/dnb-date-picker.css +0 -6
- package/es/components/date-picker/style/dnb-date-picker.min.css +1 -1
- package/es/components/dropdown/Dropdown.d.ts +9 -9
- package/es/components/dropdown/style/dnb-dropdown.css +0 -2
- package/es/components/dropdown/style/dnb-dropdown.min.css +1 -1
- package/es/components/form-row/FormRow.d.ts +4 -4
- package/es/components/form-set/FormSet.d.ts +6 -6
- package/es/components/global-error/GlobalError.d.ts +1 -1
- package/es/components/global-error/style/dnb-global-error.css +0 -2
- package/es/components/global-error/style/dnb-global-error.min.css +1 -1
- package/es/components/global-status/GlobalStatus.d.ts +5 -5
- package/es/components/global-status/GlobalStatus.js +18 -67
- package/es/components/global-status/style/_global-status.scss +14 -12
- package/es/components/global-status/style/dnb-global-status.css +13 -17
- package/es/components/global-status/style/dnb-global-status.min.css +1 -1
- package/es/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
- package/es/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
- package/es/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
- package/es/components/heading/Heading.d.ts +2 -2
- package/es/components/heading/HeadingProvider.d.ts +2 -2
- package/es/components/help-button/HelpButton.d.ts +200 -0
- package/es/components/icon/Icon.d.ts +1 -1
- package/es/components/icon-primary/IconPrimary.d.ts +1 -1
- package/es/components/index.d.ts +2 -0
- package/es/components/index.js +2 -1
- package/es/components/input/Input.d.ts +9 -9
- package/es/components/input/style/dnb-input.css +0 -2
- package/es/components/input/style/dnb-input.min.css +1 -1
- package/es/components/input/style/themes/dnb-input-theme-ui.css +11 -2
- package/es/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
- package/es/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
- package/es/components/input-masked/InputMasked.d.ts +11 -11
- package/es/components/input-masked/InputMasked.js +6 -4
- package/es/components/input-masked/InputMaskedElement.js +1 -4
- package/es/components/input-masked/InputMaskedHooks.js +50 -34
- package/es/components/input-masked/InputMaskedUtils.js +16 -21
- package/es/components/input-masked/style/dnb-input-masked.css +0 -2
- package/es/components/input-masked/style/dnb-input-masked.min.css +1 -1
- package/es/components/lib.js +3 -1
- package/es/components/modal/Modal.js +128 -252
- package/es/components/modal/Modal.tsx +524 -0
- package/es/components/modal/ModalContent.js +131 -211
- package/es/components/modal/ModalContent.tsx +515 -0
- package/es/components/modal/ModalContext.tsx +10 -0
- package/es/components/modal/ModalRoot.js +108 -0
- package/es/components/modal/ModalRoot.tsx +131 -0
- package/es/components/modal/components/CloseButton.js +41 -0
- package/es/components/modal/components/CloseButton.tsx +56 -0
- package/es/components/modal/components/ModalHeader.js +40 -0
- package/es/components/modal/components/ModalHeader.tsx +79 -0
- package/es/components/modal/components/ModalHeaderBar.js +88 -0
- package/es/components/modal/components/ModalHeaderBar.tsx +118 -0
- package/es/components/modal/{ModalInner.js → components/ModalInner.js} +8 -18
- package/es/components/modal/components/ModalInner.tsx +45 -0
- package/es/components/modal/helpers.js +60 -0
- package/es/components/modal/helpers.ts +63 -0
- package/es/components/modal/style/_modal-mixins.scss +4 -4
- package/es/components/modal/style/_modal.scss +13 -30
- package/es/components/modal/style/dnb-modal.css +27 -47
- package/es/components/modal/style/dnb-modal.min.css +1 -1
- package/es/components/modal/types.js +1 -0
- package/es/components/modal/{Modal.d.ts → types.ts} +125 -179
- package/es/components/number-format/NumberFormat.d.ts +8 -8
- package/es/components/pagination/Pagination.d.ts +30 -30
- package/es/components/pagination/PaginationProvider.d.ts +2 -2
- package/es/components/pagination/style/dnb-pagination.css +0 -2
- package/es/components/pagination/style/dnb-pagination.min.css +1 -1
- package/es/components/radio/Radio.d.ts +4 -4
- package/es/components/radio/RadioGroup.d.ts +3 -3
- package/es/components/section/Section.d.ts +3 -2
- package/es/components/section/style/themes/dnb-section-theme-ui.css +77 -19
- package/es/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
- package/es/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
- package/es/components/skeleton/Skeleton.d.ts +2 -2
- package/es/components/slider/Slider.d.ts +4 -4
- package/es/components/slider/style/dnb-slider.css +0 -2
- package/es/components/slider/style/dnb-slider.min.css +1 -1
- package/es/components/step-indicator/StepIndicator.d.ts +6 -6
- package/es/components/step-indicator/StepIndicator.js +3 -79
- package/es/components/step-indicator/StepIndicatorContext.d.ts +2 -1
- package/es/components/step-indicator/StepIndicatorContext.js +165 -17
- package/es/components/step-indicator/StepIndicatorItem.d.ts +2 -2
- package/es/components/step-indicator/StepIndicatorItem.js +2 -5
- package/es/components/step-indicator/StepIndicatorModal.js +31 -34
- package/es/components/step-indicator/StepIndicatorProps.js +1 -1
- package/es/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
- package/es/components/step-indicator/StepIndicatorSidebar.js +44 -46
- package/es/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
- package/es/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
- package/es/components/step-indicator/style/_step-indicator.scss +17 -4
- package/es/components/step-indicator/style/dnb-step-indicator.css +14 -6
- package/es/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
- package/es/components/switch/Switch.d.ts +5 -5
- package/es/components/tabs/Tabs.d.ts +4 -4
- package/es/components/tabs/TabsContentWrapper.d.ts +1 -1
- package/es/components/tag/Tag.js +58 -0
- package/es/components/tag/Tag.tsx +95 -0
- package/es/components/tag/index.d.ts +8 -0
- package/es/components/tag/index.js +3 -0
- package/es/components/tag/style/_tag.scss +26 -0
- package/es/components/tag/style/dnb-tag.css +109 -0
- package/es/components/tag/style/dnb-tag.min.css +1 -0
- package/es/components/tag/style/dnb-tag.scss +12 -0
- package/es/components/tag/style/index.d.ts +6 -0
- package/es/components/tag/style/index.js +1 -0
- package/es/components/tag/style.js +1 -0
- package/es/components/textarea/Textarea.d.ts +4 -4
- package/es/components/textarea/style/_textarea.scss +4 -0
- package/es/components/textarea/style/dnb-textarea.css +3 -0
- package/es/components/textarea/style/dnb-textarea.min.css +1 -1
- package/es/components/toggle-button/ToggleButton.d.ts +6 -6
- package/es/components/toggle-button/ToggleButton.js +6 -2
- package/es/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
- package/es/components/toggle-button/style/dnb-toggle-button.css +0 -2
- package/es/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
- package/es/components/tooltip/Tooltip.d.ts +5 -5
- package/es/components/tooltip/TooltipContainer.d.ts +3 -3
- package/es/components/tooltip/TooltipPortal.d.ts +1 -1
- package/es/components/tooltip/TooltipWithEvents.d.ts +1 -1
- package/es/fragments/scroll-view/ScrollView.js +7 -15
- package/es/fragments/scroll-view/ScrollView.tsx +92 -0
- package/es/icons/above_the_line.js +1 -1
- package/es/icons/facebook.js +23 -0
- package/es/icons/facebook_medium.js +23 -0
- package/es/icons/fridge.js +1 -1
- package/es/icons/icons-meta.json +24 -0
- package/es/icons/icons-pdf.lock +1 -1
- package/es/icons/icons-svg.lock +1 -1
- package/es/icons/index.d.ts +16 -0
- package/es/icons/index.js +9 -1
- package/es/icons/information_circled.js +11 -4
- package/es/icons/information_circled_medium.js +10 -4
- package/es/icons/instagram.js +35 -0
- package/es/icons/instagram_medium.js +42 -0
- package/es/icons/linkedin.js +20 -0
- package/es/icons/linkedin_medium.js +20 -0
- package/es/icons/motorcycle_medium.js +2 -2
- package/es/icons/paragraph.js +1 -1
- package/es/icons/scooter_medium.js +2 -2
- package/es/icons/secondary_icons.js +5 -1
- package/es/icons/secondary_icons_medium.js +5 -1
- package/es/icons/tag.js +29 -0
- package/es/icons/tag_medium.js +29 -0
- package/es/index.d.ts +2 -0
- package/es/index.js +2 -1
- package/es/shared/Context.js +2 -1
- package/es/shared/EventEmitter.js +5 -8
- package/es/shared/component-helper.js +58 -50
- package/es/shared/helpers.js +11 -2
- package/es/style/core/helper-classes/skip-link.scss +1 -1
- package/es/style/dnb-ui-components.css +107 -76
- package/es/style/dnb-ui-components.min.css +5 -5
- package/es/style/dnb-ui-components.scss +1 -0
- package/es/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
- package/es/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
- package/es/style/themes/theme-ui/dnb-theme-ui.css +94 -82
- package/es/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
- package/esm/components/Tag.d.ts +14 -0
- package/esm/components/Tag.js +3 -0
- package/esm/components/accordion/Accordion.d.ts +7 -7
- package/esm/components/autocomplete/Autocomplete.d.ts +13 -13
- package/esm/components/autocomplete/style/dnb-autocomplete.css +0 -2
- package/esm/components/autocomplete/style/dnb-autocomplete.min.css +1 -1
- package/esm/components/breadcrumb/Breadcrumb.js +5 -3
- package/esm/components/breadcrumb/Breadcrumb.tsx +9 -0
- package/esm/components/breadcrumb/style/_breadcrumb.scss +7 -4
- package/esm/components/breadcrumb/style/dnb-breadcrumb.css +10 -8
- package/esm/components/breadcrumb/style/dnb-breadcrumb.min.css +1 -1
- package/esm/components/button/Button.d.ts +7 -7
- package/esm/components/button/Button.js +7 -5
- package/esm/components/button/style/_button.scss +0 -4
- package/esm/components/button/style/dnb-button.css +0 -2
- package/esm/components/button/style/dnb-button.min.css +1 -1
- package/esm/components/button/style/themes/dnb-button-theme-open-banking.css +4 -13
- package/esm/components/button/style/themes/dnb-button-theme-open-banking.min.css +1 -1
- package/esm/components/button/style/themes/dnb-button-theme-ui.css +4 -13
- package/esm/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
- package/esm/components/button/style/themes/dnb-button-theme-ui.scss +5 -18
- package/esm/components/checkbox/Checkbox.d.ts +3 -3
- package/esm/components/date-picker/DatePicker.d.ts +14 -14
- package/esm/components/date-picker/DatePickerAddon.d.ts +1 -1
- package/esm/components/date-picker/DatePickerCalendar.d.ts +1 -1
- package/esm/components/date-picker/DatePickerInput.d.ts +1 -1
- package/esm/components/date-picker/style/dnb-date-picker.css +0 -6
- package/esm/components/date-picker/style/dnb-date-picker.min.css +1 -1
- package/esm/components/dropdown/Dropdown.d.ts +9 -9
- package/esm/components/dropdown/style/dnb-dropdown.css +0 -2
- package/esm/components/dropdown/style/dnb-dropdown.min.css +1 -1
- package/esm/components/form-row/FormRow.d.ts +4 -4
- package/esm/components/form-set/FormSet.d.ts +6 -6
- package/esm/components/global-error/GlobalError.d.ts +1 -1
- package/esm/components/global-error/style/dnb-global-error.css +0 -2
- package/esm/components/global-error/style/dnb-global-error.min.css +1 -1
- package/esm/components/global-status/GlobalStatus.d.ts +5 -5
- package/esm/components/global-status/GlobalStatus.js +18 -71
- package/esm/components/global-status/style/_global-status.scss +14 -12
- package/esm/components/global-status/style/dnb-global-status.css +13 -17
- package/esm/components/global-status/style/dnb-global-status.min.css +1 -1
- package/esm/components/global-status/style/themes/dnb-global-status-theme-ui.css +2 -48
- package/esm/components/global-status/style/themes/dnb-global-status-theme-ui.min.css +1 -1
- package/esm/components/global-status/style/themes/dnb-global-status-theme-ui.scss +2 -36
- package/esm/components/heading/Heading.d.ts +2 -2
- package/esm/components/heading/HeadingProvider.d.ts +2 -2
- package/esm/components/help-button/HelpButton.d.ts +200 -0
- package/esm/components/icon/Icon.d.ts +1 -1
- package/esm/components/index.d.ts +2 -0
- package/esm/components/index.js +2 -1
- package/esm/components/input/Input.d.ts +9 -9
- package/esm/components/input/style/dnb-input.css +0 -2
- package/esm/components/input/style/dnb-input.min.css +1 -1
- package/esm/components/input/style/themes/dnb-input-theme-ui.css +11 -2
- package/esm/components/input/style/themes/dnb-input-theme-ui.min.css +1 -1
- package/esm/components/input/style/themes/dnb-input-theme-ui.scss +4 -1
- package/esm/components/input-masked/InputMasked.d.ts +11 -11
- package/esm/components/input-masked/InputMasked.js +6 -4
- package/esm/components/input-masked/InputMaskedElement.js +1 -4
- package/esm/components/input-masked/InputMaskedHooks.js +66 -48
- package/esm/components/input-masked/InputMaskedUtils.js +18 -23
- package/esm/components/input-masked/style/dnb-input-masked.css +0 -2
- package/esm/components/input-masked/style/dnb-input-masked.min.css +1 -1
- package/esm/components/lib.js +3 -1
- package/esm/components/modal/Modal.js +147 -279
- package/esm/components/modal/Modal.tsx +524 -0
- package/esm/components/modal/ModalContent.js +175 -253
- package/esm/components/modal/ModalContent.tsx +515 -0
- package/esm/components/modal/ModalContext.tsx +10 -0
- package/esm/components/modal/ModalRoot.js +145 -0
- package/esm/components/modal/ModalRoot.tsx +131 -0
- package/esm/components/modal/components/CloseButton.js +72 -0
- package/esm/components/modal/components/CloseButton.tsx +56 -0
- package/esm/components/modal/components/ModalHeader.js +70 -0
- package/esm/components/modal/components/ModalHeader.tsx +79 -0
- package/esm/components/modal/components/ModalHeaderBar.js +122 -0
- package/esm/components/modal/components/ModalHeaderBar.tsx +118 -0
- package/esm/components/modal/{ModalInner.js → components/ModalInner.js} +11 -17
- package/esm/components/modal/components/ModalInner.tsx +45 -0
- package/esm/components/modal/helpers.js +64 -0
- package/esm/components/modal/helpers.ts +63 -0
- package/esm/components/modal/style/_modal-mixins.scss +4 -4
- package/esm/components/modal/style/_modal.scss +13 -30
- package/esm/components/modal/style/dnb-modal.css +27 -47
- package/esm/components/modal/style/dnb-modal.min.css +1 -1
- package/esm/components/modal/types.js +1 -0
- package/esm/components/modal/{Modal.d.ts → types.ts} +125 -179
- package/esm/components/number-format/NumberFormat.d.ts +8 -8
- package/esm/components/pagination/Pagination.d.ts +30 -30
- package/esm/components/pagination/PaginationProvider.d.ts +2 -2
- package/esm/components/pagination/style/dnb-pagination.css +0 -2
- package/esm/components/pagination/style/dnb-pagination.min.css +1 -1
- package/esm/components/radio/Radio.d.ts +4 -4
- package/esm/components/radio/RadioGroup.d.ts +3 -3
- package/esm/components/section/Section.d.ts +3 -1
- package/esm/components/section/style/themes/dnb-section-theme-ui.css +77 -19
- package/esm/components/section/style/themes/dnb-section-theme-ui.min.css +1 -1
- package/esm/components/section/style/themes/dnb-section-theme-ui.scss +15 -2
- package/esm/components/skeleton/Skeleton.d.ts +2 -2
- package/esm/components/slider/Slider.d.ts +4 -4
- package/esm/components/slider/style/dnb-slider.css +0 -2
- package/esm/components/slider/style/dnb-slider.min.css +1 -1
- package/esm/components/step-indicator/StepIndicator.d.ts +6 -6
- package/esm/components/step-indicator/StepIndicator.js +4 -91
- package/esm/components/step-indicator/StepIndicatorContext.d.ts +2 -1
- package/esm/components/step-indicator/StepIndicatorContext.js +196 -18
- package/esm/components/step-indicator/StepIndicatorItem.d.ts +2 -2
- package/esm/components/step-indicator/StepIndicatorItem.js +3 -5
- package/esm/components/step-indicator/StepIndicatorModal.js +33 -32
- package/esm/components/step-indicator/StepIndicatorProps.js +1 -1
- package/esm/components/step-indicator/StepIndicatorSidebar.d.ts +40 -1
- package/esm/components/step-indicator/StepIndicatorSidebar.js +54 -52
- package/esm/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
- package/esm/components/step-indicator/StepIndicatorTriggerButton.js +1 -1
- package/esm/components/step-indicator/style/_step-indicator.scss +17 -4
- package/esm/components/step-indicator/style/dnb-step-indicator.css +14 -6
- package/esm/components/step-indicator/style/dnb-step-indicator.min.css +1 -1
- package/esm/components/switch/Switch.d.ts +5 -5
- package/esm/components/tabs/Tabs.d.ts +4 -4
- package/esm/components/tabs/TabsContentWrapper.d.ts +1 -1
- package/esm/components/tag/Tag.js +63 -0
- package/esm/components/tag/Tag.tsx +95 -0
- package/esm/components/tag/index.d.ts +8 -0
- package/esm/components/tag/index.js +3 -0
- package/esm/components/tag/style/_tag.scss +26 -0
- package/esm/components/tag/style/dnb-tag.css +109 -0
- package/esm/components/tag/style/dnb-tag.min.css +1 -0
- package/esm/components/tag/style/dnb-tag.scss +12 -0
- package/esm/components/tag/style/index.d.ts +6 -0
- package/esm/components/tag/style/index.js +1 -0
- package/esm/components/tag/style.js +1 -0
- package/esm/components/textarea/Textarea.d.ts +4 -4
- package/esm/components/textarea/style/_textarea.scss +4 -0
- package/esm/components/textarea/style/dnb-textarea.css +3 -0
- package/esm/components/textarea/style/dnb-textarea.min.css +1 -1
- package/esm/components/toggle-button/ToggleButton.d.ts +6 -6
- package/esm/components/toggle-button/ToggleButton.js +6 -2
- package/esm/components/toggle-button/ToggleButtonGroup.d.ts +3 -3
- package/esm/components/toggle-button/style/dnb-toggle-button.css +0 -2
- package/esm/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
- package/esm/components/tooltip/Tooltip.d.ts +5 -5
- package/esm/components/tooltip/TooltipContainer.d.ts +3 -3
- package/esm/components/tooltip/TooltipPortal.d.ts +1 -1
- package/esm/components/tooltip/TooltipWithEvents.d.ts +1 -1
- package/esm/dnb-ui-basis.min.mjs +2 -2
- package/esm/dnb-ui-components.min.mjs +3 -3
- package/esm/dnb-ui-elements.min.mjs +4 -4
- package/esm/dnb-ui-extensions.min.mjs +4 -4
- package/esm/dnb-ui-lib.min.mjs +4 -4
- package/esm/dnb-ui-web-components.min.mjs +4 -4
- package/esm/fragments/scroll-view/ScrollView.js +10 -16
- package/esm/fragments/scroll-view/ScrollView.tsx +92 -0
- package/esm/icons/above_the_line.js +1 -1
- package/esm/icons/facebook.js +23 -0
- package/esm/icons/facebook_medium.js +23 -0
- package/esm/icons/fridge.js +1 -1
- package/esm/icons/icons-meta.json +24 -0
- package/esm/icons/icons-pdf.lock +1 -1
- package/esm/icons/icons-svg.lock +1 -1
- package/esm/icons/index.d.ts +16 -0
- package/esm/icons/index.js +9 -1
- package/esm/icons/information_circled.js +11 -4
- package/esm/icons/information_circled_medium.js +10 -4
- package/esm/icons/instagram.js +35 -0
- package/esm/icons/instagram_medium.js +42 -0
- package/esm/icons/linkedin.js +20 -0
- package/esm/icons/linkedin_medium.js +20 -0
- package/esm/icons/motorcycle_medium.js +2 -2
- package/esm/icons/paragraph.js +1 -1
- package/esm/icons/scooter_medium.js +2 -2
- package/esm/icons/secondary_icons.js +5 -1
- package/esm/icons/secondary_icons_medium.js +5 -1
- package/esm/icons/tag.js +29 -0
- package/esm/icons/tag_medium.js +29 -0
- package/esm/index.d.ts +2 -0
- package/esm/index.js +2 -1
- package/esm/shared/Context.js +2 -1
- package/esm/shared/EventEmitter.js +6 -8
- package/esm/shared/component-helper.js +94 -59
- package/esm/shared/helpers.js +19 -2
- package/esm/style/core/helper-classes/skip-link.scss +1 -1
- package/esm/style/dnb-ui-components.css +107 -76
- package/esm/style/dnb-ui-components.min.css +5 -5
- package/esm/style/dnb-ui-components.scss +1 -0
- package/esm/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
- package/esm/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
- package/esm/style/themes/theme-ui/dnb-theme-ui.css +94 -82
- package/esm/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
- package/fragments/scroll-view/ScrollView.js +10 -16
- package/fragments/scroll-view/ScrollView.tsx +92 -0
- package/icons/above_the_line.js +1 -1
- package/icons/facebook.js +23 -0
- package/icons/facebook_medium.js +23 -0
- package/icons/fridge.js +1 -1
- package/icons/icons-meta.json +24 -0
- package/icons/icons-pdf.lock +1 -1
- package/icons/icons-svg.lock +1 -1
- package/icons/index.d.ts +16 -0
- package/icons/index.js +9 -1
- package/icons/information_circled.js +11 -4
- package/icons/information_circled_medium.js +10 -4
- package/icons/instagram.js +35 -0
- package/icons/instagram_medium.js +42 -0
- package/icons/linkedin.js +20 -0
- package/icons/linkedin_medium.js +20 -0
- package/icons/motorcycle_medium.js +2 -2
- package/icons/paragraph.js +1 -1
- package/icons/scooter_medium.js +2 -2
- package/icons/secondary_icons.js +5 -1
- package/icons/secondary_icons_medium.js +5 -1
- package/icons/tag.js +29 -0
- package/icons/tag_medium.js +29 -0
- package/index.d.ts +2 -0
- package/index.js +2 -1
- package/package.json +1 -1
- package/shared/Context.js +2 -1
- package/shared/EventEmitter.js +6 -8
- package/shared/component-helper.js +94 -59
- package/shared/helpers.js +19 -2
- package/style/core/helper-classes/skip-link.scss +1 -1
- package/style/dnb-ui-components.css +107 -76
- package/style/dnb-ui-components.min.css +5 -5
- package/style/dnb-ui-components.scss +1 -0
- package/style/themes/theme-open-banking/dnb-theme-open-banking.css +98 -95
- package/style/themes/theme-open-banking/dnb-theme-open-banking.min.css +3 -3
- package/style/themes/theme-ui/dnb-theme-ui.css +94 -82
- package/style/themes/theme-ui/dnb-theme-ui.min.css +3 -3
- package/umd/dnb-ui-basis.min.js +3 -3
- package/umd/dnb-ui-components.min.js +4 -4
- package/umd/dnb-ui-elements.min.js +5 -5
- package/umd/dnb-ui-extensions.min.js +5 -5
- package/umd/dnb-ui-lib.min.js +5 -5
- package/umd/dnb-ui-web-components.min.js +5 -5
- package/cjs/components/modal/ModalContent.d.ts +0 -168
- package/cjs/components/modal/ModalHeader.d.ts +0 -73
- package/cjs/components/modal/ModalInner.d.ts +0 -20
- package/cjs/fragments/scroll-view/ScrollView.d.ts +0 -1
- package/components/modal/Modal.d.ts +0 -325
- package/components/modal/ModalContent.d.ts +0 -168
- package/components/modal/ModalHeader.d.ts +0 -73
- package/components/modal/ModalHeader.js +0 -224
- package/components/modal/ModalInner.d.ts +0 -20
- package/es/components/modal/ModalContent.d.ts +0 -168
- package/es/components/modal/ModalHeader.d.ts +0 -73
- package/es/components/modal/ModalHeader.js +0 -166
- package/es/components/modal/ModalInner.d.ts +0 -20
- package/es/fragments/scroll-view/ScrollView.d.ts +0 -1
- package/esm/components/modal/ModalContent.d.ts +0 -168
- package/esm/components/modal/ModalHeader.d.ts +0 -73
- package/esm/components/modal/ModalHeader.js +0 -224
- package/esm/components/modal/ModalInner.d.ts +0 -20
- package/esm/fragments/scroll-view/ScrollView.d.ts +0 -1
- package/fragments/scroll-view/ScrollView.d.ts +0 -1
|
@@ -13,8 +13,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
|
13
13
|
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
|
14
14
|
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
15
15
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
16
|
-
var _excluded = ["root_id", "content_id", "
|
|
17
|
-
_excluded2 = ["children", "direct_dom_return"];
|
|
16
|
+
var _excluded = ["root_id", "content_id", "disabled", "spacing", "labelled_by", "focus_selector", "header_content", "bar_content", "id", "open_state", "open_delay", "trigger", "trigger_attributes", "trigger_hidden", "trigger_disabled", "trigger_variant", "trigger_text", "trigger_title", "trigger_size", "trigger_icon", "trigger_icon_position", "trigger_class"];
|
|
18
17
|
|
|
19
18
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
20
19
|
|
|
@@ -24,30 +23,25 @@ import "core-js/modules/es.parse-float.js";
|
|
|
24
23
|
import "core-js/modules/es.object.to-string.js";
|
|
25
24
|
import "core-js/modules/web.dom-collections.for-each.js";
|
|
26
25
|
import "core-js/modules/es.object.freeze.js";
|
|
27
|
-
import "core-js/modules/es.array.includes.js";
|
|
28
|
-
import "core-js/modules/es.string.includes.js";
|
|
29
|
-
import "core-js/modules/es.regexp.exec.js";
|
|
30
|
-
import "core-js/modules/es.string.replace.js";
|
|
31
|
-
import "core-js/modules/es.array.concat.js";
|
|
32
26
|
|
|
33
27
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
34
28
|
|
|
35
29
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
36
30
|
|
|
37
31
|
import React from 'react';
|
|
38
|
-
import ReactDOM from 'react-dom';
|
|
39
|
-
import PropTypes from 'prop-types';
|
|
40
32
|
import classnames from 'classnames';
|
|
41
33
|
import { SuffixContext } from '../../shared/helpers/Suffix';
|
|
42
34
|
import Context from '../../shared/Context';
|
|
43
35
|
import { warn, isTrue, makeUniqueId, extendPropsWithContext, registerElement, processChildren, dispatchCustomElementEvent } from '../../shared/component-helper';
|
|
44
|
-
import {
|
|
45
|
-
import { buttonVariantPropType } from '../button/Button';
|
|
36
|
+
import { createSpacingClasses } from '../space/SpacingHelper';
|
|
46
37
|
import HelpButtonInstance from '../help-button/HelpButtonInstance';
|
|
47
|
-
import
|
|
48
|
-
import
|
|
49
|
-
import
|
|
50
|
-
import
|
|
38
|
+
import { getListOfModalRoots, getModalRoot } from './helpers';
|
|
39
|
+
import ModalInner from './components/ModalInner';
|
|
40
|
+
import ModalHeader from './components/ModalHeader';
|
|
41
|
+
import ModalHeaderBar from './components/ModalHeaderBar';
|
|
42
|
+
import CloseButton from './components/CloseButton';
|
|
43
|
+
import ModalRoot from './ModalRoot';
|
|
44
|
+
export var ANIMATION_DURATION = 300;
|
|
51
45
|
|
|
52
46
|
var Modal = function (_React$PureComponent) {
|
|
53
47
|
_inherits(Modal, _React$PureComponent);
|
|
@@ -61,6 +55,24 @@ var Modal = function (_React$PureComponent) {
|
|
|
61
55
|
|
|
62
56
|
_this = _super.call(this, props);
|
|
63
57
|
|
|
58
|
+
_defineProperty(_assertThisInitialized(_this), "_id", void 0);
|
|
59
|
+
|
|
60
|
+
_defineProperty(_assertThisInitialized(_this), "_triggerRef", void 0);
|
|
61
|
+
|
|
62
|
+
_defineProperty(_assertThisInitialized(_this), "_onUnmount", void 0);
|
|
63
|
+
|
|
64
|
+
_defineProperty(_assertThisInitialized(_this), "_openTimeout", void 0);
|
|
65
|
+
|
|
66
|
+
_defineProperty(_assertThisInitialized(_this), "_closeTimeout", void 0);
|
|
67
|
+
|
|
68
|
+
_defineProperty(_assertThisInitialized(_this), "_sideEffectsTimeout", void 0);
|
|
69
|
+
|
|
70
|
+
_defineProperty(_assertThisInitialized(_this), "_tryToOpenTimeout", void 0);
|
|
71
|
+
|
|
72
|
+
_defineProperty(_assertThisInitialized(_this), "activeElement", void 0);
|
|
73
|
+
|
|
74
|
+
_defineProperty(_assertThisInitialized(_this), "isInTransition", void 0);
|
|
75
|
+
|
|
64
76
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
65
77
|
hide: false,
|
|
66
78
|
modalActive: false
|
|
@@ -75,6 +87,12 @@ var Modal = function (_React$PureComponent) {
|
|
|
75
87
|
}
|
|
76
88
|
|
|
77
89
|
var toggleNow = function toggleNow() {
|
|
90
|
+
var _this$props = _this.props,
|
|
91
|
+
_this$props$animation = _this$props.animation_duration,
|
|
92
|
+
animation_duration = _this$props$animation === void 0 ? ANIMATION_DURATION : _this$props$animation,
|
|
93
|
+
_this$props$no_animat = _this$props.no_animation,
|
|
94
|
+
no_animation = _this$props$no_animat === void 0 ? false : _this$props$no_animat;
|
|
95
|
+
var timeoutDuration = typeof animation_duration === 'string' ? parseFloat(animation_duration) : animation_duration;
|
|
78
96
|
var modalActive = typeof showModal === 'boolean' ? showModal : !_this.state.modalActive;
|
|
79
97
|
_this.isInTransition = true;
|
|
80
98
|
|
|
@@ -89,29 +107,32 @@ var Modal = function (_React$PureComponent) {
|
|
|
89
107
|
});
|
|
90
108
|
};
|
|
91
109
|
|
|
92
|
-
if (modalActive === false && !isTrue(
|
|
110
|
+
if (modalActive === false && !isTrue(no_animation)) {
|
|
93
111
|
_this.setState({
|
|
94
112
|
hide: true
|
|
95
113
|
});
|
|
96
114
|
|
|
97
|
-
|
|
98
|
-
_this._closeTimeout = setTimeout(doItNow, parseFloat(_this.props.animation_duration));
|
|
115
|
+
_this._closeTimeout = setTimeout(doItNow, timeoutDuration);
|
|
99
116
|
} else {
|
|
100
117
|
doItNow();
|
|
101
118
|
}
|
|
102
119
|
};
|
|
103
120
|
|
|
104
121
|
var waitBeforeOpen = function waitBeforeOpen() {
|
|
105
|
-
var
|
|
122
|
+
var _this$props2 = _this.props,
|
|
123
|
+
open_delay = _this$props2.open_delay,
|
|
124
|
+
no_animation = _this$props2.no_animation;
|
|
125
|
+
var delay = typeof open_delay === 'string' ? parseFloat(open_delay) : open_delay;
|
|
106
126
|
|
|
107
|
-
if (delay > 0 && !isTrue(
|
|
108
|
-
clearTimeout(_this._openTimeout);
|
|
127
|
+
if (delay > 0 && !isTrue(no_animation)) {
|
|
109
128
|
_this._openTimeout = setTimeout(toggleNow, delay);
|
|
110
129
|
} else {
|
|
111
130
|
toggleNow();
|
|
112
131
|
}
|
|
113
132
|
};
|
|
114
133
|
|
|
134
|
+
clearTimeout(_this._closeTimeout);
|
|
135
|
+
clearTimeout(_this._openTimeout);
|
|
115
136
|
var open_modal = _this.props.open_modal;
|
|
116
137
|
|
|
117
138
|
if (typeof open_modal === 'function') {
|
|
@@ -127,10 +148,11 @@ var Modal = function (_React$PureComponent) {
|
|
|
127
148
|
|
|
128
149
|
_defineProperty(_assertThisInitialized(_this), "handleSideEffects", function () {
|
|
129
150
|
var modalActive = _this.state.modalActive;
|
|
151
|
+
var close_modal = _this.props.close_modal;
|
|
130
152
|
|
|
131
153
|
if (modalActive) {
|
|
132
|
-
if (typeof
|
|
133
|
-
var fn =
|
|
154
|
+
if (typeof close_modal === 'function') {
|
|
155
|
+
var fn = close_modal(function () {
|
|
134
156
|
_this.toggleOpenClose(null, false);
|
|
135
157
|
}, _assertThisInitialized(_this));
|
|
136
158
|
|
|
@@ -147,7 +169,7 @@ var Modal = function (_React$PureComponent) {
|
|
|
147
169
|
});
|
|
148
170
|
}
|
|
149
171
|
|
|
150
|
-
if ((_this.props.open_state === 'opened' || _this.props.open_state === true) && _this.activeElement) {
|
|
172
|
+
if ((_this.props.open_state === 'opened' || _this.props.open_state === true) && _this.activeElement && _this.activeElement instanceof HTMLElement) {
|
|
151
173
|
try {
|
|
152
174
|
_this.activeElement.focus({
|
|
153
175
|
preventScroll: true
|
|
@@ -157,13 +179,7 @@ var Modal = function (_React$PureComponent) {
|
|
|
157
179
|
} catch (e) {}
|
|
158
180
|
}
|
|
159
181
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
if (last) {
|
|
163
|
-
_this.setActiveState(last._id);
|
|
164
|
-
} else if (getListOfModalRoots().length <= 1) {
|
|
165
|
-
_this.setActiveState(false);
|
|
166
|
-
}
|
|
182
|
+
_this.removeActiveState();
|
|
167
183
|
}
|
|
168
184
|
});
|
|
169
185
|
|
|
@@ -176,9 +192,11 @@ var Modal = function (_React$PureComponent) {
|
|
|
176
192
|
ifIsLatest: true
|
|
177
193
|
},
|
|
178
194
|
ifIsLatest = _ref.ifIsLatest,
|
|
179
|
-
triggeredBy = _ref.triggeredBy
|
|
195
|
+
_ref$triggeredBy = _ref.triggeredBy,
|
|
196
|
+
triggeredBy = _ref$triggeredBy === void 0 ? null : _ref$triggeredBy;
|
|
180
197
|
|
|
181
|
-
var
|
|
198
|
+
var _this$props$prevent_c = _this.props.prevent_close,
|
|
199
|
+
prevent_close = _this$props$prevent_c === void 0 ? false : _this$props$prevent_c;
|
|
182
200
|
|
|
183
201
|
if (isTrue(prevent_close)) {
|
|
184
202
|
var id = _this._id;
|
|
@@ -195,7 +213,7 @@ var Modal = function (_React$PureComponent) {
|
|
|
195
213
|
var list = getListOfModalRoots();
|
|
196
214
|
|
|
197
215
|
if (list.length > 1) {
|
|
198
|
-
var last =
|
|
216
|
+
var last = getModalRoot(-1);
|
|
199
217
|
|
|
200
218
|
if (last !== _assertThisInitialized(_this)) {
|
|
201
219
|
return;
|
|
@@ -207,7 +225,7 @@ var Modal = function (_React$PureComponent) {
|
|
|
207
225
|
}
|
|
208
226
|
});
|
|
209
227
|
|
|
210
|
-
_this._id = props.id || makeUniqueId();
|
|
228
|
+
_this._id = props.id || makeUniqueId('modal-');
|
|
211
229
|
_this._triggerRef = React.createRef();
|
|
212
230
|
_this._onUnmount = [];
|
|
213
231
|
return _this;
|
|
@@ -221,16 +239,15 @@ var Modal = function (_React$PureComponent) {
|
|
|
221
239
|
}, {
|
|
222
240
|
key: "componentWillUnmount",
|
|
223
241
|
value: function componentWillUnmount() {
|
|
242
|
+
clearTimeout(this._openTimeout);
|
|
243
|
+
clearTimeout(this._closeTimeout);
|
|
244
|
+
this.removeActiveState();
|
|
245
|
+
|
|
224
246
|
this._onUnmount.forEach(function (fn) {
|
|
225
247
|
if (typeof fn === 'function') {
|
|
226
248
|
fn();
|
|
227
249
|
}
|
|
228
250
|
});
|
|
229
|
-
|
|
230
|
-
clearTimeout(this._openTimeout);
|
|
231
|
-
clearTimeout(this._closeTimeout);
|
|
232
|
-
clearTimeout(this._sideEffectsTimeout);
|
|
233
|
-
clearTimeout(this._tryToOpenTimeout);
|
|
234
251
|
}
|
|
235
252
|
}, {
|
|
236
253
|
key: "componentDidUpdate",
|
|
@@ -242,35 +259,48 @@ var Modal = function (_React$PureComponent) {
|
|
|
242
259
|
}, {
|
|
243
260
|
key: "openBasedOnStateUpdate",
|
|
244
261
|
value: function openBasedOnStateUpdate() {
|
|
245
|
-
var
|
|
246
|
-
hide = _this$state.hide,
|
|
247
|
-
modalActive = _this$state.modalActive;
|
|
262
|
+
var hide = this.state.hide;
|
|
248
263
|
var open_state = this.props.open_state;
|
|
249
264
|
|
|
250
265
|
if (!this.activeElement && typeof document !== 'undefined') {
|
|
251
266
|
this.activeElement = document.activeElement;
|
|
252
267
|
}
|
|
253
268
|
|
|
254
|
-
if (!hide &&
|
|
269
|
+
if (!hide && (open_state === 'opened' || open_state === true)) {
|
|
255
270
|
this.toggleOpenClose(null, true);
|
|
256
|
-
} else if (hide &&
|
|
271
|
+
} else if (hide && (open_state === 'closed' || open_state === false)) {
|
|
257
272
|
this.toggleOpenClose(null, false);
|
|
258
273
|
}
|
|
259
274
|
}
|
|
275
|
+
}, {
|
|
276
|
+
key: "removeActiveState",
|
|
277
|
+
value: function removeActiveState() {
|
|
278
|
+
var last = getModalRoot(-1);
|
|
279
|
+
|
|
280
|
+
if (last !== null && last !== void 0 && last._id && last._id !== this._id) {
|
|
281
|
+
return this.setActiveState(last._id);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
try {
|
|
285
|
+
document.documentElement.removeAttribute('data-dnb-modal-active');
|
|
286
|
+
document.body.setAttribute('data-dnb-modal-active', 'false');
|
|
287
|
+
} catch (e) {
|
|
288
|
+
warn('Modal: Error on remove "data-dnb-modal-active"', e);
|
|
289
|
+
}
|
|
290
|
+
}
|
|
260
291
|
}, {
|
|
261
292
|
key: "setActiveState",
|
|
262
293
|
value: function setActiveState(modalId) {
|
|
294
|
+
if (!modalId) {
|
|
295
|
+
warn('Modal: A valid modalId is required');
|
|
296
|
+
}
|
|
297
|
+
|
|
263
298
|
if (typeof document !== 'undefined') {
|
|
264
299
|
try {
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
} else {
|
|
268
|
-
document.documentElement.removeAttribute('data-dnb-modal-active');
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
document.body.setAttribute('data-dnb-modal-active', modalId ? 'true' : 'false');
|
|
300
|
+
document.documentElement.setAttribute('data-dnb-modal-active', modalId);
|
|
301
|
+
document.body.setAttribute('data-dnb-modal-active', 'true');
|
|
272
302
|
} catch (e) {
|
|
273
|
-
warn('Modal: Error on set "data-dnb-modal-active"
|
|
303
|
+
warn('Modal: Error on set "data-dnb-modal-active"', e);
|
|
274
304
|
}
|
|
275
305
|
}
|
|
276
306
|
}
|
|
@@ -281,76 +311,89 @@ var Modal = function (_React$PureComponent) {
|
|
|
281
311
|
|
|
282
312
|
var props = extendPropsWithContext(this.props, Modal.defaultProps, this.context.getTranslation(this.props).Modal, this.context.FormRow, this.context.Modal);
|
|
283
313
|
|
|
284
|
-
var root_id = props.root_id,
|
|
285
|
-
|
|
314
|
+
var _props$root_id = props.root_id,
|
|
315
|
+
root_id = _props$root_id === void 0 ? 'root' : _props$root_id,
|
|
316
|
+
_props$content_id = props.content_id,
|
|
317
|
+
content_id = _props$content_id === void 0 ? null : _props$content_id,
|
|
318
|
+
_props$disabled = props.disabled,
|
|
319
|
+
disabled = _props$disabled === void 0 ? null : _props$disabled,
|
|
320
|
+
_props$spacing = props.spacing,
|
|
321
|
+
spacing = _props$spacing === void 0 ? true : _props$spacing,
|
|
322
|
+
_props$labelled_by = props.labelled_by,
|
|
323
|
+
labelled_by = _props$labelled_by === void 0 ? null : _props$labelled_by,
|
|
324
|
+
_props$focus_selector = props.focus_selector,
|
|
325
|
+
focus_selector = _props$focus_selector === void 0 ? null : _props$focus_selector,
|
|
326
|
+
_props$header_content = props.header_content,
|
|
327
|
+
header_content = _props$header_content === void 0 ? null : _props$header_content,
|
|
328
|
+
_props$bar_content = props.bar_content,
|
|
329
|
+
bar_content = _props$bar_content === void 0 ? null : _props$bar_content,
|
|
286
330
|
id = props.id,
|
|
287
331
|
open_state = props.open_state,
|
|
288
332
|
open_delay = props.open_delay,
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
trigger_text =
|
|
301
|
-
trigger_title = props.trigger_title,
|
|
302
|
-
|
|
333
|
+
_props$trigger = props.trigger,
|
|
334
|
+
trigger = _props$trigger === void 0 ? null : _props$trigger,
|
|
335
|
+
_props$trigger_attrib = props.trigger_attributes,
|
|
336
|
+
trigger_attributes = _props$trigger_attrib === void 0 ? null : _props$trigger_attrib,
|
|
337
|
+
_props$trigger_hidden = props.trigger_hidden,
|
|
338
|
+
trigger_hidden = _props$trigger_hidden === void 0 ? 'false' : _props$trigger_hidden,
|
|
339
|
+
_props$trigger_disabl = props.trigger_disabled,
|
|
340
|
+
trigger_disabled = _props$trigger_disabl === void 0 ? null : _props$trigger_disabl,
|
|
341
|
+
_props$trigger_varian = props.trigger_variant,
|
|
342
|
+
trigger_variant = _props$trigger_varian === void 0 ? 'secondary' : _props$trigger_varian,
|
|
343
|
+
_props$trigger_text = props.trigger_text,
|
|
344
|
+
trigger_text = _props$trigger_text === void 0 ? null : _props$trigger_text,
|
|
345
|
+
_props$trigger_title = props.trigger_title,
|
|
346
|
+
trigger_title = _props$trigger_title === void 0 ? null : _props$trigger_title,
|
|
347
|
+
_props$trigger_size = props.trigger_size,
|
|
348
|
+
trigger_size = _props$trigger_size === void 0 ? null : _props$trigger_size,
|
|
303
349
|
trigger_icon = props.trigger_icon,
|
|
304
|
-
|
|
305
|
-
|
|
350
|
+
_props$trigger_icon_p = props.trigger_icon_position,
|
|
351
|
+
trigger_icon_position = _props$trigger_icon_p === void 0 ? 'left' : _props$trigger_icon_p,
|
|
352
|
+
_props$trigger_class = props.trigger_class,
|
|
353
|
+
trigger_class = _props$trigger_class === void 0 ? null : _props$trigger_class,
|
|
306
354
|
rest = _objectWithoutProperties(props, _excluded);
|
|
307
355
|
|
|
308
|
-
var _this$
|
|
309
|
-
hide = _this$
|
|
310
|
-
modalActive = _this$
|
|
356
|
+
var _this$state = this.state,
|
|
357
|
+
hide = _this$state.hide,
|
|
358
|
+
modalActive = _this$state.modalActive;
|
|
311
359
|
var modal_content = Modal.getContent(typeof this.props.children === 'function' ? Object.freeze(_objectSpread(_objectSpread({}, this.props), {}, {
|
|
312
360
|
close: this.close
|
|
313
361
|
})) : this.props);
|
|
314
362
|
|
|
315
363
|
var render = function render(suffixProps) {
|
|
316
|
-
var
|
|
317
|
-
|
|
318
|
-
|
|
364
|
+
var triggerAttributes = _objectSpread({
|
|
365
|
+
hidden: trigger_hidden,
|
|
366
|
+
disabled: trigger_disabled,
|
|
367
|
+
variant: trigger_variant,
|
|
368
|
+
text: trigger_text,
|
|
369
|
+
title: trigger_title,
|
|
370
|
+
size: trigger_size,
|
|
371
|
+
icon: trigger_icon,
|
|
372
|
+
icon_position: trigger_icon_position,
|
|
373
|
+
class: trigger_class
|
|
374
|
+
}, trigger_attributes);
|
|
319
375
|
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
var name = String(prop).replace('trigger_', '');
|
|
323
|
-
|
|
324
|
-
if (name !== 'attributes' && name !== 'props' && prop !== 'element') {
|
|
325
|
-
triggerAttributes[name] = props[prop];
|
|
326
|
-
}
|
|
327
|
-
}
|
|
376
|
+
if (isTrue(disabled)) {
|
|
377
|
+
triggerAttributes.disabled = true;
|
|
328
378
|
}
|
|
329
379
|
|
|
330
380
|
if (triggerAttributes.id) {
|
|
331
381
|
_this2._id = triggerAttributes.id;
|
|
332
382
|
}
|
|
333
383
|
|
|
334
|
-
|
|
335
|
-
modalProps.title = triggerAttributes.title;
|
|
336
|
-
} else if (!rest.title && suffixProps) {
|
|
337
|
-
modalProps.title = _this2.context.translation.HelpButton.title;
|
|
338
|
-
}
|
|
384
|
+
var fallbackTitle;
|
|
339
385
|
|
|
340
|
-
if (
|
|
341
|
-
|
|
386
|
+
if (triggerAttributes.title) {
|
|
387
|
+
fallbackTitle = triggerAttributes.title;
|
|
388
|
+
} else if (suffixProps) {
|
|
389
|
+
fallbackTitle = _this2.context.translation.HelpButton.title;
|
|
342
390
|
}
|
|
343
391
|
|
|
344
392
|
var TriggerButton = trigger ? trigger : HelpButtonInstance;
|
|
345
|
-
return React.createElement(
|
|
346
|
-
value: _objectSpread({
|
|
347
|
-
id: _this2._id
|
|
348
|
-
}, rest)
|
|
349
|
-
}, TriggerButton && !isTrue(trigger_hidden) && React.createElement(TriggerButton, _extends({
|
|
393
|
+
return React.createElement(React.Fragment, null, TriggerButton && !isTrue(trigger_hidden) && React.createElement(TriggerButton, _extends({}, triggerAttributes, {
|
|
350
394
|
id: _this2._id,
|
|
351
|
-
title: !triggerAttributes.text ?
|
|
352
|
-
onClick: _this2.toggleOpenClose
|
|
353
|
-
}, triggerAttributes, {
|
|
395
|
+
title: !triggerAttributes.text ? rest.title || fallbackTitle : null,
|
|
396
|
+
onClick: _this2.toggleOpenClose,
|
|
354
397
|
innerRef: _this2._triggerRef,
|
|
355
398
|
className: classnames('dnb-modal__trigger', createSpacingClasses(props), triggerAttributes.class, triggerAttributes.className)
|
|
356
399
|
})), modalActive && modal_content && React.createElement(ModalRoot, _extends({}, rest, {
|
|
@@ -365,8 +408,8 @@ var Modal = function (_React$PureComponent) {
|
|
|
365
408
|
spacing: spacing,
|
|
366
409
|
closeModal: _this2.close,
|
|
367
410
|
hide: hide,
|
|
368
|
-
|
|
369
|
-
}
|
|
411
|
+
title: rest.title || fallbackTitle
|
|
412
|
+
})));
|
|
370
413
|
};
|
|
371
414
|
|
|
372
415
|
return React.createElement(SuffixContext.Consumer, null, render);
|
|
@@ -387,30 +430,6 @@ var Modal = function (_React$PureComponent) {
|
|
|
387
430
|
|
|
388
431
|
return processChildren(props);
|
|
389
432
|
}
|
|
390
|
-
}, {
|
|
391
|
-
key: "insertModalRoot",
|
|
392
|
-
value: function insertModalRoot(id) {
|
|
393
|
-
if (typeof window === 'undefined') {
|
|
394
|
-
return false;
|
|
395
|
-
}
|
|
396
|
-
|
|
397
|
-
try {
|
|
398
|
-
id = "dnb-modal-".concat(id || 'root');
|
|
399
|
-
window.__modalRoot = document.getElementById(id);
|
|
400
|
-
|
|
401
|
-
if (!window.__modalRoot) {
|
|
402
|
-
window.__modalRoot = document.createElement('div');
|
|
403
|
-
|
|
404
|
-
window.__modalRoot.setAttribute('id', id);
|
|
405
|
-
|
|
406
|
-
document.body.insertBefore(window.__modalRoot, document.body.firstChild);
|
|
407
|
-
}
|
|
408
|
-
} catch (e) {
|
|
409
|
-
warn('Modal: Could not insert dnb-modal-root', e);
|
|
410
|
-
}
|
|
411
|
-
|
|
412
|
-
return window.__modalRoot;
|
|
413
|
-
}
|
|
414
433
|
}, {
|
|
415
434
|
key: "getDerivedStateFromProps",
|
|
416
435
|
value: function getDerivedStateFromProps(props, state) {
|
|
@@ -460,8 +479,6 @@ _defineProperty(Modal, "Inner", ModalInner);
|
|
|
460
479
|
|
|
461
480
|
_defineProperty(Modal, "defaultProps", {
|
|
462
481
|
id: null,
|
|
463
|
-
root_id: 'root',
|
|
464
|
-
mode: 'modal',
|
|
465
482
|
focus_selector: null,
|
|
466
483
|
labelled_by: null,
|
|
467
484
|
title: null,
|
|
@@ -475,7 +492,7 @@ _defineProperty(Modal, "defaultProps", {
|
|
|
475
492
|
close_button_attributes: null,
|
|
476
493
|
prevent_close: false,
|
|
477
494
|
prevent_core_style: false,
|
|
478
|
-
animation_duration:
|
|
495
|
+
animation_duration: ANIMATION_DURATION,
|
|
479
496
|
no_animation: false,
|
|
480
497
|
no_animation_on_mobile: false,
|
|
481
498
|
fullscreen: 'auto',
|
|
@@ -486,6 +503,7 @@ _defineProperty(Modal, "defaultProps", {
|
|
|
486
503
|
open_state: null,
|
|
487
504
|
direct_dom_return: false,
|
|
488
505
|
class: null,
|
|
506
|
+
root_id: 'root',
|
|
489
507
|
className: null,
|
|
490
508
|
children: null,
|
|
491
509
|
on_open: null,
|
|
@@ -512,154 +530,4 @@ _defineProperty(Modal, "defaultProps", {
|
|
|
512
530
|
});
|
|
513
531
|
|
|
514
532
|
export { Modal as default };
|
|
515
|
-
process.env.NODE_ENV !== "production" ? Modal.propTypes = _objectSpread(_objectSpread({
|
|
516
|
-
id: PropTypes.string,
|
|
517
|
-
root_id: PropTypes.string,
|
|
518
|
-
mode: PropTypes.oneOf(['modal', 'drawer']),
|
|
519
|
-
focus_selector: PropTypes.string,
|
|
520
|
-
labelled_by: PropTypes.string,
|
|
521
|
-
title: PropTypes.node,
|
|
522
|
-
disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
|
523
|
-
spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
|
524
|
-
open_delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
525
|
-
content_id: PropTypes.string,
|
|
526
|
-
dialog_title: PropTypes.string,
|
|
527
|
-
close_title: PropTypes.string,
|
|
528
|
-
hide_close_button: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
|
529
|
-
close_button_attributes: PropTypes.object,
|
|
530
|
-
prevent_close: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
|
531
|
-
prevent_core_style: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
|
532
|
-
animation_duration: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
533
|
-
no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
|
534
|
-
no_animation_on_mobile: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
|
535
|
-
fullscreen: PropTypes.oneOf(['auto', true, false, 'true', 'false']),
|
|
536
|
-
min_width: PropTypes.string,
|
|
537
|
-
max_width: PropTypes.string,
|
|
538
|
-
align_content: PropTypes.oneOf(['left', 'center', 'centered', 'right']),
|
|
539
|
-
container_placement: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
|
|
540
|
-
open_state: PropTypes.oneOfType([PropTypes.oneOf(['opened', 'closed']), PropTypes.bool]),
|
|
541
|
-
direct_dom_return: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
|
|
542
|
-
}, spacingPropTypes), {}, {
|
|
543
|
-
class: PropTypes.string,
|
|
544
|
-
className: PropTypes.string,
|
|
545
|
-
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
546
|
-
on_open: PropTypes.func,
|
|
547
|
-
on_close: PropTypes.func,
|
|
548
|
-
on_close_prevent: PropTypes.func,
|
|
549
|
-
open_modal: PropTypes.func,
|
|
550
|
-
close_modal: PropTypes.func,
|
|
551
|
-
trigger: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
552
|
-
trigger_attributes: PropTypes.object,
|
|
553
|
-
trigger_hidden: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
|
554
|
-
trigger_disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
|
555
|
-
trigger_variant: buttonVariantPropType.variant,
|
|
556
|
-
trigger_text: PropTypes.string,
|
|
557
|
-
trigger_title: PropTypes.string,
|
|
558
|
-
trigger_size: PropTypes.string,
|
|
559
|
-
trigger_icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
|
|
560
|
-
trigger_icon_position: PropTypes.oneOf(['left', 'right']),
|
|
561
|
-
trigger_class: PropTypes.string,
|
|
562
|
-
overlay_class: PropTypes.string,
|
|
563
|
-
content_class: PropTypes.string,
|
|
564
|
-
modal_content: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
|
|
565
|
-
header_content: PropTypes.node,
|
|
566
|
-
bar_content: PropTypes.node
|
|
567
|
-
}) : void 0;
|
|
568
|
-
|
|
569
|
-
var ModalRoot = function (_React$PureComponent2) {
|
|
570
|
-
_inherits(ModalRoot, _React$PureComponent2);
|
|
571
|
-
|
|
572
|
-
var _super2 = _createSuper(ModalRoot);
|
|
573
|
-
|
|
574
|
-
function ModalRoot() {
|
|
575
|
-
var _this3;
|
|
576
|
-
|
|
577
|
-
_classCallCheck(this, ModalRoot);
|
|
578
|
-
|
|
579
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
580
|
-
args[_key] = arguments[_key];
|
|
581
|
-
}
|
|
582
|
-
|
|
583
|
-
_this3 = _super2.call.apply(_super2, [this].concat(args));
|
|
584
|
-
|
|
585
|
-
_defineProperty(_assertThisInitialized(_this3), "state", {
|
|
586
|
-
isMounted: false
|
|
587
|
-
});
|
|
588
|
-
|
|
589
|
-
return _this3;
|
|
590
|
-
}
|
|
591
|
-
|
|
592
|
-
_createClass(ModalRoot, [{
|
|
593
|
-
key: "componentDidMount",
|
|
594
|
-
value: function componentDidMount() {
|
|
595
|
-
if (!isTrue(this.props.direct_dom_return)) {
|
|
596
|
-
Modal.insertModalRoot(this.props.root_id);
|
|
597
|
-
|
|
598
|
-
try {
|
|
599
|
-
if (!this.portalElem) {
|
|
600
|
-
this.portalElem = document.createElement('div');
|
|
601
|
-
this.portalElem.className = 'dnb-modal-root__inner';
|
|
602
|
-
}
|
|
603
|
-
|
|
604
|
-
if (this.portalElem && typeof window !== 'undefined' && window.__modalRoot) {
|
|
605
|
-
window.__modalRoot.appendChild(this.portalElem);
|
|
606
|
-
}
|
|
607
|
-
} catch (e) {
|
|
608
|
-
warn(e);
|
|
609
|
-
}
|
|
610
|
-
|
|
611
|
-
this.setState({
|
|
612
|
-
isMounted: true
|
|
613
|
-
});
|
|
614
|
-
}
|
|
615
|
-
}
|
|
616
|
-
}, {
|
|
617
|
-
key: "componentWillUnmount",
|
|
618
|
-
value: function componentWillUnmount() {
|
|
619
|
-
try {
|
|
620
|
-
if (this.portalElem && typeof window !== 'undefined' && window.__modalRoot && window.__modalRoot.removeChild) {
|
|
621
|
-
window.__modalRoot.removeChild(this.portalElem);
|
|
622
|
-
|
|
623
|
-
this.portalElem = null;
|
|
624
|
-
}
|
|
625
|
-
} catch (e) {
|
|
626
|
-
warn(e);
|
|
627
|
-
}
|
|
628
|
-
}
|
|
629
|
-
}, {
|
|
630
|
-
key: "render",
|
|
631
|
-
value: function render() {
|
|
632
|
-
var _this$props = this.props,
|
|
633
|
-
children = _this$props.children,
|
|
634
|
-
direct_dom_return = _this$props.direct_dom_return,
|
|
635
|
-
props = _objectWithoutProperties(_this$props, _excluded2);
|
|
636
|
-
|
|
637
|
-
if (isTrue(direct_dom_return)) {
|
|
638
|
-
return React.createElement(ModalContent, props, children);
|
|
639
|
-
}
|
|
640
|
-
|
|
641
|
-
if (this.portalElem && typeof window !== 'undefined' && window.__modalRoot && this.state.isMounted) {
|
|
642
|
-
return ReactDOM.createPortal(React.createElement(ModalContent, props, children), this.portalElem);
|
|
643
|
-
}
|
|
644
|
-
|
|
645
|
-
return null;
|
|
646
|
-
}
|
|
647
|
-
}]);
|
|
648
|
-
|
|
649
|
-
return ModalRoot;
|
|
650
|
-
}(React.PureComponent);
|
|
651
|
-
|
|
652
|
-
_defineProperty(ModalRoot, "defaultProps", {
|
|
653
|
-
id: null,
|
|
654
|
-
root_id: null,
|
|
655
|
-
direct_dom_return: false,
|
|
656
|
-
children: null
|
|
657
|
-
});
|
|
658
|
-
|
|
659
|
-
process.env.NODE_ENV !== "production" ? ModalRoot.propTypes = {
|
|
660
|
-
id: PropTypes.string,
|
|
661
|
-
root_id: PropTypes.string,
|
|
662
|
-
direct_dom_return: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
|
663
|
-
children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func])
|
|
664
|
-
} : void 0;
|
|
665
533
|
export { CloseButton };
|