@dnb/eufemia 10.37.0 → 10.38.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 +21 -0
- package/cjs/components/accordion/Accordion.d.ts +13 -3
- package/cjs/components/accordion/Accordion.js +14 -9
- package/cjs/components/accordion/Accordion.js.map +1 -1
- package/cjs/components/accordion/AccordionContext.d.ts +2 -0
- package/cjs/components/accordion/AccordionContext.js.map +1 -1
- package/cjs/components/accordion/AccordionDocs.js +5 -0
- package/cjs/components/accordion/AccordionDocs.js.map +1 -1
- package/cjs/components/accordion/AccordionGroup.js +6 -3
- package/cjs/components/accordion/AccordionGroup.js.map +1 -1
- package/cjs/components/accordion/AccordionProviderContext.d.ts +2 -0
- package/cjs/components/accordion/AccordionProviderContext.js.map +1 -1
- package/cjs/components/accordion/AccordionStore.d.ts +2 -0
- package/cjs/components/accordion/AccordionStore.js +1 -1
- package/cjs/components/accordion/AccordionStore.js.map +1 -1
- package/cjs/components/accordion/style/themes/dnb-accordion-theme-ui.css +1 -0
- package/cjs/components/accordion/style/themes/dnb-accordion-theme-ui.min.css +1 -1
- package/cjs/components/accordion/style/themes/dnb-accordion-theme-ui.scss +3 -0
- package/cjs/components/button/Button.d.ts +1 -1
- package/cjs/components/card/Card.js +4 -3
- package/cjs/components/card/Card.js.map +1 -1
- package/cjs/components/card/style/dnb-card.css +16 -0
- package/cjs/components/card/style/dnb-card.min.css +1 -1
- package/cjs/components/card/style/dnb-card.scss +17 -0
- package/cjs/components/card/style/themes/dnb-card-theme-sbanken.css +4 -4
- package/cjs/components/card/style/themes/dnb-card-theme-sbanken.min.css +1 -1
- package/cjs/components/card/style/themes/dnb-card-theme-sbanken.scss +3 -5
- package/cjs/components/card/style/themes/dnb-card-theme-ui.css +4 -7
- package/cjs/components/card/style/themes/dnb-card-theme-ui.min.css +1 -1
- package/cjs/components/card/style/themes/dnb-card-theme-ui.scss +3 -7
- package/cjs/components/checkbox/style/dnb-checkbox.scss +1 -1
- package/cjs/components/height-animation/HeightAnimation.d.ts +1 -1
- package/cjs/components/height-animation/HeightAnimation.js +6 -2
- package/cjs/components/height-animation/HeightAnimation.js.map +1 -1
- package/cjs/components/height-animation/HeightAnimationDocs.d.ts +3 -0
- package/cjs/components/height-animation/HeightAnimationDocs.js +83 -0
- package/cjs/components/height-animation/HeightAnimationDocs.js.map +1 -0
- package/cjs/components/height-animation/style/dnb-height-animation.css +3 -2
- package/cjs/components/height-animation/style/dnb-height-animation.min.css +1 -1
- package/cjs/components/height-animation/style/dnb-height-animation.scss +3 -2
- package/cjs/components/height-animation/useHeightAnimation.d.ts +6 -1
- package/cjs/components/height-animation/useHeightAnimation.js +36 -6
- package/cjs/components/height-animation/useHeightAnimation.js.map +1 -1
- package/cjs/components/radio/RadioGroup.js +4 -2
- package/cjs/components/radio/RadioGroup.js.map +1 -1
- package/cjs/components/radio/style/dnb-radio.css +8 -5
- package/cjs/components/radio/style/dnb-radio.min.css +1 -1
- package/cjs/components/radio/style/dnb-radio.scss +11 -13
- package/cjs/components/section/Section.js +3 -0
- package/cjs/components/section/Section.js.map +1 -1
- package/cjs/components/section/style/dnb-section.scss +2 -0
- package/cjs/components/toggle-button/ToggleButtonGroup.js +6 -3
- package/cjs/components/toggle-button/ToggleButtonGroup.js.map +1 -1
- package/cjs/components/toggle-button/style/dnb-toggle-button.css +3 -3
- package/cjs/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
- package/cjs/components/toggle-button/style/dnb-toggle-button.scss +6 -2
- package/cjs/extensions/forms/Field/ArraySelection/ArraySelection.d.ts +14 -0
- package/cjs/extensions/forms/Field/ArraySelection/ArraySelection.js +90 -31
- package/cjs/extensions/forms/Field/ArraySelection/ArraySelection.js.map +1 -1
- package/cjs/extensions/forms/Field/ArraySelection/style/dnb-array-selection.css +12 -3
- package/cjs/extensions/forms/Field/ArraySelection/style/dnb-array-selection.min.css +1 -1
- package/cjs/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss +14 -3
- package/cjs/extensions/forms/Field/Selection/Selection.d.ts +15 -3
- package/cjs/extensions/forms/Field/Selection/Selection.js +71 -42
- package/cjs/extensions/forms/Field/Selection/Selection.js.map +1 -1
- package/cjs/extensions/forms/Field/Selection/style/dnb-selection.css +9 -0
- package/cjs/extensions/forms/Field/Selection/style/dnb-selection.min.css +1 -1
- package/cjs/extensions/forms/Field/Selection/style/dnb-selection.scss +16 -0
- package/cjs/extensions/forms/Form/Visibility/Visibility.d.ts +3 -1
- package/cjs/extensions/forms/Form/Visibility/Visibility.js +4 -2
- package/cjs/extensions/forms/Form/Visibility/Visibility.js.map +1 -1
- package/cjs/extensions/forms/Form/Visibility/VisibilityDocs.js +5 -0
- package/cjs/extensions/forms/Form/Visibility/VisibilityDocs.js.map +1 -1
- package/cjs/extensions/forms/style/dnb-forms.css +21 -3
- package/cjs/extensions/forms/style/dnb-forms.min.css +1 -1
- package/cjs/extensions/forms/types.d.ts +1 -1
- package/cjs/extensions/forms/types.js.map +1 -1
- package/cjs/shared/Eufemia.d.ts +1 -1
- package/cjs/shared/Eufemia.js +2 -2
- package/cjs/shared/Eufemia.js.map +1 -1
- package/cjs/style/core/scopes.scss +1 -1
- package/cjs/style/dnb-ui-basis.css +1 -1
- package/cjs/style/dnb-ui-basis.min.css +1 -1
- package/cjs/style/dnb-ui-body.css +1 -1
- package/cjs/style/dnb-ui-body.min.css +1 -1
- package/cjs/style/dnb-ui-components.css +51 -13
- package/cjs/style/dnb-ui-components.min.css +3 -3
- package/cjs/style/dnb-ui-core.css +1 -1
- package/cjs/style/dnb-ui-core.min.css +1 -1
- package/cjs/style/dnb-ui-extensions.css +21 -3
- package/cjs/style/dnb-ui-extensions.min.css +1 -1
- package/cjs/style/dnb-ui-forms.css +21 -3
- package/cjs/style/dnb-ui-forms.min.css +1 -1
- package/cjs/style/themes/theme-eiendom/eiendom-theme-components.css +77 -23
- package/cjs/style/themes/theme-eiendom/eiendom-theme-components.min.css +5 -5
- package/cjs/style/themes/theme-eiendom/eiendom-theme-extensions.css +21 -3
- package/cjs/style/themes/theme-eiendom/eiendom-theme-extensions.min.css +1 -1
- package/cjs/style/themes/theme-eiendom/eiendom-theme-forms.css +21 -3
- package/cjs/style/themes/theme-eiendom/eiendom-theme-forms.min.css +1 -1
- package/cjs/style/themes/theme-sbanken/fonts.scss +1 -1
- package/cjs/style/themes/theme-sbanken/sbanken-theme-components.css +76 -20
- package/cjs/style/themes/theme-sbanken/sbanken-theme-components.min.css +4 -4
- package/cjs/style/themes/theme-sbanken/sbanken-theme-extensions.css +21 -3
- package/cjs/style/themes/theme-sbanken/sbanken-theme-extensions.min.css +1 -1
- package/cjs/style/themes/theme-sbanken/sbanken-theme-forms.css +21 -3
- package/cjs/style/themes/theme-sbanken/sbanken-theme-forms.min.css +1 -1
- package/cjs/style/themes/theme-ui/ui-theme-components.css +77 -23
- package/cjs/style/themes/theme-ui/ui-theme-components.min.css +5 -5
- package/cjs/style/themes/theme-ui/ui-theme-extensions.css +21 -3
- package/cjs/style/themes/theme-ui/ui-theme-extensions.min.css +1 -1
- package/cjs/style/themes/theme-ui/ui-theme-forms.css +21 -3
- package/cjs/style/themes/theme-ui/ui-theme-forms.min.css +1 -1
- package/components/accordion/Accordion.d.ts +13 -3
- package/components/accordion/Accordion.js +15 -10
- package/components/accordion/Accordion.js.map +1 -1
- package/components/accordion/AccordionContext.d.ts +2 -0
- package/components/accordion/AccordionContext.js.map +1 -1
- package/components/accordion/AccordionDocs.js +5 -0
- package/components/accordion/AccordionDocs.js.map +1 -1
- package/components/accordion/AccordionGroup.js +6 -3
- package/components/accordion/AccordionGroup.js.map +1 -1
- package/components/accordion/AccordionProviderContext.d.ts +2 -0
- package/components/accordion/AccordionProviderContext.js.map +1 -1
- package/components/accordion/AccordionStore.d.ts +2 -0
- package/components/accordion/AccordionStore.js +1 -1
- package/components/accordion/AccordionStore.js.map +1 -1
- package/components/accordion/style/themes/dnb-accordion-theme-ui.css +1 -0
- package/components/accordion/style/themes/dnb-accordion-theme-ui.min.css +1 -1
- package/components/accordion/style/themes/dnb-accordion-theme-ui.scss +3 -0
- package/components/button/Button.d.ts +1 -1
- package/components/card/Card.js +4 -3
- package/components/card/Card.js.map +1 -1
- package/components/card/style/dnb-card.css +16 -0
- package/components/card/style/dnb-card.min.css +1 -1
- package/components/card/style/dnb-card.scss +17 -0
- package/components/card/style/themes/dnb-card-theme-sbanken.css +4 -4
- package/components/card/style/themes/dnb-card-theme-sbanken.min.css +1 -1
- package/components/card/style/themes/dnb-card-theme-sbanken.scss +3 -5
- package/components/card/style/themes/dnb-card-theme-ui.css +4 -7
- package/components/card/style/themes/dnb-card-theme-ui.min.css +1 -1
- package/components/card/style/themes/dnb-card-theme-ui.scss +3 -7
- package/components/checkbox/style/dnb-checkbox.scss +1 -1
- package/components/height-animation/HeightAnimation.d.ts +1 -1
- package/components/height-animation/HeightAnimation.js +6 -2
- package/components/height-animation/HeightAnimation.js.map +1 -1
- package/components/height-animation/HeightAnimationDocs.d.ts +3 -0
- package/components/height-animation/HeightAnimationDocs.js +75 -0
- package/components/height-animation/HeightAnimationDocs.js.map +1 -0
- package/components/height-animation/style/dnb-height-animation.css +3 -2
- package/components/height-animation/style/dnb-height-animation.min.css +1 -1
- package/components/height-animation/style/dnb-height-animation.scss +3 -2
- package/components/height-animation/useHeightAnimation.d.ts +6 -1
- package/components/height-animation/useHeightAnimation.js +37 -7
- package/components/height-animation/useHeightAnimation.js.map +1 -1
- package/components/radio/RadioGroup.js +4 -2
- package/components/radio/RadioGroup.js.map +1 -1
- package/components/radio/style/dnb-radio.css +8 -5
- package/components/radio/style/dnb-radio.min.css +1 -1
- package/components/radio/style/dnb-radio.scss +11 -13
- package/components/section/Section.js +3 -0
- package/components/section/Section.js.map +1 -1
- package/components/section/style/dnb-section.scss +2 -0
- package/components/toggle-button/ToggleButtonGroup.js +6 -3
- package/components/toggle-button/ToggleButtonGroup.js.map +1 -1
- package/components/toggle-button/style/dnb-toggle-button.css +3 -3
- package/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
- package/components/toggle-button/style/dnb-toggle-button.scss +6 -2
- package/es/components/accordion/Accordion.d.ts +13 -3
- package/es/components/accordion/Accordion.js +15 -10
- package/es/components/accordion/Accordion.js.map +1 -1
- package/es/components/accordion/AccordionContext.d.ts +2 -0
- package/es/components/accordion/AccordionContext.js.map +1 -1
- package/es/components/accordion/AccordionDocs.js +5 -0
- package/es/components/accordion/AccordionDocs.js.map +1 -1
- package/es/components/accordion/AccordionGroup.js +6 -3
- package/es/components/accordion/AccordionGroup.js.map +1 -1
- package/es/components/accordion/AccordionProviderContext.d.ts +2 -0
- package/es/components/accordion/AccordionProviderContext.js.map +1 -1
- package/es/components/accordion/AccordionStore.d.ts +2 -0
- package/es/components/accordion/AccordionStore.js +1 -1
- package/es/components/accordion/AccordionStore.js.map +1 -1
- package/es/components/accordion/style/themes/dnb-accordion-theme-ui.css +1 -0
- package/es/components/accordion/style/themes/dnb-accordion-theme-ui.min.css +1 -1
- package/es/components/accordion/style/themes/dnb-accordion-theme-ui.scss +3 -0
- package/es/components/button/Button.d.ts +1 -1
- package/es/components/card/Card.js +4 -3
- package/es/components/card/Card.js.map +1 -1
- package/es/components/card/style/dnb-card.css +16 -0
- package/es/components/card/style/dnb-card.min.css +1 -1
- package/es/components/card/style/dnb-card.scss +17 -0
- package/es/components/card/style/themes/dnb-card-theme-sbanken.css +4 -4
- package/es/components/card/style/themes/dnb-card-theme-sbanken.min.css +1 -1
- package/es/components/card/style/themes/dnb-card-theme-sbanken.scss +3 -5
- package/es/components/card/style/themes/dnb-card-theme-ui.css +4 -7
- package/es/components/card/style/themes/dnb-card-theme-ui.min.css +1 -1
- package/es/components/card/style/themes/dnb-card-theme-ui.scss +3 -7
- package/es/components/checkbox/style/dnb-checkbox.scss +1 -1
- package/es/components/height-animation/HeightAnimation.d.ts +1 -1
- package/es/components/height-animation/HeightAnimation.js +6 -2
- package/es/components/height-animation/HeightAnimation.js.map +1 -1
- package/es/components/height-animation/HeightAnimationDocs.d.ts +3 -0
- package/es/components/height-animation/HeightAnimationDocs.js +75 -0
- package/es/components/height-animation/HeightAnimationDocs.js.map +1 -0
- package/es/components/height-animation/style/dnb-height-animation.css +3 -2
- package/es/components/height-animation/style/dnb-height-animation.min.css +1 -1
- package/es/components/height-animation/style/dnb-height-animation.scss +3 -2
- package/es/components/height-animation/useHeightAnimation.d.ts +6 -1
- package/es/components/height-animation/useHeightAnimation.js +37 -7
- package/es/components/height-animation/useHeightAnimation.js.map +1 -1
- package/es/components/radio/RadioGroup.js +4 -2
- package/es/components/radio/RadioGroup.js.map +1 -1
- package/es/components/radio/style/dnb-radio.css +8 -5
- package/es/components/radio/style/dnb-radio.min.css +1 -1
- package/es/components/radio/style/dnb-radio.scss +11 -13
- package/es/components/section/Section.js +3 -0
- package/es/components/section/Section.js.map +1 -1
- package/es/components/section/style/dnb-section.scss +2 -0
- package/es/components/toggle-button/ToggleButtonGroup.js +6 -3
- package/es/components/toggle-button/ToggleButtonGroup.js.map +1 -1
- package/es/components/toggle-button/style/dnb-toggle-button.css +3 -3
- package/es/components/toggle-button/style/dnb-toggle-button.min.css +1 -1
- package/es/components/toggle-button/style/dnb-toggle-button.scss +6 -2
- package/es/extensions/forms/Field/ArraySelection/ArraySelection.d.ts +14 -0
- package/es/extensions/forms/Field/ArraySelection/ArraySelection.js +87 -29
- package/es/extensions/forms/Field/ArraySelection/ArraySelection.js.map +1 -1
- package/es/extensions/forms/Field/ArraySelection/style/dnb-array-selection.css +12 -3
- package/es/extensions/forms/Field/ArraySelection/style/dnb-array-selection.min.css +1 -1
- package/es/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss +14 -3
- package/es/extensions/forms/Field/Selection/Selection.d.ts +15 -3
- package/es/extensions/forms/Field/Selection/Selection.js +68 -42
- package/es/extensions/forms/Field/Selection/Selection.js.map +1 -1
- package/es/extensions/forms/Field/Selection/style/dnb-selection.css +9 -0
- package/es/extensions/forms/Field/Selection/style/dnb-selection.min.css +1 -1
- package/es/extensions/forms/Field/Selection/style/dnb-selection.scss +16 -0
- package/es/extensions/forms/Form/Visibility/Visibility.d.ts +3 -1
- package/es/extensions/forms/Form/Visibility/Visibility.js +4 -2
- package/es/extensions/forms/Form/Visibility/Visibility.js.map +1 -1
- package/es/extensions/forms/Form/Visibility/VisibilityDocs.js +5 -0
- package/es/extensions/forms/Form/Visibility/VisibilityDocs.js.map +1 -1
- package/es/extensions/forms/style/dnb-forms.css +21 -3
- package/es/extensions/forms/style/dnb-forms.min.css +1 -1
- package/es/extensions/forms/types.d.ts +1 -1
- package/es/extensions/forms/types.js.map +1 -1
- package/es/shared/Eufemia.d.ts +1 -1
- package/es/shared/Eufemia.js +2 -2
- package/es/shared/Eufemia.js.map +1 -1
- package/es/style/core/scopes.scss +1 -1
- package/es/style/dnb-ui-basis.css +1 -1
- package/es/style/dnb-ui-basis.min.css +1 -1
- package/es/style/dnb-ui-body.css +1 -1
- package/es/style/dnb-ui-body.min.css +1 -1
- package/es/style/dnb-ui-components.css +51 -13
- package/es/style/dnb-ui-components.min.css +3 -3
- package/es/style/dnb-ui-core.css +1 -1
- package/es/style/dnb-ui-core.min.css +1 -1
- package/es/style/dnb-ui-extensions.css +21 -3
- package/es/style/dnb-ui-extensions.min.css +1 -1
- package/es/style/dnb-ui-forms.css +21 -3
- package/es/style/dnb-ui-forms.min.css +1 -1
- package/es/style/themes/theme-eiendom/eiendom-theme-components.css +77 -23
- package/es/style/themes/theme-eiendom/eiendom-theme-components.min.css +5 -5
- package/es/style/themes/theme-eiendom/eiendom-theme-extensions.css +21 -3
- package/es/style/themes/theme-eiendom/eiendom-theme-extensions.min.css +1 -1
- package/es/style/themes/theme-eiendom/eiendom-theme-forms.css +21 -3
- package/es/style/themes/theme-eiendom/eiendom-theme-forms.min.css +1 -1
- package/es/style/themes/theme-sbanken/fonts.scss +1 -1
- package/es/style/themes/theme-sbanken/sbanken-theme-components.css +76 -20
- package/es/style/themes/theme-sbanken/sbanken-theme-components.min.css +4 -4
- package/es/style/themes/theme-sbanken/sbanken-theme-extensions.css +21 -3
- package/es/style/themes/theme-sbanken/sbanken-theme-extensions.min.css +1 -1
- package/es/style/themes/theme-sbanken/sbanken-theme-forms.css +21 -3
- package/es/style/themes/theme-sbanken/sbanken-theme-forms.min.css +1 -1
- package/es/style/themes/theme-ui/ui-theme-components.css +77 -23
- package/es/style/themes/theme-ui/ui-theme-components.min.css +5 -5
- package/es/style/themes/theme-ui/ui-theme-extensions.css +21 -3
- package/es/style/themes/theme-ui/ui-theme-extensions.min.css +1 -1
- package/es/style/themes/theme-ui/ui-theme-forms.css +21 -3
- package/es/style/themes/theme-ui/ui-theme-forms.min.css +1 -1
- package/esm/dnb-ui-basis.min.mjs +1 -1
- package/esm/dnb-ui-components.min.mjs +1 -1
- package/esm/dnb-ui-elements.min.mjs +1 -1
- package/esm/dnb-ui-extensions.min.mjs +2 -2
- package/esm/dnb-ui-lib.min.mjs +1 -1
- package/extensions/forms/Field/ArraySelection/ArraySelection.d.ts +14 -0
- package/extensions/forms/Field/ArraySelection/ArraySelection.js +88 -29
- package/extensions/forms/Field/ArraySelection/ArraySelection.js.map +1 -1
- package/extensions/forms/Field/ArraySelection/style/dnb-array-selection.css +12 -3
- package/extensions/forms/Field/ArraySelection/style/dnb-array-selection.min.css +1 -1
- package/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss +14 -3
- package/extensions/forms/Field/Selection/Selection.d.ts +15 -3
- package/extensions/forms/Field/Selection/Selection.js +69 -42
- package/extensions/forms/Field/Selection/Selection.js.map +1 -1
- package/extensions/forms/Field/Selection/style/dnb-selection.css +9 -0
- package/extensions/forms/Field/Selection/style/dnb-selection.min.css +1 -1
- package/extensions/forms/Field/Selection/style/dnb-selection.scss +16 -0
- package/extensions/forms/Form/Visibility/Visibility.d.ts +3 -1
- package/extensions/forms/Form/Visibility/Visibility.js +4 -2
- package/extensions/forms/Form/Visibility/Visibility.js.map +1 -1
- package/extensions/forms/Form/Visibility/VisibilityDocs.js +5 -0
- package/extensions/forms/Form/Visibility/VisibilityDocs.js.map +1 -1
- package/extensions/forms/style/dnb-forms.css +21 -3
- package/extensions/forms/style/dnb-forms.min.css +1 -1
- package/extensions/forms/types.d.ts +1 -1
- package/extensions/forms/types.js.map +1 -1
- package/package.json +1 -1
- package/shared/Eufemia.d.ts +1 -1
- package/shared/Eufemia.js +2 -2
- package/shared/Eufemia.js.map +1 -1
- package/style/core/scopes.scss +1 -1
- package/style/dnb-ui-basis.css +1 -1
- package/style/dnb-ui-basis.min.css +1 -1
- package/style/dnb-ui-body.css +1 -1
- package/style/dnb-ui-body.min.css +1 -1
- package/style/dnb-ui-components.css +51 -13
- package/style/dnb-ui-components.min.css +3 -3
- package/style/dnb-ui-core.css +1 -1
- package/style/dnb-ui-core.min.css +1 -1
- package/style/dnb-ui-extensions.css +21 -3
- package/style/dnb-ui-extensions.min.css +1 -1
- package/style/dnb-ui-forms.css +21 -3
- package/style/dnb-ui-forms.min.css +1 -1
- package/style/themes/theme-eiendom/eiendom-theme-components.css +77 -23
- package/style/themes/theme-eiendom/eiendom-theme-components.min.css +5 -5
- package/style/themes/theme-eiendom/eiendom-theme-extensions.css +21 -3
- package/style/themes/theme-eiendom/eiendom-theme-extensions.min.css +1 -1
- package/style/themes/theme-eiendom/eiendom-theme-forms.css +21 -3
- package/style/themes/theme-eiendom/eiendom-theme-forms.min.css +1 -1
- package/style/themes/theme-sbanken/fonts.scss +1 -1
- package/style/themes/theme-sbanken/sbanken-theme-components.css +76 -20
- package/style/themes/theme-sbanken/sbanken-theme-components.min.css +4 -4
- package/style/themes/theme-sbanken/sbanken-theme-extensions.css +21 -3
- package/style/themes/theme-sbanken/sbanken-theme-extensions.min.css +1 -1
- package/style/themes/theme-sbanken/sbanken-theme-forms.css +21 -3
- package/style/themes/theme-sbanken/sbanken-theme-forms.min.css +1 -1
- package/style/themes/theme-ui/ui-theme-components.css +77 -23
- package/style/themes/theme-ui/ui-theme-components.min.css +5 -5
- package/style/themes/theme-ui/ui-theme-extensions.css +21 -3
- package/style/themes/theme-ui/ui-theme-extensions.min.css +1 -1
- package/style/themes/theme-ui/ui-theme-forms.css +21 -3
- package/style/themes/theme-ui/ui-theme-forms.min.css +1 -1
- package/umd/dnb-ui-basis.min.js +1 -1
- package/umd/dnb-ui-components.min.js +1 -1
- package/umd/dnb-ui-elements.min.js +1 -1
- package/umd/dnb-ui-extensions.min.js +3 -3
- package/umd/dnb-ui-lib.min.js +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionStore.js","names":["_componentHelper","require","_defineProperty","obj","key","value","_toPropertyKey","Object","defineProperty","enumerable","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","AccordionStore","constructor","id","_id","_instances","onChange","_ref","forEach","inst","close","addInstance","instance","push","removeInstance","filter","exports","Store","_ref2","group","storeId","arguments","length","saveState","expanded","opts","store","getData","force","window","localStorage","setItem","JSON","stringify","e","rememberWarning","prototype","hasOwnProperty","parse","getItem","getState","state","flush","type","warn"],"sources":["../../../../src/components/accordion/AccordionStore.ts"],"sourcesContent":["import { warn } from '../../shared/component-helper'\n\ntype AccordionStoreInstance = {\n _id: string\n close: () => void\n}\nexport class AccordionStore {\n _instances: Array<AccordionStoreInstance>\n _id: string\n constructor(id: string) {\n this._id = id\n this._instances = []\n }\n onChange({ id }: { id: string }) {\n this._instances.forEach((inst) => {\n if (inst._id !== id) {\n inst.close()\n }\n })\n }\n addInstance(instance: AccordionStoreInstance) {\n this._instances.push(instance)\n }\n removeInstance(instance) {\n this._instances = this._instances.filter((inst) => inst !== instance)\n }\n}\n\nexport type StoreDataReturn = {\n id: string\n expanded: boolean\n}\nexport type StoreOptions = {\n force?: boolean\n}\n\ntype StoreProps = {\n id?: string\n group?: string\n}\n\nexport class Store {\n id?: string\n group?: string\n\n constructor({ id, group }: StoreProps) {\n this.id = id\n this.group = group\n return this\n }\n\n storeId(id = this.id) {\n if (this.group) {\n // Skip using the random ID\n if (this.group[0] === '#') {\n return null\n }\n id = this.group\n }\n return `dnb-accordion-${id}`\n }\n\n saveState(expanded: boolean, id = this.id, opts: StoreOptions = {}) {\n if (id) {\n try {\n const store = this.getData() || ({} as StoreDataReturn)\n\n if (this.group) {\n if (expanded) {\n store.id = id\n } else if (opts && opts.force) {\n store.id = null\n }\n } else {\n store.expanded = expanded\n }\n\n const storeId = this.storeId(id)\n if (storeId) {\n window.localStorage.setItem(storeId, JSON.stringify(store))\n }\n } catch (e) {\n //\n }\n } else {\n rememberWarning()\n }\n }\n\n getData(id = this.id): StoreDataReturn {\n const storeId = this.storeId(id)\n\n if (storeId) {\n try {\n if (\n Object.prototype.hasOwnProperty.call(\n window.localStorage,\n storeId\n )\n ) {\n return JSON.parse(window.localStorage.getItem(storeId))\n }\n } catch (e) {\n //\n }\n }\n\n return null\n }\n\n getState(id = this.id) {\n let state = null\n\n const store = this.getData(id)\n\n if (store) {\n if (typeof store.id !== 'undefined') {\n state = id === store.id\n } else if (typeof store.expanded !== 'undefined') {\n state = store.expanded\n }\n }\n\n return state\n }\n\n flush(id = this.id) {\n if (id) {\n try {\n const storeId = this.storeId(id)\n if (storeId) {\n window.localStorage.setItem(storeId, null)\n }\n } catch (e) {\n //\n }\n }\n }\n}\n\nexport function rememberWarning(type = 'accordion') {\n warn(`Missing \"id\" prop the ${type}! \"remember_state\" is enabled.`)\n}\n"],"mappings":";;;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AAAoD,SAAAC,gBAAAC,GAAA,EAAAC,GAAA,EAAAC,KAAA,IAAAD,GAAA,GAAAE,cAAA,CAAAF,GAAA,OAAAA,GAAA,IAAAD,GAAA,IAAAI,MAAA,CAAAC,cAAA,CAAAL,GAAA,EAAAC,GAAA,IAAAC,KAAA,EAAAA,KAAA,EAAAI,UAAA,QAAAC,YAAA,QAAAC,QAAA,oBAAAR,GAAA,CAAAC,GAAA,IAAAC,KAAA,WAAAF,GAAA;AAAA,SAAAG,eAAAM,GAAA,QAAAR,GAAA,GAAAS,YAAA,CAAAD,GAAA,2BAAAR,GAAA,gBAAAA,GAAA,GAAAU,MAAA,CAAAV,GAAA;AAAA,SAAAS,aAAAE,KAAA,EAAAC,IAAA,eAAAD,KAAA,iBAAAA,KAAA,kBAAAA,KAAA,MAAAE,IAAA,GAAAF,KAAA,CAAAG,MAAA,CAAAC,WAAA,OAAAF,IAAA,KAAAG,SAAA,QAAAC,GAAA,GAAAJ,IAAA,CAAAK,IAAA,CAAAP,KAAA,EAAAC,IAAA,2BAAAK,GAAA,sBAAAA,GAAA,YAAAE,SAAA,4DAAAP,IAAA,gBAAAF,MAAA,GAAAU,MAAA,EAAAT,KAAA;
|
|
1
|
+
{"version":3,"file":"AccordionStore.js","names":["_componentHelper","require","_defineProperty","obj","key","value","_toPropertyKey","Object","defineProperty","enumerable","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","AccordionStore","constructor","id","_id","_instances","onChange","_ref","forEach","inst","context","expandBehaviour","close","addInstance","instance","push","removeInstance","filter","exports","Store","_ref2","group","storeId","arguments","length","saveState","expanded","opts","store","getData","force","window","localStorage","setItem","JSON","stringify","e","rememberWarning","prototype","hasOwnProperty","parse","getItem","getState","state","flush","type","warn"],"sources":["../../../../src/components/accordion/AccordionStore.ts"],"sourcesContent":["import { warn } from '../../shared/component-helper'\nimport { AccordionContextProps } from './AccordionContext'\n\ntype AccordionStoreInstance = {\n context: AccordionContextProps\n _id: string\n close: () => void\n}\nexport class AccordionStore {\n _instances: Array<AccordionStoreInstance>\n _id: string\n constructor(id: string) {\n this._id = id\n this._instances = []\n }\n onChange({ id }: { id: string }) {\n this._instances.forEach((inst) => {\n if (inst.context.expandBehaviour === 'single' && inst._id !== id) {\n inst.close()\n }\n })\n }\n addInstance(instance: AccordionStoreInstance) {\n this._instances.push(instance)\n }\n removeInstance(instance) {\n this._instances = this._instances.filter((inst) => inst !== instance)\n }\n}\n\nexport type StoreDataReturn = {\n id: string\n expanded: boolean\n}\nexport type StoreOptions = {\n force?: boolean\n}\n\ntype StoreProps = {\n id?: string\n group?: string\n}\n\nexport class Store {\n id?: string\n group?: string\n\n constructor({ id, group }: StoreProps) {\n this.id = id\n this.group = group\n return this\n }\n\n storeId(id = this.id) {\n if (this.group) {\n // Skip using the random ID\n if (this.group[0] === '#') {\n return null\n }\n id = this.group\n }\n return `dnb-accordion-${id}`\n }\n\n saveState(expanded: boolean, id = this.id, opts: StoreOptions = {}) {\n if (id) {\n try {\n const store = this.getData() || ({} as StoreDataReturn)\n\n if (this.group) {\n if (expanded) {\n store.id = id\n } else if (opts && opts.force) {\n store.id = null\n }\n } else {\n store.expanded = expanded\n }\n\n const storeId = this.storeId(id)\n if (storeId) {\n window.localStorage.setItem(storeId, JSON.stringify(store))\n }\n } catch (e) {\n //\n }\n } else {\n rememberWarning()\n }\n }\n\n getData(id = this.id): StoreDataReturn {\n const storeId = this.storeId(id)\n\n if (storeId) {\n try {\n if (\n Object.prototype.hasOwnProperty.call(\n window.localStorage,\n storeId\n )\n ) {\n return JSON.parse(window.localStorage.getItem(storeId))\n }\n } catch (e) {\n //\n }\n }\n\n return null\n }\n\n getState(id = this.id) {\n let state = null\n\n const store = this.getData(id)\n\n if (store) {\n if (typeof store.id !== 'undefined') {\n state = id === store.id\n } else if (typeof store.expanded !== 'undefined') {\n state = store.expanded\n }\n }\n\n return state\n }\n\n flush(id = this.id) {\n if (id) {\n try {\n const storeId = this.storeId(id)\n if (storeId) {\n window.localStorage.setItem(storeId, null)\n }\n } catch (e) {\n //\n }\n }\n }\n}\n\nexport function rememberWarning(type = 'accordion') {\n warn(`Missing \"id\" prop the ${type}! \"remember_state\" is enabled.`)\n}\n"],"mappings":"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"}
|
|
@@ -85,6 +85,7 @@ html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:hover:not([di
|
|
|
85
85
|
--ui-accordion-after-click-background: var(--color-sea-green);
|
|
86
86
|
--ui-accordion-after-click-border-color: var(--color-sea-green);
|
|
87
87
|
--ui-accordion-after-click-description-color: var(--color-white);
|
|
88
|
+
z-index: 1;
|
|
88
89
|
}
|
|
89
90
|
.dnb-accordion__header--outlined:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active[disabled] {
|
|
90
91
|
cursor: not-allowed;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
--ui-accordion-border-color
|
|
9
9
|
);--ui-accordion-expanded-description-color:var(
|
|
10
10
|
--ui-accordion-description-color
|
|
11
|
-
);--ui-accordion-after-click-color:var(--color-white);--ui-accordion-after-click-background:var(--color-sea-green);--ui-accordion-after-click-border-color:var(--color-sea-green);--ui-accordion-after-click-description-color:var(--color-white)}.dnb-accordion__header--outlined:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active[disabled]{cursor:not-allowed}.dnb-accordion__header--outlined:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active:not([disabled]){--accordion-border-width:0.0625rem;--ui-accordion-background:var(--color-pistachio);--ui-accordion-border-inset:inset}.dnb-accordion__header--filled{--accordion-border-width:0.125rem;--accordion-title-font-weight--expanded:var(--font-weight-basis);--ui-accordion-color:var(--color-emerald-green);--ui-accordion-background:var(--color-pistachio);--ui-accordion-border-color:var(--color-pistachio);--ui-accordion-description-color:var(--color-black-55)}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:hover:not([disabled]){--ui-accordion-background:var(--color-white)}.dnb-accordion__header--filled:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header--filled:active[disabled]{cursor:not-allowed}.dnb-accordion__header--filled:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header--filled:active:not([disabled]){--ui-accordion-color:var(--color-white);--ui-accordion-background:var(--color-sea-green);--ui-accordion-border-color:var(--color-sea-green);--ui-accordion-description-color:ar(--color-white)}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:not([disabled]){--ui-accordion-border-color:var(--color-sea-green)}.dnb-accordion__header--expanded{--ui-accordion-color--override:var(
|
|
11
|
+
);--ui-accordion-after-click-color:var(--color-white);--ui-accordion-after-click-background:var(--color-sea-green);--ui-accordion-after-click-border-color:var(--color-sea-green);--ui-accordion-after-click-description-color:var(--color-white);z-index:1}.dnb-accordion__header--outlined:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active[disabled]{cursor:not-allowed}.dnb-accordion__header--outlined:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:active:not([disabled]){--accordion-border-width:0.0625rem;--ui-accordion-background:var(--color-pistachio);--ui-accordion-border-inset:inset}.dnb-accordion__header--filled{--accordion-border-width:0.125rem;--accordion-title-font-weight--expanded:var(--font-weight-basis);--ui-accordion-color:var(--color-emerald-green);--ui-accordion-background:var(--color-pistachio);--ui-accordion-border-color:var(--color-pistachio);--ui-accordion-description-color:var(--color-black-55)}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:hover:not([disabled]){--ui-accordion-background:var(--color-white)}.dnb-accordion__header--filled:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header--filled:active[disabled]{cursor:not-allowed}.dnb-accordion__header--filled:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header--filled:active:not([disabled]){--ui-accordion-color:var(--color-white);--ui-accordion-background:var(--color-sea-green);--ui-accordion-border-color:var(--color-sea-green);--ui-accordion-description-color:ar(--color-white)}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header--filled:focus-visible:not([disabled]){--ui-accordion-border-color:var(--color-sea-green)}.dnb-accordion__header--expanded{--ui-accordion-color--override:var(
|
|
12
12
|
--ui-accordion-expanded-color--override,var(--ui-accordion-expanded-color)
|
|
13
13
|
);--ui-accordion-background--override:var(
|
|
14
14
|
--ui-accordion-expanded-background--override,var(--ui-accordion-expanded-background)
|
|
@@ -85,6 +85,7 @@
|
|
|
85
85
|
--ui-accordion-background: var(--color-white);
|
|
86
86
|
--ui-accordion-border-color: var(--color-emerald-green);
|
|
87
87
|
--ui-accordion-description-color: var(--color-black-55);
|
|
88
|
+
// Removes the optional 'inset' property on the box-shadow border, on hover.
|
|
88
89
|
--ui-accordion-border-inset: ;
|
|
89
90
|
|
|
90
91
|
// state = expanded
|
|
@@ -102,6 +103,8 @@
|
|
|
102
103
|
--ui-accordion-after-click-background: var(--color-sea-green);
|
|
103
104
|
--ui-accordion-after-click-border-color: var(--color-sea-green);
|
|
104
105
|
--ui-accordion-after-click-description-color: var(--color-white);
|
|
106
|
+
|
|
107
|
+
z-index: 1;
|
|
105
108
|
}
|
|
106
109
|
|
|
107
110
|
@include active() {
|
|
@@ -60,7 +60,7 @@ export type ButtonProps = {
|
|
|
60
60
|
*/
|
|
61
61
|
variant?: ButtonVariant;
|
|
62
62
|
/**
|
|
63
|
-
* The size of the button. For now there is "medium", "default" and "large".
|
|
63
|
+
* The size of the button. For now there is "small", "medium", "default" and "large".
|
|
64
64
|
*/
|
|
65
65
|
size?: ButtonSize;
|
|
66
66
|
/**
|
|
@@ -11,7 +11,7 @@ var _Section = require("../section/Section");
|
|
|
11
11
|
var _componentHelper = require("../../shared/component-helper");
|
|
12
12
|
var _useId = _interopRequireDefault(require("../../shared/helpers/useId"));
|
|
13
13
|
var _Space = _interopRequireDefault(require("../Space"));
|
|
14
|
-
const _excluded = ["className", "stack", "direction", "gap", "spacing", "innerSpace", "alignSelf", "divider", "rowGap", "responsive", "filled", "title", "children"];
|
|
14
|
+
const _excluded = ["className", "stack", "direction", "gap", "spacing", "innerSpace", "alignSelf", "align", "divider", "rowGap", "responsive", "filled", "title", "children"];
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
16
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
17
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
@@ -30,6 +30,7 @@ function Card(props) {
|
|
|
30
30
|
spacing,
|
|
31
31
|
innerSpace,
|
|
32
32
|
alignSelf = 'stretch',
|
|
33
|
+
align,
|
|
33
34
|
divider = 'space',
|
|
34
35
|
rowGap,
|
|
35
36
|
responsive = true,
|
|
@@ -63,7 +64,7 @@ function Card(props) {
|
|
|
63
64
|
className: (0, _classnames.default)('dnb-card', className, responsive && 'dnb-card--responsive', filled && 'dnb-card--filled'),
|
|
64
65
|
breakout: responsive ? trueWhenSmall : false,
|
|
65
66
|
roundedCorner: responsive ? falseWhenSmall : true,
|
|
66
|
-
outline:
|
|
67
|
+
outline: '--outline-card-color',
|
|
67
68
|
innerSpace: innerSpace !== null && innerSpace !== void 0 ? innerSpace : {
|
|
68
69
|
small: smallSpace,
|
|
69
70
|
medium: basisSpace,
|
|
@@ -79,7 +80,7 @@ function Card(props) {
|
|
|
79
80
|
direction: direction !== null && direction !== void 0 ? direction : 'vertical',
|
|
80
81
|
divider: divider,
|
|
81
82
|
alignSelf: alignSelf,
|
|
82
|
-
align: stack ? 'stretch' :
|
|
83
|
+
align: stack ? 'stretch' : align,
|
|
83
84
|
wrap: !stack,
|
|
84
85
|
gap: stack ? 'medium' : (gap !== null && gap !== void 0 ? gap : spacing) || false,
|
|
85
86
|
rowGap: rowGap || false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_classnames","_Flex","_Section","_componentHelper","_useId","_Space","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Card","props","className","stack","direction","gap","spacing","innerSpace","alignSelf","divider","rowGap","responsive","filled","title","children","rest","titleId","useId","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","params","SectionParams","classnames","breakout","roundedCorner","outline","combineLabelledBy","createElement","Item","element","Container","
|
|
1
|
+
{"version":3,"file":"Card.js","names":["_react","_interopRequireDefault","require","_classnames","_Flex","_Section","_componentHelper","_useId","_Space","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Card","props","className","stack","direction","gap","spacing","innerSpace","alignSelf","align","divider","rowGap","responsive","filled","title","children","rest","titleId","useId","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","params","SectionParams","classnames","breakout","roundedCorner","outline","combineLabelledBy","createElement","Item","element","Container","wrap","id","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\nimport { combineLabelledBy } from '../../shared/component-helper'\nimport useId from '../../shared/helpers/useId'\n\nimport type { BasicProps as FlexContainerProps } from '../flex/Container'\nimport type { BasicProps as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\nimport type { SpaceProps } from '../Space'\nimport Space from '../Space'\n\nexport type Props = {\n /**\n * Define a title that appears on top of the Card\n */\n title?: React.ReactNode\n\n /**\n * Define if the Card should behave responsive. Defaults to `true`\n */\n responsive?: boolean\n\n /**\n * Define if the Card should get the same background color as the outline border\n */\n filled?: boolean\n} & FlexContainerProps &\n FlexItemProps & {\n stack?: boolean\n } & SpaceProps &\n Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size'>\n\nfunction Card(props: Props) {\n const {\n className,\n stack,\n direction,\n gap,\n spacing,\n innerSpace,\n alignSelf = 'stretch',\n align,\n divider = 'space',\n rowGap,\n responsive = true,\n filled,\n title,\n children,\n ...rest\n } = props\n\n const titleId = useId()\n const falseWhenSmall = { small: false, medium: true, large: true }\n const trueWhenSmall = { small: true, medium: false, large: false }\n const basisSpace = {\n top: 'medium',\n right: 'medium',\n bottom: 'large',\n left: 'medium',\n }\n const smallSpace = responsive\n ? {\n ...basisSpace,\n right: 0,\n left: 0,\n }\n : basisSpace\n\n const params = SectionParams({\n className: classnames(\n 'dnb-card',\n className,\n responsive && 'dnb-card--responsive',\n filled && 'dnb-card--filled'\n ),\n breakout: responsive ? trueWhenSmall : false,\n roundedCorner: responsive ? falseWhenSmall : true,\n outline: '--outline-card-color',\n innerSpace:\n innerSpace ??\n ({\n small: smallSpace,\n medium: basisSpace,\n large: basisSpace,\n } as SpaceTypeMedia),\n ...(rest as SectionProps),\n 'aria-labelledby': combineLabelledBy(rest, title && titleId),\n })\n\n return (\n <Flex.Item alignSelf={alignSelf} element=\"section\" {...params}>\n <Flex.Container\n direction={direction ?? 'vertical'}\n divider={divider}\n alignSelf={alignSelf}\n align={stack ? 'stretch' : align}\n wrap={!stack}\n gap={stack ? 'medium' : (gap ?? spacing) || false}\n rowGap={rowGap || false}\n >\n {title && (\n <Space id={titleId} className=\"dnb-card__title\">\n {title}\n </Space>\n )}\n {children}\n </Flex.Container>\n </Flex.Item>\n )\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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"}
|
|
@@ -17,8 +17,24 @@
|
|
|
17
17
|
padding: 1rem;
|
|
18
18
|
}
|
|
19
19
|
.dnb-card.dnb-section {
|
|
20
|
+
--outline-color: var(--card-outline-color);
|
|
21
|
+
--outline-width: var(--card-outline-width);
|
|
22
|
+
--background-color: var(--card-background-color);
|
|
20
23
|
background-color: var(--background-color);
|
|
21
24
|
}
|
|
25
|
+
.dnb-card .dnb-section {
|
|
26
|
+
z-index: 1;
|
|
27
|
+
}
|
|
28
|
+
@media screen and (min-width: 40em) {
|
|
29
|
+
.dnb-card {
|
|
30
|
+
--nested-space-l: calc(var(--padding-left, 0px) * -1);
|
|
31
|
+
--nested-space-r: calc(var(--padding-right, 0px) * -1);
|
|
32
|
+
}
|
|
33
|
+
.dnb-card .dnb-section::after {
|
|
34
|
+
--left: var(--nested-space-l);
|
|
35
|
+
--width: calc(100% - var(--nested-space-r) * 2);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
22
38
|
.dnb-card--filled.dnb-card.dnb-section {
|
|
23
39
|
--background-color: var(--outline-color);
|
|
24
40
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.dnb-card__title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding-bottom:1rem}.dnb-card:not([style*="--space-"]) .dnb-card__title{padding:1rem}.dnb-card.dnb-section{background-color:var(--background-color)}.dnb-card--filled.dnb-card.dnb-section{--background-color:var(--outline-color)}@media screen and (max-width:40em){.dnb-card--responsive.dnb-section:before{--outline:99vw 0 0 0 var(--background-color),198vw 0 0 0 var(--background-color),297vw 0 0 0 var(--background-color),396vw 0 0 0 var(--background-color),0 var(--outline-width) 0 0 var(--outline-color),99vw var(--outline-width) 0 0 var(--outline-color),0 calc(var(--outline-width)*-1) 0 0 var(--outline-color),99vw calc(var(--outline-width)*-1) 0 0 var(--outline-color),198vw var(--outline-width) 0 0 var(--outline-color),198vw calc(var(--outline-width)*-1) 0 0 var(--outline-color);left:var(--left)}.dnb-card+.dnb-card--responsive:not([class*=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.dnb-card+.dnb-card--responsive:not([class*=space__top]):before{top:var(--outline-width)}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive:before{top:var(--outline-width);z-index:0}}.dnb-card .dnb-flex-container:has(>.dnb-card__title+.dnb-scroll-view){align-items:stretch;flex-wrap:nowrap}.dnb-card--filled .dnb-scroll-view{clip-path:inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner))}.dnb-card>.dnb-flex-container>.dnb-space:has(>.dnb-scroll-view){width:100%}.dnb-card>.dnb-flex-container--align-stretch>.dnb-button{align-self:flex-start}
|
|
1
|
+
.dnb-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-card+.dnb-card__heading{margin-top:var(--spacing-small)}.dnb-card__title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);padding-bottom:1rem}.dnb-card:not([style*="--space-"]) .dnb-card__title{padding:1rem}.dnb-card.dnb-section{--outline-color:var(--card-outline-color);--outline-width:var(--card-outline-width);--background-color:var(--card-background-color);background-color:var(--background-color)}.dnb-card .dnb-section{z-index:1}@media screen and (min-width:40em){.dnb-card{--nested-space-l:calc(var(--padding-left, 0px)*-1);--nested-space-r:calc(var(--padding-right, 0px)*-1)}.dnb-card .dnb-section:after{--left:var(--nested-space-l);--width:calc(100% - var(--nested-space-r)*2)}}.dnb-card--filled.dnb-card.dnb-section{--background-color:var(--outline-color)}@media screen and (max-width:40em){.dnb-card--responsive.dnb-section:before{--outline:99vw 0 0 0 var(--background-color),198vw 0 0 0 var(--background-color),297vw 0 0 0 var(--background-color),396vw 0 0 0 var(--background-color),0 var(--outline-width) 0 0 var(--outline-color),99vw var(--outline-width) 0 0 var(--outline-color),0 calc(var(--outline-width)*-1) 0 0 var(--outline-color),99vw calc(var(--outline-width)*-1) 0 0 var(--outline-color),198vw var(--outline-width) 0 0 var(--outline-color),198vw calc(var(--outline-width)*-1) 0 0 var(--outline-color);left:var(--left)}.dnb-card+.dnb-card--responsive:not([class*=space__top]){background:linear-gradient(to left,var(--background-color),var(--background-color)) no-repeat 0 var(--outline-width)}.dnb-card+.dnb-card--responsive:not([class*=space__top]):before{top:var(--outline-width)}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive{margin-top:0}.dnb-flex-container.dnb-flex-container--divider-space .dnb-card+.dnb-card--responsive:before{top:var(--outline-width);z-index:0}}.dnb-card .dnb-flex-container:has(>.dnb-card__title+.dnb-scroll-view){align-items:stretch;flex-wrap:nowrap}.dnb-card--filled .dnb-scroll-view{clip-path:inset(0 0 0 0 round var(--rounded-corner) var(--rounded-corner) var(--rounded-corner) var(--rounded-corner))}.dnb-card>.dnb-flex-container>.dnb-space:has(>.dnb-scroll-view){width:100%}.dnb-card>.dnb-flex-container--align-stretch>.dnb-button{align-self:flex-start}
|
|
@@ -20,9 +20,26 @@
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
&.dnb-section {
|
|
23
|
+
--outline-color: var(--card-outline-color);
|
|
24
|
+
--outline-width: var(--card-outline-width);
|
|
25
|
+
--background-color: var(--card-background-color);
|
|
26
|
+
|
|
23
27
|
background-color: var(--background-color);
|
|
24
28
|
}
|
|
25
29
|
|
|
30
|
+
& .dnb-section {
|
|
31
|
+
z-index: 1;
|
|
32
|
+
}
|
|
33
|
+
@include allAbove(small) {
|
|
34
|
+
// These vars needs to be declared outside of the nested .dnb-section
|
|
35
|
+
--nested-space-l: calc(var(--padding-left, 0px) * -1);
|
|
36
|
+
--nested-space-r: calc(var(--padding-right, 0px) * -1);
|
|
37
|
+
& .dnb-section::after {
|
|
38
|
+
--left: var(--nested-space-l);
|
|
39
|
+
--width: calc(100% - var(--nested-space-r) * 2);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
26
43
|
&--filled#{&}.dnb-section {
|
|
27
44
|
--background-color: var(--outline-color);
|
|
28
45
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
.dnb-card
|
|
2
|
-
--outline-color: var(--border-color, var(--sb-color-gray-light));
|
|
3
|
-
--outline-width: 0.0625rem;
|
|
4
|
-
--background-color: var(--sb-color-white);
|
|
1
|
+
.dnb-card {
|
|
2
|
+
--card-outline-color: var(--border-color, var(--sb-color-gray-light));
|
|
3
|
+
--card-outline-width: 0.0625rem;
|
|
4
|
+
--card-background-color: var(--sb-color-white);
|
|
5
5
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.dnb-card
|
|
1
|
+
.dnb-card{--card-outline-color:var(--border-color,var(--sb-color-gray-light));--card-outline-width:0.0625rem;--card-background-color:var(--sb-color-white)}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
.dnb-card {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
--background-color: var(--sb-color-white);
|
|
6
|
-
}
|
|
2
|
+
--card-outline-color: var(--border-color, var(--sb-color-gray-light));
|
|
3
|
+
--card-outline-width: 0.0625rem;
|
|
4
|
+
--card-background-color: var(--sb-color-white);
|
|
7
5
|
}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
--outline-color: var(--border-color, var(--color-lavender));
|
|
6
|
-
--outline-width: 0.25rem;
|
|
7
|
-
--background-color: var(--color-white);
|
|
1
|
+
.dnb-card {
|
|
2
|
+
--card-outline-color: var(--border-color, var(--color-lavender));
|
|
3
|
+
--card-outline-width: 0.25rem;
|
|
4
|
+
--card-background-color: var(--color-white);
|
|
8
5
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.dnb-card
|
|
1
|
+
.dnb-card{--card-outline-color:var(--border-color,var(--color-lavender));--card-outline-width:0.25rem;--card-background-color:var(--color-white)}
|
|
@@ -1,9 +1,5 @@
|
|
|
1
|
-
@import '../../../../style/core/utilities.scss';
|
|
2
|
-
|
|
3
1
|
.dnb-card {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
--background-color: var(--color-white);
|
|
8
|
-
}
|
|
2
|
+
--card-outline-color: var(--border-color, var(--color-lavender));
|
|
3
|
+
--card-outline-width: 0.25rem;
|
|
4
|
+
--card-background-color: var(--color-white);
|
|
9
5
|
}
|
|
@@ -34,7 +34,7 @@ export type HeightAnimationProps = {
|
|
|
34
34
|
innerRef?: React.RefObject<HTMLElement>;
|
|
35
35
|
} & useHeightAnimationOptions;
|
|
36
36
|
export type HeightAnimationAllProps = HeightAnimationProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
|
|
37
|
-
declare function HeightAnimation({ open, animate, keepInDOM, showOverflow, element, duration, delay, className, innerRef, children, onInit, onOpen, onAnimationStart, onAnimationEnd, ...rest }: HeightAnimationAllProps): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
declare function HeightAnimation({ open, animate, keepInDOM, showOverflow, element, duration, delay, className, innerRef, children, compensateForGap, onInit, onOpen, onAnimationStart, onAnimationEnd, ...rest }: HeightAnimationAllProps): import("react/jsx-runtime").JSX.Element;
|
|
38
38
|
declare namespace HeightAnimation {
|
|
39
39
|
var _supportsSpacingProps: string;
|
|
40
40
|
}
|
|
@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
10
|
var _useHeightAnimation = require("./useHeightAnimation");
|
|
11
11
|
var _Space = _interopRequireDefault(require("../space/Space"));
|
|
12
|
-
const _excluded = ["open", "animate", "keepInDOM", "showOverflow", "element", "duration", "delay", "className", "innerRef", "children", "onInit", "onOpen", "onAnimationStart", "onAnimationEnd"];
|
|
12
|
+
const _excluded = ["open", "animate", "keepInDOM", "showOverflow", "element", "duration", "delay", "className", "innerRef", "children", "compensateForGap", "onInit", "onOpen", "onAnimationStart", "onAnimationEnd"];
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
14
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
15
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -33,6 +33,7 @@ function HeightAnimation(_ref) {
|
|
|
33
33
|
className,
|
|
34
34
|
innerRef,
|
|
35
35
|
children,
|
|
36
|
+
compensateForGap,
|
|
36
37
|
onInit = null,
|
|
37
38
|
onOpen = null,
|
|
38
39
|
onAnimationStart = null,
|
|
@@ -51,6 +52,7 @@ function HeightAnimation(_ref) {
|
|
|
51
52
|
open,
|
|
52
53
|
animate,
|
|
53
54
|
children,
|
|
55
|
+
compensateForGap,
|
|
54
56
|
onInit,
|
|
55
57
|
onOpen,
|
|
56
58
|
onAnimationStart,
|
|
@@ -71,7 +73,9 @@ function HeightAnimation(_ref) {
|
|
|
71
73
|
className: (0, _classnames.default)('dnb-height-animation', className, isVisible ? 'dnb-height-animation--is-visible' : !isAnimating && !open && 'dnb-height-animation--hidden', isInDOM && 'dnb-height-animation--is-in-dom', animate && isVisibleParallax && 'dnb-height-animation--parallax', isAnimating && 'dnb-height-animation--animating', showOverflow && 'dnb-height-animation--show-overflow'),
|
|
72
74
|
style: _objectSpread(_objectSpread({}, firstPaintStyle), rest === null || rest === void 0 ? void 0 : rest.style),
|
|
73
75
|
"aria-hidden": keepInDOM ? !open : undefined
|
|
74
|
-
}, rest),
|
|
76
|
+
}, rest), compensateForGap ? _react.default.createElement("div", {
|
|
77
|
+
className: "compensateForGap"
|
|
78
|
+
}, children) : children);
|
|
75
79
|
}
|
|
76
80
|
HeightAnimation._supportsSpacingProps = 'children';
|
|
77
81
|
var _default = HeightAnimation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeightAnimation.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_useHeightAnimation","_Space","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","HeightAnimation","_ref","open","animate","keepInDOM","showOverflow","element","duration","delay","className","innerRef","children","onInit","onOpen","onAnimationStart","onAnimationEnd","rest","elementRef","useRef","targetRef","isInDOM","isVisible","isVisibleParallax","isAnimating","firstPaintStyle","useHeightAnimation","createElement","classnames","style","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/height-animation/HeightAnimation.tsx"],"sourcesContent":["import React, { useRef } from 'react'\nimport classnames from 'classnames'\nimport {\n useHeightAnimation,\n useHeightAnimationOptions,\n} from './useHeightAnimation'\nimport Space from '../space/Space'\n\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type HeightAnimationProps = {\n /**\n * Whether the nested children content should be kept in the DOM or not.\n * Default: false\n */\n keepInDOM?: boolean\n\n /**\n * Set to `true` to omit the usage of \"overflow: hidden;\"\n * Default: false\n */\n showOverflow?: boolean\n\n /**\n * Defines the duration of the animation in milliseconds.\n * Default: 400\n */\n duration?: number\n\n /**\n * Defines the delay of the animation in milliseconds.\n * Default: 0\n */\n delay?: number\n\n /**\n * Define a custom HTML Element.\n * Default: div\n */\n element?: DynamicElement\n\n /**\n * Send along a custom React Ref.\n * Default: null\n */\n innerRef?: React.RefObject<HTMLElement>\n} & useHeightAnimationOptions\n\nexport type HeightAnimationAllProps = HeightAnimationProps &\n SpacingProps &\n Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nfunction HeightAnimation({\n open = true,\n animate = true,\n keepInDOM = false,\n showOverflow = false,\n element,\n duration,\n delay,\n className,\n innerRef,\n children,\n onInit = null,\n onOpen = null,\n onAnimationStart = null,\n onAnimationEnd = null,\n ...rest\n}: HeightAnimationAllProps) {\n const elementRef = useRef<HTMLElement>()\n const targetRef = innerRef || elementRef\n\n const {\n isInDOM,\n isVisible,\n isVisibleParallax,\n isAnimating,\n firstPaintStyle,\n } = useHeightAnimation(targetRef, {\n open,\n animate,\n children,\n onInit,\n onOpen,\n onAnimationStart,\n onAnimationEnd,\n })\n\n if (!keepInDOM && !isInDOM && !isAnimating) {\n return null\n }\n\n if (duration) {\n firstPaintStyle['--duration'] = `${duration}ms`\n }\n if (delay) {\n firstPaintStyle['--delay'] = `${delay}ms`\n }\n\n return (\n <Space\n innerRef={targetRef}\n element={element || 'div'}\n className={classnames(\n 'dnb-height-animation',\n isInDOM && 'dnb-height-animation--is-in-dom',\n isVisible && 'dnb-height-animation--is-visible',\n animate && isVisibleParallax && 'dnb-height-animation--parallax',\n isAnimating && 'dnb-height-animation--animating',\n !isVisible &&\n !isAnimating &&\n !open &&\n 'dnb-height-animation--hidden',\n showOverflow && 'dnb-height-animation--show-overflow',\n className\n )}\n style={{ ...firstPaintStyle, ...rest?.style }}\n aria-hidden={keepInDOM ? !open : undefined}\n {...rest}\n >\n {children}\n </Space>\n )\n}\n\nHeightAnimation._supportsSpacingProps = 'children'\n\nexport default HeightAnimation\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"HeightAnimation.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_useHeightAnimation","_Space","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","HeightAnimation","_ref","open","animate","keepInDOM","showOverflow","element","duration","delay","className","innerRef","children","compensateForGap","onInit","onOpen","onAnimationStart","onAnimationEnd","rest","elementRef","useRef","targetRef","isInDOM","isVisible","isVisibleParallax","isAnimating","firstPaintStyle","useHeightAnimation","createElement","classnames","style","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/height-animation/HeightAnimation.tsx"],"sourcesContent":["import React, { useRef } from 'react'\nimport classnames from 'classnames'\nimport {\n useHeightAnimation,\n useHeightAnimationOptions,\n} from './useHeightAnimation'\nimport Space from '../space/Space'\n\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type HeightAnimationProps = {\n /**\n * Whether the nested children content should be kept in the DOM or not.\n * Default: false\n */\n keepInDOM?: boolean\n\n /**\n * Set to `true` to omit the usage of \"overflow: hidden;\"\n * Default: false\n */\n showOverflow?: boolean\n\n /**\n * Defines the duration of the animation in milliseconds.\n * Default: 400\n */\n duration?: number\n\n /**\n * Defines the delay of the animation in milliseconds.\n * Default: 0\n */\n delay?: number\n\n /**\n * Define a custom HTML Element.\n * Default: div\n */\n element?: DynamicElement\n\n /**\n * Send along a custom React Ref.\n * Default: null\n */\n innerRef?: React.RefObject<HTMLElement>\n} & useHeightAnimationOptions\n\nexport type HeightAnimationAllProps = HeightAnimationProps &\n SpacingProps &\n Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nfunction HeightAnimation({\n open = true,\n animate = true,\n keepInDOM = false,\n showOverflow = false,\n element,\n duration,\n delay,\n className,\n innerRef,\n children,\n compensateForGap,\n onInit = null,\n onOpen = null,\n onAnimationStart = null,\n onAnimationEnd = null,\n ...rest\n}: HeightAnimationAllProps) {\n const elementRef = useRef<HTMLElement>()\n const targetRef = innerRef || elementRef\n\n const {\n isInDOM,\n isVisible,\n isVisibleParallax,\n isAnimating,\n firstPaintStyle,\n } = useHeightAnimation(targetRef, {\n open,\n animate,\n children,\n compensateForGap,\n onInit,\n onOpen,\n onAnimationStart,\n onAnimationEnd,\n })\n\n if (!keepInDOM && !isInDOM && !isAnimating) {\n return null\n }\n\n if (duration) {\n firstPaintStyle['--duration'] = `${duration}ms`\n }\n if (delay) {\n firstPaintStyle['--delay'] = `${delay}ms`\n }\n\n return (\n <Space\n innerRef={targetRef}\n element={element || 'div'}\n className={classnames(\n 'dnb-height-animation',\n isInDOM && 'dnb-height-animation--is-in-dom',\n isVisible && 'dnb-height-animation--is-visible',\n animate && isVisibleParallax && 'dnb-height-animation--parallax',\n isAnimating && 'dnb-height-animation--animating',\n !isVisible &&\n !isAnimating &&\n !open &&\n 'dnb-height-animation--hidden',\n showOverflow && 'dnb-height-animation--show-overflow',\n className\n )}\n style={{ ...firstPaintStyle, ...rest?.style }}\n aria-hidden={keepInDOM ? !open : undefined}\n {...rest}\n >\n {compensateForGap ? (\n <div className=\"compensateForGap\">{children}</div>\n ) : (\n children\n )}\n </Space>\n )\n}\n\nHeightAnimation._supportsSpacingProps = 'children'\n\nexport default HeightAnimation\n"],"mappings":"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"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.HeightAnimationProperties = exports.HeightAnimationEvents = void 0;
|
|
7
|
+
const HeightAnimationProperties = {
|
|
8
|
+
open: {
|
|
9
|
+
doc: 'Set to `true` on second re-render when the view should animate from 0px to auto. Defaults to `true`.',
|
|
10
|
+
type: 'boolean',
|
|
11
|
+
status: 'optional'
|
|
12
|
+
},
|
|
13
|
+
animate: {
|
|
14
|
+
doc: 'Set to `false` to omit the animation. Defaults to `true`.',
|
|
15
|
+
type: 'boolean',
|
|
16
|
+
status: 'optional'
|
|
17
|
+
},
|
|
18
|
+
keepInDOM: {
|
|
19
|
+
doc: 'Set to `true` ensure the nested children content will be kept in the DOM. Defaults to `false`.',
|
|
20
|
+
type: 'boolean',
|
|
21
|
+
status: 'optional'
|
|
22
|
+
},
|
|
23
|
+
compensateForGap: {
|
|
24
|
+
doc: 'To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.',
|
|
25
|
+
type: 'string',
|
|
26
|
+
status: 'optional'
|
|
27
|
+
},
|
|
28
|
+
showOverflow: {
|
|
29
|
+
doc: 'Set to `true` to omit the usage of "overflow: hidden;". Defaults to `false`.',
|
|
30
|
+
type: 'boolean',
|
|
31
|
+
status: 'optional'
|
|
32
|
+
},
|
|
33
|
+
duration: {
|
|
34
|
+
doc: 'Custom duration of the animation in milliseconds. Defaults to `400ms`.',
|
|
35
|
+
type: 'number',
|
|
36
|
+
status: 'optional'
|
|
37
|
+
},
|
|
38
|
+
delay: {
|
|
39
|
+
doc: 'Custom delay of the animation in milliseconds. Defaults to `0ms`.',
|
|
40
|
+
type: 'number',
|
|
41
|
+
status: 'optional'
|
|
42
|
+
},
|
|
43
|
+
element: {
|
|
44
|
+
doc: 'Custom HTML element for the component. Defaults to `div` HTML Element.',
|
|
45
|
+
type: 'string',
|
|
46
|
+
status: 'optional'
|
|
47
|
+
},
|
|
48
|
+
innerRef: {
|
|
49
|
+
doc: 'Send along a custom React Ref.',
|
|
50
|
+
type: 'React.RefObject',
|
|
51
|
+
status: 'optional'
|
|
52
|
+
},
|
|
53
|
+
'[Space](/uilib/layout/space/properties)': {
|
|
54
|
+
doc: 'spacing properties like `top` or `bottom` are supported.',
|
|
55
|
+
type: ['string', 'object'],
|
|
56
|
+
status: 'optional'
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
exports.HeightAnimationProperties = HeightAnimationProperties;
|
|
60
|
+
const HeightAnimationEvents = {
|
|
61
|
+
onOpen: {
|
|
62
|
+
doc: 'Is called when fully opened or closed. Returns `true` or `false` depending on the state.',
|
|
63
|
+
type: 'function',
|
|
64
|
+
status: 'optional'
|
|
65
|
+
},
|
|
66
|
+
onAnimationStart: {
|
|
67
|
+
doc: 'Is called when animation has started.',
|
|
68
|
+
type: 'function',
|
|
69
|
+
status: 'optional'
|
|
70
|
+
},
|
|
71
|
+
onAnimationEnd: {
|
|
72
|
+
doc: 'Is called when animation is done and the full height is reached.',
|
|
73
|
+
type: 'function',
|
|
74
|
+
status: 'optional'
|
|
75
|
+
},
|
|
76
|
+
onInit: {
|
|
77
|
+
doc: 'Is called once before mounting the component (useLayoutEffect). Returns the instance of the internal animation class.',
|
|
78
|
+
type: 'function',
|
|
79
|
+
status: 'optional'
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
exports.HeightAnimationEvents = HeightAnimationEvents;
|
|
83
|
+
//# sourceMappingURL=HeightAnimationDocs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeightAnimationDocs.js","names":["HeightAnimationProperties","open","doc","type","status","animate","keepInDOM","compensateForGap","showOverflow","duration","delay","element","innerRef","exports","HeightAnimationEvents","onOpen","onAnimationStart","onAnimationEnd","onInit"],"sources":["../../../../src/components/height-animation/HeightAnimationDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const HeightAnimationProperties: PropertiesTableProps = {\n open: {\n doc: 'Set to `true` on second re-render when the view should animate from 0px to auto. Defaults to `true`.',\n type: 'boolean',\n status: 'optional',\n },\n animate: {\n doc: 'Set to `false` to omit the animation. Defaults to `true`.',\n type: 'boolean',\n status: 'optional',\n },\n keepInDOM: {\n doc: 'Set to `true` ensure the nested children content will be kept in the DOM. Defaults to `false`.',\n type: 'boolean',\n status: 'optional',\n },\n compensateForGap: {\n doc: 'To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.',\n type: 'string',\n status: 'optional',\n },\n showOverflow: {\n doc: 'Set to `true` to omit the usage of \"overflow: hidden;\". Defaults to `false`.',\n type: 'boolean',\n status: 'optional',\n },\n duration: {\n doc: 'Custom duration of the animation in milliseconds. Defaults to `400ms`.',\n type: 'number',\n status: 'optional',\n },\n delay: {\n doc: 'Custom delay of the animation in milliseconds. Defaults to `0ms`.',\n type: 'number',\n status: 'optional',\n },\n element: {\n doc: 'Custom HTML element for the component. Defaults to `div` HTML Element.',\n type: 'string',\n status: 'optional',\n },\n innerRef: {\n doc: 'Send along a custom React Ref.',\n type: 'React.RefObject',\n status: 'optional',\n },\n '[Space](/uilib/layout/space/properties)': {\n doc: 'spacing properties like `top` or `bottom` are supported.',\n type: ['string', 'object'],\n status: 'optional',\n },\n}\n\nexport const HeightAnimationEvents: PropertiesTableProps = {\n onOpen: {\n doc: 'Is called when fully opened or closed. Returns `true` or `false` depending on the state.',\n type: 'function',\n status: 'optional',\n },\n onAnimationStart: {\n doc: 'Is called when animation has started.',\n type: 'function',\n status: 'optional',\n },\n onAnimationEnd: {\n doc: 'Is called when animation is done and the full height is reached.',\n type: 'function',\n status: 'optional',\n },\n onInit: {\n doc: 'Is called once before mounting the component (useLayoutEffect). Returns the instance of the internal animation class.',\n type: 'function',\n status: 'optional',\n },\n}\n"],"mappings":";;;;;;AAEO,MAAMA,yBAA+C,GAAG;EAC7DC,IAAI,EAAE;IACJC,GAAG,EAAE,sGAAsG;IAC3GC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,gBAAgB,EAAE;IAChBL,GAAG,EAAE,gJAAgJ;IACrJC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,YAAY,EAAE;IACZN,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRP,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,KAAK,EAAE;IACLR,GAAG,EAAE,mEAAmE;IACxEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,OAAO,EAAE;IACPT,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,gCAAgC;IACrCC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAAAS,OAAA,CAAAb,yBAAA,GAAAA,yBAAA;AAEM,MAAMc,qBAA2C,GAAG;EACzDC,MAAM,EAAE;IACNb,GAAG,EAAE,0FAA0F;IAC/FC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDY,gBAAgB,EAAE;IAChBd,GAAG,EAAE,uCAAuC;IAC5CC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDa,cAAc,EAAE;IACdf,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDc,MAAM,EAAE;IACNhB,GAAG,EAAE,uHAAuH;IAC5HC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC;AAAAS,OAAA,CAAAC,qBAAA,GAAAA,qBAAA"}
|
|
@@ -6,8 +6,9 @@
|
|
|
6
6
|
* Utilities
|
|
7
7
|
*/
|
|
8
8
|
.dnb-height-animation {
|
|
9
|
-
--height-animation:
|
|
10
|
-
|
|
9
|
+
--height-animation-duration: var(--duration, 400ms);
|
|
10
|
+
--height-animation: height var(--height-animation-duration)
|
|
11
|
+
var(--easing-default) var(--delay, 0ms);
|
|
11
12
|
will-change: height;
|
|
12
13
|
transition: var(--height-animation);
|
|
13
14
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.dnb-height-animation{--height-animation:
|
|
1
|
+
.dnb-height-animation{--height-animation-duration:var(--duration,400ms);--height-animation:height var(--height-animation-duration) var(--easing-default) var(--delay,0ms);transition:var(--height-animation);will-change:height}html[data-visual-test] .dnb-height-animation,html[data-visual-test] .dnb-height-animation *{transition:none!important}.dnb-height-animation--animating{overflow-y:hidden}@supports (overflow-y:clip){.dnb-height-animation--animating{overflow-y:clip}}.dnb-height-animation--hidden{display:none}.dnb-height-animation--show-overflow{overflow:visible}
|
|
@@ -6,8 +6,9 @@
|
|
|
6
6
|
@import '../../../style/core/utilities.scss';
|
|
7
7
|
|
|
8
8
|
.dnb-height-animation {
|
|
9
|
-
--height-animation:
|
|
10
|
-
|
|
9
|
+
--height-animation-duration: var(--duration, 400ms);
|
|
10
|
+
--height-animation: height var(--height-animation-duration)
|
|
11
|
+
var(--easing-default) var(--delay, 0ms);
|
|
11
12
|
|
|
12
13
|
will-change: height;
|
|
13
14
|
transition: var(--height-animation);
|
|
@@ -11,6 +11,11 @@ export type useHeightAnimationOptions = {
|
|
|
11
11
|
* Default: true
|
|
12
12
|
*/
|
|
13
13
|
animate?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* To compensate for CSS gap between the rows, so animation does not jump during the animation.
|
|
16
|
+
* Provide a CSS unit or `var(--row-gap)`.
|
|
17
|
+
*/
|
|
18
|
+
compensateForGap?: string | 'auto';
|
|
14
19
|
/**
|
|
15
20
|
* In order to let the Hook know when children has changed
|
|
16
21
|
*/
|
|
@@ -34,7 +39,7 @@ export type useHeightAnimationOptions = {
|
|
|
34
39
|
};
|
|
35
40
|
export type HeightAnimationOnStartTypes = 'opening' | 'closing' | 'adjusting';
|
|
36
41
|
export type HeightAnimationOnEndTypes = 'opened' | 'closed' | 'adjusted';
|
|
37
|
-
export declare function useHeightAnimation(targetRef: React.RefObject<HTMLElement>, { open, animate, children, onInit, onOpen, onAnimationStart, onAnimationEnd, }?: useHeightAnimationOptions): {
|
|
42
|
+
export declare function useHeightAnimation(targetRef: React.RefObject<HTMLElement>, { open, animate, children, compensateForGap, onInit, onOpen, onAnimationStart, onAnimationEnd, }?: useHeightAnimationOptions): {
|
|
38
43
|
open: boolean;
|
|
39
44
|
isOpen: boolean;
|
|
40
45
|
isInDOM: boolean;
|