@dnb/eufemia 10.37.0 → 10.39.0

package/components/radio/style/dnb-radio.scss

@@ -248,11 +248,16 @@
   }
 
   &-group {
-    --radio-group-margin-bottom: 0.5rem;
-    --radio-group-margin-right: 1rem;
+    --radio-group-row-gap: 0.5rem;
+    --radio-group-column-gap: 1rem;
 
     display: inline-flex;
-    // flex-direction: row;
+
+    &,
+    &__fieldset,
+    &__shell {
+      flex-grow: 1;
+    }
 
     fieldset {
       @include fieldsetReset();
@@ -271,8 +276,8 @@
     &__shell {
       display: flex;
       flex-wrap: wrap;
-      column-gap: var(--radio-group-margin-right);
-      row-gap: var(--radio-group-margin-bottom);
+      column-gap: var(--radio-group-column-gap);
+      row-gap: var(--radio-group-row-gap);
     }
 
     &__shell {
@@ -285,13 +290,6 @@
     &--column &__shell {
       flex-direction: column;
     }
-
-    // .dnb-flex-container {
-    //   &::before {
-    //     // move the group 2px up if label exists
-    //     font-size: var(--font-size-basis);
-    //   }
-    // }
   }
 
   /*
@@ -299,7 +297,7 @@
    */
 
   // stylelint-disable no-descending-specificity
-  // We prioritise categorisation and readability over specificity here */
+  // We prioritize categorisation and readability over specificity here */
 
   /** Normal state **/
 

package/components/section/Section.js

@@ -45,6 +45,9 @@ export function SectionParams(localProps) {
   }));
 }
 function getColor(value) {
+  if (value.includes('--')) {
+    return value;
+  }
   return value ? !/#|var/.test(value) ? `var(--color-${value})` : value : undefined;
 }
 function computeStyle(property, name, valueCallback) {

package/components/section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","extendPropsWithContext","Space","defaultProps","element","Section","localProps","createElement","SectionParams","context","useContext","props","variant","breakout","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","_objectWithoutProperties","_excluded","internalRef","useRef","elementRef","Object","freeze","_objectSpread","style","computeStyle","value","getColor","String","test","undefined","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define a custom drop-shadow.\n   */\n  dropShadow?: DropShadow | ResponsiveProp<DropShadow>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead\n   */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead\n   */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead\n   */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n  className: string\n  innerRef: React.RefObject<HTMLElement>\n  children: React.ReactNode\n  style: React.CSSProperties\n}\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n  localProps: SectionAllProps\n): SectionReturnParams {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    variant,\n    breakout = true,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    dropShadow,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n\n  return Object.freeze({\n    ...attributes,\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    style: {\n      ...computeStyle(\n        breakout,\n        'breakout',\n        (value) => `var(--breakout--${value ? 'on' : 'off'})`\n      ),\n      ...computeStyle(\n        roundedCorner,\n        'rounded-corner',\n        (value) => value && 'var(--rounded-corner--value)'\n      ),\n      ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n      ...computeStyle(backgroundColor, 'background-color', (value) =>\n        getColor(value)\n      ),\n      ...computeStyle(\n        dropShadow,\n        'drop-shadow',\n        (value) => value && 'var(--shadow-default)'\n      ),\n      ...computeStyle(outline, 'outline-color', (value) =>\n        String(value) === 'true'\n          ? 'var(--outline-color--value)'\n          : getColor(value)\n      ),\n      ...attributes?.style,\n    } as React.CSSProperties,\n    innerRef: elementRef,\n    children,\n  })\n}\n\nfunction getColor(value: string) {\n  return value\n    ? !/#|var/.test(value)\n      ? `var(--color-${value})`\n      : value\n    : undefined\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","extendPropsWithContext","Space","defaultProps","element","Section","localProps","createElement","SectionParams","context","useContext","props","variant","breakout","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","_objectWithoutProperties","_excluded","internalRef","useRef","elementRef","Object","freeze","_objectSpread","style","computeStyle","value","getColor","String","includes","test","undefined","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define a custom drop-shadow.\n   */\n  dropShadow?: DropShadow | ResponsiveProp<DropShadow>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead\n   */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead\n   */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead\n   */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n  className: string\n  innerRef: React.RefObject<HTMLElement>\n  children: React.ReactNode\n  style: React.CSSProperties\n}\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n  localProps: SectionAllProps\n): SectionReturnParams {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    variant,\n    breakout = true,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    dropShadow,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n\n  return Object.freeze({\n    ...attributes,\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    style: {\n      ...computeStyle(\n        breakout,\n        'breakout',\n        (value) => `var(--breakout--${value ? 'on' : 'off'})`\n      ),\n      ...computeStyle(\n        roundedCorner,\n        'rounded-corner',\n        (value) => value && 'var(--rounded-corner--value)'\n      ),\n      ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n      ...computeStyle(backgroundColor, 'background-color', (value) =>\n        getColor(value)\n      ),\n      ...computeStyle(\n        dropShadow,\n        'drop-shadow',\n        (value) => value && 'var(--shadow-default)'\n      ),\n      ...computeStyle(outline, 'outline-color', (value) =>\n        String(value) === 'true'\n          ? 'var(--outline-color--value)'\n          : getColor(value)\n      ),\n      ...attributes?.style,\n    } as React.CSSProperties,\n    innerRef: elementRef,\n    children,\n  })\n}\n\nfunction getColor(value: string) {\n  if (value.includes('--')) {\n    return value\n  }\n  return value\n    ? !/#|var/.test(value)\n      ? `var(--color-${value})`\n      : value\n    : undefined\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":";;;;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SACEC,MAAM,EACNC,sBAAsB,QACjB,+BAA+B;AAMtC,OAAOC,KAAK,MAAM,gBAAgB;AAmHlC,MAAMC,YAAY,GAAG;EACnBC,OAAO,EAAE;AACX,CAAC;AAED,eAAe,SAASC,OAAOA,CAACC,UAA2B,EAAE;EAC3D,OAAOT,KAAA,CAAAU,aAAA,CAACL,KAAK,EAAKM,aAAa,CAACF,UAAU,CAAI,CAAC;AACjD;AAEA,OAAO,SAASE,aAAaA,CAC3BF,UAA2B,EACN;EACrB,MAAMG,OAAO,GAAGZ,KAAK,CAACa,UAAU,CAACX,OAAO,CAAC;EAGzC,MAAMY,KAAK,GAAGV,sBAAsB,CAClCK,UAAU,EACVH,YAAY,EACZM,OAAO,CAACJ,OACV,CAAC;EAED,MAAM;MACJO,OAAO;MACPC,QAAQ,GAAG,IAAI;MACfC,aAAa;MACbC,SAAS;MACTC,eAAe;MACfC,UAAU;MACVC,OAAO;MACPC,QAAQ;MAERC,SAAS;MACTC,QAAQ;MAERC,OAAO;MACPC,UAAU;MACVC;IAGF,CAAC,GAAGb,KAAK;IADJc,UAAU,GAAAC,wBAAA,CACXf,KAAK,EAAAgB,SAAA;EAET,MAAMC,WAAW,GAAG/B,KAAK,CAACgC,MAAM,CAAc,CAAC;EAC/C,MAAMC,UAAU,GAAGX,QAAQ,IAAIK,SAAS,IAAII,WAAW;EAEvD,OAAOG,MAAM,CAACC,MAAM,CAAAC,aAAA,CAAAA,aAAA,KACfR,UAAU;IACbL,SAAS,EAAEtB,UAAU,6BAEHc,OAAO,GAAGA,OAAO,GAAGW,UAAU,IAAI,SAAU,IAG5DH,SAAS,EAFTE,OAAO,IACJ,wBAAuBtB,MAAM,CAACsB,OAAO,CAAC,GAAG,OAAO,GAAGA,OAAQ,EAEhE,CAAC;IACDY,KAAK,EAAAD,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACAE,YAAY,CACbtB,QAAQ,EACR,UAAU,EACTuB,KAAK,IAAM,mBAAkBA,KAAK,GAAG,IAAI,GAAG,KAAM,GACrD,CAAC,GACED,YAAY,CACbrB,aAAa,EACb,gBAAgB,EACfsB,KAAK,IAAKA,KAAK,IAAI,8BACtB,CAAC,GACED,YAAY,CAACpB,SAAS,EAAE,YAAY,EAAGqB,KAAK,IAAKC,QAAQ,CAACD,KAAK,CAAC,CAAC,GACjED,YAAY,CAACnB,eAAe,EAAE,kBAAkB,EAAGoB,KAAK,IACzDC,QAAQ,CAACD,KAAK,CAChB,CAAC,GACED,YAAY,CACblB,UAAU,EACV,aAAa,EACZmB,KAAK,IAAKA,KAAK,IAAI,uBACtB,CAAC,GACED,YAAY,CAACjB,OAAO,EAAE,eAAe,EAAGkB,KAAK,IAC9CE,MAAM,CAACF,KAAK,CAAC,KAAK,MAAM,GACpB,6BAA6B,GAC7BC,QAAQ,CAACD,KAAK,CACpB,CAAC,GACEX,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAES,KAAK,CACE;IACxBf,QAAQ,EAAEW,UAAU;IACpBT;EAAQ,EACT,CAAC;AACJ;AAEA,SAASgB,QAAQA,CAACD,KAAa,EAAE;EAC/B,IAAIA,KAAK,CAACG,QAAQ,CAAC,IAAI,CAAC,EAAE;IACxB,OAAOH,KAAK;EACd;EACA,OAAOA,KAAK,GACR,CAAC,OAAO,CAACI,IAAI,CAACJ,KAAK,CAAC,GACjB,eAAcA,KAAM,GAAE,GACvBA,KAAK,GACPK,SAAS;AACf;AAEA,SAASN,YAAYA,CACnBO,QAAoD,EACpDC,IAAY,EACZC,aAAoD,EACpD;EACA,IAAIC,KAAK,GAAGH,QAAmC;EAE/C,IAAIG,KAAK,KAAK,IAAI,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC/CA,KAAK,GAAG;MACNC,KAAK,EAAEJ,QAAQ;MACfK,MAAM,EAAEL,QAAQ;MAChBM,KAAK,EAAEN;IACT,CAA4B;EAC9B;EAEA,MAAMO,MAAM,GAAG,CAAC,CAAC;EAEjB,KAAK,MAAMC,IAAI,IAAIL,KAAK,EAA6B;IAAA,IAAAM,MAAA;IACnD,IAAI,SAAAA,MAAA,GAAON,KAAK,cAAAM,MAAA,uBAALA,MAAA,CAAQD,IAAI,CAAC,MAAK,WAAW,EAAE;MAAA,IAAAE,OAAA;MACxC,MAAMhB,KAAK,GAAGQ,aAAa,EAAAQ,OAAA,GAACP,KAAK,cAAAO,OAAA,uBAALA,OAAA,CAAQF,IAAI,CAAC,CAAC;MAC1C,IAAI,OAAOd,KAAK,KAAK,QAAQ,EAAE;QAC7Ba,MAAM,CAAE,KAAIN,IAAK,KAAIO,IAAK,EAAC,CAAC,GAAGd,KAAK;MACtC;IACF;EACF;EAEA,OAAOa,MAAM;AACf;AAEA5C,OAAO,CAACgD,KAAK,GAAG,SAAS;AACzBhD,OAAO,CAACiD,qBAAqB,GAAG,IAAI"}

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

@@ -31,6 +31,7 @@
     background-color: var(--background-color, white);
   }
 
+  // The outline border
   &::before {
     content: '';
     position: absolute;
@@ -41,6 +42,7 @@
     border-radius: var(--rounded-corner, 0);
   }
 
+  // The background color
   &::after {
     content: '';
     visibility: var(--breakout, hidden);

package/components/table/Table.d.ts

@@ -40,12 +40,15 @@ export type TableProps = {
      */
     outline?: boolean;
     /**
-     * Set to true if you have one or more rows that contains an accordion content.
-     * Default: false
+     * Defines how the Table should look. Use `accordion` for an accordion-like table. Use `navigation` for a navigation table.
+     */
+    mode?: 'accordion' | 'navigation';
+    /**
+     * @deprecated – use mode="accordion" instead. Will be removed in v11.
      */
     accordion?: boolean;
     /**
-     * Defines where the chevron will be placed.
+     * Defines where the chevron will be placed, should only be used together with mode="accordion".
      * Default: 'start'
      */
     accordionChevronPlacement?: 'start' | 'end';

package/components/table/Table.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset", "fixed", "border", "outline", "accordion", "accordionChevronPlacement", "collapseAllHandleRef"];
+const _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset", "fixed", "border", "outline", "accordion", "mode", "accordionChevronPlacement", "collapseAllHandleRef"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useEffect } from 'react';
@@ -39,6 +39,7 @@ const Table = componentProps => {
       border,
       outline,
       accordion,
+      mode,
       accordionChevronPlacement,
       collapseAllHandleRef
     } = allProps,
@@ -73,7 +74,10 @@ const Table = componentProps => {
       allProps: _objectSpread(_objectSpread({}, allProps), context.getTranslation(componentProps).Table)
     }
   }, React.createElement("table", _extends({
-    className: classnames('dnb-table', spacingClasses, skeletonClasses, className, variant && `dnb-table__variant--${variant}`, size && `dnb-table__size--${size}`, sticky && 'dnb-table--sticky', fixed && 'dnb-table--fixed', border && 'dnb-table--border', outline && 'dnb-table--outline', accordion && 'dnb-table--accordion'),
+    className: classnames('dnb-table', spacingClasses, skeletonClasses, className, variant && `dnb-table__variant--${variant}`, size && `dnb-table__size--${size}`, sticky && 'dnb-table--sticky', fixed && 'dnb-table--fixed', border && 'dnb-table--border', outline && 'dnb-table--outline', accordion && 'dnb-table--accordion', {
+      'accordion': 'dnb-table--accordion',
+      'navigation': 'dnb-table--navigation'
+    }[mode]),
     ref: elementRef
   }, props), children)));
 };

package/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":["React","useEffect","classnames","Context","Provider","createSpacingClasses","createSkeletonClass","extendPropsWithContext","validateDOMAttributes","ScrollView","TableContext","useStickyHeader","useHandleOddEven","defaultProps","size","variant","Table","componentProps","context","useContext","allProps","skeleton","className","children","sticky","stickyOffset","fixed","border","outline","accordion","accordionChevronPlacement","collapseAllHandleRef","props","_objectWithoutProperties","_excluded","elementRef","trCountRef","rerenderAlias","collapseTrCallbacks","useRef","current","forEach","callback","skeletonClasses","spacingClasses","createElement","Boolean","value","_objectSpread","getTranslation","_extends","ref","_supportsSpacingProps"],"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport Provider from '../../shared/Provider'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport {\n  extendPropsWithContext,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport ScrollView from './TableScrollView'\nimport { TableContext } from './TableContext'\nimport { useStickyHeader } from './TableStickyHeader'\n\nimport type { StickyTableHeaderProps } from './TableStickyHeader'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport type { LocaleProps, SpacingProps } from '../../shared/types'\nimport { useHandleOddEven } from './TableTr'\n\nexport type TableSizes = 'large' | 'medium' | 'small'\nexport type TableVariants = 'generic'\n\nexport { ScrollView }\n\nexport type TableProps = {\n  /**\n   * The content of the component.\n   */\n  children: React.ReactNode\n\n  /**\n   * Custom className on the component root\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The size of the component.\n   * Default: large.\n   */\n  size?: TableSizes\n\n  /**\n   * The style variant of the component. Currently not implemented.\n   * Default: generic.\n   */\n  variant?: TableVariants\n\n  /**\n   * Use `true` to show borders between table data cell\n   * Default: false\n   */\n  border?: boolean\n\n  /**\n   * Use `true` to show a outline border around the table\n   * Default: false\n   */\n  outline?: boolean\n\n  /**\n   * Set to true if you have one or more rows that contains an accordion content.\n   * Default: false\n   */\n  accordion?: boolean\n\n  /**\n   * Defines where the chevron will be placed.\n   * Default: 'start'\n   */\n  accordionChevronPlacement?: 'start' | 'end'\n\n  /**\n   * Defines if the table should behave with a fixed table layout, using: \"table-layout: fixed;\"\n   * Default: null.\n   */\n  fixed?: boolean\n\n  /**\n   * ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows.\n   *\n   * Default: `undefined`\n   */\n  collapseAllHandleRef?: React.MutableRefObject<() => void>\n} & StickyTableHeaderProps\n\nexport type TableAllProps = TableProps &\n  Omit<React.TableHTMLAttributes<HTMLTableElement>, 'border'> &\n  LocaleProps &\n  SpacingProps\n\nexport const defaultProps = {\n  size: 'large',\n  variant: 'generic',\n}\n\nconst Table = (componentProps: TableAllProps) => {\n  const context = React.useContext(Context)\n\n  const allProps = extendPropsWithContext(\n    componentProps,\n    defaultProps,\n    context?.Table,\n    {\n      skeleton: context?.skeleton,\n    }\n  )\n\n  const {\n    className,\n    children,\n    size,\n    skeleton,\n    variant,\n    sticky,\n    stickyOffset, // eslint-disable-line\n    fixed,\n    border,\n    outline,\n    accordion,\n    accordionChevronPlacement, // eslint-disable-line\n    collapseAllHandleRef,\n    ...props\n  } = allProps\n\n  const { elementRef } = useStickyHeader(allProps)\n  const { trCountRef, rerenderAlias } = useHandleOddEven({ children })\n  const collapseTrCallbacks = React.useRef<(() => void)[]>([])\n\n  useEffect(() => {\n    if (collapseAllHandleRef) {\n      collapseAllHandleRef.current = () => {\n        collapseTrCallbacks.current.forEach((callback) => callback())\n      }\n    }\n  }, [collapseAllHandleRef])\n\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n\n  validateDOMAttributes(allProps, props)\n\n  return (\n    <Provider skeleton={Boolean(skeleton)}>\n      <TableContext.Provider\n        value={{\n          trCountRef,\n          rerenderAlias,\n          collapseTrCallbacks,\n          allProps: {\n            ...allProps,\n            ...context.getTranslation(componentProps).Table,\n          },\n        }}\n      >\n        <table\n          className={classnames(\n            'dnb-table',\n            variant && `dnb-table__variant--${variant}`,\n            size && `dnb-table__size--${size}`,\n            sticky && 'dnb-table--sticky',\n            fixed && 'dnb-table--fixed',\n            border && 'dnb-table--border',\n            outline && 'dnb-table--outline',\n            accordion && 'dnb-table--accordion',\n            spacingClasses,\n            skeletonClasses,\n            className\n          )}\n          ref={elementRef}\n          {...props}\n        >\n          {children}\n        </table>\n      </TableContext.Provider>\n    </Provider>\n  )\n}\n\nTable._supportsSpacingProps = true\n\nexport default Table\n\nTable.ScrollView = ScrollView\n"],"mappings":"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"}
+{"version":3,"file":"Table.js","names":["React","useEffect","classnames","Context","Provider","createSpacingClasses","createSkeletonClass","extendPropsWithContext","validateDOMAttributes","ScrollView","TableContext","useStickyHeader","useHandleOddEven","defaultProps","size","variant","Table","componentProps","context","useContext","allProps","skeleton","className","children","sticky","stickyOffset","fixed","border","outline","accordion","mode","accordionChevronPlacement","collapseAllHandleRef","props","_objectWithoutProperties","_excluded","elementRef","trCountRef","rerenderAlias","collapseTrCallbacks","useRef","current","forEach","callback","skeletonClasses","spacingClasses","createElement","Boolean","value","_objectSpread","getTranslation","_extends","ref","_supportsSpacingProps"],"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport Provider from '../../shared/Provider'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport {\n  extendPropsWithContext,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport ScrollView from './TableScrollView'\nimport { TableContext } from './TableContext'\nimport { useStickyHeader } from './TableStickyHeader'\n\nimport type { StickyTableHeaderProps } from './TableStickyHeader'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport type { LocaleProps, SpacingProps } from '../../shared/types'\nimport { useHandleOddEven } from './TableTr'\n\nexport type TableSizes = 'large' | 'medium' | 'small'\nexport type TableVariants = 'generic'\n\nexport { ScrollView }\n\nexport type TableProps = {\n  /**\n   * The content of the component.\n   */\n  children: React.ReactNode\n\n  /**\n   * Custom className on the component root\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The size of the component.\n   * Default: large.\n   */\n  size?: TableSizes\n\n  /**\n   * The style variant of the component. Currently not implemented.\n   * Default: generic.\n   */\n  variant?: TableVariants\n\n  /**\n   * Use `true` to show borders between table data cell\n   * Default: false\n   */\n  border?: boolean\n\n  /**\n   * Use `true` to show a outline border around the table\n   * Default: false\n   */\n  outline?: boolean\n\n  /**\n   * Defines how the Table should look. Use `accordion` for an accordion-like table. Use `navigation` for a navigation table.\n   */\n  mode?: 'accordion' | 'navigation'\n\n  /**\n   * @deprecated – use mode=\"accordion\" instead. Will be removed in v11.\n   */\n  accordion?: boolean\n\n  /**\n   * Defines where the chevron will be placed, should only be used together with mode=\"accordion\".\n   * Default: 'start'\n   */\n  accordionChevronPlacement?: 'start' | 'end'\n\n  /**\n   * Defines if the table should behave with a fixed table layout, using: \"table-layout: fixed;\"\n   * Default: null.\n   */\n  fixed?: boolean\n\n  /**\n   * ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows.\n   *\n   * Default: `undefined`\n   */\n  collapseAllHandleRef?: React.MutableRefObject<() => void>\n} & StickyTableHeaderProps\n\nexport type TableAllProps = TableProps &\n  Omit<React.TableHTMLAttributes<HTMLTableElement>, 'border'> &\n  LocaleProps &\n  SpacingProps\n\nexport const defaultProps = {\n  size: 'large',\n  variant: 'generic',\n}\n\nconst Table = (componentProps: TableAllProps) => {\n  const context = React.useContext(Context)\n\n  const allProps = extendPropsWithContext(\n    componentProps,\n    defaultProps,\n    context?.Table,\n    {\n      skeleton: context?.skeleton,\n    }\n  )\n\n  const {\n    className,\n    children,\n    size,\n    skeleton,\n    variant,\n    sticky,\n    stickyOffset, // eslint-disable-line\n    fixed,\n    border,\n    outline,\n    accordion, // Deprecated – can be removed in v11\n    mode,\n    accordionChevronPlacement, // eslint-disable-line\n    collapseAllHandleRef,\n    ...props\n  } = allProps\n\n  const { elementRef } = useStickyHeader(allProps)\n  const { trCountRef, rerenderAlias } = useHandleOddEven({ children })\n  const collapseTrCallbacks = React.useRef<(() => void)[]>([])\n\n  useEffect(() => {\n    if (collapseAllHandleRef) {\n      collapseAllHandleRef.current = () => {\n        collapseTrCallbacks.current.forEach((callback) => callback())\n      }\n    }\n  }, [collapseAllHandleRef])\n\n  const skeletonClasses = createSkeletonClass('font', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n\n  validateDOMAttributes(allProps, props)\n\n  return (\n    <Provider skeleton={Boolean(skeleton)}>\n      <TableContext.Provider\n        value={{\n          trCountRef,\n          rerenderAlias,\n          collapseTrCallbacks,\n          allProps: {\n            ...allProps,\n            ...context.getTranslation(componentProps).Table,\n          },\n        }}\n      >\n        <table\n          className={classnames(\n            'dnb-table',\n            variant && `dnb-table__variant--${variant}`,\n            size && `dnb-table__size--${size}`,\n            sticky && 'dnb-table--sticky',\n            fixed && 'dnb-table--fixed',\n            border && 'dnb-table--border',\n            outline && 'dnb-table--outline',\n            accordion && 'dnb-table--accordion', // Deprecated – can be removed in v11\n            mode === 'accordion' && 'dnb-table--accordion',\n            mode === 'navigation' && 'dnb-table--navigation',\n            spacingClasses,\n            skeletonClasses,\n            className\n          )}\n          ref={elementRef}\n          {...props}\n        >\n          {children}\n        </table>\n      </TableContext.Provider>\n    </Provider>\n  )\n}\n\nTable._supportsSpacingProps = true\n\nexport default Table\n\nTable.ScrollView = ScrollView\n"],"mappings":"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"}

package/components/table/TableClickableHead.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { TableTrProps } from './TableTr';
+export type TableClickableHeadProps = {
+    trIsOpen?: boolean;
+    trIsHover?: boolean;
+    trHadClick?: boolean;
+    clickable: boolean;
+    noAnimation?: boolean;
+    ariaLabel: string;
+} & TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>;
+export declare function TableClickableHead(allProps: TableClickableHeadProps): import("react/jsx-runtime").JSX.Element;
+export declare function onClickTr(event: React.SyntheticEvent, allowInteractiveElement?: boolean, onClick?: (event: React.SyntheticEvent) => void): void;
+export declare function TableClickableButtonTd(props: {
+    trIsOpen?: boolean;
+    ariaLabel: string;
+    icon: 'chevron_down' | 'chevron_right';
+    onClick: (event: React.SyntheticEvent, allowInteractiveElement: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TableIconSrTh(props: {
+    text: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const isTableHead: (children: React.ReactNode[]) => boolean;

package/components/table/TableClickableHead.js

@@ -0,0 +1,103 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["children", "className", "disabled", "onClick", "onOpened", "onClosed", "trIsOpen", "trIsHover", "trHadClick", "clickable", "noAnimation", "onMouseEnter", "onMouseLeave", "onKeyDown", "ariaLabel"];
+import React from 'react';
+import classnames from 'classnames';
+import keycode from 'keycode';
+import { hasSelectedText } from '../../shared/helpers';
+import Button from '../button/Button';
+import IconPrimary from '../icon/IconPrimary';
+import Th from './TableTh';
+import Td from './TableTd';
+import { TableContext } from './TableContext';
+export function TableClickableHead(allProps) {
+  const {
+      children,
+      className,
+      disabled,
+      onClick,
+      onOpened,
+      onClosed,
+      trIsOpen,
+      trIsHover,
+      trHadClick,
+      clickable,
+      noAnimation,
+      onMouseEnter,
+      onMouseLeave,
+      onKeyDown,
+      ariaLabel
+    } = allProps,
+    props = _objectWithoutProperties(allProps, _excluded);
+  const trParams = !disabled && clickable ? {
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onKeyDown: onKeydownHandler
+  } : {};
+  return React.createElement("tr", _extends({
+    tabIndex: clickable && !disabled ? 0 : undefined,
+    className: classnames(className, clickable && 'dnb-table__tr--clickable', trIsOpen && 'dnb-table__tr--expanded', disabled && 'dnb-table__tr--disabled', noAnimation && 'dnb-table__tr--no-animation', trIsHover && trHadClick && 'dnb-table__tr--hover')
+  }, trParams, props), children);
+  function onKeydownHandler(event) {
+    switch (keycode(event.nativeEvent)) {
+      case 'space':
+      case 'enter':
+        {
+          const target = event.target;
+          if (document.activeElement !== target || target.tagName === 'TR') {
+            onKeyDown(event);
+            event.preventDefault();
+          }
+        }
+        break;
+    }
+  }
+}
+export function onClickTr(event) {
+  let allowInteractiveElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  let onClick = arguments.length > 2 ? arguments[2] : undefined;
+  const target = event.target;
+  if ((document.activeElement !== target && target.tagName !== 'INPUT' && target.tagName !== 'LABEL' || allowInteractiveElement) && !hasSelectedText()) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+  }
+}
+export function TableClickableButtonTd(props) {
+  var _React$useContext;
+  const {
+    trIsOpen,
+    ariaLabel,
+    icon,
+    onClick
+  } = props;
+  const tableContextAllProps = (_React$useContext = React.useContext(TableContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.allProps;
+  const iconSize = (tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.size) === 'medium' || (tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.size) === 'small' ? 'basis' : 'medium';
+  return React.createElement(Td, {
+    className: "dnb-table__td__button-icon"
+  }, React.createElement("span", {
+    className: "dnb-table__button"
+  }, React.createElement(IconPrimary, {
+    icon: icon,
+    size: iconSize
+  }), React.createElement(Button, _extends({
+    className: "dnb-sr-only",
+    tabIndex: -1,
+    "aria-label": ariaLabel,
+    "aria-expanded": Boolean(trIsOpen)
+  }, trIsOpen != null ? {
+    'aria-expanded': Boolean(trIsOpen)
+  } : {}, {
+    on_click: event => onClick(event, true)
+  }))));
+}
+export function TableIconSrTh(props) {
+  const {
+    text
+  } = props;
+  return React.createElement(Th, {
+    "aria-hidden": true,
+    className: "dnb-table__th__button-icon"
+  }, React.createElement("div", null, text));
+}
+export const isTableHead = children => children.some(element => element.type === Th);
+//# sourceMappingURL=TableClickableHead.js.map

package/components/table/TableClickableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableClickableHead.js","names":["React","classnames","keycode","hasSelectedText","Button","IconPrimary","Th","Td","TableContext","TableClickableHead","allProps","children","className","disabled","onClick","onOpened","onClosed","trIsOpen","trIsHover","trHadClick","clickable","noAnimation","onMouseEnter","onMouseLeave","onKeyDown","ariaLabel","props","_objectWithoutProperties","_excluded","trParams","onKeydownHandler","createElement","_extends","tabIndex","undefined","event","nativeEvent","target","document","activeElement","tagName","preventDefault","onClickTr","allowInteractiveElement","arguments","length","TableClickableButtonTd","_React$useContext","icon","tableContextAllProps","useContext","iconSize","size","Boolean","on_click","TableIconSrTh","text","isTableHead","some","element","type"],"sources":["../../../../src/components/table/TableClickableHead.tsx"],"sourcesContent":["import React 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 type { TableTrProps } from './TableTr'\n\nexport type TableClickableHeadProps = {\n  trIsOpen?: boolean\n  trIsHover?: boolean\n  trHadClick?: boolean\n  clickable: boolean\n  noAnimation?: boolean\n  ariaLabel: string\n} & TableTrProps &\n  React.TableHTMLAttributes<HTMLTableRowElement>\n\nexport function TableClickableHead(allProps: TableClickableHeadProps) {\n  const {\n    children,\n    className,\n    disabled,\n    onClick,\n    onOpened,\n    onClosed,\n\n    trIsOpen,\n    trIsHover,\n    trHadClick,\n    clickable,\n    noAnimation,\n    onMouseEnter,\n    onMouseLeave,\n    onKeyDown,\n    ariaLabel,\n    ...props\n  } = allProps\n\n  const trParams =\n    !disabled && clickable\n      ? {\n          onClick: onClick,\n          onMouseEnter: onMouseEnter,\n          onMouseLeave: onMouseLeave,\n          onKeyDown: onKeydownHandler,\n        }\n      : {}\n\n  return (\n    <tr\n      tabIndex={clickable && !disabled ? 0 : undefined}\n      className={classnames(\n        className,\n        clickable && 'dnb-table__tr--clickable',\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      {children}\n    </tr>\n  )\n\n  function onKeydownHandler(\n    event: React.KeyboardEvent<HTMLTableRowElement>\n  ) {\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            onKeyDown(event)\n            event.preventDefault()\n          }\n        }\n        break\n    }\n  }\n}\n\nexport function onClickTr(\n  event: React.SyntheticEvent,\n  allowInteractiveElement = false,\n  onClick?: (event: React.SyntheticEvent) => void\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 onclick.\n     */\n    !hasSelectedText()\n  ) {\n    onClick?.(event)\n  }\n}\n\nexport function TableClickableButtonTd(props: {\n  trIsOpen?: boolean\n  ariaLabel: string\n  icon: 'chevron_down' | 'chevron_right'\n  onClick: (\n    event: React.SyntheticEvent,\n    allowInteractiveElement: boolean\n  ) => void\n}) {\n  const { trIsOpen, ariaLabel, icon, onClick } = props\n\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    <Td className=\"dnb-table__td__button-icon\">\n      <span className=\"dnb-table__button\">\n        <IconPrimary icon={icon} size={iconSize} />\n        <Button\n          className=\"dnb-sr-only\"\n          tabIndex={-1}\n          aria-label={ariaLabel}\n          aria-expanded={Boolean(trIsOpen)}\n          {...(trIsOpen != null\n            ? { 'aria-expanded': Boolean(trIsOpen) }\n            : {})}\n          on_click={(event) => onClick(event, true)}\n        />\n      </span>\n    </Td>\n  )\n}\n\nexport function TableIconSrTh(props: { text: string }) {\n  const { text } = props\n\n  return (\n    <Th aria-hidden className=\"dnb-table__th__button-icon\">\n      <div>{text}</div>\n    </Th>\n  )\n}\n\nexport const isTableHead = (children: React.ReactNode[]) =>\n  children.some((element: React.ReactElement) => element.type === Th)\n"],"mappings":"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"}

package/components/table/TableDocs.js

@@ -1,12 +1,12 @@
 export const TableProperties = {
-  accordion: {
-    doc: 'Set to true if you have one or more rows that contains an accordion content.',
-    type: 'boolean',
-    defaultValue: 'false',
+  mode: {
+    doc: 'Defines how the Table should look. Use `accordion` for an accordion-like table. Use `navigation` for a navigation table.',
+    type: [`'accordion'`, `'navigation'`],
+    defaultValue: 'null',
     status: 'optional'
   },
   accordionChevronPlacement: {
-    doc: 'Defines where the chevron will be placed.',
+    doc: 'Defines where the chevron will be placed, should only be used together with mode="accordion".',
     type: [`'start'`, `'end'`],
     defaultValue: `'start'`,
     status: 'optional'
@@ -117,7 +117,7 @@ export const TrProperties = {
 };
 export const TrEventProperties = {
   onClick: {
-    doc: 'will emit when user clicks/expands the table row. Returns a native click.',
+    doc: 'Will emit when user clicks/expands or on keydown space/enter(in mode="accordion" and mode="navigation") in the table row. Returns a native click.',
     type: '(event) => void',
     defaultValue: 'undefined',
     status: 'optional'

package/components/table/TableDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableDocs.js","names":["TableProperties","accordion","doc","type","defaultValue","status","accordionChevronPlacement","border","outline","sticky","stickyOffset","size","fixed","children","className","skeleton","TableEventProperties","collapseAllHandleRef","TrProperties","variant","noWrap","expanded","disabled","noAnimation","TrEventProperties","onClick","onOpened","onClosed","ThProperties","sortable","active","reversed","TdProperties","noSpacing","spacing"],"sources":["../../../../src/components/table/TableDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const TableProperties: PropertiesTableProps = {\n  accordion: {\n    doc: 'Set to true if you have one or more rows that contains an accordion content.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  accordionChevronPlacement: {\n    doc: 'Defines where the chevron will be placed.',\n    type: [`'start'`, `'end'`],\n    defaultValue: `'start'`,\n    status: 'optional',\n  },\n  border: {\n    doc: 'Use `true` to show borders between table data cells.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  outline: {\n    doc: 'Use `true` to show an outline border around the table',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  sticky: {\n    doc: \"Use `true` to enable a sticky Table header. Or use `'css-position'` to enable the CSS based scroll behavior.\",\n    type: ['boolean', `'css-position'`],\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  stickyOffset: {\n    doc: 'Defines the offset (top) in `rem` from where the header should start to stick. You may define your app header height here, if you have a sticky header on your page.',\n    type: ['string', 'number'],\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  size: {\n    doc: 'Spacing size inside the table header and data.',\n    type: [`'large'`, `'medium'`, `'small'`],\n    defaultValue: `'large'`,\n    status: 'optional',\n  },\n  fixed: {\n    doc: 'If set to `true`, the table will behave with a fixed table layout, using: `table-layout: fixed;`. Use e.g. CSS `width: 40%` on a table column to define the width.',\n    type: 'boolean',\n    defaultValue: 'null',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    status: 'required',\n  },\n  className: {\n    doc: 'Custom className on the component root',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const TableEventProperties: PropertiesTableProps = {\n  collapseAllHandleRef: {\n    doc: 'ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows.',\n    type: 'React.MutableRefObject<() => void>',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n\nexport const TrProperties: PropertiesTableProps = {\n  /**\n   * The variant of the tr\n   */\n  variant: {\n    doc: 'Override the automatic variant of the current row. The next row one will continue with the opposite.',\n    type: [`'even'`, `'odd'`],\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  noWrap: {\n    doc: 'if set to `true`, the inherited header text will not wrap to new lines.',\n    type: 'boolean',\n    defaultValue: 'true',\n    status: 'optional',\n  },\n  expanded: {\n    doc: 'use `true` to render the `<Tr>` initially as expanded.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  disabled: {\n    doc: 'use `true` to disable the `<Tr>` to be accessible as an interactive element.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  noAnimation: {\n    doc: 'use `true` to disable the expand/collapse animation.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    status: 'required',\n  },\n}\n\nexport const TrEventProperties: PropertiesTableProps = {\n  onClick: {\n    doc: 'will emit when user clicks/expands the table row. Returns a native click.',\n    type: '(event) => void',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  onOpened: {\n    doc: 'Will emit when table row is expanded. Returns an object with the table row as the target: `{ target }`.',\n    type: '({ target }) => void',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  onClosed: {\n    doc: 'Will emit when table row is closed (after it was open). Returns an object with the table row as the target: `{ target }`.',\n    type: '({ target }) => void',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n\nexport const ThProperties: PropertiesTableProps = {\n  sortable: {\n    doc: 'Defines the table header as sortable if set to `true` (ascending).',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  active: {\n    doc: 'Defines the sortable column as the current active (ascending).',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  reversed: {\n    doc: 'Defines the sortable column as in reversed order (descending).',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  noWrap: {\n    doc: 'If set to `true`, the header text will not wrap to new lines.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n\nexport const TdProperties: PropertiesTableProps = {\n  noSpacing: {\n    doc: 'If set to `true`, no padding will be added.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  spacing: {\n    doc: 'Set to `horizontal` for padding on left and right side.',\n    type: `'horizontal'`,\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"TableDocs.js","names":["TableProperties","mode","doc","type","defaultValue","status","accordionChevronPlacement","border","outline","sticky","stickyOffset","size","fixed","children","className","skeleton","TableEventProperties","collapseAllHandleRef","TrProperties","variant","noWrap","expanded","disabled","noAnimation","TrEventProperties","onClick","onOpened","onClosed","ThProperties","sortable","active","reversed","TdProperties","noSpacing","spacing"],"sources":["../../../../src/components/table/TableDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const TableProperties: PropertiesTableProps = {\n  mode: {\n    doc: 'Defines how the Table should look. Use `accordion` for an accordion-like table. Use `navigation` for a navigation table.',\n    type: [`'accordion'`, `'navigation'`],\n    defaultValue: 'null',\n    status: 'optional',\n  },\n  accordionChevronPlacement: {\n    doc: 'Defines where the chevron will be placed, should only be used together with mode=\"accordion\".',\n    type: [`'start'`, `'end'`],\n    defaultValue: `'start'`,\n    status: 'optional',\n  },\n  border: {\n    doc: 'Use `true` to show borders between table data cells.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  outline: {\n    doc: 'Use `true` to show an outline border around the table',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  sticky: {\n    doc: \"Use `true` to enable a sticky Table header. Or use `'css-position'` to enable the CSS based scroll behavior.\",\n    type: ['boolean', `'css-position'`],\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  stickyOffset: {\n    doc: 'Defines the offset (top) in `rem` from where the header should start to stick. You may define your app header height here, if you have a sticky header on your page.',\n    type: ['string', 'number'],\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  size: {\n    doc: 'Spacing size inside the table header and data.',\n    type: [`'large'`, `'medium'`, `'small'`],\n    defaultValue: `'large'`,\n    status: 'optional',\n  },\n  fixed: {\n    doc: 'If set to `true`, the table will behave with a fixed table layout, using: `table-layout: fixed;`. Use e.g. CSS `width: 40%` on a table column to define the width.',\n    type: 'boolean',\n    defaultValue: 'null',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    status: 'required',\n  },\n  className: {\n    doc: 'Custom className on the component root',\n    type: 'string',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const TableEventProperties: PropertiesTableProps = {\n  collapseAllHandleRef: {\n    doc: 'ref handle to collapse all expanded accordion rows. Send in a ref and use `.current()` to collapse all rows.',\n    type: 'React.MutableRefObject<() => void>',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n\nexport const TrProperties: PropertiesTableProps = {\n  /**\n   * The variant of the tr\n   */\n  variant: {\n    doc: 'Override the automatic variant of the current row. The next row one will continue with the opposite.',\n    type: [`'even'`, `'odd'`],\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  noWrap: {\n    doc: 'if set to `true`, the inherited header text will not wrap to new lines.',\n    type: 'boolean',\n    defaultValue: 'true',\n    status: 'optional',\n  },\n  expanded: {\n    doc: 'use `true` to render the `<Tr>` initially as expanded.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  disabled: {\n    doc: 'use `true` to disable the `<Tr>` to be accessible as an interactive element.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  noAnimation: {\n    doc: 'use `true` to disable the expand/collapse animation.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    status: 'required',\n  },\n}\n\nexport const TrEventProperties: PropertiesTableProps = {\n  onClick: {\n    doc: 'Will emit when user clicks/expands or on keydown space/enter(in mode=\"accordion\" and mode=\"navigation\") in the table row. Returns a native click.',\n    type: '(event) => void',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  onOpened: {\n    doc: 'Will emit when table row is expanded. Returns an object with the table row as the target: `{ target }`.',\n    type: '({ target }) => void',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  onClosed: {\n    doc: 'Will emit when table row is closed (after it was open). Returns an object with the table row as the target: `{ target }`.',\n    type: '({ target }) => void',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n\nexport const ThProperties: PropertiesTableProps = {\n  sortable: {\n    doc: 'Defines the table header as sortable if set to `true` (ascending).',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  active: {\n    doc: 'Defines the sortable column as the current active (ascending).',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  reversed: {\n    doc: 'Defines the sortable column as in reversed order (descending).',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  noWrap: {\n    doc: 'If set to `true`, the header text will not wrap to new lines.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n\nexport const TdProperties: PropertiesTableProps = {\n  noSpacing: {\n    doc: 'If set to `true`, no padding will be added.',\n    type: 'boolean',\n    defaultValue: 'false',\n    status: 'optional',\n  },\n  spacing: {\n    doc: 'Set to `horizontal` for padding on left and right side.',\n    type: `'horizontal'`,\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n  children: {\n    doc: 'The content of the component.',\n    type: 'React.ReactNode',\n    defaultValue: 'undefined',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}

package/components/table/TableTr.d.ts

@@ -6,43 +6,43 @@ export type TableTrProps = {
      */
     variant?: 'even' | 'odd';
     /**
-     * If set to true, the inherited header text will not wrap to new lines
+     * If set to true, the inherited header text will not wrap to new lines.
      * Default: false
      */
     noWrap?: boolean;
     /**
-     * Set true to render the tr initially as expanded
-     * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table
+     * Set true to render the tr initially as expanded.
+     * Is part of the accordion feature and needs to be enabled with `mode="accordion"` prop in main Table.
      * Default: false
      */
     expanded?: boolean;
     /**
-     * Set true to disable the tr to be accessible as an interactive element
-     * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table
+     * Set true to disable the tr to be accessible as an interactive element.
+     * Is part of the accordion feature and needs to be enabled with `mode="accordion"`prop in main Table.
      * Default: false
      */
     disabled?: boolean;
     /**
-     * Set to true to skip animation
-     * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table
+     * Set to true to skip animation.
+     * Is part of the accordion feature and needs to be enabled with `mode="accordion"` prop in main Table.
      * Default: false
      */
     noAnimation?: boolean;
     /**
-     * Will emit when user clicks/expands the table row
-     * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table
+     * Will emit when user clicks/expands or on keydown space/enter(in mode="accordion" and mode="navigation") in the table row.
+     * Is part of the mode feature and needs to be enabled with the `mode` prop in main Table.
      */
     onClick?: (event: React.SyntheticEvent) => void;
     /**
-     * Will emit when table row is expanded
-     * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table
+     * Will emit when table row is expanded.
+     * Is part of the accordion feature and needs to be enabled with `mode="accordion"` prop in main Table.
      */
     onOpened?: ({ target }: {
         target: HTMLTableRowElement;
     }) => void;
     /**
      * Will emit when table row is closed (after it was open)
-     * Is part of the accordion feature and needs to be enabled with `accordion` prop in main Table
+     * Is part of the accordion feature and needs to be enabled with `mode="accordion"` prop in main Table.
      */
     onClosed?: ({ target }: {
         target: HTMLTableRowElement;

package/components/table/TableTr.js

@@ -5,16 +5,17 @@ const _excluded = ["variant", "noWrap", "className"],
 import React from 'react';
 import classnames from 'classnames';
 import { TableAccordionHead } from './table-accordion/TableAccordionHead';
+import { TableNavigationHead } from './table-navigation/TableNavigationHead';
 import { TableAccordionContentRow } from './table-accordion/TableAccordionContent';
 import { TableContext } from './TableContext';
 export default function Tr(componentProps) {
-  var _tableContext$allProp;
+  var _tableContext$allProp, _tableContext$allProp2, _tableContext$allProp3;
   const {
       variant,
       noWrap,
       className: _className
     } = componentProps,
-    accordionProps = _objectWithoutProperties(componentProps, _excluded);
+    restProps = _objectWithoutProperties(componentProps, _excluded);
   const {
     currentVariant,
     isLast,
@@ -24,11 +25,17 @@ export default function Tr(componentProps) {
   });
   const className = classnames('dnb-table__tr', _className, currentVariant && `dnb-table__tr--${currentVariant}`, isLast && 'dnb-table__tr--last', noWrap && 'dnb-table--no-wrap');
   const tableContext = React.useContext(TableContext);
-  if (tableContext !== null && tableContext !== void 0 && (_tableContext$allProp = tableContext.allProps) !== null && _tableContext$allProp !== void 0 && _tableContext$allProp.accordion) {
+  const deprecatedAccordionProp = tableContext === null || tableContext === void 0 ? void 0 : (_tableContext$allProp = tableContext.allProps) === null || _tableContext$allProp === void 0 ? void 0 : _tableContext$allProp.accordion;
+  if (deprecatedAccordionProp || (tableContext === null || tableContext === void 0 ? void 0 : (_tableContext$allProp2 = tableContext.allProps) === null || _tableContext$allProp2 === void 0 ? void 0 : _tableContext$allProp2.mode) == 'accordion') {
     return React.createElement(TableAccordionHead, _extends({
       count: count,
       className: className
-    }, accordionProps));
+    }, restProps));
+  }
+  if ((tableContext === null || tableContext === void 0 ? void 0 : (_tableContext$allProp3 = tableContext.allProps) === null || _tableContext$allProp3 === void 0 ? void 0 : _tableContext$allProp3.mode) == 'navigation') {
+    return React.createElement(TableNavigationHead, _extends({
+      className: className
+    }, restProps));
   }
   const {
       expanded,
@@ -37,8 +44,8 @@ export default function Tr(componentProps) {
       onClick,
       onOpened,
       onClosed
-    } = accordionProps,
-    trProps = _objectWithoutProperties(accordionProps, _excluded2);
+    } = restProps,
+    trProps = _objectWithoutProperties(restProps, _excluded2);
   return React.createElement("tr", _extends({
     role: "row",
     className: className