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

package/cjs/components/modal/Modal.js

@@ -203,7 +203,9 @@ class Modal extends _react.default.PureComponent {
         modalActive
       } = this.state;
       const {
-        close_modal
+        close_modal,
+        open_state,
+        animation_duration
       } = this.props;
 
       if (modalActive) {
@@ -219,18 +221,30 @@ class Modal extends _react.default.PureComponent {
 
         this.setActiveState(this._id);
       } else if (modalActive === false) {
-        if (this._triggerRef && this._triggerRef.current) {
-          this._triggerRef.current.focus({
+        var _this$_triggerRef;
+
+        const focus = elem => {
+          elem.setAttribute('data-autofocus', 'true');
+          elem.focus({
             preventScroll: true
           });
+          return new Promise(resolve => {
+            setTimeout(() => {
+              elem === null || elem === void 0 ? void 0 : elem.removeAttribute('data-autofocus');
+              resolve();
+            }, parseFloat(String(animation_duration)) / 3);
+          });
+        };
+
+        if ((_this$_triggerRef = this._triggerRef) !== null && _this$_triggerRef !== void 0 && _this$_triggerRef.current) {
+          focus(this._triggerRef.current);
         }
 
-        if ((this.props.open_state === 'opened' || this.props.open_state === true) && this.activeElement && this.activeElement instanceof HTMLElement) {
+        if ((open_state === 'opened' || open_state === true) && this.activeElement instanceof HTMLElement) {
           try {
-            this.activeElement.focus({
-              preventScroll: true
+            focus(this.activeElement).then(() => {
+              this.activeElement = null;
             });
-            this.activeElement = null;
           } catch (e) {}
         }
 

package/cjs/components/modal/ModalContent.js

@@ -280,8 +280,8 @@ class ModalContent extends _react.default.PureComponent {
           focusElement.focus();
           const noH1Elem = elem.querySelector('h1, h2, h3');
 
-          if (typeof (noH1Elem === null || noH1Elem === void 0 ? void 0 : noH1Elem.tagName) !== 'undefined' && (noH1Elem === null || noH1Elem === void 0 ? void 0 : noH1Elem.tagName) !== 'H1') {
-            (0, _componentHelper.warn)('You have to provide a h1 element at first – instead of:', noH1Elem);
+          if ((noH1Elem === null || noH1Elem === void 0 ? void 0 : noH1Elem.tagName) !== 'H1') {
+            (0, _componentHelper.warn)('A Dialog or Drawer needs a h1 as its first element!');
           }
         } catch (e) {
           (0, _componentHelper.warn)(e);

package/cjs/components/number-format/NumberUtils.js

@@ -660,12 +660,13 @@ function showSelectionNotice(_ref3) {
     };
   }
 
-  let elem, content;
+  let elem, content, root;
 
   try {
+    root = document.querySelector('.dnb-tooltip__portal, body');
     elem = document.createElement('span');
     elem.setAttribute('id', id);
-    elem.setAttribute('class', 'dnb-tooltip dnb-core-style');
+    elem.setAttribute('class', 'dnb-tooltip');
     elem.setAttribute('role', 'tooltip');
     const arrow = document.createElement('span');
     arrow.setAttribute('class', 'dnb-tooltip__arrow dnb-tooltip__arrow__position--top');
@@ -681,7 +682,7 @@ function showSelectionNotice(_ref3) {
   return new class SelectionFx {
     remove() {
       try {
-        document.body.removeChild(elem);
+        root.removeChild(elem);
         elem = null;
         content = null;
       } catch (e) {}
@@ -697,7 +698,7 @@ function showSelectionNotice(_ref3) {
       let pE = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (0, _helpers.getSelectedElement)();
 
       try {
-        document.body.appendChild(elem);
+        root.appendChild(elem);
         const top = (0, _helpers.getOffsetTop)(pE);
         const left = (0, _helpers.getOffsetLeft)(pE);
         content.innerHTML = String(label) + (pE instanceof HTMLElement ? `<span class="dnb-sr-only">: ${(pE && pE.querySelector('.dnb-number-format__selection') || pE).innerHTML}</span>` : '');

package/cjs/components/progress-indicator/ProgressIndicator.d.ts

@@ -31,7 +31,7 @@ export interface ProgressIndicatorProps
   no_animation?: boolean;
 
   /**
-   * Defines the size, like `large` or `medium`. Defaults to `medium`.
+   * Defines the size, like `small`, `default`, `medium` or `large`. Defaults to `default`.
    */
   size?: ProgressIndicatorSize;
 

package/cjs/components/progress-indicator/ProgressIndicatorCircular.d.ts

@@ -3,7 +3,7 @@ export type ProgressIndicatorCircularProgress = string | number;
 export interface ProgressIndicatorCircularProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * Defines the size, like `large` or `medium`. Defaults to `medium`.
+   * Defines the size, like `small`, `default`, `medium` or `large`. Defaults to `default`.
    */
   size?: string;
 

package/cjs/components/progress-indicator/ProgressIndicatorLinear.d.ts

@@ -3,7 +3,7 @@ export type ProgressIndicatorLinearProgress = string | number;
 export interface ProgressIndicatorLinearProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * Defines the size, like `large` or `medium`. Defaults to `medium`.
+   * Defines the size, like `small`, `default`, `medium` or `large`. Defaults to `default`.
    */
   size?: string;
 

package/cjs/components/radio/Radio.d.ts

@@ -4,6 +4,7 @@ import type {
   FormStatusState,
   FormStatusText
 } from '../FormStatus';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
 import RadioGroup from './RadioGroup';
@@ -72,9 +73,9 @@ export interface RadioProps
   status_no_animation?: RadioStatusNoAnimation;
 
   /**
-   * 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;
   suffix?: RadioSuffix;
 
   /**
@@ -89,7 +90,7 @@ export interface RadioProps
   children?: RadioChildren;
 
   /**
-   * Will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`.
+   * Will be called on state changes made by the user. Returns an object `{ checked, value, event }`.
    */
   on_change?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;

package/cjs/components/radio/Radio.js

@@ -37,7 +37,7 @@ var _FormRowHelpers = require("../form-row/FormRowHelpers");
 
 var _AlignmentHelper, _span, _span2;
 
-const _excluded = ["status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "element", "label", "label_sr_only", "label_position", "size", "readOnly", "skeleton", "className", "class", "id", "group", "value", "checked", "disabled", "children", "on_change", "on_state_update"];
+const _excluded = ["status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "element", "label", "label_sr_only", "label_position", "size", "readOnly", "skeleton", "className", "class", "id", "group", "value", "checked", "disabled", "children", "on_change", "on_state_update"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -232,7 +232,7 @@ class Radio extends _react.default.PureComponent {
         status_state,
         status_props,
         status_no_animation,
-        global_status_id,
+        globalStatus,
         suffix,
         element,
         label,
@@ -322,7 +322,7 @@ class Radio extends _react.default.PureComponent {
       }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(_FormStatus.default, _extends({
         show: showStatus,
         id: id + '-form-status',
-        global_status_id: global_status_id,
+        globalStatus: globalStatus,
         label: label,
         text_id: id + '-status',
         width_selector: id + ', ' + id + '-label',
@@ -385,7 +385,7 @@ _defineProperty(Radio, "defaultProps", {
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
-  global_status_id: null,
+  globalStatus: null,
   suffix: null,
   value: '',
   attributes: null,
@@ -416,7 +416,10 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes = _objectSpread(_objectS
   status_state: _propTypes.default.string,
   status_props: _propTypes.default.object,
   status_no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  global_status_id: _propTypes.default.string,
+  globalStatus: _propTypes.default.shape({
+    id: _propTypes.default.string,
+    message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+  }),
   suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
   value: _propTypes.default.string,
   attributes: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),

package/cjs/components/radio/RadioGroup.d.ts

@@ -7,6 +7,7 @@ import type {
 import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export type RadioGroupLabelPosition = 'left' | 'right';
 export type RadioGroupSize = 'default' | 'medium' | 'large';
 export type RadioGroupSuffix =
@@ -66,9 +67,9 @@ export interface RadioGroupProps
   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;
   suffix?: RadioGroupSuffix;
   layout_direction?: RadioGroupLayoutDirection;
   vertical?: boolean;
@@ -83,7 +84,7 @@ export interface RadioGroupProps
   children?: RadioGroupChildren;
 
   /**
-   * Will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`.
+   * Will be called on state changes made by the user. Returns an object `{ checked, value, event }`.
    */
   on_change?: (...args: any[]) => any;
 }

package/cjs/components/radio/RadioGroup.js

@@ -31,7 +31,7 @@ var _RadioGroupContext = _interopRequireDefault(require("./RadioGroupContext"));
 
 var _AlignmentHelper;
 
-const _excluded = ["status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "label", "label_direction", "label_sr_only", "label_position", "vertical", "layout_direction", "no_fieldset", "size", "disabled", "skeleton", "className", "class", "id", "name", "value", "children", "on_change"];
+const _excluded = ["status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "label", "label_direction", "label_sr_only", "label_position", "vertical", "layout_direction", "no_fieldset", "size", "disabled", "skeleton", "className", "class", "id", "name", "value", "children", "on_change"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -97,7 +97,7 @@ class RadioGroup extends _react.default.PureComponent {
       status_state,
       status_props,
       status_no_animation,
-      global_status_id,
+      globalStatus,
       suffix,
       label,
       label_direction,
@@ -173,7 +173,7 @@ class RadioGroup extends _react.default.PureComponent {
     }, suffix), _react.default.createElement(_FormStatus.default, _extends({
       show: showStatus,
       id: id + '-form-status',
-      global_status_id: global_status_id,
+      globalStatus: globalStatus,
       label: label,
       text: status,
       state: status_state,
@@ -206,7 +206,7 @@ _defineProperty(RadioGroup, "defaultProps", {
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
-  global_status_id: null,
+  globalStatus: null,
   suffix: null,
   vertical: null,
   layout_direction: 'row',
@@ -236,7 +236,10 @@ process.env.NODE_ENV !== "production" ? RadioGroup.propTypes = _objectSpread(_ob
   status_state: _propTypes.default.string,
   status_props: _propTypes.default.object,
   status_no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  global_status_id: _propTypes.default.string,
+  globalStatus: _propTypes.default.shape({
+    id: _propTypes.default.string,
+    message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+  }),
   suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
   layout_direction: _propTypes.default.oneOf(['column', 'row']),
   vertical: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),

package/cjs/components/slider/SliderInstance.js

@@ -61,7 +61,7 @@ function SliderInstance() {
     statusProps,
     statusState,
     statusNoAnimation,
-    globalStatusId,
+    globalStatus,
     stretch,
     skeleton,
     disabled,
@@ -85,8 +85,7 @@ function SliderInstance() {
   }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(_FormStatus.default, _extends({
     show: showStatus,
     id: id + '-form-status',
-    global_status_id: globalStatusId,
-    label: label,
+    globalStatus: globalStatus,
     text_id: id + '-status',
     text: status,
     state: statusState,

package/cjs/components/slider/SliderProvider.js

@@ -18,7 +18,7 @@ var _SliderHelpers = require("./SliderHelpers");
 
 var _withSnakeCaseProps = require("../../shared/helpers/withSnakeCaseProps");
 
-const _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatusId", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "multiThumbBehavior", "numberFormat", "tooltip", "alwaysShowTooltip", "skeleton", "max", "min", "disabled", "className", "id", "onChange", "onDragStart", "onDragEnd", "vertical", "reverse", "value", "children"];
+const _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatus", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "multiThumbBehavior", "numberFormat", "tooltip", "alwaysShowTooltip", "skeleton", "max", "min", "disabled", "className", "id", "onChange", "onDragStart", "onDragEnd", "vertical", "reverse", "value", "children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -64,7 +64,7 @@ function SliderProvider(localProps) {
     statusState,
     statusProps,
     statusNoAnimation,
-    globalStatusId,
+    globalStatus,
     stretch,
     suffix,
     thumbTitle: title,

package/cjs/components/slider/types.d.ts

@@ -5,6 +5,7 @@ import type { formatReturnType, formatOptionParams } from '../number-format/Numb
 import { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps';
 import type { SpacingProps } from '../../shared/types';
 import type { SkeletonShow } from '../Skeleton';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export declare type ValueTypes = number | Array<number>;
 export declare type NumberFormatTypes = formatOptionParams | ((value: number) => unknown);
 export declare type onChangeEventProps = {
@@ -28,7 +29,7 @@ export declare type SliderProps = IncludeSnakeCase<{
     statusProps?: Record<string, unknown>;
     statusNoAnimation?: boolean;
     /** the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). */
-    globalStatusId?: string;
+    globalStatus?: GlobalStatusConfigObject;
     /** text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component. */
     suffix?: SuffixChildren;
     /** give the slider thumb button a title for accessibility reasons. Defaults to `null`. */

package/cjs/components/switch/Switch.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { FormStatusState, FormStatusText } from '../FormStatus';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
 export type SwitchLabel =
@@ -65,9 +66,9 @@ export interface SwitchProps
   status_props?: Record<string, unknown>;
 
   /**
-   * 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;
   status_no_animation?: boolean;
 
   /**

package/cjs/components/switch/Switch.js

@@ -33,7 +33,7 @@ var _FormStatus = _interopRequireDefault(require("../form-status/FormStatus"));
 
 var _AlignmentHelper, _span;
 
-const _excluded = ["value", "size", "status", "status_state", "status_props", "global_status_id", "status_no_animation", "suffix", "label", "label_position", "label_sr_only", "title", "disabled", "readOnly", "skeleton", "className", "class", "id", "checked", "children", "on_change", "on_state_update"];
+const _excluded = ["value", "size", "status", "status_state", "status_props", "globalStatus", "status_no_animation", "suffix", "label", "label_position", "label_sr_only", "title", "disabled", "readOnly", "skeleton", "className", "class", "id", "checked", "children", "on_change", "on_state_update"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -143,7 +143,7 @@ class Switch extends _react.default.PureComponent {
       status,
       status_state,
       status_props,
-      global_status_id,
+      globalStatus,
       status_no_animation,
       suffix,
       label,
@@ -205,7 +205,7 @@ class Switch extends _react.default.PureComponent {
     }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(_FormStatus.default, _extends({
       show: showStatus,
       id: id + '-form-status',
-      global_status_id: global_status_id,
+      globalStatus: globalStatus,
       label: label,
       text_id: id + '-status',
       width_selector: id + ', ' + id + '-label',
@@ -267,7 +267,7 @@ _defineProperty(Switch, "defaultProps", {
   status: null,
   status_state: 'error',
   status_props: null,
-  global_status_id: null,
+  globalStatus: null,
   status_no_animation: null,
   suffix: null,
   value: null,
@@ -296,7 +296,10 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes = _objectSpread(_object
   status: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.func, _propTypes.default.node]),
   status_state: _propTypes.default.string,
   status_props: _propTypes.default.object,
-  global_status_id: _propTypes.default.string,
+  globalStatus: _propTypes.default.shape({
+    id: _propTypes.default.string,
+    message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+  }),
   status_no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
   value: _propTypes.default.string,

package/cjs/components/textarea/Textarea.d.ts

@@ -7,6 +7,7 @@ import type {
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
 import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export type TextareaSuffix =
   | string
   | ((...args: any[]) => any)
@@ -69,9 +70,9 @@ export interface TextareaProps
   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;
 
   /**
    * Text describing the content of the Textarea more than the label. You can also send in a React component, so it gets wrapped inside the Textarea component.

package/cjs/components/textarea/Textarea.js

@@ -31,7 +31,7 @@ var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix"));
 
 var _AlignmentHelper, _span;
 
-const _excluded = ["label", "label_direction", "label_sr_only", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "disabled", "skeleton", "stretch", "placeholder", "align", "textarea_class", "readOnly", "textarea_attributes", "class", "className", "autoresize", "autoresize_max_rows", "id", "children", "value", "textarea_element"];
+const _excluded = ["label", "label_direction", "label_sr_only", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "disabled", "skeleton", "stretch", "placeholder", "align", "textarea_class", "readOnly", "textarea_attributes", "class", "className", "autoresize", "autoresize_max_rows", "id", "children", "value", "textarea_element"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -284,7 +284,7 @@ class Textarea extends _react.default.PureComponent {
       status_state,
       status_props,
       status_no_animation,
-      global_status_id,
+      globalStatus,
       suffix,
       disabled,
       skeleton,
@@ -379,7 +379,7 @@ class Textarea extends _react.default.PureComponent {
     }), _react.default.createElement("span", innerParams, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(_FormStatus.default, _extends({
       show: showStatus,
       id: id + '-form-status',
-      global_status_id: global_status_id,
+      globalStatus: globalStatus,
       label: label,
       text_id: id + '-status',
       text: status,
@@ -420,7 +420,7 @@ _defineProperty(Textarea, "defaultProps", {
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
-  global_status_id: null,
+  globalStatus: null,
   suffix: null,
   placeholder: null,
   align: null,
@@ -457,7 +457,10 @@ process.env.NODE_ENV !== "production" ? Textarea.propTypes = _objectSpread(_obje
   status_state: _propTypes.default.string,
   status_props: _propTypes.default.object,
   status_no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  global_status_id: _propTypes.default.string,
+  globalStatus: _propTypes.default.shape({
+    id: _propTypes.default.string,
+    message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+  }),
   suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
   placeholder: _propTypes.default.string,
   align: _propTypes.default.oneOf(['left', 'right']),

package/cjs/components/timeline/TimelineItem.d.ts

@@ -15,11 +15,11 @@ export declare type TimelineItemProps = {
     /**
      * Text displaying the title of the timeline item.
      */
-    title: React.ReactNode | string;
+    title: React.ReactNode;
     /**
      * Text displaying the subtitle of the timeline item.
      */
-    subtitle?: React.ReactNode | React.ReactNode[] | string | string[];
+    subtitle?: React.ReactNode | React.ReactNode[];
     /**
      * Text displaying info message of the timeline item.
      */

package/cjs/components/toggle-button/ToggleButton.d.ts

@@ -6,6 +6,7 @@ import type {
   FormStatusState,
   FormStatusText
 } from '../FormStatus';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 import type { IconIcon, IconSize } from '../Icon';
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
@@ -73,9 +74,9 @@ export interface ToggleButtonProps
   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;
 
   /**
    * Text describing the content of the ToggleButton more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButton component.

package/cjs/components/toggle-button/ToggleButton.js

@@ -41,7 +41,7 @@ var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix"));
 
 var _AlignmentHelper;
 
-const _excluded = ["status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "label", "label_direction", "label_sr_only", "text", "title", "readOnly", "className", "class", "disabled", "skeleton", "variant", "left_component", "icon", "icon_size", "icon_position", "value", "id", "checked", "children", "on_change", "on_state_update"];
+const _excluded = ["status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "label", "label_direction", "label_sr_only", "text", "title", "readOnly", "className", "class", "disabled", "skeleton", "variant", "left_component", "icon", "icon_size", "icon_position", "value", "id", "checked", "children", "on_change", "on_state_update"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -201,7 +201,7 @@ class ToggleButton extends _react.default.PureComponent {
         status_state,
         status_props,
         status_no_animation,
-        global_status_id,
+        globalStatus,
         suffix,
         label,
         label_direction,
@@ -326,7 +326,7 @@ class ToggleButton extends _react.default.PureComponent {
       }, _react.default.createElement(_FormStatus.default, _extends({
         show: showStatus,
         id: id + '-form-status',
-        global_status_id: global_status_id,
+        globalStatus: globalStatus,
         label: label,
         text_id: id + '-status',
         text: status,
@@ -378,7 +378,7 @@ _defineProperty(ToggleButton, "defaultProps", {
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
-  global_status_id: null,
+  globalStatus: null,
   suffix: null,
   value: '',
   icon: null,
@@ -411,7 +411,10 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes = _objectSpread(_
   status_state: _propTypes.default.string,
   status_props: _propTypes.default.object,
   status_no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  global_status_id: _propTypes.default.string,
+  globalStatus: _propTypes.default.shape({
+    id: _propTypes.default.string,
+    message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+  }),
   suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object, _propTypes.default.array]),
   icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),

package/cjs/components/toggle-button/ToggleButtonGroup.d.ts

@@ -7,6 +7,7 @@ import type {
 import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
 import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 export type ToggleButtonGroupVariant = 'default' | 'checkbox' | 'radio';
 export type ToggleButtonGroupSuffix =
   | string
@@ -68,9 +69,9 @@ export interface ToggleButtonGroupProps
   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;
 
   /**
    * Text describing the content of the ToggleButton more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButton component.

package/cjs/components/toggle-button/ToggleButtonGroup.js

@@ -31,7 +31,7 @@ var _FormRowHelpers = require("../form-row/FormRowHelpers");
 
 var _AlignmentHelper;
 
-const _excluded = ["status", "status_state", "status_props", "status_no_animation", "global_status_id", "suffix", "label_direction", "label_sr_only", "vertical", "layout_direction", "label", "variant", "left_component", "no_fieldset", "disabled", "skeleton", "className", "class", "multiselect", "id", "name", "value", "values", "children", "on_change"];
+const _excluded = ["status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "label_direction", "label_sr_only", "vertical", "layout_direction", "label", "variant", "left_component", "no_fieldset", "disabled", "skeleton", "className", "class", "multiselect", "id", "name", "value", "values", "children", "on_change"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -120,7 +120,7 @@ class ToggleButtonGroup extends _react.default.PureComponent {
       status_state,
       status_props,
       status_no_animation,
-      global_status_id,
+      globalStatus,
       suffix,
       label_direction,
       label_sr_only,
@@ -208,7 +208,7 @@ class ToggleButtonGroup extends _react.default.PureComponent {
     }, params), _react.default.createElement(_FormStatus.default, _extends({
       show: showStatus,
       id: id + '-form-status',
-      global_status_id: global_status_id,
+      globalStatus: globalStatus,
       label: label,
       text_id: id + '-status',
       text: status,
@@ -247,7 +247,7 @@ _defineProperty(ToggleButtonGroup, "defaultProps", {
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
-  global_status_id: null,
+  globalStatus: null,
   suffix: null,
   vertical: null,
   layout_direction: 'row',
@@ -277,7 +277,10 @@ process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes = _objectSpr
   status_state: _propTypes.default.string,
   status_props: _propTypes.default.object,
   status_no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  global_status_id: _propTypes.default.string,
+  globalStatus: _propTypes.default.shape({
+    id: _propTypes.default.string,
+    message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+  }),
   suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node]),
   vertical: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   layout_direction: _propTypes.default.oneOf(['column', 'row']),