@dnb/eufemia 10.75.3 → 10.76.0

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

@@ -3,7 +3,7 @@
 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 = ["className"],
+const _excluded = ["className", "isNested"],
   _excluded2 = ["data"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -20,7 +20,8 @@ import StepIndicatorContext from './StepIndicatorContext';
 import { skeletonDOMAttributes, createSkeletonClass } from '../skeleton/SkeletonHelper';
 function StepIndicatorTriggerButton(_ref) {
   let {
-      className
+      className,
+      isNested
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const _useContext = useContext(StepIndicatorContext),
@@ -67,7 +68,8 @@ function StepIndicatorTriggerButton(_ref) {
       small: false,
       medium: [true, true, !openState, !openState],
       large: [true, true, !openState, !openState]
-    }
+    },
+    outset: isNested ? true : undefined
   }, React.createElement(HeightAnimation, {
     animate: !no_animation
   }, React.createElement("div", triggerParams, React.createElement("span", {

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

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

package/es/components/switch/Switch.d.ts

@@ -6,10 +6,15 @@ import { SpacingProps } from '../space/types';
 export type SwitchLabelPosition = 'left' | 'right';
 export type SwitchSize = 'default' | 'medium' | 'large';
 export type SwitchAttributes = string | Record<string, unknown>;
-export type SwitchOnChange = (args: {
+export type SwitchOnChangeParams = {
     checked: boolean;
     event: MouseEvent | TouchEvent | KeyboardEvent;
-}) => void;
+};
+export type SwitchOnClickParams = React.MouseEvent<HTMLInputElement> & {
+    checked: boolean;
+    event: React.MouseEvent<HTMLInputElement>;
+};
+export type SwitchOnChange = (args: SwitchOnChangeParams) => void;
 export type SwitchProps = {
     /**
      * Use either the `label` property or provide a custom one.
@@ -74,13 +79,17 @@ export type SwitchProps = {
     /**
      * Will be called on state changes made by the user, but with a delay. This way the user sees the animation before e.g. an error will be removed. Returns a boolean `{ checked, event }`.
      */
+    /**
+     * Will be called on click made by the user. Returns the ClickEvent.
+     */
+    onClick?: (args: SwitchOnClickParams) => void;
     onChangeEnd?: SwitchOnChange;
     onStateUpdate?: SwitchOnChange;
     /**
      * 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.MutableRefObject<HTMLInputElement> | ((elem: HTMLInputElement) => void);
-} & Omit<React.HTMLProps<HTMLElement>, 'ref' | 'size' | 'onChange' | 'innerRef' | 'label'> & SpacingProps & DeprecatedSwitchProps;
+} & Omit<React.HTMLProps<HTMLElement>, 'ref' | 'size' | 'onChange' | 'onClick' | 'innerRef' | 'label'> & SpacingProps & DeprecatedSwitchProps;
 type DeprecatedSwitchProps = {
     /**  @deprecated use `labelPosition` */
     label_position?: SwitchLabelPosition;

package/es/components/switch/Switch.js

@@ -4,10 +4,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _AlignmentHelper, _span;
-const _excluded = ["value", "size", "status", "statusState", "statusProps", "globalStatus", "statusNoAnimation", "suffix", "label", "labelPosition", "labelSrOnly", "title", "disabled", "readOnly", "skeleton", "className", "id", "checked", "onChange", "onChangeEnd", "innerRef"];
+const _excluded = ["value", "size", "status", "statusState", "statusProps", "globalStatus", "statusNoAnimation", "suffix", "label", "labelPosition", "labelSrOnly", "title", "disabled", "readOnly", "skeleton", "className", "id", "checked", "onChange", "onChangeEnd", "onClick", "innerRef"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useReducer, useRef } from 'react';
 import classnames from 'classnames';
 import { validateDOMAttributes, getStatusState, combineDescribedBy, extendPropsWithContext } from '../../shared/component-helper';
 import { pickFormElementProps } from '../../shared/helpers/filterValidProps';
@@ -47,26 +47,30 @@ export default function Switch(props) {
       checked: checkedProp,
       onChange,
       onChangeEnd,
+      onClick,
       innerRef: innerRefProp
     } = allProps,
     rest = _objectWithoutProperties(allProps, _excluded);
-  const [isChecked, setIsChecked] = useState(checkedProp !== null && checkedProp !== void 0 ? checkedProp : false);
-  const [prevChecked, setPrevChecked] = useState(checkedProp);
+  const [, forceUpdate] = useReducer(() => ({}), {});
   const id = useId(idProp);
   const isFn = typeof innerRefProp === 'function';
   const refHook = useRef();
   const innerRef = !isFn && innerRefProp || refHook;
+  const preventChangeRef = useRef(false);
+  const isCheckedRef = useRef(checkedProp !== null && checkedProp !== void 0 ? checkedProp : false);
+  const prevCheckedRef = useRef(checkedProp);
   useEffect(() => {
     if (isFn) {
       innerRefProp === null || innerRefProp === void 0 ? void 0 : innerRefProp(refHook.current);
     }
   }, [innerRefProp, isFn, refHook]);
   useEffect(() => {
-    if (checkedProp !== prevChecked) {
-      setIsChecked(!!checkedProp);
-      setPrevChecked(!!checkedProp);
+    if (checkedProp !== prevCheckedRef.current) {
+      isCheckedRef.current = !!checkedProp;
+      prevCheckedRef.current = !!checkedProp;
+      forceUpdate();
     }
-  }, [checkedProp, prevChecked]);
+  }, [checkedProp]);
   const callOnChange = useCallback(({
     checked,
     event
@@ -77,11 +81,12 @@ export default function Switch(props) {
     });
   }, [onChange]);
   const onChangeHandler = useCallback(event => {
-    if (readOnly) {
-      return event.preventDefault();
+    if (preventChangeRef.current) {
+      return;
     }
-    const updatedChecked = !isChecked;
-    setIsChecked(updatedChecked);
+    const updatedChecked = !isCheckedRef.current;
+    isCheckedRef.current = updatedChecked;
+    forceUpdate();
     callOnChange({
       checked: updatedChecked,
       event
@@ -98,7 +103,25 @@ export default function Switch(props) {
     if (innerRef.current) {
       innerRef.current.focus();
     }
-  }, [callOnChange, innerRef, isChecked, onChangeEnd, readOnly]);
+  }, [callOnChange, innerRef, onChangeEnd]);
+  const onClickHandler = useCallback(event => {
+    const preventDefault = () => {
+      event.preventDefault();
+      if (event.target['checked'] !== isCheckedRef.current) {
+        preventChangeRef.current = true;
+        isCheckedRef.current = !isCheckedRef.current;
+        forceUpdate();
+      }
+    };
+    if (readOnly) {
+      return preventDefault();
+    }
+    onClick === null || onClick === void 0 ? void 0 : onClick(_objectSpread({
+      checked: isCheckedRef.current,
+      preventDefault,
+      event
+    }, event));
+  }, [onClick, readOnly]);
   const onKeyDownHandler = useCallback(event => {
     switch (event.code) {
       case 'Enter':
@@ -112,7 +135,7 @@ export default function Switch(props) {
   };
   const inputParams = _objectSpread({
     disabled,
-    checked: isChecked
+    checked: isCheckedRef.current
   }, rest);
   if (showStatus || suffix) {
     inputParams['aria-describedby'] = combineDescribedBy(inputParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
@@ -157,12 +180,13 @@ export default function Switch(props) {
     type: "checkbox",
     role: "switch",
     title: title,
-    "aria-checked": isChecked,
+    "aria-checked": isCheckedRef.current,
     className: "dnb-switch__input",
-    value: isChecked ? value || '' : '',
+    value: isCheckedRef.current ? value || '' : '',
     ref: innerRef
   }, inputParams, {
     onChange: onChangeHandler,
+    onClick: onClickHandler,
     onKeyDown: onKeyDownHandler
   })), React.createElement("span", _extends({
     draggable: true,

package/es/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["React","useCallback","useContext","useEffect","useMemo","useRef","useState","classnames","validateDOMAttributes","getStatusState","combineDescribedBy","extendPropsWithContext","pickFormElementProps","AlignmentHelper","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","Context","Suffix","FormLabel","FormStatus","convertSnakeCaseProps","useId","defaultProps","statusState","Switch","props","context","allProps","extractPropsFromContext","value","size","status","statusProps","globalStatus","statusNoAnimation","suffix","label","labelPosition","labelSrOnly","title","disabled","readOnly","skeleton","className","id","idProp","checked","checkedProp","onChange","onChangeEnd","innerRef","innerRefProp","rest","_objectWithoutProperties","_excluded","isChecked","setIsChecked","prevChecked","setPrevChecked","isFn","refHook","current","callOnChange","event","onChangeHandler","preventDefault","updatedChecked","persist","setTimeout","focus","onKeyDownHandler","code","showStatus","mainParams","inputParams","_objectSpread","helperParams","onMouseDown","e","labelComp","createElement","forId","text","srOnly","_AlignmentHelper","_extends","show","width_selector","state","no_animation","name","type","role","ref","onKeyDown","draggable","onDragStart","_span","FormRow","formElement"],"sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import React, {\n  KeyboardEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport classnames from 'classnames'\nimport {\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } 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, {\n  FormStatusState,\n  FormStatusText,\n} from '../form-status/FormStatus'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\nimport useId from '../../shared/helpers/useId'\nimport { GlobalStatusConfigObject } from '../GlobalStatus'\nimport { SkeletonShow } from '../Skeleton'\nimport { SpacingProps } from '../space/types'\n\nexport type SwitchLabelPosition = 'left' | 'right'\nexport type SwitchSize = 'default' | 'medium' | 'large'\nexport type SwitchAttributes = string | Record<string, unknown>\nexport type SwitchOnChange = (args: {\n  checked: boolean\n  event: MouseEvent | TouchEvent | KeyboardEvent\n}) => void\n\nexport type SwitchProps = {\n  /**\n   * Use either the `label` property or provide a custom one.\n   */\n  label?: React.ReactNode\n  /**\n   * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.\n   */\n  labelPosition?: SwitchLabelPosition\n  /**\n   * Use `true` to make the label only readable by screen readers.\n   */\n  labelSrOnly?: boolean\n  /**\n   * <em>(required)</em> the `title` of the input - describing it a bit further for accessibility reasons.\n   */\n  title?: string\n  /**\n   * Determine whether the switch is checked or not. The default will be `false`.\n   */\n  checked?: boolean\n  disabled?: boolean\n  id?: string\n  /**\n   * The size of the switch. For now there is \"medium\" (default) and \"large\".\n   */\n  size?: SwitchSize\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Use an object to define additional FormStatus properties.\n   */\n  statusProps?: Record<string, unknown>\n  /**\n   * The <a href=\"/uilib/components/global-status/properties/#configuration-object\">configuration</a> used for the target <a href=\"/uilib/components/global-status\">GlobalStatus</a>.\n   */\n  globalStatus?: GlobalStatusConfigObject\n  statusNoAnimation?: boolean\n  /**\n   * Text describing the content of the Switch more than the label. You can also send in a React component, so it gets wrapped inside the Switch component.\n   */\n  suffix?: React.ReactNode\n  value?: string\n  attributes?: SwitchAttributes\n  readOnly?: boolean\n  /**\n   * If set to `true`, an overlaying skeleton with animation will be shown.\n   */\n  skeleton?: SkeletonShow\n  className?: string\n  children?: React.ReactNode\n  /**\n   * Will be called on state changes made by the user. Returns a boolean `{ checked, event }`.\n   */\n  onChange?: SwitchOnChange\n  /**\n   * Will be called on state changes made by the user, but with a delay. This way the user sees the animation before e.g. an error will be removed. Returns a boolean `{ checked, event }`.\n   */\n  onChangeEnd?: SwitchOnChange\n  onStateUpdate?: SwitchOnChange\n  /**\n   * 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()`.\n   */\n  innerRef?:\n    | React.MutableRefObject<HTMLInputElement>\n    | ((elem: HTMLInputElement) => void)\n} & Omit<\n  React.HTMLProps<HTMLElement>,\n  'ref' | 'size' | 'onChange' | 'innerRef' | 'label'\n> &\n  SpacingProps &\n  DeprecatedSwitchProps\n\n// deprecated, can be removed in v11\ntype DeprecatedSwitchProps = {\n  /**  @deprecated use `labelPosition` */\n  label_position?: SwitchLabelPosition\n  /**  @deprecated use `labelSrOnly` */\n  label_sr_only?: boolean\n  /**  @deprecated use `statusState` */\n  status_state?: FormStatusState\n  /**  @deprecated use `statusProps` */\n  status_props?: Record<string, unknown>\n  /**  @deprecated use `onChange` */\n  on_change?: SwitchOnChange\n  /**  @deprecated use `onChangeEnd` */\n  on_change_end?: SwitchOnChange\n  /**  @deprecated use `onStateUpdate` */\n  on_state_update?: SwitchOnChange\n  /**  @deprecated use `statusNoAnimation` */\n  status_no_animation?: boolean\n}\n\nconst defaultProps = {\n  statusState: 'error',\n}\n\nexport default function Switch(props: SwitchProps) {\n  const context = useContext(Context)\n\n  const allProps = extractPropsFromContext()\n\n  const {\n    value,\n    size,\n    status,\n    statusState,\n    statusProps,\n    globalStatus,\n    statusNoAnimation,\n    suffix,\n    label,\n    labelPosition,\n    labelSrOnly,\n    title,\n    disabled,\n    readOnly,\n    skeleton,\n    className,\n    id: idProp,\n    checked: checkedProp,\n    onChange,\n    onChangeEnd,\n    innerRef: innerRefProp,\n    ...rest\n  } = allProps\n\n  const [isChecked, setIsChecked] = useState(checkedProp ?? false)\n  const [prevChecked, setPrevChecked] = useState(checkedProp)\n\n  const id = useId(idProp)\n  const isFn = typeof innerRefProp === 'function'\n  const refHook = useRef<HTMLInputElement>()\n  const innerRef = (!isFn && innerRefProp) || refHook\n\n  useEffect(() => {\n    if (isFn) {\n      innerRefProp?.(refHook.current)\n    }\n  }, [innerRefProp, isFn, refHook])\n\n  useEffect(() => {\n    if (checkedProp !== prevChecked) {\n      setIsChecked(!!checkedProp)\n      setPrevChecked(!!checkedProp)\n    }\n  }, [checkedProp, prevChecked])\n\n  const callOnChange = useCallback(\n    ({ checked, event }) => {\n      onChange?.({ checked, event })\n    },\n    [onChange]\n  )\n\n  const onChangeHandler = useCallback(\n    (event) => {\n      if (readOnly) {\n        return event.preventDefault()\n      }\n      const updatedChecked = !isChecked\n\n      setIsChecked(updatedChecked)\n      callOnChange({ checked: updatedChecked, event })\n\n      if (onChangeEnd) {\n        if (event && event.persist) {\n          event.persist()\n        }\n        setTimeout(\n          () => onChangeEnd({ checked: updatedChecked, event }),\n          500\n        )\n      }\n\n      // help firefox and safari to have an correct state after a click\n      if (innerRef.current) {\n        innerRef.current.focus()\n      }\n    },\n    [callOnChange, innerRef, isChecked, onChangeEnd, readOnly]\n  )\n\n  const onKeyDownHandler = useCallback(\n    (event: KeyboardEvent) => {\n      switch (event.code) {\n        case 'Enter':\n          onChangeHandler(event)\n          break\n      }\n    },\n    [onChangeHandler]\n  )\n\n  const showStatus = useMemo(() => getStatusState(status), [status])\n\n  const mainParams = {\n    className: classnames(\n      'dnb-switch',\n      size && `dnb-switch--${size}`,\n      status && `dnb-switch__status--${statusState}`,\n      `dnb-switch--label-position-${labelPosition || 'right'}`,\n      'dnb-form-component',\n      createSkeletonClass(null, skeleton),\n      createSpacingClasses(props),\n      className\n    ),\n  }\n\n  const inputParams = {\n    disabled,\n    checked: isChecked,\n    ...rest,\n  }\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'] = readOnly\n  }\n\n  skeletonDOMAttributes(inputParams, skeleton, context)\n  validateDOMAttributes(props, inputParams)\n\n  const helperParams = useMemo(\n    () => ({\n      onMouseDown: (e: React.MouseEvent<HTMLSpanElement>) =>\n        e.preventDefault(),\n    }),\n    []\n  )\n\n  const labelComp = useMemo(\n    () =>\n      label && (\n        <FormLabel\n          id={id + '-label'}\n          forId={id}\n          text={label}\n          disabled={disabled}\n          skeleton={skeleton}\n          srOnly={labelSrOnly}\n        />\n      ),\n    [disabled, id, label, labelSrOnly, skeleton]\n  )\n\n  return (\n    <span {...mainParams}>\n      <span className=\"dnb-switch__order\">\n        {labelPosition === '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            width_selector={id + ', ' + id + '-label'}\n            text={status}\n            state={statusState}\n            skeleton={skeleton}\n            no_animation={statusNoAnimation}\n            {...statusProps}\n          />\n\n          <span className=\"dnb-switch__shell\">\n            {(labelPosition === 'right' || !labelPosition) && 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={isChecked}\n                className=\"dnb-switch__input\"\n                value={isChecked ? value || '' : ''}\n                ref={innerRef}\n                {...inputParams}\n                onChange={onChangeHandler}\n                onKeyDown={onKeyDownHandler}\n              />\n              <span\n                draggable\n                aria-hidden\n                className=\"dnb-switch__background\"\n                onDragStart={onChangeHandler}\n                {...helperParams}\n              />\n              <span\n                className={classnames(\n                  'dnb-switch__button',\n                  createSkeletonClass('shape', skeleton, 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  function extractPropsFromContext() {\n    return extendPropsWithContext(\n      convertSnakeCaseProps(props),\n      defaultProps,\n      { skeleton: context?.skeleton },\n      // Deprecated – can be removed in v11\n      pickFormElementProps(context?.FormRow),\n      pickFormElementProps(context?.formElement),\n      context.Switch\n    )\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Switch.js","names":["React","useCallback","useContext","useEffect","useMemo","useReducer","useRef","classnames","validateDOMAttributes","getStatusState","combineDescribedBy","extendPropsWithContext","pickFormElementProps","AlignmentHelper","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","Context","Suffix","FormLabel","FormStatus","convertSnakeCaseProps","useId","defaultProps","statusState","Switch","props","context","allProps","extractPropsFromContext","value","size","status","statusProps","globalStatus","statusNoAnimation","suffix","label","labelPosition","labelSrOnly","title","disabled","readOnly","skeleton","className","id","idProp","checked","checkedProp","onChange","onChangeEnd","onClick","innerRef","innerRefProp","rest","_objectWithoutProperties","_excluded","forceUpdate","isFn","refHook","preventChangeRef","isCheckedRef","prevCheckedRef","current","callOnChange","event","onChangeHandler","updatedChecked","persist","setTimeout","focus","onClickHandler","preventDefault","target","_objectSpread","onKeyDownHandler","code","showStatus","mainParams","inputParams","helperParams","onMouseDown","e","labelComp","createElement","forId","text","srOnly","_AlignmentHelper","_extends","show","width_selector","state","no_animation","name","type","role","ref","onKeyDown","draggable","onDragStart","_span","FormRow","formElement"],"sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import React, {\n  KeyboardEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport {\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } 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, {\n  FormStatusState,\n  FormStatusText,\n} from '../form-status/FormStatus'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\nimport useId from '../../shared/helpers/useId'\nimport { GlobalStatusConfigObject } from '../GlobalStatus'\nimport { SkeletonShow } from '../Skeleton'\nimport { SpacingProps } from '../space/types'\n\nexport type SwitchLabelPosition = 'left' | 'right'\nexport type SwitchSize = 'default' | 'medium' | 'large'\nexport type SwitchAttributes = string | Record<string, unknown>\nexport type SwitchOnChangeParams = {\n  checked: boolean\n  event: MouseEvent | TouchEvent | KeyboardEvent\n}\nexport type SwitchOnClickParams = React.MouseEvent<HTMLInputElement> & {\n  checked: boolean\n  event: React.MouseEvent<HTMLInputElement>\n}\nexport type SwitchOnChange = (args: SwitchOnChangeParams) => void\n\nexport type SwitchProps = {\n  /**\n   * Use either the `label` property or provide a custom one.\n   */\n  label?: React.ReactNode\n  /**\n   * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.\n   */\n  labelPosition?: SwitchLabelPosition\n  /**\n   * Use `true` to make the label only readable by screen readers.\n   */\n  labelSrOnly?: boolean\n  /**\n   * <em>(required)</em> the `title` of the input - describing it a bit further for accessibility reasons.\n   */\n  title?: string\n  /**\n   * Determine whether the switch is checked or not. The default will be `false`.\n   */\n  checked?: boolean\n  disabled?: boolean\n  id?: string\n  /**\n   * The size of the switch. For now there is \"medium\" (default) and \"large\".\n   */\n  size?: SwitchSize\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Use an object to define additional FormStatus properties.\n   */\n  statusProps?: Record<string, unknown>\n  /**\n   * The <a href=\"/uilib/components/global-status/properties/#configuration-object\">configuration</a> used for the target <a href=\"/uilib/components/global-status\">GlobalStatus</a>.\n   */\n  globalStatus?: GlobalStatusConfigObject\n  statusNoAnimation?: boolean\n  /**\n   * Text describing the content of the Switch more than the label. You can also send in a React component, so it gets wrapped inside the Switch component.\n   */\n  suffix?: React.ReactNode\n  value?: string\n  attributes?: SwitchAttributes\n  readOnly?: boolean\n  /**\n   * If set to `true`, an overlaying skeleton with animation will be shown.\n   */\n  skeleton?: SkeletonShow\n  className?: string\n  children?: React.ReactNode\n  /**\n   * Will be called on state changes made by the user. Returns a boolean `{ checked, event }`.\n   */\n  onChange?: SwitchOnChange\n  /**\n   * Will be called on state changes made by the user, but with a delay. This way the user sees the animation before e.g. an error will be removed. Returns a boolean `{ checked, event }`.\n   */\n  /**\n   * Will be called on click made by the user. Returns the ClickEvent.\n   */\n  onClick?: (args: SwitchOnClickParams) => void\n  onChangeEnd?: SwitchOnChange\n  onStateUpdate?: SwitchOnChange\n  /**\n   * 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()`.\n   */\n  innerRef?:\n    | React.MutableRefObject<HTMLInputElement>\n    | ((elem: HTMLInputElement) => void)\n} & Omit<\n  React.HTMLProps<HTMLElement>,\n  'ref' | 'size' | 'onChange' | 'onClick' | 'innerRef' | 'label'\n> &\n  SpacingProps &\n  DeprecatedSwitchProps\n\n// deprecated, can be removed in v11\ntype DeprecatedSwitchProps = {\n  /**  @deprecated use `labelPosition` */\n  label_position?: SwitchLabelPosition\n  /**  @deprecated use `labelSrOnly` */\n  label_sr_only?: boolean\n  /**  @deprecated use `statusState` */\n  status_state?: FormStatusState\n  /**  @deprecated use `statusProps` */\n  status_props?: Record<string, unknown>\n  /**  @deprecated use `onChange` */\n  on_change?: SwitchOnChange\n  /**  @deprecated use `onChangeEnd` */\n  on_change_end?: SwitchOnChange\n  /**  @deprecated use `onStateUpdate` */\n  on_state_update?: SwitchOnChange\n  /**  @deprecated use `statusNoAnimation` */\n  status_no_animation?: boolean\n}\n\nconst defaultProps = {\n  statusState: 'error',\n}\n\nexport default function Switch(props: SwitchProps) {\n  const context = useContext(Context)\n\n  const allProps = extractPropsFromContext()\n\n  const {\n    value,\n    size,\n    status,\n    statusState,\n    statusProps,\n    globalStatus,\n    statusNoAnimation,\n    suffix,\n    label,\n    labelPosition,\n    labelSrOnly,\n    title,\n    disabled,\n    readOnly,\n    skeleton,\n    className,\n    id: idProp,\n    checked: checkedProp,\n    onChange,\n    onChangeEnd,\n    onClick,\n    innerRef: innerRefProp,\n    ...rest\n  } = allProps\n\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  const id = useId(idProp)\n  const isFn = typeof innerRefProp === 'function'\n  const refHook = useRef<HTMLInputElement>()\n  const innerRef = (!isFn && innerRefProp) || refHook\n\n  const preventChangeRef = useRef(false)\n  const isCheckedRef = useRef(checkedProp ?? false)\n  const prevCheckedRef = useRef(checkedProp)\n\n  useEffect(() => {\n    if (isFn) {\n      innerRefProp?.(refHook.current)\n    }\n  }, [innerRefProp, isFn, refHook])\n\n  useEffect(() => {\n    if (checkedProp !== prevCheckedRef.current) {\n      isCheckedRef.current = !!checkedProp\n      prevCheckedRef.current = !!checkedProp\n      forceUpdate()\n    }\n  }, [checkedProp])\n\n  const callOnChange = useCallback(\n    ({ checked, event }) => {\n      onChange?.({ checked, event })\n    },\n    [onChange]\n  )\n\n  const onChangeHandler = useCallback(\n    (event) => {\n      if (preventChangeRef.current) {\n        return // stop here\n      }\n\n      const updatedChecked = !isCheckedRef.current\n\n      isCheckedRef.current = updatedChecked\n      forceUpdate()\n      callOnChange({ checked: updatedChecked, event })\n\n      if (onChangeEnd) {\n        if (event && event.persist) {\n          event.persist()\n        }\n        setTimeout(\n          () => onChangeEnd({ checked: updatedChecked, event }),\n          500\n        )\n      }\n\n      // help firefox and safari to have an correct state after a click\n      if (innerRef.current) {\n        innerRef.current.focus()\n      }\n    },\n    [callOnChange, innerRef, onChangeEnd]\n  )\n\n  const onClickHandler: React.MouseEventHandler<HTMLInputElement> =\n    useCallback(\n      (event) => {\n        const preventDefault = () => {\n          event.preventDefault()\n\n          if (event.target['checked'] !== isCheckedRef.current) {\n            preventChangeRef.current = true\n            isCheckedRef.current = !isCheckedRef.current\n            forceUpdate()\n          }\n        }\n\n        if (readOnly) {\n          return preventDefault()\n        }\n\n        onClick?.({\n          checked: isCheckedRef.current,\n          preventDefault,\n          event,\n          ...event,\n        })\n      },\n      [onClick, readOnly]\n    )\n\n  const onKeyDownHandler = useCallback(\n    (event: KeyboardEvent) => {\n      switch (event.code) {\n        case 'Enter':\n          onChangeHandler(event)\n          break\n      }\n    },\n    [onChangeHandler]\n  )\n\n  const showStatus = useMemo(() => getStatusState(status), [status])\n\n  const mainParams = {\n    className: classnames(\n      'dnb-switch',\n      size && `dnb-switch--${size}`,\n      status && `dnb-switch__status--${statusState}`,\n      `dnb-switch--label-position-${labelPosition || 'right'}`,\n      'dnb-form-component',\n      createSkeletonClass(null, skeleton),\n      createSpacingClasses(props),\n      className\n    ),\n  }\n\n  const inputParams = {\n    disabled,\n    checked: isCheckedRef.current,\n    ...rest,\n  }\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'] = readOnly\n  }\n\n  skeletonDOMAttributes(inputParams, skeleton, context)\n  validateDOMAttributes(props, inputParams)\n\n  const helperParams = useMemo(\n    () => ({\n      onMouseDown: (e: React.MouseEvent<HTMLSpanElement>) =>\n        e.preventDefault(),\n    }),\n    []\n  )\n\n  const labelComp = useMemo(\n    () =>\n      label && (\n        <FormLabel\n          id={id + '-label'}\n          forId={id}\n          text={label}\n          disabled={disabled}\n          skeleton={skeleton}\n          srOnly={labelSrOnly}\n        />\n      ),\n    [disabled, id, label, labelSrOnly, skeleton]\n  )\n\n  return (\n    <span {...mainParams}>\n      <span className=\"dnb-switch__order\">\n        {labelPosition === '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            width_selector={id + ', ' + id + '-label'}\n            text={status}\n            state={statusState}\n            skeleton={skeleton}\n            no_animation={statusNoAnimation}\n            {...statusProps}\n          />\n\n          <span className=\"dnb-switch__shell\">\n            {(labelPosition === 'right' || !labelPosition) && 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={isCheckedRef.current}\n                className=\"dnb-switch__input\"\n                value={isCheckedRef.current ? value || '' : ''}\n                ref={innerRef}\n                {...inputParams}\n                onChange={onChangeHandler}\n                onClick={onClickHandler}\n                onKeyDown={onKeyDownHandler}\n              />\n              <span\n                draggable\n                aria-hidden\n                className=\"dnb-switch__background\"\n                onDragStart={onChangeHandler}\n                {...helperParams}\n              />\n              <span\n                className={classnames(\n                  'dnb-switch__button',\n                  createSkeletonClass('shape', skeleton, 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  function extractPropsFromContext() {\n    return extendPropsWithContext(\n      convertSnakeCaseProps(props),\n      defaultProps,\n      { skeleton: context?.skeleton },\n      // Deprecated – can be removed in v11\n      pickFormElementProps(context?.FormRow),\n      pickFormElementProps(context?.formElement),\n      context.Switch\n    )\n  }\n}\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,IAEVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,MAAM,QACD,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,qBAAqB,EACrBC,cAAc,EACdC,kBAAkB,EAClBC,sBAAsB,QACjB,+BAA+B;AACtC,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,OAAOC,eAAe,MAAM,8BAA8B;AAC1D,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SACEC,qBAAqB,EACrBC,mBAAmB,QACd,4BAA4B;AAEnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,OAAOC,MAAM,MAAM,6BAA6B;AAChD,OAAOC,SAAS,MAAM,yBAAyB;AAC/C,OAAOC,UAAU,MAGV,2BAA2B;AAClC,SAASC,qBAAqB,QAAQ,yCAAyC;AAC/E,OAAOC,KAAK,MAAM,4BAA4B;AAyH9C,MAAMC,YAAY,GAAG;EACnBC,WAAW,EAAE;AACf,CAAC;AAED,eAAe,SAASC,MAAMA,CAACC,KAAkB,EAAE;EACjD,MAAMC,OAAO,GAAGzB,UAAU,CAACe,OAAO,CAAC;EAEnC,MAAMW,QAAQ,GAAGC,uBAAuB,CAAC,CAAC;EAE1C,MAAM;MACJC,KAAK;MACLC,IAAI;MACJC,MAAM;MACNR,WAAW;MACXS,WAAW;MACXC,YAAY;MACZC,iBAAiB;MACjBC,MAAM;MACNC,KAAK;MACLC,aAAa;MACbC,WAAW;MACXC,KAAK;MACLC,QAAQ;MACRC,QAAQ;MACRC,QAAQ;MACRC,SAAS;MACTC,EAAE,EAAEC,MAAM;MACVC,OAAO,EAAEC,WAAW;MACpBC,QAAQ;MACRC,WAAW;MACXC,OAAO;MACPC,QAAQ,EAAEC;IAEZ,CAAC,GAAGzB,QAAQ;IADP0B,IAAI,GAAAC,wBAAA,CACL3B,QAAQ,EAAA4B,SAAA;EAEZ,MAAM,GAAGC,WAAW,CAAC,GAAGpD,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAClD,MAAMwC,EAAE,GAAGvB,KAAK,CAACwB,MAAM,CAAC;EACxB,MAAMY,IAAI,GAAG,OAAOL,YAAY,KAAK,UAAU;EAC/C,MAAMM,OAAO,GAAGrD,MAAM,CAAmB,CAAC;EAC1C,MAAM8C,QAAQ,GAAI,CAACM,IAAI,IAAIL,YAAY,IAAKM,OAAO;EAEnD,MAAMC,gBAAgB,GAAGtD,MAAM,CAAC,KAAK,CAAC;EACtC,MAAMuD,YAAY,GAAGvD,MAAM,CAAC0C,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI,KAAK,CAAC;EACjD,MAAMc,cAAc,GAAGxD,MAAM,CAAC0C,WAAW,CAAC;EAE1C7C,SAAS,CAAC,MAAM;IACd,IAAIuD,IAAI,EAAE;MACRL,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGM,OAAO,CAACI,OAAO,CAAC;IACjC;EACF,CAAC,EAAE,CAACV,YAAY,EAAEK,IAAI,EAAEC,OAAO,CAAC,CAAC;EAEjCxD,SAAS,CAAC,MAAM;IACd,IAAI6C,WAAW,KAAKc,cAAc,CAACC,OAAO,EAAE;MAC1CF,YAAY,CAACE,OAAO,GAAG,CAAC,CAACf,WAAW;MACpCc,cAAc,CAACC,OAAO,GAAG,CAAC,CAACf,WAAW;MACtCS,WAAW,CAAC,CAAC;IACf;EACF,CAAC,EAAE,CAACT,WAAW,CAAC,CAAC;EAEjB,MAAMgB,YAAY,GAAG/D,WAAW,CAC9B,CAAC;IAAE8C,OAAO;IAAEkB;EAAM,CAAC,KAAK;IACtBhB,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG;MAAEF,OAAO;MAAEkB;IAAM,CAAC,CAAC;EAChC,CAAC,EACD,CAAChB,QAAQ,CACX,CAAC;EAED,MAAMiB,eAAe,GAAGjE,WAAW,CAChCgE,KAAK,IAAK;IACT,IAAIL,gBAAgB,CAACG,OAAO,EAAE;MAC5B;IACF;IAEA,MAAMI,cAAc,GAAG,CAACN,YAAY,CAACE,OAAO;IAE5CF,YAAY,CAACE,OAAO,GAAGI,cAAc;IACrCV,WAAW,CAAC,CAAC;IACbO,YAAY,CAAC;MAAEjB,OAAO,EAAEoB,cAAc;MAAEF;IAAM,CAAC,CAAC;IAEhD,IAAIf,WAAW,EAAE;MACf,IAAIe,KAAK,IAAIA,KAAK,CAACG,OAAO,EAAE;QAC1BH,KAAK,CAACG,OAAO,CAAC,CAAC;MACjB;MACAC,UAAU,CACR,MAAMnB,WAAW,CAAC;QAAEH,OAAO,EAAEoB,cAAc;QAAEF;MAAM,CAAC,CAAC,EACrD,GACF,CAAC;IACH;IAGA,IAAIb,QAAQ,CAACW,OAAO,EAAE;MACpBX,QAAQ,CAACW,OAAO,CAACO,KAAK,CAAC,CAAC;IAC1B;EACF,CAAC,EACD,CAACN,YAAY,EAAEZ,QAAQ,EAAEF,WAAW,CACtC,CAAC;EAED,MAAMqB,cAAyD,GAC7DtE,WAAW,CACRgE,KAAK,IAAK;IACT,MAAMO,cAAc,GAAGA,CAAA,KAAM;MAC3BP,KAAK,CAACO,cAAc,CAAC,CAAC;MAEtB,IAAIP,KAAK,CAACQ,MAAM,CAAC,SAAS,CAAC,KAAKZ,YAAY,CAACE,OAAO,EAAE;QACpDH,gBAAgB,CAACG,OAAO,GAAG,IAAI;QAC/BF,YAAY,CAACE,OAAO,GAAG,CAACF,YAAY,CAACE,OAAO;QAC5CN,WAAW,CAAC,CAAC;MACf;IACF,CAAC;IAED,IAAIf,QAAQ,EAAE;MACZ,OAAO8B,cAAc,CAAC,CAAC;IACzB;IAEArB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAAuB,aAAA;MACL3B,OAAO,EAAEc,YAAY,CAACE,OAAO;MAC7BS,cAAc;MACdP;IAAK,GACFA,KAAK,CACT,CAAC;EACJ,CAAC,EACD,CAACd,OAAO,EAAET,QAAQ,CACpB,CAAC;EAEH,MAAMiC,gBAAgB,GAAG1E,WAAW,CACjCgE,KAAoB,IAAK;IACxB,QAAQA,KAAK,CAACW,IAAI;MAChB,KAAK,OAAO;QACVV,eAAe,CAACD,KAAK,CAAC;QACtB;IACJ;EACF,CAAC,EACD,CAACC,eAAe,CAClB,CAAC;EAED,MAAMW,UAAU,GAAGzE,OAAO,CAAC,MAAMK,cAAc,CAACuB,MAAM,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAElE,MAAM8C,UAAU,GAAG;IACjBlC,SAAS,EAAErC,UAAU,0CAIW+B,aAAa,IAAI,OAAO,uBAEtDtB,mBAAmB,CAAC,IAAI,EAAE2B,QAAQ,CAAC,EACnC7B,oBAAoB,CAACY,KAAK,CAAC,EAC3BkB,SAAS,EANTb,IAAI,IAAI,eAAeA,IAAI,EAAE,EAC7BC,MAAM,IAAI,uBAAuBR,WAAW,EAM9C;EACF,CAAC;EAED,MAAMuD,WAAW,GAAAL,aAAA;IACfjC,QAAQ;IACRM,OAAO,EAAEc,YAAY,CAACE;EAAO,GAC1BT,IAAI,CACR;EAED,IAAIuB,UAAU,IAAIzC,MAAM,EAAE;IACxB2C,WAAW,CAAC,kBAAkB,CAAC,GAAGrE,kBAAkB,CAClDqE,WAAW,EACXF,UAAU,GAAGhC,EAAE,GAAG,SAAS,GAAG,IAAI,EAClCT,MAAM,GAAGS,EAAE,GAAG,SAAS,GAAG,IAC5B,CAAC;EACH;EACA,IAAIH,QAAQ,EAAE;IACZqC,WAAW,CAAC,eAAe,CAAC,GAAGrC,QAAQ;EACzC;EAEA3B,qBAAqB,CAACgE,WAAW,EAAEpC,QAAQ,EAAEhB,OAAO,CAAC;EACrDnB,qBAAqB,CAACkB,KAAK,EAAEqD,WAAW,CAAC;EAEzC,MAAMC,YAAY,GAAG5E,OAAO,CAC1B,OAAO;IACL6E,WAAW,EAAGC,CAAoC,IAChDA,CAAC,CAACV,cAAc,CAAC;EACrB,CAAC,CAAC,EACF,EACF,CAAC;EAED,MAAMW,SAAS,GAAG/E,OAAO,CACvB,MACEiC,KAAK,IACHrC,KAAA,CAAAoF,aAAA,CAACjE,SAAS;IACR0B,EAAE,EAAEA,EAAE,GAAG,QAAS;IAClBwC,KAAK,EAAExC,EAAG;IACVyC,IAAI,EAAEjD,KAAM;IACZI,QAAQ,EAAEA,QAAS;IACnBE,QAAQ,EAAEA,QAAS;IACnB4C,MAAM,EAAEhD;EAAY,CACrB,CACF,EACH,CAACE,QAAQ,EAAEI,EAAE,EAAER,KAAK,EAAEE,WAAW,EAAEI,QAAQ,CAC7C,CAAC;EAED,OACE3C,KAAA,CAAAoF,aAAA,SAAUN,UAAU,EAClB9E,KAAA,CAAAoF,aAAA;IAAMxC,SAAS,EAAC;EAAmB,GAChCN,aAAa,KAAK,MAAM,IAAI6C,SAAS,EAEtCnF,KAAA,CAAAoF,aAAA;IAAMxC,SAAS,EAAC;EAAmB,GAAA4C,gBAAA,KAAAA,gBAAA,GACjCxF,KAAA,CAAAoF,aAAA,CAACvE,eAAe,MAAE,CAAC,GAEnBb,KAAA,CAAAoF,aAAA,CAAChE,UAAU,EAAAqE,QAAA;IACTC,IAAI,EAAEb,UAAW;IACjBhC,EAAE,EAAEA,EAAE,GAAG,cAAe;IACxBX,YAAY,EAAEA,YAAa;IAC3BG,KAAK,EAAEA,KAAM;IACbsD,cAAc,EAAE9C,EAAE,GAAG,IAAI,GAAGA,EAAE,GAAG,QAAS;IAC1CyC,IAAI,EAAEtD,MAAO;IACb4D,KAAK,EAAEpE,WAAY;IACnBmB,QAAQ,EAAEA,QAAS;IACnBkD,YAAY,EAAE1D;EAAkB,GAC5BF,WAAW,CAChB,CAAC,EAEFjC,KAAA,CAAAoF,aAAA;IAAMxC,SAAS,EAAC;EAAmB,GAChC,CAACN,aAAa,KAAK,OAAO,IAAI,CAACA,aAAa,KAAK6C,SAAS,EAE3DnF,KAAA,CAAAoF,aAAA;IAAMxC,SAAS,EAAC;EAAiB,GAC/B5C,KAAA,CAAAoF,aAAA,UAAAK,QAAA;IACE5C,EAAE,EAAEA,EAAG;IACPiD,IAAI,EAAEjD,EAAG;IACTkD,IAAI,EAAC,UAAU;IACfC,IAAI,EAAC,QAAQ;IACbxD,KAAK,EAAEA,KAAM;IACb,gBAAcqB,YAAY,CAACE,OAAQ;IACnCnB,SAAS,EAAC,mBAAmB;IAC7Bd,KAAK,EAAE+B,YAAY,CAACE,OAAO,GAAGjC,KAAK,IAAI,EAAE,GAAG,EAAG;IAC/CmE,GAAG,EAAE7C;EAAS,GACV2B,WAAW;IACf9B,QAAQ,EAAEiB,eAAgB;IAC1Bf,OAAO,EAAEoB,cAAe;IACxB2B,SAAS,EAAEvB;EAAiB,EAC7B,CAAC,EACF3E,KAAA,CAAAoF,aAAA,SAAAK,QAAA;IACEU,SAAS;IACT,mBAAW;IACXvD,SAAS,EAAC,wBAAwB;IAClCwD,WAAW,EAAElC;EAAgB,GACzBc,YAAY,CACjB,CAAC,EACFhF,KAAA,CAAAoF,aAAA;IACExC,SAAS,EAAErC,UAAU,CACnB,oBAAoB,EACpBS,mBAAmB,CAAC,OAAO,EAAE2B,QAAQ,EAAEhB,OAAO,CAChD,CAAE;IACF;EAAW,GAAA0E,KAAA,KAAAA,KAAA,GAEXrG,KAAA,CAAAoF,aAAA;IAAMxC,SAAS,EAAC;EAAmB,GACjC5C,KAAA,CAAAoF,aAAA;IAAMxC,SAAS,EAAC;EAA0B,CAAE,CACxC,CAAC,CACH,CACF,CAAC,EAENR,MAAM,IACLpC,KAAA,CAAAoF,aAAA,CAAClE,MAAM;IACL0B,SAAS,EAAC,oBAAoB;IAC9BC,EAAE,EAAEA,EAAE,GAAG,SAAU;IACnBlB,OAAO,EAAED;EAAM,GAEdU,MACK,CAEN,CACF,CACF,CACF,CAAC;EAGT,SAASP,uBAAuBA,CAAA,EAAG;IACjC,OAAOlB,sBAAsB,CAC3BU,qBAAqB,CAACK,KAAK,CAAC,EAC5BH,YAAY,EACZ;MAAEoB,QAAQ,EAAEhB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEgB;IAAS,CAAC,EAE/B/B,oBAAoB,CAACe,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE2E,OAAO,CAAC,EACtC1F,oBAAoB,CAACe,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE4E,WAAW,CAAC,EAC1C5E,OAAO,CAACF,MACV,CAAC;EACH;AACF","ignoreList":[]}

package/es/components/switch/SwitchDocs.js

@@ -80,6 +80,11 @@ export const SwitchEvents = {
     doc: 'Will be called on state changes made by the user, but with a delay. This way the user sees the animation before e.g. an error will be removed. Returns a boolean { checked, event }.',
     type: '({ checked: boolean; event: ChangeEvent }) => void',
     status: 'optional'
+  },
+  onClick: {
+    doc: 'Will be called on click.',
+    type: '({ checked: boolean; event: MouseEvent, preventDefault: () => void }) => void',
+    status: 'optional'
   }
 };
 //# sourceMappingURL=SwitchDocs.js.map

package/es/components/switch/SwitchDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchDocs.js","names":["SwitchProperties","checked","doc","type","status","title","label","labelPosition","labelSrOnly","size","statusState","statusProps","globalStatus","suffix","skeleton","innerRef","SwitchEvents","onChange","onChangeEnd"],"sources":["../../../../src/components/switch/SwitchDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const SwitchProperties: PropertiesTableProps = {\n  checked: {\n    doc: 'Determine whether the switch is checked or not. The default will be `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  title: {\n    doc: 'The `title` of the input - describing it a bit further for accessibility reasons.',\n    type: 'string',\n    status: 'required',\n  },\n  label: {\n    doc: 'Use either the `label` property or provide a custom one.',\n    type: 'ReactNode',\n    status: 'optional',\n  },\n  labelPosition: {\n    doc: 'Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.',\n    type: ['left', 'right'],\n    status: 'optional',\n  },\n  labelSrOnly: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'string',\n    status: 'optional',\n  },\n  size: {\n    doc: 'The size of the switch. For now there is **medium** (default) and **large**.',\n    type: ['default', 'medium', 'large'],\n    status: 'optional',\n  },\n  status: {\n    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: ['error', 'info', 'boolean'],\n    status: 'optional',\n  },\n  statusState: {\n    doc: 'Defines the state of the status. Defaults to `error`.',\n    type: ['error', 'warn', 'info', 'success', 'marketing'],\n    status: 'optional',\n  },\n  statusProps: {\n    doc: 'Use an object to define additional [FormStatus](/uilib/components/form-status/properties/) properties.',\n    type: 'FormStatus',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'GlobalStatus',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the Switch more than the label. You can also send in a React component, so it gets wrapped inside the Switch component.',\n    type: 'ReactNode',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: '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()`.',\n    type: 'React.RefObject',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const SwitchEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'Will be called on state changes made by the user.',\n    type: '({ checked: boolean; event: ChangeEvent }) => void',\n    status: 'optional',\n  },\n  onChangeEnd: {\n    doc: 'Will be called on state changes made by the user, but with a delay. This way the user sees the animation before e.g. an error will be removed. Returns a boolean { checked, event }.',\n    type: '({ checked: boolean; event: ChangeEvent }) => void',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAsC,GAAG;EACpDC,OAAO,EAAE;IACPC,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,mFAAmF;IACxFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,KAAK,EAAE;IACLJ,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,yFAAyF;IAC9FC,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;IACvBC,MAAM,EAAE;EACV,CAAC;EACDI,WAAW,EAAE;IACXN,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC;IACpCC,MAAM,EAAE;EACV,CAAC;EACDA,MAAM,EAAE;IACNF,GAAG,EAAE,yIAAyI;IAC9IC,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC;IAClCC,MAAM,EAAE;EACV,CAAC;EACDM,WAAW,EAAE;IACXR,GAAG,EAAE,uDAAuD;IAC5DC,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,CAAC;IACvDC,MAAM,EAAE;EACV,CAAC;EACDO,WAAW,EAAE;IACXT,GAAG,EAAE,wGAAwG;IAC7GC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDQ,YAAY,EAAE;IACZV,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,cAAc;IACpBC,MAAM,EAAE;EACV,CAAC;EACDS,MAAM,EAAE;IACNX,GAAG,EAAE,wJAAwJ;IAC7JC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDU,QAAQ,EAAE;IACRZ,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,QAAQ,EAAE;IACRb,GAAG,EAAE,wJAAwJ;IAC7JC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMY,YAAkC,GAAG;EAChDC,QAAQ,EAAE;IACRf,GAAG,EAAE,mDAAmD;IACxDC,IAAI,EAAE,oDAAoD;IAC1DC,MAAM,EAAE;EACV,CAAC;EACDc,WAAW,EAAE;IACXhB,GAAG,EAAE,sLAAsL;IAC3LC,IAAI,EAAE,oDAAoD;IAC1DC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}
+{"version":3,"file":"SwitchDocs.js","names":["SwitchProperties","checked","doc","type","status","title","label","labelPosition","labelSrOnly","size","statusState","statusProps","globalStatus","suffix","skeleton","innerRef","SwitchEvents","onChange","onChangeEnd","onClick"],"sources":["../../../../src/components/switch/SwitchDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const SwitchProperties: PropertiesTableProps = {\n  checked: {\n    doc: 'Determine whether the switch is checked or not. The default will be `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  title: {\n    doc: 'The `title` of the input - describing it a bit further for accessibility reasons.',\n    type: 'string',\n    status: 'required',\n  },\n  label: {\n    doc: 'Use either the `label` property or provide a custom one.',\n    type: 'ReactNode',\n    status: 'optional',\n  },\n  labelPosition: {\n    doc: 'Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.',\n    type: ['left', 'right'],\n    status: 'optional',\n  },\n  labelSrOnly: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'string',\n    status: 'optional',\n  },\n  size: {\n    doc: 'The size of the switch. For now there is **medium** (default) and **large**.',\n    type: ['default', 'medium', 'large'],\n    status: 'optional',\n  },\n  status: {\n    doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',\n    type: ['error', 'info', 'boolean'],\n    status: 'optional',\n  },\n  statusState: {\n    doc: 'Defines the state of the status. Defaults to `error`.',\n    type: ['error', 'warn', 'info', 'success', 'marketing'],\n    status: 'optional',\n  },\n  statusProps: {\n    doc: 'Use an object to define additional [FormStatus](/uilib/components/form-status/properties/) properties.',\n    type: 'FormStatus',\n    status: 'optional',\n  },\n  globalStatus: {\n    doc: 'The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'GlobalStatus',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the Switch more than the label. You can also send in a React component, so it gets wrapped inside the Switch component.',\n    type: 'ReactNode',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: '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()`.',\n    type: 'React.RefObject',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const SwitchEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'Will be called on state changes made by the user.',\n    type: '({ checked: boolean; event: ChangeEvent }) => void',\n    status: 'optional',\n  },\n  onChangeEnd: {\n    doc: 'Will be called on state changes made by the user, but with a delay. This way the user sees the animation before e.g. an error will be removed. Returns a boolean { checked, event }.',\n    type: '({ checked: boolean; event: ChangeEvent }) => void',\n    status: 'optional',\n  },\n  onClick: {\n    doc: 'Will be called on click.',\n    type: '({ checked: boolean; event: MouseEvent, preventDefault: () => void }) => void',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAsC,GAAG;EACpDC,OAAO,EAAE;IACPC,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,mFAAmF;IACxFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,KAAK,EAAE;IACLJ,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,yFAAyF;IAC9FC,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;IACvBC,MAAM,EAAE;EACV,CAAC;EACDI,WAAW,EAAE;IACXN,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC;IACpCC,MAAM,EAAE;EACV,CAAC;EACDA,MAAM,EAAE;IACNF,GAAG,EAAE,yIAAyI;IAC9IC,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC;IAClCC,MAAM,EAAE;EACV,CAAC;EACDM,WAAW,EAAE;IACXR,GAAG,EAAE,uDAAuD;IAC5DC,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,CAAC;IACvDC,MAAM,EAAE;EACV,CAAC;EACDO,WAAW,EAAE;IACXT,GAAG,EAAE,wGAAwG;IAC7GC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDQ,YAAY,EAAE;IACZV,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,cAAc;IACpBC,MAAM,EAAE;EACV,CAAC;EACDS,MAAM,EAAE;IACNX,GAAG,EAAE,wJAAwJ;IAC7JC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDU,QAAQ,EAAE;IACRZ,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,QAAQ,EAAE;IACRb,GAAG,EAAE,wJAAwJ;IAC7JC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMY,YAAkC,GAAG;EAChDC,QAAQ,EAAE;IACRf,GAAG,EAAE,mDAAmD;IACxDC,IAAI,EAAE,oDAAoD;IAC1DC,MAAM,EAAE;EACV,CAAC;EACDc,WAAW,EAAE;IACXhB,GAAG,EAAE,sLAAsL;IAC3LC,IAAI,EAAE,oDAAoD;IAC1DC,MAAM,EAAE;EACV,CAAC;EACDe,OAAO,EAAE;IACPjB,GAAG,EAAE,0BAA0B;IAC/BC,IAAI,EAAE,+EAA+E;IACrFC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/es/components/tooltip/TooltipPortal.js

@@ -1,12 +1,15 @@
 "use client";
 
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { makeUniqueId, warn } from '../../shared/component-helper';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import classnames from 'classnames';
+import { makeUniqueId } from '../../shared/component-helper';
+import useMountEffect from '../../shared/helpers/useMountEffect';
 import TooltipContainer from './TooltipContainer';
 import { useTheme } from '../../shared';
 import { getThemeClasses } from '../../shared/Theme';
+import PortalRoot from '../PortalRoot';
+import ModalContext from '../modal/ModalContext';
 let tooltipPortal;
 if (typeof globalThis !== 'undefined') {
   globalThis.tooltipPortal = globalThis.tooltipPortal || {};
@@ -15,7 +18,6 @@ if (typeof globalThis !== 'undefined') {
   tooltipPortal = {};
 }
 function TooltipPortal(props) {
-  var _tooltipPortal$id3;
   const {
     active,
     targetElement,
@@ -24,41 +26,29 @@ function TooltipPortal(props) {
     noAnimation,
     children
   } = props;
-  const [isMounted, setIsMounted] = React.useState(false);
-  const [isActive, setIsActive] = React.useState(active);
-  const [id] = React.useState(() => makeUniqueId());
-  const isInDOM = React.useRef(false);
+  const modalContext = useContext(ModalContext);
+  const [isMounted, setIsMounted] = useState(false);
+  const [isActive, setIsActive] = useState(active);
+  const [id] = useState(() => makeUniqueId());
+  const isInDOM = useRef(false);
   const theme = useTheme();
-  const makePortal = () => {
+  const makeTooltip = useCallback(() => {
     if (!tooltipPortal[id]) {
       tooltipPortal[id] = {
-        count: 0,
-        node: createRootElement(theme)
+        count: 0
       };
     }
-  };
-  const clearTimers = () => {
+  }, [id]);
+  const clearTimers = useCallback(() => {
     var _tooltipPortal$id, _tooltipPortal$id2;
     clearTimeout((_tooltipPortal$id = tooltipPortal[id]) === null || _tooltipPortal$id === void 0 ? void 0 : _tooltipPortal$id.delayTimeout);
     clearTimeout((_tooltipPortal$id2 = tooltipPortal[id]) === null || _tooltipPortal$id2 === void 0 ? void 0 : _tooltipPortal$id2.hiddenTimeout);
-  };
-  const removeFromDOM = hide => {
-    if (isActive && hide) {
-      return;
-    }
-    const ref = tooltipPortal[id];
-    if (ref !== null && ref !== void 0 && ref.node) {
-      ref.count--;
-      if (ref.count <= 0) {
-        delete tooltipPortal[id];
-      }
-    }
-  };
-  React.useEffect(() => {
+  }, [id]);
+  useEffect(() => {
     setIsMounted(true);
     clearTimers();
     if (active) {
-      makePortal();
+      makeTooltip();
       setIsActive(true);
       isInDOM.current = true;
       if (!isMounted) {
@@ -70,7 +60,6 @@ function TooltipPortal(props) {
       };
       const delayHidden = () => {
         isInDOM.current = false;
-        removeFromDOM(true);
       };
       if (noAnimation || globalThis.IS_TEST) {
         delayRender();
@@ -82,42 +71,21 @@ function TooltipPortal(props) {
       }
     }
     return clearTimers;
-  }, [children, active, id, hideDelay, noAnimation]);
-  React.useEffect(() => {
+  }, [active, clearTimers, hideDelay, id, isMounted, makeTooltip, noAnimation]);
+  useMountEffect(() => {
     if (keepInDOM) {
-      makePortal();
+      makeTooltip();
     }
-    return removeFromDOM;
-  }, []);
-  const root = (_tooltipPortal$id3 = tooltipPortal[id]) === null || _tooltipPortal$id3 === void 0 ? void 0 : _tooltipPortal$id3.node;
-  if (root) {
-    return ReactDOM.createPortal(isInDOM.current || keepInDOM ? React.createElement(TooltipContainer, _extends({}, props, {
+  });
+  if (isInDOM.current || keepInDOM) {
+    return React.createElement(PortalRoot, null, React.createElement("div", {
+      className: classnames('dnb-tooltip__portal', theme && getThemeClasses(theme), (modalContext === null || modalContext === void 0 ? void 0 : modalContext.id) && 'dnb-tooltip--inside-modal')
+    }, React.createElement(TooltipContainer, _extends({}, props, {
       targetElement: targetElement,
       active: isActive
-    }), children) : null, root);
+    }), children)));
   }
   return null;
 }
 export default TooltipPortal;
-const createRootElement = (theme, className = null) => {
-  if (!className) {
-    className = 'dnb-tooltip__portal';
-  }
-  try {
-    const element = document.querySelector(`.${className}`);
-    if (element) {
-      return element;
-    }
-    const elem = document.createElement('div');
-    elem.classList.add(className);
-    elem.classList.add('dnb-core-style');
-    if (theme) {
-      elem.classList.add.call(elem.classList, ...getThemeClasses(theme).split(' '));
-    }
-    document.body.appendChild(elem);
-    return elem;
-  } catch (e) {
-    warn(e);
-  }
-};
 //# sourceMappingURL=TooltipPortal.js.map

package/es/components/tooltip/TooltipPortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipPortal.js","names":["React","ReactDOM","makeUniqueId","warn","TooltipContainer","useTheme","getThemeClasses","tooltipPortal","globalThis","TooltipPortal","props","_tooltipPortal$id3","active","targetElement","hideDelay","keepInDOM","noAnimation","children","isMounted","setIsMounted","useState","isActive","setIsActive","id","isInDOM","useRef","theme","makePortal","count","node","createRootElement","clearTimers","_tooltipPortal$id","_tooltipPortal$id2","clearTimeout","delayTimeout","hiddenTimeout","removeFromDOM","hide","ref","useEffect","current","delayRender","delayHidden","IS_TEST","delay","parseFloat","String","setTimeout","root","createPortal","createElement","_extends","className","element","document","querySelector","elem","classList","add","call","split","body","appendChild","e"],"sources":["../../../../src/components/tooltip/TooltipPortal.tsx"],"sourcesContent":["/**\n * Web Tooltip Component\n *\n */\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { makeUniqueId, warn } from '../../shared/component-helper'\nimport TooltipContainer from './TooltipContainer'\nimport { TooltipProps } from './types'\nimport { useTheme } from '../../shared'\nimport { ThemeProps, getThemeClasses } from '../../shared/Theme'\n\ntype TooltipType = {\n  node: HTMLElement\n  count?: number\n  delayTimeout?: NodeJS.Timeout\n  hiddenTimeout?: NodeJS.Timeout\n}\n\nlet tooltipPortal: Record<string, TooltipType>\nif (typeof globalThis !== 'undefined') {\n  globalThis.tooltipPortal = globalThis.tooltipPortal || {}\n  tooltipPortal = globalThis.tooltipPortal\n} else {\n  tooltipPortal = {}\n}\n\ntype TooltipPortalProps = {\n  targetElement: HTMLElement\n  active: boolean\n  keepInDOM?: boolean\n  children?: React.ReactNode\n}\n\nfunction TooltipPortal(\n  props: TooltipProps & TooltipPortalProps\n): JSX.Element {\n  const {\n    active,\n    targetElement,\n    hideDelay,\n    keepInDOM,\n    noAnimation,\n    children,\n  } = props\n\n  const [isMounted, setIsMounted] = React.useState(false)\n  const [isActive, setIsActive] = React.useState(active)\n  const [id] = React.useState(() => makeUniqueId())\n  const isInDOM = React.useRef(false)\n\n  const theme = useTheme()\n\n  const makePortal = () => {\n    if (!tooltipPortal[id]) {\n      tooltipPortal[id] = {\n        count: 0,\n        node: createRootElement(theme),\n      }\n    }\n  }\n\n  const clearTimers = () => {\n    clearTimeout(tooltipPortal[id]?.delayTimeout)\n    clearTimeout(tooltipPortal[id]?.hiddenTimeout)\n  }\n\n  const removeFromDOM = (hide?: boolean) => {\n    if (isActive && hide) {\n      return // stop here\n    }\n\n    const ref = tooltipPortal[id]\n    if (ref?.node) {\n      ref.count--\n      if (ref.count <= 0) {\n        /**\n         * Remove the referenced data\n         */\n        delete tooltipPortal[id]\n      }\n    }\n  }\n\n  React.useEffect(() => {\n    setIsMounted(true)\n\n    clearTimers()\n\n    if (active) {\n      makePortal()\n      setIsActive(true)\n\n      isInDOM.current = true\n\n      if (!isMounted) {\n        tooltipPortal[id].count++\n      }\n    } else if (!active && isMounted) {\n      const delayRender = () => {\n        setIsActive(false)\n      }\n\n      const delayHidden = () => {\n        isInDOM.current = false\n        removeFromDOM(true)\n      }\n\n      if (noAnimation || globalThis.IS_TEST) {\n        delayRender()\n        delayHidden()\n      } else if (tooltipPortal[id]) {\n        const delay = parseFloat(String(hideDelay))\n        tooltipPortal[id].delayTimeout = setTimeout(delayRender, delay)\n        tooltipPortal[id].hiddenTimeout = setTimeout(\n          delayHidden,\n          delay + 300\n        )\n      }\n    }\n\n    return clearTimers\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, active, id, hideDelay, noAnimation])\n\n  React.useEffect(() => {\n    /**\n     * Because of \"aria-describedby\" on the target element,\n     * the Tooltip should exist in the DOM\n     */\n    if (keepInDOM) {\n      makePortal()\n    }\n\n    return removeFromDOM\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const root = tooltipPortal[id]?.node\n\n  if (root) {\n    return ReactDOM.createPortal(\n      isInDOM.current || keepInDOM ? (\n        <TooltipContainer\n          {...props}\n          targetElement={targetElement}\n          active={isActive}\n        >\n          {children}\n        </TooltipContainer>\n      ) : null,\n      root\n    )\n  }\n\n  return null\n}\n\nexport default TooltipPortal\n\nconst createRootElement = (theme: ThemeProps, className = null) => {\n  if (!className) {\n    className = 'dnb-tooltip__portal'\n  }\n  try {\n    const element: HTMLElement = document.querySelector(`.${className}`)\n\n    if (element) {\n      return element\n    }\n\n    const elem = document.createElement('div')\n    elem.classList.add(className)\n    elem.classList.add('dnb-core-style')\n\n    if (theme) {\n      elem.classList.add.call(\n        elem.classList,\n        ...getThemeClasses(theme).split(' ')\n      )\n    }\n\n    document.body.appendChild(elem)\n\n    return elem\n  } catch (e) {\n    warn(e)\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TooltipPortal.js","names":["React","useCallback","useContext","useEffect","useRef","useState","classnames","makeUniqueId","useMountEffect","TooltipContainer","useTheme","getThemeClasses","PortalRoot","ModalContext","tooltipPortal","globalThis","TooltipPortal","props","active","targetElement","hideDelay","keepInDOM","noAnimation","children","modalContext","isMounted","setIsMounted","isActive","setIsActive","id","isInDOM","theme","makeTooltip","count","clearTimers","_tooltipPortal$id","_tooltipPortal$id2","clearTimeout","delayTimeout","hiddenTimeout","current","delayRender","delayHidden","IS_TEST","delay","parseFloat","String","setTimeout","createElement","className","_extends"],"sources":["../../../../src/components/tooltip/TooltipPortal.tsx"],"sourcesContent":["/**\n * Web Tooltip Component\n *\n */\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../shared/component-helper'\nimport useMountEffect from '../../shared/helpers/useMountEffect'\nimport TooltipContainer from './TooltipContainer'\nimport { TooltipProps } from './types'\nimport { useTheme } from '../../shared'\nimport { getThemeClasses } from '../../shared/Theme'\nimport PortalRoot from '../PortalRoot'\nimport ModalContext from '../modal/ModalContext'\n\ntype TooltipType = {\n  count?: number\n  delayTimeout?: NodeJS.Timeout\n  hiddenTimeout?: NodeJS.Timeout\n}\n\nlet tooltipPortal: Record<string, TooltipType>\nif (typeof globalThis !== 'undefined') {\n  globalThis.tooltipPortal = globalThis.tooltipPortal || {}\n  tooltipPortal = globalThis.tooltipPortal\n} else {\n  tooltipPortal = {}\n}\n\ntype TooltipPortalProps = {\n  targetElement: HTMLElement\n  active: boolean\n  keepInDOM?: boolean\n  children?: React.ReactNode\n}\n\nfunction TooltipPortal(\n  props: TooltipProps & TooltipPortalProps\n): JSX.Element {\n  const {\n    active,\n    targetElement,\n    hideDelay,\n    keepInDOM,\n    noAnimation,\n    children,\n  } = props\n\n  const modalContext = useContext(ModalContext)\n  const [isMounted, setIsMounted] = useState(false)\n  const [isActive, setIsActive] = useState(active)\n  const [id] = useState(() => makeUniqueId())\n  const isInDOM = useRef(false)\n\n  const theme = useTheme()\n\n  const makeTooltip = useCallback(() => {\n    if (!tooltipPortal[id]) {\n      tooltipPortal[id] = {\n        count: 0,\n      }\n    }\n  }, [id])\n\n  const clearTimers = useCallback(() => {\n    clearTimeout(tooltipPortal[id]?.delayTimeout)\n    clearTimeout(tooltipPortal[id]?.hiddenTimeout)\n  }, [id])\n\n  useEffect(() => {\n    setIsMounted(true)\n\n    clearTimers()\n\n    if (active) {\n      makeTooltip()\n      setIsActive(true)\n\n      isInDOM.current = true\n\n      if (!isMounted) {\n        tooltipPortal[id].count++\n      }\n    } else if (!active && isMounted) {\n      const delayRender = () => {\n        setIsActive(false)\n      }\n\n      const delayHidden = () => {\n        isInDOM.current = false\n      }\n\n      if (noAnimation || globalThis.IS_TEST) {\n        delayRender()\n        delayHidden()\n      } else if (tooltipPortal[id]) {\n        const delay = parseFloat(String(hideDelay))\n        tooltipPortal[id].delayTimeout = setTimeout(delayRender, delay)\n        tooltipPortal[id].hiddenTimeout = setTimeout(\n          delayHidden,\n          delay + 300\n        )\n      }\n    }\n\n    return clearTimers\n  }, [\n    active,\n    clearTimers,\n    hideDelay,\n    id,\n    isMounted,\n    makeTooltip,\n    noAnimation,\n  ])\n\n  useMountEffect(() => {\n    /**\n     * Because of \"aria-describedby\" on the target element,\n     * the Tooltip should exist in the DOM\n     */\n    if (keepInDOM) {\n      makeTooltip()\n    }\n  })\n\n  if (isInDOM.current || keepInDOM) {\n    return (\n      <PortalRoot>\n        <div\n          className={classnames(\n            'dnb-tooltip__portal',\n            theme && getThemeClasses(theme),\n            modalContext?.id && 'dnb-tooltip--inside-modal'\n          )}\n        >\n          <TooltipContainer\n            {...props}\n            targetElement={targetElement}\n            active={isActive}\n          >\n            {children}\n          </TooltipContainer>\n        </div>\n      </PortalRoot>\n    )\n  }\n\n  return null\n}\n\nexport default TooltipPortal\n"],"mappings":"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","ignoreList":[]}

package/es/components/tooltip/style/dnb-tooltip.css

@@ -5,13 +5,17 @@
 /*
  * Utilities
  */
+:root {
+  --tooltip-z-index: 3100;
+}
+
 .dnb-tooltip {
   --tooltip-color: white;
   --tooltip-background-color: black;
   --tooltip-border-color: 1px solid black;
   --tooltip-border-radius: 1rem;
   position: absolute;
-  z-index: 3100;
+  z-index: 1000;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -26,6 +30,9 @@
   visibility: hidden;
   transition: opacity 200ms var(--easing-default);
 }
+.dnb-tooltip--inside-modal .dnb-tooltip {
+  z-index: var(--tooltip-z-index);
+}
 .dnb-tooltip--large {
   padding: 0.25rem 1rem;
 }

package/es/components/tooltip/style/dnb-tooltip.min.css

@@ -1 +1 @@
-.dnb-tooltip{--tooltip-color:#fff;--tooltip-background-color:#000;--tooltip-border-color:1px solid #000;--tooltip-border-radius:1rem;align-items:center;background-color:var(--tooltip-background-color);border-radius:var(--tooltip-border-radius);box-shadow:var(--shadow-default);color:var(--tooltip-color);display:flex;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;text-align:center;transition:opacity .2s var(--easing-default);visibility:hidden;z-index:3100}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--active{animation:show-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{animation:show-tooltip 1ms var(--easing-default) forwards}.dnb-tooltip--hide{animation:hide-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{animation:hide-tooltip 1ms linear forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{animation:hide-tooltip 1ms linear 1s forwards}.dnb-tooltip__portal{left:0;position:absolute;right:0;top:0}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{background-color:var(--tooltip-background-color);border:var(--tooltip-border-color);bottom:0;content:"";height:1rem;left:0;position:absolute;transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{align-self:flex-start}.dnb-tooltip__arrow__arrow--right{align-self:flex-end}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}
+:root{--tooltip-z-index:3100}.dnb-tooltip{--tooltip-color:#fff;--tooltip-background-color:#000;--tooltip-border-color:1px solid #000;--tooltip-border-radius:1rem;align-items:center;background-color:var(--tooltip-background-color);border-radius:var(--tooltip-border-radius);box-shadow:var(--shadow-default);color:var(--tooltip-color);display:flex;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;text-align:center;transition:opacity .2s var(--easing-default);visibility:hidden;z-index:1000}.dnb-tooltip--inside-modal .dnb-tooltip{z-index:var(--tooltip-z-index)}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--active{animation:show-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{animation:show-tooltip 1ms var(--easing-default) forwards}.dnb-tooltip--hide{animation:hide-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{animation:hide-tooltip 1ms linear forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{animation:hide-tooltip 1ms linear 1s forwards}.dnb-tooltip__portal{left:0;position:absolute;right:0;top:0}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{background-color:var(--tooltip-background-color);border:var(--tooltip-border-color);bottom:0;content:"";height:1rem;left:0;position:absolute;transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{align-self:flex-start}.dnb-tooltip__arrow__arrow--right{align-self:flex-end}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}