@dnb/eufemia 9.17.2 → 9.18.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.18.0](https://github.com/dnbexperience/eufemia/compare/v9.17.2...v9.18.0) (2021-12-16)
+
+
+### Bug Fixes
+
+* **InputMasked:** inherit of provider/context props ([89db309](https://github.com/dnbexperience/eufemia/commit/89db309fd0d09f125c3d66ff9e745a12fbfb6ed2))
+* **Modal:** Convert to TypeScript ([#1177](https://github.com/dnbexperience/eufemia/issues/1177)) ([b832b29](https://github.com/dnbexperience/eufemia/commit/b832b29c401d6c1d8f1e9bb36eadbcac984bd330))
+* **StepIndicator:** enhance NVDA support by omitting click event ([74ae87c](https://github.com/dnbexperience/eufemia/commit/74ae87ca601ac3f004518d6c5b6fd34ca8d5a439))
+
+
+### Features
+
+* **Tag:** add new tag component ([dec57cb](https://github.com/dnbexperience/eufemia/commit/dec57cb8ded032b70b15a1b479d5cdc9782e0528))
+
 ## [9.17.2](https://github.com/dnbexperience/eufemia/compare/v9.17.1...v9.17.2) (2021-12-15)
 
 

package/cjs/components/Tag.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ATTENTION: This file is auto generated by using "prepareTemplates".
+ * Do not change the content!
+ *
+ */
+
+/**
+ * Library Index tag to autogenerate all the components and extensions
+ * Used by "prepareTags"
+ */
+
+import Tag from './tag/Tag'
+export * from './tag/Tag'
+export default Tag

package/cjs/components/Tag.js

@@ -0,0 +1,52 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+
+var _Tag = _interopRequireWildcard(require("./tag/Tag"));
+
+Object.keys(_Tag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Tag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Tag[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = _Tag.default;
+exports.default = _default;

package/cjs/components/accordion/Accordion.d.ts

@@ -59,7 +59,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   title?: React.ReactNode;
 
   /**
-   * If set to `true` the accordion will be expanded as it&#39;s initial state.
+   * If set to `true` the accordion will be expanded as its initial state.
    */
   expanded?: AccordionExpanded;
 
@@ -69,7 +69,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   no_animation?: AccordionNoAnimation;
 
   /**
-   * If set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But thats mainly an technical aspect to consider.
+   * If set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But that&#39;s mainly a technical aspect to consider.
    */
   expanded_ssr?: AccordionExpandedSsr;
 
@@ -79,7 +79,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   prerender?: AccordionPrerender;
 
   /**
-   * If set to `true` the accordion component will not re-render it&#39;s content – can be useful for widgets you don&#39;t have control of storing the temporary state during interaction.
+   * If set to `true` the accordion component will not re-render its content – can be useful for widgets you don&#39;t have control of storing the temporary state during an interaction.
    */
   prevent_rerender?: AccordionPreventRerender;
 
@@ -89,7 +89,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   prevent_rerender_conditional?: AccordionPreventRerenderConditional;
 
   /**
-   * If set to `true`, it will remember a changed state initiated by the user. It requires an unique `id`. It will store the sate in the local storage.
+   * If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.
    */
   remember_state?: AccordionRememberState;
 
@@ -125,7 +125,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLElement> {
   skeleton?: AccordionSkeleton;
 
   /**
-   * An unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
+   * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
    */
   id?: string;
   group?: string;
@@ -214,13 +214,13 @@ export type GroupRememberState = string | boolean;
  */
 export interface GroupProps {
   /**
-   * An unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
+   * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required.
    */
   id?: string;
   group?: string;
 
   /**
-   * If set to `true`, it will remember a changed state initiated by the user. It requires an unique `id`. It will store the sate in the local storage.
+   * If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.
    */
   remember_state?: GroupRememberState;
 }

package/cjs/components/autocomplete/Autocomplete.d.ts

@@ -224,12 +224,12 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   mode?: AutocompleteMode;
 
   /**
-   * Give a title to let the user know what they has to do. Defaults to `Skriv og få alternativer&#39;` .
+   * Give a title to let the user know what theyhaves to do. Defaults to `Skriv og få alternativer&#39;` .
    */
   title?: AutocompleteTitle;
 
   /**
-   * Use this to define the pre filled placeholder text in the input. Defaults to `title="Skriv og velg"`.
+   * Use this to define the pre-filled placeholder text in the input. Defaults to `title="Skriv og velg"`.
    */
   placeholder?: AutocompletePlaceholder;
 
@@ -254,7 +254,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   indicator_label?: AutocompleteIndicatorLabel;
 
   /**
-   * Only for screen readers. Title of the button in order to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`.
+   * Only for screen readers. Title of the button to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`.
    */
   show_options_sr?: string;
 
@@ -284,7 +284,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   icon_size?: string;
 
   /**
-   * Position of icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`.
+   * Position of the icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`.
    */
   icon_position?: AutocompleteIconPosition;
 
@@ -314,7 +314,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   label_sr_only?: AutocompleteLabelSrOnly;
 
   /**
-   * Use `true` to not remove the typed value on input blur, if it is invalid. By default the typed value will disappear / replaced by a selected value from the data list during the input field blur.
+   * Use `true` to not remove the typed value on input blur, if it is invalid. By default, the typed value will disappear / replaced by a selected value from the data list during the input field blur.
    */
   keep_value?: AutocompleteKeepValue;
 
@@ -324,7 +324,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   keep_value_and_selection?: AutocompleteKeepValueAndSelection;
 
   /**
-   * If set to `true`, a clear button is showed inside the input field. Defaults to `false`.
+   * If set to `true`, a clear button is shown inside the input field. Defaults to `false`.
    */
   show_clear_button?: AutocompleteShowClearButton;
 
@@ -334,7 +334,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   status?: AutocompleteStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -375,7 +375,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   focusable?: AutocompleteFocusable;
 
   /**
-   * If set to `true`, word highlighting will disabled, but the options will still get filtered. Defaults to `false`.
+   * If set to `true`, word highlighting will be disabled, but the options will still get filtered. Defaults to `false`.
    */
   disable_highlighting?: AutocompleteDisableHighlighting;
 
@@ -410,7 +410,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   show_submit_button?: AutocompleteShowSubmitButton;
 
   /**
-   * Replace the drop down / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from &#39;@dnb/eufemia/components/input/Input&#39;`.
+   * Replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from &#39;@dnb/eufemia/components/input/Input&#39;`.
    */
   submit_element?: React.ReactNode;
 
@@ -440,7 +440,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   input_element?: AutocompleteInputElement;
 
   /**
-   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If You don&#39;t have to define a `value`, You can also send in a `function` which will be called once the user opens the DrawerList.
+   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
    */
   data?: AutocompleteData;
 
@@ -455,7 +455,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   search_numbers?: AutocompleteSearchNumbers;
 
   /**
-   * If you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice . Defaults to `null`.
+   * If you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice. Defaults to `null`.
    */
   default_value?: AutocompleteDefaultValue;
 
@@ -470,7 +470,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   input_value?: string;
 
   /**
-   * Use `true` to auto open the list once the users is entering the input field with the keyboard.
+   * Use `true` to auto open the list once the user is entering the input field with the keyboard.
    */
   open_on_focus?: AutocompleteOpenOnFocus;
 
@@ -513,7 +513,7 @@ export interface AutocompleteProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If You don&#39;t have to define a `value`, You can also send in a `function` which will be called once the user opens the DrawerList.
+   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
    */
   children?: AutocompleteChildren;
   custom_element?: Object;

package/cjs/components/button/Button.d.ts

@@ -22,7 +22,7 @@ export type ButtonStatus =
   | ((...args: any[]) => any)
   | React.ReactNode;
 export type ButtonStatusNoAnimation = string | boolean;
-export type ButtonTo = string | Object | ((...args: any[]) => any);
+export type ButtonTo = string | any | ((...args: any[]) => any);
 export type ButtonWrap = string | boolean;
 export type ButtonBounding = string | boolean;
 export type ButtonStretch = string | boolean;
@@ -34,7 +34,7 @@ export type ButtonChildren =
   | React.ReactNode;
 export type ButtonElement =
   | ((...args: any[]) => any)
-  | Object
+  | any
   | React.ReactNode;
 export type ButtonSpace =
   | string
@@ -66,10 +66,10 @@ export type ButtonRight = string | number | boolean;
 export type ButtonBottom = string | number | boolean;
 export type ButtonLeft = string | number | boolean;
 export type ButtonOnClick = string | ((...args: any[]) => any);
-
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
  */
+
 export interface ButtonProps extends React.HTMLProps<HTMLElement> {
   /**
    * The content of the button can be a string or a React Element.
@@ -129,7 +129,7 @@ export interface ButtonProps extends React.HTMLProps<HTMLElement> {
   /**
    * Use an object to define additional FormStatus properties.
    */
-  status_props?: Object;
+  status_props?: any;
   status_no_animation?: ButtonStatusNoAnimation;
 
   /**
@@ -178,9 +178,9 @@ export interface ButtonProps extends React.HTMLProps<HTMLElement> {
    */
   skeleton?: ButtonSkeleton;
   disabled?: ButtonDisabled;
-  inner_ref?: Object;
+  inner_ref?: any;
   className?: string;
-  innerRef?: Object;
+  innerRef?: any;
 
   /**
    * The content of the button can be a string or a React Element.
@@ -216,7 +216,7 @@ export interface ButtonProps extends React.HTMLProps<HTMLElement> {
    * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
    */
   left?: ButtonLeft;
-  custom_element?: Object;
+  custom_element?: any;
   custom_method?: (...args: any[]) => any;
 
   /**

package/cjs/components/button/Button.js

@@ -241,14 +241,16 @@ var Button = function (_React$PureComponent) {
 
       var classes = (0, _classnames.default)("dnb-button dnb-button--".concat(usedVariant || 'primary'), (text || content || custom_content) && 'dnb-button--has-text', (0, _SkeletonHelper.createSkeletonClass)(variant === 'tertiary' ? 'font' : 'shape', skeleton, this.context), (0, _SpacingHelper.createSpacingClasses)(props), class_name, className, (props.href || props.to) && '', icon && "dnb-button--icon-position-".concat(icon_position, " dnb-button--has-icon") + (iconSize ? " dnb-button--icon-size-".concat(iconSize) : ""), usedSize && usedSize !== 'default' && "dnb-button--size-".concat(usedSize), (0, _componentHelper.isTrue)(stretch) && 'dnb-button--stretch', wrap && 'dnb-button--wrap', status && "dnb-button__status--".concat(status_state));
 
-      var params = _objectSpread(_objectSpread({
+      var params = _objectSpread({
         className: classes,
         title: title,
         id: this._id,
         disabled: (0, _componentHelper.isTrue)(disabled)
-      }, attributes), {}, {
-        onClick: this.onClickHandler
-      });
+      }, attributes);
+
+      if (this.props.on_click || this.props.onClick) {
+        params.onClick = this.onClickHandler;
+      }
 
       if (Element !== _Anchor.default && !params.type) {
         params.type = params.type === '' ? undefined : 'button';

package/cjs/components/checkbox/Checkbox.d.ts

@@ -57,7 +57,7 @@ export type CheckboxChildren = string | ((...args: any[]) => any);
  */
 export interface CheckboxProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: CheckboxLabel;
 
@@ -74,7 +74,7 @@ export interface CheckboxProps extends React.HTMLProps<HTMLElement> {
   default_state?: CheckboxDefaultState;
 
   /**
-   * Determine whether the checkbox is checked or not. Default will be `false`.
+   * Determine whether the checkbox is checked or not. The default is `false`.
    */
   checked?: CheckboxChecked;
   disabled?: CheckboxDisabled;
@@ -91,7 +91,7 @@ export interface CheckboxProps extends React.HTMLProps<HTMLElement> {
   status?: CheckboxStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 

package/cjs/components/date-picker/DatePicker.d.ts

@@ -91,32 +91,32 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   title?: string;
 
   /**
-   * Defines the pre filled date by either a JavaScript DateInstance or (ISO 8601) like `date="2019-05-05"`.
+   * Defines the pre-filled date by either a JavaScript DateInstance or (ISO 8601) like `date="2019-05-05"`.
    */
   date?: DatePickerDate;
 
   /**
-   * To set the pre filled starting date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.
+   * To set the pre-filled starting date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.
    */
   start_date?: DatePickerStartDate;
 
   /**
-   * To set the pre filled ending date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.
+   * To set the pre-filled ending date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`.
    */
   end_date?: DatePickerEndDate;
 
   /**
-   * To display what month should be shows in the first calendar by default. Defaults to the `date` respective `start_date`.
+   * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`.
    */
   month?: DatePickerMonth;
 
   /**
-   * To display what month should be shows in the first calendar by default. Defaults to the `date` respective `start_date`.
+   * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`.
    */
   start_month?: DatePickerStartMonth;
 
   /**
-   * To display what month should be shows in the second calendar by default. Defaults to the `date` respective `start_date`.
+   * To display what month should be shown in the second calendar by default. Defaults to the `date` respective `start_date`.
    */
   end_month?: DatePickerEndMonth;
 
@@ -168,7 +168,7 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   only_month?: DatePickerOnlyMonth;
 
   /**
-   * Use `true` to only show the last week in the current month, if it needs to be shows. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`.
+   * Use `true` to only show the last week in the current month if it needs to be shown. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`.
    */
   hide_last_week?: DatePickerHideLastWeek;
 
@@ -184,12 +184,12 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   show_input?: DatePickerShowInput;
 
   /**
-   * If set to `true`, a submit button will be shown. You can change the default text by using `submit_button_text="Ok"`. Defaults to `false`. If the `range` prop is `true`, then the submit button is show by.
+   * If set to `true`, a submit button will be shown. You can change the default text by using `submit_button_text="Ok"`. Defaults to `false`. If the `range` prop is `true`, then the submit button is shown.
    */
   show_submit_button?: DatePickerShowSubmitButton;
 
   /**
-   * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text="Avbryt"` Defaults to `false`. If the `range` prop is `true`, then the cancel button is show by.
+   * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text="Avbryt"` Defaults to `false`. If the `range` prop is `true`, then the cancel button is shown.
    */
   show_cancel_button?: DatePickerShowCancelButton;
 
@@ -218,12 +218,12 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   range?: DatePickerRange;
 
   /**
-   * Link both calendars, once to user is navigating between months. Only meant to use if range is set to true. Defaults to `false`.
+   * Link both calendars, once to the user is navigating between months. Only meant to use if the range is set to true. Defaults to `false`.
    */
   link?: DatePickerLink;
 
   /**
-   * Sync input values with the calendars views. Once the input values getting changed, the calendar changes its views in sync. Defaults to `true`.
+   * Sync input values with the calendars views. Once the input values get changed, the calendar changes its views in sync. Defaults to `true`.
    */
   sync?: DatePickerSync;
 
@@ -253,7 +253,7 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   addon_element?: DatePickerAddonElement;
 
   /**
-   * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info below.
+   * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info is below.
    */
   shortcuts?: DatePickerShortcuts;
   disabled?: DatePickerDisabled;
@@ -274,7 +274,7 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   status?: DatePickerStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -337,7 +337,7 @@ export interface DatePickerProps extends React.HTMLProps<HTMLElement> {
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called right before every new calendar view gets rendered. Se example above.
+   * Will be called right before every new calendar view gets rendered. See the example above.
    */
   on_days_render?: (...args: any[]) => any;
 

package/cjs/components/date-picker/DatePickerAddon.d.ts

@@ -10,7 +10,7 @@ export type DatePickerAddonRenderElement =
 export interface DatePickerAddonProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info below.
+   * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info is below.
    */
   shortcuts?: DatePickerAddonShortcuts;
   renderElement?: DatePickerAddonRenderElement;

package/cjs/components/date-picker/DatePickerCalendar.d.ts

@@ -9,7 +9,7 @@ export interface DatePickerCalendarProps
   nr?: number;
 
   /**
-   * To display what month should be shows in the first calendar by default. Defaults to the `date` respective `start_date`.
+   * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`.
    */
   month?: Date;
   prevBtn?: boolean;

package/cjs/components/date-picker/DatePickerInput.d.ts

@@ -29,7 +29,7 @@ export interface DatePickerInputProps
   status?: DatePickerInputStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 

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

@@ -200,12 +200,12 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * Give a title to let the user know what they has to do. Defaults to `Valgmeny` .
+   * Give a title to let the users know what they have to do. Defaults to `Valgmeny`.
    */
   title?: DropdownTitle;
 
   /**
-   * Defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary` .
+   * Defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary`.
    */
   variant?: DropdownVariant;
 
@@ -220,7 +220,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   icon_size?: string;
 
   /**
-   * Position of icon inside the dropdown. Set to `left` or `right`. Defaults to `right`.
+   * Position of the icon inside the dropdown. Set to `left` or `right`. Defaults to `right`.
    */
   icon_position?: DropdownIconPosition;
 
@@ -250,7 +250,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   status?: DropdownStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -346,12 +346,12 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   trigger_element?: DropdownTriggerElement;
 
   /**
-   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If You don&#39;t have to define a `value`, You can also send in a `function` which will be called once the user opens the DrawerList.
+   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
    */
   data?: DropdownData;
 
   /**
-   * If you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice . Defaults to `null`.
+   * If you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice. Defaults to `null`.
    */
   default_value?: DropdownDefaultValue;
 
@@ -361,7 +361,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   value?: DropdownValue;
 
   /**
-   * If set to `true`, the Dropdown will be opened when the users enters the trigger button with a focus action.
+   * If set to `true`, the Dropdown will be opened when the users enter the trigger button with a focus action.
    */
   open_on_focus?: DropdownOpenOnFocus;
 
@@ -394,7 +394,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   className?: string;
 
   /**
-   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If You don&#39;t have to define a `value`, You can also send in a `function` which will be called once the user opens the DrawerList.
+   * The data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these <a href="/uilib/components/fragments/drawer-list/info#data-structure">data structure</a>. <br /> If you don&#39;t have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList.
    */
   children?: DropdownChildren;
   custom_element?: Object;
@@ -416,7 +416,7 @@ export interface DropdownProps extends React.HTMLProps<HTMLElement> {
   on_change?: (...args: any[]) => any;
 
   /**
-   * Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value, active_item }`. The "active_item" property is the currently selected item by keyboard navigation
+   * Will be called once the user selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value, active_item }`. The "active_item" property is the currently selected item by keyboard navigation
    */
   on_select?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;

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

@@ -57,7 +57,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: FormRowLabel;
 
@@ -73,7 +73,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   label_id?: string;
 
   /**
-   * If You need to style the "legend", then You can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
+   * If you need to style the "legend", then you can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.
    */
   label_class?: string;
   no_label?: FormRowNoLabel;
@@ -94,7 +94,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   indent?: FormRowIndent;
 
   /**
-   * Forces the content of a FormRow to wrap. Make sure You always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
+   * Forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.
    */
   wrap?: FormRowWrap;
 
@@ -109,7 +109,7 @@ export interface FormRowProps extends React.HTMLProps<HTMLElement> {
   vertical?: FormRowVertical;
 
   /**
-   * Will center all children vertically as long as the screen not hits a mobile width.
+   * Will center all children vertically as long as the screen does not hit a mobile width.
    */
   centered?: FormRowCentered;