@dnb/eufemia 10.7.0 → 10.8.0

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

@@ -1,79 +1,93 @@
-import * as React from 'react';
+/**
+ * Web StepIndicator Component
+ *
+ */
+import React from 'react';
+import StepIndicatorSidebar from './StepIndicatorSidebar';
+import { StepIndicatorContextValues } from './StepIndicatorContext';
 import type { SpacingProps } from '../../shared/types';
 import type { SkeletonShow } from '../Skeleton';
-import type { StepIndicatorItemProps } from './StepIndicatorItem';
-import StepIndicatorSidebar from './StepIndicatorSidebar';
+import type { StepIndicatorItemProps, StepItemWrapper } from './StepIndicatorItem';
 export type StepIndicatorMode = 'static' | 'strict' | 'loose';
-export type StepIndicatorData =
-  | string
-  | string[]
-  | Pick<
-      StepIndicatorItemProps,
-      | 'title'
-      | 'is_current'
-      | 'inactive'
-      | 'disabled'
-      | 'status'
-      | 'status_state'
-      | 'on_click'
-      | 'on_render'
-    >[];
-export type StepIndicatorCurrentStep = string | number;
-export type StepIndicatorChildren =
-  | React.ReactNode
-  | ((...args: any[]) => any);
-export interface StepIndicatorProps
-  extends Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'>,
-    SpacingProps {
-  /**
-   * <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;
-  /**
-   * <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;
-  /**
-   * <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;
-  /**
-   * 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;
-  overview_title?: string;
-  step_title_extended?: string;
-  step_title?: string;
-  /**
-   * Defines the active number marked step starting by 0. Defaults to `0`.
-   */
-  current_step?: StepIndicatorCurrentStep;
-  /**
-   * Define whether to show automatically counted numbers or not. Defaults to `false`.
-   */
-  hide_numbers?: boolean;
-  /**
-   * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.
-   */
-  on_item_render?: (...args: any[]) => any;
-  /**
-   * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to `false`.
-   */
-  no_animation?: boolean;
-  skeleton?: SkeletonShow;
-  class?: string;
-  className?: string;
-  children?: StepIndicatorChildren;
-  /**
-   * 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;
-}
-export default class StepIndicator extends React.Component<
-  StepIndicatorProps,
-  any
-> {
-  static defaultProps: object;
-  static Sidebar = StepIndicatorSidebar;
-  render(): JSX.Element;
+export type StepIndicatorDataItem = Pick<StepIndicatorItemProps, 'title' | 'is_current' | 'inactive' | 'disabled' | 'status' | 'status_state' | 'on_click' | 'on_render'>;
+export type StepIndicatorData = string | string[] | StepIndicatorDataItem[];
+export type StepIndicatorMouseEvent = {
+    event: React.MouseEvent<HTMLButtonElement>;
+    item: StepIndicatorItemProps;
+    currentStep: number;
+    current_step: number;
+};
+export type StepIndicatorRenderCallback = {
+    StepItem: typeof StepItemWrapper;
+    element: React.ReactNode;
+    attributes: React.HTMLProps<HTMLElement>;
+    props: StepIndicatorItemProps;
+    context: StepIndicatorContextValues;
+};
+export type StepIndicatorProps = Omit<React.HTMLProps<HTMLAnchorElement>, 'ref' | 'data'> & SpacingProps & {
+    /**
+     * <em>(required with `<StepIndicator.Sidebar />`)</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;
+    /**
+     * <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;
+    /**
+     * <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;
+    /**
+     *  The title shown inside the `<StepIndicatorModal />` supplemental screen reader text for the `<StepIndicatorTriggerButton />`
+     *  Defaults to `Steps Overview`
+     */
+    overview_title?: string;
+    /**
+     *  The label for `<StepIndicatorTriggerButton />` and supplemental screen reader text for `<StepIndicatorItem />`
+     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps
+     * `%step` is used to place the current step into the text
+     * `%count` is used to place the step total into the text
+     *  Defaults to `Step %step of %count`
+     */
+    step_title?: string;
+    /**
+     *  A descriptive label used in `<StepIndicatorModal />`
+     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps
+     * `%step` is used to place the current step into the text
+     * `%count` is used to place the step total into the text
+     *  Defaults to `You are on step %step of %count`
+     */
+    step_title_extended?: string;
+    /**
+     * Defines the active number marked step starting by 0. Defaults to `0`.
+     */
+    current_step?: number;
+    /**
+     * Define whether to show automatically counted numbers or not. Defaults to `false`.
+     */
+    hide_numbers?: boolean;
+    /**
+     * 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, currentStep }`.
+     */
+    on_click?: ({ event, item, current_step, currentStep, }: StepIndicatorMouseEvent) => void;
+    /**
+     * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.
+     */
+    on_item_render?: ({ StepItem, element, attributes, props, context, }: StepIndicatorRenderCallback) => React.ReactNode;
+    /**
+     * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step, currentStep }`.
+     */
+    on_change?: ({ event, item, current_step, currentStep, }: StepIndicatorMouseEvent) => void;
+    /**
+     * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to `false`.
+     */
+    no_animation?: boolean;
+    skeleton?: SkeletonShow;
+    className?: string;
+    children?: React.ReactNode;
+};
+declare function StepIndicator({ data, skeleton, current_step, hide_numbers, no_animation, ...restOfProps }: StepIndicatorProps): import("react/jsx-runtime").JSX.Element;
+declare namespace StepIndicator {
+    var Sidebar: typeof StepIndicatorSidebar;
 }
+export default StepIndicator;

package/es/components/step-indicator/StepIndicator.js

@@ -1,38 +1,42 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _div;
+const _excluded = ["data", "skeleton", "current_step", "hide_numbers", "no_animation"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
-import PropTypes from 'prop-types';
 import { makeUniqueId, warn } from '../../shared/component-helper';
 import StepIndicatorSidebar from './StepIndicatorSidebar';
 import StepIndicatorModal from './StepIndicatorModal';
 import { StepIndicatorProvider } from './StepIndicatorContext';
-import { stepIndicatorPropTypes, stepIndicatorDefaultProps } from './StepIndicatorProps';
-export default class StepIndicator extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      sidebar_id: props.internalId || props.sidebar_id || makeUniqueId()
-    };
-  }
-  render() {
-    if (!this.props.sidebar_id && this.props.mode) {
-      warn('StepIndicator needs an unique "sidebar_id" property, also on the <StepIndicator.Sidebar... />');
-    }
-    return React.createElement(StepIndicatorProvider, _extends({}, this.props, {
-      sidebar_id: this.state.sidebar_id
-    }), _div || (_div = React.createElement("div", {
-      className: "dnb-step-indicator-wrapper"
-    }, React.createElement(StepIndicatorModal, null))));
+import { stepIndicatorDefaultProps } from './StepIndicatorProps';
+function StepIndicator(_ref) {
+  let {
+      data = stepIndicatorDefaultProps.data,
+      skeleton = stepIndicatorDefaultProps.skeleton,
+      current_step = stepIndicatorDefaultProps.current_step,
+      hide_numbers = stepIndicatorDefaultProps.hide_numbers,
+      no_animation = stepIndicatorDefaultProps.no_animation
+    } = _ref,
+    restOfProps = _objectWithoutProperties(_ref, _excluded);
+  const props = _objectSpread({
+    data,
+    skeleton,
+    current_step,
+    hide_numbers,
+    no_animation
+  }, restOfProps);
+  const sidebarId = props.sidebar_id || makeUniqueId();
+  if (!props.sidebar_id && props.mode) {
+    warn('StepIndicator needs an unique "sidebar_id" property, also on the <StepIndicator.Sidebar... />');
   }
+  return React.createElement(StepIndicatorProvider, _extends({}, props, {
+    sidebar_id: sidebarId
+  }), _div || (_div = React.createElement("div", {
+    className: "dnb-step-indicator-wrapper"
+  }, React.createElement(StepIndicatorModal, null))));
 }
-_defineProperty(StepIndicator, "Sidebar", StepIndicatorSidebar);
-_defineProperty(StepIndicator, "defaultProps", _objectSpread({
-  sidebar_id: null
-}, stepIndicatorDefaultProps));
-process.env.NODE_ENV !== "production" ? StepIndicator.propTypes = _objectSpread({
-  sidebar_id: PropTypes.string
-}, stepIndicatorPropTypes) : void 0;
+StepIndicator.Sidebar = StepIndicatorSidebar;
+export default StepIndicator;
 //# sourceMappingURL=StepIndicator.js.map

package/es/components/step-indicator/StepIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepIndicator.js","names":["React","PropTypes","makeUniqueId","warn","StepIndicatorSidebar","StepIndicatorModal","StepIndicatorProvider","stepIndicatorPropTypes","stepIndicatorDefaultProps","StepIndicator","PureComponent","constructor","props","state","sidebar_id","internalId","render","mode","createElement","_extends","_div","className","_defineProperty","_objectSpread","process","env","NODE_ENV","propTypes","string"],"sources":["../../../../src/components/step-indicator/StepIndicator.js"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport { makeUniqueId, warn } from '../../shared/component-helper'\nimport StepIndicatorSidebar from './StepIndicatorSidebar'\n\nimport StepIndicatorModal from './StepIndicatorModal'\nimport { StepIndicatorProvider } from './StepIndicatorContext'\nimport {\n  stepIndicatorPropTypes,\n  stepIndicatorDefaultProps,\n} from './StepIndicatorProps'\n\nexport default class StepIndicator extends React.PureComponent {\n  static Sidebar = StepIndicatorSidebar\n\n  static propTypes = {\n    sidebar_id: PropTypes.string,\n    ...stepIndicatorPropTypes,\n  }\n\n  static defaultProps = {\n    sidebar_id: null,\n    ...stepIndicatorDefaultProps,\n  }\n\n  constructor(props) {\n    super(props)\n\n    this.state = {\n      sidebar_id: props.internalId || props.sidebar_id || makeUniqueId(),\n    }\n  }\n\n  render() {\n    if (!this.props.sidebar_id && this.props.mode) {\n      warn(\n        'StepIndicator needs an unique \"sidebar_id\" property, also on the <StepIndicator.Sidebar... />'\n      )\n    }\n\n    return (\n      <StepIndicatorProvider\n        {...this.props}\n        sidebar_id={this.state.sidebar_id}\n      >\n        <div className=\"dnb-step-indicator-wrapper\">\n          <StepIndicatorModal />\n        </div>\n      </StepIndicatorProvider>\n    )\n  }\n}\n"],"mappings":";;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,YAAY,EAAEC,IAAI,QAAQ,+BAA+B;AAClE,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzD,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SACEC,sBAAsB,EACtBC,yBAAyB,QACpB,sBAAsB;AAE7B,eAAe,MAAMC,aAAa,SAAST,KAAK,CAACU,aAAa,CAAC;EAa7DC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAEZ,IAAI,CAACC,KAAK,GAAG;MACXC,UAAU,EAAEF,KAAK,CAACG,UAAU,IAAIH,KAAK,CAACE,UAAU,IAAIZ,YAAY,CAAC;IACnE,CAAC;EACH;EAEAc,MAAMA,CAAA,EAAG;IACP,IAAI,CAAC,IAAI,CAACJ,KAAK,CAACE,UAAU,IAAI,IAAI,CAACF,KAAK,CAACK,IAAI,EAAE;MAC7Cd,IAAI,CACF,+FACF,CAAC;IACH;IAEA,OACEH,KAAA,CAAAkB,aAAA,CAACZ,qBAAqB,EAAAa,QAAA,KAChB,IAAI,CAACP,KAAK;MACdE,UAAU,EAAE,IAAI,CAACD,KAAK,CAACC;IAAW,IAAAM,IAAA,KAAAA,IAAA,GAElCpB,KAAA,CAAAkB,aAAA;MAAKG,SAAS,EAAC;IAA4B,GACzCrB,KAAA,CAAAkB,aAAA,CAACb,kBAAkB,MAAE,CAClB,CAAC,CACe,CAAC;EAE5B;AACF;AAACiB,eAAA,CAvCoBb,aAAa,aACfL,oBAAoB;AAAAkB,eAAA,CADlBb,aAAa,kBAAAc,aAAA;EAS9BT,UAAU,EAAE;AAAI,GACbN,yBAAyB;AAAAgB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAVXjB,aAAa,CAGzBkB,SAAS,GAAAJ,aAAA;EACdT,UAAU,EAAEb,SAAS,CAAC2B;AAAM,GACzBrB,sBAAsB"}
+{"version":3,"file":"StepIndicator.js","names":["React","makeUniqueId","warn","StepIndicatorSidebar","StepIndicatorModal","StepIndicatorProvider","stepIndicatorDefaultProps","StepIndicator","_ref","data","skeleton","current_step","hide_numbers","no_animation","restOfProps","_objectWithoutProperties","_excluded","props","_objectSpread","sidebarId","sidebar_id","mode","createElement","_extends","_div","className","Sidebar"],"sources":["../../../../src/components/step-indicator/StepIndicator.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React from 'react'\n\nimport { makeUniqueId, warn } from '../../shared/component-helper'\nimport StepIndicatorSidebar from './StepIndicatorSidebar'\n\nimport StepIndicatorModal from './StepIndicatorModal'\nimport {\n  StepIndicatorContextValues,\n  StepIndicatorProvider,\n} from './StepIndicatorContext'\n\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\nimport type {\n  StepIndicatorItemProps,\n  StepItemWrapper,\n} from './StepIndicatorItem'\nimport { stepIndicatorDefaultProps } from './StepIndicatorProps'\n\nexport type StepIndicatorMode = 'static' | 'strict' | 'loose'\nexport type StepIndicatorDataItem = Pick<\n  StepIndicatorItemProps,\n  | 'title'\n  | 'is_current'\n  | 'inactive'\n  | 'disabled'\n  | 'status'\n  | 'status_state'\n  | 'on_click'\n  | 'on_render'\n>\nexport type StepIndicatorData = string | string[] | StepIndicatorDataItem[]\n\nexport type StepIndicatorMouseEvent = {\n  event: React.MouseEvent<HTMLButtonElement>\n  item: StepIndicatorItemProps\n  currentStep: number\n  current_step: number\n}\n\nexport type StepIndicatorRenderCallback = {\n  StepItem: typeof StepItemWrapper\n  element: React.ReactNode\n  attributes: React.HTMLProps<HTMLElement>\n  props: StepIndicatorItemProps\n  context: StepIndicatorContextValues\n}\n\nexport type StepIndicatorProps = Omit<\n  React.HTMLProps<HTMLAnchorElement>,\n  'ref' | 'data'\n> &\n  SpacingProps & {\n    /**\n     * <em>(required with `<StepIndicator.Sidebar />`)</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.\n     */\n    sidebar_id?: string\n    /**\n     * <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.\n     */\n    mode: StepIndicatorMode\n    /**\n     * <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.\n     */\n    data: StepIndicatorData\n    /**\n     *  The title shown inside the `<StepIndicatorModal />` supplemental screen reader text for the `<StepIndicatorTriggerButton />`\n     *  Defaults to `Steps Overview`\n     */\n    overview_title?: string\n    /**\n     *  The label for `<StepIndicatorTriggerButton />` and supplemental screen reader text for `<StepIndicatorItem />`\n     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps\n     * `%step` is used to place the current step into the text\n     * `%count` is used to place the step total into the text\n     *  Defaults to `Step %step of %count`\n     */\n    step_title?: string\n    /**\n     *  A descriptive label used in `<StepIndicatorModal />`\n     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps\n     * `%step` is used to place the current step into the text\n     * `%count` is used to place the step total into the text\n     *  Defaults to `You are on step %step of %count`\n     */\n    step_title_extended?: string\n    /**\n     * Defines the active number marked step starting by 0. Defaults to `0`.\n     */\n    current_step?: number\n    /**\n     * Define whether to show automatically counted numbers or not. Defaults to `false`.\n     */\n    hide_numbers?: boolean\n    /**\n     * 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, currentStep }`.\n     */\n    on_click?: ({\n      event,\n      item,\n      current_step,\n      currentStep,\n    }: StepIndicatorMouseEvent) => void\n    /**\n     * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.\n     */\n    on_item_render?: ({\n      StepItem,\n      element,\n      attributes,\n      props,\n      context,\n    }: StepIndicatorRenderCallback) => React.ReactNode\n    /**\n     * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step, currentStep }`.\n     */\n    on_change?: ({\n      event,\n      item,\n      current_step,\n      currentStep,\n    }: StepIndicatorMouseEvent) => void\n\n    /**\n     * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to `false`.\n     */\n    no_animation?: boolean\n    skeleton?: SkeletonShow\n    className?: string\n    children?: React.ReactNode\n  }\n\nfunction StepIndicator({\n  data = stepIndicatorDefaultProps.data,\n  skeleton = stepIndicatorDefaultProps.skeleton,\n  current_step = stepIndicatorDefaultProps.current_step,\n  hide_numbers = stepIndicatorDefaultProps.hide_numbers,\n  no_animation = stepIndicatorDefaultProps.no_animation,\n  ...restOfProps\n}: StepIndicatorProps) {\n  const props = {\n    data,\n    skeleton,\n    current_step,\n    hide_numbers,\n    no_animation,\n    ...restOfProps,\n  }\n\n  const sidebarId = props.sidebar_id || makeUniqueId()\n\n  if (!props.sidebar_id && props.mode) {\n    warn(\n      'StepIndicator needs an unique \"sidebar_id\" property, also on the <StepIndicator.Sidebar... />'\n    )\n  }\n\n  return (\n    <StepIndicatorProvider {...props} sidebar_id={sidebarId}>\n      <div className=\"dnb-step-indicator-wrapper\">\n        <StepIndicatorModal />\n      </div>\n    </StepIndicatorProvider>\n  )\n}\n\nStepIndicator.Sidebar = StepIndicatorSidebar\n\nexport default StepIndicator\n"],"mappings":";;;;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,EAAEC,IAAI,QAAQ,+BAA+B;AAClE,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzD,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,SAEEC,qBAAqB,QAChB,wBAAwB;AAQ/B,SAASC,yBAAyB,QAAQ,sBAAsB;AAmHhE,SAASC,aAAaA,CAAAC,IAAA,EAOC;EAAA,IAPA;MACrBC,IAAI,GAAGH,yBAAyB,CAACG,IAAI;MACrCC,QAAQ,GAAGJ,yBAAyB,CAACI,QAAQ;MAC7CC,YAAY,GAAGL,yBAAyB,CAACK,YAAY;MACrDC,YAAY,GAAGN,yBAAyB,CAACM,YAAY;MACrDC,YAAY,GAAGP,yBAAyB,CAACO;IAEvB,CAAC,GAAAL,IAAA;IADhBM,WAAW,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEd,MAAMC,KAAK,GAAAC,aAAA;IACTT,IAAI;IACJC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC;EAAY,GACTC,WAAW,CACf;EAED,MAAMK,SAAS,GAAGF,KAAK,CAACG,UAAU,IAAInB,YAAY,CAAC,CAAC;EAEpD,IAAI,CAACgB,KAAK,CAACG,UAAU,IAAIH,KAAK,CAACI,IAAI,EAAE;IACnCnB,IAAI,CACF,+FACF,CAAC;EACH;EAEA,OACEF,KAAA,CAAAsB,aAAA,CAACjB,qBAAqB,EAAAkB,QAAA,KAAKN,KAAK;IAAEG,UAAU,EAAED;EAAU,IAAAK,IAAA,KAAAA,IAAA,GACtDxB,KAAA,CAAAsB,aAAA;IAAKG,SAAS,EAAC;EAA4B,GACzCzB,KAAA,CAAAsB,aAAA,CAAClB,kBAAkB,MAAE,CAClB,CAAC,CACe,CAAC;AAE5B;AAEAG,aAAa,CAACmB,OAAO,GAAGvB,oBAAoB;AAE5C,eAAeI,aAAa"}

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

@@ -1,15 +1,45 @@
-import * as React from 'react';
-export interface StepIndicatorProviderProps {
-  /**
-   * <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;
-  isSidebar?: boolean;
-}
-export class StepIndicatorProvider extends React.Component<
-  StepIndicatorProviderProps,
-  any
-> {
-  render(): JSX.Element;
-}
+/**
+ * Web StepIndicator Context
+ *
+ */
+import React from 'react';
+import { ContextProps } from '../../shared/Context';
+import { StepIndicatorData, StepIndicatorMode, StepIndicatorProps } from './StepIndicator';
+import { StepIndicatorItemProps } from './StepIndicatorItem';
+export type StepIndicatorContextValues = StepIndicatorProviderProps & StepIndicatorProviderStates & ContextProps;
+declare const StepIndicatorContext: React.Context<StepIndicatorContextValues>;
+export default StepIndicatorContext;
+export type StepIndicatorProviderProps = Omit<StepIndicatorProps, 'mode' | 'data'> & {
+    /**
+     * <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;
+    /**
+     * <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;
+    /**
+     * <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;
+    children: React.ReactNode;
+    isSidebar?: boolean;
+};
+export type StepIndicatorProviderStates = {
+    data: (string | StepIndicatorItemProps)[];
+    hasSidebar: boolean;
+    hideSidebar: boolean;
+    activeStep: number;
+    openState: boolean;
+    listOfReachedSteps: number[];
+    countSteps: number;
+    stepsLabel: string;
+    stepsLabelExtended: string;
+    filterAttributes: string[];
+    setActiveStep: React.Dispatch<React.SetStateAction<number>>;
+    sidebarIsVisible: boolean;
+    onChangeState: () => void;
+    openHandler: () => void;
+    closeHandler: () => void;
+};
+export declare function StepIndicatorProvider({ isSidebar, ...restOfProps }: StepIndicatorProviderProps): import("react/jsx-runtime").JSX.Element;

package/es/components/step-indicator/StepIndicatorContext.js

@@ -1,151 +1,131 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["isSidebar"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import Context from '../../shared/Context';
 import { stepIndicatorDefaultProps } from './StepIndicatorProps';
-import { processChildren, extendPropsWithContextInClassComponent } from '../../shared/component-helper';
+import { extendPropsWithContext } from '../../shared/component-helper';
 import { onMediaQueryChange } from '../../shared/MediaQueryUtils';
 const filterAttributes = Object.keys(stepIndicatorDefaultProps).filter(item => {
   return !['class', 'className'].includes(item);
 }).concat(['internalId', 'isSidebar', 'hasSidebar', 'hideSidebar', 'sidebarIsVisible', 'mainTitle', 'stepsLabel', 'stepsLabelExtended', 'listOfReachedSteps', 'setActiveStep', 'activeStep', 'countSteps', 'openState', 'onChangeState', 'openHandler', 'closeHandler', 'innerRef', 'hasSkeletonData', 'filterAttributes', 'onChangeState']);
 const StepIndicatorContext = React.createContext(null);
 export default StepIndicatorContext;
-export class StepIndicatorProvider extends React.PureComponent {
-  static getData(props) {
-    let res = [];
-    if (props.data) {
-      res = props.data;
-    } else {
-      res = processChildren(props);
-    }
-    if (typeof res === 'string') return res[0] === '[' ? JSON.parse(res) : [];
-    return res || [];
-  }
-  static getDerivedStateFromProps(props, state) {
-    var _state$data, _state$step_title, _state$data2, _state$step_title_ext, _state$data3;
-    if (props.data) {
-      state.data = StepIndicatorProvider.getData(props);
-    }
-    state.countSteps = (_state$data = state.data) === null || _state$data === void 0 ? void 0 : _state$data.length;
-    if (parseFloat(props.current_step) > -1 && props.current_step !== state._current_step) {
-      state.activeStep = parseFloat(props.current_step) || 0;
-    }
-    if (!state.listOfReachedSteps.includes(state.activeStep)) {
-      state.listOfReachedSteps.push(state.activeStep);
-    }
-    state.stepsLabel = (_state$step_title = state.step_title) === null || _state$step_title === void 0 ? void 0 : _state$step_title.replace('%step', (state.activeStep || 0) + 1).replace('%count', ((_state$data2 = state.data) === null || _state$data2 === void 0 ? void 0 : _state$data2.length) || 1);
-    state.stepsLabelExtended = (_state$step_title_ext = state.step_title_extended) === null || _state$step_title_ext === void 0 ? void 0 : _state$step_title_ext.replace('%step', (state.activeStep || 0) + 1).replace('%count', ((_state$data3 = state.data) === null || _state$data3 === void 0 ? void 0 : _state$data3.length) || 1);
-    state._current_step = props.current_step;
-    return state;
-  }
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "setActiveStep", activeStep => {
-      this.setState({
-        activeStep
-      });
-    });
-    _defineProperty(this, "onChangeState", () => {
-      this.setState({
-        openState: false
-      });
-    });
-    _defineProperty(this, "openHandler", () => {
-      this.setState({
-        openState: true
-      });
-    });
-    _defineProperty(this, "closeHandler", () => {
-      this.setState({
-        openState: false
-      });
-    });
-    this.state = {
-      hasSidebar: true,
-      hideSidebar: false,
-      activeStep: undefined,
-      setActiveStep: this.setActiveStep,
-      onChangeState: this.onChangeState,
-      openHandler: this.openHandler,
-      closeHandler: this.closeHandler
-    };
-    if (!this.state.listOfReachedSteps) {
-      this.state.listOfReachedSteps = [];
-    }
-  }
-  componentDidMount() {
+export function StepIndicatorProvider(_ref) {
+  let {
+      isSidebar = false
+    } = _ref,
+    restOfProps = _objectWithoutProperties(_ref, _excluded);
+  const props = _objectSpread({
+    isSidebar
+  }, restOfProps);
+  const data = getData(props);
+  const countSteps = data.length;
+  const [hasSidebar, setHasSidebar] = useState(true);
+  const [hideSidebar, setHideSidebar] = useState(false);
+  const [activeStep, setActiveStep] = useState(getActiveStepFromProps());
+  const [openState, setOpenState] = useState(false);
+  const listOfReachedSteps = useRef([activeStep].filter(Boolean)).current;
+  const mediaQueryListener = useRef(null);
+  const context = useContext(Context);
+  const contextValue = makeContextValue();
+  useEffect(() => {
     var _document;
-    this._isMounted = true;
-    this._mediaQueryListener = onMediaQueryChange({
+    const container = (_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('sidebar__' + props.sidebar_id);
+    setHasSidebar(Boolean(container));
+    mediaQueryListener.current = onMediaQueryChange({
       min: '0',
       max: 'medium'
     }, hideSidebar => {
-      this.setState({
-        hideSidebar
-      });
+      setHideSidebar(hideSidebar);
     }, {
       runOnInit: true
     });
-    const container = (_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('sidebar__' + this.props.sidebar_id);
-    this.setState({
-      hasSidebar: Boolean(container)
-    });
+    return () => {
+      if (mediaQueryListener.current) {
+        mediaQueryListener.current();
+      }
+    };
+  }, []);
+  useEffect(() => {
+    const currentStepFromProps = getActiveStepFromProps();
+    if (currentStepFromProps !== activeStep) {
+      setActiveStep(props.current_step);
+    }
+  }, [props.current_step, data]);
+  useEffect(() => {
+    if (!listOfReachedSteps.includes(activeStep)) {
+      listOfReachedSteps.push(activeStep);
+    }
+  }, [activeStep]);
+  function onChangeState() {
+    setOpenState(false);
+  }
+  function openHandler() {
+    setOpenState(true);
+  }
+  function closeHandler() {
+    setOpenState(false);
   }
-  componentWillUnmount() {
-    if (this._mediaQueryListener) {
-      this._mediaQueryListener();
+  function getData(props) {
+    if (typeof props.data === 'string') {
+      return props.data[0] === '[' ? JSON.parse(props.data) : [];
     }
+    return props.data || [];
   }
-  componentDidUpdate() {
-    this.setState(this.makeContextValue());
+  function getActiveStepFromProps() {
+    if (typeof data[0] === 'string') {
+      return props.current_step;
+    }
+    const dataWithItems = data;
+    const itemWithCurrentStep = dataWithItems.find(item => item.is_current);
+    return itemWithCurrentStep ? dataWithItems.indexOf(itemWithCurrentStep) : props.current_step;
   }
-  getGlobalContext(context = this.context) {
-    const data = extendPropsWithContextInClassComponent(this.props, stepIndicatorDefaultProps, {
+  function makeContextValue() {
+    const globalContext = extendPropsWithContext(props, stepIndicatorDefaultProps, {
       skeleton: context === null || context === void 0 ? void 0 : context.skeleton
     }, context.getTranslation(context).StepIndicator, context.StepIndicator);
-    return data;
-  }
-  makeContextValue({
-    state = _objectSpread({}, this.state),
-    props = this.props,
-    context = this.context
-  } = {}) {
-    const globalContext = this.getGlobalContext(context);
     const value = extendSafe({
       filterAttributes
     }, globalContext, {
       defaultProps: stepIndicatorDefaultProps,
       props
-    }, state);
+    }, {
+      hasSidebar,
+      hideSidebar,
+      activeStep,
+      openState,
+      listOfReachedSteps,
+      data,
+      countSteps,
+      stepsLabel: updateStepTitle(globalContext.step_title),
+      stepsLabelExtended: updateStepTitle(globalContext.step_title_extended)
+    }, {
+      setActiveStep,
+      onChangeState,
+      openHandler,
+      closeHandler
+    });
     value.sidebarIsVisible = value.hasSidebar && !value.hideSidebar;
     return value;
   }
-  render() {
-    const value = this.makeContextValue();
-    if (typeof window !== 'undefined' && window.IS_TEST) {
-      value.no_animation = true;
-    }
-    Object.keys(value).forEach(key => {
-      if (key.startsWith('_')) {
-        delete value[key];
-      }
-    });
-    return React.createElement(StepIndicatorContext.Provider, {
-      value: value
-    }, this.props.children);
+  function updateStepTitle(title) {
+    return title === null || title === void 0 ? void 0 : title.replace('%step', String((activeStep || 0) + 1)).replace('%count', String((data === null || data === void 0 ? void 0 : data.length) || 1));
   }
+  if (typeof window !== 'undefined' && window['IS_TEST']) {
+    contextValue['no_animation'] = true;
+  }
+  Object.keys(contextValue).forEach(key => {
+    if (key.startsWith('_')) {
+      delete contextValue[key];
+    }
+  });
+  return React.createElement(StepIndicatorContext.Provider, {
+    value: contextValue
+  }, props.children);
 }
-_defineProperty(StepIndicatorProvider, "contextType", Context);
-_defineProperty(StepIndicatorProvider, "defaultProps", {
-  isSidebar: false
-});
-process.env.NODE_ENV !== "production" ? StepIndicatorProvider.propTypes = {
-  sidebar_id: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  isSidebar: PropTypes.bool
-} : void 0;
 function extendSafe(...objects) {
   const obj = {};
   objects.forEach(itm => {