@dnb/eufemia 10.37.0 → 10.39.0

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

@@ -4,12 +4,12 @@
 */
 
 @mixin tableAccordionActiveColor {
-  .dnb-table__td__accordion-icon .dnb-icon {
+  .dnb-table__td__button-icon .dnb-icon {
     color: var(--table-accordion-icon-color--active);
   }
 }
 @mixin tableAccordionDisabledColor {
-  .dnb-table__td__accordion-icon .dnb-icon {
+  .dnb-table__td__button-icon .dnb-icon {
     color: var(--table-accordion-icon-color--disabled);
   }
 }
@@ -32,7 +32,7 @@
   --table-accordion-outline-width: var(--focus-ring-width);
   --table-accordion-outline-background--active: var(--color-pistachio);
 
-  &__th#{&}__th__accordion-icon {
+  &__th#{&}__th__button-icon {
     &.dnb-table__th {
       padding: 0;
     }
@@ -53,14 +53,14 @@
     }
   }
 
-  &__td#{&}__td__accordion-icon {
+  &__td#{&}__td__button-icon {
     &.dnb-table__td {
       padding: 0;
     }
     user-select: none; // prevent selection on double-click
   }
 
-  &__tr--has-accordion-content &__toggle-button {
+  &__tr--clickable &__button {
     display: flex; // to ensure we inherit the correct size from its content
     justify-content: center;
 
@@ -69,26 +69,21 @@
       transition: transform 500ms var(--easing-default);
     }
   }
-  &__tr--has-accordion-content#{&}__tr--no-animation
-    &__toggle-button
-    .dnb-icon,
-  html[data-visual-test]
-    &__tr--has-accordion-content
-    &__toggle-button
-    .dnb-icon {
+  &__tr--clickable#{&}__tr--no-animation &__button .dnb-icon,
+  html[data-visual-test] &__tr--clickable &__button .dnb-icon {
     transition: none !important;
   }
 
-  &__tr--has-accordion-content,
+  &__tr--clickable,
   &__tr__accordion-content {
     position: relative;
   }
-  &__tr--has-accordion-content#{&}__tr--expanded,
+  &__tr--clickable#{&}__tr--expanded,
   &__tr__accordion-content {
     z-index: 3; // ensure borders are visible in certain states
   }
 
-  &__tr--has-accordion-content {
+  &__tr--clickable {
     &:active,
     html[data-whatinput='keyboard'] &:focus,
     &:hover:not(.dnb-table__tr--hover.dnb-table__tr--expanded) {
@@ -96,13 +91,11 @@
     }
   }
 
-  &__tr--has-accordion-content#{&}__tr--expanded
-    &__toggle-button
-    .dnb-icon {
+  &__tr--clickable#{&}__tr--expanded &__button .dnb-icon {
     transform: rotate(180deg);
   }
 
-  &__tr--has-accordion-content#{&}__tr--expanded {
+  &__tr--clickable#{&}__tr--expanded {
     .dnb-table--border & td::after {
       border-bottom: none;
       border-left: none;
@@ -110,7 +103,7 @@
     }
   }
 
-  &__tr--has-accordion-content#{&}__tr:not(&__tr--disabled) {
+  &__tr--clickable#{&}__tr:not(&__tr--disabled) {
     outline: none;
 
     td::before {
@@ -145,19 +138,18 @@
 
   &--border
     tbody
-    &__tr--has-accordion-content:not(#{&}__tr--expanded):not(&__tr--last)
+    &__tr--clickable:not(#{&}__tr--expanded):not(&__tr--last)
     &__td::before {
     bottom: calc(var(--table-border-width) * -1);
   }
 
-  &__tr--has-accordion-content#{&}__tr--expanded:not(&__tr--disabled):hover
-    &__td {
+  &__tr--clickable#{&}__tr--expanded:not(&__tr--disabled):hover &__td {
     background-color: var(--color-white);
   }
 
-  &__tr--has-accordion-content#{&}__tr:not(&__tr--disabled):not(
-      :active
-    ):not(:hover):focus {
+  &__tr--clickable#{&}__tr:not(&__tr--disabled):not(:active):not(
+      :hover
+    ):focus {
     td::before {
       @include whatInput(keyboard) {
         border-color: var(--focus-ring-color);
@@ -172,7 +164,7 @@
     }
   }
 
-  &__tr--has-accordion-content#{&}__tr:not(&__tr--disabled):active {
+  &__tr--clickable#{&}__tr:not(&__tr--disabled):active {
     html:not([data-whatintent='touch']) &:hover td::before,
     td::before {
       border-color: var(--table-accordion-outline-color);
@@ -182,13 +174,13 @@
     }
   }
 
-  &__tr--has-accordion-content#{&}__tr:not(&__tr--disabled):active &__td {
+  &__tr--clickable#{&}__tr:not(&__tr--disabled):active &__td {
     background-color: var(--table-accordion-outline-background--active);
 
     @include tableAccordionActiveColor();
   }
 
-  &__tr--has-accordion-content#{&}__tr--expanded:not(
+  &__tr--clickable#{&}__tr--expanded:not(
       &__tr--disabled
     )#{&}__tr--hover:not(:active):hover
     &__td {
@@ -200,9 +192,9 @@
     }
   }
 
-  &__tr--has-accordion-content#{&}__tr#{&}__tr--expanded:not(
-      &__tr--disabled
-    ):not(:active):not(:hover) {
+  &__tr--clickable#{&}__tr#{&}__tr--expanded:not(&__tr--disabled):not(
+      :active
+    ):not(:hover) {
     @include whatInputNot('keyboard') {
       background-color: var(--table-accordion-header-background);
 
@@ -213,7 +205,7 @@
     }
   }
 
-  &__tr--has-accordion-content#{&}__tr--disabled {
+  &__tr--clickable#{&}__tr--disabled {
     @include tableAccordionDisabledColor();
   }
 
@@ -256,7 +248,7 @@
         background-color: var(--color-white);
       }
 
-      + .dnb-table__tr--has-accordion-content .dnb-table__td {
+      + .dnb-table__tr--clickable .dnb-table__td {
         @include tableBorder() {
           border-top: var(--table-accordion-border);
         }
@@ -323,13 +315,13 @@
   }
 
   // stylelint-disable-next-line
-  &__tr--has-accordion-content:not(&__tr--disabled) {
+  &__tr--clickable:not(&__tr--disabled) {
     cursor: pointer;
   }
 
   // prevent selection while animating – useful when user double-clicks
   // TODO: Our SASS version does not support :has – so we may use this in future
-  // &__tr--has-accordion-content:has(& + &__tr__accordion-content--animating) {
+  // &__tr--clickable:has(& + &__tr__accordion-content--animating) {
   //   user-select: none;
   // }
 

package/cjs/components/table/style/table-td.scss

@@ -73,7 +73,7 @@
   //last row must be rounded
   &--outline tbody:last-child {
     .dnb-table__tr:last-child,
-    .dnb-table__tr--has-accordion-content:not(
+    .dnb-table__tr--clickable:not(
         .dnb-table__tr--expanded
       ).dnb-table__tr--last {
       clip-path: inset(

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

@@ -5,4 +5,3 @@ export type TableAccordionHeadProps = {
     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/cjs/components/table/table-accordion/TableAccordionHead.js

@@ -5,20 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableAccordionHead = TableAccordionHead;
-exports.TableAccordionToggleButton = TableAccordionToggleButton;
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _keycode = _interopRequireDefault(require("keycode"));
-var _helpers = require("../../../shared/helpers");
-var _Button = _interopRequireDefault(require("../../button/Button"));
-var _IconPrimary = _interopRequireDefault(require("../../icon/IconPrimary"));
-var _TableTh = _interopRequireDefault(require("../TableTh"));
 var _TableTd = _interopRequireDefault(require("../TableTd"));
 var _TableContext = require("../TableContext");
+var _TableClickableHead = require("../TableClickableHead");
 var _TableAccordionContext = require("./TableAccordionContext");
 var _TableAccordionContent = require("./TableAccordionContent");
 var _Td;
-const _excluded = ["children", "className", "expanded", "disabled", "noAnimation", "onClick", "onOpened", "onClosed", "count"];
+const _excluded = ["children", "expanded", "noAnimation", "onClick", "onOpened", "onClosed", "count"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -26,11 +20,10 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function TableAccordionHead(allProps) {
+  var _React$useContext;
   const {
       children,
-      className,
       expanded,
-      disabled,
       noAnimation,
       onClick,
       onOpened,
@@ -53,11 +46,11 @@ function TableAccordionHead(allProps) {
   const [trIsHover, setHover] = _react.default.useState(false);
   const [trHadClick, setHadClick] = _react.default.useState(false);
   let headerContent = _react.default.Children.toArray(children);
-  const addExpandIcon = icon => {
+  const addContent = content => {
     if (tableContext.allProps.accordionChevronPlacement === 'end') {
-      headerContent.push(icon);
+      headerContent.push(content);
     } else {
-      headerContent.unshift(icon);
+      headerContent.unshift(content);
     }
   };
   const accordionContent = headerContent.filter(element => {
@@ -72,30 +65,31 @@ function TableAccordionHead(allProps) {
       };
     }
   }, [count, tableContext === null || tableContext === void 0 ? void 0 : tableContext.collapseTrCallbacks, hasAccordionContent]);
-  const trParams = !disabled && hasAccordionContent ? {
-    onClick: toggleOpenTr,
-    onMouseEnter: onMouseEnterHandler,
-    onMouseLeave: onMouseLeaveHandler,
-    onKeyDown: onKeydownHandler
-  } : {};
+  const tableContextAllProps = (_React$useContext = _react.default.useContext(_TableContext.TableContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.allProps;
   if (hasAccordionContent) {
     headerContent = headerContent.filter(element => {
       return !isAccordionElement(element);
     });
-    addExpandIcon(_Td || (_Td = _react.default.createElement(_TableTd.default, {
-      className: "dnb-table__td__accordion-icon",
+    addContent(_react.default.createElement(_TableClickableHead.TableClickableButtonTd, {
+      trIsOpen: trIsOpen,
+      ariaLabel: tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.accordionToggleButtonSR,
+      icon: "chevron_down",
+      onClick: toggleOpenTr,
       key: "td-icon"
-    }, _react.default.createElement(TableAccordionToggleButton, null))));
-  } else if (isTableHead(headerContent)) {
+    }));
+  } else if ((0, _TableClickableHead.isTableHead)(headerContent)) {
     var _tableContext$allProp;
-    addExpandIcon(_react.default.createElement(_TableTh.default, {
-      "aria-hidden": true,
-      className: "dnb-table__th__accordion-icon",
-      key: "th-icon"
-    }, _react.default.createElement("div", null, tableContext === null || tableContext === void 0 ? void 0 : (_tableContext$allProp = tableContext.allProps) === null || _tableContext$allProp === void 0 ? void 0 : _tableContext$allProp.accordionToggleButtonSR)));
+    addContent(_react.default.createElement(_TableClickableHead.TableIconSrTh, {
+      key: "th-icon",
+      text: tableContext === null || tableContext === void 0 ? void 0 : (_tableContext$allProp = tableContext.allProps) === null || _tableContext$allProp === void 0 ? void 0 : _tableContext$allProp.accordionToggleButtonSR
+    }));
+  } else if (!hasAccordionContent) {
+    addContent(_Td || (_Td = _react.default.createElement(_TableTd.default, {
+      key: "empty-td"
+    })));
   }
   const countTds = hasAccordionContent ? headerContent.filter(element => {
-    return element.type === _TableTd.default;
+    return element.type === _TableTd.default || element.type === _TableClickableHead.TableClickableButtonTd;
   }).length : null;
   return _react.default.createElement(_TableAccordionContext.TableAccordionContext.Provider, {
     value: {
@@ -106,59 +100,36 @@ function TableAccordionHead(allProps) {
       onOpened,
       onClosed
     }
-  }, _react.default.createElement("tr", _extends({
-    tabIndex: accordionContent && !disabled ? 0 : undefined,
-    className: (0, _classnames.default)(className, hasAccordionContent && 'dnb-table__tr--has-accordion-content', trIsOpen && 'dnb-table__tr--expanded', disabled && 'dnb-table__tr--disabled', noAnimation && 'dnb-table__tr--no-animation', trIsHover && trHadClick && 'dnb-table__tr--hover')
-  }, trParams, props), headerContent), accordionContent);
-  function onKeydownHandler(event) {
-    switch ((0, _keycode.default)(event.nativeEvent)) {
-      case 'space':
-      case 'enter':
-        {
-          const target = event.target;
-          if (document.activeElement !== target || target.tagName === 'TR') {
-            setOpen(!trIsOpen);
-            event.preventDefault();
-          }
-        }
-        break;
-    }
-  }
+  }, _react.default.createElement(_TableClickableHead.TableClickableHead, _extends({
+    trIsOpen: trIsOpen,
+    trIsHover: trIsHover,
+    trHadClick: trHadClick,
+    clickable: hasAccordionContent,
+    noAnimation: noAnimation,
+    onClick: toggleOpenTr,
+    onMouseEnter: onMouseEnterHandler,
+    onMouseLeave: onMouseLeaveHandler,
+    onKeyDown: onKeyDownHandler,
+    ariaLabel: tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.accordionToggleButtonSR
+  }, props), headerContent), accordionContent);
   function onMouseEnterHandler() {
     setHover(true);
   }
+  function onKeyDownHandler(event) {
+    toggleOpenTr(event, true);
+  }
   function onMouseLeaveHandler() {
     setHover(false);
     setHadClick(false);
   }
-  function toggleOpenTr(event) {
-    let allowInteractiveElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    const target = event.target;
-    if ((document.activeElement !== target && target.tagName !== 'INPUT' && target.tagName !== 'LABEL' || allowInteractiveElement) && !(0, _helpers.hasSelectedText)()) {
-      setOpen(!trIsOpen);
-      setHadClick(true);
-      onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }
+  function toggleOpenFn(event) {
+    setOpen(!trIsOpen);
+    setHadClick(true);
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+  }
+  function toggleOpenTr(event, allowInteractiveElement) {
+    (0, _TableClickableHead.onClickTr)(event, allowInteractiveElement, toggleOpenFn);
   }
-}
-function TableAccordionToggleButton() {
-  var _React$useContext;
-  const tableAccordionContext = _react.default.useContext(_TableAccordionContext.TableAccordionContext);
-  const tableContextAllProps = (_React$useContext = _react.default.useContext(_TableContext.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.default.createElement("span", {
-    className: "dnb-table__toggle-button"
-  }, _react.default.createElement(_IconPrimary.default, {
-    icon: "chevron_down",
-    size: iconSize
-  }), _react.default.createElement(_Button.default, {
-    className: "dnb-sr-only",
-    tabIndex: -1,
-    "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 === _TableAccordionContent.TableAccordionContentSingle || element.type === _TableAccordionContent.TableAccordionContentRow;
-const isTableHead = children => children.some(element => element.type === _TableTh.default);
 //# sourceMappingURL=TableAccordionHead.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableAccordionHead.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_keycode","_helpers","_Button","_IconPrimary","_TableTh","_TableTd","_TableContext","_TableAccordionContext","_TableAccordionContent","_Td","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","TableAccordionHead","allProps","children","className","expanded","disabled","noAnimation","onClick","onOpened","onClosed","count","props","tableContext","React","useContext","TableContext","trIsOpen","setOpen","useState","location","id","hash","trIsHover","setHover","trHadClick","setHadClick","headerContent","Children","toArray","addExpandIcon","icon","accordionChevronPlacement","push","unshift","accordionContent","filter","element","isAccordionElement","hasAccordionContent","every","isValidElement","useEffect","_tableContext$collaps","collapseTrCallbacks","current","trParams","toggleOpenTr","onMouseEnter","onMouseEnterHandler","onMouseLeave","onMouseLeaveHandler","onKeyDown","onKeydownHandler","createElement","TableAccordionToggleButton","isTableHead","_tableContext$allProp","accordionToggleButtonSR","countTds","type","Td","TableAccordionContext","Provider","value","tabIndex","undefined","classnames","event","keycode","nativeEvent","document","activeElement","tagName","preventDefault","allowInteractiveElement","hasSelectedText","_React$useContext","tableAccordionContext","tableContextAllProps","iconSize","size","Boolean","on_click","TableAccordionContentSingle","TableAccordionContentRow","some","Th"],"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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"}
+{"version":3,"file":"TableAccordionHead.js","names":["_react","_interopRequireWildcard","require","_TableTd","_interopRequireDefault","_TableContext","_TableClickableHead","_TableAccordionContext","_TableAccordionContent","_Td","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","TableAccordionHead","allProps","_React$useContext","children","expanded","noAnimation","onClick","onOpened","onClosed","count","props","tableContext","React","useContext","TableContext","trIsOpen","setOpen","useState","location","id","hash","trIsHover","setHover","trHadClick","setHadClick","headerContent","Children","toArray","addContent","content","accordionChevronPlacement","push","unshift","accordionContent","filter","element","isAccordionElement","hasAccordionContent","every","isValidElement","useEffect","_tableContext$collaps","collapseTrCallbacks","current","tableContextAllProps","createElement","TableClickableButtonTd","ariaLabel","accordionToggleButtonSR","icon","toggleOpenTr","isTableHead","_tableContext$allProp","TableIconSrTh","text","countTds","type","Td","TableAccordionContext","Provider","value","TableClickableHead","clickable","onMouseEnter","onMouseEnterHandler","onMouseLeave","onMouseLeaveHandler","onKeyDown","onKeyDownHandler","event","toggleOpenFn","allowInteractiveElement","onClickTr","TableAccordionContentSingle","TableAccordionContentRow"],"sources":["../../../../../src/components/table/table-accordion/TableAccordionHead.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport Td from '../TableTd'\nimport { TableContext } from '../TableContext'\nimport {\n  TableClickableButtonTd,\n  TableClickableHead,\n  TableIconSrTh,\n  isTableHead,\n  onClickTr,\n} from '../TableClickableHead'\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    expanded,\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 addContent = (content) => {\n    if (tableContext.allProps.accordionChevronPlacement === 'end') {\n      headerContent.push(content)\n    } else {\n      headerContent.unshift(content)\n    }\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 tableContextAllProps = React.useContext(TableContext)?.allProps\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    addContent(\n      <TableClickableButtonTd\n        trIsOpen={trIsOpen}\n        ariaLabel={tableContextAllProps?.accordionToggleButtonSR}\n        icon=\"chevron_down\"\n        onClick={toggleOpenTr}\n        key=\"td-icon\"\n      />\n    )\n  } else if (isTableHead(headerContent)) {\n    addContent(\n      <TableIconSrTh\n        key=\"th-icon\"\n        text={tableContext?.allProps?.accordionToggleButtonSR}\n      />\n    )\n  } else if (!hasAccordionContent) {\n    addContent(<Td key=\"empty-td\"></Td>)\n  }\n\n  const countTds = hasAccordionContent\n    ? headerContent.filter((element: React.ReactElement) => {\n        return (\n          element.type === Td || element.type === TableClickableButtonTd\n        ) // 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      <TableClickableHead\n        trIsOpen={trIsOpen}\n        trIsHover={trIsHover}\n        trHadClick={trHadClick}\n        clickable={hasAccordionContent}\n        noAnimation={noAnimation}\n        onClick={toggleOpenTr}\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        onKeyDown={onKeyDownHandler}\n        ariaLabel={tableContextAllProps?.accordionToggleButtonSR}\n        {...props}\n      >\n        {headerContent}\n      </TableClickableHead>\n      {accordionContent}\n    </TableAccordionContext.Provider>\n  )\n\n  function onMouseEnterHandler() {\n    setHover(true)\n  }\n\n  function onKeyDownHandler(event: React.SyntheticEvent) {\n    toggleOpenTr(event, true)\n  }\n\n  function onMouseLeaveHandler() {\n    setHover(false)\n    setHadClick(false)\n  }\n\n  function toggleOpenFn(event: React.SyntheticEvent) {\n    setOpen(!trIsOpen)\n    setHadClick(true)\n    onClick?.(event)\n  }\n\n  function toggleOpenTr(\n    event: React.SyntheticEvent,\n    allowInteractiveElement?: boolean\n  ) {\n    onClickTr(event, allowInteractiveElement, toggleOpenFn)\n  }\n}\n\nconst isAccordionElement = (element: React.ReactElement) =>\n  element.type === TableAccordionContentSingle ||\n  element.type === TableAccordionContentRow\n"],"mappings":"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"}

package/cjs/components/table/table-navigation/TableNavigationHead.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TableTrProps } from '../TableTr';
+export type TableNavigationHeadProps = TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>;
+export declare function TableNavigationHead(allProps: TableNavigationHeadProps): import("react/jsx-runtime").JSX.Element;

package/cjs/components/table/table-navigation/TableNavigationHead.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableNavigationHead = TableNavigationHead;
+var _react = _interopRequireDefault(require("react"));
+var _TableTd = _interopRequireDefault(require("../TableTd"));
+var _TableContext = require("../TableContext");
+var _TableClickableHead = require("../TableClickableHead");
+var _Td;
+const _excluded = ["children", "onClick"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function TableNavigationHead(allProps) {
+  var _React$useContext;
+  const {
+      children,
+      onClick
+    } = allProps,
+    props = _objectWithoutProperties(allProps, _excluded);
+  const tableContext = _react.default.useContext(_TableContext.TableContext);
+  let content = _react.default.Children.toArray(children);
+  const hasOnClick = typeof onClick === 'function';
+  const tableContextAllProps = (_React$useContext = _react.default.useContext(_TableContext.TableContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.allProps;
+  if (hasOnClick) {
+    content.push(_react.default.createElement(_TableClickableHead.TableClickableButtonTd, {
+      key: "td-icon",
+      ariaLabel: tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.navigationButtonSR,
+      icon: "chevron_right",
+      onClick: onClickHandler
+    }));
+  } else if ((0, _TableClickableHead.isTableHead)(content)) {
+    var _tableContext$allProp;
+    content.push(_react.default.createElement(_TableClickableHead.TableIconSrTh, {
+      key: "th-icon",
+      text: tableContext === null || tableContext === void 0 ? void 0 : (_tableContext$allProp = tableContext.allProps) === null || _tableContext$allProp === void 0 ? void 0 : _tableContext$allProp.navigationButtonSR
+    }));
+  } else if (!hasOnClick) {
+    content.push(_Td || (_Td = _react.default.createElement(_TableTd.default, {
+      key: "empty-td"
+    })));
+  }
+  return _react.default.createElement(_TableClickableHead.TableClickableHead, _extends({
+    clickable: hasOnClick,
+    onClick: onClickHandler,
+    onKeyDown: onClick,
+    ariaLabel: tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.navigationButtonSR
+  }, props), content);
+  function onClickHandler(event, allowInteractiveElement) {
+    (0, _TableClickableHead.onClickTr)(event, allowInteractiveElement, onClick);
+  }
+}
+//# sourceMappingURL=TableNavigationHead.js.map

package/cjs/components/table/table-navigation/TableNavigationHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableNavigationHead.js","names":["_react","_interopRequireDefault","require","_TableTd","_TableContext","_TableClickableHead","_Td","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","TableNavigationHead","allProps","_React$useContext","children","onClick","props","tableContext","React","useContext","TableContext","content","Children","toArray","hasOnClick","tableContextAllProps","push","createElement","TableClickableButtonTd","ariaLabel","navigationButtonSR","icon","onClickHandler","isTableHead","_tableContext$allProp","TableIconSrTh","text","TableClickableHead","clickable","onKeyDown","event","allowInteractiveElement","onClickTr"],"sources":["../../../../../src/components/table/table-navigation/TableNavigationHead.tsx"],"sourcesContent":["import React from 'react'\nimport Td from '../TableTd'\nimport { TableContext } from '../TableContext'\nimport {\n  TableClickableButtonTd,\n  TableClickableHead,\n  TableIconSrTh,\n  isTableHead,\n  onClickTr,\n} from '../TableClickableHead'\n\nimport type { TableTrProps } from '../TableTr'\n\nexport type TableNavigationHeadProps = TableTrProps &\n  React.TableHTMLAttributes<HTMLTableRowElement>\n\nexport function TableNavigationHead(allProps: TableNavigationHeadProps) {\n  const { children, onClick, ...props } = allProps\n  const tableContext = React.useContext(TableContext)\n\n  let content = React.Children.toArray(children)\n\n  const hasOnClick = typeof onClick === 'function'\n\n  const tableContextAllProps = React.useContext(TableContext)?.allProps\n\n  if (hasOnClick) {\n    content.push(\n      <TableClickableButtonTd\n        key=\"td-icon\"\n        ariaLabel={tableContextAllProps?.navigationButtonSR}\n        icon=\"chevron_right\"\n        onClick={onClickHandler}\n      />\n    )\n  } else if (isTableHead(content)) {\n    content.push(\n      <TableIconSrTh\n        key=\"th-icon\"\n        text={tableContext?.allProps?.navigationButtonSR}\n      />\n    )\n  } else if (!hasOnClick) {\n    content.push(<Td key=\"empty-td\"></Td>)\n  }\n\n  return (\n    <TableClickableHead\n      clickable={hasOnClick}\n      onClick={onClickHandler}\n      onKeyDown={onClick}\n      ariaLabel={tableContextAllProps?.navigationButtonSR}\n      {...props}\n    >\n      {content}\n    </TableClickableHead>\n  )\n\n  function onClickHandler(\n    event: React.SyntheticEvent,\n    allowInteractiveElement?: boolean\n  ) {\n    onClickTr(event, allowInteractiveElement, onClick)\n  }\n}\n"],"mappings":"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"}

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

@@ -14,6 +14,7 @@ var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHe
 var _FormLabel = _interopRequireDefault(require("../FormLabel"));
 var _FormStatus = _interopRequireDefault(require("../FormStatus"));
 var _Flex = _interopRequireDefault(require("../Flex"));
+var _Space = _interopRequireDefault(require("../Space"));
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix"));
 var _ToggleButtonGroupContext = _interopRequireDefault(require("./ToggleButtonGroupContext"));
@@ -153,15 +154,17 @@ class ToggleButtonGroup extends _react.default.PureComponent {
       value: context
     }, _react.default.createElement("div", {
       className: classes
-    }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(Fieldset, null, _react.default.createElement(_Flex.default.Container, {
-      align: "baseline",
+    }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, null)), _react.default.createElement(Fieldset, {
+      className: "dnb-toggle-button-group__fieldset"
+    }, _react.default.createElement(_Flex.default.Container, {
       direction: vertical || label_direction === 'vertical' ? 'vertical' : 'horizontal',
       gap: vertical ? 'x-small' : 'small'
     }, label && _react.default.createElement(_FormLabel.default, {
       element: "legend",
       id: id + '-label',
       srOnly: label_sr_only
-    }, label), _react.default.createElement("span", _extends({
+    }, label), _react.default.createElement(_Space.default, _extends({
+      element: "span",
       id: id,
       className: "dnb-toggle-button-group__shell",
       role: "group"