@dnb/eufemia 10.71.2 → 10.72.1

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":"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","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 {...buttonParams}>{element}</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":";;;;;;;;;AAKA,OAAOA,KAAK,IACVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,sBAAsB,QAAQ,+BAA+B;AACtE,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,SAASC,yBAAyB,QAAQ,sBAAsB;AAChE,SAASC,qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,oBAAoB,QAAQ,wBAAwB;AA6B7D,SAASC,oBAAoBA,CAAAC,IAAA,EAIC;EAAA,IAJA;MAC5BC,YAAY,GAAGL,yBAAyB,CAACK,YAAY;MACrDC,IAAI,GAAGN,yBAAyB,CAACM;IAER,CAAC,GAAAF,IAAA;IADvBG,WAAW,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEd,MAAMC,KAAK,GAAGjB,OAAO,CAAC,MAAM;IAC1B,OAAAkB,aAAA;MAASN,YAAY;MAAEC;IAAI,GAAKC,WAAW;EAC7C,CAAC,EAAE,CAACF,YAAY,EAAEC,IAAI,EAAEC,WAAW,CAAC,CAAC;EAErC,MAAMK,OAAO,GAAGrB,UAAU,CAACO,OAAO,CAAC;EAEnC,MAAM,CAACe,eAAe,EAAEC,kBAAkB,CAAC,GAAGnB,QAAQ,CAAU,IAAI,CAAC;EAErE,MAAMoB,eAAe,GAAGrB,MAAM,CAAU,IAAI,CAAC;EAE7CF,SAAS,CAAC,MAAM;IACd,IAAI,CAACkB,KAAK,CAACG,eAAe,EAAE;MAC1BC,kBAAkB,CAAC,KAAK,CAAC;IAC3B;EACF,CAAC,EAAE,CAACJ,KAAK,CAACG,eAAe,CAAC,CAAC;EAE3B,MAAMG,kBAAkB,GAAG1B,WAAW,CAAC,MAAM;IAAA,IAAA2B,mBAAA;IAC3C,MAAMC,aAAa,GAAGrB,sBAAsB,CAC1Ca,KAAK,EACLV,yBAAyB,EACzB;MAAEmB,QAAQ,EAAEP,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEO;IAAS,CAAC,EAC/BP,OAAO,CAACQ,cAAc,CAACR,OAAO,CAAC,CAACS,aAAa,EAC7CT,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAES,aACX,CAAC;IAED,IAAI,EAAE,EAAAJ,mBAAA,GAAAC,aAAa,CAACZ,IAAI,cAAAW,mBAAA,uBAAlBA,mBAAA,CAAoBK,MAAM,IAAG,CAAC,CAAC,EAAE;MACrCJ,aAAa,CAACZ,IAAI,GAAG,CAAC,YAAY,CAAC;MACnCY,aAAa,CAACC,QAAQ,GAAG,IAAI;MAC7BJ,eAAe,CAACQ,OAAO,GAAG,IAAI;IAChC;IAEA,OAAOL,aAAa;EACtB,CAAC,EAAE,CAACN,OAAO,EAAEF,KAAK,CAAC,CAAC;EAEpB,MAAMQ,aAAa,GAAGL,eAAe,GAAGG,kBAAkB,CAAC,CAAC,GAAG,IAAI;EAEnE,OACE3B,KAAA,CAAAmC,aAAA;IACEC,EAAE,EAAE,WAAW,GAAGf,KAAK,CAACgB,UAAW;IACnCC,SAAS,EAAE/B,UAAU,2DAMnBM,oBAAoB,CAACQ,KAAK,CAAC,EAH3BK,eAAe,CAACQ,OAAO,KACrBL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEC,QAAQ,KACvB,2CAEJ;EAAE,GAEDD,aAAa,IACZ7B,KAAA,CAAAmC,aAAA,CAACvB,qBAAqB,EAAA2B,QAAA;IACpBC,SAAS;IACTH,UAAU,EAAEhB,KAAK,CAACgB;EAAW,GACzBR,aAAa,GAAAY,kBAAA,KAAAA,kBAAA,GAEjBzC,KAAA,CAAAmC,aAAA,CAACzB,iBAAiB,MAAE,CAAC,CACA,CAEtB,CAAC;AAEV;AAEAI,oBAAoB,CAAC4B,qBAAqB,GAAG,IAAI;AAEjD,eAAe5B,oBAAoB","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":[]}

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

@@ -2,15 +2,9 @@
  * Web StepIndicator Component
  *
  */
-import React from 'react';
 import { ButtonProps } from '../button/Button';
 export type StepIndicatorTriggerButtonProps = ButtonProps & {
-    /**
-     * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
-     */
-    sidebar_id?: string;
     className?: string;
-    inner_ref?: React.RefObject<HTMLElement>;
 };
-declare function StepIndicatorTriggerButton(props: StepIndicatorTriggerButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function StepIndicatorTriggerButton({ className, ...rest }: StepIndicatorTriggerButtonProps): import("react/jsx-runtime").JSX.Element;
 export default StepIndicatorTriggerButton;

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

@@ -3,65 +3,97 @@
 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 = ["data", "triggerButtonProps"];
+const _excluded = ["className"],
+  _excluded2 = ["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 classnames from 'classnames';
-import React, { useContext, useRef } from 'react';
+import React, { useContext } from 'react';
 import Button from '../button/Button';
-import chevron_icon from '../../icons/chevron_right_medium';
-import { validateDOMAttributes, combineDescribedBy } from '../../shared/component-helper';
+import Section from '../section/Section';
 import HeightAnimation from '../height-animation/HeightAnimation';
-import { createSpacingClasses } from '../space/SpacingHelper';
+import chevron_down from '../../icons/chevron_down';
+import chevron_up from '../../icons/chevron_up';
+import { validateDOMAttributes, combineDescribedBy } from '../../shared/component-helper';
+import useId from '../../shared/helpers/useId';
 import FormLabel from '../form-label/FormLabel';
 import StepIndicatorContext from './StepIndicatorContext';
-import { StepItemWrapper } from './StepIndicatorItem';
 import { skeletonDOMAttributes, createSkeletonClass } from '../skeleton/SkeletonHelper';
-function StepIndicatorTriggerButton(props) {
-  const context = useContext(StepIndicatorContext);
-  const buttonRef = useRef((props === null || props === void 0 ? void 0 : props.inner_ref) || null);
-  const item = context.data[context.activeStep || 0];
-  const label = context.stepsLabel;
+function StepIndicatorTriggerButton(_ref) {
+  let {
+      className
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const _useContext = useContext(StepIndicatorContext),
+    {
+      data
+    } = _useContext,
+    contextWithoutData = _objectWithoutProperties(_useContext, _excluded2);
   const {
-      data,
-      triggerButtonProps
-    } = context,
-    contextWithoutData = _objectWithoutProperties(context, _excluded);
+    stepsLabel,
+    activeStep,
+    overview_title,
+    openState,
+    closeHandler,
+    openHandler,
+    skeleton,
+    filterAttributes,
+    no_animation
+  } = contextWithoutData;
+  const item = data[activeStep || 0];
+  const label = stepsLabel;
+  const id = useId();
   const triggerParams = _objectSpread(_objectSpread({}, contextWithoutData), {}, {
-    className: classnames('dnb-step-indicator__trigger', createSkeletonClass('font', context.skeleton), createSpacingClasses(context)),
+    className: classnames('dnb-step-indicator__trigger', createSkeletonClass('font', skeleton)),
     'aria-live': 'polite'
   });
-  const buttonParams = _objectSpread(_objectSpread(_objectSpread({}, triggerButtonProps), props), {}, {
-    className: classnames('dnb-step-indicator__trigger__button', props.className)
+  const buttonParams = _objectSpread(_objectSpread({}, rest), {}, {
+    className: classnames(`dnb-step-indicator__trigger__button dnb-step-indicator__trigger__button--${openState ? 'expanded' : 'collapsed'}`, className)
   });
-  buttonParams['aria-describedby'] = combineDescribedBy(buttonParams, context.sidebar_id + '-overview');
+  buttonParams['aria-describedby'] = combineDescribedBy(buttonParams, id + '-overview');
   Object.keys(triggerParams).forEach(key => {
-    if (context.filterAttributes.includes(key)) {
+    if (filterAttributes.includes(key)) {
       delete triggerParams[key];
     }
   });
-  skeletonDOMAttributes(triggerParams, context.skeleton);
-  validateDOMAttributes(context, triggerParams);
-  return React.createElement("div", triggerParams, React.createElement("span", {
+  skeletonDOMAttributes(triggerParams, skeleton);
+  validateDOMAttributes(contextWithoutData, triggerParams);
+  return React.createElement(Section, {
+    backgroundColor: "var(--step-indicator-trigger-background)",
+    innerSpace: {
+      top: 'small',
+      bottom: 'small'
+    },
+    roundedCorner: {
+      small: false,
+      medium: [true, true, !openState, !openState],
+      large: [true, true, !openState, !openState]
+    }
+  }, React.createElement(HeightAnimation, {
+    animate: !no_animation
+  }, React.createElement("div", triggerParams, React.createElement("span", {
     className: "dnb-sr-only",
-    id: context.sidebar_id + '-overview'
-  }, context.overview_title), React.createElement(FormLabel, {
-    "aria-describedby": context.sidebar_id,
-    forId: context.sidebar_id,
-    className: "dnb-step-indicator__label"
+    id: id + '-overview'
+  }, overview_title), React.createElement(FormLabel, {
+    "aria-describedby": id,
+    forId: id,
+    className: "dnb-step-indicator__label",
+    right: "x-small"
   }, label), React.createElement(Button, _extends({}, buttonParams, {
-    id: context.sidebar_id,
+    onClick: () => {
+      if (openState) {
+        closeHandler();
+      } else {
+        openHandler();
+      }
+    },
+    "aria-expanded": openState,
+    id: id,
     wrap: true,
-    stretch: true,
-    variant: "secondary",
-    icon: chevron_icon,
-    icon_size: "medium",
-    icon_position: "right",
-    inner_ref: buttonRef
-  }), React.createElement(StepItemWrapper, {
-    number: (context.activeStep || 0) + 1,
-    hide_numbers: context.hide_numbers
-  }, React.createElement(HeightAnimation, null, (typeof item === 'string' ? item : item && item.title) || ''))));
+    variant: "tertiary",
+    icon: openState ? chevron_up : chevron_down,
+    icon_position: "right"
+  }), (typeof item === 'string' ? item : item && item.title) || ''))));
 }
 export default StepIndicatorTriggerButton;
 //# sourceMappingURL=StepIndicatorTriggerButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepIndicatorTriggerButton.js","names":["classnames","React","useContext","useRef","Button","chevron_icon","validateDOMAttributes","combineDescribedBy","HeightAnimation","createSpacingClasses","FormLabel","StepIndicatorContext","StepItemWrapper","skeletonDOMAttributes","createSkeletonClass","StepIndicatorTriggerButton","props","context","buttonRef","inner_ref","item","data","activeStep","label","stepsLabel","triggerButtonProps","contextWithoutData","_objectWithoutProperties","_excluded","triggerParams","_objectSpread","className","skeleton","buttonParams","sidebar_id","Object","keys","forEach","key","filterAttributes","includes","createElement","id","overview_title","forId","_extends","wrap","stretch","variant","icon","icon_size","icon_position","number","hide_numbers","title"],"sources":["../../../../src/components/step-indicator/StepIndicatorTriggerButton.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport classnames from 'classnames'\nimport React, { useContext, useRef } from 'react'\nimport Button, { ButtonProps } from '../button/Button'\nimport chevron_icon from '../../icons/chevron_right_medium'\nimport {\n  validateDOMAttributes,\n  combineDescribedBy,\n} from '../../shared/component-helper'\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport FormLabel from '../form-label/FormLabel'\nimport StepIndicatorContext from './StepIndicatorContext'\nimport { StepItemWrapper } from './StepIndicatorItem'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\n\nexport type StepIndicatorTriggerButtonProps = ButtonProps & {\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  className?: string\n  inner_ref?: React.RefObject<HTMLElement>\n}\nfunction StepIndicatorTriggerButton(\n  props: StepIndicatorTriggerButtonProps\n) {\n  const context = useContext(StepIndicatorContext)\n\n  const buttonRef = useRef(props?.inner_ref || null)\n\n  const item = context.data[context.activeStep || 0]\n  const label = context.stepsLabel\n\n  const {\n    data, // eslint-disable-line\n    triggerButtonProps, // eslint-disable-line\n    ...contextWithoutData\n  } = context\n\n  const triggerParams = {\n    ...contextWithoutData,\n    className: classnames(\n      'dnb-step-indicator__trigger',\n      createSkeletonClass('font', context.skeleton),\n      createSpacingClasses(context)\n    ),\n    'aria-live': 'polite',\n  } as React.HTMLProps<HTMLElement>\n\n  const buttonParams = {\n    ...triggerButtonProps,\n    ...props,\n    className: classnames(\n      'dnb-step-indicator__trigger__button',\n      props.className\n    ),\n  }\n\n  buttonParams['aria-describedby'] = combineDescribedBy(\n    buttonParams,\n    context.sidebar_id + '-overview'\n  )\n\n  Object.keys(triggerParams).forEach((key) => {\n    if (context.filterAttributes.includes(key)) {\n      delete triggerParams[key]\n    }\n  })\n\n  skeletonDOMAttributes(triggerParams, context.skeleton)\n\n  // also used for code markup simulation\n  validateDOMAttributes(context, triggerParams)\n\n  return (\n    <div {...(triggerParams as React.HTMLProps<HTMLDivElement>)}>\n      <span className=\"dnb-sr-only\" id={context.sidebar_id + '-overview'}>\n        {context.overview_title}\n      </span>\n      <FormLabel\n        aria-describedby={context.sidebar_id}\n        forId={context.sidebar_id}\n        className=\"dnb-step-indicator__label\"\n      >\n        {label}\n      </FormLabel>\n      <Button\n        {...buttonParams}\n        id={context.sidebar_id}\n        wrap\n        stretch\n        variant=\"secondary\"\n        icon={chevron_icon}\n        icon_size=\"medium\"\n        icon_position=\"right\"\n        inner_ref={buttonRef}\n      >\n        <StepItemWrapper\n          number={(context.activeStep || 0) + 1}\n          hide_numbers={context.hide_numbers}\n        >\n          <HeightAnimation>\n            {(typeof item === 'string' ? item : item && item.title) || ''}\n          </HeightAnimation>\n        </StepItemWrapper>\n      </Button>\n    </div>\n  )\n}\n\nexport default StepIndicatorTriggerButton\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"StepIndicatorTriggerButton.js","names":["classnames","React","useContext","Button","Section","HeightAnimation","chevron_down","chevron_up","validateDOMAttributes","combineDescribedBy","useId","FormLabel","StepIndicatorContext","skeletonDOMAttributes","createSkeletonClass","StepIndicatorTriggerButton","_ref","className","rest","_objectWithoutProperties","_excluded","_useContext","data","contextWithoutData","_excluded2","stepsLabel","activeStep","overview_title","openState","closeHandler","openHandler","skeleton","filterAttributes","no_animation","item","label","id","triggerParams","_objectSpread","buttonParams","Object","keys","forEach","key","includes","createElement","backgroundColor","innerSpace","top","bottom","roundedCorner","small","medium","large","animate","forId","right","_extends","onClick","wrap","variant","icon","icon_position","title"],"sources":["../../../../src/components/step-indicator/StepIndicatorTriggerButton.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport classnames from 'classnames'\nimport React, { useContext } from 'react'\nimport Button, { ButtonProps } from '../button/Button'\nimport Section from '../section/Section'\nimport HeightAnimation from '../height-animation/HeightAnimation'\nimport chevron_down from '../../icons/chevron_down'\nimport chevron_up from '../../icons/chevron_up'\nimport {\n  validateDOMAttributes,\n  combineDescribedBy,\n} from '../../shared/component-helper'\nimport useId from '../../shared/helpers/useId'\nimport FormLabel from '../form-label/FormLabel'\nimport StepIndicatorContext from './StepIndicatorContext'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\n\nexport type StepIndicatorTriggerButtonProps = ButtonProps & {\n  className?: string\n}\nfunction StepIndicatorTriggerButton({\n  className,\n  ...rest\n}: StepIndicatorTriggerButtonProps) {\n  const {\n    data, // eslint-disable-line\n    ...contextWithoutData\n  } = useContext(StepIndicatorContext)\n\n  const {\n    stepsLabel,\n    activeStep,\n    overview_title,\n    openState,\n    closeHandler,\n    openHandler,\n    skeleton,\n    filterAttributes,\n    no_animation,\n  } = contextWithoutData\n\n  const item = data[activeStep || 0]\n  const label = stepsLabel\n  const id = useId()\n\n  const triggerParams = {\n    ...contextWithoutData,\n    className: classnames(\n      'dnb-step-indicator__trigger',\n      createSkeletonClass('font', skeleton)\n    ),\n    'aria-live': 'polite',\n  } as React.HTMLProps<HTMLElement>\n\n  const buttonParams = {\n    ...rest,\n    className: classnames(\n      'dnb-step-indicator__trigger__button',\n      `dnb-step-indicator__trigger__button--${\n        openState ? 'expanded' : 'collapsed'\n      }`,\n      className\n    ),\n  }\n\n  buttonParams['aria-describedby'] = combineDescribedBy(\n    buttonParams,\n    id + '-overview'\n  )\n\n  Object.keys(triggerParams).forEach((key) => {\n    if (filterAttributes.includes(key)) {\n      delete triggerParams[key]\n    }\n  })\n\n  skeletonDOMAttributes(triggerParams, skeleton)\n\n  // also used for code markup simulation\n  validateDOMAttributes(contextWithoutData, triggerParams)\n\n  return (\n    <Section\n      backgroundColor=\"var(--step-indicator-trigger-background)\"\n      innerSpace={{\n        top: 'small',\n        bottom: 'small',\n      }}\n      roundedCorner={{\n        small: false,\n        medium: [true, true, !openState, !openState],\n        large: [true, true, !openState, !openState],\n      }}\n    >\n      <HeightAnimation animate={!no_animation}>\n        <div {...(triggerParams as React.HTMLProps<HTMLDivElement>)}>\n          <span className=\"dnb-sr-only\" id={id + '-overview'}>\n            {overview_title}\n          </span>\n          <FormLabel\n            aria-describedby={id}\n            forId={id}\n            className=\"dnb-step-indicator__label\"\n            right=\"x-small\"\n          >\n            {label}\n          </FormLabel>\n          <Button\n            {...buttonParams}\n            onClick={() => {\n              if (openState) {\n                closeHandler()\n              } else {\n                openHandler()\n              }\n            }}\n            aria-expanded={openState}\n            id={id}\n            wrap\n            variant=\"tertiary\"\n            icon={openState ? chevron_up : chevron_down}\n            icon_position=\"right\"\n          >\n            {(typeof item === 'string' ? item : item && item.title) || ''}\n          </Button>\n        </div>\n      </HeightAnimation>\n    </Section>\n  )\n}\n\nexport default StepIndicatorTriggerButton\n"],"mappings":"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","ignoreList":[]}