@dnb/eufemia 10.7.0 → 10.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"StepIndicatorContext.js","names":["React","PropTypes","Context","stepIndicatorDefaultProps","processChildren","extendPropsWithContextInClassComponent","onMediaQueryChange","filterAttributes","Object","keys","filter","item","includes","concat","StepIndicatorContext","createContext","StepIndicatorProvider","PureComponent","getData","props","res","data","JSON","parse","getDerivedStateFromProps","state","_state$data","_state$step_title","_state$data2","_state$step_title_ext","_state$data3","countSteps","length","parseFloat","current_step","_current_step","activeStep","listOfReachedSteps","push","stepsLabel","step_title","replace","stepsLabelExtended","step_title_extended","constructor","_defineProperty","setState","openState","hasSidebar","hideSidebar","undefined","setActiveStep","onChangeState","openHandler","closeHandler","componentDidMount","_document","_isMounted","_mediaQueryListener","min","max","runOnInit","container","document","getElementById","sidebar_id","Boolean","componentWillUnmount","componentDidUpdate","makeContextValue","getGlobalContext","context","skeleton","getTranslation","StepIndicator","_objectSpread","globalContext","value","extendSafe","defaultProps","sidebarIsVisible","render","window","IS_TEST","no_animation","forEach","key","startsWith","createElement","Provider","children","isSidebar","process","env","NODE_ENV","propTypes","string","isRequired","node","bool","objects","obj","itm","entries","reduce","acc","k","v"],"sources":["../../../../src/components/step-indicator/StepIndicatorContext.js"],"sourcesContent":["/**\n * Web StepIndicator Context\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport Context from '../../shared/Context'\nimport { stepIndicatorDefaultProps } from './StepIndicatorProps'\nimport {\n  processChildren,\n  extendPropsWithContextInClassComponent,\n} from '../../shared/component-helper'\nimport { onMediaQueryChange } from '../../shared/MediaQueryUtils'\n\n// We use this array to filter out unwanted\nconst filterAttributes = Object.keys(stepIndicatorDefaultProps)\n  .filter((item) => {\n    return !['class', 'className'].includes(item)\n  })\n  .concat([\n    'internalId',\n    'isSidebar',\n    'hasSidebar',\n    'hideSidebar',\n    'sidebarIsVisible',\n    'mainTitle',\n    'stepsLabel',\n    'stepsLabelExtended',\n    'listOfReachedSteps',\n    'setActiveStep',\n    'activeStep',\n    'countSteps',\n    'openState',\n    'onChangeState',\n    'openHandler',\n    'closeHandler',\n    'innerRef',\n    'hasSkeletonData',\n    'filterAttributes',\n    'onChangeState',\n  ])\n\nconst StepIndicatorContext = React.createContext(null)\n\nexport default StepIndicatorContext\n\nexport class StepIndicatorProvider extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    sidebar_id: PropTypes.string.isRequired,\n    children: PropTypes.node.isRequired,\n    isSidebar: PropTypes.bool,\n  }\n\n  static defaultProps = {\n    isSidebar: false,\n  }\n\n  static getData(props) {\n    let res = []\n    if (props.data) {\n      res = props.data\n    } else {\n      res = processChildren(props)\n    }\n    if (typeof res === 'string')\n      return res[0] === '[' ? JSON.parse(res) : []\n    return res || []\n  }\n\n  static getDerivedStateFromProps(props, state) {\n    if (props.data) {\n      state.data = StepIndicatorProvider.getData(props)\n    }\n    state.countSteps = state.data?.length\n\n    if (\n      parseFloat(props.current_step) > -1 &&\n      props.current_step !== state._current_step\n    ) {\n      state.activeStep = parseFloat(props.current_step) || 0\n    }\n\n    if (!state.listOfReachedSteps.includes(state.activeStep)) {\n      state.listOfReachedSteps.push(state.activeStep)\n    }\n\n    state.stepsLabel = state.step_title\n      ?.replace('%step', (state.activeStep || 0) + 1)\n      .replace('%count', state.data?.length || 1)\n    state.stepsLabelExtended = state.step_title_extended\n      ?.replace('%step', (state.activeStep || 0) + 1)\n      .replace('%count', state.data?.length || 1)\n\n    state._current_step = props.current_step\n\n    return state\n  }\n\n  constructor(props) {\n    super(props)\n\n    this.state = {\n      hasSidebar: true,\n      hideSidebar: false,\n      activeStep: undefined,\n      setActiveStep: this.setActiveStep,\n      onChangeState: this.onChangeState,\n      openHandler: this.openHandler,\n      closeHandler: this.closeHandler,\n    }\n\n    if (!this.state.listOfReachedSteps) {\n      this.state.listOfReachedSteps = []\n    }\n  }\n\n  componentDidMount() {\n    this._isMounted = true\n\n    this._mediaQueryListener = onMediaQueryChange(\n      {\n        min: '0',\n        max: 'medium',\n      },\n      (hideSidebar) => {\n        this.setState({\n          hideSidebar,\n        })\n      },\n      { runOnInit: true }\n    )\n\n    const container = document?.getElementById(\n      'sidebar__' + this.props.sidebar_id\n    )\n    this.setState({\n      hasSidebar: Boolean(container),\n    })\n  }\n\n  componentWillUnmount() {\n    if (this._mediaQueryListener) {\n      this._mediaQueryListener()\n    }\n  }\n\n  componentDidUpdate() {\n    this.setState(this.makeContextValue())\n  }\n\n  setActiveStep = (activeStep) => {\n    this.setState({ activeStep })\n  }\n\n  onChangeState = () => {\n    this.setState({ openState: false })\n  }\n\n  openHandler = () => {\n    this.setState({ openState: true })\n  }\n\n  closeHandler = () => {\n    this.setState({ openState: false })\n  }\n\n  getGlobalContext(context = this.context) {\n    // use only the props from context, who are available here anyway\n    const data = extendPropsWithContextInClassComponent(\n      this.props,\n      stepIndicatorDefaultProps,\n      { skeleton: context?.skeleton },\n      context.getTranslation(context).StepIndicator,\n      context.StepIndicator\n    )\n\n    return data\n  }\n\n  makeContextValue({\n    state = { ...this.state },\n    props = this.props,\n    context = this.context,\n  } = {}) {\n    const globalContext = this.getGlobalContext(context)\n\n    const value = extendSafe(\n      { filterAttributes },\n      globalContext,\n      {\n        defaultProps: stepIndicatorDefaultProps,\n        props,\n      },\n      state\n    )\n\n    value.sidebarIsVisible = value.hasSidebar && !value.hideSidebar\n\n    return value\n  }\n\n  render() {\n    const value = this.makeContextValue()\n\n    if (typeof window !== 'undefined' && window.IS_TEST) {\n      value.no_animation = true\n    }\n\n    // Filter out unwanted HTML attributes\n    Object.keys(value).forEach((key) => {\n      if (key.startsWith('_')) {\n        delete value[key]\n      }\n    })\n\n    return (\n      <StepIndicatorContext.Provider value={value}>\n        {this.props.children}\n      </StepIndicatorContext.Provider>\n    )\n  }\n}\n\n/**\n * Like \"Object.assign\" – but safe\n * A new falsy value will not be used, if it exists already\n * Also,\n *\n * @param  {...object} objects\n * @returns object\n */\nfunction extendSafe(...objects) {\n  const obj = {}\n\n  objects.forEach((itm) => {\n    if (itm.defaultProps && itm.props) {\n      itm = Object.entries(itm.props).reduce((acc, [k, v]) => {\n        if (itm.defaultProps[k] !== v) {\n          acc[k] = v\n        }\n        return acc\n      }, {})\n    }\n\n    Object.entries(itm).forEach(([k, v]) => {\n      if (!obj[k] || (obj[k] && v)) {\n        obj[k] = v\n      }\n    })\n  })\n\n  return obj\n}\n"],"mappings":"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"}
+{"version":3,"file":"StepIndicatorContext.js","names":["React","useContext","useEffect","useRef","useState","Context","stepIndicatorDefaultProps","extendPropsWithContext","onMediaQueryChange","filterAttributes","Object","keys","filter","item","includes","concat","StepIndicatorContext","createContext","StepIndicatorProvider","_ref","isSidebar","restOfProps","_objectWithoutProperties","_excluded","props","_objectSpread","data","getData","countSteps","length","hasSidebar","setHasSidebar","hideSidebar","setHideSidebar","activeStep","setActiveStep","getActiveStepFromProps","openState","setOpenState","listOfReachedSteps","Boolean","current","mediaQueryListener","context","contextValue","makeContextValue","_document","container","document","getElementById","sidebar_id","min","max","runOnInit","currentStepFromProps","current_step","push","onChangeState","openHandler","closeHandler","JSON","parse","dataWithItems","itemWithCurrentStep","find","is_current","indexOf","globalContext","skeleton","getTranslation","StepIndicator","value","extendSafe","defaultProps","stepsLabel","updateStepTitle","step_title","stepsLabelExtended","step_title_extended","sidebarIsVisible","title","replace","String","window","forEach","key","startsWith","createElement","Provider","children","objects","obj","itm","entries","reduce","acc","k","v"],"sources":["../../../../src/components/step-indicator/StepIndicatorContext.tsx"],"sourcesContent":["/**\n * Web StepIndicator Context\n *\n */\n\nimport React, { useContext, useEffect, useRef, useState } from 'react'\nimport Context, { ContextProps } from '../../shared/Context'\nimport { stepIndicatorDefaultProps } from './StepIndicatorProps'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport { onMediaQueryChange } from '../../shared/MediaQueryUtils'\nimport {\n  StepIndicatorData,\n  StepIndicatorDataItem,\n  StepIndicatorMode,\n  StepIndicatorProps,\n} from './StepIndicator'\nimport { StepIndicatorItemProps } from './StepIndicatorItem'\n\n// We use this array to filter out unwanted properties\nconst filterAttributes = Object.keys(stepIndicatorDefaultProps)\n  .filter((item) => {\n    return !['class', 'className'].includes(item)\n  })\n  .concat([\n    'internalId',\n    'isSidebar',\n    'hasSidebar',\n    'hideSidebar',\n    'sidebarIsVisible',\n    'mainTitle',\n    'stepsLabel',\n    'stepsLabelExtended',\n    'listOfReachedSteps',\n    'setActiveStep',\n    'activeStep',\n    'countSteps',\n    'openState',\n    'onChangeState',\n    'openHandler',\n    'closeHandler',\n    'innerRef',\n    'hasSkeletonData',\n    'filterAttributes',\n    'onChangeState',\n  ])\n\nexport type StepIndicatorContextValues = StepIndicatorProviderProps &\n  StepIndicatorProviderStates &\n  ContextProps\n\nconst StepIndicatorContext =\n  React.createContext<StepIndicatorContextValues>(null)\n\nexport default StepIndicatorContext\n\nexport type StepIndicatorProviderProps = Omit<\n  StepIndicatorProps,\n  'mode' | 'data'\n> & {\n  /**\n   * <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.\n   */\n  sidebar_id: string\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   * <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  children: React.ReactNode\n  isSidebar?: boolean\n}\n\nexport type StepIndicatorProviderStates = {\n  data: (string | StepIndicatorItemProps)[]\n  hasSidebar: boolean\n  hideSidebar: boolean\n  activeStep: number\n  openState: boolean\n  listOfReachedSteps: number[]\n  countSteps: number\n  stepsLabel: string\n  stepsLabelExtended: string\n  filterAttributes: string[]\n  setActiveStep: React.Dispatch<React.SetStateAction<number>>\n  sidebarIsVisible: boolean\n  onChangeState: () => void\n  openHandler: () => void\n  closeHandler: () => void\n}\n\nexport function StepIndicatorProvider({\n  isSidebar = false,\n  ...restOfProps\n}: StepIndicatorProviderProps) {\n  const props = { isSidebar, ...restOfProps }\n\n  const data = getData(props)\n  const countSteps = data.length\n\n  const [hasSidebar, setHasSidebar] = useState<boolean>(true)\n  const [hideSidebar, setHideSidebar] = useState<boolean>(false)\n  const [activeStep, setActiveStep] = useState<number>(\n    getActiveStepFromProps()\n  )\n  const [openState, setOpenState] = useState<boolean>(false)\n\n  const listOfReachedSteps = useRef([activeStep].filter(Boolean)).current\n\n  const mediaQueryListener = useRef(null)\n\n  const context = useContext(Context)\n  const contextValue = makeContextValue() as StepIndicatorContextValues\n\n  // Mount and dismount\n  useEffect(() => {\n    const container = document?.getElementById(\n      'sidebar__' + props.sidebar_id\n    )\n\n    setHasSidebar(Boolean(container))\n\n    mediaQueryListener.current = onMediaQueryChange(\n      {\n        min: '0',\n        max: 'medium',\n      },\n      (hideSidebar) => {\n        setHideSidebar(hideSidebar)\n      },\n      { runOnInit: true }\n    )\n\n    return () => {\n      if (mediaQueryListener.current) {\n        mediaQueryListener.current()\n      }\n    }\n  }, [])\n\n  // Keeps the activeStep state updated with changes to the current_step and data props\n  useEffect(() => {\n    const currentStepFromProps = getActiveStepFromProps()\n\n    if (currentStepFromProps !== activeStep) {\n      setActiveStep(props.current_step)\n    }\n  }, [props.current_step, data])\n\n  // Keeps the listOfReachedSteps state up to date with the activeStep state\n  useEffect(() => {\n    if (!listOfReachedSteps.includes(activeStep)) {\n      listOfReachedSteps.push(activeStep)\n    }\n  }, [activeStep])\n\n  function onChangeState() {\n    setOpenState(false)\n  }\n\n  function openHandler() {\n    setOpenState(true)\n  }\n\n  function closeHandler() {\n    setOpenState(false)\n  }\n\n  function getData(\n    props: StepIndicatorProviderProps\n  ): string[] | StepIndicatorDataItem[] {\n    if (typeof props.data === 'string') {\n      return props.data[0] === '[' ? JSON.parse(props.data) : []\n    }\n\n    return props.data || []\n  }\n\n  function getActiveStepFromProps() {\n    if (typeof data[0] === 'string') {\n      return props.current_step\n    }\n\n    const dataWithItems = data as StepIndicatorDataItem[]\n\n    const itemWithCurrentStep = dataWithItems.find(\n      (item) => item.is_current\n    )\n    // Is current on data item has precedence(?) over current_step prop\n    return itemWithCurrentStep\n      ? dataWithItems.indexOf(itemWithCurrentStep)\n      : props.current_step\n  }\n\n  function makeContextValue() {\n    const globalContext = extendPropsWithContext(\n      props,\n      stepIndicatorDefaultProps,\n      { skeleton: context?.skeleton },\n      context.getTranslation(context).StepIndicator,\n      context.StepIndicator\n    )\n\n    const value = extendSafe(\n      { filterAttributes },\n      globalContext,\n      // Props\n      {\n        defaultProps: stepIndicatorDefaultProps,\n        props,\n      },\n      // State\n      {\n        hasSidebar,\n        hideSidebar,\n        activeStep,\n        openState,\n        listOfReachedSteps,\n        data,\n        countSteps,\n        stepsLabel: updateStepTitle(globalContext.step_title),\n        stepsLabelExtended: updateStepTitle(\n          globalContext.step_title_extended\n        ),\n      },\n      // Functions\n      {\n        setActiveStep,\n        onChangeState,\n        openHandler,\n        closeHandler,\n      }\n    ) as StepIndicatorContextValues\n\n    value.sidebarIsVisible = value.hasSidebar && !value.hideSidebar\n\n    return value\n  }\n\n  function updateStepTitle(title: string) {\n    return title\n      ?.replace('%step', String((activeStep || 0) + 1))\n      .replace('%count', String(data?.length || 1))\n  }\n\n  if (typeof window !== 'undefined' && window['IS_TEST']) {\n    contextValue['no_animation'] = true\n  }\n\n  // Filter out unwanted HTML attributes\n  Object.keys(contextValue).forEach((key) => {\n    if (key.startsWith('_')) {\n      delete contextValue[key]\n    }\n  })\n\n  return (\n    <StepIndicatorContext.Provider value={contextValue}>\n      {props.children}\n    </StepIndicatorContext.Provider>\n  )\n}\n\n/**\n * Like \"Object.assign\" – but safe\n * A new falsy value will not be used, if it exists already\n *\n * @param  {...object} objects\n * @returns object\n */\nfunction extendSafe(...objects): Record<string, unknown> {\n  const obj = {}\n\n  objects.forEach((itm) => {\n    if (itm.defaultProps && itm.props) {\n      itm = Object.entries(itm.props).reduce((acc, [k, v]) => {\n        if (itm.defaultProps[k] !== v) {\n          acc[k] = v\n        }\n        return acc\n      }, {})\n    }\n\n    Object.entries(itm).forEach(([k, v]) => {\n      if (!obj[k] || (obj[k] && v)) {\n        obj[k] = v\n      }\n    })\n  })\n\n  return obj\n}\n"],"mappings":"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"}

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

@@ -1,61 +1,59 @@
-import * as React from 'react';
-import type { FormStatusText } from '../FormStatus';
-export type StepIndicatorItemTitle = string | React.ReactNode;
-export type StepIndicatorItemStatusState = 'warn' | 'info' | 'error';
-export interface StepIndicatorItemProps
-  extends React.HTMLProps<HTMLElement> {
-  /**
-   * <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;
-  step_title?: string;
-  /**
-   * 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;
-  /**
-   * 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 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;
-  inactive?: boolean;
-  disabled?: boolean;
-  status?: FormStatusText;
-  status_state?: StepIndicatorItemStatusState;
-  currentItemNum: number;
-}
-export default class StepIndicatorItem extends React.Component<
-  StepIndicatorItemProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
-export interface StepItemButtonProps {
-  children?: React.ReactNode;
-  inner_ref?: React.RefObject<HTMLElement>;
-  className?: string;
-  status?: FormStatusText;
-  status_state?: StepIndicatorStatusState;
-}
-export declare const StepItemButton: React.FC<StepItemButtonProps>;
-export interface StepItemWrapperProps {
-  children?: React.ReactNode;
-  number?: number;
-  /**
-   * Define whether to show automatically counted numbers or not. Defaults to `false`.
-   */
-  hide_numbers?: boolean;
-  status?: string;
-}
-export declare const StepItemWrapper: React.FC<StepItemWrapperProps>;
+/**
+ * Web StepIndicator Component
+ *
+ */
+import React from 'react';
+import { ButtonProps } from '../button/Button';
+import { StepIndicatorMouseEvent, StepIndicatorRenderCallback } from './StepIndicator';
+export type StepIndicatorStatusState = 'warn' | 'info' | 'error';
+export type StepIndicatorItemProps = Omit<React.HTMLProps<HTMLElement>, 'title' | 'data'> & {
+    title: string | React.ReactNode;
+    /**
+     * If set to true, this item step will be set as the current current selected step. This can be used instead of `current_step` on the component itself.
+     */
+    is_current?: boolean;
+    /**
+     * If set to true, this item step will be handled as an inactive step and will not be clickable.
+     * Defaults to `false`
+     */
+    inactive?: boolean;
+    /**
+     * If set to true, this item step will be visible as an disabled button and will not be clickable.
+     * Defaults to false.
+     */
+    disabled?: boolean;
+    /**
+     * Is used to set the status text.
+     */
+    status?: string | React.ReactNode;
+    /**
+     * Used to set the status state to be either `info`, `error` or `warn`.
+     * Defaults to `warn`.
+     */
+    status_state?: StepIndicatorStatusState;
+    /**
+     * Callback function to manipulate or wrap the step item. Has to return a React Node. You receive an object `{ StepItem, element, attributes, props, context }`.
+     */
+    on_render?: ({ StepItem, element, attributes, props, context, }: StepIndicatorRenderCallback) => React.ReactNode;
+    /**
+     * 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?: ({ event, item, current_step, currentStep, }: StepIndicatorMouseEvent) => void;
+    currentItemNum: number;
+};
+declare function StepIndicatorItem({ status_state: status_state_default, inactive: inactive_default, disabled: disabled_default, ...restOfProps }: StepIndicatorItemProps): import("react/jsx-runtime").JSX.Element;
+export type StepItemButtonProps = Omit<ButtonProps, 'status_state'> & {
+    status_state?: StepIndicatorStatusState;
+};
+export declare function StepItemButton({ children, className, status, status_state, inner_ref, ...props }: StepItemButtonProps): import("react/jsx-runtime").JSX.Element;
+export type StepItemWrapperProps = React.HTMLProps<HTMLElement> & {
+    children?: React.ReactNode;
+    number?: number;
+    /**
+     * Define whether to show automatically counted numbers or not. Defaults to `false`.
+     */
+    hide_numbers?: boolean;
+    status?: string | React.ReactNode;
+};
+export declare function StepItemWrapper({ children, number, hide_numbers, status, }: StepItemWrapperProps): import("react/jsx-runtime").JSX.Element;
+export default StepIndicatorItem;

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

@@ -1,219 +1,194 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["currentItemNum", "title", "is_current", "inactive", "disabled", "status", "status_state", "on_render", "on_click", "on_change"],
-  _excluded2 = ["children", "className", "status", "status_state", "inner_ref"];
-import React from 'react';
-import PropTypes from 'prop-types';
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["status_state", "inactive", "disabled"],
+  _excluded2 = ["currentItemNum", "title", "is_current", "inactive", "disabled", "status", "status_state", "on_render", "on_click"],
+  _excluded3 = ["children", "className", "status", "status_state", "inner_ref"];
+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, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
-import { isTrue, makeUniqueId, dispatchCustomElementEvent } from '../../shared/component-helper';
+import { makeUniqueId, dispatchCustomElementEvent } from '../../shared/component-helper';
 import HeightAnimationInstance from '../height-animation/HeightAnimationInstance';
 import Button from '../button/Button';
 import Icon from '../icon/Icon';
-import { WarnIcon, InfoIcon, ErrorIcon } from '../../components/form-status/FormStatus';
+import { WarnIcon, InfoIcon, ErrorIcon } from '../form-status/FormStatus';
 import StepIndicatorContext from './StepIndicatorContext';
-export default class StepIndicatorItem extends React.PureComponent {
-  constructor(props, context) {
-    super(props);
-    _defineProperty(this, "onClickHandler", ({
-      event,
-      item,
-      currentItemNum
-    }) => {
-      const params = {
-        event,
-        item,
-        current_step: currentItemNum,
-        currentStep: currentItemNum
-      };
-      const onClickItem = dispatchCustomElementEvent(this, 'on_click', params);
-      const onClickGlobal = dispatchCustomElementEvent(this.context, 'on_click', params);
-      if (onClickItem === false || onClickGlobal === false) {
-        return;
-      }
-      if (this.context.activeStep !== currentItemNum) {
-        this.context.setActiveStep(currentItemNum);
-        if (typeof this.context.onChangeState === 'function') {
-          this.context.onChangeState(currentItemNum);
-        }
-        dispatchCustomElementEvent(this.context, 'on_change', params);
-      }
-    });
-    this._heightAnim = new HeightAnimationInstance({
-      animate: !isTrue(context.no_animation)
-    });
-    this._ref = React.createRef();
-  }
-  componentDidMount() {
-    this._heightAnim.setElement(this._ref.current);
-    this._prevStep = this.context.activeStep;
-  }
-  componentWillUnmount() {
-    this._heightAnim.remove();
-  }
-  getSnapshotBeforeUpdate() {
-    return this._heightAnim.getHeight();
-  }
-  componentDidUpdate(a, b, height) {
-    if (this._prevStep !== this.context.activeStep && (this.props.currentItemNum === this._prevStep || this.props.currentItemNum === this.context.activeStep)) {
-      const toHeight = this._heightAnim.getUnknownHeight();
+import { stepIndicatorDefaultProps } from './StepIndicatorProps';
+function StepIndicatorItem(_ref) {
+  let {
+      status_state: status_state_default = 'warn',
+      inactive: inactive_default = false,
+      disabled: disabled_default = false
+    } = _ref,
+    restOfProps = _objectWithoutProperties(_ref, _excluded);
+  const props = _objectSpread({
+    status_state: status_state_default,
+    inactive: inactive_default,
+    disabled: disabled_default
+  }, restOfProps);
+  const context = useContext(StepIndicatorContext);
+  const [previousStep, setPreviousStep] = useState(context.activeStep);
+  const heightAnim = useRef(new HeightAnimationInstance({
+    animate: (context === null || context === void 0 ? void 0 : context.no_animation) !== undefined ? context.no_animation : false
+  })).current;
+  const ref = useRef(null);
+  const thisReference = {
+    context,
+    props,
+    onClickHandler
+  };
+  useEffect(() => {
+    heightAnim.setElement(ref.current);
+    return () => {
+      heightAnim.remove();
+    };
+  }, []);
+  useEffect(() => {
+    if (previousStep !== context.activeStep) {
+      setPreviousStep(context.activeStep);
+    }
+  }, [context.activeStep]);
+  useLayoutEffect(() => {
+    const height = heightAnim.getHeight();
+    if (previousStep !== context.activeStep && (props.currentItemNum === previousStep || props.currentItemNum === context.activeStep)) {
+      const toHeight = heightAnim.getUnknownHeight();
       if (height !== toHeight) {
-        this._heightAnim.adjustTo(height, toHeight);
+        heightAnim.adjustTo(height, toHeight);
       }
     }
-    this._prevStep = this.context.activeStep;
-  }
-  render() {
-    const {
-      mode,
-      filterAttributes,
-      activeStep,
-      countSteps,
-      listOfReachedSteps,
-      hide_numbers,
-      on_item_render,
-      sidebar_id,
-      step_title
-    } = this.context;
-    const _this$props = this.props,
-      {
-        currentItemNum,
-        title,
-        is_current,
-        inactive,
-        disabled,
-        status,
-        status_state,
-        on_render,
-        on_click,
-        on_change
-      } = _this$props,
-      attributes = _objectWithoutProperties(_this$props, _excluded);
-    Object.keys(attributes).forEach(key => {
-      if (filterAttributes.includes(key)) {
-        delete attributes[key];
-      }
-    });
-    const hasPassedAndIsCurrent = mode === 'loose' || currentItemNum <= activeStep || listOfReachedSteps.includes(currentItemNum);
-    const isNavigateable = mode === 'strict' || mode === 'loose';
-    let isInactive = isTrue(inactive) || mode === 'strict' && !hasPassedAndIsCurrent;
-    let isVisited = currentItemNum < activeStep;
-    const id = `${sidebar_id || makeUniqueId()}-${currentItemNum}`;
-    const ariaLabel = step_title === null || step_title === void 0 ? void 0 : step_title.replace('%step', currentItemNum + 1).replace('%count', countSteps);
-    const isCurrent = currentItemNum === activeStep || isTrue(is_current) && isNaN(parseFloat(activeStep));
-    let element = React.createElement(StepItemWrapper, {
-      number: currentItemNum + 1,
-      hide_numbers: hide_numbers,
-      status: status,
-      status_state: status_state
-    }, title);
-    const callbackProps = {
-      StepItem: StepItemWrapper,
-      element,
-      attributes,
-      props: this.props,
-      context: this.context
+  }, [previousStep, context.activeStep, heightAnim, props.currentItemNum]);
+  function onClickHandler({
+    event,
+    item,
+    currentItemNum
+  }) {
+    const params = {
+      event,
+      item,
+      current_step: currentItemNum,
+      currentStep: currentItemNum
     };
-    if (typeof on_render === 'function') {
-      element = on_render(callbackProps);
-    } else if (typeof on_item_render === 'function') {
-      element = on_item_render(callbackProps);
+    const onClickItem = dispatchCustomElementEvent(thisReference, 'on_click', params);
+    const onClickGlobal = dispatchCustomElementEvent(context, 'on_click', params);
+    if (onClickItem === false || onClickGlobal === false) {
+      return;
+    }
+    if (context.activeStep !== currentItemNum) {
+      context.setActiveStep(currentItemNum);
+      if (typeof context.onChangeState === 'function') {
+        context.onChangeState();
+      }
+      dispatchCustomElementEvent(context, 'on_change', params);
     }
-    const itemParams = {};
-    const buttonParams = {
-      icon: 'check',
+  }
+  const {
+    mode,
+    filterAttributes,
+    activeStep,
+    countSteps,
+    listOfReachedSteps,
+    hide_numbers,
+    on_item_render,
+    sidebar_id,
+    step_title
+  } = context;
+  const {
+      currentItemNum,
+      title,
+      is_current,
+      inactive,
+      disabled,
       status,
       status_state,
-      'aria-describedby': id
-    };
-    if (isCurrent) {
-      itemParams['aria-current'] = 'step';
+      on_render,
+      on_click
+    } = props,
+    attributes = _objectWithoutProperties(props, _excluded2);
+  Object.keys(attributes).forEach(key => {
+    if (filterAttributes.includes(key)) {
+      delete attributes[key];
     }
-    if (isTrue(disabled)) {
-      buttonParams['disabled'] = true;
-    }
-    if (isNavigateable && !isInactive) {
-      buttonParams.onClick = ({
-        event
-      }) => this.onClickHandler({
-        event,
-        item: this.props,
-        currentItemNum
-      });
-    }
-    if (!buttonParams.onClick) {
-      buttonParams.element = 'span';
-      buttonParams.type = '';
-      buttonParams.on_click = undefined;
-      isInactive = true;
-    }
-    return React.createElement("li", _extends({}, itemParams, {
-      className: classnames('dnb-step-indicator__item', itemParams.className, isCurrent && 'dnb-step-indicator__item--current', isInactive && 'dnb-step-indicator__item--inactive', isVisited && 'dnb-step-indicator__item--visited')
-    }), React.createElement(StepItemButton, _extends({}, buttonParams, {
-      inner_ref: this._ref
-    }), element), React.createElement("span", {
-      id: id,
-      "aria-hidden": true,
-      className: "dnb-sr-only"
-    }, ariaLabel));
+  });
+  const hasPassedAndIsCurrent = mode === 'loose' || currentItemNum <= activeStep || listOfReachedSteps.includes(currentItemNum);
+  const isNavigateable = mode === 'strict' || mode === 'loose';
+  let isInactive = inactive || mode === 'strict' && !hasPassedAndIsCurrent;
+  const isVisited = currentItemNum < activeStep;
+  const id = `${sidebar_id || makeUniqueId()}-${currentItemNum}`;
+  const ariaLabel = step_title === null || step_title === void 0 ? void 0 : step_title.replace('%step', String(currentItemNum + 1)).replace('%count', String(countSteps));
+  const isCurrent = currentItemNum === activeStep;
+  let element = React.createElement(StepItemWrapper, {
+    number: currentItemNum + 1,
+    hide_numbers: hide_numbers,
+    status: status
+  }, title);
+  const callbackProps = {
+    StepItem: StepItemWrapper,
+    element,
+    attributes,
+    props,
+    context
+  };
+  if (typeof on_render === 'function') {
+    element = on_render(callbackProps);
+  } else if (typeof on_item_render === 'function') {
+    element = on_item_render(callbackProps);
+  }
+  const itemParams = {};
+  const buttonParams = {
+    icon: 'check',
+    status,
+    status_state,
+    'aria-describedby': id
+  };
+  if (isCurrent) {
+    itemParams['aria-current'] = 'step';
+  }
+  if (disabled) {
+    buttonParams.disabled = true;
   }
+  if (isNavigateable && !isInactive) {
+    buttonParams.onClick = ({
+      event
+    }) => onClickHandler({
+      event,
+      item: props,
+      currentItemNum
+    });
+  }
+  if (!buttonParams.onClick) {
+    buttonParams.element = 'span';
+    buttonParams.type = '';
+    buttonParams.on_click = undefined;
+    isInactive = true;
+  }
+  return React.createElement("li", _extends({}, itemParams, {
+    className: classnames('dnb-step-indicator__item', itemParams.className, isCurrent && 'dnb-step-indicator__item--current', isInactive && 'dnb-step-indicator__item--inactive', isVisited && 'dnb-step-indicator__item--visited')
+  }), React.createElement(StepItemButton, _extends({}, buttonParams, {
+    inner_ref: ref
+  }), element), React.createElement("span", {
+    id: id,
+    "aria-hidden": true,
+    className: "dnb-sr-only"
+  }, ariaLabel));
 }
-_defineProperty(StepIndicatorItem, "contextType", StepIndicatorContext);
-_defineProperty(StepIndicatorItem, "defaultProps", {
-  mode: null,
-  step_title: '%step',
-  hide_numbers: false,
-  on_item_render: null,
-  on_change: null,
-  on_render: null,
-  on_click: null,
-  is_current: null,
-  inactive: null,
-  disabled: null,
-  status: null,
-  status_state: 'warn'
-});
-process.env.NODE_ENV !== "production" ? StepIndicatorItem.propTypes = {
-  mode: PropTypes.string,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-  step_title: PropTypes.string,
-  hide_numbers: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  on_item_render: PropTypes.func,
-  on_change: PropTypes.func,
-  on_render: PropTypes.func,
-  on_click: PropTypes.func,
-  is_current: PropTypes.bool,
-  inactive: PropTypes.bool,
-  disabled: PropTypes.bool,
-  status: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  status_state: PropTypes.oneOf(['warn', 'info', 'error']),
-  currentItemNum: PropTypes.number.isRequired
-} : void 0;
-export const StepItemButton = _ref => {
+export function StepItemButton(_ref2) {
   let {
       children,
       className,
       status,
       status_state,
       inner_ref
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded2);
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded3);
+  const icons = {
+    info: InfoIcon,
+    error: ErrorIcon,
+    warn: WarnIcon
+  };
   if (status) {
-    let icon = null;
-    switch (status_state) {
-      case 'info':
-        icon = InfoIcon;
-        break;
-      case 'error':
-        icon = ErrorIcon;
-        break;
-      case 'warn':
-      default:
-        icon = WarnIcon;
-        break;
-    }
     props.icon = React.createElement(Icon, {
-      icon: icon,
+      icon: icons[status_state] || icons.warn,
       className: "dnb-button__icon",
       size: "medium",
       inherit_color: false
@@ -228,30 +203,16 @@ export const StepItemButton = _ref => {
     icon_position: "right",
     inner_ref: inner_ref
   }, props), children);
-};
-process.env.NODE_ENV !== "production" ? StepItemButton.propTypes = {
-  children: PropTypes.node,
-  inner_ref: PropTypes.object,
-  className: PropTypes.string,
-  status: PropTypes.string,
-  status_state: PropTypes.string
-} : void 0;
-StepItemButton.defaultProps = {
-  children: null,
-  inner_ref: null,
-  className: null,
-  status: null,
-  status_state: null
-};
-export const StepItemWrapper = ({
+}
+export function StepItemWrapper({
   children,
   number,
-  hide_numbers,
+  hide_numbers = stepIndicatorDefaultProps.hide_numbers,
   status
-}) => {
+}) {
   return React.createElement("span", {
     className: "dnb-step-indicator__item-content"
-  }, !isTrue(hide_numbers) && React.createElement("span", {
+  }, !hide_numbers && React.createElement("span", {
     "aria-hidden": true,
     className: "dnb-step-indicator__item-content__number"
   }, number, "."), React.createElement("span", {
@@ -261,17 +222,6 @@ export const StepItemWrapper = ({
   }, children), status && React.createElement("span", {
     className: "dnb-step-indicator__item-content__status"
   }, status)));
-};
-process.env.NODE_ENV !== "production" ? StepItemWrapper.propTypes = {
-  children: PropTypes.node,
-  number: PropTypes.number,
-  hide_numbers: PropTypes.bool,
-  status: PropTypes.string
-} : void 0;
-StepItemWrapper.defaultProps = {
-  children: null,
-  number: null,
-  hide_numbers: null,
-  status: null
-};
+}
+export default StepIndicatorItem;
 //# sourceMappingURL=StepIndicatorItem.js.map