@dnb/eufemia 10.35.0 → 10.37.0

package/components/table/table-accordion/TableAccordionContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const TableAccordionContext = React.createContext(null);
+//# sourceMappingURL=TableAccordionContext.js.map

package/components/table/table-accordion/TableAccordionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableAccordionContext.js","names":["React","TableAccordionContext","createContext"],"sources":["../../../../../src/components/table/table-accordion/TableAccordionContext.tsx"],"sourcesContent":["/**\n * Web TableContext Context\n *\n */\n\nimport React from 'react'\nimport type { TableTrProps } from '../TableTr'\n\ntype TableAccordionContextProps = {\n  toggleOpenTr: (\n    event: React.SyntheticEvent,\n    allowInteractiveElement?: boolean\n  ) => void\n  trIsOpen: boolean\n  countTds: number\n  noAnimation: TableTrProps['noAnimation']\n  onOpened: TableTrProps['onOpened']\n  onClosed: TableTrProps['onClosed']\n}\n\nexport const TableAccordionContext =\n  React.createContext<TableAccordionContextProps>(null)\n"],"mappings":"AAKA,OAAOA,KAAK,MAAM,OAAO;AAezB,OAAO,MAAMC,qBAAqB,GAChCD,KAAK,CAACE,aAAa,CAA6B,IAAI,CAAC"}

package/components/table/table-accordion/TableAccordionHead.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { TableTrProps } from '../TableTr';
+export type TableAccordionHeadProps = {
+    /** The row number */
+    count: number;
+} & TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>;
+export declare function TableAccordionHead(allProps: TableAccordionHeadProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableAccordionToggleButton(): import("react/jsx-runtime").JSX.Element;

package/components/table/{TableAccordion.js → table-accordion/TableAccordionHead.js}

@@ -6,16 +6,16 @@ var _Td;
 const _excluded = ["children", "className", "expanded", "disabled", "noAnimation", "onClick", "onOpened", "onClosed", "count"];
 import React, { useEffect } from 'react';
 import classnames from 'classnames';
-import Button from '../button/Button';
-import IconPrimary from '../icon/IconPrimary';
-import Th from './TableTh';
-import Td from './TableTd';
-import { TableAccordionContext, TableContext } from './TableContext';
 import keycode from 'keycode';
-import { hasSelectedText } from '../../shared/helpers';
-import TableAccordionTd from './TableAccordionTd';
-import TableAccordionTr from './TableAccordionTr';
-export function TableAccordion(allProps) {
+import { hasSelectedText } from '../../../shared/helpers';
+import Button from '../../button/Button';
+import IconPrimary from '../../icon/IconPrimary';
+import Th from '../TableTh';
+import Td from '../TableTd';
+import { TableContext } from '../TableContext';
+import { TableAccordionContext } from './TableAccordionContext';
+import { TableAccordionContentSingle, TableAccordionContentRow } from './TableAccordionContent';
+export function TableAccordionHead(allProps) {
   const {
       children,
       className,
@@ -93,7 +93,6 @@ export function TableAccordion(allProps) {
       trIsOpen,
       noAnimation,
       countTds,
-      hasAccordionContent,
       onOpened,
       onClosed
     }
@@ -135,8 +134,8 @@ export function TableAccordion(allProps) {
 export function TableAccordionToggleButton() {
   var _React$useContext;
   const tableAccordionContext = React.useContext(TableAccordionContext);
-  const allProps = (_React$useContext = React.useContext(TableContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.allProps;
-  const iconSize = allProps.size === 'medium' || allProps.size === 'small' ? 'basis' : 'medium';
+  const tableContextAllProps = (_React$useContext = React.useContext(TableContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.allProps;
+  const iconSize = (tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.size) === 'medium' || (tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.size) === 'small' ? 'basis' : 'medium';
   return React.createElement("span", {
     className: "dnb-table__toggle-button"
   }, React.createElement(IconPrimary, {
@@ -145,11 +144,11 @@ export function TableAccordionToggleButton() {
   }), React.createElement(Button, {
     className: "dnb-sr-only",
     tabIndex: -1,
-    "aria-label": allProps === null || allProps === void 0 ? void 0 : allProps.accordionToggleButtonSR,
+    "aria-label": tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.accordionToggleButtonSR,
     "aria-expanded": Boolean(tableAccordionContext === null || tableAccordionContext === void 0 ? void 0 : tableAccordionContext.trIsOpen),
     on_click: event => tableAccordionContext === null || tableAccordionContext === void 0 ? void 0 : tableAccordionContext.toggleOpenTr(event, true)
   }));
 }
-const isAccordionElement = element => element.type === TableAccordionTd || element.type === TableAccordionTr;
+const isAccordionElement = element => element.type === TableAccordionContentSingle || element.type === TableAccordionContentRow;
 const isTableHead = children => children.some(element => element.type === Th);
-//# sourceMappingURL=TableAccordion.js.map
+//# sourceMappingURL=TableAccordionHead.js.map

package/components/table/table-accordion/TableAccordionHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableAccordionHead.js","names":["React","useEffect","classnames","keycode","hasSelectedText","Button","IconPrimary","Th","Td","TableContext","TableAccordionContext","TableAccordionContentSingle","TableAccordionContentRow","TableAccordionHead","allProps","children","className","expanded","disabled","noAnimation","onClick","onOpened","onClosed","count","props","_objectWithoutProperties","_excluded","tableContext","useContext","trIsOpen","setOpen","useState","location","id","hash","trIsHover","setHover","trHadClick","setHadClick","headerContent","Children","toArray","addExpandIcon","icon","accordionChevronPlacement","push","unshift","accordionContent","filter","element","isAccordionElement","hasAccordionContent","length","every","isValidElement","_tableContext$collaps","collapseTrCallbacks","current","trParams","toggleOpenTr","onMouseEnter","onMouseEnterHandler","onMouseLeave","onMouseLeaveHandler","onKeyDown","onKeydownHandler","_Td","createElement","key","TableAccordionToggleButton","isTableHead","_tableContext$allProp","accordionToggleButtonSR","countTds","type","Provider","value","_extends","tabIndex","undefined","event","nativeEvent","target","document","activeElement","tagName","preventDefault","allowInteractiveElement","arguments","_React$useContext","tableAccordionContext","tableContextAllProps","iconSize","size","Boolean","on_click","some"],"sources":["../../../../../src/components/table/table-accordion/TableAccordionHead.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\nimport { hasSelectedText } from '../../../shared/helpers'\nimport Button from '../../button/Button'\nimport IconPrimary from '../../icon/IconPrimary'\nimport Th from '../TableTh'\nimport Td from '../TableTd'\nimport { TableContext } from '../TableContext'\nimport { TableAccordionContext } from './TableAccordionContext'\nimport {\n  TableAccordionContentSingle,\n  TableAccordionContentRow,\n} from './TableAccordionContent'\n\nimport type {\n  TableAccordionContentSingleProps,\n  TableAccordionContentRowProps,\n} from './TableAccordionContent'\nimport type { TableTrProps } from '../TableTr'\n\nexport type TableAccordionHeadProps = {\n  /** The row number */\n  count: number\n} & TableTrProps &\n  React.TableHTMLAttributes<HTMLTableRowElement>\n\nexport function TableAccordionHead(allProps: TableAccordionHeadProps) {\n  const {\n    children,\n    className,\n    expanded,\n    disabled,\n    noAnimation,\n    onClick,\n    onOpened,\n    onClosed,\n    count,\n    ...props\n  } = allProps\n  const tableContext = React.useContext(TableContext)\n\n  const [trIsOpen, setOpen] = React.useState(() => {\n    if (typeof expanded === 'boolean') {\n      return expanded\n    } else if (typeof location !== 'undefined') {\n      const id = props?.id\n      if (id && '#' + id === location.hash) {\n        return true\n      }\n    }\n\n    return false\n  })\n  const [trIsHover, setHover] = React.useState(false)\n  const [trHadClick, setHadClick] = React.useState(false)\n\n  let headerContent = React.Children.toArray(children)\n\n  const addExpandIcon = (icon) => {\n    if (tableContext.allProps.accordionChevronPlacement === 'end') {\n      headerContent.push(icon)\n    } else {\n      headerContent.unshift(icon)\n    }\n  }\n  /**\n   * Handle Accordion Content\n   */\n  const accordionContent = headerContent.filter(\n    (element: React.ReactElement) => {\n      return isAccordionElement(element)\n    }\n  ) as React.ReactElement<\n    TableAccordionContentSingleProps | TableAccordionContentRowProps\n  >[]\n\n  const hasAccordionContent =\n    accordionContent.length !== 0 &&\n    accordionContent.every((element) => React.isValidElement(element))\n\n  useEffect(() => {\n    if (\n      hasAccordionContent &&\n      tableContext?.collapseTrCallbacks?.current &&\n      count\n    ) {\n      tableContext.collapseTrCallbacks.current[count] = () => {\n        setOpen(false)\n      }\n    }\n  }, [count, tableContext?.collapseTrCallbacks, hasAccordionContent])\n\n  const trParams =\n    !disabled && hasAccordionContent\n      ? {\n          onClick: toggleOpenTr,\n          onMouseEnter: onMouseEnterHandler,\n          onMouseLeave: onMouseLeaveHandler,\n          onKeyDown: onKeydownHandler,\n        }\n      : {}\n\n  if (hasAccordionContent) {\n    // Remove the AccordionContent, and use it outside of the tr\n    headerContent = headerContent.filter((element: React.ReactElement) => {\n      return !isAccordionElement(element)\n    })\n\n    addExpandIcon(\n      <Td className=\"dnb-table__td__accordion-icon\" key=\"td-icon\">\n        <TableAccordionToggleButton />\n      </Td>\n    )\n  } else if (isTableHead(headerContent)) {\n    addExpandIcon(\n      <Th\n        aria-hidden\n        className=\"dnb-table__th__accordion-icon\"\n        key=\"th-icon\"\n      >\n        <div>{tableContext?.allProps?.accordionToggleButtonSR}</div>\n      </Th>\n    )\n  }\n\n  const countTds = hasAccordionContent\n    ? headerContent.filter((element: React.ReactElement) => {\n        return element.type === Td // TODO: We may need to include this in future --> || component.type === Td.MainCell\n      }).length\n    : null\n\n  return (\n    <TableAccordionContext.Provider\n      value={{\n        toggleOpenTr,\n        trIsOpen,\n        noAnimation,\n        countTds,\n        onOpened,\n        onClosed,\n      }}\n    >\n      <tr\n        tabIndex={accordionContent && !disabled ? 0 : undefined}\n        className={classnames(\n          className,\n          hasAccordionContent && 'dnb-table__tr--has-accordion-content',\n          trIsOpen && 'dnb-table__tr--expanded',\n          disabled && 'dnb-table__tr--disabled',\n          noAnimation && 'dnb-table__tr--no-animation',\n          trIsHover && trHadClick && 'dnb-table__tr--hover'\n        )}\n        {...trParams}\n        {...props}\n      >\n        {headerContent}\n      </tr>\n      {accordionContent}\n    </TableAccordionContext.Provider>\n  )\n\n  function onKeydownHandler(event: React.SyntheticEvent) {\n    switch (keycode(event.nativeEvent)) {\n      case 'space':\n      case 'enter':\n        {\n          const target = event.target as HTMLElement\n          if (\n            document.activeElement !== target ||\n            target.tagName === 'TR'\n          ) {\n            setOpen(!trIsOpen)\n            event.preventDefault()\n          }\n        }\n        break\n    }\n  }\n  function onMouseEnterHandler() {\n    setHover(true)\n  }\n  function onMouseLeaveHandler() {\n    setHover(false)\n    setHadClick(false)\n  }\n  function toggleOpenTr(\n    event: React.SyntheticEvent,\n    allowInteractiveElement = false\n  ) {\n    const target = event.target as HTMLElement\n    if (\n      /**\n       * Do not toggle if user clicked an interactive element (input, button, etc.).\n       * Interactive to set activeElement on mouseDown, we we can check against it.\n       */\n      ((document.activeElement !== target &&\n        /**\n         * Safari on macOS needs this extra check:\n         *\n         * > For example, on macOS systems, elements that aren't text input elements are not typically focusable by default.\n         * https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement\n         */\n        target.tagName !== 'INPUT' &&\n        target.tagName !== 'LABEL') ||\n        allowInteractiveElement) &&\n      /**\n       * Let the user select text,\n       * without triggering the accordion.\n       */\n      !hasSelectedText()\n    ) {\n      setOpen(!trIsOpen)\n      setHadClick(true)\n\n      onClick?.(event)\n    }\n  }\n}\n\nexport function TableAccordionToggleButton() {\n  const tableAccordionContext = React.useContext(TableAccordionContext)\n  const tableContextAllProps = React.useContext(TableContext)?.allProps\n  const iconSize =\n    tableContextAllProps?.size === 'medium' ||\n    tableContextAllProps?.size === 'small'\n      ? 'basis'\n      : 'medium'\n\n  return (\n    <span className=\"dnb-table__toggle-button\">\n      <IconPrimary icon=\"chevron_down\" size={iconSize} />\n      <Button\n        className=\"dnb-sr-only\"\n        tabIndex={-1}\n        aria-label={tableContextAllProps?.accordionToggleButtonSR}\n        aria-expanded={Boolean(tableAccordionContext?.trIsOpen)}\n        on_click={(event) =>\n          tableAccordionContext?.toggleOpenTr(event, true)\n        }\n      />\n    </span>\n  )\n}\n\nconst isAccordionElement = (element: React.ReactElement) =>\n  element.type === TableAccordionContentSingle ||\n  element.type === TableAccordionContentRow\n\nconst isTableHead = (children: React.ReactNode[]) =>\n  children.some((element: React.ReactElement) => element.type === Th)\n"],"mappings":"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"}

package/{cjs/components/table → components/table/table-accordion}/useTableAnimationHandler.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableAccordionTrProps } from './TableAccordionTr';
+import type { TableAccordionContentRowProps } from './TableAccordionContent';
 export type useTableAnimationHandlerProps = {
     /**
      * Ref to <div> inside the <tr> element being expanded/collapsed
@@ -10,11 +10,15 @@ export type useTableAnimationHandlerProps = {
      */
     trRef: React.MutableRefObject<HTMLTableRowElement>;
 };
-export declare function useTableAnimationHandler({ innerRef, trRef, expanded, noAnimation, }: useTableAnimationHandlerProps & TableAccordionTrProps): {
+export declare function useTableAnimationHandler({ innerRef, trRef, expanded, noAnimation, }: useTableAnimationHandlerProps & TableAccordionContentRowProps): {
     ariaLive: any;
     isInDOM: boolean;
     isAnimating: boolean;
     isVisibleParallax: boolean;
-    firstPaintStyle: React.CSSProperties;
+    firstPaintStyle: {
+        readonly visibility: "hidden";
+        readonly opacity: "0";
+        readonly height: "auto";
+    } | Record<string, never>;
 };
 export default useTableAnimationHandler;

package/components/table/{useTableAnimationHandler.js → table-accordion/useTableAnimationHandler.js}

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
-import { getClosestScrollViewElement } from '../../shared/component-helper';
-import { useHeightAnimation } from '../height-animation/useHeightAnimation';
-import { TableAccordionContext } from './TableContext';
+import { getClosestScrollViewElement } from '../../../shared/component-helper';
+import { useHeightAnimation } from '../../height-animation/useHeightAnimation';
+import { TableAccordionContext } from './TableAccordionContext';
 export function useTableAnimationHandler(_ref) {
   let {
     innerRef,

package/components/table/table-accordion/useTableAnimationHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableAnimationHandler.js","names":["React","useCallback","getClosestScrollViewElement","useHeightAnimation","TableAccordionContext","useTableAnimationHandler","_ref","innerRef","trRef","expanded","noAnimation","tableAccordionContext","useContext","ariaLive","setAriaLive","useState","open","Boolean","trIsOpen","scrollViewHandler","clip","scrollView","current","HTMLElement","style","overflowY","onOpen","state","onAnimationStart","onAnimationEnd","_tableAccordionContex","_tableAccordionContex2","event","target","onOpened","call","onClosed","isInDOM","isAnimating","isVisibleParallax","firstPaintStyle","animate"],"sources":["../../../../../src/components/table/table-accordion/useTableAnimationHandler.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { getClosestScrollViewElement } from '../../../shared/component-helper'\nimport { useHeightAnimation } from '../../height-animation/useHeightAnimation'\nimport { TableAccordionContext } from './TableAccordionContext'\nimport type { TableAccordionContentRowProps } from './TableAccordionContent'\n\nexport type useTableAnimationHandlerProps = {\n  /**\n   * Ref to <div> inside the <tr> element being expanded/collapsed\n   */\n  innerRef: React.MutableRefObject<HTMLDivElement>\n  /**\n   * Ref to the <tr> element being clicked\n   */\n  trRef: React.MutableRefObject<HTMLTableRowElement>\n}\n\nexport function useTableAnimationHandler({\n  innerRef,\n  trRef,\n  expanded,\n  noAnimation,\n}: useTableAnimationHandlerProps & TableAccordionContentRowProps) {\n  const tableAccordionContext = React.useContext(TableAccordionContext)\n  const [ariaLive, setAriaLive] = React.useState(null)\n  const open = Boolean(expanded || tableAccordionContext?.trIsOpen)\n\n  const scrollViewHandler = useCallback(\n    (clip: boolean) => {\n      const scrollView = getClosestScrollViewElement(\n        trRef.current\n      ) as HTMLElement\n      if (scrollView instanceof HTMLElement) {\n        scrollView.style.overflowY = clip ? 'clip' : ''\n      }\n    },\n    [trRef]\n  )\n\n  const onOpen = useCallback((state) => {\n    setAriaLive(state ? true : null)\n  }, [])\n\n  const onAnimationStart = useCallback(() => {\n    scrollViewHandler(true)\n  }, [scrollViewHandler])\n\n  const onAnimationEnd = useCallback(\n    (state) => {\n      const event = { target: trRef.current }\n      switch (state) {\n        case 'opened':\n          tableAccordionContext.onOpened?.(event)\n          break\n\n        case 'closed':\n          tableAccordionContext.onClosed?.(event)\n          break\n      }\n\n      scrollViewHandler(false)\n    },\n    [scrollViewHandler, tableAccordionContext, trRef]\n  )\n\n  const { isInDOM, isAnimating, isVisibleParallax, firstPaintStyle } =\n    useHeightAnimation(innerRef, {\n      open,\n      animate: Boolean(\n        !noAnimation && !tableAccordionContext?.noAnimation\n      ),\n      onOpen,\n      onAnimationStart,\n      onAnimationEnd,\n    })\n\n  return {\n    ariaLive,\n    isInDOM,\n    isAnimating,\n    isVisibleParallax,\n    firstPaintStyle,\n  }\n}\n\nexport default useTableAnimationHandler\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,qBAAqB,QAAQ,yBAAyB;AAc/D,OAAO,SAASC,wBAAwBA,CAAAC,IAAA,EAK0B;EAAA,IALzB;IACvCC,QAAQ;IACRC,KAAK;IACLC,QAAQ;IACRC;EAC6D,CAAC,GAAAJ,IAAA;EAC9D,MAAMK,qBAAqB,GAAGX,KAAK,CAACY,UAAU,CAACR,qBAAqB,CAAC;EACrE,MAAM,CAACS,QAAQ,EAAEC,WAAW,CAAC,GAAGd,KAAK,CAACe,QAAQ,CAAC,IAAI,CAAC;EACpD,MAAMC,IAAI,GAAGC,OAAO,CAACR,QAAQ,KAAIE,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAEO,QAAQ,EAAC;EAEjE,MAAMC,iBAAiB,GAAGlB,WAAW,CAClCmB,IAAa,IAAK;IACjB,MAAMC,UAAU,GAAGnB,2BAA2B,CAC5CM,KAAK,CAACc,OACR,CAAgB;IAChB,IAAID,UAAU,YAAYE,WAAW,EAAE;MACrCF,UAAU,CAACG,KAAK,CAACC,SAAS,GAAGL,IAAI,GAAG,MAAM,GAAG,EAAE;IACjD;EACF,CAAC,EACD,CAACZ,KAAK,CACR,CAAC;EAED,MAAMkB,MAAM,GAAGzB,WAAW,CAAE0B,KAAK,IAAK;IACpCb,WAAW,CAACa,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,gBAAgB,GAAG3B,WAAW,CAAC,MAAM;IACzCkB,iBAAiB,CAAC,IAAI,CAAC;EACzB,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,MAAMU,cAAc,GAAG5B,WAAW,CAC/B0B,KAAK,IAAK;IAAA,IAAAG,qBAAA,EAAAC,sBAAA;IACT,MAAMC,KAAK,GAAG;MAAEC,MAAM,EAAEzB,KAAK,CAACc;IAAQ,CAAC;IACvC,QAAQK,KAAK;MACX,KAAK,QAAQ;QACX,CAAAG,qBAAA,GAAAnB,qBAAqB,CAACuB,QAAQ,cAAAJ,qBAAA,uBAA9BA,qBAAA,CAAAK,IAAA,CAAAxB,qBAAqB,EAAYqB,KAAK,CAAC;QACvC;MAEF,KAAK,QAAQ;QACX,CAAAD,sBAAA,GAAApB,qBAAqB,CAACyB,QAAQ,cAAAL,sBAAA,uBAA9BA,sBAAA,CAAAI,IAAA,CAAAxB,qBAAqB,EAAYqB,KAAK,CAAC;QACvC;IACJ;IAEAb,iBAAiB,CAAC,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,iBAAiB,EAAER,qBAAqB,EAAEH,KAAK,CAClD,CAAC;EAED,MAAM;IAAE6B,OAAO;IAAEC,WAAW;IAAEC,iBAAiB;IAAEC;EAAgB,CAAC,GAChErC,kBAAkB,CAACI,QAAQ,EAAE;IAC3BS,IAAI;IACJyB,OAAO,EAAExB,OAAO,CACd,CAACP,WAAW,IAAI,EAACC,qBAAqB,aAArBA,qBAAqB,eAArBA,qBAAqB,CAAED,WAAW,CACrD,CAAC;IACDgB,MAAM;IACNE,gBAAgB;IAChBC;EACF,CAAC,CAAC;EAEJ,OAAO;IACLhB,QAAQ;IACRwB,OAAO;IACPC,WAAW;IACXC,iBAAiB;IACjBC;EACF,CAAC;AACH;AAEA,eAAenC,wBAAwB"}

package/components/tabs/Tabs.d.ts

@@ -33,9 +33,6 @@ export type TabsChildren =
 export interface TabsProps
   extends Omit<React.HTMLProps<HTMLElement>, 'ref'>,
     SpacingProps {
-  /**
-   * defines the data structure to load as a JSON. e.g. `[{title: '...', content: 'Current tab', key: '...', hash: '...'}]`
-   */
   data?: TabsData;
   /**
    * the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.

package/components/tabs/TabsDocs.d.ts

@@ -1,3 +1,4 @@
 import { PropertiesTableProps } from '../../shared/types';
 export declare const TabsProperties: PropertiesTableProps;
+export declare const TabsDataObject: PropertiesTableProps;
 export declare const TabsEvents: PropertiesTableProps;

package/components/tabs/TabsDocs.js

@@ -34,9 +34,9 @@ export const TabsProperties = {
     type: 'React.ReactNode',
     status: 'optional'
   },
-  data: {
-    doc: "defines the data structure to load as a JSON. e.g. `[{title: '...', content: 'Current tab', key: '...', hash: '...'}]`",
-    type: ['string', '{title: string | React.ReactNode, key: string | number, selected?: boolean, disabled?: boolean}'],
+  '[data](/uilib/components/tabs/properties/#data-object)': {
+    doc: 'defines the data structure to load as an object.',
+    type: 'object',
     status: 'required'
   },
   children: {
@@ -90,6 +90,33 @@ export const TabsProperties = {
     status: 'optional'
   }
 };
+export const TabsDataObject = {
+  title: {
+    doc: 'The title of the tab.',
+    type: ['string', 'React.ReactNode'],
+    status: 'required'
+  },
+  key: {
+    doc: 'The unique key of the tab.',
+    type: ['string', 'number'],
+    status: 'required'
+  },
+  content: {
+    doc: 'The content of the tab.',
+    type: 'React.ReactNode',
+    status: 'optional'
+  },
+  selected: {
+    doc: 'If set to `true`, the tab will be selected.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  disabled: {
+    doc: 'If set to `true`, the tab will be disabled.',
+    type: 'boolean',
+    status: 'optional'
+  }
+};
 export const TabsEvents = {
   on_change: {
     doc: '(preferred) this event gets triggered once the tab changes its selected key. Returns `{ key, selected_key, focus_key, event }`.',

package/components/tabs/TabsDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsDocs.js","names":["TabsProperties","selected_key","doc","type","status","align","content_style","content_spacing","tabs_style","tabs_spacing","tab_element","data","children","content","prerender","prevent_rerender","scroll","no_border","nav_button_edge","skeleton","breakout","TabsEvents","on_change","on_click","on_focus","on_mouse_enter"],"sources":["../../../../src/components/tabs/TabsDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const TabsProperties: PropertiesTableProps = {\n  selected_key: {\n    doc: 'In case one of the tabs should be opened by a `key`.',\n    type: ['string', 'number'],\n    status: 'optional',\n  },\n  align: {\n    doc: 'To align the tab list on the right side `align=\"right\"`. Defaults to `left`.',\n    type: ['left', 'center', 'right'],\n    status: 'optional',\n  },\n  content_style: {\n    doc: 'To enable the visual helper `.dnb-section` on to the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.',\n    type: ['divider', 'white', 'transparent'],\n    status: 'optional',\n  },\n  content_spacing: {\n    doc: 'To modify the `spacing` onto the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `large`.',\n    type: [\n      'boolean',\n      'x-small',\n      'small',\n      'medium',\n      'large',\n      'x-large',\n      'xx-large',\n    ],\n    status: 'optional',\n  },\n  tabs_style: {\n    doc: 'To enable the visual helper `.dnb-section` inside the tabs list. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.',\n    type: ['divider', 'white', 'transparent'],\n    status: 'optional',\n  },\n  tabs_spacing: {\n    doc: 'To modify the `spacing` inside the tab list. Defaults to `null`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  tab_element: {\n    doc: \"Define what HTML element should be used. You can provide e.g. `tab_element={GatsbyLink}` – you may then provide the `to` property inside every entry (`data={[{ to: ';url';, ... }]}`). Defaults to `<button>`.\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  data: {\n    doc: \"defines the data structure to load as a JSON. e.g. `[{title: '...', content: 'Current tab', key: '...', hash: '...'}]`\",\n    type: [\n      'string',\n      '{title: string | React.ReactNode, key: string | number, selected?: boolean, disabled?: boolean}',\n    ],\n    status: 'required',\n  },\n  children: {\n    doc: \"the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.\",\n    type: ['React.ReactNode', 'object'],\n    status: 'required',\n  },\n  content: {\n    doc: \"the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.\",\n    type: ['React.ReactNode', 'object'],\n    status: 'required',\n  },\n  prerender: {\n    doc: 'If set to `true`, the Tabs content will pre-render all contents. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  prevent_rerender: {\n    doc: 'If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  scroll: {\n    doc: 'If set to `true`, the content will scroll on tab change, until all tabs will be visible on the upper side of the browser window view. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  no_border: {\n    doc: 'If set to `true`, the default horizontal border line under the tablist will be removed. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  nav_button_edge: {\n    doc: 'If set to `true`, the navigation icons will have a straight border at their outside. This feature is meant to be used when the Tabs component goes all the way to the browser window. Defaults to `false`.',\n    type: 'boolean',\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  breakout: {\n    doc: 'If set to `false`, the default horizontal border line under the tablist remains inside the parent boundaries. Defaults to `true`.',\n    type: 'boolean',\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 TabsEvents: PropertiesTableProps = {\n  on_change: {\n    doc: '(preferred) this event gets triggered once the tab changes its selected key. Returns `{ key, selected_key, focus_key, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_click: {\n    doc: 'This event gets triggered once the tab gets clicked. Returns `{ key, selected_key, focus_key, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_focus: {\n    doc: 'This event gets triggered once the tab changes its focus key. Returns `{ key, selected_key, focus_key, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_mouse_enter: {\n    doc: \"This event gets triggered once the user';s mouse enters a tab (hover). Returns `{ key, selected_key, focus_key, event }`.\",\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"TabsDocs.js","names":["TabsProperties","selected_key","doc","type","status","align","content_style","content_spacing","tabs_style","tabs_spacing","tab_element","children","content","prerender","prevent_rerender","scroll","no_border","nav_button_edge","skeleton","breakout","TabsDataObject","title","key","selected","disabled","TabsEvents","on_change","on_click","on_focus","on_mouse_enter"],"sources":["../../../../src/components/tabs/TabsDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const TabsProperties: PropertiesTableProps = {\n  selected_key: {\n    doc: 'In case one of the tabs should be opened by a `key`.',\n    type: ['string', 'number'],\n    status: 'optional',\n  },\n  align: {\n    doc: 'To align the tab list on the right side `align=\"right\"`. Defaults to `left`.',\n    type: ['left', 'center', 'right'],\n    status: 'optional',\n  },\n  content_style: {\n    doc: 'To enable the visual helper `.dnb-section` on to the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.',\n    type: ['divider', 'white', 'transparent'],\n    status: 'optional',\n  },\n  content_spacing: {\n    doc: 'To modify the `spacing` onto the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `large`.',\n    type: [\n      'boolean',\n      'x-small',\n      'small',\n      'medium',\n      'large',\n      'x-large',\n      'xx-large',\n    ],\n    status: 'optional',\n  },\n  tabs_style: {\n    doc: 'To enable the visual helper `.dnb-section` inside the tabs list. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.',\n    type: ['divider', 'white', 'transparent'],\n    status: 'optional',\n  },\n  tabs_spacing: {\n    doc: 'To modify the `spacing` inside the tab list. Defaults to `null`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  tab_element: {\n    doc: \"Define what HTML element should be used. You can provide e.g. `tab_element={GatsbyLink}` – you may then provide the `to` property inside every entry (`data={[{ to: ';url';, ... }]}`). Defaults to `<button>`.\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  '[data](/uilib/components/tabs/properties/#data-object)': {\n    doc: 'defines the data structure to load as an object.',\n    type: 'object',\n    status: 'required',\n  },\n  children: {\n    doc: \"the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.\",\n    type: ['React.ReactNode', 'object'],\n    status: 'required',\n  },\n  content: {\n    doc: \"the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.\",\n    type: ['React.ReactNode', 'object'],\n    status: 'required',\n  },\n  prerender: {\n    doc: 'If set to `true`, the Tabs content will pre-render all contents. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  prevent_rerender: {\n    doc: 'If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `prerender`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  scroll: {\n    doc: 'If set to `true`, the content will scroll on tab change, until all tabs will be visible on the upper side of the browser window view. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  no_border: {\n    doc: 'If set to `true`, the default horizontal border line under the tablist will be removed. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  nav_button_edge: {\n    doc: 'If set to `true`, the navigation icons will have a straight border at their outside. This feature is meant to be used when the Tabs component goes all the way to the browser window. Defaults to `false`.',\n    type: 'boolean',\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  breakout: {\n    doc: 'If set to `false`, the default horizontal border line under the tablist remains inside the parent boundaries. Defaults to `true`.',\n    type: 'boolean',\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 TabsDataObject: PropertiesTableProps = {\n  title: {\n    doc: 'The title of the tab.',\n    type: ['string', 'React.ReactNode'],\n    status: 'required',\n  },\n  key: {\n    doc: 'The unique key of the tab.',\n    type: ['string', 'number'],\n    status: 'required',\n  },\n  content: {\n    doc: 'The content of the tab.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  selected: {\n    doc: 'If set to `true`, the tab will be selected.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disabled: {\n    doc: 'If set to `true`, the tab will be disabled.',\n    type: 'boolean',\n    status: 'optional',\n  },\n}\n\nexport const TabsEvents: PropertiesTableProps = {\n  on_change: {\n    doc: '(preferred) this event gets triggered once the tab changes its selected key. Returns `{ key, selected_key, focus_key, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_click: {\n    doc: 'This event gets triggered once the tab gets clicked. Returns `{ key, selected_key, focus_key, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_focus: {\n    doc: 'This event gets triggered once the tab changes its focus key. Returns `{ key, selected_key, focus_key, event }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  on_mouse_enter: {\n    doc: \"This event gets triggered once the user';s mouse enters a tab (hover). Returns `{ key, selected_key, focus_key, event }`.\",\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,cAAoC,GAAG;EAClDC,YAAY,EAAE;IACZC,GAAG,EAAE,sDAAsD;IAC3DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;IACjCC,MAAM,EAAE;EACV,CAAC;EACDE,aAAa,EAAE;IACbJ,GAAG,EAAE,wLAAwL;IAC7LC,IAAI,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,CAAC;IACzCC,MAAM,EAAE;EACV,CAAC;EACDG,eAAe,EAAE;IACfL,GAAG,EAAE,qKAAqK;IAC1KC,IAAI,EAAE,CACJ,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,CACX;IACDC,MAAM,EAAE;EACV,CAAC;EACDI,UAAU,EAAE;IACVN,GAAG,EAAE,mLAAmL;IACxLC,IAAI,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,CAAC;IACzCC,MAAM,EAAE;EACV,CAAC;EACDK,YAAY,EAAE;IACZP,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,WAAW,EAAE;IACXR,GAAG,EAAE,iNAAiN;IACtNC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACD,wDAAwD,EAAE;IACxDF,GAAG,EAAE,kDAAkD;IACvDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,QAAQ,EAAE;IACRT,GAAG,EAAE,2LAA2L;IAChMC,IAAI,EAAE,CAAC,iBAAiB,EAAE,QAAQ,CAAC;IACnCC,MAAM,EAAE;EACV,CAAC;EACDQ,OAAO,EAAE;IACPV,GAAG,EAAE,2LAA2L;IAChMC,IAAI,EAAE,CAAC,iBAAiB,EAAE,QAAQ,CAAC;IACnCC,MAAM,EAAE;EACV,CAAC;EACDS,SAAS,EAAE;IACTX,GAAG,EAAE,+KAA+K;IACpLC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,gBAAgB,EAAE;IAChBZ,GAAG,EAAE,2QAA2Q;IAChRC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,MAAM,EAAE;IACNb,GAAG,EAAE,4JAA4J;IACjKC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDY,SAAS,EAAE;IACTd,GAAG,EAAE,8GAA8G;IACnHC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDa,eAAe,EAAE;IACff,GAAG,EAAE,4MAA4M;IACjNC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDc,QAAQ,EAAE;IACRhB,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDe,QAAQ,EAAE;IACRjB,GAAG,EAAE,mIAAmI;IACxIC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMgB,cAAoC,GAAG;EAClDC,KAAK,EAAE;IACLnB,GAAG,EAAE,uBAAuB;IAC5BC,IAAI,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC;IACnCC,MAAM,EAAE;EACV,CAAC;EACDkB,GAAG,EAAE;IACHpB,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDQ,OAAO,EAAE;IACPV,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACDmB,QAAQ,EAAE;IACRrB,GAAG,EAAE,6CAA6C;IAClDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDoB,QAAQ,EAAE;IACRtB,GAAG,EAAE,6CAA6C;IAClDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMqB,UAAgC,GAAG;EAC9CC,SAAS,EAAE;IACTxB,GAAG,EAAE,iIAAiI;IACtIC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDuB,QAAQ,EAAE;IACRzB,GAAG,EAAE,yGAAyG;IAC9GC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDwB,QAAQ,EAAE;IACR1B,GAAG,EAAE,kHAAkH;IACvHC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDyB,cAAc,EAAE;IACd3B,GAAG,EAAE,2HAA2H;IAChIC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/components/toggle-button/ToggleButtonGroup.js

@@ -147,7 +147,7 @@ export default class ToggleButtonGroup extends React.PureComponent {
     }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(Fieldset, null, React.createElement(Flex.Container, {
       align: "baseline",
       direction: vertical || label_direction === 'vertical' ? 'vertical' : 'horizontal',
-      spacing: vertical ? 'x-small' : 'small'
+      gap: vertical ? 'x-small' : 'small'
     }, label && React.createElement(FormLabel, {
       element: "legend",
       id: id + '-label',
@@ -167,7 +167,7 @@ export default class ToggleButtonGroup extends React.PureComponent {
       no_animation: status_no_animation,
       skeleton: skeleton
     }, status_props)), React.createElement("span", {
-      className: "dnb-toggle-button-group__children"
+      className: `dnb-toggle-button-group__shell__children dnb-toggle-button-group__shell__children--${layout_direction}`
     }, children, suffix && React.createElement(Suffix, {
       className: "dnb-toggle-button-group__suffix",
       id: id + '-suffix',

package/components/toggle-button/ToggleButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup.js","names":["React","PropTypes","classnames","isTrue","makeUniqueId","extendPropsWithContextInClassComponent","validateDOMAttributes","getStatusState","combineDescribedBy","combineLabelledBy","dispatchCustomElementEvent","spacingPropTypes","createSpacingClasses","AlignmentHelper","FormLabel","FormStatus","Flex","Context","Suffix","ToggleButtonGroupContext","pickFormElementProps","ToggleButtonGroup","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","value","values","getValues","JSON","parse","constructor","_defineProperty","_ref","event","multiselect","includes","push","splice","indexOf","setState","_refInput","createRef","_id","id","_name","name","render","_this$context","_this$context2","defaultProps","context","getTranslation","ToggleButton","FormRow","formElement","status","status_state","status_props","status_no_animation","globalStatus","suffix","label_direction","label_sr_only","vertical","layout_direction","label","variant","left_component","disabled","skeleton","className","_value","_values","children","on_change","rest","_objectWithoutProperties","_excluded","showStatus","classes","params","_objectSpread","setContext","_tmp","onChange","onChangeHandler","Fieldset","createElement","Provider","_AlignmentHelper","Container","align","direction","spacing","element","srOnly","_extends","role","show","text_id","text","no_animation","title","undefined","attributes","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message","number","array","_supportsSpacingProps"],"sources":["../../../../src/components/toggle-button/ToggleButtonGroup.js"],"sourcesContent":["/**\n * Web ToggleButtonGroup Component\n *\n * This is a legacy component.\n * For referencing while developing new features, please use a Functional component.\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport {\n  isTrue,\n  makeUniqueId,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  combineLabelledBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport FormLabel from '../FormLabel'\nimport FormStatus from '../FormStatus'\nimport Flex from '../Flex'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport ToggleButtonGroupContext from './ToggleButtonGroupContext'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\n\nexport default class ToggleButtonGroup extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    label_direction: PropTypes.oneOf(['horizontal', 'vertical']),\n    label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    title: PropTypes.string,\n    multiselect: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    variant: PropTypes.oneOf(['default', 'checkbox', 'radio']),\n    left_component: PropTypes.node,\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    id: PropTypes.string,\n    name: PropTypes.string,\n    status: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    status_state: PropTypes.string,\n    status_props: PropTypes.object,\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    suffix: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    layout_direction: PropTypes.oneOf(['column', 'row']),\n    value: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.number,\n      PropTypes.object,\n      PropTypes.array,\n    ]),\n    values: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n    attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n\n    ...spacingPropTypes,\n\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n\n    on_change: PropTypes.func,\n  }\n\n  static defaultProps = {\n    label: null,\n    label_direction: null,\n    label_sr_only: null,\n    title: null,\n    multiselect: null,\n    variant: null,\n    left_component: null,\n    disabled: null,\n    skeleton: null,\n    id: null,\n    name: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    status_no_animation: null,\n    globalStatus: null,\n    suffix: null,\n    vertical: null,\n    layout_direction: 'row',\n    value: undefined,\n    values: undefined,\n    attributes: null,\n\n    className: null,\n    children: null,\n\n    on_change: null,\n  }\n\n  static getDerivedStateFromProps(props, state) {\n    if (state._listenForPropChanges) {\n      if (\n        typeof props.value !== 'undefined' &&\n        props.value !== state.value\n      ) {\n        state.value = props.value\n      }\n      if (\n        typeof props.values !== 'undefined' &&\n        props.values !== state.values\n      ) {\n        state.values = ToggleButtonGroup.getValues(props)\n      }\n    }\n    state._listenForPropChanges = true\n\n    return state\n  }\n\n  static getValues(props) {\n    if (typeof props.values === 'string' && props.values[0] === '[') {\n      return JSON.parse(props.values)\n    }\n    return props.values\n  }\n\n  constructor(props) {\n    super(props)\n    this._refInput = React.createRef()\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this._name = props.name || makeUniqueId() // cause we need an id anyway\n    this.state = {\n      // do not set the value here, else get true in this check } else if (context.values && Array.isArray(context.values)) {\n      _listenForPropChanges: true,\n    }\n  }\n\n  onChangeHandler = ({ value, event }) => {\n    const { multiselect } = this.props\n    const values = this.state.values || []\n\n    if (isTrue(multiselect)) {\n      if (!values.includes(value)) {\n        values.push(value)\n      } else {\n        values.splice(values.indexOf(value), 1)\n      }\n    }\n\n    this.setState({\n      value,\n      values,\n      _listenForPropChanges: false,\n    })\n\n    dispatchCustomElementEvent(this, 'on_change', {\n      value,\n      values,\n      event,\n    })\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      ToggleButtonGroup.defaultProps,\n      this.context.getTranslation(this.props).ToggleButton,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.ToggleButtonGroup\n    )\n\n    const {\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      suffix,\n      label_direction,\n      label_sr_only,\n      vertical,\n      layout_direction,\n      label,\n      variant,\n      left_component,\n      disabled,\n      skeleton,\n      className,\n\n      multiselect,\n      id: _id, // eslint-disable-line\n      name: _name, // eslint-disable-line\n      value: _value, // eslint-disable-line\n      values: _values, // eslint-disable-line\n      children, // eslint-disable-line\n      on_change, // eslint-disable-line\n\n      ...rest\n    } = props\n\n    const { value, values } = this.state\n\n    const id = this._id\n    const showStatus = getStatusState(status)\n\n    const classes = classnames(\n      'dnb-toggle-button-group',\n      status && `dnb-toggle-button-group__status--${status_state}`,\n      !label && 'dnb-toggle-button-group--no-label',\n      `dnb-toggle-button-group--${layout_direction}`,\n      'dnb-form-component',\n      createSpacingClasses(props),\n      className\n    )\n\n    const params = {\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      params['aria-describedby'] = combineDescribedBy(\n        params,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (label) {\n      params['aria-labelledby'] = combineLabelledBy(params, id + '-label')\n    }\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    const context = {\n      name: this._name,\n      value,\n      values,\n      multiselect: isTrue(multiselect),\n      variant,\n      left_component,\n      disabled,\n      skeleton,\n      setContext: (context) => {\n        // also look for a function, where we are able to fill old values\n        // this is used in the \"constructor\" inside the ToggleButton.js component\n        if (typeof context === 'function') {\n          context = context(this._tmp)\n        }\n        this._tmp = { ...this._tmp, ...context }\n        this.setState({\n          ...context,\n          _listenForPropChanges: false,\n        })\n      },\n      onChange: this.onChangeHandler,\n    }\n\n    const Fieldset = label ? 'fieldset' : 'div'\n\n    return (\n      <ToggleButtonGroupContext.Provider value={context}>\n        <div className={classes}>\n          <AlignmentHelper />\n          <Fieldset>\n            <Flex.Container\n              align=\"baseline\"\n              direction={\n                vertical || label_direction === 'vertical'\n                  ? 'vertical'\n                  : 'horizontal'\n              }\n              spacing={vertical ? 'x-small' : 'small'}\n            >\n              {label && (\n                <FormLabel\n                  element=\"legend\"\n                  id={id + '-label'}\n                  srOnly={label_sr_only}\n                >\n                  {label}\n                </FormLabel>\n              )}\n\n              <span\n                id={id}\n                className=\"dnb-toggle-button-group__shell\"\n                role=\"group\"\n                {...params}\n              >\n                <FormStatus\n                  show={showStatus}\n                  id={id + '-form-status'}\n                  globalStatus={globalStatus}\n                  label={label}\n                  text_id={id + '-status'} // used for \"aria-describedby\"\n                  text={status}\n                  state={status_state}\n                  no_animation={status_no_animation}\n                  skeleton={skeleton}\n                  {...status_props}\n                />\n\n                <span className=\"dnb-toggle-button-group__children\">\n                  {children}\n\n                  {suffix && (\n                    <Suffix\n                      className=\"dnb-toggle-button-group__suffix\"\n                      id={id + '-suffix'} // used for \"aria-describedby\"\n                      context={props}\n                    >\n                      {suffix}\n                    </Suffix>\n                  )}\n                </span>\n              </span>\n            </Flex.Container>\n          </Fieldset>\n        </div>\n      </ToggleButtonGroupContext.Provider>\n    )\n  }\n}\n\nToggleButtonGroup._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"ToggleButtonGroup.js","names":["React","PropTypes","classnames","isTrue","makeUniqueId","extendPropsWithContextInClassComponent","validateDOMAttributes","getStatusState","combineDescribedBy","combineLabelledBy","dispatchCustomElementEvent","spacingPropTypes","createSpacingClasses","AlignmentHelper","FormLabel","FormStatus","Flex","Context","Suffix","ToggleButtonGroupContext","pickFormElementProps","ToggleButtonGroup","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","value","values","getValues","JSON","parse","constructor","_defineProperty","_ref","event","multiselect","includes","push","splice","indexOf","setState","_refInput","createRef","_id","id","_name","name","render","_this$context","_this$context2","defaultProps","context","getTranslation","ToggleButton","FormRow","formElement","status","status_state","status_props","status_no_animation","globalStatus","suffix","label_direction","label_sr_only","vertical","layout_direction","label","variant","left_component","disabled","skeleton","className","_value","_values","children","on_change","rest","_objectWithoutProperties","_excluded","showStatus","classes","params","_objectSpread","setContext","_tmp","onChange","onChangeHandler","Fieldset","createElement","Provider","_AlignmentHelper","Container","align","direction","gap","element","srOnly","_extends","role","show","text_id","text","no_animation","title","undefined","attributes","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message","number","array","_supportsSpacingProps"],"sources":["../../../../src/components/toggle-button/ToggleButtonGroup.js"],"sourcesContent":["/**\n * Web ToggleButtonGroup Component\n *\n * This is a legacy component.\n * For referencing while developing new features, please use a Functional component.\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport {\n  isTrue,\n  makeUniqueId,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  combineLabelledBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport FormLabel from '../FormLabel'\nimport FormStatus from '../FormStatus'\nimport Flex from '../Flex'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport ToggleButtonGroupContext from './ToggleButtonGroupContext'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\n\nexport default class ToggleButtonGroup extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    label_direction: PropTypes.oneOf(['horizontal', 'vertical']),\n    label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    title: PropTypes.string,\n    multiselect: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    variant: PropTypes.oneOf(['default', 'checkbox', 'radio']),\n    left_component: PropTypes.node,\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    id: PropTypes.string,\n    name: PropTypes.string,\n    status: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    status_state: PropTypes.string,\n    status_props: PropTypes.object,\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    suffix: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    layout_direction: PropTypes.oneOf(['column', 'row']),\n    value: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.number,\n      PropTypes.object,\n      PropTypes.array,\n    ]),\n    values: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\n    attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n\n    ...spacingPropTypes,\n\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n\n    on_change: PropTypes.func,\n  }\n\n  static defaultProps = {\n    label: null,\n    label_direction: null,\n    label_sr_only: null,\n    title: null,\n    multiselect: null,\n    variant: null,\n    left_component: null,\n    disabled: null,\n    skeleton: null,\n    id: null,\n    name: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    status_no_animation: null,\n    globalStatus: null,\n    suffix: null,\n    vertical: null,\n    layout_direction: 'row',\n    value: undefined,\n    values: undefined,\n    attributes: null,\n\n    className: null,\n    children: null,\n\n    on_change: null,\n  }\n\n  static getDerivedStateFromProps(props, state) {\n    if (state._listenForPropChanges) {\n      if (\n        typeof props.value !== 'undefined' &&\n        props.value !== state.value\n      ) {\n        state.value = props.value\n      }\n      if (\n        typeof props.values !== 'undefined' &&\n        props.values !== state.values\n      ) {\n        state.values = ToggleButtonGroup.getValues(props)\n      }\n    }\n    state._listenForPropChanges = true\n\n    return state\n  }\n\n  static getValues(props) {\n    if (typeof props.values === 'string' && props.values[0] === '[') {\n      return JSON.parse(props.values)\n    }\n    return props.values\n  }\n\n  constructor(props) {\n    super(props)\n    this._refInput = React.createRef()\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this._name = props.name || makeUniqueId() // cause we need an id anyway\n    this.state = {\n      // do not set the value here, else get true in this check } else if (context.values && Array.isArray(context.values)) {\n      _listenForPropChanges: true,\n    }\n  }\n\n  onChangeHandler = ({ value, event }) => {\n    const { multiselect } = this.props\n    const values = this.state.values || []\n\n    if (isTrue(multiselect)) {\n      if (!values.includes(value)) {\n        values.push(value)\n      } else {\n        values.splice(values.indexOf(value), 1)\n      }\n    }\n\n    this.setState({\n      value,\n      values,\n      _listenForPropChanges: false,\n    })\n\n    dispatchCustomElementEvent(this, 'on_change', {\n      value,\n      values,\n      event,\n    })\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      ToggleButtonGroup.defaultProps,\n      this.context.getTranslation(this.props).ToggleButton,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.ToggleButtonGroup\n    )\n\n    const {\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      suffix,\n      label_direction,\n      label_sr_only,\n      vertical,\n      layout_direction,\n      label,\n      variant,\n      left_component,\n      disabled,\n      skeleton,\n      className,\n\n      multiselect,\n      id: _id, // eslint-disable-line\n      name: _name, // eslint-disable-line\n      value: _value, // eslint-disable-line\n      values: _values, // eslint-disable-line\n      children, // eslint-disable-line\n      on_change, // eslint-disable-line\n\n      ...rest\n    } = props\n\n    const { value, values } = this.state\n\n    const id = this._id\n    const showStatus = getStatusState(status)\n\n    const classes = classnames(\n      'dnb-toggle-button-group',\n      status && `dnb-toggle-button-group__status--${status_state}`,\n      !label && 'dnb-toggle-button-group--no-label',\n      `dnb-toggle-button-group--${layout_direction}`,\n      'dnb-form-component',\n      createSpacingClasses(props),\n      className\n    )\n\n    const params = {\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      params['aria-describedby'] = combineDescribedBy(\n        params,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (label) {\n      params['aria-labelledby'] = combineLabelledBy(params, id + '-label')\n    }\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    const context = {\n      name: this._name,\n      value,\n      values,\n      multiselect: isTrue(multiselect),\n      variant,\n      left_component,\n      disabled,\n      skeleton,\n      setContext: (context) => {\n        // also look for a function, where we are able to fill old values\n        // this is used in the \"constructor\" inside the ToggleButton.js component\n        if (typeof context === 'function') {\n          context = context(this._tmp)\n        }\n        this._tmp = { ...this._tmp, ...context }\n        this.setState({\n          ...context,\n          _listenForPropChanges: false,\n        })\n      },\n      onChange: this.onChangeHandler,\n    }\n\n    const Fieldset = label ? 'fieldset' : 'div'\n\n    return (\n      <ToggleButtonGroupContext.Provider value={context}>\n        <div className={classes}>\n          <AlignmentHelper />\n          <Fieldset>\n            <Flex.Container\n              align=\"baseline\"\n              direction={\n                vertical || label_direction === 'vertical'\n                  ? 'vertical'\n                  : 'horizontal'\n              }\n              gap={vertical ? 'x-small' : 'small'}\n            >\n              {label && (\n                <FormLabel\n                  element=\"legend\"\n                  id={id + '-label'}\n                  srOnly={label_sr_only}\n                >\n                  {label}\n                </FormLabel>\n              )}\n\n              <span\n                id={id}\n                className=\"dnb-toggle-button-group__shell\"\n                role=\"group\"\n                {...params}\n              >\n                <FormStatus\n                  show={showStatus}\n                  id={id + '-form-status'}\n                  globalStatus={globalStatus}\n                  label={label}\n                  text_id={id + '-status'} // used for \"aria-describedby\"\n                  text={status}\n                  state={status_state}\n                  no_animation={status_no_animation}\n                  skeleton={skeleton}\n                  {...status_props}\n                />\n\n                <span\n                  className={classnames(\n                    'dnb-toggle-button-group__shell__children',\n                    `dnb-toggle-button-group__shell__children--${layout_direction}`\n                  )}\n                >\n                  {children}\n\n                  {suffix && (\n                    <Suffix\n                      className=\"dnb-toggle-button-group__suffix\"\n                      id={id + '-suffix'} // used for \"aria-describedby\"\n                      context={props}\n                    >\n                      {suffix}\n                    </Suffix>\n                  )}\n                </span>\n              </span>\n            </Flex.Container>\n          </Fieldset>\n        </div>\n      </ToggleButtonGroupContext.Provider>\n    )\n  }\n}\n\nToggleButtonGroup._supportsSpacingProps = true\n"],"mappings":"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"}

package/components/toggle-button/style/dnb-toggle-button.css

@@ -82,8 +82,8 @@
   margin-right: 1rem;
 }
 .dnb-toggle-button-group {
-  --toggle-button-group-margin-right: 1rem;
-  --toggle-button-group-margin-bottom: 1rem;
+  --toggle-button-group-column-gap: 1rem;
+  --toggle-button-group-row-gap: 1rem;
   display: inline-flex;
 }
 .dnb-toggle-button-group fieldset {
@@ -91,10 +91,6 @@
   padding: 0;
   border: none;
 }
-.dnb-toggle-button-group .dnb-toggle-button {
-  margin-right: var(--toggle-button-group-margin-right);
-  margin-bottom: var(--toggle-button-group-margin-bottom);
-}
 .dnb-toggle-button-group--column .dnb-toggle-button {
   display: flex;
   margin-right: 0;
@@ -105,10 +101,23 @@
 .dnb-toggle-button-group__shell {
   display: flex;
   flex-direction: column;
+  row-gap: var(--toggle-button-group-row-gap);
 }
 .dnb-toggle-button-group__shell__children {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  -moz-column-gap: var(--toggle-button-group-column-gap);
+       column-gap: var(--toggle-button-group-column-gap);
+  row-gap: var(--toggle-button-group-row-gap);
   order: 1;
 }
+.dnb-toggle-button-group__shell__children--row {
+  flex-direction: row;
+}
+.dnb-toggle-button-group__shell__children--column {
+  flex-direction: column;
+}
 .dnb-toggle-button-group__shell > .dnb-form-status {
   order: 2;
   transform: translateY(-0.5rem);

package/components/toggle-button/style/dnb-toggle-button.min.css

@@ -1 +1 @@
-.dnb-toggle-button{align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-toggle-button__inner{display:inline-flex;flex-direction:column}.dnb-toggle-button__shell{left:0;position:relative;-webkit-user-select:none;user-select:none}.dnb-toggle-button--vertical{align-items:flex-start;flex-direction:column}.dnb-toggle-button__component{align-items:center;display:inline-flex;padding-right:.5rem}.dnb-toggle-button__button.dnb-button--has-text{padding-left:1.5rem;padding-right:1.5rem}.dnb-toggle-button__button .dnb-checkbox{margin-left:-.5rem}.dnb-toggle-button__button .dnb-checkbox__input{pointer-events:none}.dnb-toggle-button__button .dnb-checkbox__button{display:unset}.dnb-toggle-button__button .dnb-checkbox__button,.dnb-toggle-button__button .dnb-checkbox__focus{border-width:.0625rem;height:calc(var(--checkbox-height--medium) - .5rem);width:calc(var(--checkbox-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-checkbox__dot{height:calc(var(--checkbox-height--medium) - 1rem);width:calc(var(--checkbox-width--medium) - 1rem)}.dnb-toggle-button__button .dnb-checkbox__gfx{height:calc(var(--checkbox-height--medium) - .75rem);width:calc(var(--checkbox-width--medium) - .75rem)}.dnb-toggle-button__button .dnb-radio{margin-left:-.5rem}.dnb-toggle-button__button .dnb-radio__input{pointer-events:none}.dnb-toggle-button__button .dnb-radio__button,.dnb-toggle-button__button .dnb-radio__focus{border-width:.0625rem;height:calc(var(--radio-height--medium) - .5rem);width:calc(var(--radio-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-radio__dot{height:calc(var(--radio-height--medium) - 1rem);width:calc(var(--radio-width--medium) - 1rem)}:not(.dnb-toggle-button-group)>.dnb-form-label+.dnb-toggle-button{vertical-align:top}.dnb-toggle-button .dnb-form-status{margin-top:.5rem;order:2}.dnb-toggle-button .dnb-form-label{margin-right:1rem}.dnb-toggle-button-group{--toggle-button-group-margin-right:1rem;--toggle-button-group-margin-bottom:1rem;display:inline-flex}.dnb-toggle-button-group fieldset{border:none;margin:0;padding:0}.dnb-toggle-button-group .dnb-toggle-button{margin-bottom:var(--toggle-button-group-margin-bottom);margin-right:var(--toggle-button-group-margin-right)}.dnb-toggle-button-group--column .dnb-toggle-button{display:flex;margin-right:0}.dnb-toggle-button-group .dnb-toggle-button:last-of-type{margin-right:0}.dnb-toggle-button-group__shell{display:flex;flex-direction:column}.dnb-toggle-button-group__shell__children{order:1}.dnb-toggle-button-group__shell>.dnb-form-status{order:2;transform:translateY(-.5rem)}.dnb-toggle-button-group .dnb-flex-container{margin-bottom:calc(var(--toggle-button-group-margin-bottom)*-1)}.dnb-toggle-button-group .dnb-flex-container--direction-horizontal .dnb-form-label{align-self:flex-start;margin-top:.5rem}.dnb-toggle-button-group .dnb-alignment-helper{line-height:2.5rem}.dnb-toggle-button-group__suffix{font-size:var(--font-size-basis)}@media screen and (min-width:40em){.dnb-form-label+.dnb-toggle-button{transform:translateY(-.5rem)}}
+.dnb-toggle-button{align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-toggle-button__inner{display:inline-flex;flex-direction:column}.dnb-toggle-button__shell{left:0;position:relative;-webkit-user-select:none;user-select:none}.dnb-toggle-button--vertical{align-items:flex-start;flex-direction:column}.dnb-toggle-button__component{align-items:center;display:inline-flex;padding-right:.5rem}.dnb-toggle-button__button.dnb-button--has-text{padding-left:1.5rem;padding-right:1.5rem}.dnb-toggle-button__button .dnb-checkbox{margin-left:-.5rem}.dnb-toggle-button__button .dnb-checkbox__input{pointer-events:none}.dnb-toggle-button__button .dnb-checkbox__button{display:unset}.dnb-toggle-button__button .dnb-checkbox__button,.dnb-toggle-button__button .dnb-checkbox__focus{border-width:.0625rem;height:calc(var(--checkbox-height--medium) - .5rem);width:calc(var(--checkbox-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-checkbox__dot{height:calc(var(--checkbox-height--medium) - 1rem);width:calc(var(--checkbox-width--medium) - 1rem)}.dnb-toggle-button__button .dnb-checkbox__gfx{height:calc(var(--checkbox-height--medium) - .75rem);width:calc(var(--checkbox-width--medium) - .75rem)}.dnb-toggle-button__button .dnb-radio{margin-left:-.5rem}.dnb-toggle-button__button .dnb-radio__input{pointer-events:none}.dnb-toggle-button__button .dnb-radio__button,.dnb-toggle-button__button .dnb-radio__focus{border-width:.0625rem;height:calc(var(--radio-height--medium) - .5rem);width:calc(var(--radio-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-radio__dot{height:calc(var(--radio-height--medium) - 1rem);width:calc(var(--radio-width--medium) - 1rem)}:not(.dnb-toggle-button-group)>.dnb-form-label+.dnb-toggle-button{vertical-align:top}.dnb-toggle-button .dnb-form-status{margin-top:.5rem;order:2}.dnb-toggle-button .dnb-form-label{margin-right:1rem}.dnb-toggle-button-group{--toggle-button-group-column-gap:1rem;--toggle-button-group-row-gap:1rem;display:inline-flex}.dnb-toggle-button-group fieldset{border:none;margin:0;padding:0}.dnb-toggle-button-group--column .dnb-toggle-button{display:flex;margin-right:0}.dnb-toggle-button-group .dnb-toggle-button:last-of-type{margin-right:0}.dnb-toggle-button-group__shell{display:flex;flex-direction:column;row-gap:var(--toggle-button-group-row-gap)}.dnb-toggle-button-group__shell__children{align-items:flex-start;-moz-column-gap:var(--toggle-button-group-column-gap);column-gap:var(--toggle-button-group-column-gap);display:flex;flex-wrap:wrap;order:1;row-gap:var(--toggle-button-group-row-gap)}.dnb-toggle-button-group__shell__children--row{flex-direction:row}.dnb-toggle-button-group__shell__children--column{flex-direction:column}.dnb-toggle-button-group__shell>.dnb-form-status{order:2;transform:translateY(-.5rem)}.dnb-toggle-button-group .dnb-flex-container{margin-bottom:calc(var(--toggle-button-group-margin-bottom)*-1)}.dnb-toggle-button-group .dnb-flex-container--direction-horizontal .dnb-form-label{align-self:flex-start;margin-top:.5rem}.dnb-toggle-button-group .dnb-alignment-helper{line-height:2.5rem}.dnb-toggle-button-group__suffix{font-size:var(--font-size-basis)}@media screen and (min-width:40em){.dnb-form-label+.dnb-toggle-button{transform:translateY(-.5rem)}}

package/components/toggle-button/style/dnb-toggle-button.scss

@@ -115,21 +115,14 @@
   }
 
   &-group {
-    --toggle-button-group-margin-right: 1rem;
-    --toggle-button-group-margin-bottom: 1rem;
-
+    --toggle-button-group-column-gap: 1rem;
+    --toggle-button-group-row-gap: 1rem;
     display: inline-flex;
 
     fieldset {
       @include fieldsetReset();
     }
 
-    // default spacing
-    .dnb-toggle-button {
-      margin-right: var(--toggle-button-group-margin-right);
-      margin-bottom: var(--toggle-button-group-margin-bottom);
-    }
-
     &--column .dnb-toggle-button {
       display: flex;
       margin-right: 0;
@@ -143,9 +136,23 @@
     &__shell {
       display: flex;
       flex-direction: column;
+      row-gap: var(--toggle-button-group-row-gap);
 
       &__children {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        column-gap: var(--toggle-button-group-column-gap);
+        row-gap: var(--toggle-button-group-row-gap);
+
         order: 1;
+
+        &--row {
+          flex-direction: row;
+        }
+        &--column {
+          flex-direction: column;
+        }
       }
 
       & > .dnb-form-status {

package/es/components/accordion/Accordion.d.ts

@@ -13,11 +13,11 @@ import { Store } from './AccordionStore';
 export type AccordionVariant = 'plain' | 'default' | 'outlined' | 'filled';
 export type AccordionHeading = boolean | React.ReactNode;
 export type AccordionIcon = IconIcon | {
-    closed?: React.ReactNode | ((...args: any[]) => any);
+    closed?: IconIcon;
     /**
      * If set to `true` the accordion will be expanded as its initial state.
      */
-    expanded?: React.ReactNode | ((...args: any[]) => any);
+    expanded?: IconIcon;
 };
 export type AccordionAttributes = string | Record<string, unknown>;
 export type AccordionIconPosition = ButtonIconPosition;
@@ -225,6 +225,12 @@ declare namespace Accordion {
         on_state_update?: (...args: any[]) => any;
     } & {
         allow_close_all?: boolean;
+        /**
+         * ref handle to collapse all expanded accordions. Send in a ref and use `.current()` to collapse all accordions.
+         *
+         * Default: `undefined`
+         */
+        collapseAllHandleRef?: React.MutableRefObject<() => void>;
         expanded_id?: string;
     };
     var Provider: {
@@ -234,7 +240,7 @@ declare namespace Accordion {
     var Header: {
         ({ icon_size: icon_size_default, ...restOfProps }: import("./AccordionHeader").AccordionHeaderProps): import("react/jsx-runtime").JSX.Element;
         Container: ({ children, ...rest }: import("./AccordionHeader").AccordionHeaderContainerProps) => import("react/jsx-runtime").JSX.Element;
-        Icon: ({ icon, expanded, size, icon_position, }: import("./AccordionHeader").AccordionHeaderIconProps) => import("react/jsx-runtime").JSX.Element;
+        Icon: ({ icon: iconProp, expanded, size, icon_position, }: import("./AccordionHeader").AccordionHeaderIconProps) => import("react/jsx-runtime").JSX.Element;
         Title: ({ children, ...rest }: import("./AccordionHeader").AccordionHeaderTitleProps) => import("react/jsx-runtime").JSX.Element;
         Description: ({ children, ...rest }: import("./AccordionHeader").AccordionHeaderDescriptionProps) => import("react/jsx-runtime").JSX.Element;
         _supportsSpacingProps: boolean;
@@ -249,6 +255,12 @@ declare namespace Accordion {
 }
 export type GroupProps = AccordionProps & {
     allow_close_all?: boolean;
+    /**
+     * ref handle to collapse all expanded accordions. Send in a ref and use `.current()` to collapse all accordions.
+     *
+     * Default: `undefined`
+     */
+    collapseAllHandleRef?: React.MutableRefObject<() => void>;
     expanded_id?: string;
 };
 export default Accordion;

package/es/components/accordion/Accordion.js

@@ -39,6 +39,7 @@ function Accordion(_ref) {
   });
   const [previousExpanded, setPreviousExpanded] = useState(props.expanded);
   const [expanded, setExpanded] = useState(getInitialExpandedState());
+  const hasAddedCallbackRef = useRef(false);
   if (props.expanded !== previousExpanded) {
     setExpanded(props.expanded !== undefined ? props.expanded : false);
     setPreviousExpanded(props.expanded);
@@ -83,6 +84,11 @@ function Accordion(_ref) {
       setExpanded(true);
     }
   }, [context.flush_remembered_state, context.expanded_id]);
+  if (context !== null && context !== void 0 && context.collapseAllHandleRef && !hasAddedCallbackRef.current) {
+    var _context$collapseAcco;
+    context === null || context === void 0 ? void 0 : (_context$collapseAcco = context.collapseAccordionCallbacks) === null || _context$collapseAcco === void 0 ? void 0 : _context$collapseAcco.current.push(() => changeOpened(false));
+    hasAddedCallbackRef.current = true;
+  }
   function getInitialExpandedState() {
     if (props.expanded_ssr || context !== null && context !== void 0 && context.expanded_ssr) {
       return typeof window === 'undefined';
@@ -135,6 +141,7 @@ function Accordion(_ref) {
       event
     });
   }
+  console.log('context', context);
   return React.createElement(Context.Consumer, null, globalContext => React.createElement(AccordionContext.Consumer, null, nestedContext => {
     let expandedState = expanded;
     const extendedProps = extendPropsWithContext(props, accordionDefaultProps, context, nestedContext, {