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

package/cjs/components/dropdown/Dropdown.js

@@ -41,7 +41,7 @@ var _DrawerListHelpers = require("../../fragments/drawer-list/DrawerListHelpers"
 
 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 _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); }
 
@@ -102,7 +102,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,
@@ -154,7 +154,10 @@ process.env.NODE_ENV !== "production" ? Dropdown.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]),
   scrollable: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   focusable: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
@@ -365,7 +368,7 @@ class DropdownInstance extends _react.default.PureComponent {
       status_state,
       status_props,
       status_no_animation,
-      global_status_id,
+      globalStatus,
       suffix,
       scrollable,
       focusable,
@@ -477,7 +480,7 @@ class DropdownInstance 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',
       text: status,

package/cjs/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/cjs/components/form-row/FormRow.js

@@ -25,7 +25,7 @@ var _SpacingHelper = require("../space/SpacingHelper");
 
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -58,7 +58,10 @@ const formRowPropTypes = _objectSpread(_objectSpread({
   centered: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   section_style: _propTypes.default.string,
   section_spacing: _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])
+  }),
   responsive: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   disabled: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
@@ -86,7 +89,7 @@ const formRowDefaultProps = {
   centered: null,
   section_style: null,
   section_spacing: null,
-  global_status_id: null,
+  globalStatus: null,
   responsive: null,
   disabled: null,
   skeleton: null,
@@ -141,7 +144,7 @@ class FormRow extends _react.default.PureComponent {
       centered,
       section_style,
       section_spacing,
-      global_status_id,
+      globalStatus,
       responsive,
       disabled,
       skeleton,
@@ -188,7 +191,7 @@ class FormRow extends _react.default.PureComponent {
         },
         itsMeAgain: true,
         hasLabel,
-        global_status_id,
+        globalStatus,
         direction,
         vertical,
         label_direction: (0, _componentHelper.isTrue)(vertical) ? 'vertical' : label_direction,

package/cjs/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/cjs/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/cjs/components/form-status/FormStatus.js

@@ -30,7 +30,7 @@ var _FormRowHelpers = require("../form-row/FormRowHelpers");
 
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -123,7 +123,7 @@ class FormStatus extends _react.default.PureComponent {
   }
 
   constructor(props, context) {
-    var _context$FormStatus, _context$FormRow;
+    var _props$globalStatus, _context$FormStatus, _context$FormStatus$g, _context$FormRow, _context$FormRow$glob;
 
     super(props);
 
@@ -155,11 +155,12 @@ class FormStatus extends _react.default.PureComponent {
     });
 
     this.state.id = props.id || (0, _componentHelper.makeUniqueId)();
-    this._globalStatus = _GlobalStatusProvider.default.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.default.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({
@@ -167,7 +168,7 @@ class FormStatus extends _react.default.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
           }
@@ -227,6 +228,7 @@ class FormStatus extends _react.default.PureComponent {
       state,
       show,
       text,
+      globalStatus,
       children,
       label
     } = this.props;
@@ -245,7 +247,7 @@ class FormStatus extends _react.default.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
             }
@@ -304,6 +306,7 @@ class FormStatus extends _react.default.PureComponent {
       text_id,
       label,
       status_id,
+      globalStatus,
       id,
       text,
       icon,
@@ -371,13 +374,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,
@@ -402,7 +405,10 @@ process.env.NODE_ENV !== "production" ? FormStatus.propTypes = _objectSpread(_ob
   state: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string, _propTypes.default.oneOf(['error', 'warn', 'info', 'marketing'])]),
   variant: _propTypes.default.oneOf(['flat', 'outlined']),
   size: _propTypes.default.oneOf(['default', 'large']),
-  global_status_id: _propTypes.default.string,
+  globalStatus: _propTypes.default.shape({
+    id: _propTypes.default.string,
+    message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+  }),
   attributes: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
   text_id: _propTypes.default.string,
   width_selector: _propTypes.default.string,

package/cjs/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/cjs/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/cjs/components/help-button/HelpButton.js

@@ -15,12 +15,10 @@ var _HelpButtonInstance = _interopRequireDefault(require("./HelpButtonInstance")
 
 var _componentHelper = require("../../shared/component-helper");
 
-const _excluded = ["modal_content", "children", "modal_props"];
+const _excluded = ["children", "render"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || 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); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -31,23 +29,13 @@ const defaultProps = {
 };
 
 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.default.useContext(_Context.default);
 
   const props = (0, _componentHelper.extendPropsWithContext)(localProps, defaultProps);
-  const content = getContent(props);
 
   const {
-    modal_content,
     children,
-    modal_props
+    render
   } = props,
         params = _objectWithoutProperties(props, _excluded);
 
@@ -55,14 +43,18 @@ function HelpButton(localProps) {
     params.icon = 'question';
   }
 
-  if (content) {
+  if (children) {
     if (!params.title) {
       params.title = context.getTranslation(props).HelpButton.title;
     }
 
-    return _react.default.createElement(_Dialog.default, _extends({
+    if (typeof render === 'function') {
+      return render(children, params);
+    }
+
+    return _react.default.createElement(_Dialog.default, {
       triggerAttributes: params
-    }, modal_props), content);
+    }, children);
   }
 
   return _react.default.createElement(_HelpButtonInstance.default, params);

package/cjs/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/cjs/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/cjs/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/cjs/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`.
    */

package/cjs/components/input/Input.js

@@ -35,7 +35,7 @@ var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix"));
 
 var _AlignmentHelper;
 
-const _excluded = ["type", "size", "label", "label_direction", "label_sr_only", "status", "status_state", "status_props", "status_no_animation", "global_status_id", "disabled", "skeleton", "placeholder", "clear", "keep_placeholder", "suffix", "align", "input_class", "submit_button_title", "clear_button_title", "submit_button_variant", "submit_button_icon", "submit_button_status", "submit_element", "inner_element", "autocomplete", "readOnly", "stretch", "input_attributes", "icon", "icon_position", "icon_size", "class", "className", "id", "children", "value", "selectall", "on_submit", "input_element"],
+const _excluded = ["type", "size", "label", "label_direction", "label_sr_only", "status", "globalStatus", "status_state", "status_props", "status_no_animation", "disabled", "skeleton", "placeholder", "clear", "keep_placeholder", "suffix", "align", "input_class", "submit_button_title", "clear_button_title", "submit_button_variant", "submit_button_icon", "submit_button_status", "submit_element", "inner_element", "autocomplete", "readOnly", "stretch", "input_attributes", "icon", "icon_position", "icon_size", "class", "className", "id", "children", "value", "selectall", "on_submit", "input_element"],
       _excluded2 = ["id", "title", "disabled", "skeleton", "variant", "icon", "icon_size", "status", "status_state", "status_props", "className"];
 
 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); }
@@ -65,11 +65,14 @@ const inputPropTypes = _objectSpread(_objectSpread({
   label_direction: _propTypes.default.oneOf(['horizontal', 'vertical']),
   label_sr_only: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   status: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.func, _propTypes.default.node]),
+  globalStatus: _propTypes.default.shape({
+    id: _propTypes.default.string,
+    message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+  }),
   status_state: _propTypes.default.string,
   status_props: _propTypes.default.object,
   status_no_animation: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   input_state: _propTypes.default.string,
-  global_status_id: _propTypes.default.string,
   autocomplete: _propTypes.default.string,
   submit_button_title: _propTypes.default.string,
   clear_button_title: _propTypes.default.string,
@@ -282,10 +285,10 @@ class Input extends _react.default.PureComponent {
       label_direction,
       label_sr_only,
       status,
+      globalStatus,
       status_state,
       status_props,
       status_no_animation,
-      global_status_id,
       disabled,
       skeleton,
       placeholder,
@@ -400,7 +403,7 @@ class Input 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: status,
       state: status_state,
@@ -477,11 +480,11 @@ _defineProperty(Input, "defaultProps", {
   label_direction: null,
   label_sr_only: null,
   status: null,
+  globalStatus: null,
   status_state: 'error',
   status_props: null,
   status_no_animation: null,
   input_state: null,
-  global_status_id: null,
   autocomplete: 'off',
   placeholder: null,
   clear: null,

package/cjs/components/input-masked/InputMasked.d.ts

@@ -7,6 +7,7 @@ import type {
   FormStatusState,
   FormStatusText
 } from '../FormStatus';
+import type { GlobalStatusConfigObject } from '../GlobalStatus';
 import type { IconIcon, IconSize } from '../Icon';
 import type {
   InputInputAttributes,
@@ -195,9 +196,9 @@ export interface InputMaskedProps
   input_state?: string;
 
   /**
-   * 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;
 
   /**
    * 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.

package/cjs/components/input-masked/InputMaskedUtils.js

@@ -66,9 +66,13 @@ const correctNumberValue = _ref3 => {
 
   if (maskParams.integerLimit && typeof maskParams.integerLimit === 'number') {
     const limit = maskParams.integerLimit;
-    const integers = value.slice(0, limit);
-    const decimals = decimalPos > 0 ? value.slice(decimalPos) : '';
-    value = integers + decimals;
+    const integers = value.split('.')[0];
+    const isNegative = parseFloat(integers) < 0;
+
+    if (integers.length - (isNegative ? 1 : 0) > limit) {
+      const decimals = decimalPos > 0 ? value.slice(decimalPos) : '';
+      value = integers.slice(0, limit + (isNegative ? 1 : 0)) + decimals;
+    }
   }
 
   const shouldHaveDecimals = maskParams.allowDecimal || maskParams.decimalLimit > 0 && maskParams.allowDecimal !== false;

package/cjs/components/lib.d.ts

@@ -61,7 +61,7 @@ export declare const getComponents: () => {
     Accordion: typeof Accordion;
     Anchor: import("react").ForwardRefExoticComponent<Pick<import("./anchor/Anchor").AnchorProps & import("react").HTMLProps<HTMLAnchorElement> & import("./space/types").SpacingElementProps & {
         space?: import("./space/types").SpaceType | import("./space/types").SpacingElementProps;
-    }, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "space" | "top" | "right" | "bottom" | "left" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "innerRef" | "list" | "tooltip" | "step" | "shape" | "skeleton" | "as" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap" | "to" | "element" | "targetBlankTitle" | "omitClass" | "inner_ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    }, "aria-hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "accessKey" | "key" | "value" | "space" | "top" | "right" | "bottom" | "left" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "innerRef" | "list" | "tooltip" | "step" | "shape" | "skeleton" | "as" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap" | "to" | "icon" | "element" | "targetBlankTitle" | "iconPosition" | "omitClass" | "inner_ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
     Autocomplete: typeof Autocomplete;
     Avatar: {
         (localProps: import("./avatar/Avatar").AvatarProps & import("./space/types").SpacingElementProps & {