@dnb/eufemia 10.71.2 → 10.72.0

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

@@ -4,33 +4,38 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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"];
+  _excluded2 = ["children", "className", "status", "status_state", "innerRef"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback, useContext, useMemo } from 'react';
 import classnames from 'classnames';
-import { makeUniqueId, dispatchCustomElementEvent } from '../../shared/component-helper';
-import HeightAnimation from '../height-animation/HeightAnimation';
-import Button from '../button/Button';
+import { dispatchCustomElementEvent } from '../../shared/component-helper';
+import useId from '../../shared/helpers/useId';
+import Anchor from '../anchor/Anchor';
 import Icon from '../icon/Icon';
-import { WarnIcon, InfoIcon, ErrorIcon } from '../form-status/FormStatus';
+import IconPrimary from '../icon/IconPrimary';
+import FormStatus, { WarnIcon, InfoIcon, ErrorIcon } from '../form-status/FormStatus';
 import StepIndicatorContext from './StepIndicatorContext';
 import { stepIndicatorDefaultProps } from './StepIndicatorProps';
+import Context from '../../shared/Context';
+import { createSkeletonClass } from '../skeleton/SkeletonHelper';
 function StepIndicatorItem(_ref) {
+  var _globalContext$formEl3;
   let {
       status_state: status_state_default = 'warn',
       inactive: inactive_default = false,
       disabled: disabled_default = false
     } = _ref,
     restOfProps = _objectWithoutProperties(_ref, _excluded);
+  const globalContext = React.useContext(Context);
   const props = useMemo(() => {
+    var _globalContext$formEl, _globalContext$formEl2;
     return _objectSpread({
       status_state: status_state_default,
       inactive: inactive_default,
-      disabled: disabled_default
+      disabled: (_globalContext$formEl = globalContext === null || globalContext === void 0 ? void 0 : (_globalContext$formEl2 = globalContext.formElement) === null || _globalContext$formEl2 === void 0 ? void 0 : _globalContext$formEl2.disabled) !== null && _globalContext$formEl !== void 0 ? _globalContext$formEl : disabled_default
     }, restOfProps);
-  }, [disabled_default, inactive_default, restOfProps, status_state_default]);
+  }, [disabled_default, inactive_default, restOfProps, status_state_default, globalContext === null || globalContext === void 0 ? void 0 : (_globalContext$formEl3 = globalContext.formElement) === null || _globalContext$formEl3 === void 0 ? void 0 : _globalContext$formEl3.disabled]);
   const context = useContext(StepIndicatorContext);
   const onClickHandler = useCallback(({
     event,
@@ -54,56 +59,43 @@ function StepIndicatorItem(_ref) {
     }
     if (context.activeStep !== currentItemNum) {
       context.setActiveStep(currentItemNum);
-      if (typeof context.onChangeState === 'function') {
-        context.onChangeState();
-      }
       dispatchCustomElementEvent(context, 'on_change', params);
     }
   }, [context, props]);
   const {
     mode,
-    filterAttributes,
     activeStep,
     countSteps,
     listOfReachedSteps,
-    hide_numbers,
+    hide_numbers = stepIndicatorDefaultProps.hide_numbers,
     on_item_render,
-    sidebar_id,
-    step_title
+    step_title,
+    no_animation,
+    skeleton
   } = context;
   const {
-      currentItemNum,
-      title,
-      is_current,
-      inactive,
-      disabled,
-      status,
-      status_state,
-      on_render,
-      on_click
-    } = props,
-    attributes = _objectWithoutProperties(props, _excluded2);
-  Object.keys(attributes).forEach(key => {
-    if (filterAttributes.includes(key)) {
-      delete attributes[key];
-    }
-  });
+    currentItemNum,
+    title,
+    is_current,
+    inactive,
+    disabled,
+    status,
+    status_state = 'warn',
+    on_render,
+    on_click
+  } = props;
   const hasPassedAndIsCurrent = mode === 'loose' || currentItemNum <= activeStep || listOfReachedSteps.includes(currentItemNum);
   const isNavigatable = mode === 'strict' || mode === 'loose';
-  let isInactive = inactive || mode === 'strict' && !hasPassedAndIsCurrent;
+  let isInactive = inactive || disabled || mode === 'strict' && !hasPassedAndIsCurrent;
   const isVisited = currentItemNum < activeStep;
-  const id = `${sidebar_id || makeUniqueId()}-${currentItemNum}`;
+  const id = `${useId()}-${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);
+  let element = React.createElement(StepItemWrapper, null, title);
   const callbackProps = {
     StepItem: StepItemWrapper,
     element,
-    attributes,
+    attributes: {},
     props,
     context
   };
@@ -114,7 +106,6 @@ function StepIndicatorItem(_ref) {
   }
   const itemParams = {};
   const buttonParams = {
-    icon: 'check',
     status,
     status_state,
     'aria-describedby': id
@@ -126,23 +117,54 @@ function StepIndicatorItem(_ref) {
     buttonParams.disabled = true;
   }
   if (isNavigatable && !isInactive) {
-    buttonParams.onClick = ({
-      event
-    }) => onClickHandler({
+    buttonParams.onClick = event => onClickHandler({
       event,
       item: props,
       currentItemNum
     });
   }
   if (!buttonParams.onClick) {
-    buttonParams.element = 'span';
-    buttonParams.type = '';
-    buttonParams.on_click = undefined;
+    buttonParams.onClick = undefined;
     isInactive = true;
   }
+  const stateIcons = {
+    info: InfoIcon,
+    error: ErrorIcon,
+    warn: WarnIcon
+  };
   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, buttonParams, element), React.createElement("span", {
+  }), React.createElement("div", {
+    className: 'dnb-step-indicator__item__wrapper' + (!status && isVisited ? " dnb-step-indicator__item__wrapper--check" : "")
+  }, React.createElement("span", {
+    className: classnames('dnb-step-indicator__item__bullet', isCurrent ? 'dnb-step-indicator__item__bullet--current' : !status && (isVisited ? 'dnb-step-indicator__item__bullet--check' : 'dnb-step-indicator__item__bullet--empty'), createSkeletonClass('shape', skeleton))
+  }, status && !isCurrent ? React.createElement(Icon, {
+    icon: stateIcons[status_state] || stateIcons.warn,
+    className: "dnb-step-indicator__item__icon",
+    size: "medium",
+    inheritColor: false
+  }) : React.createElement(IconPrimary, {
+    icon: "check",
+    className: 'dnb-step-indicator__item__icon' + (!isVisited ? " dnb-step-indicator__item__icon--hidden" : ""),
+    size: "auto"
+  })), React.createElement("div", {
+    className: classnames('dnb-step-indicator__item-content', createSkeletonClass('font', skeleton))
+  }, !hide_numbers && React.createElement("span", {
+    className: "dnb-step-indicator__item-content__number"
+  }, `${currentItemNum + 1}.`), React.createElement("div", {
+    className: "dnb-step-indicator__item-content__wrapper"
+  }, React.createElement(StepItemButton, _extends({}, buttonParams, {
+    className: "dnb-step-indicator__item-content__text"
+  }), element), React.createElement(FormStatus, {
+    shellSpace: {
+      top: '1rem'
+    },
+    no_animation: no_animation,
+    state: status && status_state,
+    variant: "outlined",
+    className: "dnb-step-indicator__item-content__status",
+    text: status
+  })))), React.createElement("span", {
     id: id,
     "aria-hidden": true,
     className: "dnb-sr-only"
@@ -153,51 +175,23 @@ export function StepItemButton(_ref2) {
       children,
       className,
       status,
-      status_state,
-      inner_ref
+      status_state = 'warn',
+      innerRef
     } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded3);
-  const icons = {
-    info: InfoIcon,
-    error: ErrorIcon,
-    warn: WarnIcon
-  };
-  if (status) {
-    props.icon = React.createElement(Icon, {
-      icon: icons[status_state] || icons.warn,
-      className: "dnb-button__icon",
-      size: "medium",
-      inherit_color: false
-    });
-  }
-  return React.createElement(Button, _extends({
-    className: classnames(className, status && `dnb-step-indicator__button__status dnb-step-indicator__button__status--${status_state}`),
-    wrap: true,
-    stretch: true,
-    variant: "secondary",
-    icon_size: "medium",
-    icon_position: "right",
-    inner_ref: inner_ref
-  }, props), React.createElement(HeightAnimation, null, children));
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  const notClickable = !props.onClick;
+  return React.createElement(Anchor, _extends({
+    element: notClickable ? 'span' : 'button',
+    type: notClickable ? undefined : 'button',
+    className: classnames(className, 'dnb-step-indicator__button', status && `dnb-step-indicator__button--has-status dnb-step-indicator__button--${status_state}`),
+    noStyle: notClickable,
+    innerRef: innerRef
+  }, props), children);
 }
 export function StepItemWrapper({
-  children,
-  number,
-  hide_numbers = stepIndicatorDefaultProps.hide_numbers,
-  status
+  children
 }) {
-  return React.createElement("span", {
-    className: "dnb-step-indicator__item-content"
-  }, !hide_numbers && React.createElement("span", {
-    "aria-hidden": true,
-    className: "dnb-step-indicator__item-content__number"
-  }, number, "."), React.createElement("span", {
-    className: "dnb-step-indicator__item-content__wrapper"
-  }, React.createElement("span", {
-    className: "dnb-step-indicator__item-content__text"
-  }, children), status && React.createElement("span", {
-    className: "dnb-step-indicator__item-content__status"
-  }, status)));
+  return React.createElement(React.Fragment, null, children);
 }
 export default StepIndicatorItem;
 //# sourceMappingURL=StepIndicatorItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepIndicatorItem.js","names":["React","useCallback","useContext","useMemo","classnames","makeUniqueId","dispatchCustomElementEvent","HeightAnimation","Button","Icon","WarnIcon","InfoIcon","ErrorIcon","StepIndicatorContext","stepIndicatorDefaultProps","StepIndicatorItem","_ref","status_state","status_state_default","inactive","inactive_default","disabled","disabled_default","restOfProps","_objectWithoutProperties","_excluded","props","_objectSpread","context","onClickHandler","event","item","currentItemNum","params","current_step","currentStep","onClickItem","onClickGlobal","activeStep","setActiveStep","onChangeState","mode","filterAttributes","countSteps","listOfReachedSteps","hide_numbers","on_item_render","sidebar_id","step_title","title","is_current","status","on_render","on_click","attributes","_excluded2","Object","keys","forEach","key","includes","hasPassedAndIsCurrent","isNavigatable","isInactive","isVisited","id","ariaLabel","replace","String","isCurrent","element","createElement","StepItemWrapper","number","callbackProps","StepItem","itemParams","buttonParams","icon","onClick","type","undefined","_extends","className","StepItemButton","_ref2","children","inner_ref","_excluded3","icons","info","error","warn","size","inherit_color","wrap","stretch","variant","icon_size","icon_position"],"sources":["../../../../src/components/step-indicator/StepIndicatorItem.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React, { HTMLProps, useCallback, useContext, useMemo } from 'react'\n\nimport classnames from 'classnames'\nimport {\n  makeUniqueId,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport Button, { ButtonProps } from '../button/Button'\nimport Icon, { IconIcon } from '../icon/Icon'\nimport { WarnIcon, InfoIcon, ErrorIcon } from '../form-status/FormStatus'\nimport StepIndicatorContext from './StepIndicatorContext'\nimport { stepIndicatorDefaultProps } from './StepIndicatorProps'\nimport {\n  StepIndicatorMouseEvent,\n  StepIndicatorRenderCallback,\n} from './StepIndicator'\n\nexport type StepIndicatorStatusState = 'warn' | 'info' | 'error'\nexport type StepIndicatorItemProps = Omit<\n  React.HTMLProps<HTMLElement>,\n  'title' | 'data'\n> & {\n  title: string | React.ReactNode\n  /**\n   * 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.\n   */\n  is_current?: boolean\n  /**\n   * If set to true, this item step will be handled as an inactive step and will not be clickable.\n   * Defaults to `false`\n   */\n  inactive?: boolean\n  /**\n   * If set to true, this item step will be visible as an disabled button and will not be clickable.\n   * Defaults to false.\n   */\n  disabled?: boolean\n  /**\n   * Is used to set the status text.\n   */\n  status?: string | React.ReactNode\n  /**\n   * Used to set the status state to be either `info`, `error` or `warn`.\n   * Defaults to `warn`.\n   */\n  status_state?: StepIndicatorStatusState\n  /**\n   * Callback function to manipulate or wrap the step item. Has to return a React Node. You receive an object `{ StepItem, element, attributes, props, context }`.\n   */\n  on_render?: ({\n    StepItem,\n    element,\n    attributes,\n    props,\n    context,\n  }: StepIndicatorRenderCallback) => React.ReactNode\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 }`.\n   */\n  on_click?: ({\n    event,\n    item,\n    current_step,\n    currentStep,\n  }: StepIndicatorMouseEvent) => void\n  currentItemNum: number\n}\n\nfunction StepIndicatorItem({\n  status_state: status_state_default = 'warn',\n  inactive: inactive_default = false,\n  disabled: disabled_default = false,\n  ...restOfProps\n}: StepIndicatorItemProps) {\n  const props: StepIndicatorItemProps = useMemo(() => {\n    return {\n      status_state: status_state_default,\n      inactive: inactive_default,\n      disabled: disabled_default,\n      ...restOfProps,\n    }\n  }, [\n    disabled_default,\n    inactive_default,\n    restOfProps,\n    status_state_default,\n  ])\n\n  const context = useContext(StepIndicatorContext)\n\n  const onClickHandler = useCallback(\n    ({ event, item, currentItemNum }) => {\n      const params = {\n        event,\n        item,\n        current_step: currentItemNum,\n        currentStep: currentItemNum,\n      }\n\n      const onClickItem = dispatchCustomElementEvent(\n        {\n          context,\n          props,\n          onClickHandler,\n        },\n        'on_click',\n        params\n      )\n\n      const onClickGlobal = dispatchCustomElementEvent(\n        context,\n        'on_click',\n        params\n      )\n\n      if (onClickItem === false || onClickGlobal === false) {\n        return // stop here\n      }\n\n      if (context.activeStep !== currentItemNum) {\n        context.setActiveStep(currentItemNum)\n        if (typeof context.onChangeState === 'function') {\n          context.onChangeState()\n        }\n\n        dispatchCustomElementEvent(context, 'on_change', params)\n      }\n    },\n    [context, props]\n  )\n\n  const {\n    mode,\n    filterAttributes,\n    activeStep,\n    countSteps,\n    listOfReachedSteps,\n    hide_numbers,\n    on_item_render,\n    sidebar_id,\n    step_title,\n  } = context\n\n  const {\n    currentItemNum,\n\n    title,\n    is_current, // eslint-disable-line\n    inactive,\n    disabled,\n    status,\n    status_state,\n\n    on_render,\n    on_click, // eslint-disable-line\n\n    ...attributes\n  } = props\n\n  Object.keys(attributes).forEach((key) => {\n    if (filterAttributes.includes(key)) {\n      delete attributes[key]\n    }\n  })\n\n  const hasPassedAndIsCurrent =\n    mode === 'loose' ||\n    currentItemNum <= activeStep ||\n    listOfReachedSteps.includes(currentItemNum)\n\n  const isNavigatable = mode === 'strict' || mode === 'loose'\n\n  let isInactive =\n    inactive || (mode === 'strict' && !hasPassedAndIsCurrent)\n\n  const isVisited = currentItemNum < activeStep\n\n  const id = `${sidebar_id || makeUniqueId()}-${currentItemNum}`\n  const ariaLabel = step_title\n    ?.replace('%step', String(currentItemNum + 1))\n    .replace('%count', String(countSteps))\n\n  const isCurrent = currentItemNum === activeStep\n\n  let element = (\n    <StepItemWrapper\n      number={currentItemNum + 1}\n      hide_numbers={hide_numbers}\n      status={status}\n    >\n      {title}\n    </StepItemWrapper>\n  ) as React.ReactNode\n\n  const callbackProps = {\n    StepItem: StepItemWrapper,\n    element,\n    attributes,\n    props,\n    context,\n  }\n\n  if (typeof on_render === 'function') {\n    element = on_render(callbackProps)\n  } else if (typeof on_item_render === 'function') {\n    element = on_item_render(callbackProps)\n  }\n\n  const itemParams = {} as HTMLProps<HTMLLIElement>\n  const buttonParams = {\n    icon: 'check',\n    status,\n    status_state,\n    'aria-describedby': id,\n  } as StepItemButtonProps\n\n  if (isCurrent) {\n    itemParams['aria-current'] = 'step'\n  }\n\n  if (disabled) {\n    buttonParams.disabled = true\n  }\n\n  if (isNavigatable && !isInactive) {\n    buttonParams.onClick = ({ event }: never) =>\n      onClickHandler({\n        event,\n        item: props,\n        currentItemNum,\n      })\n  }\n\n  if (!buttonParams.onClick) {\n    buttonParams.element = 'span'\n    buttonParams.type = ''\n    buttonParams.on_click = undefined\n    isInactive = true\n  }\n\n  return (\n    <li\n      {...itemParams}\n      className={classnames(\n        'dnb-step-indicator__item',\n        isCurrent && 'dnb-step-indicator__item--current',\n        isInactive && 'dnb-step-indicator__item--inactive',\n        isVisited && 'dnb-step-indicator__item--visited',\n        itemParams.className\n      )}\n    >\n      <StepItemButton {...buttonParams}>{element}</StepItemButton>\n      <span id={id} aria-hidden className=\"dnb-sr-only\">\n        {ariaLabel}\n      </span>\n    </li>\n  )\n}\n\nexport type StepItemButtonProps = Omit<ButtonProps, 'status_state'> & {\n  status_state?: StepIndicatorStatusState\n}\n\nexport function StepItemButton({\n  children,\n  className,\n  status,\n  status_state,\n  inner_ref,\n  ...props\n}: StepItemButtonProps) {\n  const icons: Record<StepIndicatorStatusState, IconIcon> = {\n    info: InfoIcon,\n    error: ErrorIcon,\n    warn: WarnIcon,\n  }\n\n  if (status) {\n    props.icon = (\n      <Icon\n        icon={icons[status_state] || icons.warn}\n        className=\"dnb-button__icon\"\n        size=\"medium\"\n        inherit_color={false}\n      />\n    )\n  }\n\n  return (\n    <Button\n      className={classnames(\n        className,\n        status && 'dnb-step-indicator__button__status',\n        status && `dnb-step-indicator__button__status--${status_state}`\n      )}\n      wrap\n      stretch\n      variant=\"secondary\"\n      icon_size=\"medium\"\n      icon_position=\"right\"\n      inner_ref={inner_ref}\n      {...props}\n    >\n      <HeightAnimation>{children}</HeightAnimation>\n    </Button>\n  )\n}\n\nexport type StepItemWrapperProps = React.HTMLProps<HTMLElement> & {\n  children?: React.ReactNode\n  number?: number\n  /**\n   * Define whether to show automatically counted numbers or not. Defaults to `false`.\n   */\n  hide_numbers?: boolean\n  status?: string | React.ReactNode\n}\n\nexport function StepItemWrapper({\n  children,\n  number,\n  hide_numbers = stepIndicatorDefaultProps.hide_numbers,\n  status,\n}: StepItemWrapperProps) {\n  return (\n    <span className=\"dnb-step-indicator__item-content\">\n      {!hide_numbers && (\n        <span\n          aria-hidden // because we provide the hidden aria-describedby\n          className=\"dnb-step-indicator__item-content__number\"\n        >\n          {number}.\n        </span>\n      )}\n      <span className=\"dnb-step-indicator__item-content__wrapper\">\n        <span className=\"dnb-step-indicator__item-content__text\">\n          {children}\n        </span>\n        {status && (\n          <span className=\"dnb-step-indicator__item-content__status\">\n            {status}\n          </span>\n        )}\n      </span>\n    </span>\n  )\n}\n\nexport default StepIndicatorItem\n"],"mappings":";;;;;;;;;;AAKA,OAAOA,KAAK,IAAeC,WAAW,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAE1E,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,YAAY,EACZC,0BAA0B,QACrB,+BAA+B;AACtC,OAAOC,eAAe,MAAM,qCAAqC;AACjE,OAAOC,MAAM,MAAuB,kBAAkB;AACtD,OAAOC,IAAI,MAAoB,cAAc;AAC7C,SAASC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,2BAA2B;AACzE,OAAOC,oBAAoB,MAAM,wBAAwB;AACzD,SAASC,yBAAyB,QAAQ,sBAAsB;AAyDhE,SAASC,iBAAiBA,CAAAC,IAAA,EAKC;EAAA,IALA;MACzBC,YAAY,EAAEC,oBAAoB,GAAG,MAAM;MAC3CC,QAAQ,EAAEC,gBAAgB,GAAG,KAAK;MAClCC,QAAQ,EAAEC,gBAAgB,GAAG;IAEP,CAAC,GAAAN,IAAA;IADpBO,WAAW,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAEd,MAAMC,KAA6B,GAAGvB,OAAO,CAAC,MAAM;IAClD,OAAAwB,aAAA;MACEV,YAAY,EAAEC,oBAAoB;MAClCC,QAAQ,EAAEC,gBAAgB;MAC1BC,QAAQ,EAAEC;IAAgB,GACvBC,WAAW;EAElB,CAAC,EAAE,CACDD,gBAAgB,EAChBF,gBAAgB,EAChBG,WAAW,EACXL,oBAAoB,CACrB,CAAC;EAEF,MAAMU,OAAO,GAAG1B,UAAU,CAACW,oBAAoB,CAAC;EAEhD,MAAMgB,cAAc,GAAG5B,WAAW,CAChC,CAAC;IAAE6B,KAAK;IAAEC,IAAI;IAAEC;EAAe,CAAC,KAAK;IACnC,MAAMC,MAAM,GAAG;MACbH,KAAK;MACLC,IAAI;MACJG,YAAY,EAAEF,cAAc;MAC5BG,WAAW,EAAEH;IACf,CAAC;IAED,MAAMI,WAAW,GAAG9B,0BAA0B,CAC5C;MACEsB,OAAO;MACPF,KAAK;MACLG;IACF,CAAC,EACD,UAAU,EACVI,MACF,CAAC;IAED,MAAMI,aAAa,GAAG/B,0BAA0B,CAC9CsB,OAAO,EACP,UAAU,EACVK,MACF,CAAC;IAED,IAAIG,WAAW,KAAK,KAAK,IAAIC,aAAa,KAAK,KAAK,EAAE;MACpD;IACF;IAEA,IAAIT,OAAO,CAACU,UAAU,KAAKN,cAAc,EAAE;MACzCJ,OAAO,CAACW,aAAa,CAACP,cAAc,CAAC;MACrC,IAAI,OAAOJ,OAAO,CAACY,aAAa,KAAK,UAAU,EAAE;QAC/CZ,OAAO,CAACY,aAAa,CAAC,CAAC;MACzB;MAEAlC,0BAA0B,CAACsB,OAAO,EAAE,WAAW,EAAEK,MAAM,CAAC;IAC1D;EACF,CAAC,EACD,CAACL,OAAO,EAAEF,KAAK,CACjB,CAAC;EAED,MAAM;IACJe,IAAI;IACJC,gBAAgB;IAChBJ,UAAU;IACVK,UAAU;IACVC,kBAAkB;IAClBC,YAAY;IACZC,cAAc;IACdC,UAAU;IACVC;EACF,CAAC,GAAGpB,OAAO;EAEX,MAAM;MACJI,cAAc;MAEdiB,KAAK;MACLC,UAAU;MACV/B,QAAQ;MACRE,QAAQ;MACR8B,MAAM;MACNlC,YAAY;MAEZmC,SAAS;MACTC;IAGF,CAAC,GAAG3B,KAAK;IADJ4B,UAAU,GAAA9B,wBAAA,CACXE,KAAK,EAAA6B,UAAA;EAETC,MAAM,CAACC,IAAI,CAACH,UAAU,CAAC,CAACI,OAAO,CAAEC,GAAG,IAAK;IACvC,IAAIjB,gBAAgB,CAACkB,QAAQ,CAACD,GAAG,CAAC,EAAE;MAClC,OAAOL,UAAU,CAACK,GAAG,CAAC;IACxB;EACF,CAAC,CAAC;EAEF,MAAME,qBAAqB,GACzBpB,IAAI,KAAK,OAAO,IAChBT,cAAc,IAAIM,UAAU,IAC5BM,kBAAkB,CAACgB,QAAQ,CAAC5B,cAAc,CAAC;EAE7C,MAAM8B,aAAa,GAAGrB,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,OAAO;EAE3D,IAAIsB,UAAU,GACZ5C,QAAQ,IAAKsB,IAAI,KAAK,QAAQ,IAAI,CAACoB,qBAAsB;EAE3D,MAAMG,SAAS,GAAGhC,cAAc,GAAGM,UAAU;EAE7C,MAAM2B,EAAE,GAAG,GAAGlB,UAAU,IAAI1C,YAAY,CAAC,CAAC,IAAI2B,cAAc,EAAE;EAC9D,MAAMkC,SAAS,GAAGlB,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CACxBmB,OAAO,CAAC,OAAO,EAAEC,MAAM,CAACpC,cAAc,GAAG,CAAC,CAAC,CAAC,CAC7CmC,OAAO,CAAC,QAAQ,EAAEC,MAAM,CAACzB,UAAU,CAAC,CAAC;EAExC,MAAM0B,SAAS,GAAGrC,cAAc,KAAKM,UAAU;EAE/C,IAAIgC,OAAO,GACTtE,KAAA,CAAAuE,aAAA,CAACC,eAAe;IACdC,MAAM,EAAEzC,cAAc,GAAG,CAAE;IAC3Ba,YAAY,EAAEA,YAAa;IAC3BM,MAAM,EAAEA;EAAO,GAEdF,KACc,CACC;EAEpB,MAAMyB,aAAa,GAAG;IACpBC,QAAQ,EAAEH,eAAe;IACzBF,OAAO;IACPhB,UAAU;IACV5B,KAAK;IACLE;EACF,CAAC;EAED,IAAI,OAAOwB,SAAS,KAAK,UAAU,EAAE;IACnCkB,OAAO,GAAGlB,SAAS,CAACsB,aAAa,CAAC;EACpC,CAAC,MAAM,IAAI,OAAO5B,cAAc,KAAK,UAAU,EAAE;IAC/CwB,OAAO,GAAGxB,cAAc,CAAC4B,aAAa,CAAC;EACzC;EAEA,MAAME,UAAU,GAAG,CAAC,CAA6B;EACjD,MAAMC,YAAY,GAAG;IACnBC,IAAI,EAAE,OAAO;IACb3B,MAAM;IACNlC,YAAY;IACZ,kBAAkB,EAAEgD;EACtB,CAAwB;EAExB,IAAII,SAAS,EAAE;IACbO,UAAU,CAAC,cAAc,CAAC,GAAG,MAAM;EACrC;EAEA,IAAIvD,QAAQ,EAAE;IACZwD,YAAY,CAACxD,QAAQ,GAAG,IAAI;EAC9B;EAEA,IAAIyC,aAAa,IAAI,CAACC,UAAU,EAAE;IAChCc,YAAY,CAACE,OAAO,GAAG,CAAC;MAAEjD;IAAa,CAAC,KACtCD,cAAc,CAAC;MACbC,KAAK;MACLC,IAAI,EAAEL,KAAK;MACXM;IACF,CAAC,CAAC;EACN;EAEA,IAAI,CAAC6C,YAAY,CAACE,OAAO,EAAE;IACzBF,YAAY,CAACP,OAAO,GAAG,MAAM;IAC7BO,YAAY,CAACG,IAAI,GAAG,EAAE;IACtBH,YAAY,CAACxB,QAAQ,GAAG4B,SAAS;IACjClB,UAAU,GAAG,IAAI;EACnB;EAEA,OACE/D,KAAA,CAAAuE,aAAA,OAAAW,QAAA,KACMN,UAAU;IACdO,SAAS,EAAE/E,UAAU,CACnB,0BAA0B,EAI1BwE,UAAU,CAACO,SAAS,EAHpBd,SAAS,IAAI,mCAAmC,EAChDN,UAAU,IAAI,oCAAoC,EAClDC,SAAS,IAAI,mCAEf;EAAE,IAEFhE,KAAA,CAAAuE,aAAA,CAACa,cAAc,EAAKP,YAAY,EAAGP,OAAwB,CAAC,EAC5DtE,KAAA,CAAAuE,aAAA;IAAMN,EAAE,EAAEA,EAAG;IAAC,mBAAW;IAACkB,SAAS,EAAC;EAAa,GAC9CjB,SACG,CACJ,CAAC;AAET;AAMA,OAAO,SAASkB,cAAcA,CAAAC,KAAA,EAON;EAAA,IAPO;MAC7BC,QAAQ;MACRH,SAAS;MACThC,MAAM;MACNlC,YAAY;MACZsE;IAEmB,CAAC,GAAAF,KAAA;IADjB3D,KAAK,GAAAF,wBAAA,CAAA6D,KAAA,EAAAG,UAAA;EAER,MAAMC,KAAiD,GAAG;IACxDC,IAAI,EAAE/E,QAAQ;IACdgF,KAAK,EAAE/E,SAAS;IAChBgF,IAAI,EAAElF;EACR,CAAC;EAED,IAAIyC,MAAM,EAAE;IACVzB,KAAK,CAACoD,IAAI,GACR9E,KAAA,CAAAuE,aAAA,CAAC9D,IAAI;MACHqE,IAAI,EAAEW,KAAK,CAACxE,YAAY,CAAC,IAAIwE,KAAK,CAACG,IAAK;MACxCT,SAAS,EAAC,kBAAkB;MAC5BU,IAAI,EAAC,QAAQ;MACbC,aAAa,EAAE;IAAM,CACtB,CACF;EACH;EAEA,OACE9F,KAAA,CAAAuE,aAAA,CAAC/D,MAAM,EAAA0E,QAAA;IACLC,SAAS,EAAE/E,UAAU,CACnB+E,SAAS,EACThC,MAAM,8EAC2ClC,YAAY,EAC/D,CAAE;IACF8E,IAAI;IACJC,OAAO;IACPC,OAAO,EAAC,WAAW;IACnBC,SAAS,EAAC,QAAQ;IAClBC,aAAa,EAAC,OAAO;IACrBZ,SAAS,EAAEA;EAAU,GACjB7D,KAAK,GAET1B,KAAA,CAAAuE,aAAA,CAAChE,eAAe,QAAE+E,QAA0B,CACtC,CAAC;AAEb;AAYA,OAAO,SAASd,eAAeA,CAAC;EAC9Bc,QAAQ;EACRb,MAAM;EACN5B,YAAY,GAAG/B,yBAAyB,CAAC+B,YAAY;EACrDM;AACoB,CAAC,EAAE;EACvB,OACEnD,KAAA,CAAAuE,aAAA;IAAMY,SAAS,EAAC;EAAkC,GAC/C,CAACtC,YAAY,IACZ7C,KAAA,CAAAuE,aAAA;IACE,mBAAW;IACXY,SAAS,EAAC;EAA0C,GAEnDV,MAAM,EAAC,GACJ,CACP,EACDzE,KAAA,CAAAuE,aAAA;IAAMY,SAAS,EAAC;EAA2C,GACzDnF,KAAA,CAAAuE,aAAA;IAAMY,SAAS,EAAC;EAAwC,GACrDG,QACG,CAAC,EACNnC,MAAM,IACLnD,KAAA,CAAAuE,aAAA;IAAMY,SAAS,EAAC;EAA0C,GACvDhC,MACG,CAEJ,CACF,CAAC;AAEX;AAEA,eAAepC,iBAAiB","ignoreList":[]}
+{"version":3,"file":"StepIndicatorItem.js","names":["React","useCallback","useContext","useMemo","classnames","dispatchCustomElementEvent","useId","Anchor","Icon","IconPrimary","FormStatus","WarnIcon","InfoIcon","ErrorIcon","StepIndicatorContext","stepIndicatorDefaultProps","Context","createSkeletonClass","StepIndicatorItem","_ref","_globalContext$formEl3","status_state","status_state_default","inactive","inactive_default","disabled","disabled_default","restOfProps","_objectWithoutProperties","_excluded","globalContext","props","_globalContext$formEl","_globalContext$formEl2","_objectSpread","formElement","context","onClickHandler","event","item","currentItemNum","params","current_step","currentStep","onClickItem","onClickGlobal","activeStep","setActiveStep","mode","countSteps","listOfReachedSteps","hide_numbers","on_item_render","step_title","no_animation","skeleton","title","is_current","status","on_render","on_click","hasPassedAndIsCurrent","includes","isNavigatable","isInactive","isVisited","id","ariaLabel","replace","String","isCurrent","element","createElement","StepItemWrapper","callbackProps","StepItem","attributes","itemParams","buttonParams","onClick","undefined","stateIcons","info","error","warn","_extends","className","icon","size","inheritColor","StepItemButton","shellSpace","top","state","variant","text","_ref2","children","innerRef","_excluded2","notClickable","type","noStyle","Fragment"],"sources":["../../../../src/components/step-indicator/StepIndicatorItem.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React, { HTMLProps, useCallback, useContext, useMemo } from 'react'\n\nimport classnames from 'classnames'\nimport { dispatchCustomElementEvent } from '../../shared/component-helper'\nimport useId from '../../shared/helpers/useId'\nimport Anchor, { AnchorAllProps } from '../anchor/Anchor'\nimport Icon, { IconIcon } from '../icon/Icon'\nimport IconPrimary from '../icon/IconPrimary'\nimport FormStatus, {\n  WarnIcon,\n  InfoIcon,\n  ErrorIcon,\n} from '../form-status/FormStatus'\nimport StepIndicatorContext from './StepIndicatorContext'\nimport { stepIndicatorDefaultProps } from './StepIndicatorProps'\nimport {\n  StepIndicatorMouseEvent,\n  StepIndicatorRenderCallback,\n} from './StepIndicator'\nimport Context from '../../shared/Context'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\n\nexport type StepIndicatorStatusState = 'warn' | 'info' | 'error'\nexport type StepIndicatorItemProps = Omit<\n  React.HTMLProps<HTMLElement>,\n  'title' | 'data'\n> & {\n  title: string | React.ReactNode\n  /**\n   * 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.\n   */\n  is_current?: boolean\n  /**\n   * If set to true, this item step will be handled as an inactive step and will not be clickable.\n   * Defaults to `false`\n   */\n  inactive?: boolean\n  /**\n   * If set to true, this item step will not be clickable. Same as `inactive`, but will also add the `aria-disabled=\"true\"` .\n   * Defaults to false.\n   */\n  disabled?: boolean\n  /**\n   * Is used to set the status text.\n   */\n  status?: string | React.ReactNode\n  /**\n   * Used to set the status state to be either `info`, `error` or `warn`.\n   * Defaults to `warn`.\n   */\n  status_state?: StepIndicatorStatusState\n  /**\n   * Callback function to manipulate or wrap the step item. Has to return a React Node. You receive an object `{ StepItem, element, attributes, props, context }`.\n   * @deprecated no longer does anything other than the `title` prop\n   */\n  on_render?: ({\n    StepItem,\n    element,\n    attributes,\n    props,\n    context,\n  }: StepIndicatorRenderCallback) => React.ReactNode\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 }`.\n   */\n  on_click?: ({\n    event,\n    item,\n    current_step,\n    currentStep,\n  }: StepIndicatorMouseEvent) => void\n  currentItemNum: number\n}\n\nfunction StepIndicatorItem({\n  status_state: status_state_default = 'warn',\n  inactive: inactive_default = false,\n  disabled: disabled_default = false,\n  ...restOfProps\n}: StepIndicatorItemProps) {\n  const globalContext = React.useContext(Context)\n\n  const props: StepIndicatorItemProps = useMemo(() => {\n    return {\n      status_state: status_state_default,\n      inactive: inactive_default,\n      disabled: globalContext?.formElement?.disabled ?? disabled_default,\n      ...restOfProps,\n    }\n  }, [\n    disabled_default,\n    inactive_default,\n    restOfProps,\n    status_state_default,\n    globalContext?.formElement?.disabled,\n  ])\n\n  const context = useContext(StepIndicatorContext)\n\n  const onClickHandler = useCallback(\n    ({ event, item, currentItemNum }) => {\n      const params = {\n        event,\n        item,\n        current_step: currentItemNum,\n        currentStep: currentItemNum,\n      }\n\n      const onClickItem = dispatchCustomElementEvent(\n        {\n          context,\n          props,\n          onClickHandler,\n        },\n        'on_click',\n        params\n      )\n\n      const onClickGlobal = dispatchCustomElementEvent(\n        context,\n        'on_click',\n        params\n      )\n\n      if (onClickItem === false || onClickGlobal === false) {\n        return // stop here\n      }\n\n      if (context.activeStep !== currentItemNum) {\n        context.setActiveStep(currentItemNum)\n        dispatchCustomElementEvent(context, 'on_change', params)\n      }\n    },\n    [context, props]\n  )\n\n  const {\n    mode,\n    activeStep,\n    countSteps,\n    listOfReachedSteps,\n    hide_numbers = stepIndicatorDefaultProps.hide_numbers,\n    on_item_render,\n    step_title,\n    no_animation,\n    skeleton,\n  } = context\n\n  const {\n    currentItemNum,\n\n    title,\n    is_current, // eslint-disable-line\n    inactive,\n    disabled,\n    status,\n    status_state = 'warn',\n\n    on_render,\n    on_click, // eslint-disable-line\n  } = props\n\n  const hasPassedAndIsCurrent =\n    mode === 'loose' ||\n    currentItemNum <= activeStep ||\n    listOfReachedSteps.includes(currentItemNum)\n\n  const isNavigatable = mode === 'strict' || mode === 'loose'\n\n  let isInactive =\n    inactive || disabled || (mode === 'strict' && !hasPassedAndIsCurrent)\n\n  const isVisited = currentItemNum < activeStep\n\n  const id = `${useId()}-${currentItemNum}`\n  const ariaLabel = step_title\n    ?.replace('%step', String(currentItemNum + 1))\n    .replace('%count', String(countSteps))\n\n  const isCurrent = currentItemNum === activeStep\n\n  let element = (\n    <StepItemWrapper>{title}</StepItemWrapper>\n  ) as React.ReactNode\n\n  // should be entirely removed in v11 as well as any other functionality associated with `on_render` and `on_item_render`\n  const callbackProps = {\n    StepItem: StepItemWrapper,\n    element,\n    attributes: {}, // deprecated in v11\n    props,\n    context,\n  }\n\n  if (typeof on_render === 'function') {\n    element = on_render(callbackProps)\n  } else if (typeof on_item_render === 'function') {\n    element = on_item_render(callbackProps)\n  }\n\n  const itemParams = {} as HTMLProps<HTMLLIElement>\n  const buttonParams = {\n    status,\n    status_state,\n    'aria-describedby': id,\n  } as StepItemButtonProps\n\n  if (isCurrent) {\n    itemParams['aria-current'] = 'step'\n  }\n\n  if (disabled) {\n    buttonParams.disabled = true\n  }\n\n  if (isNavigatable && !isInactive) {\n    buttonParams.onClick = (event: never) =>\n      onClickHandler({\n        event,\n        item: props,\n        currentItemNum,\n      })\n  }\n\n  if (!buttonParams.onClick) {\n    buttonParams.onClick = undefined\n    isInactive = true\n  }\n\n  const stateIcons: Record<StepIndicatorStatusState, IconIcon> = {\n    info: InfoIcon,\n    error: ErrorIcon,\n    warn: WarnIcon,\n  }\n\n  return (\n    <li\n      {...itemParams}\n      className={classnames(\n        'dnb-step-indicator__item',\n        isCurrent && 'dnb-step-indicator__item--current',\n        isInactive && 'dnb-step-indicator__item--inactive',\n        isVisited && 'dnb-step-indicator__item--visited',\n        itemParams.className\n      )}\n    >\n      <div\n        className={classnames(\n          'dnb-step-indicator__item__wrapper',\n          !status &&\n            isVisited &&\n            'dnb-step-indicator__item__wrapper--check'\n        )}\n      >\n        <span\n          className={classnames(\n            'dnb-step-indicator__item__bullet',\n            isCurrent\n              ? 'dnb-step-indicator__item__bullet--current'\n              : !status &&\n                  (isVisited\n                    ? 'dnb-step-indicator__item__bullet--check'\n                    : 'dnb-step-indicator__item__bullet--empty'),\n            createSkeletonClass('shape', skeleton)\n          )}\n        >\n          {status && !isCurrent ? (\n            <Icon\n              icon={stateIcons[status_state] || stateIcons.warn}\n              className=\"dnb-step-indicator__item__icon\"\n              size=\"medium\"\n              inheritColor={false}\n            />\n          ) : (\n            <IconPrimary\n              icon=\"check\"\n              className={classnames(\n                'dnb-step-indicator__item__icon',\n                !isVisited && 'dnb-step-indicator__item__icon--hidden'\n              )}\n              size=\"auto\"\n            />\n          )}\n        </span>\n        <div\n          className={classnames(\n            'dnb-step-indicator__item-content',\n            createSkeletonClass('font', skeleton)\n          )}\n        >\n          {!hide_numbers && (\n            <span className=\"dnb-step-indicator__item-content__number\">\n              {`${currentItemNum + 1}.`}\n            </span>\n          )}\n          <div className=\"dnb-step-indicator__item-content__wrapper\">\n            <StepItemButton\n              {...buttonParams}\n              className=\"dnb-step-indicator__item-content__text\"\n            >\n              {element}\n            </StepItemButton>\n            <FormStatus\n              shellSpace={{ top: '1rem' }}\n              no_animation={no_animation}\n              state={status && status_state}\n              variant=\"outlined\"\n              className=\"dnb-step-indicator__item-content__status\"\n              text={status}\n            />\n          </div>\n        </div>\n      </div>\n      <span id={id} aria-hidden className=\"dnb-sr-only\">\n        {ariaLabel}\n      </span>\n    </li>\n  )\n}\n\nexport type StepItemButtonProps = AnchorAllProps &\n  Pick<StepIndicatorItemProps, 'status' | 'status_state'>\n\nexport function StepItemButton({\n  children,\n  className,\n  status,\n  status_state = 'warn',\n  innerRef,\n  ...props\n}: StepItemButtonProps) {\n  const notClickable = !props.onClick\n\n  return (\n    <Anchor\n      element={notClickable ? 'span' : 'button'}\n      type={notClickable ? undefined : 'button'}\n      className={classnames(\n        className,\n        'dnb-step-indicator__button',\n        status &&\n          `dnb-step-indicator__button--has-status dnb-step-indicator__button--${status_state}`\n      )}\n      noStyle={notClickable}\n      innerRef={innerRef}\n      {...props}\n    >\n      {children}\n    </Anchor>\n  )\n}\n\nexport type StepItemWrapperProps = React.HTMLProps<HTMLElement> & {\n  /** Content inside the step button */\n  children?: React.ReactNode\n  /** @deprecated can only change the render of content inside the button */\n  number?: number\n  /** @deprecated can only hide numbers in main component */\n  hide_numbers?: boolean\n  /** @deprecated can only change the render of content inside the button */\n  status?: string | React.ReactNode\n}\n\nexport function StepItemWrapper({ children }: StepItemWrapperProps) {\n  return <>{children}</>\n}\n\nexport default StepIndicatorItem\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,48 +1,46 @@
 "use client";
 
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["mode", "filterAttributes", "skeleton", "data", "countSteps", "sidebar_id"];
 import React, { useContext } from 'react';
 import classnames from 'classnames';
-import { combineLabelledBy, validateDOMAttributes } from '../../shared/component-helper';
-import { createSpacingClasses } from '../space/SpacingHelper';
+import Space from '../space/Space';
 import { skeletonDOMAttributes, createSkeletonClass } from '../skeleton/SkeletonHelper';
+import HeightAnimation from '../height-animation/HeightAnimation';
 import StepIndicatorItem from './StepIndicatorItem';
 import StepIndicatorContext from './StepIndicatorContext';
 function StepIndicatorList() {
-  const context = useContext(StepIndicatorContext);
   const {
-      mode,
-      filterAttributes,
-      skeleton,
-      data,
-      countSteps,
-      sidebar_id
-    } = context,
-    rest = _objectWithoutProperties(context, _excluded);
-  const params = {
-    sidebar_id,
-    className: classnames('dnb-step-indicator', createSkeletonClass('font', skeleton), context.className, context.hasSidebar && createSpacingClasses(context))
-  };
-  const listParams = {
-    className: 'dnb-step-indicator__list'
-  };
-  const Element = mode === 'static' || !context.hasSidebar ? 'div' : 'nav';
-  const ariaLabelledbyValue = combineLabelledBy(rest, params.sidebar_id);
-  if (Element === 'nav') {
-    params['aria-labelledby'] = ariaLabelledbyValue;
-  } else {
-    listParams['aria-labelledby'] = ariaLabelledbyValue;
-  }
-  Object.keys(params).forEach(key => {
-    if (filterAttributes.includes(key)) {
-      delete params[key];
-    }
-  });
+    mode,
+    skeleton,
+    openState,
+    openHandler,
+    closeHandler,
+    countSteps,
+    data,
+    no_animation
+  } = useContext(StepIndicatorContext);
+  const Element = mode === 'static' ? 'div' : 'nav';
+  const params = {};
   skeletonDOMAttributes(params, skeleton);
-  validateDOMAttributes(context, params);
-  return React.createElement(Element, params, countSteps > 0 && React.createElement("ol", listParams, data.map((itemData, i) => {
+  return React.createElement(HeightAnimation, {
+    animate: !no_animation,
+    open: openState,
+    onOpen: state => {
+      if (state) {
+        openHandler();
+      } else {
+        closeHandler();
+      }
+    }
+  }, React.createElement(Space, {
+    innerSpace: {
+      top: 'small'
+    }
+  }, React.createElement(Element, _extends({}, params, {
+    className: classnames('dnb-step-indicator', createSkeletonClass('font', skeleton))
+  }), countSteps > 0 && React.createElement("ol", {
+    className: "dnb-step-indicator__list"
+  }, data.map((itemData, i) => {
     const item = typeof itemData === 'string' ? {
       title: itemData
     } : itemData;
@@ -50,7 +48,7 @@ function StepIndicatorList() {
       key: i,
       currentItemNum: i
     }, item));
-  })));
+  })))));
 }
 export default StepIndicatorList;
 //# sourceMappingURL=StepIndicatorList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepIndicatorList.js","names":["React","useContext","classnames","combineLabelledBy","validateDOMAttributes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","StepIndicatorItem","StepIndicatorContext","StepIndicatorList","context","mode","filterAttributes","skeleton","data","countSteps","sidebar_id","rest","_objectWithoutProperties","_excluded","params","className","hasSidebar","listParams","Element","ariaLabelledbyValue","Object","keys","forEach","key","includes","createElement","map","itemData","i","item","title","_extends","currentItemNum"],"sources":["../../../../src/components/step-indicator/StepIndicatorList.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport {\n  combineLabelledBy,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport StepIndicatorItem from './StepIndicatorItem'\nimport StepIndicatorContext from './StepIndicatorContext'\n\nfunction StepIndicatorList() {\n  const context = useContext(StepIndicatorContext)\n\n  const {\n    mode,\n    filterAttributes,\n    skeleton,\n    data,\n    countSteps,\n    sidebar_id,\n    ...rest\n  } = context\n\n  const params = {\n    sidebar_id,\n    className: classnames(\n      'dnb-step-indicator',\n      createSkeletonClass('font', skeleton),\n      context.hasSidebar && createSpacingClasses(context),\n      context.className\n    ),\n  }\n\n  const listParams = {\n    className: 'dnb-step-indicator__list',\n  }\n\n  const Element = mode === 'static' || !context.hasSidebar ? 'div' : 'nav'\n\n  const ariaLabelledbyValue = combineLabelledBy(rest, params.sidebar_id)\n\n  if (Element === 'nav') {\n    params['aria-labelledby'] = ariaLabelledbyValue\n  } else {\n    listParams['aria-labelledby'] = ariaLabelledbyValue\n  }\n\n  Object.keys(params).forEach((key) => {\n    if (filterAttributes.includes(key)) {\n      delete params[key]\n    }\n  })\n\n  skeletonDOMAttributes(params, skeleton)\n\n  validateDOMAttributes(context, params)\n\n  return (\n    <Element {...params}>\n      {countSteps > 0 && (\n        <ol {...listParams}>\n          {data.map((itemData, i) => {\n            const item =\n              typeof itemData === 'string' ? { title: itemData } : itemData\n\n            return (\n              <StepIndicatorItem key={i} currentItemNum={i} {...item} />\n            )\n          })}\n        </ol>\n      )}\n    </Element>\n  )\n}\n\nexport default StepIndicatorList\n"],"mappings":";;;;;AAKA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,iBAAiB,EACjBC,qBAAqB,QAChB,+BAA+B;AACtC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SACEC,qBAAqB,EACrBC,mBAAmB,QACd,4BAA4B;AACnC,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzD,SAASC,iBAAiBA,CAAA,EAAG;EAC3B,MAAMC,OAAO,GAAGV,UAAU,CAACQ,oBAAoB,CAAC;EAEhD,MAAM;MACJG,IAAI;MACJC,gBAAgB;MAChBC,QAAQ;MACRC,IAAI;MACJC,UAAU;MACVC;IAEF,CAAC,GAAGN,OAAO;IADNO,IAAI,GAAAC,wBAAA,CACLR,OAAO,EAAAS,SAAA;EAEX,MAAMC,MAAM,GAAG;IACbJ,UAAU;IACVK,SAAS,EAAEpB,UAAU,CACnB,oBAAoB,EACpBK,mBAAmB,CAAC,MAAM,EAAEO,QAAQ,CAAC,EAErCH,OAAO,CAACW,SAAS,EADjBX,OAAO,CAACY,UAAU,IAAIlB,oBAAoB,CAACM,OAAO,CAEpD;EACF,CAAC;EAED,MAAMa,UAAU,GAAG;IACjBF,SAAS,EAAE;EACb,CAAC;EAED,MAAMG,OAAO,GAAGb,IAAI,KAAK,QAAQ,IAAI,CAACD,OAAO,CAACY,UAAU,GAAG,KAAK,GAAG,KAAK;EAExE,MAAMG,mBAAmB,GAAGvB,iBAAiB,CAACe,IAAI,EAAEG,MAAM,CAACJ,UAAU,CAAC;EAEtE,IAAIQ,OAAO,KAAK,KAAK,EAAE;IACrBJ,MAAM,CAAC,iBAAiB,CAAC,GAAGK,mBAAmB;EACjD,CAAC,MAAM;IACLF,UAAU,CAAC,iBAAiB,CAAC,GAAGE,mBAAmB;EACrD;EAEAC,MAAM,CAACC,IAAI,CAACP,MAAM,CAAC,CAACQ,OAAO,CAAEC,GAAG,IAAK;IACnC,IAAIjB,gBAAgB,CAACkB,QAAQ,CAACD,GAAG,CAAC,EAAE;MAClC,OAAOT,MAAM,CAACS,GAAG,CAAC;IACpB;EACF,CAAC,CAAC;EAEFxB,qBAAqB,CAACe,MAAM,EAAEP,QAAQ,CAAC;EAEvCV,qBAAqB,CAACO,OAAO,EAAEU,MAAM,CAAC;EAEtC,OACErB,KAAA,CAAAgC,aAAA,CAACP,OAAO,EAAKJ,MAAM,EAChBL,UAAU,GAAG,CAAC,IACbhB,KAAA,CAAAgC,aAAA,OAAQR,UAAU,EACfT,IAAI,CAACkB,GAAG,CAAC,CAACC,QAAQ,EAAEC,CAAC,KAAK;IACzB,MAAMC,IAAI,GACR,OAAOF,QAAQ,KAAK,QAAQ,GAAG;MAAEG,KAAK,EAAEH;IAAS,CAAC,GAAGA,QAAQ;IAE/D,OACElC,KAAA,CAAAgC,aAAA,CAACxB,iBAAiB,EAAA8B,QAAA;MAACR,GAAG,EAAEK,CAAE;MAACI,cAAc,EAAEJ;IAAE,GAAKC,IAAI,CAAG,CAAC;EAE9D,CAAC,CACC,CAEC,CAAC;AAEd;AAEA,eAAe1B,iBAAiB","ignoreList":[]}
+{"version":3,"file":"StepIndicatorList.js","names":["React","useContext","classnames","Space","skeletonDOMAttributes","createSkeletonClass","HeightAnimation","StepIndicatorItem","StepIndicatorContext","StepIndicatorList","mode","skeleton","openState","openHandler","closeHandler","countSteps","data","no_animation","Element","params","createElement","animate","open","onOpen","state","innerSpace","top","_extends","className","map","itemData","i","item","title","key","currentItemNum"],"sources":["../../../../src/components/step-indicator/StepIndicatorList.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport Space from '../space/Space'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport StepIndicatorItem from './StepIndicatorItem'\nimport StepIndicatorContext from './StepIndicatorContext'\n\nfunction StepIndicatorList() {\n  const {\n    mode,\n    skeleton,\n    openState,\n    openHandler,\n    closeHandler,\n    countSteps,\n    data,\n    no_animation,\n  } = useContext(StepIndicatorContext)\n  const Element = mode === 'static' ? 'div' : 'nav'\n\n  const params = {}\n  skeletonDOMAttributes(params, skeleton)\n  return (\n    <HeightAnimation\n      animate={!no_animation}\n      open={openState}\n      onOpen={(state) => {\n        if (state) {\n          openHandler()\n        } else {\n          closeHandler()\n        }\n      }}\n    >\n      <Space innerSpace={{ top: 'small' }}>\n        <Element\n          {...params}\n          className={classnames(\n            'dnb-step-indicator',\n            createSkeletonClass('font', skeleton)\n          )}\n        >\n          {countSteps > 0 && (\n            <ol className=\"dnb-step-indicator__list\">\n              {data.map((itemData, i) => {\n                const item =\n                  typeof itemData === 'string'\n                    ? { title: itemData }\n                    : itemData\n\n                return (\n                  <StepIndicatorItem\n                    key={i}\n                    currentItemNum={i}\n                    {...item}\n                  />\n                )\n              })}\n            </ol>\n          )}\n        </Element>\n      </Space>\n    </HeightAnimation>\n  )\n}\n\nexport default StepIndicatorList\n"],"mappings":";;;AAKA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,gBAAgB;AAClC,SACEC,qBAAqB,EACrBC,mBAAmB,QACd,4BAA4B;AACnC,OAAOC,eAAe,MAAM,qCAAqC;AACjE,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzD,SAASC,iBAAiBA,CAAA,EAAG;EAC3B,MAAM;IACJC,IAAI;IACJC,QAAQ;IACRC,SAAS;IACTC,WAAW;IACXC,YAAY;IACZC,UAAU;IACVC,IAAI;IACJC;EACF,CAAC,GAAGhB,UAAU,CAACO,oBAAoB,CAAC;EACpC,MAAMU,OAAO,GAAGR,IAAI,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAK;EAEjD,MAAMS,MAAM,GAAG,CAAC,CAAC;EACjBf,qBAAqB,CAACe,MAAM,EAAER,QAAQ,CAAC;EACvC,OACEX,KAAA,CAAAoB,aAAA,CAACd,eAAe;IACde,OAAO,EAAE,CAACJ,YAAa;IACvBK,IAAI,EAAEV,SAAU;IAChBW,MAAM,EAAGC,KAAK,IAAK;MACjB,IAAIA,KAAK,EAAE;QACTX,WAAW,CAAC,CAAC;MACf,CAAC,MAAM;QACLC,YAAY,CAAC,CAAC;MAChB;IACF;EAAE,GAEFd,KAAA,CAAAoB,aAAA,CAACjB,KAAK;IAACsB,UAAU,EAAE;MAAEC,GAAG,EAAE;IAAQ;EAAE,GAClC1B,KAAA,CAAAoB,aAAA,CAACF,OAAO,EAAAS,QAAA,KACFR,MAAM;IACVS,SAAS,EAAE1B,UAAU,CACnB,oBAAoB,EACpBG,mBAAmB,CAAC,MAAM,EAAEM,QAAQ,CACtC;EAAE,IAEDI,UAAU,GAAG,CAAC,IACbf,KAAA,CAAAoB,aAAA;IAAIQ,SAAS,EAAC;EAA0B,GACrCZ,IAAI,CAACa,GAAG,CAAC,CAACC,QAAQ,EAAEC,CAAC,KAAK;IACzB,MAAMC,IAAI,GACR,OAAOF,QAAQ,KAAK,QAAQ,GACxB;MAAEG,KAAK,EAAEH;IAAS,CAAC,GACnBA,QAAQ;IAEd,OACE9B,KAAA,CAAAoB,aAAA,CAACb,iBAAiB,EAAAoB,QAAA;MAChBO,GAAG,EAAEH,CAAE;MACPI,cAAc,EAAEJ;IAAE,GACdC,IAAI,CACT,CAAC;EAEN,CAAC,CACC,CAEC,CACJ,CACQ,CAAC;AAEtB;AAEA,eAAevB,iBAAiB","ignoreList":[]}

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

@@ -3,6 +3,7 @@ export const stepIndicatorDefaultProps = {
   skeleton: false,
   current_step: 0,
   hide_numbers: false,
-  no_animation: false
+  no_animation: false,
+  expandedInitially: false
 };
 //# sourceMappingURL=StepIndicatorProps.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepIndicatorProps.js","names":["stepIndicatorDefaultProps","data","skeleton","current_step","hide_numbers","no_animation"],"sources":["../../../../src/components/step-indicator/StepIndicatorProps.ts"],"sourcesContent":["import { StepIndicatorData, StepIndicatorProps } from './StepIndicator'\n\nexport const stepIndicatorDefaultProps: Omit<\n  StepIndicatorProps,\n  'sidebar_id' | 'mode'\n> = {\n  data: [] as StepIndicatorData,\n  skeleton: false,\n  current_step: 0,\n  hide_numbers: false,\n  no_animation: false,\n}\n"],"mappings":"AAEA,OAAO,MAAMA,yBAGZ,GAAG;EACFC,IAAI,EAAE,EAAuB;EAC7BC,QAAQ,EAAE,KAAK;EACfC,YAAY,EAAE,CAAC;EACfC,YAAY,EAAE,KAAK;EACnBC,YAAY,EAAE;AAChB,CAAC","ignoreList":[]}
+{"version":3,"file":"StepIndicatorProps.js","names":["stepIndicatorDefaultProps","data","skeleton","current_step","hide_numbers","no_animation","expandedInitially"],"sources":["../../../../src/components/step-indicator/StepIndicatorProps.ts"],"sourcesContent":["import { StepIndicatorData, StepIndicatorProps } from './StepIndicator'\n\nexport const stepIndicatorDefaultProps: Omit<\n  StepIndicatorProps,\n  'sidebar_id' | 'mode'\n> = {\n  data: [] as StepIndicatorData,\n  skeleton: false,\n  current_step: 0,\n  hide_numbers: false,\n  no_animation: false,\n  expandedInitially: false,\n}\n"],"mappings":"AAEA,OAAO,MAAMA,yBAGZ,GAAG;EACFC,IAAI,EAAE,EAAuB;EAC7BC,QAAQ,EAAE,KAAK;EACfC,YAAY,EAAE,CAAC;EACfC,YAAY,EAAE,KAAK;EACnBC,YAAY,EAAE,KAAK;EACnBC,iBAAiB,EAAE;AACrB,CAAC","ignoreList":[]}

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

@@ -1,30 +1,30 @@
-/**
- * Web StepIndicator Component
- *
- */
 import React from 'react';
 import { SpacingProps } from '../../shared/types';
 import { StepIndicatorData, StepIndicatorMode, StepIndicatorProps } from '../StepIndicator';
 export type StepIndicatorSidebarProps = SpacingProps & Pick<StepIndicatorProps, 'current_step' | 'skeleton'> & Omit<React.HTMLProps<HTMLAnchorElement>, 'ref' | 'data'> & {
     /**
      * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
+     * @deprecated StepIndicator.Sidebar variant is no longer supported
      */
     data?: StepIndicatorData;
     /**
      * 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.
+     * @deprecated StepIndicator.Sidebar variant is no longer supported
      */
     mode?: StepIndicatorMode;
     /**
      * Stuff
+     * @deprecated StepIndicator.Sidebar variant is no longer supported
      */
     showInitialData?: boolean;
     /**
      * <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.
+     * @deprecated StepIndicator.Sidebar variant is no longer supported
      */
     sidebar_id: string;
 };
-declare function StepIndicatorSidebar({ current_step, data, ...restOfProps }: StepIndicatorSidebarProps): import("react/jsx-runtime").JSX.Element;
-declare namespace StepIndicatorSidebar {
-    var _supportsSpacingProps: boolean;
-}
+/**
+ * @deprecated StepIndicatorSidebar variant is no longer supported
+ */
+declare function StepIndicatorSidebar(props: StepIndicatorSidebarProps): import("react/jsx-runtime").JSX.Element;
 export default StepIndicatorSidebar;

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

@@ -1,61 +1,9 @@
-"use client";
-
-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 _StepIndicatorList;
-const _excluded = ["current_step", "data"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import classnames from 'classnames';
-import { extendPropsWithContext } from '../../shared/component-helper';
-import Context from '../../shared/Context';
-import StepIndicatorList from './StepIndicatorList';
-import { stepIndicatorDefaultProps } from './StepIndicatorProps';
-import { StepIndicatorProvider } from './StepIndicatorContext';
-import { createSpacingClasses } from '../space/SpacingHelper';
-function StepIndicatorSidebar(_ref) {
-  let {
-      current_step = stepIndicatorDefaultProps.current_step,
-      data = stepIndicatorDefaultProps.data
-    } = _ref,
-    restOfProps = _objectWithoutProperties(_ref, _excluded);
-  const props = useMemo(() => {
-    return _objectSpread({
-      current_step,
-      data
-    }, restOfProps);
-  }, [current_step, data, restOfProps]);
-  const context = useContext(Context);
-  const [showInitialData, setShowInitialData] = useState(true);
-  const hasSkeletonData = useRef(null);
-  useEffect(() => {
-    if (!props.showInitialData) {
-      setShowInitialData(false);
-    }
-  }, [props.showInitialData]);
-  const getContextAndProps = useCallback(() => {
-    var _providerProps$data;
-    const providerProps = extendPropsWithContext(props, stepIndicatorDefaultProps, {
-      skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-    }, context.getTranslation(context).StepIndicator, context === null || context === void 0 ? void 0 : context.StepIndicator);
-    if (!(((_providerProps$data = providerProps.data) === null || _providerProps$data === void 0 ? void 0 : _providerProps$data.length) > 0)) {
-      providerProps.data = ['Loading...'];
-      providerProps.skeleton = true;
-      hasSkeletonData.current = true;
-    }
-    return providerProps;
-  }, [context, props]);
-  const providerProps = showInitialData ? getContextAndProps() : null;
-  return React.createElement("div", {
-    id: 'sidebar__' + props.sidebar_id,
-    className: classnames("dnb-step-indicator-wrapper dnb-step-indicator__sidebar", createSpacingClasses(props), hasSkeletonData.current && (providerProps === null || providerProps === void 0 ? void 0 : providerProps.skeleton) && 'dnb-step-indicator__sidebar--ssr-skeleton')
-  }, providerProps && React.createElement(StepIndicatorProvider, _extends({
-    isSidebar: true,
-    sidebar_id: props.sidebar_id
-  }, providerProps), _StepIndicatorList || (_StepIndicatorList = React.createElement(StepIndicatorList, null))));
+var _div;
+import React from 'react';
+function StepIndicatorSidebar(props) {
+  return _div || (_div = React.createElement("div", {
+    className: "dnb-step-indicator__sidebar"
+  }));
 }
-StepIndicatorSidebar._supportsSpacingProps = true;
 export default StepIndicatorSidebar;
 //# sourceMappingURL=StepIndicatorSidebar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepIndicatorSidebar.js","names":["React","useCallback","useContext","useEffect","useMemo","useRef","useState","classnames","extendPropsWithContext","Context","StepIndicatorList","stepIndicatorDefaultProps","StepIndicatorProvider","createSpacingClasses","StepIndicatorSidebar","_ref","current_step","data","restOfProps","_objectWithoutProperties","_excluded","props","_objectSpread","context","showInitialData","setShowInitialData","hasSkeletonData","getContextAndProps","_providerProps$data","providerProps","skeleton","getTranslation","StepIndicator","length","current","createElement","id","sidebar_id","className","_extends","isSidebar","_StepIndicatorList","_supportsSpacingProps"],"sources":["../../../../src/components/step-indicator/StepIndicatorSidebar.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport classnames from 'classnames'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport Context from '../../shared/Context'\nimport StepIndicatorList from './StepIndicatorList'\nimport { stepIndicatorDefaultProps } from './StepIndicatorProps'\nimport { StepIndicatorProvider } from './StepIndicatorContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { SpacingProps } from '../../shared/types'\nimport {\n  StepIndicatorData,\n  StepIndicatorMode,\n  StepIndicatorProps,\n} from '../StepIndicator'\n\nexport type StepIndicatorSidebarProps = SpacingProps &\n  Pick<StepIndicatorProps, 'current_step' | 'skeleton'> &\n  Omit<React.HTMLProps<HTMLAnchorElement>, 'ref' | 'data'> & {\n    /**\n     * 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     * 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     * Stuff\n     */\n    showInitialData?: boolean\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\nfunction StepIndicatorSidebar({\n  current_step = stepIndicatorDefaultProps.current_step,\n  data = stepIndicatorDefaultProps.data,\n  ...restOfProps\n}: StepIndicatorSidebarProps) {\n  const props = useMemo(() => {\n    return { current_step, data, ...restOfProps }\n  }, [current_step, data, restOfProps])\n\n  const context = useContext(Context)\n\n  const [showInitialData, setShowInitialData] = useState<boolean>(true)\n\n  const hasSkeletonData = useRef<boolean>(null)\n\n  useEffect(() => {\n    if (!props.showInitialData) {\n      setShowInitialData(false)\n    }\n  }, [props.showInitialData])\n\n  const getContextAndProps = useCallback(() => {\n    const providerProps = extendPropsWithContext(\n      props,\n      stepIndicatorDefaultProps,\n      { skeleton: context?.skeleton },\n      context.getTranslation(context).StepIndicator,\n      context?.StepIndicator\n    )\n\n    if (!(providerProps.data?.length > 0)) {\n      providerProps.data = ['Loading...']\n      providerProps.skeleton = true\n      hasSkeletonData.current = true\n    }\n\n    return providerProps\n  }, [context, props])\n\n  const providerProps = showInitialData ? getContextAndProps() : null\n\n  return (\n    <div\n      id={'sidebar__' + props.sidebar_id}\n      className={classnames(\n        'dnb-step-indicator-wrapper',\n        'dnb-step-indicator__sidebar',\n        hasSkeletonData.current &&\n          providerProps?.skeleton &&\n          'dnb-step-indicator__sidebar--ssr-skeleton',\n        createSpacingClasses(props)\n      )}\n    >\n      {providerProps && (\n        <StepIndicatorProvider\n          isSidebar\n          sidebar_id={props.sidebar_id}\n          {...providerProps}\n        >\n          <StepIndicatorList />\n        </StepIndicatorProvider>\n      )}\n    </div>\n  )\n}\n\nStepIndicatorSidebar._supportsSpacingProps = true\n\nexport default StepIndicatorSidebar\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"StepIndicatorSidebar.js","names":["React","StepIndicatorSidebar","props","_div","createElement","className"],"sources":["../../../../src/components/step-indicator/StepIndicatorSidebar.tsx"],"sourcesContent":["import React from 'react'\nimport { SpacingProps } from '../../shared/types'\nimport {\n  StepIndicatorData,\n  StepIndicatorMode,\n  StepIndicatorProps,\n} from '../StepIndicator'\n\nexport type StepIndicatorSidebarProps = SpacingProps &\n  Pick<StepIndicatorProps, 'current_step' | 'skeleton'> &\n  Omit<React.HTMLProps<HTMLAnchorElement>, 'ref' | 'data'> & {\n    /**\n     * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.\n     * @deprecated StepIndicator.Sidebar variant is no longer supported\n     */\n    data?: StepIndicatorData\n    /**\n     * 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     * @deprecated StepIndicator.Sidebar variant is no longer supported\n     */\n    mode?: StepIndicatorMode\n    /**\n     * Stuff\n     * @deprecated StepIndicator.Sidebar variant is no longer supported\n     */\n    showInitialData?: boolean\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     * @deprecated StepIndicator.Sidebar variant is no longer supported\n     */\n    sidebar_id: string\n  }\n\n/**\n * @deprecated StepIndicatorSidebar variant is no longer supported\n */\nfunction StepIndicatorSidebar(props: StepIndicatorSidebarProps) {\n  return <div className=\"dnb-step-indicator__sidebar\"></div>\n}\n\nexport default StepIndicatorSidebar\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAoCzB,SAASC,oBAAoBA,CAACC,KAAgC,EAAE;EAC9D,OAAAC,IAAA,KAAAA,IAAA,GAAOH,KAAA,CAAAI,aAAA;IAAKC,SAAS,EAAC;EAA6B,CAAM,CAAC;AAC5D;AAEA,eAAeJ,oBAAoB","ignoreList":[]}