@dnb/eufemia 10.7.0 → 10.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"StepIndicatorSidebar.js","names":["React","PropTypes","classnames","extendPropsWithContextInClassComponent","Context","StepIndicatorList","stepIndicatorPropTypes","stepIndicatorDefaultProps","StepIndicatorProvider","createSpacingClasses","StepIndicatorSidebar","PureComponent","constructor","arguments","_defineProperty","showInitialData","componentDidMount","props","setState","_hasSkeletonData","skeleton","getContextAndProps","_this$context","_this$context2","_providerProps$data","providerProps","context","getTranslation","StepIndicator","data","length","text","slice","render","state","createElement","id","sidebar_id","className","_extends","isSidebar","internalId","_StepIndicatorList","mode","current_step","process","env","NODE_ENV","propTypes","string","isRequired","bool"],"sources":["../../../../src/components/step-indicator/StepIndicatorSidebar.js"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport { extendPropsWithContextInClassComponent } from '../../shared/component-helper'\nimport Context from '../../shared/Context'\nimport StepIndicatorList from './StepIndicatorList'\nimport {\n  stepIndicatorPropTypes,\n  stepIndicatorDefaultProps,\n} from './StepIndicatorProps'\nimport { StepIndicatorProvider } from './StepIndicatorContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\n\nexport default class StepIndicatorSidebar extends React.PureComponent {\n  static contextType = Context\n  static propTypes = {\n    sidebar_id: PropTypes.string.isRequired,\n    mode: stepIndicatorPropTypes.mode,\n    current_step: stepIndicatorPropTypes.current_step,\n    data: stepIndicatorPropTypes.data,\n\n    /** Used for testing */\n    internalId: PropTypes.string,\n    showInitialData: PropTypes.bool,\n  }\n\n  static defaultProps = {\n    mode: stepIndicatorDefaultProps.mode,\n    current_step: stepIndicatorDefaultProps.current_step,\n    data: stepIndicatorDefaultProps.data,\n  }\n\n  state = { showInitialData: true }\n\n  componentDidMount() {\n    if (!this.props.showInitialData) {\n      this.setState({ showInitialData: false })\n    }\n\n    if (this._hasSkeletonData) {\n      this.setState({\n        skeleton: false,\n      })\n    }\n  }\n\n  getContextAndProps() {\n    const providerProps = extendPropsWithContextInClassComponent(\n      this.props,\n      stepIndicatorDefaultProps,\n      { skeleton: this.context?.skeleton },\n      this.context.getTranslation(this.context).StepIndicator,\n      this.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      this._hasSkeletonData = true\n    }\n\n    return providerProps\n  }\n\n  render() {\n    const providerProps = this.state.showInitialData\n      ? this.getContextAndProps()\n      : null\n\n    return (\n      <div\n        id={'sidebar__' + this.props.sidebar_id}\n        className={classnames(\n          'dnb-step-indicator-wrapper',\n          'dnb-step-indicator__sidebar',\n          this._hasSkeletonData &&\n            providerProps?.skeleton &&\n            'dnb-step-indicator__sidebar--ssr-skeleton',\n          createSpacingClasses(this.props)\n        )}\n      >\n        {providerProps && (\n          <StepIndicatorProvider\n            isSidebar\n            sidebar_id={this.props.internalId || this.props.sidebar_id}\n            {...providerProps}\n          >\n            <StepIndicatorList />\n          </StepIndicatorProvider>\n        )}\n      </div>\n    )\n  }\n}\n"],"mappings":"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"}
+{"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"],"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\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;AAEA,eAAeI,oBAAoB"}

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

@@ -1,17 +1,16 @@
-import * as React from 'react';
-export interface StepIndicatorTriggerButtonProps
-  extends React.HTMLProps<HTMLElement> {
-  /**
-   * <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>;
-}
-export default class StepIndicatorTriggerButton extends React.Component<
-  StepIndicatorTriggerButtonProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
+/**
+ * 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;
+export default StepIndicatorTriggerButton;

package/components/step-indicator/StepIndicatorTriggerButton.js

@@ -1,94 +1,78 @@
 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"];
 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 classnames from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
 import Button from '../button/Button';
 import chevron_icon from '../../icons/chevron_right_medium';
-import { validateDOMAttributes, combineDescribedBy, isTrue } from '../../shared/component-helper';
+import { validateDOMAttributes, combineDescribedBy } from '../../shared/component-helper';
 import HeightAnimationInstance from '../height-animation/HeightAnimationInstance';
 import { createSpacingClasses } from '../space/SpacingHelper';
 import FormLabel from '../form-label/FormLabel';
 import StepIndicatorContext from './StepIndicatorContext';
 import { StepItemWrapper } from './StepIndicatorItem';
 import { skeletonDOMAttributes, createSkeletonClass } from '../skeleton/SkeletonHelper';
-export default class StepIndicatorTriggerButton extends React.PureComponent {
-  constructor(props, context) {
-    super(props);
-    this._heightAnim = new HeightAnimationInstance({
-      animate: !isTrue(context.no_animation)
-    });
-    this._buttonRef = props.inner_ref || React.createRef();
-  }
-  getSnapshotBeforeUpdate() {
-    return this._heightAnim.getHeight();
-  }
-  componentDidMount() {
-    this._heightAnim.setElement(this._buttonRef.current);
-    this._prevStep = this.context.activeStep;
-  }
-  componentWillUnmount() {
-    this._heightAnim.remove();
-  }
-  componentDidUpdate(a, b, height) {
-    if (this._prevStep !== this.context.activeStep) {
-      const toHeight = this._heightAnim.getUnknownHeight();
-      this._heightAnim.adjustTo(height, toHeight);
-      this._prevStep = this.context.activeStep;
+function StepIndicatorTriggerButton(props) {
+  const context = useContext(StepIndicatorContext);
+  const buttonRef = useRef((props === null || props === void 0 ? void 0 : props.inner_ref) || null);
+  const heightAnim = useRef(new HeightAnimationInstance({
+    animate: !(context !== null && context !== void 0 && context.no_animation)
+  })).current;
+  useEffect(() => {
+    heightAnim.setElement(buttonRef.current);
+    return () => {
+      heightAnim.remove();
+    };
+  }, []);
+  useLayoutEffect(() => {
+    const height = heightAnim.getHeight();
+    const toHeight = heightAnim.getUnknownHeight();
+    heightAnim.adjustTo(height, toHeight);
+  }, [context.activeStep, heightAnim]);
+  const item = context.data[context.activeStep || 0];
+  const label = context.stepsLabel;
+  const {
+      data
+    } = context,
+    contextWithoutData = _objectWithoutProperties(context, _excluded);
+  const triggerParams = _objectSpread(_objectSpread({}, contextWithoutData), {}, {
+    className: classnames('dnb-step-indicator__trigger', createSkeletonClass('font', context.skeleton), createSpacingClasses(context)),
+    'aria-live': 'polite'
+  });
+  const buttonParams = _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames('dnb-step-indicator__trigger__button', props.className)
+  });
+  buttonParams['aria-describedby'] = combineDescribedBy(buttonParams, context.sidebar_id + '-overview');
+  Object.keys(triggerParams).forEach(key => {
+    if (context.filterAttributes.includes(key)) {
+      delete triggerParams[key];
     }
-  }
-  render() {
-    const item = this.context.data[this.context.activeStep || 0];
-    const label = this.context.stepsLabel;
-    const triggerParams = _objectSpread(_objectSpread({}, this.context), {}, {
-      sidebar_id: null,
-      className: classnames('dnb-step-indicator__trigger', createSkeletonClass('font', this.context.skeleton), createSpacingClasses(this.context)),
-      'aria-live': 'polite'
-    });
-    const buttonParams = _objectSpread(_objectSpread({}, this.props), {}, {
-      className: classnames('dnb-step-indicator__trigger__button', this.props.className)
-    });
-    buttonParams['aria-describedby'] = combineDescribedBy(buttonParams, this.context.sidebar_id + '-overview');
-    Object.keys(triggerParams).forEach(key => {
-      if (this.context.filterAttributes.includes(key)) {
-        delete triggerParams[key];
-      }
-    });
-    skeletonDOMAttributes(triggerParams, this.context.skeleton);
-    validateDOMAttributes(this.context, triggerParams);
-    return React.createElement("div", triggerParams, React.createElement("span", {
-      className: "dnb-sr-only",
-      id: this.context.sidebar_id + '-overview'
-    }, this.context.overview_title), React.createElement(FormLabel, {
-      "aria-describedby": this.context.sidebar_id,
-      for_id: this.context.sidebar_id,
-      className: "dnb-step-indicator__label"
-    }, label), React.createElement(Button, _extends({}, buttonParams, {
-      id: this.context.sidebar_id,
-      wrap: true,
-      stretch: true,
-      variant: "secondary",
-      icon: chevron_icon,
-      icon_size: "medium",
-      icon_position: "right",
-      inner_ref: this._buttonRef
-    }), React.createElement(StepItemWrapper, {
-      number: (this.context.activeStep || 0) + 1,
-      hide_numbers: this.context.hide_numbers
-    }, (typeof item === 'string' ? item : item && item.title) || '')));
-  }
+  });
+  skeletonDOMAttributes(triggerParams, context.skeleton);
+  validateDOMAttributes(context, triggerParams);
+  return 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,
+    for_id: context.sidebar_id,
+    className: "dnb-step-indicator__label"
+  }, label), React.createElement(Button, _extends({}, buttonParams, {
+    id: context.sidebar_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
+  }, (typeof item === 'string' ? item : item && item.title) || '')));
 }
-_defineProperty(StepIndicatorTriggerButton, "contextType", StepIndicatorContext);
-_defineProperty(StepIndicatorTriggerButton, "defaultProps", {
-  sidebar_id: null,
-  className: null,
-  inner_ref: null
-});
-process.env.NODE_ENV !== "production" ? StepIndicatorTriggerButton.propTypes = {
-  sidebar_id: PropTypes.string,
-  className: PropTypes.string,
-  inner_ref: PropTypes.object
-} : void 0;
+export default StepIndicatorTriggerButton;
 //# sourceMappingURL=StepIndicatorTriggerButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepIndicatorTriggerButton.js","names":["classnames","React","PropTypes","Button","chevron_icon","validateDOMAttributes","combineDescribedBy","isTrue","HeightAnimationInstance","createSpacingClasses","FormLabel","StepIndicatorContext","StepItemWrapper","skeletonDOMAttributes","createSkeletonClass","StepIndicatorTriggerButton","PureComponent","constructor","props","context","_heightAnim","animate","no_animation","_buttonRef","inner_ref","createRef","getSnapshotBeforeUpdate","getHeight","componentDidMount","setElement","current","_prevStep","activeStep","componentWillUnmount","remove","componentDidUpdate","a","b","height","toHeight","getUnknownHeight","adjustTo","render","item","data","label","stepsLabel","triggerParams","_objectSpread","sidebar_id","className","skeleton","buttonParams","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","_defineProperty","process","env","NODE_ENV","propTypes","string","object"],"sources":["../../../../src/components/step-indicator/StepIndicatorTriggerButton.js"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport classnames from 'classnames'\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport Button from '../button/Button'\nimport chevron_icon from '../../icons/chevron_right_medium'\nimport {\n  validateDOMAttributes,\n  combineDescribedBy,\n  isTrue,\n} from '../../shared/component-helper'\nimport HeightAnimationInstance from '../height-animation/HeightAnimationInstance'\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 default class StepIndicatorTriggerButton extends React.PureComponent {\n  static contextType = StepIndicatorContext\n\n  static propTypes = {\n    sidebar_id: PropTypes.string,\n    className: PropTypes.string,\n    inner_ref: PropTypes.object,\n  }\n  static defaultProps = {\n    sidebar_id: null,\n    className: null,\n    inner_ref: null,\n  }\n\n  constructor(props, context) {\n    super(props)\n    this._heightAnim = new HeightAnimationInstance({\n      animate: !isTrue(context.no_animation),\n    })\n    this._buttonRef = props.inner_ref || React.createRef()\n  }\n\n  getSnapshotBeforeUpdate() {\n    return this._heightAnim.getHeight()\n  }\n\n  componentDidMount() {\n    this._heightAnim.setElement(this._buttonRef.current)\n    this._prevStep = this.context.activeStep\n  }\n\n  componentWillUnmount() {\n    this._heightAnim.remove()\n  }\n\n  componentDidUpdate(a, b, height) {\n    if (this._prevStep !== this.context.activeStep) {\n      const toHeight = this._heightAnim.getUnknownHeight()\n\n      this._heightAnim.adjustTo(height, toHeight)\n      this._prevStep = this.context.activeStep\n    }\n  }\n\n  render() {\n    const item = this.context.data[this.context.activeStep || 0]\n    const label = this.context.stepsLabel\n\n    const triggerParams = {\n      ...this.context,\n      sidebar_id: null,\n      className: classnames(\n        'dnb-step-indicator__trigger',\n        createSkeletonClass('font', this.context.skeleton),\n        createSpacingClasses(this.context)\n      ),\n      'aria-live': 'polite',\n    }\n\n    const buttonParams = {\n      ...this.props,\n      className: classnames(\n        'dnb-step-indicator__trigger__button',\n        this.props.className\n      ),\n    }\n\n    buttonParams['aria-describedby'] = combineDescribedBy(\n      buttonParams,\n      this.context.sidebar_id + '-overview'\n    )\n\n    Object.keys(triggerParams).forEach((key) => {\n      if (this.context.filterAttributes.includes(key)) {\n        delete triggerParams[key]\n      }\n    })\n\n    skeletonDOMAttributes(triggerParams, this.context.skeleton)\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.context, triggerParams)\n\n    return (\n      <div {...triggerParams}>\n        <span\n          className=\"dnb-sr-only\"\n          id={this.context.sidebar_id + '-overview'}\n        >\n          {this.context.overview_title}\n        </span>\n        <FormLabel\n          aria-describedby={this.context.sidebar_id}\n          for_id={this.context.sidebar_id}\n          className=\"dnb-step-indicator__label\"\n        >\n          {label}\n        </FormLabel>\n        <Button\n          {...buttonParams}\n          id={this.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={this._buttonRef}\n        >\n          <StepItemWrapper\n            number={(this.context.activeStep || 0) + 1}\n            hide_numbers={this.context.hide_numbers}\n          >\n            {(typeof item === 'string' ? item : item && item.title) || ''}\n          </StepItemWrapper>\n        </Button>\n      </div>\n    )\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"StepIndicatorTriggerButton.js","names":["classnames","React","useContext","useEffect","useLayoutEffect","useRef","Button","chevron_icon","validateDOMAttributes","combineDescribedBy","HeightAnimationInstance","createSpacingClasses","FormLabel","StepIndicatorContext","StepItemWrapper","skeletonDOMAttributes","createSkeletonClass","StepIndicatorTriggerButton","props","context","buttonRef","inner_ref","heightAnim","animate","no_animation","current","setElement","remove","height","getHeight","toHeight","getUnknownHeight","adjustTo","activeStep","item","data","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, {\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n} 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 HeightAnimationInstance from '../height-animation/HeightAnimationInstance'\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 heightAnim = useRef(\n    new HeightAnimationInstance({\n      animate: !context?.no_animation,\n    })\n  ).current\n\n  useEffect(() => {\n    heightAnim.setElement(buttonRef.current)\n\n    return () => {\n      heightAnim.remove()\n    }\n  }, [])\n\n  // Adjust height\n  useLayoutEffect(() => {\n    const height = heightAnim.getHeight()\n    const toHeight = heightAnim.getUnknownHeight()\n\n    heightAnim.adjustTo(height, toHeight)\n  }, [context.activeStep, heightAnim])\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          {(typeof item === 'string' ? item : item && item.title) || ''}\n        </StepItemWrapper>\n      </Button>\n    </div>\n  )\n}\n\nexport default StepIndicatorTriggerButton\n"],"mappings":"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"}

package/components/switch/Switch.d.ts

@@ -84,6 +84,10 @@ export interface SwitchProps
    */
   on_change_end?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;
+  /**
+   * By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.
+   */
+  innerRef?: React.Ref;
 }
 export default class Switch extends React.Component<SwitchProps, any> {
   static defaultProps: object;

package/components/switch/Switch.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _AlignmentHelper, _span;
-const _excluded = ["value", "size", "status", "status_state", "status_props", "globalStatus", "status_no_animation", "suffix", "label", "label_position", "label_sr_only", "title", "disabled", "readOnly", "skeleton", "className", "class", "id", "checked", "children", "on_change", "on_state_update"];
+const _excluded = ["value", "size", "status", "status_state", "status_props", "globalStatus", "status_no_animation", "suffix", "label", "label_position", "label_sr_only", "title", "disabled", "readOnly", "skeleton", "className", "class", "id", "checked", "children", "on_change", "on_state_update", "innerRef"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
@@ -73,7 +73,7 @@ export default class Switch extends React.PureComponent {
         this._refInput.current.focus();
       }
     });
-    this._refInput = React.createRef();
+    this._refInput = props.innerRef || React.createRef();
     this._id = props.id || makeUniqueId();
     this.state = {
       _listenForPropChanges: true
@@ -112,7 +112,8 @@ export default class Switch extends React.PureComponent {
         checked: _checked,
         children,
         on_change,
-        on_state_update
+        on_state_update,
+        innerRef
       } = props,
       rest = _objectWithoutProperties(props, _excluded);
     const {
@@ -243,7 +244,8 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes = _objectSpread(_object
   value: PropTypes.string,
   attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  innerRef: PropTypes.object
 }, spacingPropTypes), {}, {
   class: PropTypes.string,
   className: PropTypes.string,

package/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["React","PropTypes","classnames","keycode","isTrue","makeUniqueId","extendPropsWithContextInClassComponent","validateDOMAttributes","getStatusState","combineDescribedBy","dispatchCustomElementEvent","includeValidProps","AlignmentHelper","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","Context","Suffix","FormLabel","FormStatus","Switch","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","checked","_checked","parseChecked","__checked","constructor","_defineProperty","event","onChangeHandler","readOnly","preventDefault","setState","on_change_end","clearTimeout","_onChangeEndId","persist","setTimeout","_refInput","current","focus","createRef","_id","id","helperParams","onMouseDown","e","componentWillUnmount","render","_this$context","defaultProps","skeleton","context","getTranslation","FormRow","value","size","status","status_state","status_props","globalStatus","status_no_animation","suffix","label","label_position","label_sr_only","title","disabled","className","class","_className","children","on_change","on_state_update","rest","_objectWithoutProperties","_excluded","showStatus","mainParams","inputParams","_objectSpread","labelComp","createElement","for_id","text","sr_only","_AlignmentHelper","_extends","show","text_id","width_selector","no_animation","name","type","role","ref","onChange","onKeyDown","onKeyDownHandler","draggable","onDragStart","_span","attributes","test","String","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message"],"sources":["../../../../src/components/switch/Switch.js"],"sourcesContent":["/**\n * Web Switch Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\nimport {\n  isTrue,\n  makeUniqueId,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport { includeValidProps } from '../form-row/FormRowHelpers'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\n/**\n * The switch component is our enhancement of the classic radio button. It acts like a switch. Example: On/off, yes/no.\n */\nexport default class Switch extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    label_position: PropTypes.oneOf(['left', 'right']),\n    label_sr_only: PropTypes.bool,\n    title: PropTypes.string,\n    checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    id: PropTypes.string,\n    size: PropTypes.oneOf(['default', 'medium', 'large']),\n    status: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    status_state: PropTypes.string,\n    status_props: PropTypes.object,\n    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    suffix: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    value: PropTypes.string,\n    attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n    readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n\n    ...spacingPropTypes,\n\n    class: PropTypes.string,\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n\n    on_change: PropTypes.func,\n    on_change_end: PropTypes.func,\n    on_state_update: PropTypes.func,\n  }\n\n  static defaultProps = {\n    label: null,\n    label_position: null,\n    label_sr_only: null,\n    title: null,\n    checked: null,\n    disabled: null,\n    id: null,\n    size: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    globalStatus: null,\n    status_no_animation: null,\n    suffix: null,\n    value: null,\n    attributes: null,\n    readOnly: false,\n    skeleton: null,\n    class: null,\n\n    className: null,\n    children: null,\n\n    on_change: null,\n    on_change_end: null,\n    on_state_update: null,\n  }\n\n  static parseChecked = (state) => /true|on/.test(String(state))\n\n  static getDerivedStateFromProps(props, state) {\n    if (state._listenForPropChanges) {\n      if (props.checked !== state._checked) {\n        state.checked = Switch.parseChecked(props.checked)\n      }\n    }\n    state._listenForPropChanges = true\n\n    if (state.checked !== state.__checked) {\n      dispatchCustomElementEvent({ props }, 'on_state_update', {\n        checked: state.checked,\n      })\n    }\n\n    state._checked = props.checked\n    state.__checked = state.checked\n\n    return state\n  }\n\n  constructor(props) {\n    super(props)\n    this._refInput = React.createRef()\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this.state = {\n      _listenForPropChanges: true,\n    }\n    this.helperParams = { onMouseDown: (e) => e.preventDefault() }\n  }\n\n  componentWillUnmount() {\n    clearTimeout(this._onChangeEndId)\n  }\n\n  onKeyDownHandler = (event) => {\n    switch (keycode(event)) {\n      case 'enter':\n        this.onChangeHandler(event)\n        break\n    }\n  }\n\n  onChangeHandler = (event) => {\n    if (isTrue(this.props.readOnly)) {\n      return event.preventDefault()\n    }\n    const checked = !this.state.checked\n    this.setState({ checked, _listenForPropChanges: false })\n    dispatchCustomElementEvent(this, 'on_change', { checked, event })\n\n    if (this.props.on_change_end) {\n      clearTimeout(this._onChangeEndId)\n      if (event && event.persist) {\n        event.persist()\n      }\n      this._onChangeEndId = setTimeout(\n        () =>\n          dispatchCustomElementEvent(this, 'on_change_end', {\n            checked,\n            event,\n          }),\n        500\n      )\n    }\n\n    // help firefox and safari to have an correct state after a click\n    if (this._refInput.current) {\n      this._refInput.current.focus()\n    }\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      Switch.defaultProps,\n      { skeleton: this.context?.skeleton },\n      this.context.getTranslation(this.props).Switch,\n      includeValidProps(this.context.FormRow),\n      this.context.Switch\n    )\n\n    const {\n      value,\n      size,\n      status,\n      status_state,\n      status_props,\n      globalStatus,\n      status_no_animation,\n      suffix,\n      label,\n      label_position,\n      label_sr_only,\n      title,\n      disabled,\n      readOnly,\n      skeleton,\n      className,\n      class: _className,\n\n      id: _id, // eslint-disable-line\n      checked: _checked, // eslint-disable-line\n      children, // eslint-disable-line\n      on_change, // eslint-disable-line\n      on_state_update, // eslint-disable-line\n\n      ...rest\n    } = props\n\n    const { checked } = this.state\n\n    const id = this._id\n    const showStatus = getStatusState(status)\n\n    const mainParams = {\n      className: classnames(\n        'dnb-switch',\n        size && `dnb-switch--${size}`,\n        status && `dnb-switch__status--${status_state}`,\n        `dnb-switch--label-position-${label_position || 'right'}`,\n        'dnb-form-component',\n        createSkeletonClass(null, skeleton),\n        createSpacingClasses(props),\n        className,\n        _className\n      ),\n    }\n\n    const inputParams = {\n      disabled: isTrue(disabled),\n      checked,\n      ...rest,\n    }\n\n    skeletonDOMAttributes(inputParams, skeleton, this.context)\n\n    if (showStatus || suffix) {\n      inputParams['aria-describedby'] = combineDescribedBy(\n        inputParams,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (readOnly) {\n      inputParams['aria-readonly'] = inputParams.readOnly = true\n    }\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, inputParams)\n\n    const labelComp = label && (\n      <FormLabel\n        id={id + '-label'}\n        for_id={id}\n        text={label}\n        disabled={disabled}\n        skeleton={skeleton}\n        sr_only={label_sr_only}\n      />\n    )\n\n    return (\n      <span {...mainParams}>\n        <span className=\"dnb-switch__order\">\n          {label_position === 'left' && labelComp}\n\n          <span className=\"dnb-switch__inner\">\n            <AlignmentHelper />\n\n            <FormStatus\n              show={showStatus}\n              id={id + '-form-status'}\n              globalStatus={globalStatus}\n              label={label}\n              text_id={id + '-status'} // used for \"aria-describedby\"\n              width_selector={id + ', ' + id + '-label'}\n              text={status}\n              state={status_state}\n              skeleton={skeleton}\n              no_animation={status_no_animation}\n              {...status_props}\n            />\n\n            <span className=\"dnb-switch__shell\">\n              {(label_position === 'right' || !label_position) &&\n                labelComp}\n\n              <span className=\"dnb-switch__row\">\n                <input\n                  id={id}\n                  name={id}\n                  type=\"checkbox\"\n                  role=\"switch\"\n                  title={title}\n                  aria-checked={checked}\n                  className=\"dnb-switch__input\"\n                  value={checked ? value || '' : ''}\n                  ref={this._refInput}\n                  {...inputParams}\n                  onChange={this.onChangeHandler}\n                  onKeyDown={this.onKeyDownHandler}\n                />\n                <span\n                  draggable\n                  aria-hidden\n                  className=\"dnb-switch__background\"\n                  onDragStart={this.onChangeHandler}\n                  {...this.helperParams}\n                />\n                <span\n                  className={classnames(\n                    'dnb-switch__button',\n                    createSkeletonClass('shape', skeleton, this.context)\n                  )}\n                  aria-hidden\n                >\n                  <span className=\"dnb-switch__focus\">\n                    <span className=\"dnb-switch__focus__inner\" />\n                  </span>\n                </span>\n              </span>\n\n              {suffix && (\n                <Suffix\n                  className=\"dnb-switch__suffix\"\n                  id={id + '-suffix'} // used for \"aria-describedby\"\n                  context={props}\n                >\n                  {suffix}\n                </Suffix>\n              )}\n            </span>\n          </span>\n        </span>\n      </span>\n    )\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Switch.js","names":["React","PropTypes","classnames","keycode","isTrue","makeUniqueId","extendPropsWithContextInClassComponent","validateDOMAttributes","getStatusState","combineDescribedBy","dispatchCustomElementEvent","includeValidProps","AlignmentHelper","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","Context","Suffix","FormLabel","FormStatus","Switch","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","checked","_checked","parseChecked","__checked","constructor","_defineProperty","event","onChangeHandler","readOnly","preventDefault","setState","on_change_end","clearTimeout","_onChangeEndId","persist","setTimeout","_refInput","current","focus","innerRef","createRef","_id","id","helperParams","onMouseDown","e","componentWillUnmount","render","_this$context","defaultProps","skeleton","context","getTranslation","FormRow","value","size","status","status_state","status_props","globalStatus","status_no_animation","suffix","label","label_position","label_sr_only","title","disabled","className","class","_className","children","on_change","on_state_update","rest","_objectWithoutProperties","_excluded","showStatus","mainParams","inputParams","_objectSpread","labelComp","createElement","for_id","text","sr_only","_AlignmentHelper","_extends","show","text_id","width_selector","no_animation","name","type","role","ref","onChange","onKeyDown","onKeyDownHandler","draggable","onDragStart","_span","attributes","test","String","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message"],"sources":["../../../../src/components/switch/Switch.js"],"sourcesContent":["/**\n * Web Switch Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\nimport {\n  isTrue,\n  makeUniqueId,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport { includeValidProps } from '../form-row/FormRowHelpers'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\n/**\n * The switch component is our enhancement of the classic radio button. It acts like a switch. Example: On/off, yes/no.\n */\nexport default class Switch extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    label_position: PropTypes.oneOf(['left', 'right']),\n    label_sr_only: PropTypes.bool,\n    title: PropTypes.string,\n    checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    id: PropTypes.string,\n    size: PropTypes.oneOf(['default', 'medium', 'large']),\n    status: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    status_state: PropTypes.string,\n    status_props: PropTypes.object,\n    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    suffix: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    value: PropTypes.string,\n    attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n    readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    innerRef: PropTypes.object,\n\n    ...spacingPropTypes,\n\n    class: PropTypes.string,\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n\n    on_change: PropTypes.func,\n    on_change_end: PropTypes.func,\n    on_state_update: PropTypes.func,\n  }\n\n  static defaultProps = {\n    label: null,\n    label_position: null,\n    label_sr_only: null,\n    title: null,\n    checked: null,\n    disabled: null,\n    id: null,\n    size: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    globalStatus: null,\n    status_no_animation: null,\n    suffix: null,\n    value: null,\n    attributes: null,\n    readOnly: false,\n    skeleton: null,\n    class: null,\n\n    className: null,\n    children: null,\n\n    on_change: null,\n    on_change_end: null,\n    on_state_update: null,\n  }\n\n  static parseChecked = (state) => /true|on/.test(String(state))\n\n  static getDerivedStateFromProps(props, state) {\n    if (state._listenForPropChanges) {\n      if (props.checked !== state._checked) {\n        state.checked = Switch.parseChecked(props.checked)\n      }\n    }\n    state._listenForPropChanges = true\n\n    if (state.checked !== state.__checked) {\n      dispatchCustomElementEvent({ props }, 'on_state_update', {\n        checked: state.checked,\n      })\n    }\n\n    state._checked = props.checked\n    state.__checked = state.checked\n\n    return state\n  }\n\n  constructor(props) {\n    super(props)\n    this._refInput = props.innerRef || React.createRef()\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this.state = {\n      _listenForPropChanges: true,\n    }\n    this.helperParams = { onMouseDown: (e) => e.preventDefault() }\n  }\n\n  componentWillUnmount() {\n    clearTimeout(this._onChangeEndId)\n  }\n\n  onKeyDownHandler = (event) => {\n    switch (keycode(event)) {\n      case 'enter':\n        this.onChangeHandler(event)\n        break\n    }\n  }\n\n  onChangeHandler = (event) => {\n    if (isTrue(this.props.readOnly)) {\n      return event.preventDefault()\n    }\n    const checked = !this.state.checked\n    this.setState({ checked, _listenForPropChanges: false })\n    dispatchCustomElementEvent(this, 'on_change', { checked, event })\n\n    if (this.props.on_change_end) {\n      clearTimeout(this._onChangeEndId)\n      if (event && event.persist) {\n        event.persist()\n      }\n      this._onChangeEndId = setTimeout(\n        () =>\n          dispatchCustomElementEvent(this, 'on_change_end', {\n            checked,\n            event,\n          }),\n        500\n      )\n    }\n\n    // help firefox and safari to have an correct state after a click\n    if (this._refInput.current) {\n      this._refInput.current.focus()\n    }\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      Switch.defaultProps,\n      { skeleton: this.context?.skeleton },\n      this.context.getTranslation(this.props).Switch,\n      includeValidProps(this.context.FormRow),\n      this.context.Switch\n    )\n\n    const {\n      value,\n      size,\n      status,\n      status_state,\n      status_props,\n      globalStatus,\n      status_no_animation,\n      suffix,\n      label,\n      label_position,\n      label_sr_only,\n      title,\n      disabled,\n      readOnly,\n      skeleton,\n      className,\n      class: _className,\n\n      id: _id, // eslint-disable-line\n      checked: _checked, // eslint-disable-line\n      children, // eslint-disable-line\n      on_change, // eslint-disable-line\n      on_state_update, // eslint-disable-line\n      innerRef, // eslint-disable-line\n\n      ...rest\n    } = props\n\n    const { checked } = this.state\n\n    const id = this._id\n    const showStatus = getStatusState(status)\n\n    const mainParams = {\n      className: classnames(\n        'dnb-switch',\n        size && `dnb-switch--${size}`,\n        status && `dnb-switch__status--${status_state}`,\n        `dnb-switch--label-position-${label_position || 'right'}`,\n        'dnb-form-component',\n        createSkeletonClass(null, skeleton),\n        createSpacingClasses(props),\n        className,\n        _className\n      ),\n    }\n\n    const inputParams = {\n      disabled: isTrue(disabled),\n      checked,\n      ...rest,\n    }\n\n    skeletonDOMAttributes(inputParams, skeleton, this.context)\n\n    if (showStatus || suffix) {\n      inputParams['aria-describedby'] = combineDescribedBy(\n        inputParams,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (readOnly) {\n      inputParams['aria-readonly'] = inputParams.readOnly = true\n    }\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, inputParams)\n\n    const labelComp = label && (\n      <FormLabel\n        id={id + '-label'}\n        for_id={id}\n        text={label}\n        disabled={disabled}\n        skeleton={skeleton}\n        sr_only={label_sr_only}\n      />\n    )\n\n    return (\n      <span {...mainParams}>\n        <span className=\"dnb-switch__order\">\n          {label_position === 'left' && labelComp}\n\n          <span className=\"dnb-switch__inner\">\n            <AlignmentHelper />\n\n            <FormStatus\n              show={showStatus}\n              id={id + '-form-status'}\n              globalStatus={globalStatus}\n              label={label}\n              text_id={id + '-status'} // used for \"aria-describedby\"\n              width_selector={id + ', ' + id + '-label'}\n              text={status}\n              state={status_state}\n              skeleton={skeleton}\n              no_animation={status_no_animation}\n              {...status_props}\n            />\n\n            <span className=\"dnb-switch__shell\">\n              {(label_position === 'right' || !label_position) &&\n                labelComp}\n\n              <span className=\"dnb-switch__row\">\n                <input\n                  id={id}\n                  name={id}\n                  type=\"checkbox\"\n                  role=\"switch\"\n                  title={title}\n                  aria-checked={checked}\n                  className=\"dnb-switch__input\"\n                  value={checked ? value || '' : ''}\n                  ref={this._refInput}\n                  {...inputParams}\n                  onChange={this.onChangeHandler}\n                  onKeyDown={this.onKeyDownHandler}\n                />\n                <span\n                  draggable\n                  aria-hidden\n                  className=\"dnb-switch__background\"\n                  onDragStart={this.onChangeHandler}\n                  {...this.helperParams}\n                />\n                <span\n                  className={classnames(\n                    'dnb-switch__button',\n                    createSkeletonClass('shape', skeleton, this.context)\n                  )}\n                  aria-hidden\n                >\n                  <span className=\"dnb-switch__focus\">\n                    <span className=\"dnb-switch__focus__inner\" />\n                  </span>\n                </span>\n              </span>\n\n              {suffix && (\n                <Suffix\n                  className=\"dnb-switch__suffix\"\n                  id={id + '-suffix'} // used for \"aria-describedby\"\n                  context={props}\n                >\n                  {suffix}\n                </Suffix>\n              )}\n            </span>\n          </span>\n        </span>\n      </span>\n    )\n  }\n}\n"],"mappings":"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"}

package/components/switch/style/themes/dnb-switch-theme-ui.scss

@@ -20,7 +20,9 @@
     &::after {
       content: '';
       position: absolute;
-      transition: transform 0.3s ease-out, position 0.3s ease-out;
+      transition:
+        transform 0.3s ease-out,
+        position 0.3s ease-out;
     }
   }
 

package/components/table/TableContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableContainer.js","names":["React","classnames","TableScrollView","createSpacingClasses","validateDOMAttributes","TableContainer","props","_content$","_content$2","children","className","rest","_objectWithoutProperties","_excluded","spacingClasses","ScrollView","isArray","Array","content","type","Head","unshift","_TableContainer$Head","createElement","key","Foot","push","_TableContainer$Foot","_extends","TableContainerBody","_excluded2","TableContainerHead","_excluded3","TableContainerFoot","_excluded4","Body"],"sources":["../../../../src/components/table/TableContainer.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport TableScrollView, { TableScrollViewProps } from './TableScrollView'\nimport { createSpacingClasses } from '../space/SpacingUtils'\n\nimport type { TableProps } from './Table'\nimport type { SpacingProps } from '../space/types'\nimport { validateDOMAttributes } from '../../shared/component-helper'\n\nexport type TableContainerProps = {\n  /**\n   * The content of the component.\n   */\n  children:\n    | [\n        React.ReactElement<TableContainerHeadProps>,\n        React.ReactElement<TableContainerBodyProps>,\n        React.ReactElement<TableContainerFootProps>\n      ]\n    | React.ReactElement<TableContainerBodyProps>\n}\n\nexport type TableContainerAllProps = TableContainerProps &\n  React.TableHTMLAttributes<HTMLTableRowElement> &\n  SpacingProps\n\ntype InternalTableContainerTableScrollView = Omit<\n  TableScrollViewProps,\n  'children'\n> & {\n  children: React.ReactNode\n}\n\nexport default function TableContainer(props: TableContainerAllProps) {\n  const { children, className, ...rest } = props\n  const spacingClasses = createSpacingClasses(props)\n\n  validateDOMAttributes(props, rest)\n\n  const ScrollView =\n    TableScrollView as React.FunctionComponent<InternalTableContainerTableScrollView>\n\n  const isArray = Array.isArray(children)\n  const content = isArray ? children : [children]\n\n  if (content[0]?.type !== TableContainer.Head) {\n    content.unshift(<TableContainer.Head key=\"head\" />)\n  }\n  if (content[2]?.type !== TableContainer.Foot) {\n    content.push(<TableContainer.Foot key=\"foot\" />)\n  }\n\n  return (\n    <section\n      className={classnames(\n        'dnb-table__container',\n        className,\n        spacingClasses\n      )}\n      {...rest}\n    >\n      <ScrollView>{content}</ScrollView>\n    </section>\n  )\n}\n\nexport type TableContainerBodyProps = {\n  /**\n   * The content of the component.\n   */\n  children:\n    | React.ReactElement<TableProps>\n    | Array<React.ReactElement<TableProps>>\n}\n\nexport function TableContainerBody(\n  props: TableContainerBodyProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames('dnb-table__container__body', className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type TableContainerHeadProps = {\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nexport function TableContainerHead(\n  props: TableContainerHeadProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames(\n        'dnb-table__container__head',\n        !children && 'dnb-table__container__head--empty',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type TableContainerFootProps = {\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nexport function TableContainerFoot(\n  props: TableContainerFootProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames(\n        'dnb-table__container__foot',\n        !children && 'dnb-table__container__foot--empty',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nTableContainer.Body = TableContainerBody\nTableContainer.Head = TableContainerHead\nTableContainer.Foot = TableContainerFoot\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,eAAe,MAAgC,mBAAmB;AACzE,SAASC,oBAAoB,QAAQ,uBAAuB;AAI5D,SAASC,qBAAqB,QAAQ,+BAA+B;AA0BrE,eAAe,SAASC,cAAcA,CAACC,KAA6B,EAAE;EAAA,IAAAC,SAAA,EAAAC,UAAA;EACpE,MAAM;MAAEC,QAAQ;MAAEC;IAAmB,CAAC,GAAGJ,KAAK;IAAdK,IAAI,GAAAC,wBAAA,CAAKN,KAAK,EAAAO,SAAA;EAC9C,MAAMC,cAAc,GAAGX,oBAAoB,CAACG,KAAK,CAAC;EAElDF,qBAAqB,CAACE,KAAK,EAAEK,IAAI,CAAC;EAElC,MAAMI,UAAU,GACdb,eAAiF;EAEnF,MAAMc,OAAO,GAAGC,KAAK,CAACD,OAAO,CAACP,QAAQ,CAAC;EACvC,MAAMS,OAAO,GAAGF,OAAO,GAAGP,QAAQ,GAAG,CAACA,QAAQ,CAAC;EAE/C,IAAI,EAAAF,SAAA,GAAAW,OAAO,CAAC,CAAC,CAAC,cAAAX,SAAA,uBAAVA,SAAA,CAAYY,IAAI,MAAKd,cAAc,CAACe,IAAI,EAAE;IAC5CF,OAAO,CAACG,OAAO,CAAAC,oBAAA,KAAAA,oBAAA,GAACtB,KAAA,CAAAuB,aAAA,CAAClB,cAAc,CAACe,IAAI;MAACI,GAAG,EAAC;IAAM,CAAE,CAAC,EAAC;EACrD;EACA,IAAI,EAAAhB,UAAA,GAAAU,OAAO,CAAC,CAAC,CAAC,cAAAV,UAAA,uBAAVA,UAAA,CAAYW,IAAI,MAAKd,cAAc,CAACoB,IAAI,EAAE;IAC5CP,OAAO,CAACQ,IAAI,CAAAC,oBAAA,KAAAA,oBAAA,GAAC3B,KAAA,CAAAuB,aAAA,CAAClB,cAAc,CAACoB,IAAI;MAACD,GAAG,EAAC;IAAM,CAAE,CAAC,EAAC;EAClD;EAEA,OACExB,KAAA,CAAAuB,aAAA,YAAAK,QAAA;IACElB,SAAS,EAAET,UAAU,CACnB,sBAAsB,EACtBS,SAAS,EACTI,cACF;EAAE,GACEH,IAAI,GAERX,KAAA,CAAAuB,aAAA,CAACR,UAAU,QAAEG,OAAoB,CAC1B,CAAC;AAEd;AAWA,OAAO,SAASW,kBAAkBA,CAChCvB,KAAqE,EACrE;EACA,MAAM;MAAEG,QAAQ;MAAEC;IAAmB,CAAC,GAAGJ,KAAK;IAAdK,IAAI,GAAAC,wBAAA,CAAKN,KAAK,EAAAwB,UAAA;EAE9C,OACE9B,KAAA,CAAAuB,aAAA,QAAAK,QAAA;IACElB,SAAS,EAAET,UAAU,CAAC,4BAA4B,EAAES,SAAS;EAAE,GAC3DC,IAAI,GAEPF,QACE,CAAC;AAEV;AASA,OAAO,SAASsB,kBAAkBA,CAChCzB,KAAqE,EACrE;EACA,MAAM;MAAEG,QAAQ;MAAEC;IAAmB,CAAC,GAAGJ,KAAK;IAAdK,IAAI,GAAAC,wBAAA,CAAKN,KAAK,EAAA0B,UAAA;EAE9C,OACEhC,KAAA,CAAAuB,aAAA,QAAAK,QAAA;IACElB,SAAS,EAAET,UAAU,CACnB,4BAA4B,EAE5BS,SAAS,EADT,CAACD,QAAQ,IAAI,mCAEf;EAAE,GACEE,IAAI,GAEPF,QACE,CAAC;AAEV;AASA,OAAO,SAASwB,kBAAkBA,CAChC3B,KAAqE,EACrE;EACA,MAAM;MAAEG,QAAQ;MAAEC;IAAmB,CAAC,GAAGJ,KAAK;IAAdK,IAAI,GAAAC,wBAAA,CAAKN,KAAK,EAAA4B,UAAA;EAE9C,OACElC,KAAA,CAAAuB,aAAA,QAAAK,QAAA;IACElB,SAAS,EAAET,UAAU,CACnB,4BAA4B,EAE5BS,SAAS,EADT,CAACD,QAAQ,IAAI,mCAEf;EAAE,GACEE,IAAI,GAEPF,QACE,CAAC;AAEV;AAEAJ,cAAc,CAAC8B,IAAI,GAAGN,kBAAkB;AACxCxB,cAAc,CAACe,IAAI,GAAGW,kBAAkB;AACxC1B,cAAc,CAACoB,IAAI,GAAGQ,kBAAkB"}
+{"version":3,"file":"TableContainer.js","names":["React","classnames","TableScrollView","createSpacingClasses","validateDOMAttributes","TableContainer","props","_content$","_content$2","children","className","rest","_objectWithoutProperties","_excluded","spacingClasses","ScrollView","isArray","Array","content","type","Head","unshift","_TableContainer$Head","createElement","key","Foot","push","_TableContainer$Foot","_extends","TableContainerBody","_excluded2","TableContainerHead","_excluded3","TableContainerFoot","_excluded4","Body"],"sources":["../../../../src/components/table/TableContainer.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport TableScrollView, { TableScrollViewProps } from './TableScrollView'\nimport { createSpacingClasses } from '../space/SpacingUtils'\n\nimport type { TableProps } from './Table'\nimport type { SpacingProps } from '../space/types'\nimport { validateDOMAttributes } from '../../shared/component-helper'\n\nexport type TableContainerProps = {\n  /**\n   * The content of the component.\n   */\n  children:\n    | [\n        React.ReactElement<TableContainerHeadProps>,\n        React.ReactElement<TableContainerBodyProps>,\n        React.ReactElement<TableContainerFootProps>,\n      ]\n    | React.ReactElement<TableContainerBodyProps>\n}\n\nexport type TableContainerAllProps = TableContainerProps &\n  React.TableHTMLAttributes<HTMLTableRowElement> &\n  SpacingProps\n\ntype InternalTableContainerTableScrollView = Omit<\n  TableScrollViewProps,\n  'children'\n> & {\n  children: React.ReactNode\n}\n\nexport default function TableContainer(props: TableContainerAllProps) {\n  const { children, className, ...rest } = props\n  const spacingClasses = createSpacingClasses(props)\n\n  validateDOMAttributes(props, rest)\n\n  const ScrollView =\n    TableScrollView as React.FunctionComponent<InternalTableContainerTableScrollView>\n\n  const isArray = Array.isArray(children)\n  const content = isArray ? children : [children]\n\n  if (content[0]?.type !== TableContainer.Head) {\n    content.unshift(<TableContainer.Head key=\"head\" />)\n  }\n  if (content[2]?.type !== TableContainer.Foot) {\n    content.push(<TableContainer.Foot key=\"foot\" />)\n  }\n\n  return (\n    <section\n      className={classnames(\n        'dnb-table__container',\n        className,\n        spacingClasses\n      )}\n      {...rest}\n    >\n      <ScrollView>{content}</ScrollView>\n    </section>\n  )\n}\n\nexport type TableContainerBodyProps = {\n  /**\n   * The content of the component.\n   */\n  children:\n    | React.ReactElement<TableProps>\n    | Array<React.ReactElement<TableProps>>\n}\n\nexport function TableContainerBody(\n  props: TableContainerBodyProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames('dnb-table__container__body', className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type TableContainerHeadProps = {\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nexport function TableContainerHead(\n  props: TableContainerHeadProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames(\n        'dnb-table__container__head',\n        !children && 'dnb-table__container__head--empty',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type TableContainerFootProps = {\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nexport function TableContainerFoot(\n  props: TableContainerFootProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const { children, className, ...rest } = props\n\n  return (\n    <div\n      className={classnames(\n        'dnb-table__container__foot',\n        !children && 'dnb-table__container__foot--empty',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nTableContainer.Body = TableContainerBody\nTableContainer.Head = TableContainerHead\nTableContainer.Foot = TableContainerFoot\n"],"mappings":"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"}

package/components/table/style/table-accordion.scss

@@ -135,7 +135,9 @@
 
   &--outline
     tbody
-    &__tr--has-accordion-content:not(#{&}__tr--expanded):not(:nth-last-child(2))
+    &__tr--has-accordion-content:not(#{&}__tr--expanded):not(
+      :nth-last-child(2)
+    )
     &__td::before {
     bottom: -0.0625rem;
   }
@@ -145,7 +147,9 @@
     background-color: var(--color-white);
   }
 
-  &__tr--has-accordion-content#{&}__tr:not(&__tr--disabled):not(:active):not(:hover):focus {
+  &__tr--has-accordion-content#{&}__tr:not(&__tr--disabled):not(
+      :active
+    ):not(:hover):focus {
     td::before {
       @include whatInput(keyboard) {
         top: 0;
@@ -175,7 +179,9 @@
     @include tableAccordionActiveColor();
   }
 
-  &__tr--has-accordion-content#{&}__tr--expanded:not(&__tr--disabled)#{&}__tr--hover:not(:active):hover
+  &__tr--has-accordion-content#{&}__tr--expanded:not(
+      &__tr--disabled
+    )#{&}__tr--hover:not(:active):hover
     &__td {
     background-color: var(--accordion-background);
 
@@ -185,7 +191,9 @@
     }
   }
 
-  &__tr--has-accordion-content#{&}__tr#{&}__tr--expanded:not(&__tr--disabled):not(:active):not(:hover) {
+  &__tr--has-accordion-content#{&}__tr#{&}__tr--expanded:not(
+      &__tr--disabled
+    ):not(:active):not(:hover) {
     @include whatInputNot('keyboard') {
       background-color: var(--accordion-background);
 
@@ -294,7 +302,9 @@
 
   &--outline
     tbody
-    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2)
+    &__tr#{&}__tr--has-accordion-content:not(
+      #{&}__tr--expanded
+    ):nth-last-child(2)
     &__td:first-of-type {
     &,
     &::before,
@@ -305,7 +315,9 @@
   &--outline tbody &__tr:last-of-type &__td:last-of-type,
   &--outline
     tbody
-    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2)
+    &__tr#{&}__tr--has-accordion-content:not(
+      #{&}__tr--expanded
+    ):nth-last-child(2)
     &__td:last-of-type {
     &,
     &::before,

package/components/table/style/table-header-buttons.scss

@@ -20,7 +20,9 @@
     .dnb-table__sort-button.dnb-button {
       > .dnb-icon {
         opacity: 0;
-        transition: opacity 200ms ease-out, transform 500ms ease-out;
+        transition:
+          opacity 200ms ease-out,
+          transform 500ms ease-out;
 
         html[data-visual-test] & {
           transition: none;

package/components/table/style/table-tr.scss

@@ -23,7 +23,9 @@
   &--outline thead &__tr:first-of-type,
   &--outline
     tbody
-    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2) {
+    &__tr#{&}__tr--has-accordion-content:not(
+      #{&}__tr--expanded
+    ):nth-last-child(2) {
     // use clip-path, because border-radius does not clip on tr's
     // use "-1rem" to add room for sticky shadow
     clip-path: inset(0 0 -1rem 0 round 0.5rem 0.5rem 0 0);
@@ -31,7 +33,9 @@
   &--outline tbody &__tr:last-of-type,
   &--outline
     tbody
-    &__tr#{&}__tr--has-accordion-content:not(#{&}__tr--expanded):nth-last-child(2) {
+    &__tr#{&}__tr--has-accordion-content:not(
+      #{&}__tr--expanded
+    ):nth-last-child(2) {
     // use clip-path, because border-radius does not clip on tr's
     clip-path: inset(0 round 0 0 0.5rem 0.5rem);
   }