@dnb/eufemia 10.20.0 → 10.21.0

package/components/table/TableAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableAccordion.js","names":["React","classnames","Button","IconPrimary","Th","Td","TableContext","keycode","hasSelectedText","TableAccordionContent","TrContext","useTableAccordion","_ref","_tableContext$allProp","_tableContext$allProp2","children","className","props","expanded","disabled","noAnimation","onClick","onOpened","onClosed","tableContext","useContext","trIsOpen","setOpen","useState","location","id","hash","trIsHover","setHover","trHadClick","setHadClick","content","Children","toArray","allProps","accordion","accordionContent","find","element","type","hasAccordionContent","isValidElement","countTds","filter","length","trParams","toggleOpenTr","onMouseEnter","onMouseEnterHandler","onMouseLeave","onMouseLeaveHandler","onKeyDown","onKeydownHandler","hasContent","tdElem","_TableTdAccordionIcon","createElement","TableTdAccordionIcon","key","accordionChevronPlacement","push","unshift","isTh","some","thElem","_TableThAccordionIcon","TableThAccordionIcon","Provider","value","_extends","tabIndex","undefined","event","target","document","activeElement","tagName","preventDefault","TableAccordionToggleButton","_React$useContext","trContext","iconSize","size","icon","accordionToggleButtonSR","Boolean","on_click","_tableContext$allProp3","_Td"],"sources":["../../../../src/components/table/TableAccordion.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Button from '../button/Button'\nimport IconPrimary from '../icon/IconPrimary'\nimport Th from './TableTh'\nimport Td from './TableTd'\nimport TableContext from './TableContext'\nimport keycode from 'keycode'\nimport { hasSelectedText } from '../../shared/helpers'\nimport { TableTrProps } from './TableTr'\n\nimport TableAccordionContent, { TrContext } from './TableAccordionContent'\nimport type { TableAccordionContentProps } from './TableAccordionContent'\n\nexport function useTableAccordion({\n  children,\n  className,\n  props,\n  expanded,\n  disabled,\n  noAnimation,\n  onClick,\n  onOpened,\n  onClosed,\n}) {\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 content = React.Children.toArray(children)\n\n  if (!tableContext?.allProps?.accordion) {\n    return null\n  }\n\n  /**\n   * Handle Accordion Content\n   */\n  const accordionContent = content.find((element: React.ReactElement) => {\n    return element.type === TableAccordionContent\n  }) as React.ReactElement<TableAccordionContentProps>\n  const hasAccordionContent = React.isValidElement(accordionContent)\n  const countTds = hasAccordionContent\n    ? children.filter((element: React.ReactElement) => {\n        return element.type === Td // TODO: We may need to include this in future --> || component.type === Td.MainCell\n      }).length + 1 // +1 because we push the TableAccordionToggleButton\n    : null\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    content = content.filter((element) => {\n      const hasContent =\n        (element as React.ReactElement<TableTrProps>).type ===\n        TableAccordionContent\n      return !hasContent\n    })\n\n    const tdElem = <TableTdAccordionIcon key=\"td-icon\" />\n\n    if (tableContext.allProps.accordionChevronPlacement === 'end') {\n      content.push(tdElem)\n    } else {\n      content.unshift(tdElem)\n    }\n  } else if (tableContext?.allProps?.accordion) {\n    const isTh = content.some((element) => {\n      return (element as React.ReactElement<TableTrProps>).type === Th\n    })\n\n    if (isTh) {\n      const thElem = <TableThAccordionIcon key=\"th-icon\" />\n\n      if (tableContext.allProps.accordionChevronPlacement === 'end') {\n        content.push(thElem)\n      } else {\n        content.unshift(thElem)\n      }\n    }\n  }\n\n  return (\n    <TrContext.Provider\n      value={{\n        toggleOpenTr,\n        trIsOpen,\n        noAnimation,\n        countTds,\n        hasAccordionContent,\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        {content}\n      </tr>\n      {accordionContent}\n    </TrContext.Provider>\n  )\n\n  function onKeydownHandler(event: KeyboardEvent) {\n    switch (keycode(event)) {\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(event: MouseEvent) {\n    const target = event.target as HTMLElement\n    if (\n      /**\n       * Interactive elements to set activeElement on mouseDown,\n       * 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      /**\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 trContext = React.useContext(TrContext)\n  const allProps = React.useContext(TableContext)?.allProps\n  const iconSize =\n    allProps.size === 'medium' || allProps.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={allProps?.accordionToggleButtonSR}\n        aria-expanded={Boolean(trContext?.trIsOpen)}\n        on_click={trContext?.toggleOpenTr}\n      />\n    </span>\n  )\n}\n\nfunction TableThAccordionIcon() {\n  const tableContext = React.useContext(TableContext)\n  return (\n    <Th aria-hidden className=\"dnb-table__th__accordion-icon\">\n      <div>{tableContext?.allProps?.accordionToggleButtonSR}</div>\n    </Th>\n  )\n}\n\nfunction TableTdAccordionIcon() {\n  return (\n    <Td className=\"dnb-table__td__accordion-icon\">\n      <TableAccordionToggleButton />\n    </Td>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"TableAccordion.js","names":["React","classnames","Button","IconPrimary","Th","Td","TableContext","keycode","hasSelectedText","TableAccordionContent","TrContext","useTableAccordion","_ref","_tableContext$allProp","_tableContext$allProp2","children","className","props","expanded","disabled","noAnimation","onClick","onOpened","onClosed","tableContext","useContext","trIsOpen","setOpen","useState","location","id","hash","trIsHover","setHover","trHadClick","setHadClick","content","Children","toArray","allProps","accordion","accordionContent","find","element","type","hasAccordionContent","isValidElement","countTds","filter","length","trParams","toggleOpenTr","onMouseEnter","onMouseEnterHandler","onMouseLeave","onMouseLeaveHandler","onKeyDown","onKeydownHandler","hasContent","tdElem","_TableTdAccordionIcon","createElement","TableTdAccordionIcon","key","accordionChevronPlacement","push","unshift","isTh","some","thElem","_TableThAccordionIcon","TableThAccordionIcon","Provider","value","_extends","tabIndex","undefined","event","target","document","activeElement","tagName","preventDefault","allowInteractiveElement","arguments","TableAccordionToggleButton","_React$useContext","trContext","iconSize","size","icon","accordionToggleButtonSR","Boolean","on_click","_tableContext$allProp3","_Td"],"sources":["../../../../src/components/table/TableAccordion.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Button from '../button/Button'\nimport IconPrimary from '../icon/IconPrimary'\nimport Th from './TableTh'\nimport Td from './TableTd'\nimport TableContext from './TableContext'\nimport keycode from 'keycode'\nimport { hasSelectedText } from '../../shared/helpers'\nimport { TableTrProps } from './TableTr'\n\nimport TableAccordionContent, { TrContext } from './TableAccordionContent'\nimport type { TableAccordionContentProps } from './TableAccordionContent'\n\nexport function useTableAccordion({\n  children,\n  className,\n  props,\n  expanded,\n  disabled,\n  noAnimation,\n  onClick,\n  onOpened,\n  onClosed,\n}) {\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 content = React.Children.toArray(children)\n\n  if (!tableContext?.allProps?.accordion) {\n    return null\n  }\n\n  /**\n   * Handle Accordion Content\n   */\n  const accordionContent = content.find((element: React.ReactElement) => {\n    return element.type === TableAccordionContent\n  }) as React.ReactElement<TableAccordionContentProps>\n  const hasAccordionContent = React.isValidElement(accordionContent)\n  const countTds = hasAccordionContent\n    ? children.filter((element: React.ReactElement) => {\n        return element.type === Td // TODO: We may need to include this in future --> || component.type === Td.MainCell\n      }).length + 1 // +1 because we push the TableAccordionToggleButton\n    : null\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    content = content.filter((element) => {\n      const hasContent =\n        (element as React.ReactElement<TableTrProps>).type ===\n        TableAccordionContent\n      return !hasContent\n    })\n\n    const tdElem = <TableTdAccordionIcon key=\"td-icon\" />\n\n    if (tableContext.allProps.accordionChevronPlacement === 'end') {\n      content.push(tdElem)\n    } else {\n      content.unshift(tdElem)\n    }\n  } else if (tableContext?.allProps?.accordion) {\n    const isTh = content.some((element) => {\n      return (element as React.ReactElement<TableTrProps>).type === Th\n    })\n\n    if (isTh) {\n      const thElem = <TableThAccordionIcon key=\"th-icon\" />\n\n      if (tableContext.allProps.accordionChevronPlacement === 'end') {\n        content.push(thElem)\n      } else {\n        content.unshift(thElem)\n      }\n    }\n  }\n\n  return (\n    <TrContext.Provider\n      value={{\n        toggleOpenTr,\n        trIsOpen,\n        noAnimation,\n        countTds,\n        hasAccordionContent,\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        {content}\n      </tr>\n      {accordionContent}\n    </TrContext.Provider>\n  )\n\n  function onKeydownHandler(event: KeyboardEvent) {\n    switch (keycode(event)) {\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: MouseEvent,\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 trContext = React.useContext(TrContext)\n  const allProps = React.useContext(TableContext)?.allProps\n  const iconSize =\n    allProps.size === 'medium' || allProps.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={allProps?.accordionToggleButtonSR}\n        aria-expanded={Boolean(trContext?.trIsOpen)}\n        on_click={(event) => trContext?.toggleOpenTr(event, true)}\n      />\n    </span>\n  )\n}\n\nfunction TableThAccordionIcon() {\n  const tableContext = React.useContext(TableContext)\n  return (\n    <Th aria-hidden className=\"dnb-table__th__accordion-icon\">\n      <div>{tableContext?.allProps?.accordionToggleButtonSR}</div>\n    </Th>\n  )\n}\n\nfunction TableTdAccordionIcon() {\n  return (\n    <Td className=\"dnb-table__td__accordion-icon\">\n      <TableAccordionToggleButton />\n    </Td>\n  )\n}\n"],"mappings":"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"}

package/components/table/TableAccordionContent.js

@@ -76,17 +76,17 @@ export default function TableAccordionContent(componentProps) {
     hidden: isInDOM ? undefined : true,
     role: isInDOM ? 'row' : undefined,
     style: _objectSpread(_objectSpread({}, firstPaintStyle), style),
-    className: classnames('dnb-table__tr__accordion_content', className, isInDOM && "dnb-table__tr dnb-table__tr__accordion_content--expanded", isAnimating && 'dnb-table__tr__accordion_content--animating', isVisibleParallax && 'dnb-table__tr__accordion_content--parallax'),
+    className: classnames('dnb-table__tr__accordion-content', className, isInDOM && "dnb-table__tr dnb-table__tr__accordion-content--expanded", isAnimating && 'dnb-table__tr__accordion-content--animating', isVisibleParallax && 'dnb-table__tr__accordion-content--parallax'),
     ref: trRef
   }, props), React.createElement("td", {
     role: isInDOM ? 'cell' : undefined,
     colSpan: countTds,
     className: "dnb-table__td"
   }, isInDOM && React.createElement("div", {
-    className: "dnb-table__tr__accordion_content__inner",
+    className: "dnb-table__tr__accordion-content__inner",
     ref: innerRef
   }, React.createElement("div", {
-    className: "dnb-table__tr__accordion_content__inner__spacing"
+    className: "dnb-table__tr__accordion-content__inner__spacing"
   }, children)), React.createElement("span", {
     className: "dnb-sr-only"
   }, React.createElement("span", {

package/components/table/TableAccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableAccordionContent.js","names":["React","useCallback","useEffect","classnames","useHeightAnimation","getClosestScrollViewElement","TableContext","TrContext","createContext","TableAccordionContent","componentProps","_React$useContext","expanded","noAnimation","className","children","colSpan","style","props","_objectWithoutProperties","_excluded","allProps","useContext","trContext","innerRef","useRef","trRef","ariaLive","setAriaLive","useState","open","Boolean","trIsOpen","scrollViewHandler","clip","arguments","length","undefined","scollView","current","HTMLElement","overflow","onOpen","state","onAnimationEnd","_trContext$onOpened","_trContext$onClosed","event","target","onOpened","call","onClosed","isInDOM","isAnimating","isVisibleParallax","firstPaintStyle","animate","countTds","createElement","_extends","hidden","role","_objectSpread","ref","accordionMoreContentSR"],"sources":["../../../../src/components/table/TableAccordionContent.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react'\nimport classnames from 'classnames'\nimport { useHeightAnimation } from '../height-animation/useHeightAnimation'\nimport { getClosestScrollViewElement } from '../../shared/component-helper'\nimport TableContext from './TableContext'\n\nexport const TrContext = React.createContext(null)\n\nexport type TableAccordionContentProps = {\n  /**\n   * Set to true to expanded the content on initial render\n   */\n  expanded?: boolean\n\n  /**\n   * Set to true to skip animation\n   * Default: false\n   */\n  noAnimation?: boolean\n\n  /**\n   * Overwrite the internal collected colSpan (add +1)\n   */\n  colSpan?: number\n}\n\nexport default function TableAccordionContent(\n  componentProps: TableAccordionContentProps &\n    React.TableHTMLAttributes<HTMLTableRowElement>\n) {\n  const {\n    expanded = null,\n    noAnimation = null,\n    className,\n    children,\n    colSpan = 100,\n    style,\n    ...props\n  } = componentProps\n\n  const allProps = React.useContext(TableContext)?.allProps\n  const trContext = React.useContext(TrContext)\n  const innerRef = React.useRef<HTMLDivElement>(null)\n  const trRef = React.useRef<HTMLTableRowElement>(null)\n  const [ariaLive, setAriaLive] = React.useState(null)\n\n  const open = Boolean(expanded || trContext?.trIsOpen)\n\n  const scrollViewHandler = useCallback(\n    (clip = open) => {\n      const scollView = getClosestScrollViewElement(\n        trRef.current\n      ) as HTMLElement\n      if (scollView instanceof HTMLElement) {\n        scollView.style.overflow = clip ? 'clip' : ''\n      }\n    },\n    [open]\n  )\n\n  useEffect(() => {\n    if (open) {\n      scrollViewHandler()\n    }\n  }, [open, scrollViewHandler])\n\n  const onOpen = useCallback((state) => {\n    setAriaLive(state ? true : null)\n  }, [])\n\n  const onAnimationEnd = useCallback(\n    (state) => {\n      const event = { target: trRef.current }\n      switch (state) {\n        case 'opened':\n          trContext.onOpened?.(event)\n          break\n\n        case 'closed':\n          trContext.onClosed?.(event)\n          break\n      }\n\n      scrollViewHandler(false)\n    },\n    [scrollViewHandler, trContext]\n  )\n\n  const { isInDOM, isAnimating, isVisibleParallax, firstPaintStyle } =\n    useHeightAnimation(innerRef, {\n      open,\n      animate: Boolean(!noAnimation && !trContext?.noAnimation),\n      onOpen,\n      onAnimationEnd,\n    })\n\n  const countTds = trContext?.countTds || colSpan\n\n  return (\n    <tr\n      /**\n       * VoiceOver needs the \"tr\" to be in the DOM in order to be able to continue reading downwards,\n       * even it is either closed or opened. Else VO pretends that this current table row is the end of the table.\n       *\n       * + All the browsers do count the correct number (childCount) of rows + NVDA counts correct when used with Chrome.\n       * - Firefox on Windows does it as well, but not when used with NVDA.\n       */\n      aria-hidden={!isInDOM} // NVDA and VoiceOver needs \"aria-hidden\" to remove it from the accessibility tree\n      hidden={isInDOM ? undefined : true} // NVDA and VoiceOver needs \"hidden\" to be true in order to not count invisible table rows (based on \"tr\" element)\n      role={isInDOM ? 'row' : undefined} // NVDA and VoiceOver needs \"hidden\" to be true in order to not count invisible table rows (based on \"role\" element)\n      style={{ ...firstPaintStyle, ...style }}\n      className={classnames(\n        isInDOM && 'dnb-table__tr',\n        'dnb-table__tr__accordion_content',\n        isInDOM && 'dnb-table__tr__accordion_content--expanded',\n        isAnimating && 'dnb-table__tr__accordion_content--animating',\n        isVisibleParallax && 'dnb-table__tr__accordion_content--parallax',\n        className\n      )}\n      ref={trRef}\n      {...props}\n    >\n      <td\n        role={isInDOM ? 'cell' : undefined} // remove the \"role\", because the parent role is removed as well\n        colSpan={countTds}\n        className=\"dnb-table__td\"\n      >\n        {isInDOM && (\n          <div\n            className=\"dnb-table__tr__accordion_content__inner\"\n            ref={innerRef}\n          >\n            <div className=\"dnb-table__tr__accordion_content__inner__spacing\">\n              {children}\n            </div>\n          </div>\n        )}\n        <span className=\"dnb-sr-only\">\n          <span aria-live=\"assertive\">\n            {isInDOM && ariaLive ? allProps?.accordionMoreContentSR : null}\n          </span>\n        </span>\n      </td>\n    </tr>\n  )\n}\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,QAAQ,OAAO;AACrD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,kBAAkB,QAAQ,wCAAwC;AAC3E,SAASC,2BAA2B,QAAQ,+BAA+B;AAC3E,OAAOC,YAAY,MAAM,gBAAgB;AAEzC,OAAO,MAAMC,SAAS,GAAGP,KAAK,CAACQ,aAAa,CAAC,IAAI,CAAC;AAoBlD,eAAe,SAASC,qBAAqBA,CAC3CC,cACgD,EAChD;EAAA,IAAAC,iBAAA;EACA,MAAM;MACJC,QAAQ,GAAG,IAAI;MACfC,WAAW,GAAG,IAAI;MAClBC,SAAS;MACTC,QAAQ;MACRC,OAAO,GAAG,GAAG;MACbC;IAEF,CAAC,GAAGP,cAAc;IADbQ,KAAK,GAAAC,wBAAA,CACNT,cAAc,EAAAU,SAAA;EAElB,MAAMC,QAAQ,IAAAV,iBAAA,GAAGX,KAAK,CAACsB,UAAU,CAAChB,YAAY,CAAC,cAAAK,iBAAA,uBAA9BA,iBAAA,CAAgCU,QAAQ;EACzD,MAAME,SAAS,GAAGvB,KAAK,CAACsB,UAAU,CAACf,SAAS,CAAC;EAC7C,MAAMiB,QAAQ,GAAGxB,KAAK,CAACyB,MAAM,CAAiB,IAAI,CAAC;EACnD,MAAMC,KAAK,GAAG1B,KAAK,CAACyB,MAAM,CAAsB,IAAI,CAAC;EACrD,MAAM,CAACE,QAAQ,EAAEC,WAAW,CAAC,GAAG5B,KAAK,CAAC6B,QAAQ,CAAC,IAAI,CAAC;EAEpD,MAAMC,IAAI,GAAGC,OAAO,CAACnB,QAAQ,KAAIW,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAES,QAAQ,EAAC;EAErD,MAAMC,iBAAiB,GAAGhC,WAAW,CACnC,YAAiB;IAAA,IAAhBiC,IAAI,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGL,IAAI;IACV,MAAMQ,SAAS,GAAGjC,2BAA2B,CAC3CqB,KAAK,CAACa,OACR,CAAgB;IAChB,IAAID,SAAS,YAAYE,WAAW,EAAE;MACpCF,SAAS,CAACrB,KAAK,CAACwB,QAAQ,GAAGP,IAAI,GAAG,MAAM,GAAG,EAAE;IAC/C;EACF,CAAC,EACD,CAACJ,IAAI,CACP,CAAC;EAED5B,SAAS,CAAC,MAAM;IACd,IAAI4B,IAAI,EAAE;MACRG,iBAAiB,CAAC,CAAC;IACrB;EACF,CAAC,EAAE,CAACH,IAAI,EAAEG,iBAAiB,CAAC,CAAC;EAE7B,MAAMS,MAAM,GAAGzC,WAAW,CAAE0C,KAAK,IAAK;IACpCf,WAAW,CAACe,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,cAAc,GAAG3C,WAAW,CAC/B0C,KAAK,IAAK;IAAA,IAAAE,mBAAA,EAAAC,mBAAA;IACT,MAAMC,KAAK,GAAG;MAAEC,MAAM,EAAEtB,KAAK,CAACa;IAAQ,CAAC;IACvC,QAAQI,KAAK;MACX,KAAK,QAAQ;QACX,CAAAE,mBAAA,GAAAtB,SAAS,CAAC0B,QAAQ,cAAAJ,mBAAA,uBAAlBA,mBAAA,CAAAK,IAAA,CAAA3B,SAAS,EAAYwB,KAAK,CAAC;QAC3B;MAEF,KAAK,QAAQ;QACX,CAAAD,mBAAA,GAAAvB,SAAS,CAAC4B,QAAQ,cAAAL,mBAAA,uBAAlBA,mBAAA,CAAAI,IAAA,CAAA3B,SAAS,EAAYwB,KAAK,CAAC;QAC3B;IACJ;IAEAd,iBAAiB,CAAC,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,iBAAiB,EAAEV,SAAS,CAC/B,CAAC;EAED,MAAM;IAAE6B,OAAO;IAAEC,WAAW;IAAEC,iBAAiB;IAAEC;EAAgB,CAAC,GAChEnD,kBAAkB,CAACoB,QAAQ,EAAE;IAC3BM,IAAI;IACJ0B,OAAO,EAAEzB,OAAO,CAAC,CAAClB,WAAW,IAAI,EAACU,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEV,WAAW,EAAC;IACzD6B,MAAM;IACNE;EACF,CAAC,CAAC;EAEJ,MAAMa,QAAQ,GAAG,CAAAlC,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEkC,QAAQ,KAAIzC,OAAO;EAE/C,OACEhB,KAAA,CAAA0D,aAAA,OAAAC,QAAA;IAQE,eAAa,CAACP,OAAQ;IACtBQ,MAAM,EAAER,OAAO,GAAGf,SAAS,GAAG,IAAK;IACnCwB,IAAI,EAAET,OAAO,GAAG,KAAK,GAAGf,SAAU;IAClCpB,KAAK,EAAA6C,aAAA,CAAAA,aAAA,KAAOP,eAAe,GAAKtC,KAAK,CAAG;IACxCH,SAAS,EAAEX,UAAU,CAEnB,kCAAkC,EAIlCW,SAAS,EALTsC,OAAO,gEAGPC,WAAW,IAAI,6CAA6C,EAC5DC,iBAAiB,IAAI,4CAEvB,CAAE;IACFS,GAAG,EAAErC;EAAM,GACPR,KAAK,GAETlB,KAAA,CAAA0D,aAAA;IACEG,IAAI,EAAET,OAAO,GAAG,MAAM,GAAGf,SAAU;IACnCrB,OAAO,EAAEyC,QAAS;IAClB3C,SAAS,EAAC;EAAe,GAExBsC,OAAO,IACNpD,KAAA,CAAA0D,aAAA;IACE5C,SAAS,EAAC,yCAAyC;IACnDiD,GAAG,EAAEvC;EAAS,GAEdxB,KAAA,CAAA0D,aAAA;IAAK5C,SAAS,EAAC;EAAkD,GAC9DC,QACE,CACF,CACN,EACDf,KAAA,CAAA0D,aAAA;IAAM5C,SAAS,EAAC;EAAa,GAC3Bd,KAAA,CAAA0D,aAAA;IAAM,aAAU;EAAW,GACxBN,OAAO,IAAIzB,QAAQ,GAAGN,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAE2C,sBAAsB,GAAG,IACtD,CACF,CACJ,CACF,CAAC;AAET"}
+{"version":3,"file":"TableAccordionContent.js","names":["React","useCallback","useEffect","classnames","useHeightAnimation","getClosestScrollViewElement","TableContext","TrContext","createContext","TableAccordionContent","componentProps","_React$useContext","expanded","noAnimation","className","children","colSpan","style","props","_objectWithoutProperties","_excluded","allProps","useContext","trContext","innerRef","useRef","trRef","ariaLive","setAriaLive","useState","open","Boolean","trIsOpen","scrollViewHandler","clip","arguments","length","undefined","scollView","current","HTMLElement","overflow","onOpen","state","onAnimationEnd","_trContext$onOpened","_trContext$onClosed","event","target","onOpened","call","onClosed","isInDOM","isAnimating","isVisibleParallax","firstPaintStyle","animate","countTds","createElement","_extends","hidden","role","_objectSpread","ref","accordionMoreContentSR"],"sources":["../../../../src/components/table/TableAccordionContent.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react'\nimport classnames from 'classnames'\nimport { useHeightAnimation } from '../height-animation/useHeightAnimation'\nimport { getClosestScrollViewElement } from '../../shared/component-helper'\nimport TableContext from './TableContext'\n\nexport const TrContext = React.createContext(null)\n\nexport type TableAccordionContentProps = {\n  /**\n   * Set to true to expanded the content on initial render\n   */\n  expanded?: boolean\n\n  /**\n   * Set to true to skip animation\n   * Default: false\n   */\n  noAnimation?: boolean\n\n  /**\n   * Overwrite the internal collected colSpan (add +1)\n   */\n  colSpan?: number\n}\n\nexport default function TableAccordionContent(\n  componentProps: TableAccordionContentProps &\n    React.TableHTMLAttributes<HTMLTableRowElement>\n) {\n  const {\n    expanded = null,\n    noAnimation = null,\n    className,\n    children,\n    colSpan = 100,\n    style,\n    ...props\n  } = componentProps\n\n  const allProps = React.useContext(TableContext)?.allProps\n  const trContext = React.useContext(TrContext)\n  const innerRef = React.useRef<HTMLDivElement>(null)\n  const trRef = React.useRef<HTMLTableRowElement>(null)\n  const [ariaLive, setAriaLive] = React.useState(null)\n\n  const open = Boolean(expanded || trContext?.trIsOpen)\n\n  const scrollViewHandler = useCallback(\n    (clip = open) => {\n      const scollView = getClosestScrollViewElement(\n        trRef.current\n      ) as HTMLElement\n      if (scollView instanceof HTMLElement) {\n        scollView.style.overflow = clip ? 'clip' : ''\n      }\n    },\n    [open]\n  )\n\n  useEffect(() => {\n    if (open) {\n      scrollViewHandler()\n    }\n  }, [open, scrollViewHandler])\n\n  const onOpen = useCallback((state) => {\n    setAriaLive(state ? true : null)\n  }, [])\n\n  const onAnimationEnd = useCallback(\n    (state) => {\n      const event = { target: trRef.current }\n      switch (state) {\n        case 'opened':\n          trContext.onOpened?.(event)\n          break\n\n        case 'closed':\n          trContext.onClosed?.(event)\n          break\n      }\n\n      scrollViewHandler(false)\n    },\n    [scrollViewHandler, trContext]\n  )\n\n  const { isInDOM, isAnimating, isVisibleParallax, firstPaintStyle } =\n    useHeightAnimation(innerRef, {\n      open,\n      animate: Boolean(!noAnimation && !trContext?.noAnimation),\n      onOpen,\n      onAnimationEnd,\n    })\n\n  const countTds = trContext?.countTds || colSpan\n\n  return (\n    <tr\n      /**\n       * VoiceOver needs the \"tr\" to be in the DOM in order to be able to continue reading downwards,\n       * even it is either closed or opened. Else VO pretends that this current table row is the end of the table.\n       *\n       * + All the browsers do count the correct number (childCount) of rows + NVDA counts correct when used with Chrome.\n       * - Firefox on Windows does it as well, but not when used with NVDA.\n       */\n      aria-hidden={!isInDOM} // NVDA and VoiceOver needs \"aria-hidden\" to remove it from the accessibility tree\n      hidden={isInDOM ? undefined : true} // NVDA and VoiceOver needs \"hidden\" to be true in order to not count invisible table rows (based on \"tr\" element)\n      role={isInDOM ? 'row' : undefined} // NVDA and VoiceOver needs \"hidden\" to be true in order to not count invisible table rows (based on \"role\" element)\n      style={{ ...firstPaintStyle, ...style }}\n      className={classnames(\n        isInDOM && 'dnb-table__tr',\n        'dnb-table__tr__accordion-content',\n        isInDOM && 'dnb-table__tr__accordion-content--expanded',\n        isAnimating && 'dnb-table__tr__accordion-content--animating',\n        isVisibleParallax && 'dnb-table__tr__accordion-content--parallax',\n        className\n      )}\n      ref={trRef}\n      {...props}\n    >\n      <td\n        role={isInDOM ? 'cell' : undefined} // remove the \"role\", because the parent role is removed as well\n        colSpan={countTds}\n        className=\"dnb-table__td\"\n      >\n        {isInDOM && (\n          <div\n            className=\"dnb-table__tr__accordion-content__inner\"\n            ref={innerRef}\n          >\n            <div className=\"dnb-table__tr__accordion-content__inner__spacing\">\n              {children}\n            </div>\n          </div>\n        )}\n        <span className=\"dnb-sr-only\">\n          <span aria-live=\"assertive\">\n            {isInDOM && ariaLive ? allProps?.accordionMoreContentSR : null}\n          </span>\n        </span>\n      </td>\n    </tr>\n  )\n}\n"],"mappings":"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"}

package/components/table/style/dnb-table.css

@@ -9,6 +9,16 @@
 * Button mixins
 *
 */
+.dnb-table,
+.dnb-table__container {
+  --table-border-width: 0.0625rem;
+  --table-border: var(--table-border-width) solid var(--table-border-color);
+  --table-outline-width: 0.0625rem;
+  --table-outline: var(--table-outline-width) solid
+    var(--table-outline-color);
+  --table-outline-radius: 0.5rem;
+}
+
 .dnb-table {
   display: table;
   table-layout: auto;
@@ -26,16 +36,39 @@
   white-space: nowrap;
 }
 .dnb-table > caption {
+  position: relative;
   caption-side: bottom;
   padding: 0.5rem 0 0.5rem 1rem;
   font-size: var(--font-size-basis);
   background-color: var(--color-white);
   text-align: left;
 }
-.dnb-table--border > caption:not(.dnb-sr-only) {
+.dnb-table > caption::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: -0.0625rem;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  top: calc(var(--table-border-width) * -1);
+  right: 0;
+  border-top: var(--table-border);
+}
+.dnb-table > caption:last-child::after {
+  right: 0;
+}
+.dnb-table--outline {
   position: relative;
+  -webkit-clip-path: inset(0 0 -10rem 0 round var(--table-outline-radius) var(--table-outline-radius) 0 0);
+          clip-path: inset(0 0 -10rem 0 round var(--table-outline-radius) var(--table-outline-radius) 0 0);
+  z-index: 1;
+}
+.dnb-table--outline, .dnb-table--outline::after {
+  border-radius: var(--table-outline-radius);
 }
-.dnb-table--border > caption:not(.dnb-sr-only)::after {
+.dnb-table--outline::after {
   content: "";
   position: absolute;
   top: 0;
@@ -44,8 +77,28 @@
   bottom: 0;
   z-index: 1;
   pointer-events: none;
-  top: -0.0625rem;
-  border-top: var(--border);
+  z-index: 3;
+  border: var(--table-outline);
+}
+.dnb-table--outline > caption, .dnb-table--outline > caption::after {
+  border-radius: 0 0 var(--table-outline-radius) var(--table-outline-radius);
+}
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) {
+  -webkit-clip-path: none;
+          clip-path: none;
+}
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th, .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::before, .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::after,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::before,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::after,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__th,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__th::before,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__th::after,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__td,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__td::before,
+.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--has-accordion-content:nth-last-child(2) .dnb-table__td::after {
+  border-radius: 0;
 }
 .dnb-table.dnb-skeleton > * {
   -webkit-text-fill-color: var(--skeleton-color);
@@ -246,17 +299,6 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   display: flex;
   align-items: flex-end;
 }
-.dnb-table--border tbody .dnb-table__th::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  pointer-events: none;
-  border-top: var(--border);
-}
 
 /*
 * Table component
@@ -270,60 +312,103 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   /* stylelint-disable */
   /* stylelint-enable */
 }
-.dnb-table--border tbody .dnb-table__td::after {
+.dnb-table--border tbody .dnb-table__td::after,
+.dnb-table--border tbody .dnb-table__th::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
-  right: 0;
+  right: -0.0625rem;
   bottom: 0;
   z-index: 1;
   pointer-events: none;
-  border: var(--border);
-  border-right: none;
+  border: var(--table-border);
   border-bottom: none;
 }
-.dnb-table--outline {
-  position: relative;
-}
-.dnb-table--outline, .dnb-table--outline::after {
-  border-radius: 0.5rem;
-}
-.dnb-table--outline::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
+.dnb-table--border tbody .dnb-table__td:last-child::after,
+.dnb-table--border tbody .dnb-table__th:last-child::after {
   right: 0;
-  bottom: 0;
-  z-index: 1;
-  pointer-events: none;
-  z-index: 3;
-  border: var(--outline);
 }
-.dnb-table--outline tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after {
+.dnb-table--border tbody .dnb-table__td:first-child::after,
+.dnb-table--border tbody .dnb-table__th:first-child::after {
   border-left: none;
 }
-.dnb-table--border tbody .dnb-table__tr .dnb-table__th ~ .dnb-table__td:first-of-type:first-of-type::after {
-  border-left: var(--border);
-}
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::after {
-  border-radius: 0;
-}
-.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th::after, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th::after {
-  border-top: var(--outline);
-}
-.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-of-type, .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-of-type::after, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-of-type, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-of-type::after {
-  border-radius: 0.5rem 0 0 0;
-}
-.dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td::after {
-  border-top: var(--outline);
+.dnb-table--border tbody .dnb-table__td:last-child::after,
+.dnb-table--border tbody .dnb-table__th:last-child::after {
+  border-right: none;
 }
-.dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-of-type, .dnb-table--outline > tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-of-type::after, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-of-type, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-of-type::after {
-  border-radius: 0 0.5rem 0 0;
+.dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__td::after,
+.dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__th::after {
+  border-top: none;
 }
-.dnb-table:not(.dnb-table--outline).dnb-table--border > tbody:first-child .dnb-table__td:last-of-type::after, .dnb-table:not(.dnb-table--outline).dnb-table--border > :not(thead) + tbody .dnb-table__td:last-of-type::after {
-  border-right: var(--border);
+.dnb-table--border thead + tbody .dnb-table__tr:first-child .dnb-table__td::after,
+.dnb-table--border thead + tbody .dnb-table__tr:first-child .dnb-table__th::after {
+  border-top: var(--table-border);
+}
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child, .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child::before, .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child::after,
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child,
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child::before,
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child::after,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child::before,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child::after,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child::before,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child::after,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child::before,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child::after,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child::before,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child::after {
+  border-top-left-radius: var(--table-outline-radius);
+}
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child, .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child::before, .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child::after,
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child,
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child::before,
+.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child::after,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child::before,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child::after,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child::before,
+.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child::after,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child::before,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child::after,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child::before,
+.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child::after {
+  border-top-right-radius: var(--table-outline-radius);
+}
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) {
+  -webkit-clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
+          clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
+}
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::before, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:first-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:first-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:first-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-child::after {
+  border-bottom-left-radius: var(--table-outline-radius);
+}
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::before, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:last-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__th:last-child::after,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-child,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-child::before,
+.dnb-table--outline tbody:last-child .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-child::after {
+  border-bottom-right-radius: var(--table-outline-radius);
 }
 .dnb-table__td--no-spacing,
 .dnb-table td.dnb-table__td--no-spacing {
@@ -349,14 +434,6 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 .dnb-table > tbody > tr:not(.dnb-table__tr--even):nth-of-type(2n), .dnb-table .dnb-table__tr:not(.dnb-table__tr--even):nth-of-type(2n), .dnb-table .dnb-table__tr--odd {
   background-color: var(--color-white);
 }
-.dnb-table--outline thead .dnb-table__tr:first-of-type, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) {
-  -webkit-clip-path: inset(0 0 -1rem 0 round 0.5rem 0.5rem 0 0);
-          clip-path: inset(0 0 -1rem 0 round 0.5rem 0.5rem 0 0);
-}
-.dnb-table--outline tbody .dnb-table__tr:last-of-type, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) {
-  -webkit-clip-path: inset(0 round 0 0 0.5rem 0.5rem);
-          clip-path: inset(0 round 0 0 0.5rem 0.5rem);
-}
 
 /*
 * Table component
@@ -409,10 +486,10 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   z-index: 1;
   pointer-events: none;
   z-index: 3;
-  border: var(--outline);
+  border: var(--table-outline);
 }
 .dnb-table__container, .dnb-table__container::after {
-  border-radius: 0.5rem;
+  border-radius: var(--table-outline-radius);
 }
 .dnb-table__container, .dnb-table__container__body, .dnb-table__container__head, .dnb-table__container__foot {
   display: flex;
@@ -438,7 +515,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   bottom: 0;
   z-index: 1;
   pointer-events: none;
-  border-bottom: var(--border);
+  border-bottom: var(--table-border);
 }
 .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th::after,
 .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after, .dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th::after,
@@ -464,12 +541,12 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
   min-height: 1rem;
 }
 .dnb-table__container .dnb-table__scroll-view {
-  -webkit-clip-path: inset(0 round 0 0 0.5rem 0.5rem);
-          clip-path: inset(0 round 0 0 0.5rem 0.5rem);
+  -webkit-clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
+          clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
 }
 @supports (-webkit-appearance: none) and (not (-moz-appearance: meterbar)) {
   .dnb-table__container::after {
-    bottom: calc(var(--outline-width) * -1);
+    bottom: calc(var(--table-outline-width) * -1);
   }
 }
 .dnb-modal__content .dnb-table__container .dnb-table__scroll-view {
@@ -481,10 +558,11 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 *
 */
 .dnb-table {
-  --accordion-background: var(--color-white);
-  --accordion-border-width: 0.0625rem;
-  --accordion-border: var(--accordion-border-width) solid
-    var(--color-black-20);
+  --table-accordion-background: var(--color-white);
+  --table-accordion-border-width: 0.0625rem;
+  --table-accordion-border-color: var(--color-black-20);
+  --table-accordion-border: var(--table-accordion-border-width) solid
+    var(--table-accordion-border-color);
 }
 .dnb-table__th.dnb-table__th__accordion-icon.dnb-table__th {
   padding: 0;
@@ -520,14 +598,13 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 .dnb-table__tr--has-accordion-content.dnb-table__tr--no-animation .dnb-table__toggle-button .dnb-icon, html[data-visual-test] .dnb-table__tr--has-accordion-content .dnb-table__toggle-button .dnb-icon {
   transition: none !important;
 }
-.dnb-table__tr--has-accordion-content, .dnb-table__tr__accordion_content {
+.dnb-table__tr--has-accordion-content, .dnb-table__tr__accordion-content {
   position: relative;
-  z-index: 2;
 }
-.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded, .dnb-table__tr__accordion_content {
+.dnb-table__tr--has-accordion-content.dnb-table__tr--expanded, .dnb-table__tr__accordion-content {
   z-index: 3;
 }
-.dnb-table__tr--has-accordion-content:hover, .dnb-table__tr--has-accordion-content:active, html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content:focus {
+.dnb-table__tr--has-accordion-content:active, html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content:focus, .dnb-table__tr--has-accordion-content:hover:not(.dnb-table__tr--hover.dnb-table__tr--expanded) {
   z-index: 5;
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded .dnb-table__toggle-button .dnb-icon {
@@ -535,9 +612,8 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 }
 .dnb-table--border .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded td::after {
   border-bottom: none;
-}
-.dnb-table--border .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded td:not(:first-of-type)::after {
   border-left: none;
+  border-right: none;
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled) {
   outline: none;
@@ -566,7 +642,7 @@ html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-tabl
   color: var(--color-emerald-green);
 }
 .dnb-table--outline tbody .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):not(:nth-last-child(2)) .dnb-table__td::before {
-  bottom: -0.0625rem;
+  bottom: calc(var(--table-outline-width) * -1);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):hover .dnb-table__td {
   background-color: var(--color-white);
@@ -585,7 +661,7 @@ html[data-whatinput=keyboard] .dnb-table__tr--has-accordion-content.dnb-table__t
 html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active:hover td::before,
 .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active td::before {
   border-color: var(--color-emerald-green);
-  border-width: 0.0625rem;
+  border-width: var(--table-accordion-border-width);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td {
   background-color: var(--color-pistachio);
@@ -594,24 +670,24 @@ html:not([data-whatintent=touch]) .dnb-table__tr--has-accordion-content.dnb-tabl
   color: var(--color-emerald-green);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td {
-  background-color: var(--accordion-background);
+  background-color: var(--table-accordion-background);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td::before {
   border: none;
-  border-top: var(--accordion-border);
+  border-top: var(--table-accordion-border);
 }
 html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) {
-  background-color: var(--accordion-background);
+  background-color: var(--table-accordion-background);
 }
 html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) td::before {
   border: none;
-  border-top: var(--accordion-border);
+  border-top: var(--table-accordion-border);
 }
 .dnb-table__tr--has-accordion-content.dnb-table__tr--disabled .dnb-table__td__accordion-icon .dnb-icon {
   color: var(--color-sea-green-30);
 }
 @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-touch-callout: none)) {
-  .dnb-table__tr__accordion_content[hidden] {
+  .dnb-table__tr__accordion-content[hidden] {
     /**
     * By reverting the display from "none" to "block",
     * we trick VoiceOver to not make this row as the end of the table. We still need "hidden" to get the correct number of rows (childCount).
@@ -619,61 +695,61 @@ html:not([data-whatinput=keyboard]) .dnb-table__tr--has-accordion-content.dnb-ta
     display: block;
   }
 }
-.dnb-table__tr__accordion_content td {
+.dnb-table__tr__accordion-content td {
   padding: 0 !important;
   width: calc(100% - 3.5rem);
 }
-.dnb-table__size--medium .dnb-table__tr__accordion_content td {
+.dnb-table__size--medium .dnb-table__tr__accordion-content td {
   width: calc(100% - 3rem);
 }
-.dnb-table__size--small .dnb-table__tr__accordion_content td {
+.dnb-table__size--small .dnb-table__tr__accordion-content td {
   width: calc(100% - 2.5rem);
 }
-.dnb-table__tr__accordion_content td::before {
+.dnb-table__tr__accordion-content td::before {
   content: "";
   position: absolute;
   top: auto;
   left: 0;
   right: 0;
-  bottom: calc(var(--accordion-border-width) * -1);
+  bottom: calc(var(--table-accordion-border-width) * -1);
   pointer-events: none;
-  border-bottom: var(--accordion-border);
+  border-bottom: var(--table-accordion-border);
 }
-.dnb-table--outline .dnb-table__tr__accordion_content:last-of-type td::before {
+.dnb-table--outline .dnb-table__tr__accordion-content:last-of-type td::before {
   border-bottom: none;
 }
-.dnb-table--border .dnb-table__tr__accordion_content td::after {
+.dnb-table--border .dnb-table__tr__accordion-content td::after {
   border-top: none;
 }
-.dnb-table__tr__accordion_content__inner {
+.dnb-table__tr__accordion-content__inner {
   overflow: hidden;
   will-change: height;
   transition: height 400ms var(--easing-default);
   position: relative;
 }
-.dnb-table__tr__accordion_content__inner__spacing {
+.dnb-table__tr__accordion-content__inner__spacing {
   padding: 1rem;
   transform: translateY(-10px);
   transition: transform 500ms var(--easing-default);
 }
-.dnb-table__tr__accordion_content--parallax .dnb-table__tr__accordion_content__inner__spacing {
+.dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
   transform: translateY(0);
 }
-html[data-visual-test] .dnb-table__tr__accordion_content--parallax .dnb-table__tr__accordion_content__inner__spacing {
+html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
   transition: none;
 }
-.dnb-table__tr__accordion_content > td.dnb-table__td {
+.dnb-table__tr__accordion-content > td.dnb-table__td {
   padding: 0;
 }
-.dnb-table__tr__accordion_content > td.dnb-table__td .dnb-dl,
-.dnb-table__tr__accordion_content > td.dnb-table__td .dnb-dl dt {
+.dnb-table__tr__accordion-content > td.dnb-table__td .dnb-dl,
+.dnb-table__tr__accordion-content > td.dnb-table__td .dnb-dl dt {
   margin: 0;
 }
-.dnb-table__tr__accordion_content--expanded > td.dnb-table__td {
+.dnb-table__tr__accordion-content--expanded > td.dnb-table__td {
   background-color: var(--color-white);
 }
-.dnb-table__tr__accordion_content.dnb-table__tr .dnb-table__td {
-  background-color: var(--accordion-background);
+.dnb-table__tr__accordion-content.dnb-table__tr .dnb-table__td {
+  background-color: var(--table-accordion-background);
   /**
     * Safari on iOS and macOS has problems on animating when vertical-align is baseline.
     * What happens is that the td is not 0, even the content inside is 0. With vertical top, we omit that.
@@ -681,15 +757,6 @@ html[data-visual-test] .dnb-table__tr__accordion_content--parallax .dnb-table__t
     */
   vertical-align: top;
 }
-.dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::before, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:first-of-type::after {
-  border-radius: 0 0 0 0.5rem;
-}
-.dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__td:last-of-type::after, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::before, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr--has-accordion-content:not(.dnb-table__tr--expanded):nth-last-child(2) .dnb-table__td:last-of-type::after {
-  border-radius: 0 0 0.5rem 0;
-}
-.dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::before, .dnb-table--outline tbody .dnb-table__tr.dnb-table__tr__accordion_content:last-of-type .dnb-table__td::after {
-  border-radius: 0 0 0.5rem 0.5rem;
-}
 .dnb-table__tr--has-accordion-content:not(.dnb-table__tr--disabled) {
   cursor: pointer;
 }