@dnb/eufemia 10.71.2 → 10.72.1

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","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","element","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","_Fragment","_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  element?: React.ElementType\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    element,\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      element={element}\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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","ignoreList":[]}
+{"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","element","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","_Fragment","_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  element?: React.ElementType\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    element,\n    children,\n    help: helpProp,\n    breakout = true,\n    outset = true,\n    roundedCorner,\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      element={element}\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":";;;;;;;AAAA,OAAOA,KAAK,IAEVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,MAAM,QACD,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,eAAe,MAAM,oBAAoB;AAChD,SAASC,cAAc,QAAQ,qCAAqC;AACpE,SAASC,kBAAkB,QAAQ,+BAA+B;AAClE,OAAOC,KAAK,MAAM,4BAA4B;AAC9C,OAAOC,OAAO,MAAM,YAAY;AAChC,SAASC,CAAC,QAAQ,gBAAgB;AAClC,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,WAAW,MAAM,qBAAqB;AAE7C,OAAOC,MAAM,MAAM,WAAW;AAC9B,SAASC,QAAQ,IAAIC,YAAY,EAAEC,KAAK,IAAIC,SAAS,QAAQ,aAAa;AA+B1E,eAAe,SAASC,gBAAgBA,CAACC,KAA4B,EAAE;EAAA,IAAAC,UAAA;EACrE,MAAM;MACJC,SAAS;MACTC,IAAI;MACJC,IAAI;MACJC,aAAa;MACbC,SAAS;MACTC;IAEF,CAAC,GAAGP,KAAK;IADJQ,IAAI,GAAAC,wBAAA,CACLT,KAAK,EAAAU,SAAA;EACT,MAAMC,SAAS,GAAGtB,KAAK,CAACa,SAAS,CAAC;EAElC,MAAM;IAAEU,IAAI;IAAEC;EAAO,CAAC,GACpB1B,cAAc,CAAuCwB,SAAS,EAAE;IAC9DG,MAAM,GAAAb,UAAA,GAAEG,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEW,IAAI,cAAAd,UAAA,cAAAA,UAAA,GAAI;EACxB,CAAC,CAAC;EACJ,MAAM;IAAEa,MAAM;IAAEE;EAAa,CAAC,GAAGJ,IAAI,IAAI,CAAC,CAAC;EAC3C,MAAMK,UAAU,GAAGlC,MAAM,CAACmC,SAAS,CAAC;EACpC,MAAMC,SAAS,GAAGpC,MAAM,CAAoB,IAAI,CAAC;EAEjD,MAAMqC,UAAU,GAAGxC,WAAW,CAAC,MAAM;IACnCiC,MAAM,CAAC;MACLC,MAAM,EAAE,CAACA,MAAM;MACfE,YAAY,EAAE,CAACF,MAAM;MACrBK,SAAS;MACTd;IACF,CAAC,CAAC;IACFY,UAAU,CAACI,OAAO,GAAG,CAACP,MAAM;EAC9B,CAAC,EAAE,CAACT,aAAa,EAAES,MAAM,EAAED,MAAM,CAAC,CAAC;EAEnC,MAAMS,cAAc,GAAG1C,WAAW,CAChC,CAAC;IAAE2C;EAAsD,CAAC,KAAK;IAC7DA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBJ,UAAU,CAAC,CAAC;EACd,CAAC,EACD,CAACA,UAAU,CACb,CAAC;EAED,MAAMK,gBAAgB,GAAG7C,WAAW,CACjC2C,KAA6C,IAAK;IACjD,IAAIA,KAAK,CAACG,aAAa,KAAKH,KAAK,CAACI,MAAM,EAAE;MACxC,QAAQJ,KAAK,CAACK,GAAG,CAACC,IAAI,CAAC,CAAC,IAAIN,KAAK,CAACO,IAAI;QACpC,KAAK,QAAQ;UACX,IAAIhB,MAAM,EAAE;YACVS,KAAK,CAACC,cAAc,CAAC,CAAC;YACtBO,MAAM,CAACC,qBAAqB,CAAC,MAAM;cACjCZ,UAAU,CAAC,CAAC;YACd,CAAC,CAAC;UACJ;UACA;MACJ;IACF;EACF,CAAC,EACD,CAACN,MAAM,EAAEM,UAAU,CACrB,CAAC;EAED,MAAMa,KAAK,GAAG7C,kBAAkB,CAACgB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE6B,KAAK,CAAC;EAE7C,OACEtD,KAAA,CAAAuD,aAAA,CAAAvD,KAAA,CAAAwD,QAAA,QACExD,KAAA,CAAAuD,aAAA,CAACjD,kBAAkB,EAAAmD,QAAA;IACjBC,QAAQ;IACRlC,IAAI,EAAEA,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,OAAQ;IACtBmC,IAAI,EAAEC,cAAe;IACrBN,KAAK,EAAE,CAACnB,MAAM,IAAI,CAACG,UAAU,CAACI,OAAO,GAAGY,KAAK,GAAGf;EAAU,GACtDV,IAAI;IACRgC,EAAE,EAAE7B,SAAU;IACdL,SAAS,EAAEtB,UAAU,CACnB,yBAAyB,EAKzBsB,SAAS,EAJTQ,MAAM,IAAI,+BAA+B,EACzCE,YAAY,IAAI,sCAAsC,EACtD,OAAOC,UAAU,CAACI,OAAO,KAAK,SAAS,IACrC,mCAEJ,CAAE;IACF,iBAAe,GAAGV,SAAS,UAAW;IACtC,iBAAeG,MAAO;IACtB,cAAYmB,KAAM;IAClBQ,QAAQ,EAAEnB,cAAe;IACzBoB,SAAS,EAAEjB,gBAAiB;IAC5BkB,QAAQ,EAAExB;EAAU,EACrB,CAAC,EAED,CAACjB,SAAS,IACTvB,KAAA,CAAAuD,aAAA,CAACU,uBAAuB;IACtB1C,SAAS,EAAES,SAAU;IACrBP,IAAI,EAAEA,IAAK;IACXC,aAAa,EAAEA;EAAc,GAE5BE,QACsB,CAE3B,CAAC;AAEP;AAcA,OAAO,SAASqC,uBAAuBA,CACrC5C,KAAmC,EACnC;EAAA,IAAA6C,IAAA;EACA,MAAM;MACJ3C,SAAS;MACTI,SAAS;MACTwC,OAAO;MACPvC,QAAQ;MACRH,IAAI,EAAE2C,QAAQ;MACdC,QAAQ,GAAG,IAAI;MACfC,MAAM,GAAG,IAAI;MACbC,aAAa;MACb7C,aAAa,EAAE8C;IAEjB,CAAC,GAAGnD,KAAK;IADJQ,IAAI,GAAAC,wBAAA,CACLT,KAAK,EAAAoD,UAAA;EACT,MAAM;IAAExC,IAAI;IAAEC;EAAO,CAAC,GACpB1B,cAAc,CAAuCe,SAAS,CAAC;EACjE,MAAM;IACJY,MAAM;IACNT,aAAa,GAAG8C,iBAAiB;IACjCnC,YAAY;IACZG;EACF,CAAC,GAAGP,IAAI,IAAI,CAAC,CAAC;EACd,MAAM;IACJG,IAAI;IACJkB,KAAK;IACLoB,OAAO;IACPC,QAAQ;IACRN,QAAQ,EAAEO,YAAY,GAAG,IAAI;IAC7BN,MAAM,EAAEO,UAAU,GAAG;EACvB,CAAC,GAAGT,QAAQ,IAAI,CAAC,CAAC;EAElB,MAAMJ,QAAQ,GAAG5D,MAAM,CAAiB,IAAI,CAAC;EAC7C,MAAM0E,WAAW,GAAG5E,UAAU,CAACY,WAAW,CAAC;EAC3C,MAAMiE,kBAAkB,GACtBC,OAAO,CAACF,WAAW,CAAC,IAAIT,QAAQ,IAAIO,YAAY;EAClD,MAAMK,gBAAgB,GAAGX,MAAM,IAAIO,UAAU;EAE7C1E,SAAS,CAAC,MAAM;IACd,IAAIgC,MAAM,IAAIE,YAAY,IAAIX,aAAa,EAAE;MAC3C0B,MAAM,CAACC,qBAAqB,CAAC,MAAM;QAAA,IAAA6B,iBAAA;QACjC,CAAAA,iBAAA,GAAAlB,QAAQ,CAACtB,OAAO,cAAAwC,iBAAA,uBAAhBA,iBAAA,CAAkBC,KAAK,CAAC;UAAEC,aAAa,EAAE;QAAK,CAAC,CAAC;MAClD,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAAC1D,aAAa,EAAES,MAAM,EAAEE,YAAY,CAAC,CAAC;EAEzC,MAAMgD,OAAO,GAAGpF,WAAW,CAAC,MAAM;IAChCiC,MAAM,CAAC;MAAEC,MAAM,EAAE,KAAK;MAAEE,YAAY,EAAE;IAAM,CAAC,CAAC;EAChD,CAAC,EAAE,CAACH,MAAM,CAAC,CAAC;EAEZ,MAAM6B,SAAS,GAAG9D,WAAW,CAC1B2C,KAA6C,IAAK;IACjD,IAAIA,KAAK,CAACG,aAAa,KAAKH,KAAK,CAACI,MAAM,EAAE;MAKxC,QAAQJ,KAAK,CAACK,GAAG,CAACC,IAAI,CAAC,CAAC,IAAIN,KAAK,CAACO,IAAI;QACpC,KAAK,OAAO;QACZ,KAAK,OAAO;QACZ,KAAK,QAAQ;UACXP,KAAK,CAACC,cAAc,CAAC,CAAC;UACtBO,MAAM,CAACC,qBAAqB,CAAC,MAAM;YAAA,IAAAiC,kBAAA;YACjCD,OAAO,CAAC,CAAC;YACT,CAAAC,kBAAA,GAAA9C,SAAS,CAACE,OAAO,cAAA4C,kBAAA,uBAAjBA,kBAAA,CAAmBH,KAAK,CAAC,CAAC;UAC5B,CAAC,CAAC;UACF;MACJ;IACF;EACF,CAAC,EACD,CAAC3C,SAAS,EAAE6C,OAAO,CACrB,CAAC;EAED,IAAIV,QAAQ,KAAK,QAAQ,EAAE;IACzB,OACE3E,KAAA,CAAAuD,aAAA,CAACxC,MAAM;MACLuC,KAAK,EAAEA,KAAM;MACbiC,iBAAiB;MACjBC,SAAS,EAAErD,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIC,IAAK;MAC1BiD,OAAO,EAAEA;IAAQ,GAEhBX,OAAO,EACP9C,QACK,CAAC;EAEb;EAEA,MAAM6D,WAAW,GAAG/D,aAAa,GAC7B;IACE,YAAY,EAAEjB,kBAAkB,CAAC6C,KAAK,CAAC;IACvC3B,SAAS,EAAE,cAAc;IACzB+D,QAAQ,EAAE,CAAC,CAAC;IACZ3B;EACF,CAAC,GACA;IACC,WAAW,EAAE,QAAQ;IACrB,aAAa,EAAE;EACjB,CAAoB;EAExB,OACE/D,KAAA,CAAAuD,aAAA,CAAChD,eAAe;IACd4D,OAAO,EAAEA,OAAQ;IACjBxC,SAAS,EAAEtB,UAAU,CAAC,0BAA0B,EAAEsB,SAAS,CAAE;IAC7DS,IAAI,GAAA8B,IAAA,GAAE/B,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIC,IAAI,cAAA8B,IAAA,cAAAA,IAAA,GAAI;EAAM,GAE9BlE,KAAA,CAAAuD,aAAA,CAAC5C,OAAO,EAAA8C,QAAA;IACNI,EAAE,EAAE,GAAGtC,SAAS;EAAW,GACvBkE,WAAW;IACfzB,QAAQ,EAAEA,QAAS;IACnBM,MAAM,EAAEW,gBAAiB;IACzBZ,QAAQ,EAAEU,kBAAmB;IAC7BR,aAAa,EAAEA,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAI,CAACQ,kBAAmB;IACpDY,UAAU,EACRZ,kBAAkB,GACd;MAAEa,GAAG,EAAE,OAAO;MAAEC,MAAM,EAAE;IAAS,CAAC,GAClC;MACED,GAAG,EAAE,OAAO;MACZC,MAAM,EAAE,QAAQ;MAChBC,IAAI,EAAE,QAAQ;MACdC,KAAK,EAAE;IACT,CACL;IACDC,eAAe,EAAC;EAAU,GACtBnE,IAAI,GAER7B,KAAA,CAAAuD,aAAA,CAAC1C,IAAI,CAACoF,QAAQ;IAACC,GAAG,EAAC;EAAS,GACzB5C,KAAK,IAAItD,KAAA,CAAAuD,aAAA,CAAC3C,CAAC;IAACuF,MAAM,EAAC;EAAQ,GAAE7C,KAAS,CAAC,EACvCoB,OAAO,IAAI1E,KAAA,CAAAuD,aAAA,CAAC3C,CAAC,QAAE8D,OAAW,CACd,CAAC,EACf9C,QACM,CACM,CAAC;AAEtB;AAEA,SAASgC,cAAcA,CAAA,EAAG;EACxB,OAAAwC,SAAA,KAAAA,SAAA,GACEpG,KAAA,CAAAuD,aAAA,CAAAvD,KAAA,CAAAwD,QAAA,QACExD,KAAA,CAAAuD,aAAA,CAACtC,YAAY,MAAE,CAAC,EAChBjB,KAAA,CAAAuD,aAAA,CAACpC,SAAS,MAAE,CACZ,CAAC;AAEP;AAEAC,gBAAgB,CAACiF,qBAAqB,GAAG,IAAI;AAC7CpC,uBAAuB,CAACoC,qBAAqB,GAAG,IAAI","ignoreList":[]}

package/es/components/section/Section.d.ts

@@ -31,6 +31,7 @@ export type TextColor = string;
 export type OutlineColor = string | boolean;
 export type BackgroundColor = string;
 export type DropShadow = boolean;
+export type RoundedCorner = boolean | [boolean, boolean, boolean, boolean];
 export type SectionProps = {
     /**
      * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop
@@ -48,7 +49,7 @@ export type SectionProps = {
     /**
      * Define if the section should have rounded corners. Defaults to `false`.
      */
-    roundedCorner?: boolean | ResponsiveProp<boolean>;
+    roundedCorner?: RoundedCorner | ResponsiveProp<RoundedCorner>;
     /**
      * Define a custom border color. Use a Eufemia color.
      */

package/es/components/section/Section.js

@@ -41,14 +41,14 @@ export function SectionParams(localProps) {
   const elementRef = innerRef || inner_ref || internalRef;
   return Object.freeze(_objectSpread(_objectSpread({}, attributes), {}, {
     className: classnames(`dnb-section dnb-section--${variant ? variant : style_type || 'default'}`, className, spacing && `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`),
-    style: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, computeStyle(breakout, 'breakout', value => `var(--breakout--${value ? 'on' : 'off'})`)), computeStyle(outset, 'outset', value => value ? '1' : '0')), computeStyle(roundedCorner, 'rounded-corner', value => value && 'var(--rounded-corner--value)')), computeStyle(textColor, 'text-color', value => getColor(value))), computeStyle(backgroundColor, 'background-color', value => getColor(value))), computeStyle(dropShadow, 'drop-shadow', value => value && 'var(--shadow-default)')), computeStyle(outline, 'outline-color', value => String(value) === 'true' ? 'var(--outline-color--value)' : getColor(value))), attributes === null || attributes === void 0 ? void 0 : attributes.style),
+    style: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, computeStyle(breakout, 'breakout', value => `var(--breakout--${value ? 'on' : 'off'})`)), computeStyle(outset, 'outset', value => value ? '1' : '0')), computeStyle(roundedCorner, 'rounded-corner', value => typeof value === 'boolean' ? value && 'var(--rounded-corner--value)' : value.map(v => v ? 'var(--rounded-corner--value)' : '0').join(' '))), computeStyle(textColor, 'text-color', value => getColor(value))), computeStyle(backgroundColor, 'background-color', value => getColor(value))), computeStyle(dropShadow, 'drop-shadow', value => value && 'var(--shadow-default)')), computeStyle(outline, 'outline-color', value => typeof value === 'boolean' ? value && 'var(--outline-color--value)' : getColor(value))), attributes === null || attributes === void 0 ? void 0 : attributes.style),
     innerRef: elementRef,
     children
   }));
 }
 function computeStyle(property, name, valueCallback) {
   let media = property;
-  if (media !== null && typeof media !== 'object') {
+  if (media !== null && (Array.isArray(media) || typeof media !== 'object')) {
     media = {
       small: property,
       medium: property,

package/es/components/section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","extendPropsWithContext","Space","getColor","defaultProps","element","Section","localProps","createElement","SectionParams","context","useContext","props","variant","breakout","outset","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","_objectWithoutProperties","_excluded","internalRef","useRef","elementRef","Object","freeze","_objectSpread","style","computeStyle","value","String","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\nimport { getColor } from '../../shared/helpers'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the Card should break out negatively on larger screens. You cannot use `breakout` and `outset` together.\n   * Defaults to `false`\n   */\n  outset?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define a custom drop-shadow.\n   */\n  dropShadow?: DropShadow | ResponsiveProp<DropShadow>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead\n   */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead\n   */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead\n   */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n  className: string\n  innerRef: React.RefObject<HTMLElement>\n  children: React.ReactNode\n  style: React.CSSProperties\n}\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n  localProps: SectionAllProps\n): SectionReturnParams {\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.Section\n  )\n\n  const {\n    variant,\n    breakout = !props.outset,\n    outset,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    dropShadow,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n\n  return Object.freeze({\n    ...attributes,\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    style: {\n      ...computeStyle(\n        breakout,\n        'breakout',\n        (value) => `var(--breakout--${value ? 'on' : 'off'})`\n      ),\n      ...computeStyle(outset, 'outset', (value) => (value ? '1' : '0')),\n      ...computeStyle(\n        roundedCorner,\n        'rounded-corner',\n        (value) => value && 'var(--rounded-corner--value)'\n      ),\n      ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n      ...computeStyle(backgroundColor, 'background-color', (value) =>\n        getColor(value)\n      ),\n      ...computeStyle(\n        dropShadow,\n        'drop-shadow',\n        (value) => value && 'var(--shadow-default)'\n      ),\n      ...computeStyle(outline, 'outline-color', (value) =>\n        String(value) === 'true'\n          ? 'var(--outline-color--value)'\n          : getColor(value)\n      ),\n      ...attributes?.style,\n    } as React.CSSProperties,\n    innerRef: elementRef,\n    children,\n  })\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","extendPropsWithContext","Space","getColor","defaultProps","element","Section","localProps","createElement","SectionParams","context","useContext","props","variant","breakout","outset","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","_objectWithoutProperties","_excluded","internalRef","useRef","elementRef","Object","freeze","_objectSpread","style","computeStyle","value","map","v","join","property","name","valueCallback","media","Array","isArray","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\nimport { getColor } from '../../shared/helpers'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\nexport type RoundedCorner = boolean | [boolean, boolean, boolean, boolean]\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the Card should break out negatively on larger screens. You cannot use `breakout` and `outset` together.\n   * Defaults to `false`\n   */\n  outset?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: RoundedCorner | ResponsiveProp<RoundedCorner>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define a custom drop-shadow.\n   */\n  dropShadow?: DropShadow | ResponsiveProp<DropShadow>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead\n   */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead\n   */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead\n   */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n  className: string\n  innerRef: React.RefObject<HTMLElement>\n  children: React.ReactNode\n  style: React.CSSProperties\n}\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n  localProps: SectionAllProps\n): SectionReturnParams {\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.Section\n  )\n\n  const {\n    variant,\n    breakout = !props.outset,\n    outset,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    dropShadow,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n\n  return Object.freeze({\n    ...attributes,\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    style: {\n      ...computeStyle(\n        breakout,\n        'breakout',\n        (value) => `var(--breakout--${value ? 'on' : 'off'})`\n      ),\n      ...computeStyle(outset, 'outset', (value) => (value ? '1' : '0')),\n      ...computeStyle(roundedCorner, 'rounded-corner', (value) =>\n        typeof value === 'boolean'\n          ? value && 'var(--rounded-corner--value)'\n          : value\n              .map((v) => (v ? 'var(--rounded-corner--value)' : '0'))\n              .join(' ')\n      ),\n      ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n      ...computeStyle(backgroundColor, 'background-color', (value) =>\n        getColor(value)\n      ),\n      ...computeStyle(\n        dropShadow,\n        'drop-shadow',\n        (value) => value && 'var(--shadow-default)'\n      ),\n      ...computeStyle(outline, 'outline-color', (value) =>\n        typeof value === 'boolean'\n          ? value && 'var(--outline-color--value)'\n          : getColor(value)\n      ),\n      ...attributes?.style,\n    } as React.CSSProperties,\n    innerRef: elementRef,\n    children,\n  })\n}\n\nfunction computeStyle<T extends boolean | string | boolean[]>(\n  property: T | ResponsiveProp<T>,\n  name: string,\n  valueCallback: (value: T) => string | undefined\n) {\n  let media = property as ResponsiveProp<T>\n\n  if (\n    media !== null &&\n    (Array.isArray(media) || typeof media !== 'object')\n  ) {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<T>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<T>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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","ignoreList":[]}

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

@@ -19,6 +19,9 @@
   --width: 100vw;
   --height: 100%;
   --color-transparent: transparent;
+  --rounded-corner--small: 0;
+  --rounded-corner--medium: 0;
+  --rounded-corner--large: 0;
   color: var(--text-color, black);
   border-radius: var(--rounded-corner, 0);
 }
@@ -50,6 +53,7 @@
   --box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor,
     297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor;
   box-shadow: var(--box-shadow);
+  border-radius: var(--rounded-corner, 0);
 }
 .dnb-section:not([style*="--breakout"]) {
   --breakout: var(--breakout--on);

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

@@ -1,4 +1,4 @@
-.dnb-section{--breakout--on:visible;--breakout--off:hidden;--rounded-corner--value:0.5rem;--outline:0 0 0 var(--outline-width,1px) var(--outline-color,transparent);--outline-none:0 0 0 0 transparent;--top:0;--left:-100vw;--width:100vw;--height:100%;--color-transparent:transparent;border-radius:var(--rounded-corner,0);color:var(--text-color,#000);display:flow-root;position:relative}.dnb-section[style*="--background-color"]{background-color:var(--background-color,#fff)}.dnb-section:before{border-radius:var(--rounded-corner,0);bottom:0;box-shadow:var(--drop-shadow,var(--outline-none)),var(--outline,var(--outline-none));content:"";left:0;position:absolute;right:0;top:0;z-index:-1}.dnb-section:after{--box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor;background-color:currentcolor;box-shadow:var(--box-shadow);color:var(--background-color,currentcolor);content:"";height:var(--height);left:var(--left);position:absolute;top:var(--top);visibility:var(--breakout,hidden);width:var(--width);z-index:-15}.dnb-section:not([style*="--breakout"]){--breakout:var(--breakout--on)}.dnb-section[style*="--outset"].dnb-space[style]:not(.dnb-card){padding-left:calc(var(--padding-left)*(1 - var(--outset)));padding-right:calc(var(--padding-right)*(1 - var(--outset)))}.dnb-section[style*="--outset"]:before{background-color:inherit;margin-left:calc(var(--outset-left, var(--padding-left))*-1*var(--outset));margin-right:calc(var(--outset-right, var(--padding-right))*-1*var(--outset))}@media screen and (max-width:60em){.dnb-section{--breakout:var(--breakout--small,var(--breakout--fallback));--outset:var(--outset--small,var(--outset--fallback));--background-color--value:var(--background-color--small);--text-color--value:var(--text-color--small);--outline-color:var(--outline-color--small);--drop-shadow:var(--drop-shadow--small);--rounded-corner:var(
+.dnb-section{--breakout--on:visible;--breakout--off:hidden;--rounded-corner--value:0.5rem;--outline:0 0 0 var(--outline-width,1px) var(--outline-color,transparent);--outline-none:0 0 0 0 transparent;--top:0;--left:-100vw;--width:100vw;--height:100%;--color-transparent:transparent;--rounded-corner--small:0;--rounded-corner--medium:0;--rounded-corner--large:0;border-radius:var(--rounded-corner,0);color:var(--text-color,#000);display:flow-root;position:relative}.dnb-section[style*="--background-color"]{background-color:var(--background-color,#fff)}.dnb-section:before{bottom:0;box-shadow:var(--drop-shadow,var(--outline-none)),var(--outline,var(--outline-none));left:0;right:0;top:0;z-index:-1}.dnb-section:after,.dnb-section:before{border-radius:var(--rounded-corner,0);content:"";position:absolute}.dnb-section:after{--box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor;background-color:currentcolor;box-shadow:var(--box-shadow);color:var(--background-color,currentcolor);height:var(--height);left:var(--left);top:var(--top);visibility:var(--breakout,hidden);width:var(--width);z-index:-15}.dnb-section:not([style*="--breakout"]){--breakout:var(--breakout--on)}.dnb-section[style*="--outset"].dnb-space[style]:not(.dnb-card){padding-left:calc(var(--padding-left)*(1 - var(--outset)));padding-right:calc(var(--padding-right)*(1 - var(--outset)))}.dnb-section[style*="--outset"]:before{background-color:inherit;margin-left:calc(var(--outset-left, var(--padding-left))*-1*var(--outset));margin-right:calc(var(--outset-right, var(--padding-right))*-1*var(--outset))}@media screen and (max-width:60em){.dnb-section{--breakout:var(--breakout--small,var(--breakout--fallback));--outset:var(--outset--small,var(--outset--fallback));--background-color--value:var(--background-color--small);--text-color--value:var(--text-color--small);--outline-color:var(--outline-color--small);--drop-shadow:var(--drop-shadow--small);--rounded-corner:var(
       --rounded-corner--small,var(--rounded-corner--fallback)
     )}}@media screen and (max-width:60em) and (min-width:40.00625em){.dnb-section{--breakout:var(--breakout--medium,var(--breakout--fallback));--outset:var(--outset--medium,var(--outset--fallback));--background-color--value:var(--background-color--medium);--text-color--value:var(--text-color--medium);--outline-color:var(--outline-color--medium);--drop-shadow:var(--drop-shadow--medium);--rounded-corner:var(
       --rounded-corner--medium,var(--rounded-corner--fallback)

package/es/components/section/style/dnb-section.scss

@@ -23,6 +23,10 @@
   --width: 100vw;
   --height: 100%;
   --color-transparent: transparent;
+  // reset to prevent inheriting from parent
+  --rounded-corner--small: 0;
+  --rounded-corner--medium: 0;
+  --rounded-corner--large: 0;
 
   color: var(--text-color, black);
   border-radius: var(--rounded-corner, 0);
@@ -61,6 +65,7 @@
     // we use box-shadow to avoid a horizontal scrollbar
     // We lower the left position, so we get an overlap
     box-shadow: var(--box-shadow);
+    border-radius: var(--rounded-corner, 0);
   }
 
   &:not([style*='--breakout']) {

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

@@ -8,7 +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';
+import { FormStatusState, FormStatusText } from '../form-status/FormStatus';
 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[];
@@ -19,8 +19,11 @@ export type StepIndicatorMouseEvent = {
     current_step: number;
 };
 export type StepIndicatorRenderCallback = {
+    /** A component that will render the item with the correct props. */
     StepItem: typeof StepItemWrapper;
+    /** Element that was originally going to be rendered */
     element: React.ReactNode;
+    /** @deprecated never has values */
     attributes: React.HTMLProps<HTMLElement>;
     props: StepIndicatorItemProps;
     context: StepIndicatorContextValues;
@@ -28,6 +31,7 @@ export type StepIndicatorRenderCallback = {
 export type StepIndicatorProps = Omit<React.HTMLProps<HTMLAnchorElement>, 'ref' | 'data'> & SpacingProps & {
     /**
      * <em>(required with `<StepIndicator.Sidebar />`)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
+     * @deprecated StepIndicator.Sidebar variant is no longer supported
      */
     sidebar_id?: string;
     /**
@@ -57,6 +61,7 @@ export type StepIndicatorProps = Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'
      * `%step` is used to place the current step into the text
      * `%count` is used to place the step total into the text
      *  Defaults to `You are on step %step of %count`
+     * @deprecated only `step_title`is used
      */
     step_title_extended?: string;
     /**
@@ -73,6 +78,7 @@ export type StepIndicatorProps = Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'
     on_click?: ({ event, item, current_step, currentStep, }: StepIndicatorMouseEvent) => void;
     /**
      * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.
+     * @deprecated no longer does anything other than the step item `title` prop
      */
     on_item_render?: ({ StepItem, element, attributes, props, context, }: StepIndicatorRenderCallback) => React.ReactNode;
     /**
@@ -80,19 +86,31 @@ export type StepIndicatorProps = Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'
      */
     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.
+     * Status text. Status is only shown if this prop has text. Defaults to `undefined`
      */
-    triggerButtonProps?: StepIndicatorTriggerButtonProps;
+    status?: FormStatusText;
+    /**
+     * The type of status for the `status` prop. Is either `info`, `error` or `warn`.
+     * Defaults to `warn`.
+     */
+    status_state?: FormStatusState;
     /**
      * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to `false`.
      */
     no_animation?: boolean;
+    /**
+     * Set to `true` to have the list be expanded initially. Defaults to `false`.
+     */
+    expandedInitially?: boolean;
+    /**
+     * Whether or not to break out (using negative margins) on larger screens. Defaults to `false`.
+     */
+    outset?: boolean;
     skeleton?: SkeletonShow;
     className?: string;
     children?: React.ReactNode;
 };
-declare function StepIndicator({ data, skeleton, current_step, hide_numbers, no_animation, ...restOfProps }: StepIndicatorProps): import("react/jsx-runtime").JSX.Element;
+declare function StepIndicator({ status, status_state, data, skeleton, current_step, hide_numbers, no_animation, expandedInitially, ...restOfProps }: StepIndicatorProps): import("react/jsx-runtime").JSX.Element;
 declare namespace StepIndicator {
     var Sidebar: typeof StepIndicatorSidebar;
     var _supportsSpacingProps: boolean;

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

@@ -1,38 +1,80 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
+"use client";
+
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _div;
-const _excluded = ["data", "skeleton", "current_step", "hide_numbers", "no_animation"];
+var _StepIndicatorTrigger, _StepIndicatorList;
+const _excluded = ["sidebar_id", "step_title_extended"],
+  _excluded2 = ["status", "status_state", "data", "skeleton", "current_step", "hide_numbers", "no_animation", "expandedInitially"],
+  _excluded3 = ["outset"];
 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 from 'react';
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import Card from '../Card';
+import StepIndicatorTriggerButton from './StepIndicatorTriggerButton';
 import StepIndicatorSidebar from './StepIndicatorSidebar';
-import StepIndicatorModal from './StepIndicatorModal';
-import { StepIndicatorProvider } from './StepIndicatorContext';
+import StepIndicatorList from './StepIndicatorList';
+import StepIndicatorContext, { StepIndicatorProvider } from './StepIndicatorContext';
 import { stepIndicatorDefaultProps } from './StepIndicatorProps';
-import useId from '../../shared/helpers/useId';
+import FormStatus from '../form-status/FormStatus';
+function handleDeprecatedProps(props) {
+  const {
+      sidebar_id,
+      step_title_extended
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  return rest;
+}
 function StepIndicator(_ref) {
   let {
+      status,
+      status_state = 'warn',
       data = stepIndicatorDefaultProps.data,
       skeleton = stepIndicatorDefaultProps.skeleton,
       current_step = stepIndicatorDefaultProps.current_step,
       hide_numbers = stepIndicatorDefaultProps.hide_numbers,
-      no_animation = stepIndicatorDefaultProps.no_animation
+      no_animation = stepIndicatorDefaultProps.no_animation,
+      expandedInitially = stepIndicatorDefaultProps.expandedInitially
     } = _ref,
-    restOfProps = _objectWithoutProperties(_ref, _excluded);
-  const props = _objectSpread({
-    data,
-    skeleton,
-    current_step,
-    hide_numbers,
-    no_animation
-  }, restOfProps);
-  const sidebarId = useId(props.sidebar_id);
-  return React.createElement(StepIndicatorProvider, _extends({}, props, {
-    sidebar_id: sidebarId
-  }), _div || (_div = React.createElement("div", {
+    restOfProps = _objectWithoutProperties(_ref, _excluded2);
+  const _handleDeprecatedProp = handleDeprecatedProps(_objectSpread({
+      data,
+      skeleton,
+      current_step,
+      hide_numbers,
+      no_animation,
+      expandedInitially
+    }, restOfProps)),
+    {
+      outset
+    } = _handleDeprecatedProp,
+    props = _objectWithoutProperties(_handleDeprecatedProp, _excluded3);
+  return React.createElement(StepIndicatorProvider, props, React.createElement("div", {
     className: "dnb-step-indicator-wrapper"
-  }, React.createElement(StepIndicatorModal, null))));
+  }, React.createElement(Card, {
+    align: "stretch",
+    className: classnames('dnb-step-indicator', createSpacingClasses(restOfProps)),
+    outset: outset
+  }, _StepIndicatorTrigger || (_StepIndicatorTrigger = React.createElement(StepIndicatorTriggerButton, null)), _StepIndicatorList || (_StepIndicatorList = React.createElement(StepIndicatorList, null))), React.createElement(StepIndicatorStatus, {
+    status: status,
+    status_state: status_state
+  })));
+}
+function StepIndicatorStatus({
+  status,
+  status_state
+}) {
+  const {
+    openState,
+    no_animation
+  } = useContext(StepIndicatorContext);
+  const show = !openState && !!status;
+  return React.createElement(FormStatus, {
+    show: show,
+    no_animation: no_animation,
+    state: status && status_state
+  }, status);
 }
 StepIndicator.Sidebar = StepIndicatorSidebar;
 StepIndicator._supportsSpacingProps = true;

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

@@ -1 +1 @@
-{"version":3,"file":"StepIndicator.js","names":["React","StepIndicatorSidebar","StepIndicatorModal","StepIndicatorProvider","stepIndicatorDefaultProps","useId","StepIndicator","_ref","data","skeleton","current_step","hide_numbers","no_animation","restOfProps","_objectWithoutProperties","_excluded","props","_objectSpread","sidebarId","sidebar_id","createElement","_extends","_div","className","Sidebar","_supportsSpacingProps"],"sources":["../../../../src/components/step-indicator/StepIndicator.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React from 'react'\n\nimport StepIndicatorSidebar from './StepIndicatorSidebar'\n\nimport StepIndicatorModal from './StepIndicatorModal'\nimport {\n  StepIndicatorContextValues,\n  StepIndicatorProvider,\n} from './StepIndicatorContext'\n\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\nimport type {\n  StepIndicatorItemProps,\n  StepItemWrapper,\n} from './StepIndicatorItem'\nimport { stepIndicatorDefaultProps } from './StepIndicatorProps'\nimport useId from '../../shared/helpers/useId'\nimport { StepIndicatorTriggerButtonProps } from './StepIndicatorTriggerButton'\n\nexport type StepIndicatorMode = 'static' | 'strict' | 'loose'\nexport type StepIndicatorDataItem = Pick<\n  StepIndicatorItemProps,\n  | 'title'\n  | 'is_current'\n  | 'inactive'\n  | 'disabled'\n  | 'status'\n  | 'status_state'\n  | 'on_click'\n  | 'on_render'\n>\nexport type StepIndicatorData = string | string[] | StepIndicatorDataItem[]\n\nexport type StepIndicatorMouseEvent = {\n  event: React.MouseEvent<HTMLButtonElement>\n  item: StepIndicatorItemProps\n  currentStep: number\n  current_step: number\n}\n\nexport type StepIndicatorRenderCallback = {\n  StepItem: typeof StepItemWrapper\n  element: React.ReactNode\n  attributes: React.HTMLProps<HTMLElement>\n  props: StepIndicatorItemProps\n  context: StepIndicatorContextValues\n}\n\nexport type StepIndicatorProps = Omit<\n  React.HTMLProps<HTMLAnchorElement>,\n  'ref' | 'data'\n> &\n  SpacingProps & {\n    /**\n     * <em>(required with `<StepIndicator.Sidebar />`)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.\n     */\n    sidebar_id?: string\n    /**\n     * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.\n     */\n    mode: StepIndicatorMode\n    /**\n     * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.\n     */\n    data: StepIndicatorData\n    /**\n     *  The title shown inside the `<StepIndicatorModal />` supplemental screen reader text for the `<StepIndicatorTriggerButton />`\n     *  Defaults to `Steps Overview`\n     */\n    overview_title?: string\n    /**\n     *  The label for `<StepIndicatorTriggerButton />` and supplemental screen reader text for `<StepIndicatorItem />`\n     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps\n     * `%step` is used to place the current step into the text\n     * `%count` is used to place the step total into the text\n     *  Defaults to `Step %step of %count`\n     */\n    step_title?: string\n    /**\n     *  A descriptive label used in `<StepIndicatorModal />`\n     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps\n     * `%step` is used to place the current step into the text\n     * `%count` is used to place the step total into the text\n     *  Defaults to `You are on step %step of %count`\n     */\n    step_title_extended?: string\n    /**\n     * Defines the active number marked step starting by 0. Defaults to `0`.\n     */\n    current_step?: number\n    /**\n     * Define whether to show automatically counted numbers or not. Defaults to `false`.\n     */\n    hide_numbers?: boolean\n    /**\n     * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step, currentStep }`.\n     */\n    on_click?: ({\n      event,\n      item,\n      current_step,\n      currentStep,\n    }: StepIndicatorMouseEvent) => void\n    /**\n     * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.\n     */\n    on_item_render?: ({\n      StepItem,\n      element,\n      attributes,\n      props,\n      context,\n    }: StepIndicatorRenderCallback) => React.ReactNode\n    /**\n     * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step, currentStep }`.\n     */\n    on_change?: ({\n      event,\n      item,\n      current_step,\n      currentStep,\n    }: StepIndicatorMouseEvent) => void\n\n    /**\n     * The props for the trigger button.\n     * Used internally to pass the props such as a status to the trigger button.\n     */\n    triggerButtonProps?: StepIndicatorTriggerButtonProps\n\n    /**\n     * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to `false`.\n     */\n    no_animation?: boolean\n    skeleton?: SkeletonShow\n    className?: string\n    children?: React.ReactNode\n  }\n\nfunction StepIndicator({\n  data = stepIndicatorDefaultProps.data,\n  skeleton = stepIndicatorDefaultProps.skeleton,\n  current_step = stepIndicatorDefaultProps.current_step,\n  hide_numbers = stepIndicatorDefaultProps.hide_numbers,\n  no_animation = stepIndicatorDefaultProps.no_animation,\n  ...restOfProps\n}: StepIndicatorProps) {\n  const props = {\n    data,\n    skeleton,\n    current_step,\n    hide_numbers,\n    no_animation,\n    ...restOfProps,\n  }\n\n  const sidebarId = useId(props.sidebar_id)\n\n  return (\n    <StepIndicatorProvider {...props} sidebar_id={sidebarId}>\n      <div className=\"dnb-step-indicator-wrapper\">\n        <StepIndicatorModal />\n      </div>\n    </StepIndicatorProvider>\n  )\n}\n\nStepIndicator.Sidebar = StepIndicatorSidebar\n\nStepIndicator._supportsSpacingProps = true\n\nexport default StepIndicator\n"],"mappings":";;;;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzD,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,SAEEC,qBAAqB,QAChB,wBAAwB;AAQ/B,SAASC,yBAAyB,QAAQ,sBAAsB;AAChE,OAAOC,KAAK,MAAM,4BAA4B;AA0H9C,SAASC,aAAaA,CAAAC,IAAA,EAOC;EAAA,IAPA;MACrBC,IAAI,GAAGJ,yBAAyB,CAACI,IAAI;MACrCC,QAAQ,GAAGL,yBAAyB,CAACK,QAAQ;MAC7CC,YAAY,GAAGN,yBAAyB,CAACM,YAAY;MACrDC,YAAY,GAAGP,yBAAyB,CAACO,YAAY;MACrDC,YAAY,GAAGR,yBAAyB,CAACQ;IAEvB,CAAC,GAAAL,IAAA;IADhBM,WAAW,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEd,MAAMC,KAAK,GAAAC,aAAA;IACTT,IAAI;IACJC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC;EAAY,GACTC,WAAW,CACf;EAED,MAAMK,SAAS,GAAGb,KAAK,CAACW,KAAK,CAACG,UAAU,CAAC;EAEzC,OACEnB,KAAA,CAAAoB,aAAA,CAACjB,qBAAqB,EAAAkB,QAAA,KAAKL,KAAK;IAAEG,UAAU,EAAED;EAAU,IAAAI,IAAA,KAAAA,IAAA,GACtDtB,KAAA,CAAAoB,aAAA;IAAKG,SAAS,EAAC;EAA4B,GACzCvB,KAAA,CAAAoB,aAAA,CAAClB,kBAAkB,MAAE,CAClB,CAAC,CACe,CAAC;AAE5B;AAEAI,aAAa,CAACkB,OAAO,GAAGvB,oBAAoB;AAE5CK,aAAa,CAACmB,qBAAqB,GAAG,IAAI;AAE1C,eAAenB,aAAa","ignoreList":[]}
+{"version":3,"file":"StepIndicator.js","names":["React","useContext","classnames","createSpacingClasses","Card","StepIndicatorTriggerButton","StepIndicatorSidebar","StepIndicatorList","StepIndicatorContext","StepIndicatorProvider","stepIndicatorDefaultProps","FormStatus","handleDeprecatedProps","props","sidebar_id","step_title_extended","rest","_objectWithoutProperties","_excluded","StepIndicator","_ref","status","status_state","data","skeleton","current_step","hide_numbers","no_animation","expandedInitially","restOfProps","_excluded2","_handleDeprecatedProp","_objectSpread","outset","_excluded3","createElement","className","align","_StepIndicatorTrigger","_StepIndicatorList","StepIndicatorStatus","openState","show","state","Sidebar","_supportsSpacingProps"],"sources":["../../../../src/components/step-indicator/StepIndicator.tsx"],"sourcesContent":["/**\n * Web StepIndicator Component\n *\n */\n\nimport React, { useContext } from 'react'\nimport classnames from 'classnames'\n\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Card from '../Card'\nimport StepIndicatorTriggerButton from './StepIndicatorTriggerButton'\nimport StepIndicatorSidebar from './StepIndicatorSidebar'\nimport StepIndicatorList from './StepIndicatorList'\nimport StepIndicatorContext, {\n  StepIndicatorContextValues,\n  StepIndicatorProvider,\n} from './StepIndicatorContext'\n\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\nimport type {\n  StepIndicatorItemProps,\n  StepItemWrapper,\n} from './StepIndicatorItem'\nimport { stepIndicatorDefaultProps } from './StepIndicatorProps'\nimport FormStatus, {\n  FormStatusState,\n  FormStatusText,\n} from '../form-status/FormStatus'\n\nexport type StepIndicatorMode = 'static' | 'strict' | 'loose'\nexport type StepIndicatorDataItem = Pick<\n  StepIndicatorItemProps,\n  | 'title'\n  | 'is_current'\n  | 'inactive'\n  | 'disabled'\n  | 'status'\n  | 'status_state'\n  | 'on_click'\n  | 'on_render'\n>\nexport type StepIndicatorData = string | string[] | StepIndicatorDataItem[]\n\nexport type StepIndicatorMouseEvent = {\n  event: React.MouseEvent<HTMLButtonElement>\n  item: StepIndicatorItemProps\n  currentStep: number\n  current_step: number\n}\n\nexport type StepIndicatorRenderCallback = {\n  /** A component that will render the item with the correct props. */\n  StepItem: typeof StepItemWrapper\n  /** Element that was originally going to be rendered */\n  element: React.ReactNode\n  /** @deprecated never has values */\n  attributes: React.HTMLProps<HTMLElement>\n  props: StepIndicatorItemProps\n  context: StepIndicatorContextValues\n}\n\nexport type StepIndicatorProps = Omit<\n  React.HTMLProps<HTMLAnchorElement>,\n  'ref' | 'data'\n> &\n  SpacingProps & {\n    /**\n     * <em>(required with `<StepIndicator.Sidebar />`)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.\n     * @deprecated StepIndicator.Sidebar variant is no longer supported\n     */\n    sidebar_id?: string\n    /**\n     * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.\n     */\n    mode: StepIndicatorMode\n    /**\n     * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.\n     */\n    data: StepIndicatorData\n    /**\n     *  The title shown inside the `<StepIndicatorModal />` supplemental screen reader text for the `<StepIndicatorTriggerButton />`\n     *  Defaults to `Steps Overview`\n     */\n    overview_title?: string\n    /**\n     *  The label for `<StepIndicatorTriggerButton />` and supplemental screen reader text for `<StepIndicatorItem />`\n     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps\n     * `%step` is used to place the current step into the text\n     * `%count` is used to place the step total into the text\n     *  Defaults to `Step %step of %count`\n     */\n    step_title?: string\n    /**\n     *  A descriptive label used in `<StepIndicatorModal />`\n     *  This value need to contain `%step` and `%count` if you want to display the current step and total amount of steps\n     * `%step` is used to place the current step into the text\n     * `%count` is used to place the step total into the text\n     *  Defaults to `You are on step %step of %count`\n     * @deprecated only `step_title`is used\n     */\n    step_title_extended?: string\n    /**\n     * Defines the active number marked step starting by 0. Defaults to `0`.\n     */\n    current_step?: number\n    /**\n     * Define whether to show automatically counted numbers or not. Defaults to `false`.\n     */\n    hide_numbers?: boolean\n    /**\n     * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step, currentStep }`.\n     */\n    on_click?: ({\n      event,\n      item,\n      current_step,\n      currentStep,\n    }: StepIndicatorMouseEvent) => void\n    /**\n     * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.\n     * @deprecated no longer does anything other than the step item `title` prop\n     */\n    on_item_render?: ({\n      StepItem,\n      element,\n      attributes,\n      props,\n      context,\n    }: StepIndicatorRenderCallback) => React.ReactNode\n    /**\n     * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step, currentStep }`.\n     */\n    on_change?: ({\n      event,\n      item,\n      current_step,\n      currentStep,\n    }: StepIndicatorMouseEvent) => void\n    /**\n     * Status text. Status is only shown if this prop has text. Defaults to `undefined`\n     */\n    status?: FormStatusText\n    /**\n     * The type of status for the `status` prop. Is either `info`, `error` or `warn`.\n     * Defaults to `warn`.\n     */\n    status_state?: FormStatusState\n    /**\n     * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to `false`.\n     */\n    no_animation?: boolean\n    /**\n     * Set to `true` to have the list be expanded initially. Defaults to `false`.\n     */\n    expandedInitially?: boolean\n    /**\n     * Whether or not to break out (using negative margins) on larger screens. Defaults to `false`.\n     */\n    outset?: boolean\n    skeleton?: SkeletonShow\n    className?: string\n    children?: React.ReactNode\n  }\n\nfunction handleDeprecatedProps(\n  props: StepIndicatorProps\n): Omit<StepIndicatorProps, 'sidebar_id' | 'step_title_extended'> {\n  const { sidebar_id, step_title_extended, ...rest } = props\n  return rest\n}\n\nfunction StepIndicator({\n  status,\n  status_state = 'warn',\n  data = stepIndicatorDefaultProps.data,\n  skeleton = stepIndicatorDefaultProps.skeleton,\n  current_step = stepIndicatorDefaultProps.current_step,\n  hide_numbers = stepIndicatorDefaultProps.hide_numbers,\n  no_animation = stepIndicatorDefaultProps.no_animation,\n  expandedInitially = stepIndicatorDefaultProps.expandedInitially,\n  ...restOfProps\n}: StepIndicatorProps) {\n  const { outset, ...props } = handleDeprecatedProps({\n    data,\n    skeleton,\n    current_step,\n    hide_numbers,\n    no_animation,\n    expandedInitially,\n    ...restOfProps,\n  })\n\n  return (\n    <StepIndicatorProvider {...props}>\n      <div className=\"dnb-step-indicator-wrapper\">\n        <Card\n          align=\"stretch\"\n          className={classnames(\n            'dnb-step-indicator',\n            createSpacingClasses(restOfProps)\n          )}\n          outset={outset}\n        >\n          <StepIndicatorTriggerButton />\n          <StepIndicatorList />\n        </Card>\n        <StepIndicatorStatus status={status} status_state={status_state} />\n      </div>\n    </StepIndicatorProvider>\n  )\n}\n\nfunction StepIndicatorStatus({ status, status_state }) {\n  const { openState, no_animation } = useContext(StepIndicatorContext)\n  const show = !openState && !!status\n  return (\n    <FormStatus\n      show={show}\n      no_animation={no_animation}\n      state={status && status_state}\n    >\n      {status}\n    </FormStatus>\n  )\n}\n/**\n * @deprecated StepIndicator.Sidebar variant is no longer supported\n */\nStepIndicator.Sidebar = StepIndicatorSidebar\n\nStepIndicator._supportsSpacingProps = true\n\nexport default StepIndicator\n"],"mappings":"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","ignoreList":[]}

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

@@ -6,15 +6,10 @@ import React from 'react';
 import { ContextProps } from '../../shared/Context';
 import { StepIndicatorData, StepIndicatorMode, StepIndicatorProps } from './StepIndicator';
 import { StepIndicatorItemProps } from './StepIndicatorItem';
-import { StepIndicatorTriggerButtonProps } from './StepIndicatorTriggerButton';
 export type StepIndicatorContextValues = StepIndicatorProviderProps & StepIndicatorProviderStates & ContextProps;
 declare const StepIndicatorContext: React.Context<StepIndicatorContextValues>;
 export default StepIndicatorContext;
-export type StepIndicatorProviderProps = Omit<StepIndicatorProps, 'mode' | 'data'> & {
-    /**
-     * <em>(required)</em> a unique string-based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
-     */
-    sidebar_id: string;
+export type StepIndicatorProviderProps = Omit<StepIndicatorProps, 'mode' | 'data' | 'sidebar_id' | 'step_title_extended'> & {
     /**
      * <em>(required)</em> defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
      */
@@ -24,24 +19,17 @@ export type StepIndicatorProviderProps = Omit<StepIndicatorProps, 'mode' | 'data
      */
     mode?: StepIndicatorMode;
     children: React.ReactNode;
-    isSidebar?: boolean;
-    triggerButtonProps?: StepIndicatorTriggerButtonProps;
 };
 export type StepIndicatorProviderStates = {
     data: (string | StepIndicatorItemProps)[];
-    hasSidebar: boolean;
-    hideSidebar: boolean;
     activeStep: number;
     openState: boolean;
     listOfReachedSteps: number[];
     countSteps: number;
     stepsLabel: string;
-    stepsLabelExtended: string;
     filterAttributes: string[];
     setActiveStep: React.Dispatch<React.SetStateAction<number>>;
-    sidebarIsVisible: boolean;
-    onChangeState: () => void;
     openHandler: () => void;
     closeHandler: () => void;
 };
-export declare function StepIndicatorProvider({ isSidebar, ...restOfProps }: StepIndicatorProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepIndicatorProvider(props: StepIndicatorProviderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,42 +1,22 @@
 "use client";
 
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["isSidebar"];
-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, useReducer, useRef, useState } from 'react';
 import Context from '../../shared/Context';
 import { stepIndicatorDefaultProps } from './StepIndicatorProps';
 import { extendPropsWithContext } from '../../shared/component-helper';
-import { onMediaQueryChange } from '../../shared/MediaQueryUtils';
 const filterAttributes = Object.keys(stepIndicatorDefaultProps).filter(item => {
   return !['class', 'className'].includes(item);
-}).concat(['internalId', 'isSidebar', 'hasSidebar', 'hideSidebar', 'sidebarIsVisible', 'mainTitle', 'stepsLabel', 'stepsLabelExtended', 'listOfReachedSteps', 'setActiveStep', 'activeStep', 'countSteps', 'openState', 'onChangeState', 'openHandler', 'closeHandler', 'innerRef', 'hasSkeletonData', 'filterAttributes', 'onChangeState']);
+}).concat(['internalId', 'mainTitle', 'stepsLabel', 'listOfReachedSteps', 'setActiveStep', 'activeStep', 'countSteps', 'openState', 'openHandler', 'closeHandler', 'innerRef', 'hasSkeletonData', 'filterAttributes']);
 const StepIndicatorContext = React.createContext(null);
 export default StepIndicatorContext;
-export function StepIndicatorProvider(_ref) {
-  let {
-      isSidebar = false
-    } = _ref,
-    restOfProps = _objectWithoutProperties(_ref, _excluded);
-  const props = useMemo(() => {
-    return _objectSpread({
-      isSidebar
-    }, restOfProps);
-  }, [isSidebar, restOfProps]);
+export function StepIndicatorProvider(props) {
   const data = useMemo(() => {
     if (typeof props.data === 'string') {
       return props.data[0] === '[' ? JSON.parse(props.data) : [];
     }
     return props.data || [];
   }, [props]);
-  const [hasSidebar, setHasSidebar] = useState(true);
-  const [hideSidebar, setHideSidebar] = useState(false);
-  const [openState, setOpenState] = useState(false);
-  const onChangeState = useCallback(() => {
-    setOpenState(false);
-  }, []);
+  const [openState, setOpenState] = useState(props.expandedInitially);
   const openHandler = useCallback(() => {
     setOpenState(true);
   }, []);
@@ -59,7 +39,6 @@ export function StepIndicatorProvider(_ref) {
     forceUpdate();
   }, []);
   const listOfReachedSteps = useRef([activeStepRef.current].filter(Boolean)).current;
-  const mediaQueryListener = useRef(null);
   const context = useContext(Context);
   const updateStepTitle = useCallback(title => {
     return title === null || title === void 0 ? void 0 : title.replace('%step', String((activeStepRef.current || 0) + 1)).replace('%count', String((data === null || data === void 0 ? void 0 : data.length) || 1));
@@ -74,43 +53,20 @@ export function StepIndicatorProvider(_ref) {
       defaultProps: stepIndicatorDefaultProps,
       props
     }, {
-      hasSidebar,
-      hideSidebar,
       activeStep: activeStepRef.current,
       openState,
       listOfReachedSteps,
       data,
       countSteps,
-      stepsLabel: updateStepTitle(globalContext.step_title),
-      stepsLabelExtended: updateStepTitle(globalContext.step_title_extended)
+      stepsLabel: updateStepTitle(globalContext.step_title)
     }, {
       setActiveStep,
-      onChangeState,
       openHandler,
       closeHandler
     });
-    value.sidebarIsVisible = value.hasSidebar && !value.hideSidebar;
     return value;
-  }, [closeHandler, context, countSteps, data, hasSidebar, hideSidebar, listOfReachedSteps, onChangeState, openHandler, openState, props, setActiveStep, updateStepTitle]);
+  }, [closeHandler, context, countSteps, data, listOfReachedSteps, openHandler, openState, props, setActiveStep, updateStepTitle]);
   const contextValue = makeContextValue();
-  useEffect(() => {
-    var _document;
-    const container = (_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('sidebar__' + props.sidebar_id);
-    setHasSidebar(Boolean(container));
-    mediaQueryListener.current = onMediaQueryChange({
-      min: '0',
-      max: 'medium'
-    }, hideSidebar => {
-      setHideSidebar(hideSidebar);
-    }, {
-      runOnInit: true
-    });
-    return () => {
-      if (mediaQueryListener.current) {
-        mediaQueryListener.current();
-      }
-    };
-  }, [props.sidebar_id]);
   useEffect(() => {
     const currentStepFromProps = getActiveStepFromProps();
     if (currentStepFromProps !== activeStepRef.current) {