@dnb/eufemia 9.12.1 → 9.13.0

package/es/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.scss

@@ -32,12 +32,22 @@
   }
 }
 
-.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(1) {
-  font-weight: var(--font-weight-basis);
+.dnb-autocomplete__root .dnb-drawer-list__option {
+  &__item:nth-of-type(1) {
+    font-weight: var(--font-weight-basis);
+  }
+  &__item:nth-of-type(n + 2) {
+    color: var(--color-black-55);
+  }
+  &__item--highlight {
+    font-weight: var(--font-weight-bold);
+  }
 }
-.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n + 2) {
-  color: var(--color-black-55);
+.dnb-autocomplete__root
+  .dnb-drawer-list__option--selected
+  .dnb-drawer-list__option__item:nth-of-type(n + 2) {
+  color: var(--color-white);
 }
-.dnb-autocomplete__root .dnb-drawer-list__option__item--highlight {
-  font-weight: var(--font-weight-bold);
+.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor {
+  color: var(--color-white);
 }

package/es/components/button/style/themes/_button-mixins.scss

@@ -2,7 +2,7 @@
 * Button mixins
 *
 */
-@mixin buttonHoverStyle($color, $background-color) {
+@mixin buttonHoverStyle($color, $background-color, $border-color) {
   // NB: to get "over" sibling, because of the extendFakeFocus
   // But if we would use it,
   // then then we have to take care of places we use position="absolute", like the Modal Close button
@@ -11,12 +11,17 @@
   color: $color;
   background-color: $background-color;
 
-  @include fakeBorder(var(--color-emerald-green), 0.125rem /*2px*/);
+  @include fakeBorder($border-color, 0.125rem /*2px*/);
 }
 
-@mixin buttonHover($color, $background-color, $enable-touch: null) {
+@mixin buttonHover(
+  $color,
+  $background-color,
+  $border-color: var(--color-emerald-green),
+  $enable-touch: null
+) {
   @include hover() {
-    @include buttonHoverStyle($color, $background-color);
+    @include buttonHoverStyle($color, $background-color, $border-color);
 
     @include IS_IE {
       // by setting opacity to 1, we make sure we don't get the artifact of a cutted border on top and bottom
@@ -29,7 +34,11 @@
   @if $enable-touch == 'touch' {
     html[data-whatintent='touch'] & {
       @include active() {
-        @include buttonHoverStyle($color, $background-color);
+        @include buttonHoverStyle(
+          $color,
+          $background-color,
+          $border-color
+        );
       }
     }
   }

package/es/components/button/style/themes/dnb-button-theme-open-banking.css

@@ -593,16 +593,16 @@
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
           opacity: 1; } }
@@ -615,17 +615,17 @@
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]),
         html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
     .dnb-button--signal:focus[disabled],
     html:not([data-whatintent='touch']) .dnb-button--signal:focus[disabled] {
       cursor: not-allowed; }

package/es/components/button/style/themes/dnb-button-theme-ui.css

@@ -589,16 +589,16 @@
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
           opacity: 1; } }
@@ -611,17 +611,17 @@
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-green);
       -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
               box-shadow: 0 0 0 0.125rem var(--border-color);
       border-color: transparent; }
       @media screen and (-ms-high-contrast: none) {
         html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]),
         html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
     .dnb-button--signal:focus[disabled],
     html:not([data-whatintent='touch']) .dnb-button--signal:focus[disabled] {
       cursor: not-allowed; }

package/es/components/button/style/themes/dnb-button-theme-ui.scss

@@ -321,6 +321,7 @@
     @include buttonHover(
       var(--color-ocean-green),
       var(--color-accent-yellow),
+      var(--color-ocean-green),
       'touch'
     );
     @include buttonFocus(

package/es/components/date-picker/DatePicker.js

@@ -337,7 +337,7 @@ export default class DatePicker extends React.PureComponent {
       global_status_id: global_status_id,
       label: label,
       text_id: id + '-status',
-      width_selector: id + '-input',
+      width_selector: id + '-shell',
       text: status,
       status: status_state,
       no_animation: status_no_animation,
@@ -345,7 +345,8 @@ export default class DatePicker extends React.PureComponent {
     }, status_props)), React.createElement("span", {
       className: "dnb-date-picker__row"
     }, React.createElement("span", {
-      className: "dnb-date-picker__shell"
+      className: "dnb-date-picker__shell",
+      id: `${id}-shell`
     }, React.createElement(DatePickerInput, _extends({
       id: id,
       title: title,

package/es/components/date-picker/DatePickerAddon.js

@@ -56,7 +56,7 @@ export default class DatePickerAddon extends React.PureComponent {
     endDate,
     event = null
   } = {}) {
-    this.context.setDate({
+    this.context.updateState({
       startDate,
       endDate,
       changeMonthViews: true

package/es/components/date-picker/DatePickerCalendar.js

@@ -24,6 +24,12 @@ export default class DatePickerCalendar extends React.PureComponent {
   constructor(props) {
     super(props);
 
+    _defineProperty(this, "onMouseLeaveHandler", () => {
+      this.context.updateState({
+        hoverDate: null
+      });
+    });
+
     _defineProperty(this, "onKeyDownHandler", event => {
       var _event$target;
 
@@ -130,7 +136,7 @@ export default class DatePickerCalendar extends React.PureComponent {
         }
 
         state.changeMonthViews = true;
-        this.context.setDate(state, () => {
+        this.context.updateState(state, () => {
           this.callOnSelect({
             event,
             nr,
@@ -371,6 +377,7 @@ export default class DatePickerCalendar extends React.PureComponent {
       tabIndex: "0",
       "aria-labelledby": `${id}--title`,
       onKeyDown: this.onKeyDownHandler,
+      onMouseLeave: this.onMouseLeaveHandler,
       ref: this._listRef
     }, !hideDays && React.createElement("thead", {
       "aria-hidden": true
@@ -441,7 +448,7 @@ export default class DatePickerCalendar extends React.PureComponent {
             endDate,
             resetDate,
             event,
-            onSelect: state => this.context.setDate(state, () => this.callOnSelect({
+            onSelect: state => this.context.updateState(state, () => this.callOnSelect({
               event,
               nr,
               hidePicker: !isRange

package/es/components/date-picker/DatePickerFooter.js

@@ -37,7 +37,7 @@ export default class DatePickerFooter extends React.PureComponent {
         args.event.persist();
       }
 
-      this.context.setDate({
+      this.context.updateState({
         startDate,
         endDate
       }, () => {
@@ -56,7 +56,7 @@ export default class DatePickerFooter extends React.PureComponent {
         args.event.persist();
       }
 
-      this.context.setDate({
+      this.context.updateState({
         date: undefined,
         startDate: undefined,
         endDate: undefined

package/es/components/date-picker/DatePickerInput.js

@@ -81,26 +81,23 @@ export default class DatePickerInput extends React.PureComponent {
     });
 
     _defineProperty(this, "callOnChangeAsInvalid", state => {
-      const {
-        startDate,
-        endDate,
-        event
-      } = _objectSpread(_objectSpread({}, this.context), state);
-
       this.context.updateState({
         hoverDate: null
-      });
+      }, () => {
+        if (this.context.hasHadValidDate) {
+          const {
+            startDate,
+            endDate,
+            event
+          } = _objectSpread(_objectSpread({}, this.context), state);
 
-      if (this.context.hasHadValidDate) {
-        this.context.callOnChangeHandler({
-          startDate,
-          endDate,
-          event
-        });
-        this.context.updateState({
-          hasHadValidDate: false
-        });
-      }
+          this.context.callOnChangeHandler({
+            startDate,
+            endDate,
+            event
+          });
+        }
+      });
     });
 
     _defineProperty(this, "callOnChange", ({
@@ -109,8 +106,7 @@ export default class DatePickerInput extends React.PureComponent {
       event
     }) => {
       const state = {
-        changeMonthViews: true,
-        hasHadValidDate: false
+        changeMonthViews: true
       };
 
       if (typeof startDate !== 'undefined' && isValid(startDate)) {
@@ -125,7 +121,7 @@ export default class DatePickerInput extends React.PureComponent {
         state.endDate = endDate;
       }
 
-      this.context.setDate(state, () => {
+      this.context.updateState(state, () => {
         if (typeof startDate !== 'undefined' && isValid(startDate) || typeof endDate !== 'undefined' && isValid(endDate)) {
           this.context.callOnChangeHandler({
             event
@@ -356,7 +352,7 @@ export default class DatePickerInput extends React.PureComponent {
           event
         });
       } else {
-        this.context.setDate({
+        this.context.updateState({
           [`${mode}Date`]: null
         });
         this.context.updateState({
@@ -604,7 +600,7 @@ export default class DatePickerInput extends React.PureComponent {
         on_click: onSubmit
       }, submitAttributes, status_props)),
       lang: locale === null || locale === void 0 ? void 0 : locale.code
-    }, attributes)), ' ');
+    }, attributes)));
   }
 
 }

package/es/components/date-picker/DatePickerProvider.js

@@ -84,7 +84,7 @@ export default class DatePickerProvider extends React.PureComponent {
       }
     }
 
-    if (state.lastEventCallCache && (String(state.lastEventCallCache.startDate) !== String(state.startDate) || String(state.lastEventCallCache.endDate) !== String(state.endDate))) {
+    if (state.lastEventCallCache && (state.lastEventCallCache.startDate !== state.startDate || state.lastEventCallCache.endDate !== state.endDate)) {
       state.lastEventCallCache = {};
     }
 
@@ -92,6 +92,7 @@ export default class DatePickerProvider extends React.PureComponent {
       state.__startDay = pad(format(state.startDate, 'dd'), 2);
       state.__startMonth = pad(format(state.startDate, 'MM'), 2);
       state.__startYear = format(state.startDate, 'yyyy');
+      state.hasHadValidDate = true;
     } else if (state.startDate === undefined) {
       state.__startDay = null;
       state.__startMonth = null;
@@ -102,6 +103,7 @@ export default class DatePickerProvider extends React.PureComponent {
       state.__endDay = pad(format(state.endDate, 'dd'), 2);
       state.__endMonth = pad(format(state.endDate, 'MM'), 2);
       state.__endYear = format(state.endDate, 'yyyy');
+      state.hasHadValidDate = true;
     } else if (state.endDate === undefined) {
       state.__endDay = null;
       state.__endMonth = null;
@@ -160,19 +162,8 @@ export default class DatePickerProvider extends React.PureComponent {
       }), cb);
     });
 
-    _defineProperty(this, "setDate", (state, cb = null) => {
-      this.setState(_objectSpread(_objectSpread({}, state), {}, {
-        _listenForPropChanges: false
-      }), cb);
-      const startDateIsValid = Boolean(state.startDate && isValid(state.startDate));
-      const endDateIsValid = Boolean(state.endDate && isValid(state.endDate));
-      this.setState({
-        hasHadValidDate: startDateIsValid || endDateIsValid
-      });
-    });
-
     _defineProperty(this, "callOnChangeHandler", args => {
-      if (this.state.lastEventCallCache && String(this.state.lastEventCallCache.startDate) === String(this.state.startDate) && String(this.state.lastEventCallCache.endDate) === String(this.state.endDate)) {
+      if (this.state.lastEventCallCache && this.state.lastEventCallCache.startDate === this.state.startDate && this.state.lastEventCallCache.endDate === this.state.endDate) {
         return;
       }
 
@@ -254,7 +245,6 @@ export default class DatePickerProvider extends React.PureComponent {
       value: _objectSpread(_objectSpread({
         translation: this.context.translation,
         setViews: this.setViews,
-        setDate: this.setDate,
         updateState: this.updateState,
         getReturnObject: this.getReturnObject,
         callOnChangeHandler: this.callOnChangeHandler,

package/es/components/dropdown/Dropdown.d.ts

@@ -1,4 +1,51 @@
 import * as React from 'react';
+export type DropdownSpace =
+  | string
+  | number
+  | boolean
+  | {
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+       */
+      top?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+       */
+      right?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+       */
+      bottom?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+       */
+      left?: string | number | boolean;
+    };
+export type DropdownTop = string | number | boolean;
+export type DropdownRight = string | number | boolean;
+export type DropdownBottom = string | number | boolean;
+export type DropdownLeft = string | number | boolean;
+export type DropdownUseDrawerOnMobile = string | boolean;
+export type DropdownIsPopup = string | boolean;
+export type DropdownAlignDrawer = 'left' | 'right';
+export type DropdownOptionsRender =
+  | Object
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type DropdownWrapperElement =
+  | Object
+  | ((...args: any[]) => any)
+  | React.ReactNode;
+export type DropdownFixedPosition = string | boolean;
+export type DropdownPreventFocus = string | boolean;
+export type DropdownSkipKeysearch = string | boolean;
+export type DropdownSelectedValue = string | React.ReactNode;
+export type DropdownContent = string | React.ReactNode | string[];
+export type DropdownRawData = any[] | Object | ((...args: any[]) => any);
+export type DropdownIgnoreEvents = string | boolean;
 export type DropdownTitle = string | React.ReactNode;
 export type DropdownVariant =
   | 'primary'
@@ -64,35 +111,6 @@ export type DropdownOpened = string | boolean;
 export type DropdownDisabled = string | boolean;
 export type DropdownStretch = string | boolean;
 export type DropdownSkeleton = string | boolean;
-export type DropdownSpace =
-  | string
-  | number
-  | boolean
-  | {
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-       */
-      top?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-       */
-      right?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-       */
-      bottom?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-       */
-      left?: string | number | boolean;
-    };
-export type DropdownTop = string | number | boolean;
-export type DropdownRight = string | number | boolean;
-export type DropdownBottom = string | number | boolean;
-export type DropdownLeft = string | number | boolean;
 export type DropdownChildren =
   | string
   | ((...args: any[]) => any)
@@ -104,6 +122,81 @@ export type DropdownChildren =
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
 export interface DropdownProps extends React.HTMLProps<HTMLElement> {
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: DropdownSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: DropdownTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: DropdownRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: DropdownBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: DropdownLeft;
+  role?: string;
+
+  /**
+   * Set a `cache_hash` as a string to enable internal memorizing of the list to enhance rerendering performance. Components like Autocomplete is using this because of the huge data changes due to search and reorder. Defaults to `null`.
+   */
+  cache_hash?: string;
+  use_drawer_on_mobile?: DropdownUseDrawerOnMobile;
+  is_popup?: DropdownIsPopup;
+
+  /**
+   * Use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu` - or if a independent width is used. Defaults to `left`.
+   */
+  align_drawer?: DropdownAlignDrawer;
+
+  /**
+   * Has to be a function, returning the items again. Se <a href="/uilib/components/fragments/drawer-list#example-usage-of-options_render">example</a>. This can be used to add additional options above the actual rendered list.
+   */
+  options_render?: DropdownOptionsRender;
+
+  /**
+   * Has to be a HTML Element, ideal a mother element, used to calculate sizes and distances. Also used for the "click outside" detection. Clicking on the `wrapper_element` will not be anymore triggered as an outside click.
+   */
+  wrapper_element?: DropdownWrapperElement;
+
+  /**
+   * Define a HTML class that will be set on the list, beside `dnb-drawer-list__list`.
+   */
+  list_class?: string;
+
+  /**
+   * If set to true, the DrawerList will be fixed in it&#39;s scroll position by using CSS `position: fixed;`. Defaults to `false`.
+   */
+  fixed_position?: DropdownFixedPosition;
+  prevent_focus?: DropdownPreventFocus;
+
+  /**
+   * If set to true, search items by the first key will be ignored. Defaults to `false`.
+   */
+  skip_keysearch?: DropdownSkipKeysearch;
+  selected_value?: DropdownSelectedValue;
+  content?: DropdownContent;
+  prepared_data?: any[];
+  raw_data?: DropdownRawData;
+
+  /**
+   * If set to true, all keyboard and mouse events will be ignored. Defaults to `false`.
+   */
+  ignore_events?: DropdownIgnoreEvents;
+  handle_dismiss_focus?: (...args: any[]) => any;
+  on_pre_change?: (...args: any[]) => any;
+  on_resize?: (...args: any[]) => any;
   id?: string;
 
   /**
@@ -298,31 +391,6 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
    */
   skeleton?: DropdownSkeleton;
   class?: string;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: DropdownSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: DropdownTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: DropdownRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: DropdownBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: DropdownLeft;
   className?: string;
 
   /**

package/es/components/dropdown/Dropdown.js

@@ -25,7 +25,7 @@ import Button, { buttonVariantPropType } from '../button/Button';
 import DrawerList from '../../fragments/drawer-list/DrawerList';
 import DrawerListContext from '../../fragments/drawer-list/DrawerListContext';
 import DrawerListProvider from '../../fragments/drawer-list/DrawerListProvider';
-import { parseContentTitle, getCurrentData } from '../../fragments/drawer-list/DrawerListHelpers';
+import { drawerListPropTypes, parseContentTitle, getCurrentData } from '../../fragments/drawer-list/DrawerListHelpers';
 export default class Dropdown extends React.PureComponent {
   static enableWebComponent() {
     registerElement(Dropdown === null || Dropdown === void 0 ? void 0 : Dropdown.tagName, Dropdown, Dropdown.defaultProps);
@@ -110,7 +110,7 @@ _defineProperty(Dropdown, "defaultProps", {
   on_state_update: null
 });
 
-process.env.NODE_ENV !== "production" ? Dropdown.propTypes = _objectSpread(_objectSpread({
+process.env.NODE_ENV !== "production" ? Dropdown.propTypes = _objectSpread(_objectSpread(_objectSpread({}, spacingPropTypes), drawerListPropTypes), {}, {
   id: PropTypes.string,
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   variant: buttonVariantPropType.variant,
@@ -155,8 +155,7 @@ process.env.NODE_ENV !== "production" ? Dropdown.propTypes = _objectSpread(_obje
   disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   stretch: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  class: PropTypes.string
-}, spacingPropTypes), {}, {
+  class: PropTypes.string,
   className: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node, PropTypes.object, PropTypes.array]),
   custom_element: PropTypes.object,

package/es/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;
 
-const _excluded = ["show", "title", "status", "state", "size", "variant", "className", "no_animation", "stretch", "class", "text_id", "status_id", "id", "text", "icon", "icon_size", "skeleton", "children", "role"];
+const _excluded = ["show", "title", "status", "state", "size", "variant", "className", "no_animation", "stretch", "class", "text_id", "label", "status_id", "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; }
 
@@ -266,6 +266,7 @@ export default class FormStatus extends React.PureComponent {
       stretch,
       class: _className,
       text_id,
+      label,
       status_id,
       id,
       text,

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

@@ -95,7 +95,7 @@ export interface GlobalStatusProps extends React.HTMLProps<HTMLElement> {
   state?: GlobalStatusState;
 
   /**
-   * Set to `true` or `false` to manually make the global status visible. Defaults to `show`.
+   * Set to `true` or `false` to manually make the global status visible. Defaults to `true`.
    */
   show?: GlobalStatusShow;
 

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

@@ -5,6 +5,7 @@ export type InputMaskedCurrencyMask = string | boolean | Object;
 export type InputMaskedNumberFormat = string | Object;
 export type InputMaskedAsCurrency = string | boolean;
 export type InputMaskedAsNumber = string | boolean;
+export type InputMaskedAsPercent = string | boolean;
 export type InputMaskedShowMask = string | boolean;
 export type InputMaskedShowGuide = string | boolean;
 export type InputMaskedKeepCharPositions = string | boolean;
@@ -129,6 +130,11 @@ export interface InputMaskedProps extends React.HTMLProps<HTMLElement> {
    */
   as_number?: InputMaskedAsNumber;
 
+  /**
+   * Set to `true` to automatically set a number mask with a percentage sign based on the given or inherited locale.
+   */
+  as_percent?: InputMaskedAsPercent;
+
   /**
    * Show mask when input is empty and has no focus. Defaults to `false`.
    */