@dnb/eufemia 10.65.1 → 10.66.1

package/es/components/flex/style/flex-container.scss

@@ -1,11 +1,13 @@
 .dnb-flex-container {
+  --gap: 0;
+  --horizontal-gap: 0;
   display: flex;
-  row-gap: var(--gap, 0);
+  row-gap: var(--gap);
 
   &--direction {
     &-horizontal {
       flex-direction: row;
-      margin-right: calc(var(--gap) * -1);
+      margin-right: calc(var(--horizontal-gap) * -1);
     }
 
     &-vertical {
@@ -88,8 +90,11 @@
     flex-wrap: wrap;
   }
 
-  &--row-gap-off {
-    --gap: 0;
+  &--row-gap-xx-small {
+    --gap: var(--spacing-xx-small);
+  }
+  &--row-gap-x-small {
+    --gap: var(--spacing-x-small);
   }
   &--row-gap-small {
     --gap: var(--spacing-small);
@@ -100,6 +105,36 @@
   &--row-gap-large {
     --gap: var(--spacing-large);
   }
+  &--row-gap-x-large {
+    --gap: var(--spacing-x-large);
+  }
+  &--row-gap-xx-large {
+    --gap: var(--spacing-xx-large);
+  }
+
+  &--spacing {
+    &-xx-small {
+      --horizontal-gap: var(--spacing-xx-small);
+    }
+    &-x-small {
+      --horizontal-gap: var(--spacing-x-small);
+    }
+    &-small {
+      --horizontal-gap: var(--spacing-small);
+    }
+    &-medium {
+      --horizontal-gap: var(--spacing-medium);
+    }
+    &-large {
+      --horizontal-gap: var(--spacing-large);
+    }
+    &-x-large {
+      --horizontal-gap: var(--spacing-x-large);
+    }
+    &-xx-large {
+      --horizontal-gap: var(--spacing-xx-large);
+    }
+  }
 
   &__hr.dnb-hr {
     width: 100%;

package/es/components/help-button/HelpButtonInline.d.ts

@@ -15,11 +15,16 @@ export type HelpProps = {
 export type HelpButtonInlineProps = HelpButtonProps & {
     contentId?: string;
     help?: HelpProps;
+    /**
+     * If set to `true`, the content will get focus when the help content is opened.
+     */
+    focusWhenOpen?: boolean;
 };
 export type HelpButtonInlineSharedStateDataProps = {
     isOpen: boolean;
     isUserIntent?: boolean;
     buttonRef?: React.RefObject<HTMLButtonElement>;
+    focusWhenOpen?: boolean;
 };
 declare function HelpButtonInline(props: HelpButtonInlineProps): import("react/jsx-runtime").JSX.Element;
 declare namespace HelpButtonInline {
@@ -33,6 +38,8 @@ export type HelpButtonInlineContentProps = SpacingProps & {
     help?: HelpProps;
     breakout?: boolean;
     outset?: boolean;
+    roundedCorner?: boolean;
+    focusWhenOpen?: boolean;
 };
 export declare function HelpButtonInlineContent(props: HelpButtonInlineContentProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace HelpButtonInlineContent {

package/es/components/help-button/HelpButtonInline.js

@@ -3,8 +3,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _QuestionIcon, _CloseIcon;
-const _excluded = ["contentId", "size", "help", "className", "children"],
-  _excluded2 = ["contentId", "className", "children", "help", "breakout", "outset"];
+const _excluded = ["contentId", "size", "help", "focusWhenOpen", "className", "children"],
+  _excluded2 = ["contentId", "className", "children", "help", "breakout", "outset", "roundedCorner", "focusWhenOpen"];
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import HelpButtonInstance from './HelpButtonInstance';
@@ -24,6 +24,7 @@ export default function HelpButtonInline(props) {
       contentId,
       size,
       help,
+      focusWhenOpen,
       className,
       children
     } = props,
@@ -41,31 +42,54 @@ export default function HelpButtonInline(props) {
   } = data || {};
   const wasOpenRef = useRef(undefined);
   const buttonRef = useRef(null);
-  const onClickHandler = useCallback(({
-    event
-  }) => {
-    event.preventDefault();
+  const toggleOpen = useCallback(() => {
     update({
       isOpen: !isOpen,
       isUserIntent: !isOpen,
-      buttonRef
+      buttonRef,
+      focusWhenOpen
     });
     wasOpenRef.current = !isOpen;
-  }, [isOpen, update]);
+  }, [focusWhenOpen, isOpen, update]);
+  const onClickHandler = useCallback(({
+    event
+  }) => {
+    event.preventDefault();
+    toggleOpen();
+  }, [toggleOpen]);
+  const onKeyDownHandler = useCallback(event => {
+    if (event.currentTarget === event.target) {
+      switch (event.key.trim() || event.code) {
+        case 'Escape':
+          if (isOpen) {
+            event.preventDefault();
+            window.requestAnimationFrame(() => {
+              toggleOpen();
+            });
+          }
+          break;
+      }
+    }
+  }, [isOpen, toggleOpen]);
+  const title = convertJsxToString(help === null || help === void 0 ? void 0 : help.title);
   return React.createElement(React.Fragment, null, React.createElement(HelpButtonInstance, _extends({
     bounding: true,
     size: size !== null && size !== void 0 ? size : 'small',
     icon: HelpButtonIcon,
-    title: !isOpen && !wasOpenRef.current ? convertJsxToString(help === null || help === void 0 ? void 0 : help.title) : undefined
+    title: !isOpen && !wasOpenRef.current ? title : undefined
   }, rest, {
     id: controlId,
     className: classnames('dnb-help-button__inline', className, isOpen && 'dnb-help-button__inline--open', isUserIntent && 'dnb-help-button__inline--user-intent', typeof wasOpenRef.current === 'boolean' && 'dnb-help-button__inline--was-open'),
     "aria-controls": `${controlId}-content`,
+    "aria-expanded": isOpen,
+    "aria-label": title,
     on_click: onClickHandler,
+    onKeyDown: onKeyDownHandler,
     innerRef: buttonRef
   })), !contentId && React.createElement(HelpButtonInlineContent, {
     contentId: controlId,
-    help: help
+    help: help,
+    focusWhenOpen: focusWhenOpen
   }, children));
 }
 export function HelpButtonInlineContent(props) {
@@ -76,7 +100,9 @@ export function HelpButtonInlineContent(props) {
       children,
       help: helpProp,
       breakout = true,
-      outset = true
+      outset = true,
+      roundedCorner = true,
+      focusWhenOpen: focusWhenOpenProp
     } = props,
     rest = _objectWithoutProperties(props, _excluded2);
   const {
@@ -85,6 +111,7 @@ export function HelpButtonInlineContent(props) {
   } = useSharedState(contentId);
   const {
     isOpen,
+    focusWhenOpen = focusWhenOpenProp,
     isUserIntent,
     buttonRef
   } = data || {};
@@ -101,7 +128,7 @@ export function HelpButtonInlineContent(props) {
   const breakoutFromLayout = Boolean(cardContext) && breakout && breakoutProp;
   const outsetFromLayout = outset && outsetProp;
   useEffect(() => {
-    if (isOpen && isUserIntent) {
+    if (isOpen && isUserIntent && focusWhenOpen) {
       window.requestAnimationFrame(() => {
         var _innerRef$current;
         (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus({
@@ -109,7 +136,7 @@ export function HelpButtonInlineContent(props) {
         });
       });
     }
-  }, [isOpen, isUserIntent]);
+  }, [focusWhenOpen, isOpen, isUserIntent]);
   const onClose = useCallback(() => {
     update({
       isOpen: false,
@@ -140,19 +167,25 @@ export function HelpButtonInlineContent(props) {
       onClose: onClose
     }, content, children);
   }
+  const focusParams = focusWhenOpen ? {
+    'aria-label': convertJsxToString(title),
+    className: 'dnb-no-focus',
+    tabIndex: -1,
+    onKeyDown
+  } : {
+    'aria-live': 'polite',
+    'aria-atomic': 'true'
+  };
   return React.createElement(HeightAnimation, {
     className: classnames('dnb-help-button__content', className),
     open: (_ref = isOpen !== null && isOpen !== void 0 ? isOpen : open) !== null && _ref !== void 0 ? _ref : false
   }, React.createElement(Section, _extends({
-    id: `${contentId}-content`,
-    "aria-label": convertJsxToString(title),
-    className: "dnb-no-focus",
-    tabIndex: -1,
+    id: `${contentId}-content`
+  }, focusParams, {
     innerRef: innerRef,
-    onKeyDown: onKeyDown,
     outset: outsetFromLayout,
     breakout: breakoutFromLayout,
-    roundedCorner: !breakoutFromLayout,
+    roundedCorner: roundedCorner !== null && roundedCorner !== void 0 ? roundedCorner : !breakoutFromLayout,
     innerSpace: breakoutFromLayout ? {
       top: 'small',
       bottom: 'medium'

package/es/components/help-button/HelpButtonInline.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpButtonInline.js","names":["React","useCallback","useContext","useEffect","useRef","classnames","HelpButtonInstance","HeightAnimation","useSharedState","convertJsxToString","useId","Section","P","Flex","CardContext","Dialog","question","QuestionIcon","close","CloseIcon","HelpButtonInline","props","_help$open","contentId","size","help","className","children","rest","_objectWithoutProperties","_excluded","controlId","data","update","isOpen","open","isUserIntent","wasOpenRef","undefined","buttonRef","onClickHandler","event","preventDefault","current","createElement","Fragment","_extends","bounding","icon","HelpButtonIcon","title","id","on_click","innerRef","HelpButtonInlineContent","_ref","helpProp","breakout","outset","_excluded2","content","renderAs","breakoutProp","outsetProp","cardContext","breakoutFromLayout","Boolean","outsetFromLayout","window","requestAnimationFrame","_innerRef$current","focus","preventScroll","onClose","onKeyDown","currentTarget","target","key","trim","code","_buttonRef$current","omitTriggerButton","openState","tabIndex","roundedCorner","innerSpace","top","bottom","left","right","backgroundColor","Vertical","gap","weight","_QuestionIcon","_CloseIcon","_supportsSpacingProps"],"sources":["../../../../src/components/help-button/HelpButtonInline.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef } from 'react'\nimport classnames from 'classnames'\nimport { HelpButtonProps } from './HelpButton'\nimport HelpButtonInstance from './HelpButtonInstance'\nimport HeightAnimation from '../HeightAnimation'\nimport { useSharedState } from '../../shared/helpers/useSharedState'\nimport { convertJsxToString } from '../../shared/component-helper'\nimport useId from '../../shared/helpers/useId'\nimport Section from '../Section'\nimport { P } from '../../elements'\nimport Flex from '../Flex'\nimport CardContext from '../card/CardContext'\nimport { SpacingProps } from '../space/types'\nimport Dialog from '../Dialog'\nimport { question as QuestionIcon, close as CloseIcon } from '../../icons'\n\nexport type HelpProps = {\n  title?: React.ReactNode\n  content?: React.ReactNode\n  renderAs?: 'inline' | 'dialog'\n  /** Only for the \"inline\" variant */\n  open?: boolean\n  /** Only for the \"inline\" variant */\n  breakout?: boolean\n  /** Only for the \"inline\" variant */\n  outset?: boolean\n}\n\nexport type HelpButtonInlineProps = HelpButtonProps & {\n  contentId?: string\n  help?: HelpProps\n}\n\nexport type HelpButtonInlineSharedStateDataProps = {\n  isOpen: boolean\n  isUserIntent?: boolean\n  buttonRef?: React.RefObject<HTMLButtonElement>\n}\n\nexport default function HelpButtonInline(props: HelpButtonInlineProps) {\n  const { contentId, size, help, className, children, ...rest } = props\n  const controlId = useId(contentId)\n\n  const { data, update } =\n    useSharedState<HelpButtonInlineSharedStateDataProps>(controlId, {\n      isOpen: help?.open ?? false,\n    })\n  const { isOpen, isUserIntent } = data || {}\n  const wasOpenRef = useRef(undefined)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n\n  const onClickHandler = useCallback(\n    ({ event }: { event: React.MouseEvent<HTMLButtonElement> }) => {\n      event.preventDefault() // Because when used inside a FormLabel\n      update({ isOpen: !isOpen, isUserIntent: !isOpen, buttonRef })\n      wasOpenRef.current = !isOpen\n    },\n    [isOpen, update]\n  )\n\n  return (\n    <>\n      <HelpButtonInstance\n        bounding\n        size={size ?? 'small'}\n        icon={HelpButtonIcon}\n        title={\n          !isOpen && !wasOpenRef.current\n            ? convertJsxToString(help?.title)\n            : undefined\n        }\n        {...rest}\n        id={controlId}\n        className={classnames(\n          'dnb-help-button__inline',\n          isOpen && 'dnb-help-button__inline--open',\n          isUserIntent && 'dnb-help-button__inline--user-intent',\n          typeof wasOpenRef.current === 'boolean' &&\n            'dnb-help-button__inline--was-open',\n          className\n        )}\n        aria-controls={`${controlId}-content`}\n        on_click={onClickHandler}\n        innerRef={buttonRef}\n      />\n\n      {!contentId && (\n        <HelpButtonInlineContent contentId={controlId} help={help}>\n          {children}\n        </HelpButtonInlineContent>\n      )}\n    </>\n  )\n}\n\nexport type HelpButtonInlineContentProps = SpacingProps & {\n  contentId: string\n  className?: string\n  children?: React.ReactNode\n  help?: HelpProps\n  breakout?: boolean\n  outset?: boolean\n}\n\nexport function HelpButtonInlineContent(\n  props: HelpButtonInlineContentProps\n) {\n  const {\n    contentId,\n    className,\n    children,\n    help: helpProp,\n    breakout = true,\n    outset = true,\n    ...rest\n  } = props\n  const { data, update } =\n    useSharedState<HelpButtonInlineSharedStateDataProps>(contentId)\n  const { isOpen, isUserIntent, buttonRef } = data || {}\n  const {\n    open,\n    title,\n    content,\n    renderAs,\n    breakout: breakoutProp = true,\n    outset: outsetProp = true,\n  } = helpProp || {}\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  const cardContext = useContext(CardContext)\n  const breakoutFromLayout =\n    Boolean(cardContext) && breakout && breakoutProp\n  const outsetFromLayout = outset && outsetProp\n\n  useEffect(() => {\n    if (isOpen && isUserIntent) {\n      window.requestAnimationFrame(() => {\n        innerRef.current?.focus({ preventScroll: true })\n      })\n    }\n  }, [isOpen, isUserIntent])\n\n  const onClose = useCallback(() => {\n    update({ isOpen: false, isUserIntent: false })\n  }, [update])\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (event.currentTarget === event.target) {\n        // Firefox returns a whitespace (\" \") on event.key when pressing space,\n        // therefore using .trim() can help normalize this.\n        // While userEvent.keyboard('{Space}') might return 'Unknown' on event.code,\n        // making a direct comparison less reliable across all platforms.\n        switch (event.key.trim() || event.code) {\n          case 'Enter':\n          case 'Space':\n          case 'Escape':\n            event.preventDefault()\n            window.requestAnimationFrame(() => {\n              onClose()\n              buttonRef.current?.focus()\n            })\n            break\n        }\n      }\n    },\n    [buttonRef, onClose]\n  )\n\n  if (renderAs === 'dialog') {\n    return (\n      <Dialog\n        title={title}\n        omitTriggerButton\n        openState={isOpen ?? open}\n        onClose={onClose}\n      >\n        {content}\n        {children}\n      </Dialog>\n    )\n  }\n\n  return (\n    <HeightAnimation\n      className={classnames('dnb-help-button__content', className)}\n      open={isOpen ?? open ?? false}\n    >\n      <Section\n        id={`${contentId}-content`}\n        aria-label={convertJsxToString(title)}\n        className=\"dnb-no-focus\"\n        tabIndex={-1}\n        innerRef={innerRef}\n        onKeyDown={onKeyDown}\n        outset={outsetFromLayout}\n        breakout={breakoutFromLayout}\n        roundedCorner={!breakoutFromLayout}\n        innerSpace={\n          breakoutFromLayout\n            ? { top: 'small', bottom: 'medium' }\n            : {\n                top: 'small',\n                bottom: 'medium',\n                left: 'medium',\n                right: 'x-small',\n              }\n        }\n        backgroundColor=\"lavender\"\n        {...rest}\n      >\n        <Flex.Vertical gap=\"x-small\">\n          {title && <P weight=\"medium\">{title}</P>}\n          {content && <P>{content}</P>}\n        </Flex.Vertical>\n        {children}\n      </Section>\n    </HeightAnimation>\n  )\n}\n\nfunction HelpButtonIcon() {\n  return (\n    <>\n      <QuestionIcon />\n      <CloseIcon />\n    </>\n  )\n}\n\nHelpButtonInline._supportsSpacingProps = true\nHelpButtonInlineContent._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"HelpButtonInline.js","names":["React","useCallback","useContext","useEffect","useRef","classnames","HelpButtonInstance","HeightAnimation","useSharedState","convertJsxToString","useId","Section","P","Flex","CardContext","Dialog","question","QuestionIcon","close","CloseIcon","HelpButtonInline","props","_help$open","contentId","size","help","focusWhenOpen","className","children","rest","_objectWithoutProperties","_excluded","controlId","data","update","isOpen","open","isUserIntent","wasOpenRef","undefined","buttonRef","toggleOpen","current","onClickHandler","event","preventDefault","onKeyDownHandler","currentTarget","target","key","trim","code","window","requestAnimationFrame","title","createElement","Fragment","_extends","bounding","icon","HelpButtonIcon","id","on_click","onKeyDown","innerRef","HelpButtonInlineContent","_ref","helpProp","breakout","outset","roundedCorner","focusWhenOpenProp","_excluded2","content","renderAs","breakoutProp","outsetProp","cardContext","breakoutFromLayout","Boolean","outsetFromLayout","_innerRef$current","focus","preventScroll","onClose","_buttonRef$current","omitTriggerButton","openState","focusParams","tabIndex","innerSpace","top","bottom","left","right","backgroundColor","Vertical","gap","weight","_QuestionIcon","_CloseIcon","_supportsSpacingProps"],"sources":["../../../../src/components/help-button/HelpButtonInline.tsx"],"sourcesContent":["import React, {\n  AriaAttributes,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { HelpButtonProps } from './HelpButton'\nimport HelpButtonInstance from './HelpButtonInstance'\nimport HeightAnimation from '../HeightAnimation'\nimport { useSharedState } from '../../shared/helpers/useSharedState'\nimport { convertJsxToString } from '../../shared/component-helper'\nimport useId from '../../shared/helpers/useId'\nimport Section from '../Section'\nimport { P } from '../../elements'\nimport Flex from '../Flex'\nimport CardContext from '../card/CardContext'\nimport { SpacingProps } from '../space/types'\nimport Dialog from '../Dialog'\nimport { question as QuestionIcon, close as CloseIcon } from '../../icons'\n\nexport type HelpProps = {\n  title?: React.ReactNode\n  content?: React.ReactNode\n  renderAs?: 'inline' | 'dialog'\n  /** Only for the \"inline\" variant */\n  open?: boolean\n  /** Only for the \"inline\" variant */\n  breakout?: boolean\n  /** Only for the \"inline\" variant */\n  outset?: boolean\n}\n\nexport type HelpButtonInlineProps = HelpButtonProps & {\n  contentId?: string\n  help?: HelpProps\n\n  /**\n   * If set to `true`, the content will get focus when the help content is opened.\n   */\n  focusWhenOpen?: boolean\n}\n\nexport type HelpButtonInlineSharedStateDataProps = {\n  isOpen: boolean\n  isUserIntent?: boolean\n  buttonRef?: React.RefObject<HTMLButtonElement>\n  focusWhenOpen?: boolean\n}\n\nexport default function HelpButtonInline(props: HelpButtonInlineProps) {\n  const {\n    contentId,\n    size,\n    help,\n    focusWhenOpen,\n    className,\n    children,\n    ...rest\n  } = props\n  const controlId = useId(contentId)\n\n  const { data, update } =\n    useSharedState<HelpButtonInlineSharedStateDataProps>(controlId, {\n      isOpen: help?.open ?? false,\n    })\n  const { isOpen, isUserIntent } = data || {}\n  const wasOpenRef = useRef(undefined)\n  const buttonRef = useRef<HTMLButtonElement>(null)\n\n  const toggleOpen = useCallback(() => {\n    update({\n      isOpen: !isOpen,\n      isUserIntent: !isOpen,\n      buttonRef,\n      focusWhenOpen,\n    })\n    wasOpenRef.current = !isOpen\n  }, [focusWhenOpen, isOpen, update])\n\n  const onClickHandler = useCallback(\n    ({ event }: { event: React.MouseEvent<HTMLButtonElement> }) => {\n      event.preventDefault() // Because when used inside a FormLabel\n      toggleOpen()\n    },\n    [toggleOpen]\n  )\n\n  const onKeyDownHandler = useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (event.currentTarget === event.target) {\n        switch (event.key.trim() || event.code) {\n          case 'Escape':\n            if (isOpen) {\n              event.preventDefault()\n              window.requestAnimationFrame(() => {\n                toggleOpen()\n              })\n            }\n            break\n        }\n      }\n    },\n    [isOpen, toggleOpen]\n  )\n\n  const title = convertJsxToString(help?.title)\n\n  return (\n    <>\n      <HelpButtonInstance\n        bounding\n        size={size ?? 'small'}\n        icon={HelpButtonIcon}\n        title={!isOpen && !wasOpenRef.current ? title : undefined}\n        {...rest}\n        id={controlId}\n        className={classnames(\n          'dnb-help-button__inline',\n          isOpen && 'dnb-help-button__inline--open',\n          isUserIntent && 'dnb-help-button__inline--user-intent',\n          typeof wasOpenRef.current === 'boolean' &&\n            'dnb-help-button__inline--was-open',\n          className\n        )}\n        aria-controls={`${controlId}-content`}\n        aria-expanded={isOpen}\n        aria-label={title}\n        on_click={onClickHandler}\n        onKeyDown={onKeyDownHandler}\n        innerRef={buttonRef}\n      />\n\n      {!contentId && (\n        <HelpButtonInlineContent\n          contentId={controlId}\n          help={help}\n          focusWhenOpen={focusWhenOpen}\n        >\n          {children}\n        </HelpButtonInlineContent>\n      )}\n    </>\n  )\n}\n\nexport type HelpButtonInlineContentProps = SpacingProps & {\n  contentId: string\n  className?: string\n  children?: React.ReactNode\n  help?: HelpProps\n  breakout?: boolean\n  outset?: boolean\n  roundedCorner?: boolean\n  focusWhenOpen?: boolean\n}\n\nexport function HelpButtonInlineContent(\n  props: HelpButtonInlineContentProps\n) {\n  const {\n    contentId,\n    className,\n    children,\n    help: helpProp,\n    breakout = true,\n    outset = true,\n    roundedCorner = true,\n    focusWhenOpen: focusWhenOpenProp,\n    ...rest\n  } = props\n  const { data, update } =\n    useSharedState<HelpButtonInlineSharedStateDataProps>(contentId)\n  const {\n    isOpen,\n    focusWhenOpen = focusWhenOpenProp,\n    isUserIntent,\n    buttonRef,\n  } = data || {}\n  const {\n    open,\n    title,\n    content,\n    renderAs,\n    breakout: breakoutProp = true,\n    outset: outsetProp = true,\n  } = helpProp || {}\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  const cardContext = useContext(CardContext)\n  const breakoutFromLayout =\n    Boolean(cardContext) && breakout && breakoutProp\n  const outsetFromLayout = outset && outsetProp\n\n  useEffect(() => {\n    if (isOpen && isUserIntent && focusWhenOpen) {\n      window.requestAnimationFrame(() => {\n        innerRef.current?.focus({ preventScroll: true })\n      })\n    }\n  }, [focusWhenOpen, isOpen, isUserIntent])\n\n  const onClose = useCallback(() => {\n    update({ isOpen: false, isUserIntent: false })\n  }, [update])\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (event.currentTarget === event.target) {\n        // Firefox returns a whitespace (\" \") on event.key when pressing space,\n        // therefore using .trim() can help normalize this.\n        // While userEvent.keyboard('{Space}') might return 'Unknown' on event.code,\n        // making a direct comparison less reliable across all platforms.\n        switch (event.key.trim() || event.code) {\n          case 'Enter':\n          case 'Space':\n          case 'Escape':\n            event.preventDefault()\n            window.requestAnimationFrame(() => {\n              onClose()\n              buttonRef.current?.focus()\n            })\n            break\n        }\n      }\n    },\n    [buttonRef, onClose]\n  )\n\n  if (renderAs === 'dialog') {\n    return (\n      <Dialog\n        title={title}\n        omitTriggerButton\n        openState={isOpen ?? open}\n        onClose={onClose}\n      >\n        {content}\n        {children}\n      </Dialog>\n    )\n  }\n\n  const focusParams = focusWhenOpen\n    ? {\n        'aria-label': convertJsxToString(title),\n        className: 'dnb-no-focus',\n        tabIndex: -1,\n        onKeyDown,\n      }\n    : ({\n        'aria-live': 'polite',\n        'aria-atomic': 'true',\n      } as AriaAttributes)\n\n  return (\n    <HeightAnimation\n      className={classnames('dnb-help-button__content', className)}\n      open={isOpen ?? open ?? false}\n    >\n      <Section\n        id={`${contentId}-content`}\n        {...focusParams}\n        innerRef={innerRef}\n        outset={outsetFromLayout}\n        breakout={breakoutFromLayout}\n        roundedCorner={roundedCorner ?? !breakoutFromLayout}\n        innerSpace={\n          breakoutFromLayout\n            ? { top: 'small', bottom: 'medium' }\n            : {\n                top: 'small',\n                bottom: 'medium',\n                left: 'medium',\n                right: 'x-small',\n              }\n        }\n        backgroundColor=\"lavender\"\n        {...rest}\n      >\n        <Flex.Vertical gap=\"x-small\">\n          {title && <P weight=\"medium\">{title}</P>}\n          {content && <P>{content}</P>}\n        </Flex.Vertical>\n        {children}\n      </Section>\n    </HeightAnimation>\n  )\n}\n\nfunction HelpButtonIcon() {\n  return (\n    <>\n      <QuestionIcon />\n      <CloseIcon />\n    </>\n  )\n}\n\nHelpButtonInline._supportsSpacingProps = true\nHelpButtonInlineContent._supportsSpacingProps = true\n"],"mappings":"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"}

package/es/components/help-button/HelpButtonInstance.js

@@ -41,7 +41,7 @@ export default function HelpButtonInstance(localProps) {
       params['aria-roledescription'] = context.getTranslation(props).HelpButton.aria_role;
     }
   }
-  if (!params.text && !params['aria-label']) {
+  if (!params.text && typeof params['aria-label'] === 'undefined') {
     let ariaLabel = convertJsxToString(props.title || props.children);
     if (!ariaLabel) {
       ariaLabel = context.getTranslation(props).HelpButton.title;

package/es/components/help-button/HelpButtonInstance.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpButtonInstance.js","names":["React","classnames","convertJsxToString","extendPropsWithContext","Context","createSpacingClasses","Button","defaultProps","variant","icon_position","HelpButtonInstance","localProps","context","useContext","props","HelpButton","size","icon","on_click","className","rest","_objectWithoutProperties","_excluded","params","_objectSpread","isPotentialHelpButton","text","isHelpButton","includes","String","getTranslation","aria_role","ariaLabel","title","children","icon_size","tooltip","createElement","_extends"],"sources":["../../../../src/components/help-button/HelpButtonInstance.tsx"],"sourcesContent":["/**\n * Web HelpButton Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport {\n  convertJsxToString,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport Context from '../../shared/Context'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Button, { ButtonProps } from '../button/Button'\n\nconst defaultProps = {\n  variant: 'secondary',\n  icon_position: 'left',\n}\n\nexport default function HelpButtonInstance(localProps: ButtonProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.HelpButton\n  )\n\n  const { size, icon, on_click, className, ...rest } = props\n\n  const params = {\n    className: classnames(\n      'dnb-help-button',\n      createSpacingClasses(props),\n      className\n    ),\n    size,\n    icon,\n    ...rest,\n  }\n\n  const isPotentialHelpButton =\n    !params.text || params.variant === 'tertiary'\n\n  if (isPotentialHelpButton && !params.icon && params.icon !== false) {\n    params.icon = 'question'\n  }\n\n  const isHelpButton =\n    isPotentialHelpButton &&\n    ['question', 'information'].includes(String(params.icon))\n\n  if (isHelpButton) {\n    if (!params['aria-roledescription']) {\n      params['aria-roledescription'] =\n        context.getTranslation(props).HelpButton.aria_role\n    }\n  }\n\n  if (!params.text && !params['aria-label']) {\n    let ariaLabel = convertJsxToString(props.title || props.children)\n    if (!ariaLabel) {\n      ariaLabel = context.getTranslation(props).HelpButton.title\n    }\n    params['aria-label'] = ariaLabel\n  }\n\n  if (icon === 'information' && !size) {\n    params.icon_size = 'medium'\n  }\n  if (params.title && !params.tooltip && params.tooltip !== false) {\n    params.tooltip = params.title\n  }\n  if (params.tooltip) {\n    params.title = null\n  }\n\n  return <Button on_click={on_click} {...params} />\n}\n"],"mappings":";;;;;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,kBAAkB,EAClBC,sBAAsB,QACjB,+BAA+B;AACtC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,OAAOC,MAAM,MAAuB,kBAAkB;AAEtD,MAAMC,YAAY,GAAG;EACnBC,OAAO,EAAE,WAAW;EACpBC,aAAa,EAAE;AACjB,CAAC;AAED,eAAe,SAASC,kBAAkBA,CAACC,UAAuB,EAAE;EAClE,MAAMC,OAAO,GAAGZ,KAAK,CAACa,UAAU,CAACT,OAAO,CAAC;EAGzC,MAAMU,KAAK,GAAGX,sBAAsB,CAClCQ,UAAU,EACVJ,YAAY,EACZK,OAAO,CAACG,UACV,CAAC;EAED,MAAM;MAAEC,IAAI;MAAEC,IAAI;MAAEC,QAAQ;MAAEC;IAAmB,CAAC,GAAGL,KAAK;IAAdM,IAAI,GAAAC,wBAAA,CAAKP,KAAK,EAAAQ,SAAA;EAE1D,MAAMC,MAAM,GAAAC,aAAA;IACVL,SAAS,EAAElB,UAAU,CACnB,iBAAiB,EACjBI,oBAAoB,CAACS,KAAK,CAAC,EAC3BK,SACF,CAAC;IACDH,IAAI;IACJC;EAAI,GACDG,IAAI,CACR;EAED,MAAMK,qBAAqB,GACzB,CAACF,MAAM,CAACG,IAAI,IAAIH,MAAM,CAACf,OAAO,KAAK,UAAU;EAE/C,IAAIiB,qBAAqB,IAAI,CAACF,MAAM,CAACN,IAAI,IAAIM,MAAM,CAACN,IAAI,KAAK,KAAK,EAAE;IAClEM,MAAM,CAACN,IAAI,GAAG,UAAU;EAC1B;EAEA,MAAMU,YAAY,GAChBF,qBAAqB,IACrB,CAAC,UAAU,EAAE,aAAa,CAAC,CAACG,QAAQ,CAACC,MAAM,CAACN,MAAM,CAACN,IAAI,CAAC,CAAC;EAE3D,IAAIU,YAAY,EAAE;IAChB,IAAI,CAACJ,MAAM,CAAC,sBAAsB,CAAC,EAAE;MACnCA,MAAM,CAAC,sBAAsB,CAAC,GAC5BX,OAAO,CAACkB,cAAc,CAAChB,KAAK,CAAC,CAACC,UAAU,CAACgB,SAAS;IACtD;EACF;EAEA,IAAI,CAACR,MAAM,CAACG,IAAI,IAAI,CAACH,MAAM,CAAC,YAAY,CAAC,EAAE;IACzC,IAAIS,SAAS,GAAG9B,kBAAkB,CAACY,KAAK,CAACmB,KAAK,IAAInB,KAAK,CAACoB,QAAQ,CAAC;IACjE,IAAI,CAACF,SAAS,EAAE;MACdA,SAAS,GAAGpB,OAAO,CAACkB,cAAc,CAAChB,KAAK,CAAC,CAACC,UAAU,CAACkB,KAAK;IAC5D;IACAV,MAAM,CAAC,YAAY,CAAC,GAAGS,SAAS;EAClC;EAEA,IAAIf,IAAI,KAAK,aAAa,IAAI,CAACD,IAAI,EAAE;IACnCO,MAAM,CAACY,SAAS,GAAG,QAAQ;EAC7B;EACA,IAAIZ,MAAM,CAACU,KAAK,IAAI,CAACV,MAAM,CAACa,OAAO,IAAIb,MAAM,CAACa,OAAO,KAAK,KAAK,EAAE;IAC/Db,MAAM,CAACa,OAAO,GAAGb,MAAM,CAACU,KAAK;EAC/B;EACA,IAAIV,MAAM,CAACa,OAAO,EAAE;IAClBb,MAAM,CAACU,KAAK,GAAG,IAAI;EACrB;EAEA,OAAOjC,KAAA,CAAAqC,aAAA,CAAC/B,MAAM,EAAAgC,QAAA;IAACpB,QAAQ,EAAEA;EAAS,GAAKK,MAAM,CAAG,CAAC;AACnD"}
+{"version":3,"file":"HelpButtonInstance.js","names":["React","classnames","convertJsxToString","extendPropsWithContext","Context","createSpacingClasses","Button","defaultProps","variant","icon_position","HelpButtonInstance","localProps","context","useContext","props","HelpButton","size","icon","on_click","className","rest","_objectWithoutProperties","_excluded","params","_objectSpread","isPotentialHelpButton","text","isHelpButton","includes","String","getTranslation","aria_role","ariaLabel","title","children","icon_size","tooltip","createElement","_extends"],"sources":["../../../../src/components/help-button/HelpButtonInstance.tsx"],"sourcesContent":["/**\n * Web HelpButton Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport {\n  convertJsxToString,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport Context from '../../shared/Context'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Button, { ButtonProps } from '../button/Button'\n\nconst defaultProps = {\n  variant: 'secondary',\n  icon_position: 'left',\n}\n\nexport default function HelpButtonInstance(localProps: ButtonProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.HelpButton\n  )\n\n  const { size, icon, on_click, className, ...rest } = props\n\n  const params = {\n    className: classnames(\n      'dnb-help-button',\n      createSpacingClasses(props),\n      className\n    ),\n    size,\n    icon,\n    ...rest,\n  }\n\n  const isPotentialHelpButton =\n    !params.text || params.variant === 'tertiary'\n\n  if (isPotentialHelpButton && !params.icon && params.icon !== false) {\n    params.icon = 'question'\n  }\n\n  const isHelpButton =\n    isPotentialHelpButton &&\n    ['question', 'information'].includes(String(params.icon))\n\n  if (isHelpButton) {\n    if (!params['aria-roledescription']) {\n      params['aria-roledescription'] =\n        context.getTranslation(props).HelpButton.aria_role\n    }\n  }\n\n  if (!params.text && typeof params['aria-label'] === 'undefined') {\n    let ariaLabel = convertJsxToString(props.title || props.children)\n    if (!ariaLabel) {\n      ariaLabel = context.getTranslation(props).HelpButton.title\n    }\n    params['aria-label'] = ariaLabel\n  }\n\n  if (icon === 'information' && !size) {\n    params.icon_size = 'medium'\n  }\n  if (params.title && !params.tooltip && params.tooltip !== false) {\n    params.tooltip = params.title\n  }\n  if (params.tooltip) {\n    params.title = null\n  }\n\n  return <Button on_click={on_click} {...params} />\n}\n"],"mappings":";;;;;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,kBAAkB,EAClBC,sBAAsB,QACjB,+BAA+B;AACtC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,OAAOC,MAAM,MAAuB,kBAAkB;AAEtD,MAAMC,YAAY,GAAG;EACnBC,OAAO,EAAE,WAAW;EACpBC,aAAa,EAAE;AACjB,CAAC;AAED,eAAe,SAASC,kBAAkBA,CAACC,UAAuB,EAAE;EAClE,MAAMC,OAAO,GAAGZ,KAAK,CAACa,UAAU,CAACT,OAAO,CAAC;EAGzC,MAAMU,KAAK,GAAGX,sBAAsB,CAClCQ,UAAU,EACVJ,YAAY,EACZK,OAAO,CAACG,UACV,CAAC;EAED,MAAM;MAAEC,IAAI;MAAEC,IAAI;MAAEC,QAAQ;MAAEC;IAAmB,CAAC,GAAGL,KAAK;IAAdM,IAAI,GAAAC,wBAAA,CAAKP,KAAK,EAAAQ,SAAA;EAE1D,MAAMC,MAAM,GAAAC,aAAA;IACVL,SAAS,EAAElB,UAAU,CACnB,iBAAiB,EACjBI,oBAAoB,CAACS,KAAK,CAAC,EAC3BK,SACF,CAAC;IACDH,IAAI;IACJC;EAAI,GACDG,IAAI,CACR;EAED,MAAMK,qBAAqB,GACzB,CAACF,MAAM,CAACG,IAAI,IAAIH,MAAM,CAACf,OAAO,KAAK,UAAU;EAE/C,IAAIiB,qBAAqB,IAAI,CAACF,MAAM,CAACN,IAAI,IAAIM,MAAM,CAACN,IAAI,KAAK,KAAK,EAAE;IAClEM,MAAM,CAACN,IAAI,GAAG,UAAU;EAC1B;EAEA,MAAMU,YAAY,GAChBF,qBAAqB,IACrB,CAAC,UAAU,EAAE,aAAa,CAAC,CAACG,QAAQ,CAACC,MAAM,CAACN,MAAM,CAACN,IAAI,CAAC,CAAC;EAE3D,IAAIU,YAAY,EAAE;IAChB,IAAI,CAACJ,MAAM,CAAC,sBAAsB,CAAC,EAAE;MACnCA,MAAM,CAAC,sBAAsB,CAAC,GAC5BX,OAAO,CAACkB,cAAc,CAAChB,KAAK,CAAC,CAACC,UAAU,CAACgB,SAAS;IACtD;EACF;EAEA,IAAI,CAACR,MAAM,CAACG,IAAI,IAAI,OAAOH,MAAM,CAAC,YAAY,CAAC,KAAK,WAAW,EAAE;IAC/D,IAAIS,SAAS,GAAG9B,kBAAkB,CAACY,KAAK,CAACmB,KAAK,IAAInB,KAAK,CAACoB,QAAQ,CAAC;IACjE,IAAI,CAACF,SAAS,EAAE;MACdA,SAAS,GAAGpB,OAAO,CAACkB,cAAc,CAAChB,KAAK,CAAC,CAACC,UAAU,CAACkB,KAAK;IAC5D;IACAV,MAAM,CAAC,YAAY,CAAC,GAAGS,SAAS;EAClC;EAEA,IAAIf,IAAI,KAAK,aAAa,IAAI,CAACD,IAAI,EAAE;IACnCO,MAAM,CAACY,SAAS,GAAG,QAAQ;EAC7B;EACA,IAAIZ,MAAM,CAACU,KAAK,IAAI,CAACV,MAAM,CAACa,OAAO,IAAIb,MAAM,CAACa,OAAO,KAAK,KAAK,EAAE;IAC/Db,MAAM,CAACa,OAAO,GAAGb,MAAM,CAACU,KAAK;EAC/B;EACA,IAAIV,MAAM,CAACa,OAAO,EAAE;IAClBb,MAAM,CAACU,KAAK,GAAG,IAAI;EACrB;EAEA,OAAOjC,KAAA,CAAAqC,aAAA,CAAC/B,MAAM,EAAAgC,QAAA;IAACpB,QAAQ,EAAEA;EAAS,GAAKK,MAAM,CAAG,CAAC;AACnD"}

package/es/components/slider/SliderDocs.js

@@ -50,12 +50,12 @@ export const SliderProperties = {
     status: 'optional'
   },
   subtractTitle: {
-    doc: 'Give the subtract button a title for accessibility reasons. Defaults to `−`.',
+    doc: 'Give the subtract button a title for accessibility reasons. Defaults to `Decrease (%s)`.',
     type: 'string',
     status: 'optional'
   },
   addTitle: {
-    doc: 'Give the add button a title for accessibility reasons. Defaults to `+`.',
+    doc: 'Give the add button a title for accessibility reasons. Defaults to `Increase (%s)`.',
     type: 'string',
     status: 'optional'
   },

package/es/components/slider/SliderDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderDocs.js","names":["SliderProperties","value","doc","type","status","min","max","step","vertical","reverse","stretch","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","label","labelDirection","labelSrOnly","statusState","statusProps","globalStatusId","suffix","skeleton","extensions","SliderEvents","onChange","onDragStart","onDragEnd"],"sources":["../../../../src/components/slider/SliderDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const SliderProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The `value` of the slider as a number or an array. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs).',\n    type: ['number', 'Array<number>'],\n    status: 'required',\n  },\n  min: {\n    doc: 'The minimum value. Can be a negative number as well. Defaults to `0`.',\n    type: 'number',\n    status: 'optional',\n  },\n  max: {\n    doc: 'The maximum value. Defaults to `100`.',\n    type: 'number',\n    status: 'optional',\n  },\n  step: {\n    doc: 'The steps the slider takes on changing the value. Defaults to `null`.',\n    type: 'number',\n    status: 'optional',\n  },\n  vertical: {\n    doc: 'Show the slider vertically. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  reverse: {\n    doc: 'Show the slider reversed. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'If set to `true`, then the slider will be 100% in `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  hideButtons: {\n    doc: 'Removes the helper buttons. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  multiThumbBehavior: {\n    doc: 'Use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`.',\n    type: 'string',\n    status: 'optional',\n  },\n  thumbTitle: {\n    doc: 'Give the slider thumb button a title for accessibility reasons. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  subtractTitle: {\n    doc: 'Give the subtract button a title for accessibility reasons. Defaults to `−`.',\n    type: 'string',\n    status: 'optional',\n  },\n  addTitle: {\n    doc: 'Give the add button a title for accessibility reasons. Defaults to `+`.',\n    type: 'string',\n    status: 'optional',\n  },\n  numberFormat: {\n    doc: 'Will extend the return object with a `number` property (from `onChange` event). You can use all the options from the [NumberFormat](/uilib/components/number-format/properties) component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `numberFormat={{ currency: true, decimals: 0 }}`',\n    type: 'object',\n    status: 'optional',\n  },\n  tooltip: {\n    doc: 'Use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  alwaysShowTooltip: {\n    doc: 'Use `true` to always show the tooltip, in addition to the `tooltip` property.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',\n    type: 'string',\n    status: 'optional',\n  },\n  labelDirection: {\n    doc: 'Use `labelDirection=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: 'string',\n    status: 'optional',\n  },\n  labelSrOnly: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\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: 'string',\n    status: 'optional',\n  },\n  statusState: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: 'string',\n    status: 'optional',\n  },\n  statusProps: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatusId: {\n    doc: 'The `status_id` used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'string',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component.',\n    type: 'string',\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  extensions: {\n    doc: 'Makes it possible to display overlays with other functionality such as a marker on the slider marking a given value.',\n    type: 'object',\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 SliderEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onDragStart: {\n    doc: 'will be called once the user stops dragging. Returns `{ event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onDragEnd: {\n    doc: 'will be called once the user starts dragging. Returns `{ event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"SliderDocs.js","names":["SliderProperties","value","doc","type","status","min","max","step","vertical","reverse","stretch","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","label","labelDirection","labelSrOnly","statusState","statusProps","globalStatusId","suffix","skeleton","extensions","SliderEvents","onChange","onDragStart","onDragEnd"],"sources":["../../../../src/components/slider/SliderDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const SliderProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The `value` of the slider as a number or an array. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs).',\n    type: ['number', 'Array<number>'],\n    status: 'required',\n  },\n  min: {\n    doc: 'The minimum value. Can be a negative number as well. Defaults to `0`.',\n    type: 'number',\n    status: 'optional',\n  },\n  max: {\n    doc: 'The maximum value. Defaults to `100`.',\n    type: 'number',\n    status: 'optional',\n  },\n  step: {\n    doc: 'The steps the slider takes on changing the value. Defaults to `null`.',\n    type: 'number',\n    status: 'optional',\n  },\n  vertical: {\n    doc: 'Show the slider vertically. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  reverse: {\n    doc: 'Show the slider reversed. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stretch: {\n    doc: 'If set to `true`, then the slider will be 100% in `width`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  hideButtons: {\n    doc: 'Removes the helper buttons. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  multiThumbBehavior: {\n    doc: 'Use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`.',\n    type: 'string',\n    status: 'optional',\n  },\n  thumbTitle: {\n    doc: 'Give the slider thumb button a title for accessibility reasons. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  subtractTitle: {\n    doc: 'Give the subtract button a title for accessibility reasons. Defaults to `Decrease (%s)`.',\n    type: 'string',\n    status: 'optional',\n  },\n  addTitle: {\n    doc: 'Give the add button a title for accessibility reasons. Defaults to `Increase (%s)`.',\n    type: 'string',\n    status: 'optional',\n  },\n  numberFormat: {\n    doc: 'Will extend the return object with a `number` property (from `onChange` event). You can use all the options from the [NumberFormat](/uilib/components/number-format/properties) component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `numberFormat={{ currency: true, decimals: 0 }}`',\n    type: 'object',\n    status: 'optional',\n  },\n  tooltip: {\n    doc: 'Use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  alwaysShowTooltip: {\n    doc: 'Use `true` to always show the tooltip, in addition to the `tooltip` property.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Prepends the Form Label component. If no ID is provided, a random ID is created.',\n    type: 'string',\n    status: 'optional',\n  },\n  labelDirection: {\n    doc: 'Use `labelDirection=\"vertical\"` to change the label layout direction. Defaults to `horizontal`.',\n    type: 'string',\n    status: 'optional',\n  },\n  labelSrOnly: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\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: 'string',\n    status: 'optional',\n  },\n  statusState: {\n    doc: 'Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.',\n    type: 'string',\n    status: 'optional',\n  },\n  statusProps: {\n    doc: 'Use an object to define additional FormStatus properties.',\n    type: 'object',\n    status: 'optional',\n  },\n  globalStatusId: {\n    doc: 'The `status_id` used for the target [GlobalStatus](/uilib/components/global-status).',\n    type: 'string',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component.',\n    type: 'string',\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  extensions: {\n    doc: 'Makes it possible to display overlays with other functionality such as a marker on the slider marking a given value.',\n    type: 'object',\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 SliderEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onDragStart: {\n    doc: 'will be called once the user stops dragging. Returns `{ event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onDragEnd: {\n    doc: 'will be called once the user starts dragging. Returns `{ event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}

package/es/components/slider/SliderProvider.js

@@ -10,8 +10,6 @@ import { closestIndex, getFormattedNumber, getUpdatedValues, roundValue } from '
 import { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps';
 const defaultProps = {
   statusState: 'error',
-  addTitle: '+',
-  subtractTitle: '−',
   min: 0,
   max: 100,
   value: -1,

package/es/components/slider/SliderProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderProvider.js","names":["React","pickFormElementProps","isTrue","makeUniqueId","dispatchCustomElementEvent","getStatusState","extendPropsWithContext","Context","closestIndex","getFormattedNumber","getUpdatedValues","roundValue","convertSnakeCaseProps","defaultProps","statusState","addTitle","subtractTitle","min","max","value","multiThumbBehavior","SliderContext","createContext","SliderProvider","localProps","context","useContext","allProps","skeleton","getTranslation","Slider","FormRow","vertical","formElement","_id","useState","id","step","label","labelDirection","labelSrOnly","status","statusProps","statusNoAnimation","globalStatus","stretch","suffix","thumbTitle","title","hideButtons","numberFormat","tooltip","alwaysShowTooltip","extensions","disabled","className","onChange","onDragStart","onDragEnd","_vertical","reverse","_reverse","_value","children","_children","attributes","_objectWithoutProperties","_excluded","setValue","externValue","updateExternValue","realtimeValue","useRef","thumbState","setThumbState","thumbIndex","shouldAnimate","updateAnimateState","isVertical","isReverse","isMulti","Array","isArray","setThumbIndex","index","isNaN","current","getAndUpdateCurrentIndex","currentValue","currentIndex","updateValue","emitChange","event","rawValue","numberValue","multiValues","lower","upper","obj","number","useEffect","hasChanged","some","val","i","trackRef","animationTimeout","setShouldAnimate","state","clearTimeout","setTimeout","showStatus","showButtons","values","createElement","Provider"],"sources":["../../../../src/components/slider/SliderProvider.tsx"],"sourcesContent":["import React from 'react'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport {\n  isTrue,\n  makeUniqueId,\n  dispatchCustomElementEvent,\n  getStatusState,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\n\nimport Context from '../../shared/Context'\nimport {\n  closestIndex,\n  getFormattedNumber,\n  getUpdatedValues,\n  roundValue,\n} from './SliderHelpers'\n\nimport type {\n  ValueTypes,\n  onChangeEventProps,\n  SliderAllProps,\n  SliderContextTypes,\n  ThumbStateEnums,\n} from './types'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nconst defaultProps = {\n  statusState: 'error',\n  addTitle: '+',\n  subtractTitle: '−',\n  min: 0,\n  max: 100,\n  value: -1,\n  multiThumbBehavior: 'swap',\n}\n\nexport const SliderContext = React.createContext<SliderContextTypes>(null)\n\nexport function SliderProvider(localProps: SliderAllProps) {\n  const context = React.useContext(Context)\n  const allProps = convertSnakeCaseProps(\n    extendPropsWithContext(\n      localProps,\n      defaultProps,\n      { skeleton: context?.skeleton },\n      context?.getTranslation(localProps).Slider,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(\n        context?.FormRow,\n\n        /**\n         * Exclude some props\n         */\n        {\n          vertical: null,\n        }\n      ),\n      pickFormElementProps(\n        context?.formElement,\n\n        /**\n         * Exclude some props\n         */\n        {\n          vertical: null,\n        }\n      ),\n      context?.Slider\n    )\n  )\n\n  const [_id] = React.useState(makeUniqueId)\n  if (!allProps.id) {\n    allProps.id = _id\n  }\n\n  const {\n    step,\n    label, // eslint-disable-line\n    labelDirection, // eslint-disable-line\n    labelSrOnly, // eslint-disable-line\n    status, // eslint-disable-line\n    statusState, // eslint-disable-line\n    statusProps, // eslint-disable-line\n    statusNoAnimation, // eslint-disable-line\n    globalStatus, // eslint-disable-line\n    stretch, // eslint-disable-line\n    suffix, // eslint-disable-line\n    thumbTitle: title, // eslint-disable-line\n    subtractTitle, // eslint-disable-line\n    addTitle, // eslint-disable-line\n    hideButtons, // eslint-disable-line\n    multiThumbBehavior,\n    numberFormat,\n    tooltip, // eslint-disable-line\n    alwaysShowTooltip, // eslint-disable-line\n    skeleton,\n    max, // eslint-disable-line\n    min, // eslint-disable-line\n    extensions, // eslint-disable-line\n    disabled,\n    className, // eslint-disable-line\n    id, // eslint-disable-line\n    onChange,\n    onDragStart, // eslint-disable-line\n    onDragEnd, // eslint-disable-line\n    vertical: _vertical,\n    reverse: _reverse,\n    value: _value,\n    children: _children, // eslint-disable-line\n\n    ...attributes // Find a DOM element to forwards props too when multi buttons are supported\n  } = allProps\n\n  const [value, setValue] = React.useState<ValueTypes>(_value)\n  const [externValue, updateExternValue] =\n    React.useState<ValueTypes>(_value)\n  const realtimeValue = React.useRef<ValueTypes>(_value)\n  const [thumbState, setThumbState] =\n    React.useState<ThumbStateEnums>('initial')\n  const thumbIndex = React.useRef<number>(-1)\n  const [shouldAnimate, updateAnimateState] =\n    React.useState<boolean>(false)\n  const [isVertical] = React.useState(isTrue(_vertical))\n  const [isReverse] = React.useState(\n    isVertical ? !isTrue(_reverse) : isTrue(_reverse)\n  )\n  const isMulti = Array.isArray(value)\n  const setThumbIndex = (index: number) => {\n    if (!isNaN(index)) {\n      thumbIndex.current = index\n    }\n  }\n\n  const getAndUpdateCurrentIndex = (currentValue: number) => {\n    let currentIndex = null\n\n    if (thumbIndex.current > -1) {\n      currentIndex = thumbIndex.current\n    } else {\n      currentIndex = closestIndex(currentValue, value as Array<number>)\n      setThumbIndex(currentIndex)\n    }\n\n    return currentIndex\n  }\n\n  const updateValue = (value: ValueTypes) => {\n    setValue(value)\n    realtimeValue.current = value\n  }\n\n  const emitChange = (\n    event: MouseEvent | TouchEvent,\n    rawValue: number\n  ) => {\n    if (disabled || isTrue(skeleton)) {\n      return\n    }\n\n    let numberValue = roundValue(rawValue, { step, min, max })\n    let multiValues: ValueTypes = numberValue\n\n    if (numberValue >= min) {\n      if (isMulti) {\n        const currentIndex = getAndUpdateCurrentIndex(numberValue)\n        const lower = realtimeValue.current[currentIndex - 1]\n        const upper = realtimeValue.current[currentIndex + 1]\n\n        if (multiThumbBehavior === 'omit') {\n          if (numberValue < lower) {\n            numberValue = lower\n          }\n          if (numberValue > upper) {\n            numberValue = upper\n          }\n        }\n\n        multiValues = getUpdatedValues(\n          multiThumbBehavior === 'push'\n            ? (realtimeValue.current as Array<number>)\n            : value,\n          currentIndex,\n          numberValue\n        )\n\n        if (multiThumbBehavior === 'push') {\n          if (typeof lower !== 'undefined' && numberValue < lower) {\n            multiValues[currentIndex - 1] = numberValue\n          }\n          if (typeof upper !== 'undefined' && numberValue >= upper) {\n            multiValues[currentIndex + 1] = numberValue\n          }\n        }\n\n        if (numberValue === realtimeValue.current[currentIndex]) {\n          return // stop here\n        }\n      } else if (numberValue === realtimeValue.current) {\n        return // stop here\n      }\n\n      if (typeof onChange === 'function') {\n        const obj: onChangeEventProps = {\n          value: multiValues,\n          rawValue,\n          event,\n          number: null,\n        }\n\n        if (numberFormat) {\n          obj.number = getFormattedNumber(numberValue, numberFormat).number\n        }\n\n        dispatchCustomElementEvent(allProps, 'onChange', obj)\n      }\n\n      updateValue(multiValues)\n    }\n  }\n\n  React.useEffect(() => {\n    if (isMulti) {\n      const hasChanged = (_value as Array<number>).some((val, i) => {\n        return val !== externValue[i]\n      })\n\n      if (hasChanged) {\n        updateValue(_value)\n        updateExternValue(_value)\n      }\n    } else if (_value !== externValue) {\n      updateValue(_value)\n      updateExternValue(_value)\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [_value, isMulti])\n\n  const trackRef = React.useRef<HTMLElement>()\n\n  const animationTimeout = React.useRef<NodeJS.Timeout>()\n  const setShouldAnimate = (state: boolean) => {\n    updateAnimateState(state)\n    clearTimeout(animationTimeout.current)\n    if (state) {\n      animationTimeout.current = setTimeout(\n        () => updateAnimateState(false),\n        250\n      )\n    }\n  }\n\n  const showStatus = getStatusState(status)\n  const showButtons = !isMulti && !isTrue(hideButtons)\n  const values = (isMulti ? value : [value]) as Array<number>\n\n  return (\n    <SliderContext.Provider\n      value={{\n        isMulti,\n        isReverse,\n        isVertical,\n        shouldAnimate,\n        value,\n        values,\n        setValue,\n        attributes,\n        showStatus,\n        showButtons,\n        thumbState,\n        setThumbState,\n        thumbIndex,\n        setThumbIndex,\n        emitChange,\n        allProps,\n        trackRef,\n        setShouldAnimate,\n        animationTimeout,\n      }}\n    >\n      {localProps.children}\n    </SliderContext.Provider>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"SliderProvider.js","names":["React","pickFormElementProps","isTrue","makeUniqueId","dispatchCustomElementEvent","getStatusState","extendPropsWithContext","Context","closestIndex","getFormattedNumber","getUpdatedValues","roundValue","convertSnakeCaseProps","defaultProps","statusState","min","max","value","multiThumbBehavior","SliderContext","createContext","SliderProvider","localProps","context","useContext","allProps","skeleton","getTranslation","Slider","FormRow","vertical","formElement","_id","useState","id","step","label","labelDirection","labelSrOnly","status","statusProps","statusNoAnimation","globalStatus","stretch","suffix","thumbTitle","title","subtractTitle","addTitle","hideButtons","numberFormat","tooltip","alwaysShowTooltip","extensions","disabled","className","onChange","onDragStart","onDragEnd","_vertical","reverse","_reverse","_value","children","_children","attributes","_objectWithoutProperties","_excluded","setValue","externValue","updateExternValue","realtimeValue","useRef","thumbState","setThumbState","thumbIndex","shouldAnimate","updateAnimateState","isVertical","isReverse","isMulti","Array","isArray","setThumbIndex","index","isNaN","current","getAndUpdateCurrentIndex","currentValue","currentIndex","updateValue","emitChange","event","rawValue","numberValue","multiValues","lower","upper","obj","number","useEffect","hasChanged","some","val","i","trackRef","animationTimeout","setShouldAnimate","state","clearTimeout","setTimeout","showStatus","showButtons","values","createElement","Provider"],"sources":["../../../../src/components/slider/SliderProvider.tsx"],"sourcesContent":["import React from 'react'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport {\n  isTrue,\n  makeUniqueId,\n  dispatchCustomElementEvent,\n  getStatusState,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\n\nimport Context from '../../shared/Context'\nimport {\n  closestIndex,\n  getFormattedNumber,\n  getUpdatedValues,\n  roundValue,\n} from './SliderHelpers'\n\nimport type {\n  ValueTypes,\n  onChangeEventProps,\n  SliderAllProps,\n  SliderContextTypes,\n  ThumbStateEnums,\n} from './types'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nconst defaultProps = {\n  statusState: 'error',\n  min: 0,\n  max: 100,\n  value: -1,\n  multiThumbBehavior: 'swap',\n}\n\nexport const SliderContext = React.createContext<SliderContextTypes>(null)\n\nexport function SliderProvider(localProps: SliderAllProps) {\n  const context = React.useContext(Context)\n  const allProps = convertSnakeCaseProps(\n    extendPropsWithContext(\n      localProps,\n      defaultProps,\n      { skeleton: context?.skeleton },\n      context?.getTranslation(localProps).Slider,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(\n        context?.FormRow,\n\n        /**\n         * Exclude some props\n         */\n        {\n          vertical: null,\n        }\n      ),\n      pickFormElementProps(\n        context?.formElement,\n\n        /**\n         * Exclude some props\n         */\n        {\n          vertical: null,\n        }\n      ),\n      context?.Slider\n    )\n  )\n\n  const [_id] = React.useState(makeUniqueId)\n  if (!allProps.id) {\n    allProps.id = _id\n  }\n\n  const {\n    step,\n    label, // eslint-disable-line\n    labelDirection, // eslint-disable-line\n    labelSrOnly, // eslint-disable-line\n    status, // eslint-disable-line\n    statusState, // eslint-disable-line\n    statusProps, // eslint-disable-line\n    statusNoAnimation, // eslint-disable-line\n    globalStatus, // eslint-disable-line\n    stretch, // eslint-disable-line\n    suffix, // eslint-disable-line\n    thumbTitle: title, // eslint-disable-line\n    subtractTitle, // eslint-disable-line\n    addTitle, // eslint-disable-line\n    hideButtons, // eslint-disable-line\n    multiThumbBehavior,\n    numberFormat,\n    tooltip, // eslint-disable-line\n    alwaysShowTooltip, // eslint-disable-line\n    skeleton,\n    max, // eslint-disable-line\n    min, // eslint-disable-line\n    extensions, // eslint-disable-line\n    disabled,\n    className, // eslint-disable-line\n    id, // eslint-disable-line\n    onChange,\n    onDragStart, // eslint-disable-line\n    onDragEnd, // eslint-disable-line\n    vertical: _vertical,\n    reverse: _reverse,\n    value: _value,\n    children: _children, // eslint-disable-line\n\n    ...attributes // Find a DOM element to forwards props too when multi buttons are supported\n  } = allProps\n\n  const [value, setValue] = React.useState<ValueTypes>(_value)\n  const [externValue, updateExternValue] =\n    React.useState<ValueTypes>(_value)\n  const realtimeValue = React.useRef<ValueTypes>(_value)\n  const [thumbState, setThumbState] =\n    React.useState<ThumbStateEnums>('initial')\n  const thumbIndex = React.useRef<number>(-1)\n  const [shouldAnimate, updateAnimateState] =\n    React.useState<boolean>(false)\n  const [isVertical] = React.useState(isTrue(_vertical))\n  const [isReverse] = React.useState(\n    isVertical ? !isTrue(_reverse) : isTrue(_reverse)\n  )\n  const isMulti = Array.isArray(value)\n  const setThumbIndex = (index: number) => {\n    if (!isNaN(index)) {\n      thumbIndex.current = index\n    }\n  }\n\n  const getAndUpdateCurrentIndex = (currentValue: number) => {\n    let currentIndex = null\n\n    if (thumbIndex.current > -1) {\n      currentIndex = thumbIndex.current\n    } else {\n      currentIndex = closestIndex(currentValue, value as Array<number>)\n      setThumbIndex(currentIndex)\n    }\n\n    return currentIndex\n  }\n\n  const updateValue = (value: ValueTypes) => {\n    setValue(value)\n    realtimeValue.current = value\n  }\n\n  const emitChange = (\n    event: MouseEvent | TouchEvent,\n    rawValue: number\n  ) => {\n    if (disabled || isTrue(skeleton)) {\n      return\n    }\n\n    let numberValue = roundValue(rawValue, { step, min, max })\n    let multiValues: ValueTypes = numberValue\n\n    if (numberValue >= min) {\n      if (isMulti) {\n        const currentIndex = getAndUpdateCurrentIndex(numberValue)\n        const lower = realtimeValue.current[currentIndex - 1]\n        const upper = realtimeValue.current[currentIndex + 1]\n\n        if (multiThumbBehavior === 'omit') {\n          if (numberValue < lower) {\n            numberValue = lower\n          }\n          if (numberValue > upper) {\n            numberValue = upper\n          }\n        }\n\n        multiValues = getUpdatedValues(\n          multiThumbBehavior === 'push'\n            ? (realtimeValue.current as Array<number>)\n            : value,\n          currentIndex,\n          numberValue\n        )\n\n        if (multiThumbBehavior === 'push') {\n          if (typeof lower !== 'undefined' && numberValue < lower) {\n            multiValues[currentIndex - 1] = numberValue\n          }\n          if (typeof upper !== 'undefined' && numberValue >= upper) {\n            multiValues[currentIndex + 1] = numberValue\n          }\n        }\n\n        if (numberValue === realtimeValue.current[currentIndex]) {\n          return // stop here\n        }\n      } else if (numberValue === realtimeValue.current) {\n        return // stop here\n      }\n\n      if (typeof onChange === 'function') {\n        const obj: onChangeEventProps = {\n          value: multiValues,\n          rawValue,\n          event,\n          number: null,\n        }\n\n        if (numberFormat) {\n          obj.number = getFormattedNumber(numberValue, numberFormat).number\n        }\n\n        dispatchCustomElementEvent(allProps, 'onChange', obj)\n      }\n\n      updateValue(multiValues)\n    }\n  }\n\n  React.useEffect(() => {\n    if (isMulti) {\n      const hasChanged = (_value as Array<number>).some((val, i) => {\n        return val !== externValue[i]\n      })\n\n      if (hasChanged) {\n        updateValue(_value)\n        updateExternValue(_value)\n      }\n    } else if (_value !== externValue) {\n      updateValue(_value)\n      updateExternValue(_value)\n    }\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [_value, isMulti])\n\n  const trackRef = React.useRef<HTMLElement>()\n\n  const animationTimeout = React.useRef<NodeJS.Timeout>()\n  const setShouldAnimate = (state: boolean) => {\n    updateAnimateState(state)\n    clearTimeout(animationTimeout.current)\n    if (state) {\n      animationTimeout.current = setTimeout(\n        () => updateAnimateState(false),\n        250\n      )\n    }\n  }\n\n  const showStatus = getStatusState(status)\n  const showButtons = !isMulti && !isTrue(hideButtons)\n  const values = (isMulti ? value : [value]) as Array<number>\n\n  return (\n    <SliderContext.Provider\n      value={{\n        isMulti,\n        isReverse,\n        isVertical,\n        shouldAnimate,\n        value,\n        values,\n        setValue,\n        attributes,\n        showStatus,\n        showButtons,\n        thumbState,\n        setThumbState,\n        thumbIndex,\n        setThumbIndex,\n        emitChange,\n        allProps,\n        trackRef,\n        setShouldAnimate,\n        animationTimeout,\n      }}\n    >\n      {localProps.children}\n    </SliderContext.Provider>\n  )\n}\n"],"mappings":"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"}

package/es/components/slider/types.d.ts

@@ -38,9 +38,9 @@ export type SliderProps = IncludeSnakeCase<{
     suffix?: SuffixChildren;
     /** give the slider thumb button a title for accessibility reasons. Defaults to `null`. */
     thumbTitle?: string;
-    /** give the add button a title for accessibility reasons. Defaults to `+`. */
+    /** give the add button a title for accessibility reasons. Defaults to `Increase (%s)`. */
     addTitle?: string;
-    /** give the subtract button a title for accessibility reasons. Defaults to `−`. */
+    /** give the subtract button a title for accessibility reasons. Defaults to `Decrease (%s)`. */
     subtractTitle?: string;
     /** the minimum value. Defaults to `0`. */
     min?: number;

package/es/components/slider/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/slider/types.ts"],"sourcesContent":["import React from 'react'\n\nimport type { SuffixChildren } from '../../shared/helpers/Suffix'\nimport type {\n  formatReturnType,\n  formatOptionParams,\n} from '../number-format/NumberUtils'\nimport { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { GlobalStatusConfigObject } from '../GlobalStatus'\n\nexport type ValueTypes = number | Array<number>\nexport type NumberFormatTypes =\n  | formatOptionParams\n  | ((value: number) => unknown)\nexport type onChangeEventProps = {\n  value: ValueTypes\n  rawValue: number\n  number?: formatReturnType | null\n  event?: Event\n}\n\nexport type SliderExtensions = Record<\n  string,\n  { instance: React.ElementType; [key: string]: unknown }\n>\n\nexport type SliderProps = IncludeSnakeCase<{\n  /** prepends the Form Label component. If no ID is provided, a random ID is created. */\n  label?: React.ReactNode\n\n  /** use `labelDirection=\"vertical\"` to change the label layout direction. Defaults to `horizontal`. */\n  labelDirection?: 'vertical' | 'horizontal'\n\n  /** use `true` to make the label only readable by screen readers. */\n  labelSrOnly?: boolean\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  status?: string | boolean\n\n  /** defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */\n  statusState?: 'error' | 'info'\n\n  /** use an object to define additional FormStatus properties. */\n  statusProps?: Record<string, unknown>\n  statusNoAnimation?: boolean\n\n  /** the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). */\n  globalStatus?: GlobalStatusConfigObject\n\n  /** text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component. */\n  suffix?: SuffixChildren\n\n  /** give the slider thumb button a title for accessibility reasons. Defaults to `null`. */\n  thumbTitle?: string\n\n  /** give the add button a title for accessibility reasons. Defaults to `+`. */\n  addTitle?: string\n\n  /** give the subtract button a title for accessibility reasons. Defaults to `−`. */\n  subtractTitle?: string\n\n  /** the minimum value. Defaults to `0`. */\n  min?: number\n\n  /** the maximum value. Defaults to `100`. */\n  max?: number\n\n  /** the `value` of the slider as a number. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs). */\n  value?: ValueTypes\n\n  /** the steps the slider takes on changing the value. Defaults to `null`. */\n  step?: number\n\n  /** makes it possible to display overlays with other functionality such as a marker on the slider marking a given value. */\n  extensions: SliderExtensions\n\n  /** show the slider vertically. Defaults to `false`. */\n  vertical?: boolean\n\n  /** show the slider reversed. Defaults to `false`. */\n  reverse?: boolean\n\n  /** if set to `true`, then the slider will be 100% in `width`. */\n  stretch?: boolean\n\n  /** provide a function callback or use the options from the [NumberFormat](/uilib/components/number-format/properties) component. It will show a formatted number in the Tooltip (`tooltip={true}`) and enhance the screen reader UX. It will also extend the `onChange` event return object with a formatted `number` property. */\n  numberFormat?: NumberFormatTypes\n\n  /** use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value. Defaults to `null`. */\n  tooltip: boolean\n\n  /** use `true` to always show the tooltip, in addition to the `tooltip` property.  */\n  alwaysShowTooltip: boolean\n\n  /** removes the helper buttons. Defaults to `false`. */\n  hideButtons?: boolean\n\n  /** use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`. */\n  multiThumbBehavior?: 'swap' | 'omit' | 'push'\n\n  /** if set to `true`, an overlaying skeleton with animation will be shown. */\n  skeleton?: SkeletonShow\n\n  id?: string\n  disabled?: boolean\n  className?: string\n\n  /**  will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`. */\n  onChange?: (props: onChangeEventProps) => void\n\n  /** will be called once the user stops dragging. Returns `{ event }`. */\n  onDragStart?: (props: { event: MouseEvent | TouchEvent }) => void\n\n  /** will be called once the user starts dragging. Returns `{ event }`. */\n  onDragEnd?: (props: { event: MouseEvent | TouchEvent }) => void\n\n  children?: React.ReactChild\n}>\n\nexport type SliderAllProps = SliderProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, keyof SliderProps>\n\nexport type ThumbStateEnums =\n  | 'initial'\n  | 'normal'\n  | 'activated'\n  | 'released'\n\nexport type SliderContextTypes = {\n  isMulti: boolean\n  isReverse: boolean\n  isVertical: boolean\n  shouldAnimate: boolean\n  thumbState: ThumbStateEnums\n  thumbIndex: React.RefObject<number>\n  showStatus: boolean\n  showButtons: boolean\n  attributes: unknown\n  allProps: SliderProps\n  value: ValueTypes\n  values: Array<number>\n  setValue: (value: ValueTypes) => void\n  setThumbState: (thumbState: ThumbStateEnums) => void\n  setThumbIndex: (thumbIndex: number) => void\n  emitChange: (emitEvent: MouseEvent | TouchEvent, value: number) => void\n  trackRef: React.RefObject<HTMLElement>\n  setShouldAnimate: (state: boolean) => void\n  animationTimeout: React.RefObject<NodeJS.Timeout>\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/slider/types.ts"],"sourcesContent":["import React from 'react'\n\nimport type { SuffixChildren } from '../../shared/helpers/Suffix'\nimport type {\n  formatReturnType,\n  formatOptionParams,\n} from '../number-format/NumberUtils'\nimport { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { GlobalStatusConfigObject } from '../GlobalStatus'\n\nexport type ValueTypes = number | Array<number>\nexport type NumberFormatTypes =\n  | formatOptionParams\n  | ((value: number) => unknown)\nexport type onChangeEventProps = {\n  value: ValueTypes\n  rawValue: number\n  number?: formatReturnType | null\n  event?: Event\n}\n\nexport type SliderExtensions = Record<\n  string,\n  { instance: React.ElementType; [key: string]: unknown }\n>\n\nexport type SliderProps = IncludeSnakeCase<{\n  /** prepends the Form Label component. If no ID is provided, a random ID is created. */\n  label?: React.ReactNode\n\n  /** use `labelDirection=\"vertical\"` to change the label layout direction. Defaults to `horizontal`. */\n  labelDirection?: 'vertical' | 'horizontal'\n\n  /** use `true` to make the label only readable by screen readers. */\n  labelSrOnly?: boolean\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  status?: string | boolean\n\n  /** defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */\n  statusState?: 'error' | 'info'\n\n  /** use an object to define additional FormStatus properties. */\n  statusProps?: Record<string, unknown>\n  statusNoAnimation?: boolean\n\n  /** the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). */\n  globalStatus?: GlobalStatusConfigObject\n\n  /** text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component. */\n  suffix?: SuffixChildren\n\n  /** give the slider thumb button a title for accessibility reasons. Defaults to `null`. */\n  thumbTitle?: string\n\n  /** give the add button a title for accessibility reasons. Defaults to `Increase (%s)`. */\n  addTitle?: string\n\n  /** give the subtract button a title for accessibility reasons. Defaults to `Decrease (%s)`. */\n  subtractTitle?: string\n\n  /** the minimum value. Defaults to `0`. */\n  min?: number\n\n  /** the maximum value. Defaults to `100`. */\n  max?: number\n\n  /** the `value` of the slider as a number. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs). */\n  value?: ValueTypes\n\n  /** the steps the slider takes on changing the value. Defaults to `null`. */\n  step?: number\n\n  /** makes it possible to display overlays with other functionality such as a marker on the slider marking a given value. */\n  extensions: SliderExtensions\n\n  /** show the slider vertically. Defaults to `false`. */\n  vertical?: boolean\n\n  /** show the slider reversed. Defaults to `false`. */\n  reverse?: boolean\n\n  /** if set to `true`, then the slider will be 100% in `width`. */\n  stretch?: boolean\n\n  /** provide a function callback or use the options from the [NumberFormat](/uilib/components/number-format/properties) component. It will show a formatted number in the Tooltip (`tooltip={true}`) and enhance the screen reader UX. It will also extend the `onChange` event return object with a formatted `number` property. */\n  numberFormat?: NumberFormatTypes\n\n  /** use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value. Defaults to `null`. */\n  tooltip: boolean\n\n  /** use `true` to always show the tooltip, in addition to the `tooltip` property.  */\n  alwaysShowTooltip: boolean\n\n  /** removes the helper buttons. Defaults to `false`. */\n  hideButtons?: boolean\n\n  /** use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`. */\n  multiThumbBehavior?: 'swap' | 'omit' | 'push'\n\n  /** if set to `true`, an overlaying skeleton with animation will be shown. */\n  skeleton?: SkeletonShow\n\n  id?: string\n  disabled?: boolean\n  className?: string\n\n  /**  will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`. */\n  onChange?: (props: onChangeEventProps) => void\n\n  /** will be called once the user stops dragging. Returns `{ event }`. */\n  onDragStart?: (props: { event: MouseEvent | TouchEvent }) => void\n\n  /** will be called once the user starts dragging. Returns `{ event }`. */\n  onDragEnd?: (props: { event: MouseEvent | TouchEvent }) => void\n\n  children?: React.ReactChild\n}>\n\nexport type SliderAllProps = SliderProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, keyof SliderProps>\n\nexport type ThumbStateEnums =\n  | 'initial'\n  | 'normal'\n  | 'activated'\n  | 'released'\n\nexport type SliderContextTypes = {\n  isMulti: boolean\n  isReverse: boolean\n  isVertical: boolean\n  shouldAnimate: boolean\n  thumbState: ThumbStateEnums\n  thumbIndex: React.RefObject<number>\n  showStatus: boolean\n  showButtons: boolean\n  attributes: unknown\n  allProps: SliderProps\n  value: ValueTypes\n  values: Array<number>\n  setValue: (value: ValueTypes) => void\n  setThumbState: (thumbState: ThumbStateEnums) => void\n  setThumbIndex: (thumbIndex: number) => void\n  emitChange: (emitEvent: MouseEvent | TouchEvent, value: number) => void\n  trackRef: React.RefObject<HTMLElement>\n  setShouldAnimate: (state: boolean) => void\n  animationTimeout: React.RefObject<NodeJS.Timeout>\n}\n"],"mappings":""}

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

@@ -8,6 +8,7 @@ import { StepIndicatorContextValues } from './StepIndicatorContext';
 import type { SpacingProps } from '../../shared/types';
 import type { SkeletonShow } from '../Skeleton';
 import type { StepIndicatorItemProps, StepItemWrapper } from './StepIndicatorItem';
+import { StepIndicatorTriggerButtonProps } from './StepIndicatorTriggerButton';
 export type StepIndicatorMode = 'static' | 'strict' | 'loose';
 export type StepIndicatorDataItem = Pick<StepIndicatorItemProps, 'title' | 'is_current' | 'inactive' | 'disabled' | 'status' | 'status_state' | 'on_click' | 'on_render'>;
 export type StepIndicatorData = string | string[] | StepIndicatorDataItem[];
@@ -78,6 +79,11 @@ export type StepIndicatorProps = Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'
      * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step, currentStep }`.
      */
     on_change?: ({ event, item, current_step, currentStep, }: StepIndicatorMouseEvent) => void;
+    /**
+     * The props for the trigger button.
+     * Used internally to pass the props such as a status to the trigger button.
+     */
+    triggerButtonProps?: StepIndicatorTriggerButtonProps;
     /**
      * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to `false`.
      */