@dnb/eufemia 10.13.0 → 10.15.0

package/components/switch/style/themes/dnb-switch-theme-ui.css

@@ -6,6 +6,7 @@
  * Utilities
  */
 .dnb-switch {
+  /* stylelint-disable no-descending-specificity */
   /*
     * When switched OFF
     * aka when the checkbox is not :checked
@@ -19,42 +20,35 @@
     *
     */
   /*
-    * On disabled
+    * On disabled state
     *
     */
   /*
-    * On focus
+    * On focus state
     *
     */
-  /* stylelint-disable-next-line */
   /*
-    * On hover
+    * On hover state
     *
     */
-  /* stylelint-disable-next-line */
   /*
-    * On active
+    * On active state
     *
     */
-  /* stylelint-disable-next-line */
   /*
     * On error state
     *
     */
-  /* stylelint-disable-next-line */
+  /* stylelint-enable no-descending-specificity */
 }
 .dnb-switch__background {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  overflow: hidden;
   background-color: var(--color-sea-green-30);
 }
-.dnb-switch__background::after {
-  content: "";
-  position: absolute;
-  transition: transform 0.3s ease-out, position 0.3s ease-out;
+.dnb-switch__focus {
+  transition: transform 150ms ease-out;
+  transform: rotate(0deg);
+  -webkit-clip-path: polygon(50% 15%, 110% 15%, 110% -10%, -10% -10%, -10% 110%, 110% 110%, 110% 85%, 50% 85%);
+          clip-path: polygon(50% 15%, 110% 15%, 110% -10%, -10% -10%, -10% 110%, 110% 110%, 110% 85%, 50% 85%);
 }
 .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
   background-color: var(--color-white);
@@ -109,18 +103,6 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
 html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button {
   background-color: var(--color-mint-green-50);
 }
-.dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus, .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button .dnb-switch__focus {
-  display: block;
-}
 .dnb-switch__input:not([disabled]):checked ~ .dnb-switch__button .dnb-switch__focus {
   transform: rotate(180deg);
 }
@@ -156,7 +138,6 @@ html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus ~ .dnb-sw
   border-color: var(--color-fire-red);
 }
 .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__button .dnb-switch__focus {
-  display: block;
   --border-color: var(--color-fire-red);
   --border-width: var(--focus-ring-width);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);

package/components/switch/style/themes/dnb-switch-theme-ui.min.css

@@ -1 +1 @@
-.dnb-switch__background{align-items:center;background-color:var(--color-sea-green-30);display:flex;flex-direction:row;overflow:hidden;position:relative}.dnb-switch__background:after{content:"";position:absolute;transition:transform .3s ease-out,position .3s ease-out}.dnb-switch__input:not(:checked)~.dnb-switch__button{background-color:var(--color-white);border-color:var(--color-sea-green)}.dnb-switch__input:checked~.dnb-switch__button{background-color:var(--color-sea-green)}.dnb-switch__input:not(:checked)~.dnb-switch__background:after{border:.0625rem solid var(--color-sea-green);border-radius:50%;height:.5rem;right:0;transform:translateX(calc(var(--switch-width--medium) - 2.8rem));width:.5rem}.dnb-switch__input:checked~.dnb-switch__background:after{background-color:var(--color-sea-green);border-radius:.0625rem;height:.5rem;left:0;transform:translateX(calc(var(--switch-width--medium) - 1.87rem));width:.0625rem}.dnb-switch--large .dnb-switch__input:not(:checked)~.dnb-switch__background:after{height:.625rem;transform:translateX(calc(var(--switch-width--large) - 3.7rem));width:.625rem}.dnb-switch--large .dnb-switch__input:checked~.dnb-switch__background:after{height:.625rem;transform:translateX(calc(var(--switch-width--large) - 2.5rem))}.dnb-switch__input[disabled]~.dnb-switch__background{background-color:var(--color-mint-green-25)}.dnb-switch__input[disabled]:checked~.dnb-switch__background:after{background-color:var(--color-sea-green-30)}.dnb-switch__input[disabled]:not(:checked)~.dnb-switch__background:after,.dnb-switch__input[disabled]~.dnb-switch__button{border-color:var(--color-sea-green-30)}.dnb-switch__input[disabled]:checked~.dnb-switch__button{background-color:var(--color-sea-green-30)}html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus~.dnb-switch__button{border:none}html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):focus~.dnb-switch__button{background-color:var(--color-mint-green-50)}.dnb-switch__input:not([disabled]):active~.dnb-switch__background,.dnb-switch__input:not([disabled]):focus~.dnb-switch__background{outline:none}html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):active~.dnb-switch__background,html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus~.dnb-switch__background{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-switch__input:not([disabled]):active~.dnb-switch__button .dnb-switch__focus,.dnb-switch__input:not([disabled]):focus~.dnb-switch__button .dnb-switch__focus{display:block}.dnb-switch__input:not([disabled]):checked~.dnb-switch__button .dnb-switch__focus{transform:rotate(180deg)}.dnb-switch__input:not([disabled]):not(:focus):not(:active):hover~.dnb-switch__button{background-color:var(--color-mint-green-50);border-color:var(--color-sea-green)}.dnb-switch__input:not([disabled]):active~.dnb-switch__button{background-color:var(--color-mint-green-50);border-color:transparent}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):hover~.dnb-switch__button{background-color:var(--color-fire-red-8);border-color:var(--color-fire-red)}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover)~.dnb-switch__button{border-color:var(--color-fire-red-8)}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover):checked~.dnb-switch__button{background-color:var(--color-fire-red)}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active)~.dnb-switch__background{--border-color:var(--color-fire-red);--border-width:var(--focus-ring-width);background-color:var(--color-fire-red-8);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked~.dnb-switch__background:after{background-color:var(--color-fire-red)}.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked)~.dnb-switch__background:after{border-color:var(--color-fire-red)}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active)~.dnb-switch__button .dnb-switch__focus{--border-color:var(--color-fire-red);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked~.dnb-switch__button .dnb-switch__focus{transform:rotate(180deg)}.dnb-switch>.dnb-form-status{transform:translateY(.1875rem)}
+.dnb-switch__background{background-color:var(--color-sea-green-30)}.dnb-switch__focus{-webkit-clip-path:polygon(50% 15%,110% 15%,110% -10%,-10% -10%,-10% 110%,110% 110%,110% 85%,50% 85%);clip-path:polygon(50% 15%,110% 15%,110% -10%,-10% -10%,-10% 110%,110% 110%,110% 85%,50% 85%);transform:rotate(0deg);transition:transform .15s ease-out}.dnb-switch__input:not(:checked)~.dnb-switch__button{background-color:var(--color-white);border-color:var(--color-sea-green)}.dnb-switch__input:checked~.dnb-switch__button{background-color:var(--color-sea-green)}.dnb-switch__input:not(:checked)~.dnb-switch__background:after{border:.0625rem solid var(--color-sea-green);border-radius:50%;height:.5rem;right:0;transform:translateX(calc(var(--switch-width--medium) - 2.8rem));width:.5rem}.dnb-switch__input:checked~.dnb-switch__background:after{background-color:var(--color-sea-green);border-radius:.0625rem;height:.5rem;left:0;transform:translateX(calc(var(--switch-width--medium) - 1.87rem));width:.0625rem}.dnb-switch--large .dnb-switch__input:not(:checked)~.dnb-switch__background:after{height:.625rem;transform:translateX(calc(var(--switch-width--large) - 3.7rem));width:.625rem}.dnb-switch--large .dnb-switch__input:checked~.dnb-switch__background:after{height:.625rem;transform:translateX(calc(var(--switch-width--large) - 2.5rem))}.dnb-switch__input[disabled]~.dnb-switch__background{background-color:var(--color-mint-green-25)}.dnb-switch__input[disabled]:checked~.dnb-switch__background:after{background-color:var(--color-sea-green-30)}.dnb-switch__input[disabled]:not(:checked)~.dnb-switch__background:after,.dnb-switch__input[disabled]~.dnb-switch__button{border-color:var(--color-sea-green-30)}.dnb-switch__input[disabled]:checked~.dnb-switch__button{background-color:var(--color-sea-green-30)}html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus~.dnb-switch__button{border:none}html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):focus~.dnb-switch__button{background-color:var(--color-mint-green-50)}.dnb-switch__input:not([disabled]):checked~.dnb-switch__button .dnb-switch__focus{transform:rotate(180deg)}.dnb-switch__input:not([disabled]):not(:focus):not(:active):hover~.dnb-switch__button{background-color:var(--color-mint-green-50);border-color:var(--color-sea-green)}.dnb-switch__input:not([disabled]):active~.dnb-switch__button{background-color:var(--color-mint-green-50);border-color:transparent}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):hover~.dnb-switch__button{background-color:var(--color-fire-red-8);border-color:var(--color-fire-red)}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover)~.dnb-switch__button{border-color:var(--color-fire-red-8)}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover):checked~.dnb-switch__button{background-color:var(--color-fire-red)}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active)~.dnb-switch__background{--border-color:var(--color-fire-red);--border-width:var(--focus-ring-width);background-color:var(--color-fire-red-8);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked~.dnb-switch__background:after{background-color:var(--color-fire-red)}.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked)~.dnb-switch__background:after{border-color:var(--color-fire-red)}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active)~.dnb-switch__button .dnb-switch__focus{--border-color:var(--color-fire-red);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked~.dnb-switch__button .dnb-switch__focus{transform:rotate(180deg)}.dnb-switch>.dnb-form-status{transform:translateY(.1875rem)}

package/components/switch/style/themes/dnb-switch-theme-ui.scss

@@ -7,25 +7,29 @@
 
 .dnb-switch {
   &__background {
-    position: relative;
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    overflow: hidden;
-
     background-color: var(--color-sea-green-30);
+  }
 
-    &::after {
-      content: '';
-      position: absolute;
-      transition:
-        transform 0.3s ease-out,
-        position 0.3s ease-out;
-    }
+  &__focus {
+    transition: transform 150ms ease-out;
+    transform: rotate(0deg);
+
+    // 15% is the top value
+    // 85% is the bottom value
+    clip-path: polygon(
+      50% 15%,
+      110% 15%,
+      110% -10%,
+      -10% -10%,
+      -10% 110%,
+      110% 110%,
+      110% 85%,
+      50% 85%
+    );
   }
 
+  /* stylelint-disable no-descending-specificity */
+
   /*
     * When switched OFF
     * aka when the checkbox is not :checked
@@ -79,7 +83,7 @@
   }
 
   /*
-    * On disabled
+    * On disabled state
     *
     */
   &__input[disabled] ~ &__background {
@@ -103,7 +107,7 @@
   }
 
   /*
-    * On focus
+    * On focus state
     *
     */
   &__input:not([disabled]):focus ~ &__button {
@@ -111,39 +115,28 @@
       border: none;
     }
   }
-  /* stylelint-disable-next-line */
   &__input:not([disabled]):not(:checked):focus ~ &__button {
     html[data-whatinput='keyboard'] & {
       background-color: var(--color-mint-green-50);
     }
   }
-  &__input:not([disabled]):focus ~ &__background,
-  &__input:not([disabled]):active ~ &__background {
-    @include focusRing();
-  }
-  &__input:not([disabled]):focus ~ &__button &__focus,
-  &__input:not([disabled]):active ~ &__button &__focus {
-    display: block;
-  }
   &__input:not([disabled]):checked ~ &__button &__focus {
     transform: rotate(180deg);
   }
 
   /*
-    * On hover
+    * On hover state
     *
     */
-  /* stylelint-disable-next-line */
   &__input:not([disabled]):not(:focus):not(:active):hover ~ &__button {
     border-color: var(--color-sea-green);
     background-color: var(--color-mint-green-50);
   }
 
   /*
-    * On active
+    * On active state
     *
     */
-  /* stylelint-disable-next-line */
   &__input:not([disabled]):active ~ &__button {
     background-color: var(--color-mint-green-50);
     border-color: transparent;
@@ -153,7 +146,6 @@
     * On error state
     *
     */
-  /* stylelint-disable-next-line */
   &__status--error &__input:not([disabled]):not(:focus):hover ~ &__button {
     // change button color
     border-color: var(--color-fire-red);
@@ -200,7 +192,6 @@
     &__input:not([disabled]):not(:focus):not(:active)
     ~ &__button
     &__focus {
-    display: block;
     @include fakeBorder(var(--color-fire-red), var(--focus-ring-width));
   }
 
@@ -211,6 +202,7 @@
     &__focus {
     transform: rotate(180deg);
   }
+  /* stylelint-enable no-descending-specificity */
 
   // adjust the form-status to the inner border for 3px
   > .dnb-form-status {

package/components/table/Table.js

@@ -1,3 +1,5 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";

package/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":["React","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","props","_objectWithoutProperties","_excluded","elementRef","trCountRef","rerenderAlias","skeletonClasses","spacingClasses","createElement","Boolean","value","_objectSpread","getTranslation","_extends","ref","_supportsSpacingProps"],"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import React 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.\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} & 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    ...props\n  } = allProps\n\n  const { elementRef } = useStickyHeader(allProps)\n  const { trCountRef, rerenderAlias } = useHandleOddEven({ children })\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          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":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,OAAOC,QAAQ,MAAM,uBAAuB;AAC5C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,mBAAmB,QAAQ,4BAA4B;AAChE,SACEC,sBAAsB,EACtBC,qBAAqB,QAChB,+BAA+B;AACtC,OAAOC,UAAU,MAAM,mBAAmB;AAC1C,OAAOC,YAAY,MAAM,gBAAgB;AACzC,SAASC,eAAe,QAAQ,qBAAqB;AAKrD,SAASC,gBAAgB,QAAQ,WAAW;AAK5C,SAASH,UAAU;AAkEnB,OAAO,MAAMI,YAAY,GAAG;EAC1BC,IAAI,EAAE,OAAO;EACbC,OAAO,EAAE;AACX,CAAC;AAED,MAAMC,KAAK,GAAIC,cAA6B,IAAK;EAC/C,MAAMC,OAAO,GAAGjB,KAAK,CAACkB,UAAU,CAAChB,OAAO,CAAC;EAEzC,MAAMiB,QAAQ,GAAGb,sBAAsB,CACrCU,cAAc,EACdJ,YAAY,EACZK,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,KAAK,EACd;IACEK,QAAQ,EAAEH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG;EACrB,CACF,CAAC;EAED,MAAM;MACJC,SAAS;MACTC,QAAQ;MACRT,IAAI;MACJO,QAAQ;MACRN,OAAO;MACPS,MAAM;MACNC,YAAY;MACZC,KAAK;MACLC,MAAM;MACNC,OAAO;MACPC,SAAS;MACTC;IAEF,CAAC,GAAGV,QAAQ;IADPW,KAAK,GAAAC,wBAAA,CACNZ,QAAQ,EAAAa,SAAA;EAEZ,MAAM;IAAEC;EAAW,CAAC,GAAGvB,eAAe,CAACS,QAAQ,CAAC;EAChD,MAAM;IAAEe,UAAU;IAAEC;EAAc,CAAC,GAAGxB,gBAAgB,CAAC;IAAEW;EAAS,CAAC,CAAC;EAEpE,MAAMc,eAAe,GAAG/B,mBAAmB,CAAC,MAAM,EAAEe,QAAQ,EAAEH,OAAO,CAAC;EACtE,MAAMoB,cAAc,GAAGjC,oBAAoB,CAAC0B,KAAK,CAAC;EAElDvB,qBAAqB,CAACY,QAAQ,EAAEW,KAAK,CAAC;EAEtC,OACE9B,KAAA,CAAAsC,aAAA,CAACnC,QAAQ;IAACiB,QAAQ,EAAEmB,OAAO,CAACnB,QAAQ;EAAE,GACpCpB,KAAA,CAAAsC,aAAA,CAAC7B,YAAY,CAACN,QAAQ;IACpBqC,KAAK,EAAE;MACLN,UAAU;MACVC,aAAa;MACbhB,QAAQ,EAAAsB,aAAA,CAAAA,aAAA,KACHtB,QAAQ,GACRF,OAAO,CAACyB,cAAc,CAAC1B,cAAc,CAAC,CAACD,KAAK;IAEnD;EAAE,GAEFf,KAAA,CAAAsC,aAAA,UAAAK,QAAA;IACEtB,SAAS,EAAEpB,UAAU,CACnB,WAAW,EAQXoC,cAAc,EACdD,eAAe,EACff,SAAS,EATTP,OAAO,IAAK,uBAAsBA,OAAQ,EAAC,EAC3CD,IAAI,IAAK,oBAAmBA,IAAK,EAAC,EAClCU,MAAM,IAAI,mBAAmB,EAC7BE,KAAK,IAAI,kBAAkB,EAC3BC,MAAM,IAAI,mBAAmB,EAC7BC,OAAO,IAAI,oBAAoB,EAC/BC,SAAS,IAAI,sBAIf,CAAE;IACFgB,GAAG,EAAEX;EAAW,GACZH,KAAK,GAERR,QACI,CACc,CACf,CAAC;AAEf,CAAC;AAEDP,KAAK,CAAC8B,qBAAqB,GAAG,IAAI;AAElC,eAAe9B,KAAK;AAEpBA,KAAK,CAACP,UAAU,GAAGA,UAAU"}
+{"version":3,"file":"Table.js","names":["React","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","props","_objectWithoutProperties","_excluded","elementRef","trCountRef","rerenderAlias","skeletonClasses","spacingClasses","createElement","Boolean","value","_objectSpread","getTranslation","_extends","ref","_supportsSpacingProps"],"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import React 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.\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} & 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    ...props\n  } = allProps\n\n  const { elementRef } = useStickyHeader(allProps)\n  const { trCountRef, rerenderAlias } = useHandleOddEven({ children })\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          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":";;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,OAAOC,QAAQ,MAAM,uBAAuB;AAC5C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,mBAAmB,QAAQ,4BAA4B;AAChE,SACEC,sBAAsB,EACtBC,qBAAqB,QAChB,+BAA+B;AACtC,OAAOC,UAAU,MAAM,mBAAmB;AAC1C,OAAOC,YAAY,MAAM,gBAAgB;AACzC,SAASC,eAAe,QAAQ,qBAAqB;AAKrD,SAASC,gBAAgB,QAAQ,WAAW;AAK5C,SAASH,UAAU;AAkEnB,OAAO,MAAMI,YAAY,GAAG;EAC1BC,IAAI,EAAE,OAAO;EACbC,OAAO,EAAE;AACX,CAAC;AAED,MAAMC,KAAK,GAAIC,cAA6B,IAAK;EAC/C,MAAMC,OAAO,GAAGjB,KAAK,CAACkB,UAAU,CAAChB,OAAO,CAAC;EAEzC,MAAMiB,QAAQ,GAAGb,sBAAsB,CACrCU,cAAc,EACdJ,YAAY,EACZK,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,KAAK,EACd;IACEK,QAAQ,EAAEH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG;EACrB,CACF,CAAC;EAED,MAAM;MACJC,SAAS;MACTC,QAAQ;MACRT,IAAI;MACJO,QAAQ;MACRN,OAAO;MACPS,MAAM;MACNC,YAAY;MACZC,KAAK;MACLC,MAAM;MACNC,OAAO;MACPC,SAAS;MACTC;IAEF,CAAC,GAAGV,QAAQ;IADPW,KAAK,GAAAC,wBAAA,CACNZ,QAAQ,EAAAa,SAAA;EAEZ,MAAM;IAAEC;EAAW,CAAC,GAAGvB,eAAe,CAACS,QAAQ,CAAC;EAChD,MAAM;IAAEe,UAAU;IAAEC;EAAc,CAAC,GAAGxB,gBAAgB,CAAC;IAAEW;EAAS,CAAC,CAAC;EAEpE,MAAMc,eAAe,GAAG/B,mBAAmB,CAAC,MAAM,EAAEe,QAAQ,EAAEH,OAAO,CAAC;EACtE,MAAMoB,cAAc,GAAGjC,oBAAoB,CAAC0B,KAAK,CAAC;EAElDvB,qBAAqB,CAACY,QAAQ,EAAEW,KAAK,CAAC;EAEtC,OACE9B,KAAA,CAAAsC,aAAA,CAACnC,QAAQ;IAACiB,QAAQ,EAAEmB,OAAO,CAACnB,QAAQ;EAAE,GACpCpB,KAAA,CAAAsC,aAAA,CAAC7B,YAAY,CAACN,QAAQ;IACpBqC,KAAK,EAAE;MACLN,UAAU;MACVC,aAAa;MACbhB,QAAQ,EAAAsB,aAAA,CAAAA,aAAA,KACHtB,QAAQ,GACRF,OAAO,CAACyB,cAAc,CAAC1B,cAAc,CAAC,CAACD,KAAK;IAEnD;EAAE,GAEFf,KAAA,CAAAsC,aAAA,UAAAK,QAAA;IACEtB,SAAS,EAAEpB,UAAU,CACnB,WAAW,EAQXoC,cAAc,EACdD,eAAe,EACff,SAAS,EATTP,OAAO,IAAK,uBAAsBA,OAAQ,EAAC,EAC3CD,IAAI,IAAK,oBAAmBA,IAAK,EAAC,EAClCU,MAAM,IAAI,mBAAmB,EAC7BE,KAAK,IAAI,kBAAkB,EAC3BC,MAAM,IAAI,mBAAmB,EAC7BC,OAAO,IAAI,oBAAoB,EAC/BC,SAAS,IAAI,sBAIf,CAAE;IACFgB,GAAG,EAAEX;EAAW,GACZH,KAAK,GAERR,QACI,CACc,CACf,CAAC;AAEf,CAAC;AAEDP,KAAK,CAAC8B,qBAAqB,GAAG,IAAI;AAElC,eAAe9B,KAAK;AAEpBA,KAAK,CAACP,UAAU,GAAGA,UAAU"}

package/components/tabs/Tabs.js

@@ -1,3 +1,5 @@
+"use client";
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";