@dnb/eufemia 10.0.0-beta.6 → 10.0.0-beta.8

package/components/date-picker/DatePicker.js

@@ -5,7 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _AlignmentHelper;
 
 const _excluded = ["hidePicker"],
-      _excluded2 = ["label", "title", "label_direction", "label_sr_only", "only_month", "hide_last_week", "disable_autofocus", "enable_keyboard_nav", "hide_navigation_buttons", "show_input", "range", "first_day", "reset_date", "locale", "link", "sync", "input_element", "addon_element", "shortcuts", "disabled", "stretch", "skeleton", "size", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "mask_order", "mask_placeholder", "align_picker", "submit_button_text", "cancel_button_text", "reset_button_text", "hide_navigation", "return_format", "date_format", "hide_days", "month", "date", "start_date", "end_date", "min_date", "max_date", "correct_invalid_date", "opened", "direction", "id", "className", "class", "show_submit_button", "show_cancel_button", "show_reset_button"];
+      _excluded2 = ["label", "title", "label_direction", "label_sr_only", "only_month", "hide_last_week", "disable_autofocus", "enable_keyboard_nav", "hide_navigation_buttons", "show_input", "range", "first_day", "reset_date", "locale", "link", "sync", "input_element", "addon_element", "shortcuts", "disabled", "stretch", "skeleton", "size", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "mask_order", "mask_placeholder", "align_picker", "submit_button_text", "cancel_button_text", "reset_button_text", "hide_navigation", "return_format", "date_format", "hide_days", "month", "date", "start_date", "end_date", "min_date", "max_date", "correct_invalid_date", "opened", "direction", "id", "className", "class", "show_submit_button", "show_cancel_button", "show_reset_button"];
 
 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; }
 
@@ -93,6 +93,7 @@ export default class DatePicker extends React.PureComponent {
     });
 
     _defineProperty(this, "onResetHandler", args => {
+      this.hidePicker(args);
       dispatchCustomElementEvent(this, 'on_reset', this.getReturnObject(args));
     });
 
@@ -246,7 +247,7 @@ export default class DatePicker extends React.PureComponent {
       status_state,
       status_props,
       status_no_animation,
-      global_status_id,
+      globalStatus,
       suffix,
       mask_order,
       mask_placeholder,
@@ -336,7 +337,7 @@ export default class DatePicker extends React.PureComponent {
     }, pickerParams), _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(FormStatus, _extends({
       show: showStatus,
       id: id + '-form-status',
-      global_status_id: global_status_id,
+      globalStatus: globalStatus,
       label: label,
       text_id: id + '-status',
       width_selector: id + '-shell',
@@ -469,7 +470,7 @@ _defineProperty(DatePicker, "defaultProps", {
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
-  global_status_id: null,
+  globalStatus: null,
   suffix: null,
   opened: false,
   prevent_close: null,
@@ -540,7 +541,10 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = _objectSpread(_ob
   status_state: PropTypes.string,
   status_props: PropTypes.object,
   status_no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  global_status_id: PropTypes.string,
+  globalStatus: PropTypes.shape({
+    id: PropTypes.string,
+    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  }),
   suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
   opened: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   prevent_close: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),

package/components/dialog/style/dnb-dialog.css

@@ -193,12 +193,12 @@
 .dnb-dialog__actions {
   padding-top: 1.5rem;
   display: flex;
+  flex-flow: row wrap;
   justify-content: center;
+  grid-gap: 1rem;
+  gap: 1rem;
   width: 100%;
 }
-.dnb-dialog__actions > :not(:last-child) {
-  margin-right: 1rem;
-}
 .dnb-dialog--information .dnb-dialog__actions {
   justify-content: left;
 }

package/components/dialog/style/dnb-dialog.min.css

@@ -1 +1 @@
-@keyframes show-modal{0%{opacity:.1;transform:translate3d(0,-1rem,0)}to{opacity:1;transform:translateZ(0)}}@keyframes hide-modal{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,1rem,0)}}@keyframes show-drawer{to{opacity:1;transform:translateZ(0)}}@keyframes hide-drawer-left{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-20rem,0,0)}}@keyframes hide-drawer-top{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-20rem,0)}}@keyframes hide-drawer-bottom{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,20rem,0)}}@keyframes hide-drawer-right{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(20rem,0,0)}}@keyframes show-modal-overlay{0%{opacity:0}to{opacity:1}}@keyframes hide-modal-overlay{0%{opacity:1}to{opacity:0}}.dnb-dialog{--dialog-min-width:320px;--dialog-avg-width:60vw;--dialog-max-width:49rem;--dialog-confirm-max-width:40rem;--dialog-spacing:2rem;--dialog-spacing-minus:-2rem;-webkit-tap-highlight-color:rgba(0,0,0,0);border:none;border-radius:.5rem;box-shadow:var(--shadow-default);max-height:100vh;overflow:hidden;position:relative;-webkit-user-select:text;user-select:text}.dnb-dialog .dnb-scroll-view{max-height:90vh}.dnb-dialog__inner{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.dnb-dialog--information{max-width:var(--dialog-max-width);min-width:var(--dialog-min-width);width:var(--dialog-avg-width)}.dnb-dialog--confirmation{margin-left:1rem;margin-right:1rem;max-width:var(--dialog-confirm-max-width)}@media screen and (max-width:40em){.dnb-dialog--auto-fullscreen{border-radius:0;box-shadow:none;height:100vh;margin:auto 0;max-height:100vh;max-width:100%;width:100%}}.dnb-dialog--fullscreen{border-radius:0;box-shadow:none;height:100vh;margin:auto 0;max-height:100vh;max-width:100%;width:100%}.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content{padding-bottom:calc(var(--dialog-spacing)*2)}.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner{padding-left:calc(var(--dialog-spacing)*1.75);padding-right:calc(var(--dialog-spacing)*1.75)}@media screen and (max-width:72em){.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner{padding-left:calc(var(--dialog-spacing));padding-right:calc(var(--dialog-spacing))}}@media screen and (max-width:40em){.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner{padding-left:calc(var(--dialog-spacing)/2);padding-right:calc(var(--dialog-spacing)/2)}}.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section{margin-bottom:calc(var(--dialog-spacing)/2);margin-top:calc(var(--dialog-spacing))}@media screen and (max-width:60em){.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section{margin-top:calc(var(--dialog-spacing)/2)}}.dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner{padding:calc(var(--dialog-spacing))}.dnb-dialog__align--centered .dnb-dialog__inner{align-items:center;justify-content:center}.dnb-dialog__align--centered.dnb-dialog--confirmation .dnb-dialog__content,.dnb-dialog__align--centered .dnb-dialog__title{text-align:center}.dnb-dialog__content{position:relative;z-index:1}.dnb-dialog__actions{display:flex;justify-content:center;padding-top:1.5rem;width:100%}.dnb-dialog__actions>:not(:last-child){margin-right:1rem}.dnb-dialog--information .dnb-dialog__actions{justify-content:left}.dnb-dialog__align--center .dnb-dialog__content{align-items:center;text-align:center}.dnb-dialog__align--right .dnb-dialog__content{align-items:flex-end;text-align:right}.dnb-dialog__title~.dnb-dialog__content{padding-top:calc(var(--dialog-spacing)/2)}@media screen and (max-width:60em){.dnb-dialog__title{font-size:var(--font-size-large)!important;line-height:var(--line-height-medium)!important}}@media screen and (max-width:40em){.dnb-dialog__title{font-size:var(--font-size-medium)!important;line-height:var(--line-height-lead)!important}}.dnb-dialog--information .dnb-dialog__title{margin-bottom:var(--spacing-small)!important}.dnb-dialog--confirmation .dnb-dialog__title{margin-bottom:var(--spacing-x-small)!important}.dnb-dialog__navigation.dnb-section{display:flex;flex-direction:row;justify-content:space-between}html:not([data-visual-test]) .dnb-dialog{animation:show-modal var(--modal-animation-duration) ease-out}html:not([data-visual-test]) .dnb-dialog--hide{animation:hide-modal .22s ease-in-out forwards}.dnb-dialog--no-animation{animation-duration:0ms!important}@media screen and (max-width:40em){.dnb-dialog--no-animation-on-mobile{animation-delay:0ms!important;animation-duration:0ms!important}}.dnb-dialog__body{margin-bottom:calc(var(--dialog-spacing-minus)*2);padding-bottom:calc(var(--dialog-spacing)*2)}.dnb-dialog__header:after{height:600%;top:-500%}.dnb-dialog__header .dnb-modal__title,.dnb-dialog__header [class*=dnb-h--]{padding:0}.dnb-dialog__header .dnb-modal__title:not([class*=__top]),.dnb-dialog__header [class*=dnb-h--]:not([class*=__top]){margin-top:0}.dnb-dialog__header .dnb-modal__title:not([class*=__bottom]),.dnb-dialog__header [class*=dnb-h--]:not([class*=__bottom]){margin-bottom:0}.dnb-dialog--spacing .dnb-dialog__header .dnb-tabs{margin-top:3.5rem}.dnb-dialog__icon{display:flex}.dnb-dialog__icon~.dnb-dialog__header{margin-top:1.5rem}@supports (-webkit-touch-callout:none){@media (max-height:40em){.dnb-dialog .dnb-scroll-view{max-height:82vh}}}[data-visual-test].hide-page-content #___gatsby{opacity:0}
+@keyframes show-modal{0%{opacity:.1;transform:translate3d(0,-1rem,0)}to{opacity:1;transform:translateZ(0)}}@keyframes hide-modal{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,1rem,0)}}@keyframes show-drawer{to{opacity:1;transform:translateZ(0)}}@keyframes hide-drawer-left{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-20rem,0,0)}}@keyframes hide-drawer-top{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-20rem,0)}}@keyframes hide-drawer-bottom{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,20rem,0)}}@keyframes hide-drawer-right{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(20rem,0,0)}}@keyframes show-modal-overlay{0%{opacity:0}to{opacity:1}}@keyframes hide-modal-overlay{0%{opacity:1}to{opacity:0}}.dnb-dialog{--dialog-min-width:320px;--dialog-avg-width:60vw;--dialog-max-width:49rem;--dialog-confirm-max-width:40rem;--dialog-spacing:2rem;--dialog-spacing-minus:-2rem;-webkit-tap-highlight-color:rgba(0,0,0,0);border:none;border-radius:.5rem;box-shadow:var(--shadow-default);max-height:100vh;overflow:hidden;position:relative;-webkit-user-select:text;user-select:text}.dnb-dialog .dnb-scroll-view{max-height:90vh}.dnb-dialog__inner{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.dnb-dialog--information{max-width:var(--dialog-max-width);min-width:var(--dialog-min-width);width:var(--dialog-avg-width)}.dnb-dialog--confirmation{margin-left:1rem;margin-right:1rem;max-width:var(--dialog-confirm-max-width)}@media screen and (max-width:40em){.dnb-dialog--auto-fullscreen{border-radius:0;box-shadow:none;height:100vh;margin:auto 0;max-height:100vh;max-width:100%;width:100%}}.dnb-dialog--fullscreen{border-radius:0;box-shadow:none;height:100vh;margin:auto 0;max-height:100vh;max-width:100%;width:100%}.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__content{padding-bottom:calc(var(--dialog-spacing)*2)}.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner{padding-left:calc(var(--dialog-spacing)*1.75);padding-right:calc(var(--dialog-spacing)*1.75)}@media screen and (max-width:72em){.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner{padding-left:calc(var(--dialog-spacing));padding-right:calc(var(--dialog-spacing))}}@media screen and (max-width:40em){.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__inner{padding-left:calc(var(--dialog-spacing)/2);padding-right:calc(var(--dialog-spacing)/2)}}.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section{margin-bottom:calc(var(--dialog-spacing)/2);margin-top:calc(var(--dialog-spacing))}@media screen and (max-width:60em){.dnb-dialog--spacing.dnb-dialog--information .dnb-dialog__navigation.dnb-section{margin-top:calc(var(--dialog-spacing)/2)}}.dnb-dialog--spacing.dnb-dialog--confirmation .dnb-dialog__inner{padding:calc(var(--dialog-spacing))}.dnb-dialog__align--centered .dnb-dialog__inner{align-items:center;justify-content:center}.dnb-dialog__align--centered.dnb-dialog--confirmation .dnb-dialog__content,.dnb-dialog__align--centered .dnb-dialog__title{text-align:center}.dnb-dialog__content{position:relative;z-index:1}.dnb-dialog__actions{grid-gap:1rem;display:flex;flex-flow:row wrap;gap:1rem;justify-content:center;padding-top:1.5rem;width:100%}.dnb-dialog--information .dnb-dialog__actions{justify-content:left}.dnb-dialog__align--center .dnb-dialog__content{align-items:center;text-align:center}.dnb-dialog__align--right .dnb-dialog__content{align-items:flex-end;text-align:right}.dnb-dialog__title~.dnb-dialog__content{padding-top:calc(var(--dialog-spacing)/2)}@media screen and (max-width:60em){.dnb-dialog__title{font-size:var(--font-size-large)!important;line-height:var(--line-height-medium)!important}}@media screen and (max-width:40em){.dnb-dialog__title{font-size:var(--font-size-medium)!important;line-height:var(--line-height-lead)!important}}.dnb-dialog--information .dnb-dialog__title{margin-bottom:var(--spacing-small)!important}.dnb-dialog--confirmation .dnb-dialog__title{margin-bottom:var(--spacing-x-small)!important}.dnb-dialog__navigation.dnb-section{display:flex;flex-direction:row;justify-content:space-between}html:not([data-visual-test]) .dnb-dialog{animation:show-modal var(--modal-animation-duration) ease-out}html:not([data-visual-test]) .dnb-dialog--hide{animation:hide-modal .22s ease-in-out forwards}.dnb-dialog--no-animation{animation-duration:0ms!important}@media screen and (max-width:40em){.dnb-dialog--no-animation-on-mobile{animation-delay:0ms!important;animation-duration:0ms!important}}.dnb-dialog__body{margin-bottom:calc(var(--dialog-spacing-minus)*2);padding-bottom:calc(var(--dialog-spacing)*2)}.dnb-dialog__header:after{height:600%;top:-500%}.dnb-dialog__header .dnb-modal__title,.dnb-dialog__header [class*=dnb-h--]{padding:0}.dnb-dialog__header .dnb-modal__title:not([class*=__top]),.dnb-dialog__header [class*=dnb-h--]:not([class*=__top]){margin-top:0}.dnb-dialog__header .dnb-modal__title:not([class*=__bottom]),.dnb-dialog__header [class*=dnb-h--]:not([class*=__bottom]){margin-bottom:0}.dnb-dialog--spacing .dnb-dialog__header .dnb-tabs{margin-top:3.5rem}.dnb-dialog__icon{display:flex}.dnb-dialog__icon~.dnb-dialog__header{margin-top:1.5rem}@supports (-webkit-touch-callout:none){@media (max-height:40em){.dnb-dialog .dnb-scroll-view{max-height:82vh}}}[data-visual-test].hide-page-content #___gatsby{opacity:0}

package/components/dialog/style/dnb-dialog.scss

@@ -112,12 +112,10 @@
     padding-top: 1.5rem;
 
     display: flex;
+    flex-flow: row wrap;
     justify-content: center;
+    gap: 1rem;
     width: 100%;
-
-    > :not(:last-child) {
-      margin-right: 1rem;
-    }
   }
 
   &--information &__actions {

package/components/dropdown/Dropdown.d.ts

@@ -13,6 +13,7 @@ import type {
   DrawerListProps,
   DrawerListData
 } from '../../fragments/DrawerList';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export type DropdownData = DrawerListData;
 type DropdownTitle = string | React.ReactNode;
 type DropdownAlignDropdown = 'left' | 'right';
@@ -78,9 +79,9 @@ export interface DropdownProps
   status_no_animation?: boolean;
 
   /**
-   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
    */
-  global_status_id?: string;
+  globalStatus?: GlobalStatusConfigObject;
 
   /**
    * Same as `prevent_selection`, but the "selection area" (given title) will not be visible and the icon `more` (three dots) is used. Defaults to `false`.

package/components/dropdown/Dropdown.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 var _AlignmentHelper;
 
-const _excluded = ["label", "label_direction", "label_sr_only", "icon_size", "size", "fixed_position", "enable_body_lock", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "scrollable", "focusable", "keep_open", "prevent_close", "no_animation", "no_scroll_animation", "triangle_position", "skip_portal", "portal_class", "trigger_element", "more_menu", "action_menu", "independent_width", "prevent_selection", "max_height", "default_value", "className", "class", "disabled", "stretch", "skeleton", "variant", "title", "icon", "align_dropdown", "icon_position", "data", "children", "direction", "id", "opened", "value"];
+const _excluded = ["label", "label_direction", "label_sr_only", "icon_size", "size", "fixed_position", "enable_body_lock", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "scrollable", "focusable", "keep_open", "prevent_close", "no_animation", "no_scroll_animation", "triangle_position", "skip_portal", "portal_class", "trigger_element", "more_menu", "action_menu", "independent_width", "prevent_selection", "max_height", "default_value", "className", "class", "disabled", "stretch", "skeleton", "variant", "title", "icon", "align_dropdown", "icon_position", "data", "children", "direction", "id", "opened", "value"];
 
 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; }
 
@@ -66,7 +66,7 @@ _defineProperty(Dropdown, "defaultProps", {
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
-  global_status_id: null,
+  globalStatus: null,
   suffix: null,
   scrollable: true,
   focusable: false,
@@ -118,7 +118,10 @@ process.env.NODE_ENV !== "production" ? Dropdown.propTypes = _objectSpread(_obje
   status_state: PropTypes.string,
   status_props: PropTypes.object,
   status_no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  global_status_id: PropTypes.string,
+  globalStatus: PropTypes.shape({
+    id: PropTypes.string,
+    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  }),
   suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
   scrollable: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   focusable: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -329,7 +332,7 @@ class DropdownInstance extends React.PureComponent {
       status_state,
       status_props,
       status_no_animation,
-      global_status_id,
+      globalStatus,
       suffix,
       scrollable,
       focusable,
@@ -441,7 +444,7 @@ class DropdownInstance extends React.PureComponent {
     }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(FormStatus, _extends({
       show: showStatus,
       id: id + '-form-status',
-      global_status_id: global_status_id,
+      globalStatus: globalStatus,
       label: label,
       text_id: id + '-status',
       text: status,

package/components/form-row/FormRow.d.ts

@@ -4,6 +4,7 @@ import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
 import type { Locale } from '../../shared/Context';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export type FormRowDirection = 'vertical' | 'horizontal';
 export type FormRowChildren =
   | string
@@ -75,7 +76,7 @@ export interface FormRowProps
    * To modify the `spacing`. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `null`.
    */
   section_spacing?: SectionSpacing;
-  global_status_id?: string;
+  globalStatus?: GlobalStatusConfigObject;
 
   /**
    * To force responsiveness on form components (like <a href="/uilib/components/input">Input</a> and their labels (<a href="/uilib/components/form-label">FormLabel</a>), set the prop to `true`. Defaults to `false`.

package/components/form-row/FormRow.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 var _AlignmentHelper, _span;
 
-const _excluded = ["label_direction", "label_sr_only", "label_id", "label_class", "no_fieldset", "no_label", "locale", "direction", "vertical", "centered", "section_style", "section_spacing", "global_status_id", "responsive", "disabled", "skeleton", "wrap", "className", "class", "skipContentWrapperIfNested", "id", "label"],
+const _excluded = ["label_direction", "label_sr_only", "label_id", "label_class", "no_fieldset", "no_label", "locale", "direction", "vertical", "centered", "section_style", "section_spacing", "globalStatus", "responsive", "disabled", "skeleton", "wrap", "className", "class", "skipContentWrapperIfNested", "id", "label"],
       _excluded2 = ["useFieldset", "children", "className"];
 
 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; }
@@ -36,7 +36,10 @@ export const formRowPropTypes = _objectSpread(_objectSpread({
   centered: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   section_style: PropTypes.string,
   section_spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  global_status_id: PropTypes.string,
+  globalStatus: PropTypes.shape({
+    id: PropTypes.string,
+    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  }),
   responsive: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -62,7 +65,7 @@ export const formRowDefaultProps = {
   centered: null,
   section_style: null,
   section_spacing: null,
-  global_status_id: null,
+  globalStatus: null,
   responsive: null,
   disabled: null,
   skeleton: null,
@@ -115,7 +118,7 @@ export default class FormRow extends React.PureComponent {
       centered,
       section_style,
       section_spacing,
-      global_status_id,
+      globalStatus,
       responsive,
       disabled,
       skeleton,
@@ -162,7 +165,7 @@ export default class FormRow extends React.PureComponent {
         },
         itsMeAgain: true,
         hasLabel,
-        global_status_id,
+        globalStatus,
         direction,
         vertical,
         label_direction: isTrue(vertical) ? 'vertical' : label_direction,

package/components/form-set/FormSet.d.ts

@@ -4,6 +4,7 @@ import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
 import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
 import type { Locale } from '../../shared/Context';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export type FormSetDirection = 'vertical' | 'horizontal';
 export type FormSetChildren =
   | string
@@ -99,7 +100,7 @@ export interface FormSetProps
    * To modify the `spacing`. Use a supported modifier from the <a href="/uilib/components/section/properties">Section component</a>. Defaults to `null`.
    */
   section_spacing?: SectionSpacing;
-  global_status_id?: string;
+  globalStatus?: GlobalStatusConfigObject;
 
   /**
    * To force responsiveness on form components (like <a href="/uilib/components/input">Input</a> and their labels (<a href="/uilib/components/form-label">FormLabel</a>), set the prop to `true`. Defaults to `false`.

package/components/form-status/FormStatus.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 import type { IconIcon, IconSize } from '../Icon';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
@@ -40,7 +41,11 @@ export interface FormStatusProps
    * The `text` appears as the status message. Beside plain text, you can send in a React component as well.
    */
   text?: FormStatusText;
-  label?: React.ReactNode;
+
+  /**
+   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   */
+  globalStatus?: GlobalStatusConfigObject;
 
   /**
    * The `icon` show before the status text. Defaults to `exclamation`.
@@ -66,11 +71,6 @@ export interface FormStatusProps
    * Defines the appearance size. There are these sizes `default`, `large`. The default status is `default`.
    */
   size?: FormStatusSize;
-
-  /**
-   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
-   */
-  global_status_id?: string;
   attributes?: FormStatusAttributes;
   text_id?: string;
   width_selector?: string;

package/components/form-status/FormStatus.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 var _path, _path2, _path3, _path4, _path5, _path6, _path7, _circle, _path8, _path9;
 
-const _excluded = ["show", "title", "state", "size", "variant", "className", "no_animation", "stretch", "class", "text_id", "label", "status_id", "id", "text", "icon", "icon_size", "skeleton", "children", "role"];
+const _excluded = ["show", "title", "state", "size", "variant", "className", "no_animation", "stretch", "class", "text_id", "label", "status_id", "globalStatus", "id", "text", "icon", "icon_size", "skeleton", "children", "role"];
 
 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; }
 
@@ -98,7 +98,7 @@ export default class FormStatus extends React.PureComponent {
   }
 
   constructor(props, context) {
-    var _context$FormStatus, _context$FormRow;
+    var _props$globalStatus, _context$FormStatus, _context$FormStatus$g, _context$FormRow, _context$FormRow$glob;
 
     super(props);
 
@@ -130,11 +130,12 @@ export default class FormStatus extends React.PureComponent {
     });
 
     this.state.id = props.id || makeUniqueId();
-    this._globalStatus = GlobalStatusProvider.init((props === null || props === void 0 ? void 0 : props.global_status_id) || (context === null || context === void 0 ? void 0 : (_context$FormStatus = context.FormStatus) === null || _context$FormStatus === void 0 ? void 0 : _context$FormStatus.global_status_id) || (context === null || context === void 0 ? void 0 : (_context$FormRow = context.FormRow) === null || _context$FormRow === void 0 ? void 0 : _context$FormRow.global_status_id) || 'main', provider => {
+    this._globalStatus = GlobalStatusProvider.init((props === null || props === void 0 ? void 0 : (_props$globalStatus = props.globalStatus) === null || _props$globalStatus === void 0 ? void 0 : _props$globalStatus.id) || (context === null || context === void 0 ? void 0 : (_context$FormStatus = context.FormStatus) === null || _context$FormStatus === void 0 ? void 0 : (_context$FormStatus$g = _context$FormStatus.globalStatus) === null || _context$FormStatus$g === void 0 ? void 0 : _context$FormStatus$g.id) || (context === null || context === void 0 ? void 0 : (_context$FormRow = context.FormRow) === null || _context$FormRow === void 0 ? void 0 : (_context$FormRow$glob = _context$FormRow.globalStatus) === null || _context$FormRow$glob === void 0 ? void 0 : _context$FormRow$glob.id) || 'main', provider => {
       if (this.props.state === 'error' && this.isReadyToGetVisible()) {
         const {
           state,
           text,
+          globalStatus,
           label
         } = this.props;
         provider.add({
@@ -142,7 +143,7 @@ export default class FormStatus extends React.PureComponent {
           status_id: this.getStatusId(),
           item: {
             item_id: this.state.id,
-            text,
+            text: (globalStatus === null || globalStatus === void 0 ? void 0 : globalStatus.message) || text,
             status_anchor_label: label,
             status_anchor_url: true
           }
@@ -202,6 +203,7 @@ export default class FormStatus extends React.PureComponent {
       state,
       show,
       text,
+      globalStatus,
       children,
       label
     } = this.props;
@@ -220,7 +222,7 @@ export default class FormStatus extends React.PureComponent {
             status_id,
             item: {
               item_id: this.state.id,
-              text,
+              text: (globalStatus === null || globalStatus === void 0 ? void 0 : globalStatus.message) || text,
               status_anchor_label: label,
               status_anchor_url: true
             }
@@ -279,6 +281,7 @@ export default class FormStatus extends React.PureComponent {
       text_id,
       label,
       status_id,
+      globalStatus,
       id,
       text,
       icon,
@@ -344,13 +347,13 @@ _defineProperty(FormStatus, "defaultProps", {
   title: null,
   show: true,
   text: null,
+  globalStatus: null,
   label: null,
   icon: 'error',
   icon_size: 'medium',
   size: 'default',
   variant: null,
   state: 'error',
-  global_status_id: null,
   attributes: null,
   text_id: null,
   width_selector: null,
@@ -375,7 +378,10 @@ process.env.NODE_ENV !== "production" ? FormStatus.propTypes = _objectSpread(_ob
   state: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.oneOf(['error', 'warn', 'info', 'marketing'])]),
   variant: PropTypes.oneOf(['flat', 'outlined']),
   size: PropTypes.oneOf(['default', 'large']),
-  global_status_id: PropTypes.string,
+  globalStatus: PropTypes.shape({
+    id: PropTypes.string,
+    message: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  }),
   attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   text_id: PropTypes.string,
   width_selector: PropTypes.string,

package/components/global-status/GlobalStatus.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { FormStatusText } from '../FormStatus';
 import type { IconIcon, IconSize } from '../Icon';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
@@ -11,6 +12,13 @@ export type GlobalStatusItem = string | ((...args: any[]) => any) | any;
 export type GlobalStatusState = 'error' | 'info';
 export type GlobalStatusShow = 'auto' | any | any | 'true' | 'false';
 export type GlobalStatusDelay = string | number;
+export type GlobalStatusConfigObject = {
+  /**
+   * The main ID. Defaults to `main`.
+   */
+  id?: string;
+  message?: FormStatusText;
+};
 export type GlobalStatusChildren =
   | string
   | ((...args: any[]) => any)

package/components/help-button/HelpButton.d.ts

@@ -4,9 +4,7 @@
  */
 import React from 'react';
 import type { ButtonProps } from '../button/Button';
-import { ModalProps } from '../modal/types';
 export declare type HelpButtonProps = {
-    modal_content?: React.ReactNode;
-    modal_props?: ModalProps;
+    render?: (children: React.ReactNode, props: ButtonProps) => React.ReactElement;
 } & ButtonProps;
 export default function HelpButton(localProps: HelpButtonProps): JSX.Element;

package/components/help-button/HelpButton.js

@@ -1,6 +1,5 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["modal_content", "children", "modal_props"];
+const _excluded = ["children", "render"];
 import React from 'react';
 import Context from '../../shared/Context';
 import Dialog from '../dialog/Dialog';
@@ -11,22 +10,12 @@ const defaultProps = {
   icon_position: 'left'
 };
 export default function HelpButton(localProps) {
-  const getContent = props => {
-    if (props.modal_content) {
-      return props.modal_content;
-    }
-
-    return typeof props.children === 'function' ? props.children(props) : props.children;
-  };
-
   const context = React.useContext(Context);
   const props = extendPropsWithContext(localProps, defaultProps);
-  const content = getContent(props);
 
   const {
-    modal_content,
     children,
-    modal_props
+    render
   } = props,
         params = _objectWithoutProperties(props, _excluded);
 
@@ -34,14 +23,18 @@ export default function HelpButton(localProps) {
     params.icon = 'question';
   }
 
-  if (content) {
+  if (children) {
     if (!params.title) {
       params.title = context.getTranslation(props).HelpButton.title;
     }
 
-    return React.createElement(Dialog, _extends({
+    if (typeof render === 'function') {
+      return render(children, params);
+    }
+
+    return React.createElement(Dialog, {
       triggerAttributes: params
-    }, modal_props), content);
+    }, children);
   }
 
   return React.createElement(HelpButtonInstance, params);

package/components/icon/style/dnb-icon.css

@@ -14,8 +14,9 @@
   width: 1em;
   height: 1em;
 }
-.dnb-icon img,
-.dnb-icon svg {
+.dnb-icon img, .dnb-core-style .dnb-icon img,
+.dnb-icon svg,
+.dnb-core-style .dnb-icon svg {
   width: inherit;
   height: inherit;
   shape-rendering: geometricprecision;
@@ -63,9 +64,12 @@
   align-items: center;
   justify-content: center;
 }
-h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon {
+h1 > .dnb-icon, h2 > .dnb-icon, h3 > .dnb-icon, h4 > .dnb-icon, h5 > .dnb-icon, h6 > .dnb-icon {
   vertical-align: middle;
 }
+p > .dnb-icon {
+  vertical-align: inherit;
+}
 .dnb-icon.dnb-skeleton {
   color: var(--skeleton-color) !important;
 }

package/components/icon/style/dnb-icon.min.css

@@ -1 +1 @@
-.dnb-icon{color:inherit;display:inline-block;font-size:1rem;height:1em;line-height:1rem;vertical-align:middle;width:1em}.dnb-icon img,.dnb-icon svg{shape-rendering:geometricprecision;height:inherit;vertical-align:top;width:inherit}.dnb-icon svg[width="100%"]{width:inherit}.dnb-icon svg[height="100%"]{height:inherit}.dnb-icon--inherit-color svg:not([fill]),.dnb-icon--inherit-color svg [fill]{fill:currentcolor}.dnb-icon--inherit-color svg [stroke]{stroke:currentcolor}.dnb-icon--small{font-size:.75rem}.dnb-icon--default{font-size:1rem}.dnb-icon--medium{font-size:1.5rem}.dnb-icon--large{font-size:2rem}.dnb-icon--x-large{font-size:2.5rem}.dnb-icon--xx-large{font-size:3rem}.dnb-icon--custom-size{height:auto;width:auto}.dnb-icon--auto{font-size:1em}.dnb-icon--auto>.dnb-icon--wrapper{align-items:center;display:inline-flex;justify-content:center}h1 .dnb-icon,h2 .dnb-icon,h3 .dnb-icon,h4 .dnb-icon,h5 .dnb-icon,h6 .dnb-icon{vertical-align:middle}.dnb-icon.dnb-skeleton{color:var(--skeleton-color)!important}.dnb-icon.dnb-skeleton:after,.dnb-icon.dnb-skeleton:before{content:none!important}
+.dnb-icon{color:inherit;display:inline-block;font-size:1rem;height:1em;line-height:1rem;vertical-align:middle;width:1em}.dnb-core-style .dnb-icon img,.dnb-core-style .dnb-icon svg,.dnb-icon img,.dnb-icon svg{shape-rendering:geometricprecision;height:inherit;vertical-align:top;width:inherit}.dnb-icon svg[width="100%"]{width:inherit}.dnb-icon svg[height="100%"]{height:inherit}.dnb-icon--inherit-color svg:not([fill]),.dnb-icon--inherit-color svg [fill]{fill:currentcolor}.dnb-icon--inherit-color svg [stroke]{stroke:currentcolor}.dnb-icon--small{font-size:.75rem}.dnb-icon--default{font-size:1rem}.dnb-icon--medium{font-size:1.5rem}.dnb-icon--large{font-size:2rem}.dnb-icon--x-large{font-size:2.5rem}.dnb-icon--xx-large{font-size:3rem}.dnb-icon--custom-size{height:auto;width:auto}.dnb-icon--auto{font-size:1em}.dnb-icon--auto>.dnb-icon--wrapper{align-items:center;display:inline-flex;justify-content:center}h1>.dnb-icon,h2>.dnb-icon,h3>.dnb-icon,h4>.dnb-icon,h5>.dnb-icon,h6>.dnb-icon{vertical-align:middle}p>.dnb-icon{vertical-align:inherit}.dnb-icon.dnb-skeleton{color:var(--skeleton-color)!important}.dnb-icon.dnb-skeleton:after,.dnb-icon.dnb-skeleton:before{content:none!important}

package/components/icon/style/dnb-icon.scss

@@ -23,10 +23,13 @@
   // responsive
   img,
   svg {
-    width: inherit;
-    height: inherit;
-    shape-rendering: geometricprecision;
-    vertical-align: top;
+    &,
+    .dnb-core-style & {
+      width: inherit;
+      height: inherit;
+      shape-rendering: geometricprecision;
+      vertical-align: top;
+    }
   }
 
   // auto size
@@ -88,14 +91,17 @@
     justify-content: center;
   }
 
-  h1 &,
-  h2 &,
-  h3 &,
-  h4 &,
-  h5 &,
-  h6 & {
+  h1 > &,
+  h2 > &,
+  h3 > &,
+  h4 > &,
+  h5 > &,
+  h6 > & {
     vertical-align: middle;
   }
+  p > & {
+    vertical-align: inherit;
+  }
 
   &.dnb-skeleton {
     &::before,

package/components/input/Input.d.ts

@@ -9,6 +9,7 @@ import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
 import type { IconIcon, IconSize } from '../Icon';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export type InputSize = 'default' | 'small' | 'medium' | 'large' | number;
 export type InputValue = string | number;
 export type InputSuffix =
@@ -67,6 +68,11 @@ export interface InputProps
    */
   status?: FormStatusText;
 
+  /**
+   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   */
+  globalStatus?: GlobalStatusConfigObject;
+
   /**
    * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
@@ -83,11 +89,6 @@ export interface InputProps
    */
   input_state?: string;
 
-  /**
-   * The `status_id` used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
-   */
-  global_status_id?: string;
-
   /**
    * Defaults to `off`. Set to `on` or any of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete">allowed `attributes`</a>. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `<form>` element, 3. and have a submit button inside the form.
    */
@@ -255,6 +256,11 @@ export interface SubmitButtonProps extends React.HTMLProps<HTMLElement> {
    */
   status?: FormStatusText;
 
+  /**
+   * The <a href="/uilib/components/global-status/properties/#configuration-object">configuration</a> used for the target <a href="/uilib/components/global-status">GlobalStatus</a>.
+   */
+  globalStatus?: GlobalStatusConfigObject;
+
   /**
    * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */