@dnb/eufemia 9.17.2 → 9.21.0

package/components/pagination/Pagination.d.ts

@@ -83,12 +83,12 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   debug?: boolean;
 
   /**
-   * The page show in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
+   * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
    */
   startup_page?: PaginationStartupPage;
 
   /**
-   * The page show in the moment the component renders. Defaults to `1`.
+   * The page shown at the moment the component renders. Defaults to `1`.
    */
   current_page?: PaginationCurrentPage;
 
@@ -98,17 +98,17 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   page_count?: PaginationPageCount;
 
   /**
-   * Defines how many `infinity` pages should be loaded / show on the first render. Defaults to `1`.
+   * Defines how many `infinity` pages should be loaded / shown on the first render. Defaults to `1`.
    */
   startup_count?: PaginationStartupCount;
 
   /**
-   * Defines how many `infinity` pages should be loaded / show once the users scrolls down. Defaults to `1`.
+   * Defines how many `infinity` pages should be loaded / shown once the user scrolls down. Defaults to `1`.
    */
   parallel_load_count?: PaginationParallelLoadCount;
 
   /**
-   * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effect. But it depends really on the content, if this would make more sense to use instead. Defaults to `false`.
+   * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`.
    */
   place_maker_before_content?: PaginationPlaceMakerBeforeContent;
 
@@ -128,7 +128,7 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   skeleton?: PaginationSkeleton;
 
   /**
-   * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. Defaults to `pagination`.
+   * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the <a href="https://eufemia.dnb.no/uilib/components/pagination/infinity-scroller">Infinity Scroller</a>. Defaults to `pagination`.
    */
   mode?: PaginationMode;
 
@@ -164,7 +164,7 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   end_infinity_handler?: PaginationEndInfinityHandler;
 
   /**
-   * By default a `<div>` is used. Set it to what ever element you have to use. Adds also a class: `dnb-pagination__page` shown.
+   * By default a `<div>` is used. Set it to any element you have to use. Adds also a class: `dnb-pagination__page` shown.
    */
   page_element?: PaginationPageElement;
 
@@ -184,7 +184,7 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   indicator_element?: PaginationIndicatorElement;
 
   /**
-   * Define the aligned of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`.
+   * Define the alignment of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`.
    */
   align?: string;
 
@@ -214,7 +214,7 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   is_loading_text?: string;
 
   /**
-   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1, . Defaults to `Vis mer innhold`.
+   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.
    */
   load_button_text?: string;
 
@@ -251,17 +251,17 @@ export interface PaginationProps extends React.HTMLProps<HTMLElement> {
   children?: PaginationChildren;
 
   /**
-   * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. Se below for more details.
+   * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. See below for more details.
    */
   on_change?: (...args: any[]) => any;
 
   /**
-   * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. Se below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`.
+   * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. See below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`.
    */
   on_startup?: (...args: any[]) => any;
 
   /**
-   * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. Se below for more details.
+   * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. See below for more details.
    */
   on_load?: (...args: any[]) => any;
 
@@ -361,12 +361,12 @@ export interface PaginationInstanceProps {
   debug?: boolean;
 
   /**
-   * The page show in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
+   * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
    */
   startup_page?: PaginationInstanceStartupPage;
 
   /**
-   * The page show in the moment the component renders. Defaults to `1`.
+   * The page shown at the moment the component renders. Defaults to `1`.
    */
   current_page?: PaginationInstanceCurrentPage;
 
@@ -376,17 +376,17 @@ export interface PaginationInstanceProps {
   page_count?: PaginationInstancePageCount;
 
   /**
-   * Defines how many `infinity` pages should be loaded / show on the first render. Defaults to `1`.
+   * Defines how many `infinity` pages should be loaded / shown on the first render. Defaults to `1`.
    */
   startup_count?: PaginationInstanceStartupCount;
 
   /**
-   * Defines how many `infinity` pages should be loaded / show once the users scrolls down. Defaults to `1`.
+   * Defines how many `infinity` pages should be loaded / shown once the user scrolls down. Defaults to `1`.
    */
   parallel_load_count?: PaginationInstanceParallelLoadCount;
 
   /**
-   * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effect. But it depends really on the content, if this would make more sense to use instead. Defaults to `false`.
+   * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`.
    */
   place_maker_before_content?: PaginationInstancePlaceMakerBeforeContent;
 
@@ -406,7 +406,7 @@ export interface PaginationInstanceProps {
   skeleton?: PaginationInstanceSkeleton;
 
   /**
-   * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. Defaults to `pagination`.
+   * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the <a href="https://eufemia.dnb.no/uilib/components/pagination/infinity-scroller">Infinity Scroller</a>. Defaults to `pagination`.
    */
   mode?: PaginationInstanceMode;
 
@@ -442,7 +442,7 @@ export interface PaginationInstanceProps {
   end_infinity_handler?: PaginationInstanceEndInfinityHandler;
 
   /**
-   * By default a `<div>` is used. Set it to what ever element you have to use. Adds also a class: `dnb-pagination__page` shown.
+   * By default a `<div>` is used. Set it to any element you have to use. Adds also a class: `dnb-pagination__page` shown.
    */
   page_element?: PaginationInstancePageElement;
 
@@ -462,7 +462,7 @@ export interface PaginationInstanceProps {
   indicator_element?: PaginationInstanceIndicatorElement;
 
   /**
-   * Define the aligned of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`.
+   * Define the alignment of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`.
    */
   align?: string;
 
@@ -492,7 +492,7 @@ export interface PaginationInstanceProps {
   is_loading_text?: string;
 
   /**
-   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1, . Defaults to `Vis mer innhold`.
+   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.
    */
   load_button_text?: string;
 
@@ -529,17 +529,17 @@ export interface PaginationInstanceProps {
   children?: PaginationInstanceChildren;
 
   /**
-   * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. Se below for more details.
+   * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. See below for more details.
    */
   on_change?: (...args: any[]) => any;
 
   /**
-   * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. Se below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`.
+   * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. See below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`.
    */
   on_startup?: (...args: any[]) => any;
 
   /**
-   * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. Se below for more details.
+   * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. See below for more details.
    */
   on_load?: (...args: any[]) => any;
 
@@ -641,12 +641,12 @@ export interface InfinityMarkerProps {
   debug?: boolean;
 
   /**
-   * The page show in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
+   * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
    */
   startup_page?: InfinityMarkerStartupPage;
 
   /**
-   * The page show in the moment the component renders. Defaults to `1`.
+   * The page shown at the moment the component renders. Defaults to `1`.
    */
   current_page?: InfinityMarkerCurrentPage;
 
@@ -656,17 +656,17 @@ export interface InfinityMarkerProps {
   page_count?: InfinityMarkerPageCount;
 
   /**
-   * Defines how many `infinity` pages should be loaded / show on the first render. Defaults to `1`.
+   * Defines how many `infinity` pages should be loaded / shown on the first render. Defaults to `1`.
    */
   startup_count?: InfinityMarkerStartupCount;
 
   /**
-   * Defines how many `infinity` pages should be loaded / show once the users scrolls down. Defaults to `1`.
+   * Defines how many `infinity` pages should be loaded / shown once the user scrolls down. Defaults to `1`.
    */
   parallel_load_count?: InfinityMarkerParallelLoadCount;
 
   /**
-   * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effect. But it depends really on the content, if this would make more sense to use instead. Defaults to `false`.
+   * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`.
    */
   place_maker_before_content?: InfinityMarkerPlaceMakerBeforeContent;
 
@@ -686,7 +686,7 @@ export interface InfinityMarkerProps {
   skeleton?: InfinityMarkerSkeleton;
 
   /**
-   * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. Defaults to `pagination`.
+   * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the <a href="https://eufemia.dnb.no/uilib/components/pagination/infinity-scroller">Infinity Scroller</a>. Defaults to `pagination`.
    */
   mode?: InfinityMarkerMode;
 
@@ -722,7 +722,7 @@ export interface InfinityMarkerProps {
   end_infinity_handler?: InfinityMarkerEndInfinityHandler;
 
   /**
-   * By default a `<div>` is used. Set it to what ever element you have to use. Adds also a class: `dnb-pagination__page` shown.
+   * By default a `<div>` is used. Set it to any element you have to use. Adds also a class: `dnb-pagination__page` shown.
    */
   page_element?: InfinityMarkerPageElement;
 
@@ -742,7 +742,7 @@ export interface InfinityMarkerProps {
   indicator_element?: InfinityMarkerIndicatorElement;
 
   /**
-   * Define the aligned of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`.
+   * Define the alignment of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`.
    */
   align?: string;
 
@@ -772,7 +772,7 @@ export interface InfinityMarkerProps {
   is_loading_text?: string;
 
   /**
-   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1, . Defaults to `Vis mer innhold`.
+   * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`.
    */
   load_button_text?: string;
 
@@ -809,17 +809,17 @@ export interface InfinityMarkerProps {
   children?: InfinityMarkerChildren;
 
   /**
-   * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. Se below for more details.
+   * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. See below for more details.
    */
   on_change?: (...args: any[]) => any;
 
   /**
-   * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. Se below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`.
+   * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. See below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`.
    */
   on_startup?: (...args: any[]) => any;
 
   /**
-   * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. Se below for more details.
+   * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. See below for more details.
    */
   on_load?: (...args: any[]) => any;
 

package/components/pagination/Pagination.js

@@ -205,13 +205,13 @@ var PaginationInstance = function (_React$PureComponent2) {
           var pageNumber = _ref.pageNumber;
           return pageNumber === currentPage;
         })) === null || _items$find === void 0 ? void 0 : _items$find.content;
-        return React.createElement(React.Fragment, null, this.context.pagination.mode === 'infinity' && typeof children !== 'function' && children, React.createElement("div", mainParams, React.createElement(PaginationBar, {
+        return React.createElement("div", mainParams, React.createElement(PaginationBar, {
           contentRef: this._contentRef
         }, children), items.length > 0 && React.createElement(PaginationContent, {
           ref: this._contentRef
         }, content || React.createElement(PaginationIndicator, {
           indicator_element: indicator_element || fallback_element
-        }))));
+        })));
       }
 
       return _InfinityScroller || (_InfinityScroller = React.createElement(InfinityScroller, null));
@@ -282,6 +282,13 @@ Pagination.Bar = PaginationBar;
 Pagination.Content = PaginationContent;
 var PaginationWrapper = Pagination;
 var InfinityMarkerWrapper = InfinityMarker;
+export var Bar = function Bar(props) {
+  return React.createElement(Pagination, _extends({
+    fallback_element: function fallback_element() {
+      return null;
+    }
+  }, props));
+};
 export var createPagination = function createPagination() {
   var initProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var store = React.createRef({});

package/components/pagination/PaginationProvider.d.ts

@@ -35,12 +35,12 @@ export type PaginationProviderChildren =
 export interface PaginationProviderProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * The page show in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
+   * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well.
    */
   startup_page?: PaginationProviderStartupPage;
 
   /**
-   * The page show in the moment the component renders. Defaults to `1`.
+   * The page shown at the moment the component renders. Defaults to `1`.
    */
   current_page?: PaginationProviderCurrentPage;
 

package/components/radio/Radio.d.ts

@@ -43,7 +43,7 @@ export type RadioChildren = string | ((...args: any[]) => any);
  */
 export interface RadioProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: RadioLabel;
   label_sr_only?: RadioLabelSrOnly;
@@ -62,7 +62,7 @@ export interface RadioProps extends React.HTMLProps<HTMLElement> {
   element?: React.ReactNode;
 
   /**
-   * Use a unique group identifier to define the Radio buttons who belongs together.
+   * Use a unique group identifier to define the Radio buttons that belongs together.
    */
   group?: string;
 
@@ -77,7 +77,7 @@ export interface RadioProps extends React.HTMLProps<HTMLElement> {
   status?: RadioStatus;
 
   /**
-   * 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;
 
@@ -94,7 +94,7 @@ export interface RadioProps extends React.HTMLProps<HTMLElement> {
   suffix?: RadioSuffix;
 
   /**
-   * Defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup".
+   * <em>(required)</em> defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup".
    */
   value?: string;
   attributes?: RadioAttributes;
@@ -112,7 +112,7 @@ export interface RadioProps extends React.HTMLProps<HTMLElement> {
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called on state changes made by the user. Returns an boolean and string `{ checked, value, event }`.
+   * Will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`.
    */
   on_change?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;

package/components/radio/RadioGroup.d.ts

@@ -47,7 +47,7 @@ export type RadioGroupChildren =
  */
 export interface RadioGroupProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: RadioGroupLabel;
   label_direction?: RadioGroupLabelDirection;
@@ -75,7 +75,7 @@ export interface RadioGroupProps extends React.HTMLProps<HTMLElement> {
   status?: RadioGroupStatus;
 
   /**
-   * 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;
 
@@ -94,7 +94,7 @@ export interface RadioGroupProps extends React.HTMLProps<HTMLElement> {
   vertical?: RadioGroupVertical;
 
   /**
-   * Defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup".
+   * <em>(required)</em> defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup".
    */
   value?: string;
   attributes?: RadioGroupAttributes;
@@ -110,7 +110,7 @@ export interface RadioGroupProps extends React.HTMLProps<HTMLElement> {
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called on state changes made by the user. Returns an boolean and string `{ checked, value, event }`.
+   * Will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`.
    */
   on_change?: (...args: any[]) => any;
 }

package/components/section/Section.d.ts

@@ -52,7 +52,7 @@ export interface SectionProps extends React.HTMLProps<HTMLElement> {
    * Define what HTML element should be used. Defaults to `<section>`.
    */
   element?: string;
-  inner_ref?: Object;
+  inner_ref?: React.RefObject<any>;
 
   /**
    * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
@@ -81,6 +81,8 @@ export interface SectionProps extends React.HTMLProps<HTMLElement> {
   class?: string;
   className?: string;
   children?: SectionChildren;
+
+  [x: string]: any;
 }
 export default class Section extends React.Component<SectionProps, any> {
   static defaultProps: object;

package/components/skeleton/Skeleton.d.ts

@@ -45,7 +45,7 @@ export type SkeletonChildren =
  */
 export interface SkeletonProps extends React.HTMLProps<HTMLElement> {
   /**
-   * Use `true` to enable/show the skeleton for ever component used inside. Defaults to `false`.
+   * Use `true` to enable/show the skeleton for the component used inside. Defaults to `false`.
    */
   show?: SkeletonShow;
 
@@ -65,7 +65,7 @@ export interface SkeletonProps extends React.HTMLProps<HTMLElement> {
   figure?: SkeletonFigure;
 
   /**
-   * Set what ever HTML element type you have to use. A couple of aria attributes will be set on this element while active. Defaults to `div`
+   * Set any HTML element type you have to use. A couple of aria attributes will be set on this element while active. Defaults to `div`
    */
   element?: React.ReactNode;
 

package/components/skeleton/SkeletonHelper.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SkeletonShow } from './Skeleton';
 export interface AutoSizeProps {
   __element?: React.ReactNode;
   children?: React.ReactNode;
@@ -20,7 +21,7 @@ export interface SkeletonContextProps {
 }
 export const createSkeletonClass: (
   method: 'shape' | 'font',
-  skeleton: boolean,
+  skeleton: SkeletonShow,
   context?: SkeletonContextProps
 ) => React.HTMLProps<HTMLElement>;
 export interface skeletonDOMAttributesContext {

package/components/slider/Slider.d.ts

@@ -85,7 +85,7 @@ export interface SliderProps extends React.HTMLProps<HTMLElement> {
   status?: SliderStatus;
 
   /**
-   * 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;
 
@@ -106,17 +106,17 @@ export interface SliderProps extends React.HTMLProps<HTMLElement> {
   suffix?: SliderSuffix;
 
   /**
-   * Give the slider thump button a title for accessibility reason. Defaults to `null`.
+   * Give the slider thump button a title for accessibility reasons. Defaults to `null`.
    */
   thump_title?: string;
 
   /**
-   * Give the add button a title for accessibility reason. Defaults to `+`.
+   * Give the add button a title for accessibility reasons. Defaults to `+`.
    */
   add_title?: string;
 
   /**
-   * Give the subtract button a title for accessibility reason. Defaults to `−`.
+   * Give the subtract button a title for accessibility reasons. Defaults to `−`.
    */
   subtract_title?: string;
 
@@ -131,7 +131,7 @@ export interface SliderProps extends React.HTMLProps<HTMLElement> {
   max?: SliderMax;
 
   /**
-   * The `value` of the slider. Also the event callback result.
+   * <em>(required)</em> the `value` of the slider. Also the event callback result.
    */
   value?: SliderValue;
 

package/components/step-indicator/StepIndicator.d.ts

@@ -13,7 +13,7 @@ export type StepIndicatorData =
       status_state?: 'warn' | 'info' | 'error';
 
       /**
-       * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+       * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
        */
       on_click?: (...args: any[]) => any;
       on_render?: (...args: any[]) => any;
@@ -70,17 +70,17 @@ export type StepIndicatorChildren =
  */
 export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
   /**
-   * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
   sidebar_id?: string;
 
   /**
-   * Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+   * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
    */
   mode?: StepIndicatorMode;
 
   /**
-   * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and example above.
+   * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
    */
   data?: StepIndicatorData;
   title: StepIndicatorTitle;
@@ -91,7 +91,7 @@ export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
   status_state?: StepIndicatorStatusState;
 
   /**
-   * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+   * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
    */
   on_click?: (...args: any[]) => any;
   on_render?: (...args: any[]) => any;
@@ -156,7 +156,7 @@ export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
   children?: StepIndicatorChildren;
 
   /**
-   * Will be called once the users visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
+   * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
    */
   on_change?: (...args: any[]) => any;
 }

package/components/step-indicator/StepIndicatorContext.d.ts

@@ -5,7 +5,7 @@ import * as React from 'react';
  */
 export interface StepIndicatorProviderProps {
   /**
-   * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
   sidebar_id: string;
   children: React.ReactNode;

package/components/step-indicator/StepIndicatorItem.d.ts

@@ -12,7 +12,7 @@ export type StepIndicatorItemIsActive = string | boolean;
 export interface StepIndicatorItemProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+   * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
    */
   mode?: string;
   title: StepIndicatorItemTitle;
@@ -29,13 +29,13 @@ export interface StepIndicatorItemProps
   on_item_render?: (...args: any[]) => any;
 
   /**
-   * Will be called once the users visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
+   * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
    */
   on_change?: (...args: any[]) => any;
   on_render?: (...args: any[]) => any;
 
   /**
-   * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+   * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
    */
   on_click?: (...args: any[]) => any;
   is_current?: boolean;

package/components/step-indicator/StepIndicatorItem.js

@@ -213,6 +213,7 @@ var StepIndicatorItem = function (_React$PureComponent) {
       if (!buttonParams.onClick) {
         buttonParams.element = 'span';
         buttonParams.type = '';
+        buttonParams.on_click = undefined;
         isInactive = true;
       }
 

package/components/step-indicator/StepIndicatorSidebar.d.ts

@@ -13,7 +13,7 @@ export type StepIndicatorSidebarData =
       status_state?: 'warn' | 'info' | 'error';
 
       /**
-       * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+       * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
        */
       on_click?: (...args: any[]) => any;
       on_render?: (...args: any[]) => any;
@@ -29,12 +29,12 @@ export type StepIndicatorSidebarData =
 export interface StepIndicatorSidebarProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
   sidebar_id: string;
 
   /**
-   * Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+   * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
    */
   mode?: StepIndicatorSidebarMode;
 
@@ -44,7 +44,7 @@ export interface StepIndicatorSidebarProps
   current_step?: StepIndicatorSidebarCurrentStep;
 
   /**
-   * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and example above.
+   * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
    */
   data?: StepIndicatorSidebarData;
   internalId?: string;

package/components/step-indicator/StepIndicatorTriggerButton.d.ts

@@ -6,7 +6,7 @@ import * as React from 'react';
 export interface StepIndicatorTriggerButtonProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
   sidebar_id?: string;
   className?: string;