@dnb/eufemia 10.35.0 → 10.36.0

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

@@ -5,7 +5,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 const _excluded = ["isSidebar"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import Context from '../../shared/Context';
 import { stepIndicatorDefaultProps } from './StepIndicatorProps';
 import { extendPropsWithContext } from '../../shared/component-helper';
@@ -20,72 +20,51 @@ export function StepIndicatorProvider(_ref) {
       isSidebar = false
     } = _ref,
     restOfProps = _objectWithoutProperties(_ref, _excluded);
-  const props = _objectSpread({
-    isSidebar
-  }, restOfProps);
-  const data = getData(props);
-  const countSteps = data.length;
+  const props = useMemo(() => {
+    return _objectSpread({
+      isSidebar
+    }, restOfProps);
+  }, [isSidebar, restOfProps]);
+  const data = useMemo(() => {
+    if (typeof props.data === 'string') {
+      return props.data[0] === '[' ? JSON.parse(props.data) : [];
+    }
+    return props.data || [];
+  }, [props]);
   const [hasSidebar, setHasSidebar] = useState(true);
   const [hideSidebar, setHideSidebar] = useState(false);
-  const [activeStep, setActiveStep] = useState(getActiveStepFromProps());
   const [openState, setOpenState] = useState(false);
-  const listOfReachedSteps = useRef([activeStep].filter(Boolean)).current;
-  const mediaQueryListener = useRef(null);
-  const context = useContext(Context);
-  const contextValue = makeContextValue();
-  useEffect(() => {
-    var _document;
-    const container = (_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('sidebar__' + props.sidebar_id);
-    setHasSidebar(Boolean(container));
-    mediaQueryListener.current = onMediaQueryChange({
-      min: '0',
-      max: 'medium'
-    }, hideSidebar => {
-      setHideSidebar(hideSidebar);
-    }, {
-      runOnInit: true
-    });
-    return () => {
-      if (mediaQueryListener.current) {
-        mediaQueryListener.current();
-      }
-    };
-  }, []);
-  useEffect(() => {
-    const currentStepFromProps = getActiveStepFromProps();
-    if (currentStepFromProps !== activeStep) {
-      setActiveStep(currentStepFromProps);
-    }
-  }, [props.current_step, data]);
-  useEffect(() => {
-    if (!listOfReachedSteps.includes(activeStep)) {
-      listOfReachedSteps.push(activeStep);
-    }
-  }, [activeStep]);
-  function onChangeState() {
+  const onChangeState = useCallback(() => {
     setOpenState(false);
-  }
-  function openHandler() {
+  }, []);
+  const openHandler = useCallback(() => {
     setOpenState(true);
-  }
-  function closeHandler() {
+  }, []);
+  const closeHandler = useCallback(() => {
     setOpenState(false);
-  }
-  function getData(props) {
-    if (typeof props.data === 'string') {
-      return props.data[0] === '[' ? JSON.parse(props.data) : [];
-    }
-    return props.data || [];
-  }
-  function getActiveStepFromProps() {
+  }, []);
+  const getActiveStepFromProps = useCallback(() => {
     if (typeof data[0] === 'string') {
       return props.current_step;
     }
     const dataWithItems = data;
     const itemWithCurrentStep = dataWithItems.find(item => item.is_current);
     return itemWithCurrentStep ? dataWithItems.indexOf(itemWithCurrentStep) : props.current_step;
-  }
-  function makeContextValue() {
+  }, [data, props.current_step]);
+  const countSteps = data.length;
+  const activeStepRef = useRef(getActiveStepFromProps());
+  const [, forceUpdate] = useReducer(() => ({}), {});
+  const setActiveStep = useCallback(step => {
+    activeStepRef.current = step;
+    forceUpdate();
+  }, []);
+  const listOfReachedSteps = useRef([activeStepRef.current].filter(Boolean)).current;
+  const mediaQueryListener = useRef(null);
+  const context = useContext(Context);
+  const updateStepTitle = useCallback(title => {
+    return title === null || title === void 0 ? void 0 : title.replace('%step', String((activeStepRef.current || 0) + 1)).replace('%count', String((data === null || data === void 0 ? void 0 : data.length) || 1));
+  }, [data === null || data === void 0 ? void 0 : data.length]);
+  const makeContextValue = useCallback(() => {
     const globalContext = extendPropsWithContext(props, stepIndicatorDefaultProps, {
       skeleton: context === null || context === void 0 ? void 0 : context.skeleton
     }, context.getTranslation(context).StepIndicator, context.StepIndicator);
@@ -97,7 +76,7 @@ export function StepIndicatorProvider(_ref) {
     }, {
       hasSidebar,
       hideSidebar,
-      activeStep,
+      activeStep: activeStepRef.current,
       openState,
       listOfReachedSteps,
       data,
@@ -112,10 +91,38 @@ export function StepIndicatorProvider(_ref) {
     });
     value.sidebarIsVisible = value.hasSidebar && !value.hideSidebar;
     return value;
-  }
-  function updateStepTitle(title) {
-    return title === null || title === void 0 ? void 0 : title.replace('%step', String((activeStep || 0) + 1)).replace('%count', String((data === null || data === void 0 ? void 0 : data.length) || 1));
-  }
+  }, [closeHandler, context, countSteps, data, hasSidebar, hideSidebar, listOfReachedSteps, onChangeState, openHandler, openState, props, setActiveStep, updateStepTitle]);
+  const contextValue = makeContextValue();
+  useEffect(() => {
+    var _document;
+    const container = (_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('sidebar__' + props.sidebar_id);
+    setHasSidebar(Boolean(container));
+    mediaQueryListener.current = onMediaQueryChange({
+      min: '0',
+      max: 'medium'
+    }, hideSidebar => {
+      setHideSidebar(hideSidebar);
+    }, {
+      runOnInit: true
+    });
+    return () => {
+      if (mediaQueryListener.current) {
+        mediaQueryListener.current();
+      }
+    };
+  }, [props.sidebar_id]);
+  useEffect(() => {
+    const currentStepFromProps = getActiveStepFromProps();
+    if (currentStepFromProps !== activeStepRef.current) {
+      setActiveStep(currentStepFromProps);
+    }
+  }, [props.current_step, data, getActiveStepFromProps, setActiveStep]);
+  const activeStep = activeStepRef.current;
+  useEffect(() => {
+    if (!listOfReachedSteps.includes(activeStep)) {
+      listOfReachedSteps.push(activeStep);
+    }
+  }, [activeStep, listOfReachedSteps]);
   if (typeof window !== 'undefined' && window['IS_TEST']) {
     contextValue['no_animation'] = true;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"StepIndicatorContext.js","names":["React","useContext","useEffect","useRef","useState","Context","stepIndicatorDefaultProps","extendPropsWithContext","onMediaQueryChange","filterAttributes","Object","keys","filter","item","includes","concat","StepIndicatorContext","createContext","StepIndicatorProvider","_ref","isSidebar","restOfProps","_objectWithoutProperties","_excluded","props","_objectSpread","data","getData","countSteps","length","hasSidebar","setHasSidebar","hideSidebar","setHideSidebar","activeStep","setActiveStep","getActiveStepFromProps","openState","setOpenState","listOfReachedSteps","Boolean","current","mediaQueryListener","context","contextValue","makeContextValue","_document","container","document","getElementById","sidebar_id","min","max","runOnInit","currentStepFromProps","current_step","push","onChangeState","openHandler","closeHandler","JSON","parse","dataWithItems","itemWithCurrentStep","find","is_current","indexOf","globalContext","skeleton","getTranslation","StepIndicator","value","extendSafe","defaultProps","stepsLabel","updateStepTitle","step_title","stepsLabelExtended","step_title_extended","sidebarIsVisible","title","replace","String","window","forEach","key","startsWith","createElement","Provider","children","objects","obj","itm","entries","reduce","acc","k","v"],"sources":["../../../../src/components/step-indicator/StepIndicatorContext.tsx"],"sourcesContent":["/**\n * Web StepIndicator Context\n *\n */\n\nimport React, { useContext, useEffect, useRef, useState } from 'react'\nimport Context, { ContextProps } from '../../shared/Context'\nimport { stepIndicatorDefaultProps } from './StepIndicatorProps'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport { onMediaQueryChange } from '../../shared/MediaQueryUtils'\nimport {\n  StepIndicatorData,\n  StepIndicatorDataItem,\n  StepIndicatorMode,\n  StepIndicatorProps,\n} from './StepIndicator'\nimport { StepIndicatorItemProps } from './StepIndicatorItem'\n\n// We use this array to filter out unwanted properties\nconst filterAttributes = Object.keys(stepIndicatorDefaultProps)\n  .filter((item) => {\n    return !['class', 'className'].includes(item)\n  })\n  .concat([\n    'internalId',\n    'isSidebar',\n    'hasSidebar',\n    'hideSidebar',\n    'sidebarIsVisible',\n    'mainTitle',\n    'stepsLabel',\n    'stepsLabelExtended',\n    'listOfReachedSteps',\n    'setActiveStep',\n    'activeStep',\n    'countSteps',\n    'openState',\n    'onChangeState',\n    'openHandler',\n    'closeHandler',\n    'innerRef',\n    'hasSkeletonData',\n    'filterAttributes',\n    'onChangeState',\n  ])\n\nexport type StepIndicatorContextValues = StepIndicatorProviderProps &\n  StepIndicatorProviderStates &\n  ContextProps\n\nconst StepIndicatorContext =\n  React.createContext<StepIndicatorContextValues>(null)\n\nexport default StepIndicatorContext\n\nexport type StepIndicatorProviderProps = Omit<\n  StepIndicatorProps,\n  'mode' | 'data'\n> & {\n  /**\n   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.\n   */\n  sidebar_id: string\n  /**\n   * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.\n   */\n  data?: StepIndicatorData\n  /**\n   * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.\n   */\n  mode?: StepIndicatorMode\n  children: React.ReactNode\n  isSidebar?: boolean\n}\n\nexport type StepIndicatorProviderStates = {\n  data: (string | StepIndicatorItemProps)[]\n  hasSidebar: boolean\n  hideSidebar: boolean\n  activeStep: number\n  openState: boolean\n  listOfReachedSteps: number[]\n  countSteps: number\n  stepsLabel: string\n  stepsLabelExtended: string\n  filterAttributes: string[]\n  setActiveStep: React.Dispatch<React.SetStateAction<number>>\n  sidebarIsVisible: boolean\n  onChangeState: () => void\n  openHandler: () => void\n  closeHandler: () => void\n}\n\nexport function StepIndicatorProvider({\n  isSidebar = false,\n  ...restOfProps\n}: StepIndicatorProviderProps) {\n  const props = { isSidebar, ...restOfProps }\n\n  const data = getData(props)\n  const countSteps = data.length\n\n  const [hasSidebar, setHasSidebar] = useState<boolean>(true)\n  const [hideSidebar, setHideSidebar] = useState<boolean>(false)\n  const [activeStep, setActiveStep] = useState<number>(\n    getActiveStepFromProps()\n  )\n  const [openState, setOpenState] = useState<boolean>(false)\n\n  const listOfReachedSteps = useRef([activeStep].filter(Boolean)).current\n\n  const mediaQueryListener = useRef(null)\n\n  const context = useContext(Context)\n  const contextValue = makeContextValue() as StepIndicatorContextValues\n\n  // Mount and dismount\n  useEffect(() => {\n    const container = document?.getElementById(\n      'sidebar__' + props.sidebar_id\n    )\n\n    setHasSidebar(Boolean(container))\n\n    mediaQueryListener.current = onMediaQueryChange(\n      {\n        min: '0',\n        max: 'medium',\n      },\n      (hideSidebar) => {\n        setHideSidebar(hideSidebar)\n      },\n      { runOnInit: true }\n    )\n\n    return () => {\n      if (mediaQueryListener.current) {\n        mediaQueryListener.current()\n      }\n    }\n  }, [])\n\n  // Keeps the activeStep state updated with changes to the current_step and data props\n  useEffect(() => {\n    const currentStepFromProps = getActiveStepFromProps()\n\n    if (currentStepFromProps !== activeStep) {\n      setActiveStep(currentStepFromProps)\n    }\n  }, [props.current_step, data])\n\n  // Keeps the listOfReachedSteps state up to date with the activeStep state\n  useEffect(() => {\n    if (!listOfReachedSteps.includes(activeStep)) {\n      listOfReachedSteps.push(activeStep)\n    }\n  }, [activeStep])\n\n  function onChangeState() {\n    setOpenState(false)\n  }\n\n  function openHandler() {\n    setOpenState(true)\n  }\n\n  function closeHandler() {\n    setOpenState(false)\n  }\n\n  function getData(\n    props: StepIndicatorProviderProps\n  ): string[] | StepIndicatorDataItem[] {\n    if (typeof props.data === 'string') {\n      return props.data[0] === '[' ? JSON.parse(props.data) : []\n    }\n\n    return props.data || []\n  }\n\n  function getActiveStepFromProps() {\n    if (typeof data[0] === 'string') {\n      return props.current_step\n    }\n\n    const dataWithItems = data as StepIndicatorDataItem[]\n\n    const itemWithCurrentStep = dataWithItems.find(\n      (item) => item.is_current\n    )\n    // Is current on data item has precedence(?) over current_step prop\n    return itemWithCurrentStep\n      ? dataWithItems.indexOf(itemWithCurrentStep)\n      : props.current_step\n  }\n\n  function makeContextValue() {\n    const globalContext = extendPropsWithContext(\n      props,\n      stepIndicatorDefaultProps,\n      { skeleton: context?.skeleton },\n      context.getTranslation(context).StepIndicator,\n      context.StepIndicator\n    )\n\n    const value = extendSafe(\n      { filterAttributes },\n      globalContext,\n      // Props\n      {\n        defaultProps: stepIndicatorDefaultProps,\n        props,\n      },\n      // State\n      {\n        hasSidebar,\n        hideSidebar,\n        activeStep,\n        openState,\n        listOfReachedSteps,\n        data,\n        countSteps,\n        stepsLabel: updateStepTitle(globalContext.step_title),\n        stepsLabelExtended: updateStepTitle(\n          globalContext.step_title_extended\n        ),\n      },\n      // Functions\n      {\n        setActiveStep,\n        onChangeState,\n        openHandler,\n        closeHandler,\n      }\n    ) as StepIndicatorContextValues\n\n    value.sidebarIsVisible = value.hasSidebar && !value.hideSidebar\n\n    return value\n  }\n\n  function updateStepTitle(title: string) {\n    return title\n      ?.replace('%step', String((activeStep || 0) + 1))\n      .replace('%count', String(data?.length || 1))\n  }\n\n  if (typeof window !== 'undefined' && window['IS_TEST']) {\n    contextValue['no_animation'] = true\n  }\n\n  // Filter out unwanted HTML attributes\n  Object.keys(contextValue).forEach((key) => {\n    if (key.startsWith('_')) {\n      delete contextValue[key]\n    }\n  })\n\n  return (\n    <StepIndicatorContext.Provider value={contextValue}>\n      {props.children}\n    </StepIndicatorContext.Provider>\n  )\n}\n\n/**\n * Like \"Object.assign\" – but safe\n * A new falsy value will not be used, if it exists already\n *\n * @param  {...object} objects\n * @returns object\n */\nfunction extendSafe(...objects): Record<string, unknown> {\n  const obj = {}\n\n  objects.forEach((itm) => {\n    if (itm.defaultProps && itm.props) {\n      itm = Object.entries(itm.props).reduce((acc, [k, v]) => {\n        if (itm.defaultProps[k] !== v) {\n          acc[k] = v\n        }\n        return acc\n      }, {})\n    }\n\n    Object.entries(itm).forEach(([k, v]) => {\n      if (!obj[k] || (obj[k] && v)) {\n        obj[k] = v\n      }\n    })\n  })\n\n  return obj\n}\n"],"mappings":";;;;;;;AAKA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACtE,OAAOC,OAAO,MAAwB,sBAAsB;AAC5D,SAASC,yBAAyB,QAAQ,sBAAsB;AAChE,SAASC,sBAAsB,QAAQ,+BAA+B;AACtE,SAASC,kBAAkB,QAAQ,8BAA8B;AAUjE,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,IAAI,CAACL,yBAAyB,CAAC,CAC5DM,MAAM,CAAEC,IAAI,IAAK;EAChB,OAAO,CAAC,CAAC,OAAO,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACD,IAAI,CAAC;AAC/C,CAAC,CAAC,CACDE,MAAM,CAAC,CACN,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,WAAW,EACX,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,aAAa,EACb,cAAc,EACd,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,CAChB,CAAC;AAMJ,MAAMC,oBAAoB,GACxBhB,KAAK,CAACiB,aAAa,CAA6B,IAAI,CAAC;AAEvD,eAAeD,oBAAoB;AAwCnC,OAAO,SAASE,qBAAqBA,CAAAC,IAAA,EAGN;EAAA,IAHO;MACpCC,SAAS,GAAG;IAEc,CAAC,GAAAD,IAAA;IADxBE,WAAW,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAEd,MAAMC,KAAK,GAAAC,aAAA;IAAKL;EAAS,GAAKC,WAAW,CAAE;EAE3C,MAAMK,IAAI,GAAGC,OAAO,CAACH,KAAK,CAAC;EAC3B,MAAMI,UAAU,GAAGF,IAAI,CAACG,MAAM;EAE9B,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG3B,QAAQ,CAAU,IAAI,CAAC;EAC3D,MAAM,CAAC4B,WAAW,EAAEC,cAAc,CAAC,GAAG7B,QAAQ,CAAU,KAAK,CAAC;EAC9D,MAAM,CAAC8B,UAAU,EAAEC,aAAa,CAAC,GAAG/B,QAAQ,CAC1CgC,sBAAsB,CAAC,CACzB,CAAC;EACD,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGlC,QAAQ,CAAU,KAAK,CAAC;EAE1D,MAAMmC,kBAAkB,GAAGpC,MAAM,CAAC,CAAC+B,UAAU,CAAC,CAACtB,MAAM,CAAC4B,OAAO,CAAC,CAAC,CAACC,OAAO;EAEvE,MAAMC,kBAAkB,GAAGvC,MAAM,CAAC,IAAI,CAAC;EAEvC,MAAMwC,OAAO,GAAG1C,UAAU,CAACI,OAAO,CAAC;EACnC,MAAMuC,YAAY,GAAGC,gBAAgB,CAAC,CAA+B;EAGrE3C,SAAS,CAAC,MAAM;IAAA,IAAA4C,SAAA;IACd,MAAMC,SAAS,IAAAD,SAAA,GAAGE,QAAQ,cAAAF,SAAA,uBAARA,SAAA,CAAUG,cAAc,CACxC,WAAW,GAAGzB,KAAK,CAAC0B,UACtB,CAAC;IAEDnB,aAAa,CAACS,OAAO,CAACO,SAAS,CAAC,CAAC;IAEjCL,kBAAkB,CAACD,OAAO,GAAGjC,kBAAkB,CAC7C;MACE2C,GAAG,EAAE,GAAG;MACRC,GAAG,EAAE;IACP,CAAC,EACApB,WAAW,IAAK;MACfC,cAAc,CAACD,WAAW,CAAC;IAC7B,CAAC,EACD;MAAEqB,SAAS,EAAE;IAAK,CACpB,CAAC;IAED,OAAO,MAAM;MACX,IAAIX,kBAAkB,CAACD,OAAO,EAAE;QAC9BC,kBAAkB,CAACD,OAAO,CAAC,CAAC;MAC9B;IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAGNvC,SAAS,CAAC,MAAM;IACd,MAAMoD,oBAAoB,GAAGlB,sBAAsB,CAAC,CAAC;IAErD,IAAIkB,oBAAoB,KAAKpB,UAAU,EAAE;MACvCC,aAAa,CAACmB,oBAAoB,CAAC;IACrC;EACF,CAAC,EAAE,CAAC9B,KAAK,CAAC+B,YAAY,EAAE7B,IAAI,CAAC,CAAC;EAG9BxB,SAAS,CAAC,MAAM;IACd,IAAI,CAACqC,kBAAkB,CAACzB,QAAQ,CAACoB,UAAU,CAAC,EAAE;MAC5CK,kBAAkB,CAACiB,IAAI,CAACtB,UAAU,CAAC;IACrC;EACF,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,SAASuB,aAAaA,CAAA,EAAG;IACvBnB,YAAY,CAAC,KAAK,CAAC;EACrB;EAEA,SAASoB,WAAWA,CAAA,EAAG;IACrBpB,YAAY,CAAC,IAAI,CAAC;EACpB;EAEA,SAASqB,YAAYA,CAAA,EAAG;IACtBrB,YAAY,CAAC,KAAK,CAAC;EACrB;EAEA,SAASX,OAAOA,CACdH,KAAiC,EACG;IACpC,IAAI,OAAOA,KAAK,CAACE,IAAI,KAAK,QAAQ,EAAE;MAClC,OAAOF,KAAK,CAACE,IAAI,CAAC,CAAC,CAAC,KAAK,GAAG,GAAGkC,IAAI,CAACC,KAAK,CAACrC,KAAK,CAACE,IAAI,CAAC,GAAG,EAAE;IAC5D;IAEA,OAAOF,KAAK,CAACE,IAAI,IAAI,EAAE;EACzB;EAEA,SAASU,sBAAsBA,CAAA,EAAG;IAChC,IAAI,OAAOV,IAAI,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE;MAC/B,OAAOF,KAAK,CAAC+B,YAAY;IAC3B;IAEA,MAAMO,aAAa,GAAGpC,IAA+B;IAErD,MAAMqC,mBAAmB,GAAGD,aAAa,CAACE,IAAI,CAC3CnD,IAAI,IAAKA,IAAI,CAACoD,UACjB,CAAC;IAED,OAAOF,mBAAmB,GACtBD,aAAa,CAACI,OAAO,CAACH,mBAAmB,CAAC,GAC1CvC,KAAK,CAAC+B,YAAY;EACxB;EAEA,SAASV,gBAAgBA,CAAA,EAAG;IAC1B,MAAMsB,aAAa,GAAG5D,sBAAsB,CAC1CiB,KAAK,EACLlB,yBAAyB,EACzB;MAAE8D,QAAQ,EAAEzB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEyB;IAAS,CAAC,EAC/BzB,OAAO,CAAC0B,cAAc,CAAC1B,OAAO,CAAC,CAAC2B,aAAa,EAC7C3B,OAAO,CAAC2B,aACV,CAAC;IAED,MAAMC,KAAK,GAAGC,UAAU,CACtB;MAAE/D;IAAiB,CAAC,EACpB0D,aAAa,EAEb;MACEM,YAAY,EAAEnE,yBAAyB;MACvCkB;IACF,CAAC,EAED;MACEM,UAAU;MACVE,WAAW;MACXE,UAAU;MACVG,SAAS;MACTE,kBAAkB;MAClBb,IAAI;MACJE,UAAU;MACV8C,UAAU,EAAEC,eAAe,CAACR,aAAa,CAACS,UAAU,CAAC;MACrDC,kBAAkB,EAAEF,eAAe,CACjCR,aAAa,CAACW,mBAChB;IACF,CAAC,EAED;MACE3C,aAAa;MACbsB,aAAa;MACbC,WAAW;MACXC;IACF,CACF,CAA+B;IAE/BY,KAAK,CAACQ,gBAAgB,GAAGR,KAAK,CAACzC,UAAU,IAAI,CAACyC,KAAK,CAACvC,WAAW;IAE/D,OAAOuC,KAAK;EACd;EAEA,SAASI,eAAeA,CAACK,KAAa,EAAE;IACtC,OAAOA,KAAK,aAALA,KAAK,uBAALA,KAAK,CACRC,OAAO,CAAC,OAAO,EAAEC,MAAM,CAAC,CAAChD,UAAU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAChD+C,OAAO,CAAC,QAAQ,EAAEC,MAAM,CAAC,CAAAxD,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,MAAM,KAAI,CAAC,CAAC,CAAC;EACjD;EAEA,IAAI,OAAOsD,MAAM,KAAK,WAAW,IAAIA,MAAM,CAAC,SAAS,CAAC,EAAE;IACtDvC,YAAY,CAAC,cAAc,CAAC,GAAG,IAAI;EACrC;EAGAlC,MAAM,CAACC,IAAI,CAACiC,YAAY,CAAC,CAACwC,OAAO,CAAEC,GAAG,IAAK;IACzC,IAAIA,GAAG,CAACC,UAAU,CAAC,GAAG,CAAC,EAAE;MACvB,OAAO1C,YAAY,CAACyC,GAAG,CAAC;IAC1B;EACF,CAAC,CAAC;EAEF,OACErF,KAAA,CAAAuF,aAAA,CAACvE,oBAAoB,CAACwE,QAAQ;IAACjB,KAAK,EAAE3B;EAAa,GAChDpB,KAAK,CAACiE,QACsB,CAAC;AAEpC;AASA,SAASjB,UAAUA,CAAC,GAAGkB,OAAO,EAA2B;EACvD,MAAMC,GAAG,GAAG,CAAC,CAAC;EAEdD,OAAO,CAACN,OAAO,CAAEQ,GAAG,IAAK;IACvB,IAAIA,GAAG,CAACnB,YAAY,IAAImB,GAAG,CAACpE,KAAK,EAAE;MACjCoE,GAAG,GAAGlF,MAAM,CAACmF,OAAO,CAACD,GAAG,CAACpE,KAAK,CAAC,CAACsE,MAAM,CAAC,CAACC,GAAG,EAAE,CAACC,CAAC,EAAEC,CAAC,CAAC,KAAK;QACtD,IAAIL,GAAG,CAACnB,YAAY,CAACuB,CAAC,CAAC,KAAKC,CAAC,EAAE;UAC7BF,GAAG,CAACC,CAAC,CAAC,GAAGC,CAAC;QACZ;QACA,OAAOF,GAAG;MACZ,CAAC,EAAE,CAAC,CAAC,CAAC;IACR;IAEArF,MAAM,CAACmF,OAAO,CAACD,GAAG,CAAC,CAACR,OAAO,CAAC,CAAC,CAACY,CAAC,EAAEC,CAAC,CAAC,KAAK;MACtC,IAAI,CAACN,GAAG,CAACK,CAAC,CAAC,IAAKL,GAAG,CAACK,CAAC,CAAC,IAAIC,CAAE,EAAE;QAC5BN,GAAG,CAACK,CAAC,CAAC,GAAGC,CAAC;MACZ;IACF,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,OAAON,GAAG;AACZ"}
+{"version":3,"file":"StepIndicatorContext.js","names":["React","useCallback","useContext","useEffect","useMemo","useReducer","useRef","useState","Context","stepIndicatorDefaultProps","extendPropsWithContext","onMediaQueryChange","filterAttributes","Object","keys","filter","item","includes","concat","StepIndicatorContext","createContext","StepIndicatorProvider","_ref","isSidebar","restOfProps","_objectWithoutProperties","_excluded","props","_objectSpread","data","JSON","parse","hasSidebar","setHasSidebar","hideSidebar","setHideSidebar","openState","setOpenState","onChangeState","openHandler","closeHandler","getActiveStepFromProps","current_step","dataWithItems","itemWithCurrentStep","find","is_current","indexOf","countSteps","length","activeStepRef","forceUpdate","setActiveStep","step","current","listOfReachedSteps","Boolean","mediaQueryListener","context","updateStepTitle","title","replace","String","makeContextValue","globalContext","skeleton","getTranslation","StepIndicator","value","extendSafe","defaultProps","activeStep","stepsLabel","step_title","stepsLabelExtended","step_title_extended","sidebarIsVisible","contextValue","_document","container","document","getElementById","sidebar_id","min","max","runOnInit","currentStepFromProps","push","window","forEach","key","startsWith","createElement","Provider","children","objects","obj","itm","entries","reduce","acc","k","v"],"sources":["../../../../src/components/step-indicator/StepIndicatorContext.tsx"],"sourcesContent":["/**\n * Web StepIndicator Context\n *\n */\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from 'react'\nimport Context, { ContextProps } from '../../shared/Context'\nimport { stepIndicatorDefaultProps } from './StepIndicatorProps'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport { onMediaQueryChange } from '../../shared/MediaQueryUtils'\nimport {\n  StepIndicatorData,\n  StepIndicatorDataItem,\n  StepIndicatorMode,\n  StepIndicatorProps,\n} from './StepIndicator'\nimport { StepIndicatorItemProps } from './StepIndicatorItem'\n\n// We use this array to filter out unwanted properties\nconst filterAttributes = Object.keys(stepIndicatorDefaultProps)\n  .filter((item) => {\n    return !['class', 'className'].includes(item)\n  })\n  .concat([\n    'internalId',\n    'isSidebar',\n    'hasSidebar',\n    'hideSidebar',\n    'sidebarIsVisible',\n    'mainTitle',\n    'stepsLabel',\n    'stepsLabelExtended',\n    'listOfReachedSteps',\n    'setActiveStep',\n    'activeStep',\n    'countSteps',\n    'openState',\n    'onChangeState',\n    'openHandler',\n    'closeHandler',\n    'innerRef',\n    'hasSkeletonData',\n    'filterAttributes',\n    'onChangeState',\n  ])\n\nexport type StepIndicatorContextValues = StepIndicatorProviderProps &\n  StepIndicatorProviderStates &\n  ContextProps\n\nconst StepIndicatorContext =\n  React.createContext<StepIndicatorContextValues>(null)\n\nexport default StepIndicatorContext\n\nexport type StepIndicatorProviderProps = Omit<\n  StepIndicatorProps,\n  'mode' | 'data'\n> & {\n  /**\n   * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.\n   */\n  sidebar_id: string\n  /**\n   * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.\n   */\n  data?: StepIndicatorData\n  /**\n   * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.\n   */\n  mode?: StepIndicatorMode\n  children: React.ReactNode\n  isSidebar?: boolean\n}\n\nexport type StepIndicatorProviderStates = {\n  data: (string | StepIndicatorItemProps)[]\n  hasSidebar: boolean\n  hideSidebar: boolean\n  activeStep: number\n  openState: boolean\n  listOfReachedSteps: number[]\n  countSteps: number\n  stepsLabel: string\n  stepsLabelExtended: string\n  filterAttributes: string[]\n  setActiveStep: React.Dispatch<React.SetStateAction<number>>\n  sidebarIsVisible: boolean\n  onChangeState: () => void\n  openHandler: () => void\n  closeHandler: () => void\n}\n\nexport function StepIndicatorProvider({\n  isSidebar = false,\n  ...restOfProps\n}: StepIndicatorProviderProps) {\n  const props = useMemo(() => {\n    return { isSidebar, ...restOfProps }\n  }, [isSidebar, restOfProps])\n\n  const data = useMemo(() => {\n    if (typeof props.data === 'string') {\n      return props.data[0] === '[' ? JSON.parse(props.data) : []\n    }\n\n    return props.data || []\n  }, [props])\n\n  const [hasSidebar, setHasSidebar] = useState<boolean>(true)\n  const [hideSidebar, setHideSidebar] = useState<boolean>(false)\n  const [openState, setOpenState] = useState<boolean>(false)\n\n  const onChangeState = useCallback(() => {\n    setOpenState(false)\n  }, [])\n\n  const openHandler = useCallback(() => {\n    setOpenState(true)\n  }, [])\n\n  const closeHandler = useCallback(() => {\n    setOpenState(false)\n  }, [])\n\n  const getActiveStepFromProps = useCallback(() => {\n    if (typeof data[0] === 'string') {\n      return props.current_step\n    }\n\n    const dataWithItems = data as StepIndicatorDataItem[]\n\n    const itemWithCurrentStep = dataWithItems.find(\n      (item) => item.is_current\n    )\n    // Is current on data item has precedence(?) over current_step prop\n    return itemWithCurrentStep\n      ? dataWithItems.indexOf(itemWithCurrentStep)\n      : props.current_step\n  }, [data, props.current_step])\n\n  const countSteps = data.length\n  const activeStepRef = useRef<number>(getActiveStepFromProps())\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  const setActiveStep = useCallback((step: number) => {\n    activeStepRef.current = step\n    forceUpdate()\n  }, [])\n  const listOfReachedSteps = useRef(\n    [activeStepRef.current].filter(Boolean)\n  ).current\n  const mediaQueryListener = useRef(null)\n  const context = useContext(Context)\n\n  const updateStepTitle = useCallback(\n    (title: string) => {\n      return title\n        ?.replace('%step', String((activeStepRef.current || 0) + 1))\n        .replace('%count', String(data?.length || 1))\n    },\n    [data?.length]\n  )\n\n  const makeContextValue = useCallback(() => {\n    const globalContext = extendPropsWithContext(\n      props,\n      stepIndicatorDefaultProps,\n      { skeleton: context?.skeleton },\n      context.getTranslation(context).StepIndicator,\n      context.StepIndicator\n    )\n\n    const value = extendSafe(\n      { filterAttributes },\n      globalContext,\n      // Props\n      {\n        defaultProps: stepIndicatorDefaultProps,\n        props,\n      },\n      // State\n      {\n        hasSidebar,\n        hideSidebar,\n        activeStep: activeStepRef.current,\n        openState,\n        listOfReachedSteps,\n        data,\n        countSteps,\n        stepsLabel: updateStepTitle(globalContext.step_title),\n        stepsLabelExtended: updateStepTitle(\n          globalContext.step_title_extended\n        ),\n      },\n      // Functions\n      {\n        setActiveStep,\n        onChangeState,\n        openHandler,\n        closeHandler,\n      }\n    ) as StepIndicatorContextValues\n\n    value.sidebarIsVisible = value.hasSidebar && !value.hideSidebar\n\n    return value\n  }, [\n    closeHandler,\n    context,\n    countSteps,\n    data,\n    hasSidebar,\n    hideSidebar,\n    listOfReachedSteps,\n    onChangeState,\n    openHandler,\n    openState,\n    props,\n    setActiveStep,\n    updateStepTitle,\n  ])\n\n  const contextValue = makeContextValue() as StepIndicatorContextValues\n\n  // Mount and dismount\n  useEffect(() => {\n    const container = document?.getElementById(\n      'sidebar__' + props.sidebar_id\n    )\n\n    setHasSidebar(Boolean(container))\n\n    mediaQueryListener.current = onMediaQueryChange(\n      {\n        min: '0',\n        max: 'medium',\n      },\n      (hideSidebar) => {\n        setHideSidebar(hideSidebar)\n      },\n      { runOnInit: true }\n    )\n\n    return () => {\n      if (mediaQueryListener.current) {\n        mediaQueryListener.current()\n      }\n    }\n  }, [props.sidebar_id])\n\n  // Keeps the activeStep state updated with changes to the current_step and data props\n  useEffect(() => {\n    const currentStepFromProps = getActiveStepFromProps()\n\n    if (currentStepFromProps !== activeStepRef.current) {\n      setActiveStep(currentStepFromProps)\n    }\n  }, [props.current_step, data, getActiveStepFromProps, setActiveStep])\n\n  // Keeps the listOfReachedSteps state up to date with the activeStep state\n  const activeStep = activeStepRef.current\n  useEffect(() => {\n    if (!listOfReachedSteps.includes(activeStep)) {\n      listOfReachedSteps.push(activeStep)\n    }\n  }, [activeStep, listOfReachedSteps])\n\n  if (typeof window !== 'undefined' && window['IS_TEST']) {\n    contextValue['no_animation'] = true\n  }\n\n  // Filter out unwanted HTML attributes\n  Object.keys(contextValue).forEach((key) => {\n    if (key.startsWith('_')) {\n      delete contextValue[key]\n    }\n  })\n\n  return (\n    <StepIndicatorContext.Provider value={contextValue}>\n      {props.children}\n    </StepIndicatorContext.Provider>\n  )\n}\n\n/**\n * Like \"Object.assign\" – but safe\n * A new falsy value will not be used, if it exists already\n *\n * @param  {...object} objects\n * @returns object\n */\nfunction extendSafe(...objects): Record<string, unknown> {\n  const obj = {}\n\n  objects.forEach((itm) => {\n    if (itm.defaultProps && itm.props) {\n      itm = Object.entries(itm.props).reduce((acc, [k, v]) => {\n        if (itm.defaultProps[k] !== v) {\n          acc[k] = v\n        }\n        return acc\n      }, {})\n    }\n\n    Object.entries(itm).forEach(([k, v]) => {\n      if (!obj[k] || (obj[k] && v)) {\n        obj[k] = v\n      }\n    })\n  })\n\n  return obj\n}\n"],"mappings":"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"}

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

@@ -8,7 +8,7 @@ const _excluded = ["status_state", "inactive", "disabled"],
   _excluded3 = ["children", "className", "status", "status_state", "inner_ref"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import classnames from 'classnames';
 import { makeUniqueId, dispatchCustomElementEvent } from '../../shared/component-helper';
 import HeightAnimation from '../height-animation/HeightAnimation';
@@ -24,36 +24,30 @@ function StepIndicatorItem(_ref) {
       disabled: disabled_default = false
     } = _ref,
     restOfProps = _objectWithoutProperties(_ref, _excluded);
-  const props = _objectSpread({
-    status_state: status_state_default,
-    inactive: inactive_default,
-    disabled: disabled_default
-  }, restOfProps);
+  const props = useMemo(() => {
+    return _objectSpread({
+      status_state: status_state_default,
+      inactive: inactive_default,
+      disabled: disabled_default
+    }, restOfProps);
+  }, [disabled_default, inactive_default, restOfProps, status_state_default]);
   const context = useContext(StepIndicatorContext);
-  const [previousStep, setPreviousStep] = useState(context.activeStep);
-  const ref = useRef(null);
-  const thisReference = {
-    context,
-    props,
-    onClickHandler
-  };
-  useEffect(() => {
-    if (previousStep !== context.activeStep) {
-      setPreviousStep(context.activeStep);
-    }
-  }, [context.activeStep, previousStep]);
-  function onClickHandler({
+  const onClickHandler = useCallback(({
     event,
     item,
     currentItemNum
-  }) {
+  }) => {
     const params = {
       event,
       item,
       current_step: currentItemNum,
       currentStep: currentItemNum
     };
-    const onClickItem = dispatchCustomElementEvent(thisReference, 'on_click', params);
+    const onClickItem = dispatchCustomElementEvent({
+      context,
+      props,
+      onClickHandler
+    }, 'on_click', params);
     const onClickGlobal = dispatchCustomElementEvent(context, 'on_click', params);
     if (onClickItem === false || onClickGlobal === false) {
       return;
@@ -65,7 +59,7 @@ function StepIndicatorItem(_ref) {
       }
       dispatchCustomElementEvent(context, 'on_change', params);
     }
-  }
+  }, [context, props]);
   const {
     mode,
     filterAttributes,
@@ -148,9 +142,7 @@ function StepIndicatorItem(_ref) {
   }
   return React.createElement("li", _extends({}, itemParams, {
     className: classnames('dnb-step-indicator__item', itemParams.className, isCurrent && 'dnb-step-indicator__item--current', isInactive && 'dnb-step-indicator__item--inactive', isVisited && 'dnb-step-indicator__item--visited')
-  }), React.createElement(StepItemButton, _extends({}, buttonParams, {
-    inner_ref: ref
-  }), element), React.createElement("span", {
+  }), React.createElement(StepItemButton, buttonParams, element), React.createElement("span", {
     id: id,
     "aria-hidden": true,
     className: "dnb-sr-only"

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

@@ -1 +1 @@
-{"version":3,"file":"StepIndicatorItem.js","names":["React","useContext","useEffect","useRef","useState","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","previousStep","setPreviousStep","activeStep","ref","thisReference","onClickHandler","event","item","currentItemNum","params","current_step","currentStep","onClickItem","onClickGlobal","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","inner_ref","_ref2","children","_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, {\n  HTMLProps,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} 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 = {\n    status_state: status_state_default,\n    inactive: inactive_default,\n    disabled: disabled_default,\n    ...restOfProps,\n  }\n\n  const context = useContext(StepIndicatorContext)\n\n  const [previousStep, setPreviousStep] = useState<number>(\n    context.activeStep\n  )\n\n  const ref = useRef(null)\n\n  const thisReference = {\n    context,\n    props,\n    onClickHandler,\n  }\n\n  // Effect used to keep track of previous activeStep from context\n  useEffect(() => {\n    if (previousStep !== context.activeStep) {\n      setPreviousStep(context.activeStep)\n    }\n  }, [context.activeStep, previousStep])\n\n  function onClickHandler({ event, item, currentItemNum }) {\n    const params = {\n      event,\n      item,\n      current_step: currentItemNum,\n      currentStep: currentItemNum,\n    }\n\n    const onClickItem = dispatchCustomElementEvent(\n      thisReference,\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\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} inner_ref={ref}>\n        {element}\n      </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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"}
+{"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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"}

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

@@ -1,7 +1,7 @@
 "use client";
 
 var _StepIndicatorList, _StepIndicatorList2;
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import Drawer from '../drawer/Drawer';
 import StepIndicatorTriggerButton from './StepIndicatorTriggerButton';
@@ -14,20 +14,20 @@ function StepIndicatorModal() {
   useEffect(() => {
     const container = document.getElementById('sidebar__' + context.sidebar_id);
     setContainer(container);
-  }, []);
-  function closeHandler() {
+  }, [context.sidebar_id]);
+  const closeHandler = useCallback(() => {
     if (context.hasSidebar) {
       var _triggerRef$current;
       (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
     }
     context.closeHandler();
-  }
-  function renderPortal() {
+  }, [context]);
+  const renderPortal = useCallback(() => {
     if (!container) {
       return null;
     }
     return ReactDOM.createPortal(_StepIndicatorList || (_StepIndicatorList = React.createElement(StepIndicatorList, null)), container);
-  }
+  }, [container]);
   if (context.sidebarIsVisible) {
     return renderPortal();
   }

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

@@ -1 +1 @@
-{"version":3,"file":"StepIndicatorModal.js","names":["React","useContext","useEffect","useRef","useState","ReactDOM","Drawer","StepIndicatorTriggerButton","StepIndicatorList","StepIndicatorContext","StepIndicatorModal","context","container","setContainer","triggerRef","document","getElementById","sidebar_id","closeHandler","hasSidebar","_triggerRef$current","current","focus","renderPortal","createPortal","_StepIndicatorList","createElement","sidebarIsVisible","Fragment","on_click","openHandler","inner_ref","id","title","overview_title","omitTriggerButton","openState","onOpen","onClose","Body","styleType","className","stepsLabelExtended","_StepIndicatorList2"],"sources":["../../../../src/components/step-indicator/StepIndicatorModal.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React, { useContext, useEffect, useRef, useState } from 'react'\nimport ReactDOM from 'react-dom'\nimport Drawer from '../drawer/Drawer'\nimport StepIndicatorTriggerButton from './StepIndicatorTriggerButton'\nimport StepIndicatorList from './StepIndicatorList'\nimport StepIndicatorContext from './StepIndicatorContext'\n\nfunction StepIndicatorModal() {\n  const context = useContext(StepIndicatorContext)\n\n  const [container, setContainer] = useState(null)\n\n  const triggerRef = useRef(null)\n\n  useEffect(() => {\n    const container = document.getElementById(\n      'sidebar__' + context.sidebar_id\n    )\n\n    setContainer(container)\n  }, [])\n\n  function closeHandler() {\n    if (context.hasSidebar) {\n      triggerRef.current?.focus()\n    }\n    context.closeHandler()\n  }\n\n  function renderPortal() {\n    if (!container) {\n      return null\n    }\n\n    return ReactDOM.createPortal(<StepIndicatorList />, container)\n  }\n\n  if (context.sidebarIsVisible) {\n    return renderPortal()\n  }\n\n  return (\n    <>\n      <StepIndicatorTriggerButton\n        on_click={context.openHandler}\n        inner_ref={triggerRef}\n      />\n      <Drawer\n        id={context.sidebar_id}\n        title={context.overview_title}\n        omitTriggerButton\n        openState={context.openState}\n        onOpen={context.openHandler}\n        onClose={closeHandler}\n      >\n        <Drawer.Body styleType=\"white\">\n          <div className=\"dnb-step-indicator-wrapper\">\n            <p className=\"dnb-p dnb-step-indicator__label\">\n              {context.stepsLabelExtended}\n            </p>\n            <StepIndicatorList />\n          </div>\n        </Drawer.Body>\n      </Drawer>\n    </>\n  )\n}\n\nexport default StepIndicatorModal\n"],"mappings":";;;AAKA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACtE,OAAOC,QAAQ,MAAM,WAAW;AAChC,OAAOC,MAAM,MAAM,kBAAkB;AACrC,OAAOC,0BAA0B,MAAM,8BAA8B;AACrE,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzD,SAASC,kBAAkBA,CAAA,EAAG;EAC5B,MAAMC,OAAO,GAAGV,UAAU,CAACQ,oBAAoB,CAAC;EAEhD,MAAM,CAACG,SAAS,EAAEC,YAAY,CAAC,GAAGT,QAAQ,CAAC,IAAI,CAAC;EAEhD,MAAMU,UAAU,GAAGX,MAAM,CAAC,IAAI,CAAC;EAE/BD,SAAS,CAAC,MAAM;IACd,MAAMU,SAAS,GAAGG,QAAQ,CAACC,cAAc,CACvC,WAAW,GAAGL,OAAO,CAACM,UACxB,CAAC;IAEDJ,YAAY,CAACD,SAAS,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;EAEN,SAASM,YAAYA,CAAA,EAAG;IACtB,IAAIP,OAAO,CAACQ,UAAU,EAAE;MAAA,IAAAC,mBAAA;MACtB,CAAAA,mBAAA,GAAAN,UAAU,CAACO,OAAO,cAAAD,mBAAA,uBAAlBA,mBAAA,CAAoBE,KAAK,CAAC,CAAC;IAC7B;IACAX,OAAO,CAACO,YAAY,CAAC,CAAC;EACxB;EAEA,SAASK,YAAYA,CAAA,EAAG;IACtB,IAAI,CAACX,SAAS,EAAE;MACd,OAAO,IAAI;IACb;IAEA,OAAOP,QAAQ,CAACmB,YAAY,CAAAC,kBAAA,KAAAA,kBAAA,GAACzB,KAAA,CAAA0B,aAAA,CAAClB,iBAAiB,MAAE,CAAC,GAAEI,SAAS,CAAC;EAChE;EAEA,IAAID,OAAO,CAACgB,gBAAgB,EAAE;IAC5B,OAAOJ,YAAY,CAAC,CAAC;EACvB;EAEA,OACEvB,KAAA,CAAA0B,aAAA,CAAA1B,KAAA,CAAA4B,QAAA,QACE5B,KAAA,CAAA0B,aAAA,CAACnB,0BAA0B;IACzBsB,QAAQ,EAAElB,OAAO,CAACmB,WAAY;IAC9BC,SAAS,EAAEjB;EAAW,CACvB,CAAC,EACFd,KAAA,CAAA0B,aAAA,CAACpB,MAAM;IACL0B,EAAE,EAAErB,OAAO,CAACM,UAAW;IACvBgB,KAAK,EAAEtB,OAAO,CAACuB,cAAe;IAC9BC,iBAAiB;IACjBC,SAAS,EAAEzB,OAAO,CAACyB,SAAU;IAC7BC,MAAM,EAAE1B,OAAO,CAACmB,WAAY;IAC5BQ,OAAO,EAAEpB;EAAa,GAEtBlB,KAAA,CAAA0B,aAAA,CAACpB,MAAM,CAACiC,IAAI;IAACC,SAAS,EAAC;EAAO,GAC5BxC,KAAA,CAAA0B,aAAA;IAAKe,SAAS,EAAC;EAA4B,GACzCzC,KAAA,CAAA0B,aAAA;IAAGe,SAAS,EAAC;EAAiC,GAC3C9B,OAAO,CAAC+B,kBACR,CAAC,EAAAC,mBAAA,KAAAA,mBAAA,GACJ3C,KAAA,CAAA0B,aAAA,CAAClB,iBAAiB,MAAE,CAAC,CAClB,CACM,CACP,CACR,CAAC;AAEP;AAEA,eAAeE,kBAAkB"}
+{"version":3,"file":"StepIndicatorModal.js","names":["React","useCallback","useContext","useEffect","useRef","useState","ReactDOM","Drawer","StepIndicatorTriggerButton","StepIndicatorList","StepIndicatorContext","StepIndicatorModal","context","container","setContainer","triggerRef","document","getElementById","sidebar_id","closeHandler","hasSidebar","_triggerRef$current","current","focus","renderPortal","createPortal","_StepIndicatorList","createElement","sidebarIsVisible","Fragment","on_click","openHandler","inner_ref","id","title","overview_title","omitTriggerButton","openState","onOpen","onClose","Body","styleType","className","stepsLabelExtended","_StepIndicatorList2"],"sources":["../../../../src/components/step-indicator/StepIndicatorModal.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport ReactDOM from 'react-dom'\nimport Drawer from '../drawer/Drawer'\nimport StepIndicatorTriggerButton from './StepIndicatorTriggerButton'\nimport StepIndicatorList from './StepIndicatorList'\nimport StepIndicatorContext from './StepIndicatorContext'\n\nfunction StepIndicatorModal() {\n  const context = useContext(StepIndicatorContext)\n\n  const [container, setContainer] = useState(null)\n\n  const triggerRef = useRef(null)\n\n  useEffect(() => {\n    const container = document.getElementById(\n      'sidebar__' + context.sidebar_id\n    )\n\n    setContainer(container)\n  }, [context.sidebar_id])\n\n  const closeHandler = useCallback(() => {\n    if (context.hasSidebar) {\n      triggerRef.current?.focus()\n    }\n    context.closeHandler()\n  }, [context])\n\n  const renderPortal = useCallback(() => {\n    if (!container) {\n      return null\n    }\n\n    return ReactDOM.createPortal(<StepIndicatorList />, container)\n  }, [container])\n\n  if (context.sidebarIsVisible) {\n    return renderPortal()\n  }\n\n  return (\n    <>\n      <StepIndicatorTriggerButton\n        on_click={context.openHandler}\n        inner_ref={triggerRef}\n      />\n      <Drawer\n        id={context.sidebar_id}\n        title={context.overview_title}\n        omitTriggerButton\n        openState={context.openState}\n        onOpen={context.openHandler}\n        onClose={closeHandler}\n      >\n        <Drawer.Body styleType=\"white\">\n          <div className=\"dnb-step-indicator-wrapper\">\n            <p className=\"dnb-p dnb-step-indicator__label\">\n              {context.stepsLabelExtended}\n            </p>\n            <StepIndicatorList />\n          </div>\n        </Drawer.Body>\n      </Drawer>\n    </>\n  )\n}\n\nexport default StepIndicatorModal\n"],"mappings":";;;AAKA,OAAOA,KAAK,IACVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,OAAOC,QAAQ,MAAM,WAAW;AAChC,OAAOC,MAAM,MAAM,kBAAkB;AACrC,OAAOC,0BAA0B,MAAM,8BAA8B;AACrE,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzD,SAASC,kBAAkBA,CAAA,EAAG;EAC5B,MAAMC,OAAO,GAAGV,UAAU,CAACQ,oBAAoB,CAAC;EAEhD,MAAM,CAACG,SAAS,EAAEC,YAAY,CAAC,GAAGT,QAAQ,CAAC,IAAI,CAAC;EAEhD,MAAMU,UAAU,GAAGX,MAAM,CAAC,IAAI,CAAC;EAE/BD,SAAS,CAAC,MAAM;IACd,MAAMU,SAAS,GAAGG,QAAQ,CAACC,cAAc,CACvC,WAAW,GAAGL,OAAO,CAACM,UACxB,CAAC;IAEDJ,YAAY,CAACD,SAAS,CAAC;EACzB,CAAC,EAAE,CAACD,OAAO,CAACM,UAAU,CAAC,CAAC;EAExB,MAAMC,YAAY,GAAGlB,WAAW,CAAC,MAAM;IACrC,IAAIW,OAAO,CAACQ,UAAU,EAAE;MAAA,IAAAC,mBAAA;MACtB,CAAAA,mBAAA,GAAAN,UAAU,CAACO,OAAO,cAAAD,mBAAA,uBAAlBA,mBAAA,CAAoBE,KAAK,CAAC,CAAC;IAC7B;IACAX,OAAO,CAACO,YAAY,CAAC,CAAC;EACxB,CAAC,EAAE,CAACP,OAAO,CAAC,CAAC;EAEb,MAAMY,YAAY,GAAGvB,WAAW,CAAC,MAAM;IACrC,IAAI,CAACY,SAAS,EAAE;MACd,OAAO,IAAI;IACb;IAEA,OAAOP,QAAQ,CAACmB,YAAY,CAAAC,kBAAA,KAAAA,kBAAA,GAAC1B,KAAA,CAAA2B,aAAA,CAAClB,iBAAiB,MAAE,CAAC,GAAEI,SAAS,CAAC;EAChE,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,IAAID,OAAO,CAACgB,gBAAgB,EAAE;IAC5B,OAAOJ,YAAY,CAAC,CAAC;EACvB;EAEA,OACExB,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAA6B,QAAA,QACE7B,KAAA,CAAA2B,aAAA,CAACnB,0BAA0B;IACzBsB,QAAQ,EAAElB,OAAO,CAACmB,WAAY;IAC9BC,SAAS,EAAEjB;EAAW,CACvB,CAAC,EACFf,KAAA,CAAA2B,aAAA,CAACpB,MAAM;IACL0B,EAAE,EAAErB,OAAO,CAACM,UAAW;IACvBgB,KAAK,EAAEtB,OAAO,CAACuB,cAAe;IAC9BC,iBAAiB;IACjBC,SAAS,EAAEzB,OAAO,CAACyB,SAAU;IAC7BC,MAAM,EAAE1B,OAAO,CAACmB,WAAY;IAC5BQ,OAAO,EAAEpB;EAAa,GAEtBnB,KAAA,CAAA2B,aAAA,CAACpB,MAAM,CAACiC,IAAI;IAACC,SAAS,EAAC;EAAO,GAC5BzC,KAAA,CAAA2B,aAAA;IAAKe,SAAS,EAAC;EAA4B,GACzC1C,KAAA,CAAA2B,aAAA;IAAGe,SAAS,EAAC;EAAiC,GAC3C9B,OAAO,CAAC+B,kBACR,CAAC,EAAAC,mBAAA,KAAAA,mBAAA,GACJ5C,KAAA,CAAA2B,aAAA,CAAClB,iBAAiB,MAAE,CAAC,CAClB,CACM,CACP,CACR,CAAC;AAEP;AAEA,eAAeE,kBAAkB"}

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

@@ -7,7 +7,7 @@ var _StepIndicatorList;
 const _excluded = ["current_step", "data"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useContext, useEffect, useRef, useState } from 'react';
+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';
@@ -21,10 +21,12 @@ function StepIndicatorSidebar(_ref) {
       data = stepIndicatorDefaultProps.data
     } = _ref,
     restOfProps = _objectWithoutProperties(_ref, _excluded);
-  const props = _objectSpread({
-    current_step,
-    data
-  }, restOfProps);
+  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);
@@ -32,8 +34,8 @@ function StepIndicatorSidebar(_ref) {
     if (!props.showInitialData) {
       setShowInitialData(false);
     }
-  }, []);
-  function getContextAndProps() {
+  }, [props.showInitialData]);
+  const getContextAndProps = useCallback(() => {
     var _providerProps$data;
     const providerProps = extendPropsWithContext(props, stepIndicatorDefaultProps, {
       skeleton: context === null || context === void 0 ? void 0 : context.skeleton
@@ -45,7 +47,7 @@ function StepIndicatorSidebar(_ref) {
       hasSkeletonData.current = true;
     }
     return providerProps;
-  }
+  }, [context, props]);
   const providerProps = showInitialData ? getContextAndProps() : null;
   return React.createElement("div", {
     id: 'sidebar__' + props.sidebar_id,

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

@@ -1 +1 @@
-{"version":3,"file":"StepIndicatorSidebar.js","names":["React","useContext","useEffect","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","text","slice","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, { useContext, useEffect, useRef, useState } 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 = { 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  }, [])\n\n  function getContextAndProps() {\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      const text = 'Skeleton text'\n      providerProps.data = [text.slice(10), text, text, text.slice(4)]\n      providerProps.skeleton = true\n      hasSkeletonData.current = true\n    }\n\n    return providerProps\n  }\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,IAAIC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEtE,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,GAAAC,aAAA;IAAKN,YAAY;IAAEC;EAAI,GAAKC,WAAW,CAAE;EAEpD,MAAMK,OAAO,GAAGpB,UAAU,CAACM,OAAO,CAAC;EAEnC,MAAM,CAACe,eAAe,EAAEC,kBAAkB,CAAC,GAAGnB,QAAQ,CAAU,IAAI,CAAC;EAErE,MAAMoB,eAAe,GAAGrB,MAAM,CAAU,IAAI,CAAC;EAE7CD,SAAS,CAAC,MAAM;IACd,IAAI,CAACiB,KAAK,CAACG,eAAe,EAAE;MAC1BC,kBAAkB,CAAC,KAAK,CAAC;IAC3B;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,SAASE,kBAAkBA,CAAA,EAAG;IAAA,IAAAC,mBAAA;IAC5B,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;MACrC,MAAMC,IAAI,GAAG,eAAe;MAC5BL,aAAa,CAACZ,IAAI,GAAG,CAACiB,IAAI,CAACC,KAAK,CAAC,EAAE,CAAC,EAAED,IAAI,EAAEA,IAAI,EAAEA,IAAI,CAACC,KAAK,CAAC,CAAC,CAAC,CAAC;MAChEN,aAAa,CAACC,QAAQ,GAAG,IAAI;MAC7BJ,eAAe,CAACU,OAAO,GAAG,IAAI;IAChC;IAEA,OAAOP,aAAa;EACtB;EAEA,MAAMA,aAAa,GAAGL,eAAe,GAAGG,kBAAkB,CAAC,CAAC,GAAG,IAAI;EAEnE,OACEzB,KAAA,CAAAmC,aAAA;IACEC,EAAE,EAAE,WAAW,GAAGjB,KAAK,CAACkB,UAAW;IACnCC,SAAS,EAAEjC,UAAU,2DAMnBM,oBAAoB,CAACQ,KAAK,CAAC,EAH3BK,eAAe,CAACU,OAAO,KACrBP,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEC,QAAQ,KACvB,2CAEJ;EAAE,GAEDD,aAAa,IACZ3B,KAAA,CAAAmC,aAAA,CAACzB,qBAAqB,EAAA6B,QAAA;IACpBC,SAAS;IACTH,UAAU,EAAElB,KAAK,CAACkB;EAAW,GACzBV,aAAa,GAAAc,kBAAA,KAAAA,kBAAA,GAEjBzC,KAAA,CAAAmC,aAAA,CAAC3B,iBAAiB,MAAE,CAAC,CACA,CAEtB,CAAC;AAEV;AAEAI,oBAAoB,CAAC8B,qBAAqB,GAAG,IAAI;AAEjD,eAAe9B,oBAAoB"}
+{"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","text","slice","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      const text = 'Skeleton text'\n      providerProps.data = [text.slice(10), text, text, text.slice(4)]\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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"}

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","contextWithoutData","_objectWithoutProperties","_excluded","triggerParams","_objectSpread","className","skeleton","buttonParams","sidebar_id","Object","keys","forEach","key","filterAttributes","includes","createElement","id","overview_title","for_id","_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 { data, ...contextWithoutData } = 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    ...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        for_id={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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"}
+{"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","contextWithoutData","_objectWithoutProperties","_excluded","triggerParams","_objectSpread","className","skeleton","buttonParams","sidebar_id","Object","keys","forEach","key","filterAttributes","includes","createElement","id","overview_title","for_id","_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    ...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    ...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        for_id={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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"}

package/es/components/table/Table.d.ts

@@ -25,7 +25,7 @@ export type TableProps = {
      */
     size?: TableSizes;
     /**
-     * The style variant of the component.
+     * The style variant of the component. Currently not implemented.
      * Default: generic.
      */
     variant?: TableVariants;