@dnb/eufemia 10.20.0 → 10.22.0

package/components/slider/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/slider/types.ts"],"sourcesContent":["import React from 'react'\n\nimport type { SuffixChildren } from '../../shared/helpers/Suffix'\nimport type {\n  formatReturnType,\n  formatOptionParams,\n} from '../number-format/NumberUtils'\nimport { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { GlobalStatusConfigObject } from '../GlobalStatus'\n\nexport type ValueTypes = number | Array<number>\nexport type NumberFormatTypes =\n  | formatOptionParams\n  | ((value: number) => unknown)\nexport type onChangeEventProps = {\n  value: ValueTypes\n  rawValue: number\n  number?: formatReturnType | null\n  event?: Event\n}\n\nexport type SliderProps = IncludeSnakeCase<{\n  /** prepends the Form Label component. If no ID is provided, a random ID is created. */\n  label?: React.ReactNode\n\n  /** use `labelDirection=\"vertical\"` to change the label layout direction. Defaults to `horizontal`. */\n  labelDirection?: 'vertical' | 'horizontal'\n\n  /** use `true` to make the label only readable by screen readers. */\n  labelSrOnly?: boolean\n\n  /** text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. */\n  status?: string | boolean\n\n  /** defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */\n  statusState?: 'error' | 'info'\n\n  /** use an object to define additional FormStatus properties. */\n  statusProps?: Record<string, unknown>\n  statusNoAnimation?: boolean\n\n  /** the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). */\n  globalStatus?: GlobalStatusConfigObject\n\n  /** text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component. */\n  suffix?: SuffixChildren\n\n  /** give the slider thumb button a title for accessibility reasons. Defaults to `null`. */\n  thumbTitle?: string\n\n  /** give the add button a title for accessibility reasons. Defaults to `+`. */\n  addTitle?: string\n\n  /** give the subtract button a title for accessibility reasons. Defaults to `−`. */\n  subtractTitle?: string\n\n  /** the minimum value. Defaults to `0`. */\n  min?: number\n\n  /** the maximum value. Defaults to `100`. */\n  max?: number\n\n  /** the `value` of the slider as a number. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs). */\n  value?: ValueTypes\n\n  /** the steps the slider takes on changing the value. Defaults to `null`. */\n  step?: number\n\n  /** show the slider vertically. Defaults to `false`. */\n  vertical?: boolean\n\n  /** show the slider reversed. Defaults to `false`. */\n  reverse?: boolean\n\n  /** if set to `true`, then the slider will be 100% in `width`. */\n  stretch?: boolean\n\n  /** provide a function callback or use the options from the [NumberFormat](/uilib/components/number-format/properties) component. It will show a formatted number in the Tooltip (`tooltip={true}`) and enhance the screen reader UX. It will also extend the `onChange` event return object with a formatted `number` property. */\n  numberFormat?: NumberFormatTypes\n\n  /** use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value. Defaults to `null`. */\n  tooltip: boolean\n\n  /** use `true` to always show the tooltip, in addition to the `tooltip` property.  */\n  alwaysShowTooltip: boolean\n\n  /** removes the helper buttons. Defaults to `false`. */\n  hideButtons?: boolean\n\n  /** use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`. */\n  multiThumbBehavior?: 'swap' | 'omit' | 'push'\n\n  /** if set to `true`, an overlaying skeleton with animation will be shown. */\n  skeleton?: SkeletonShow\n\n  id?: string\n  disabled?: boolean\n  className?: string\n\n  /**  will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`. */\n  onChange?: (props: onChangeEventProps) => void\n\n  /** will be called once the user stops dragging. Returns `{ event }`. */\n  onDragStart?: (props: { event: MouseEvent | TouchEvent }) => void\n\n  /** will be called once the user starts dragging. Returns `{ event }`. */\n  onDragEnd?: (props: { event: MouseEvent | TouchEvent }) => void\n\n  children?: React.ReactChild\n}>\n\nexport type SliderAllProps = SliderProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, keyof SliderProps>\n\nexport type ThumbStateEnums =\n  | 'initial'\n  | 'normal'\n  | 'activated'\n  | 'released'\n\nexport type SliderContextTypes = {\n  isMulti: boolean\n  isReverse: boolean\n  isVertical: boolean\n  shouldAnimate: boolean\n  thumbState: ThumbStateEnums\n  thumbIndex: React.RefObject<number>\n  showStatus: boolean\n  showButtons: boolean\n  attributes: unknown\n  allProps: SliderProps\n  value: ValueTypes\n  values: Array<number>\n  setValue: (value: ValueTypes) => void\n  setThumbState: (thumbState: ThumbStateEnums) => void\n  setThumbIndex: (thumbIndex: number) => void\n  emitChange: (emitEvent: MouseEvent | TouchEvent, value: number) => void\n  trackRef: React.RefObject<HTMLElement>\n  setShouldAnimate: (state: boolean) => void\n  animationTimeout: React.RefObject<NodeJS.Timeout>\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/slider/types.ts"],"sourcesContent":["import React from 'react'\n\nimport type { SuffixChildren } from '../../shared/helpers/Suffix'\nimport type {\n  formatReturnType,\n  formatOptionParams,\n} from '../number-format/NumberUtils'\nimport { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { GlobalStatusConfigObject } from '../GlobalStatus'\n\nexport type ValueTypes = number | Array<number>\nexport type NumberFormatTypes =\n  | formatOptionParams\n  | ((value: number) => unknown)\nexport type onChangeEventProps = {\n  value: ValueTypes\n  rawValue: number\n  number?: formatReturnType | null\n  event?: Event\n}\n\nexport type SliderExtensions = Record<\n  string,\n  { instance: React.ElementType; [key: string]: unknown }\n>\n\nexport type SliderProps = IncludeSnakeCase<{\n  /** prepends the Form Label component. If no ID is provided, a random ID is created. */\n  label?: React.ReactNode\n\n  /** use `labelDirection=\"vertical\"` to change the label layout direction. Defaults to `horizontal`. */\n  labelDirection?: 'vertical' | 'horizontal'\n\n  /** use `true` to make the label only readable by screen readers. */\n  labelSrOnly?: boolean\n\n  /** text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. */\n  status?: string | boolean\n\n  /** defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. */\n  statusState?: 'error' | 'info'\n\n  /** use an object to define additional FormStatus properties. */\n  statusProps?: Record<string, unknown>\n  statusNoAnimation?: boolean\n\n  /** the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). */\n  globalStatus?: GlobalStatusConfigObject\n\n  /** text describing the content of the Slider more than the label. You can also send in a React component, so it gets wrapped inside the Slider component. */\n  suffix?: SuffixChildren\n\n  /** give the slider thumb button a title for accessibility reasons. Defaults to `null`. */\n  thumbTitle?: string\n\n  /** give the add button a title for accessibility reasons. Defaults to `+`. */\n  addTitle?: string\n\n  /** give the subtract button a title for accessibility reasons. Defaults to `−`. */\n  subtractTitle?: string\n\n  /** the minimum value. Defaults to `0`. */\n  min?: number\n\n  /** the maximum value. Defaults to `100`. */\n  max?: number\n\n  /** the `value` of the slider as a number. If an array with numbers is provided, each number will represent a thumb button (the `+` and `-` button will be hidden on multiple thumbs). */\n  value?: ValueTypes\n\n  /** the steps the slider takes on changing the value. Defaults to `null`. */\n  step?: number\n\n  /** makes it possible to display overlays with other functionality such as a marker on the slider marking a given value. */\n  extensions: SliderExtensions\n\n  /** show the slider vertically. Defaults to `false`. */\n  vertical?: boolean\n\n  /** show the slider reversed. Defaults to `false`. */\n  reverse?: boolean\n\n  /** if set to `true`, then the slider will be 100% in `width`. */\n  stretch?: boolean\n\n  /** provide a function callback or use the options from the [NumberFormat](/uilib/components/number-format/properties) component. It will show a formatted number in the Tooltip (`tooltip={true}`) and enhance the screen reader UX. It will also extend the `onChange` event return object with a formatted `number` property. */\n  numberFormat?: NumberFormatTypes\n\n  /** use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value. Defaults to `null`. */\n  tooltip: boolean\n\n  /** use `true` to always show the tooltip, in addition to the `tooltip` property.  */\n  alwaysShowTooltip: boolean\n\n  /** removes the helper buttons. Defaults to `false`. */\n  hideButtons?: boolean\n\n  /** use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`. */\n  multiThumbBehavior?: 'swap' | 'omit' | 'push'\n\n  /** if set to `true`, an overlaying skeleton with animation will be shown. */\n  skeleton?: SkeletonShow\n\n  id?: string\n  disabled?: boolean\n  className?: string\n\n  /**  will be called on state changes made by the user. The callback `value` and `rawValue` is a number `{ value, rawValue, event }`. But if the prop `numberFormat` is given, then it will return an additional `number` with the given format `{ value, number, rawValue, event }`. */\n  onChange?: (props: onChangeEventProps) => void\n\n  /** will be called once the user stops dragging. Returns `{ event }`. */\n  onDragStart?: (props: { event: MouseEvent | TouchEvent }) => void\n\n  /** will be called once the user starts dragging. Returns `{ event }`. */\n  onDragEnd?: (props: { event: MouseEvent | TouchEvent }) => void\n\n  children?: React.ReactChild\n}>\n\nexport type SliderAllProps = SliderProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, keyof SliderProps>\n\nexport type ThumbStateEnums =\n  | 'initial'\n  | 'normal'\n  | 'activated'\n  | 'released'\n\nexport type SliderContextTypes = {\n  isMulti: boolean\n  isReverse: boolean\n  isVertical: boolean\n  shouldAnimate: boolean\n  thumbState: ThumbStateEnums\n  thumbIndex: React.RefObject<number>\n  showStatus: boolean\n  showButtons: boolean\n  attributes: unknown\n  allProps: SliderProps\n  value: ValueTypes\n  values: Array<number>\n  setValue: (value: ValueTypes) => void\n  setThumbState: (thumbState: ThumbStateEnums) => void\n  setThumbIndex: (thumbIndex: number) => void\n  emitChange: (emitEvent: MouseEvent | TouchEvent, value: number) => void\n  trackRef: React.RefObject<HTMLElement>\n  setShouldAnimate: (state: boolean) => void\n  animationTimeout: React.RefObject<NodeJS.Timeout>\n}\n"],"mappings":""}

package/components/space/SpacingHelper.d.ts

@@ -1,14 +1,14 @@
 export namespace spacingPropTypes {
-    const space: PropTypes.Requireable<NonNullable<string | number | boolean | PropTypes.InferProps<{
+    let space: PropTypes.Requireable<NonNullable<string | number | boolean | PropTypes.InferProps<{
         top: PropTypes.Requireable<NonNullable<string | number | boolean>>;
         right: PropTypes.Requireable<NonNullable<string | number | boolean>>;
         bottom: PropTypes.Requireable<NonNullable<string | number | boolean>>;
         left: PropTypes.Requireable<NonNullable<string | number | boolean>>;
     }>>>;
-    const top: PropTypes.Requireable<NonNullable<string | number | boolean>>;
-    const right: PropTypes.Requireable<NonNullable<string | number | boolean>>;
-    const bottom: PropTypes.Requireable<NonNullable<string | number | boolean>>;
-    const left: PropTypes.Requireable<NonNullable<string | number | boolean>>;
+    let top: PropTypes.Requireable<NonNullable<string | number | boolean>>;
+    let right: PropTypes.Requireable<NonNullable<string | number | boolean>>;
+    let bottom: PropTypes.Requireable<NonNullable<string | number | boolean>>;
+    let left: PropTypes.Requireable<NonNullable<string | number | boolean>>;
 }
 import PropTypes from 'prop-types';
 export { createSpacingClasses, createSpacingProperties, removeSpaceProps } from "./SpacingUtils";

package/components/table/Table.js

@@ -14,7 +14,7 @@ import { createSpacingClasses } from '../space/SpacingHelper';
 import { createSkeletonClass } from '../skeleton/SkeletonHelper';
 import { extendPropsWithContext, validateDOMAttributes } from '../../shared/component-helper';
 import ScrollView from './TableScrollView';
-import TableContext from './TableContext';
+import { TableContext } from './TableContext';
 import { useStickyHeader } from './TableStickyHeader';
 import { useHandleOddEven } from './TableTr';
 export { ScrollView };

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,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,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/table/TableAccordion.js

@@ -1,17 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _TableTdAccordionIcon, _TableThAccordionIcon, _Td;
+var _Td;
 import React from 'react';
 import classnames from 'classnames';
 import Button from '../button/Button';
 import IconPrimary from '../icon/IconPrimary';
 import Th from './TableTh';
 import Td from './TableTd';
-import TableContext from './TableContext';
+import { TableAccordionContext, TableContext } from './TableContext';
 import keycode from 'keycode';
 import { hasSelectedText } from '../../shared/helpers';
-import TableAccordionContent, { TrContext } from './TableAccordionContent';
+import TableAccordionTd from './TableAccordionTd';
+import TableAccordionTr from './TableAccordionTr';
 export function useTableAccordion(_ref) {
-  var _tableContext$allProp, _tableContext$allProp2;
+  var _tableContext$allProp;
   let {
     children,
     className,
@@ -37,17 +38,21 @@ export function useTableAccordion(_ref) {
   });
   const [trIsHover, setHover] = React.useState(false);
   const [trHadClick, setHadClick] = React.useState(false);
-  let content = React.Children.toArray(children);
   if (!(tableContext !== null && tableContext !== void 0 && (_tableContext$allProp = tableContext.allProps) !== null && _tableContext$allProp !== void 0 && _tableContext$allProp.accordion)) {
     return null;
   }
-  const accordionContent = content.find(element => {
-    return element.type === TableAccordionContent;
+  let headerContent = React.Children.toArray(children);
+  const addExpandIcon = icon => {
+    if (tableContext.allProps.accordionChevronPlacement === 'end') {
+      headerContent.push(icon);
+    } else {
+      headerContent.unshift(icon);
+    }
+  };
+  const accordionContent = headerContent.filter(element => {
+    return isAccordionElement(element);
   });
-  const hasAccordionContent = React.isValidElement(accordionContent);
-  const countTds = hasAccordionContent ? children.filter(element => {
-    return element.type === Td;
-  }).length + 1 : null;
+  const hasAccordionContent = accordionContent.length !== 0 && accordionContent.every(element => React.isValidElement(element));
   const trParams = !disabled && hasAccordionContent ? {
     onClick: toggleOpenTr,
     onMouseEnter: onMouseEnterHandler,
@@ -55,34 +60,25 @@ export function useTableAccordion(_ref) {
     onKeyDown: onKeydownHandler
   } : {};
   if (hasAccordionContent) {
-    content = content.filter(element => {
-      const hasContent = element.type === TableAccordionContent;
-      return !hasContent;
+    headerContent = headerContent.filter(element => {
+      return !isAccordionElement(element);
     });
-    const tdElem = _TableTdAccordionIcon || (_TableTdAccordionIcon = React.createElement(TableTdAccordionIcon, {
+    addExpandIcon(_Td || (_Td = React.createElement(Td, {
+      className: "dnb-table__td__accordion-icon",
       key: "td-icon"
-    }));
-    if (tableContext.allProps.accordionChevronPlacement === 'end') {
-      content.push(tdElem);
-    } else {
-      content.unshift(tdElem);
-    }
-  } else if (tableContext !== null && tableContext !== void 0 && (_tableContext$allProp2 = tableContext.allProps) !== null && _tableContext$allProp2 !== void 0 && _tableContext$allProp2.accordion) {
-    const isTh = content.some(element => {
-      return element.type === Th;
-    });
-    if (isTh) {
-      const thElem = _TableThAccordionIcon || (_TableThAccordionIcon = React.createElement(TableThAccordionIcon, {
-        key: "th-icon"
-      }));
-      if (tableContext.allProps.accordionChevronPlacement === 'end') {
-        content.push(thElem);
-      } else {
-        content.unshift(thElem);
-      }
-    }
+    }, React.createElement(TableAccordionToggleButton, null))));
+  } else if (isTableHead(headerContent)) {
+    var _tableContext$allProp2;
+    addExpandIcon(React.createElement(Th, {
+      "aria-hidden": true,
+      className: "dnb-table__th__accordion-icon",
+      key: "th-icon"
+    }, React.createElement("div", null, tableContext === null || tableContext === void 0 ? void 0 : (_tableContext$allProp2 = tableContext.allProps) === null || _tableContext$allProp2 === void 0 ? void 0 : _tableContext$allProp2.accordionToggleButtonSR)));
   }
-  return React.createElement(TrContext.Provider, {
+  const countTds = hasAccordionContent ? headerContent.filter(element => {
+    return element.type === Td;
+  }).length : null;
+  return React.createElement(TableAccordionContext.Provider, {
     value: {
       toggleOpenTr,
       trIsOpen,
@@ -95,7 +91,7 @@ export function useTableAccordion(_ref) {
   }, React.createElement("tr", _extends({
     tabIndex: accordionContent && !disabled ? 0 : undefined,
     className: classnames(className, hasAccordionContent && 'dnb-table__tr--has-accordion-content', trIsOpen && 'dnb-table__tr--expanded', disabled && 'dnb-table__tr--disabled', noAnimation && 'dnb-table__tr--no-animation', trIsHover && trHadClick && 'dnb-table__tr--hover')
-  }, trParams, props), content), accordionContent);
+  }, trParams, props), headerContent), accordionContent);
   function onKeydownHandler(event) {
     switch (keycode(event)) {
       case 'space':
@@ -118,8 +114,9 @@ export function useTableAccordion(_ref) {
     setHadClick(false);
   }
   function toggleOpenTr(event) {
+    let allowInteractiveElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     const target = event.target;
-    if (document.activeElement !== target && target.tagName !== 'INPUT' && target.tagName !== 'LABEL' && !hasSelectedText()) {
+    if ((document.activeElement !== target && target.tagName !== 'INPUT' && target.tagName !== 'LABEL' || allowInteractiveElement) && !hasSelectedText()) {
       setOpen(!trIsOpen);
       setHadClick(true);
       onClick === null || onClick === void 0 ? void 0 : onClick(event);
@@ -128,7 +125,7 @@ export function useTableAccordion(_ref) {
 }
 export function TableAccordionToggleButton() {
   var _React$useContext;
-  const trContext = React.useContext(TrContext);
+  const tableAccordionContext = React.useContext(TableAccordionContext);
   const allProps = (_React$useContext = React.useContext(TableContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.allProps;
   const iconSize = allProps.size === 'medium' || allProps.size === 'small' ? 'basis' : 'medium';
   return React.createElement("span", {
@@ -140,21 +137,10 @@ export function TableAccordionToggleButton() {
     className: "dnb-sr-only",
     tabIndex: -1,
     "aria-label": allProps === null || allProps === void 0 ? void 0 : allProps.accordionToggleButtonSR,
-    "aria-expanded": Boolean(trContext === null || trContext === void 0 ? void 0 : trContext.trIsOpen),
-    on_click: trContext === null || trContext === void 0 ? void 0 : trContext.toggleOpenTr
+    "aria-expanded": Boolean(tableAccordionContext === null || tableAccordionContext === void 0 ? void 0 : tableAccordionContext.trIsOpen),
+    on_click: event => tableAccordionContext === null || tableAccordionContext === void 0 ? void 0 : tableAccordionContext.toggleOpenTr(event, true)
   }));
 }
-function TableThAccordionIcon() {
-  var _tableContext$allProp3;
-  const tableContext = React.useContext(TableContext);
-  return React.createElement(Th, {
-    "aria-hidden": true,
-    className: "dnb-table__th__accordion-icon"
-  }, React.createElement("div", null, tableContext === null || tableContext === void 0 ? void 0 : (_tableContext$allProp3 = tableContext.allProps) === null || _tableContext$allProp3 === void 0 ? void 0 : _tableContext$allProp3.accordionToggleButtonSR));
-}
-function TableTdAccordionIcon() {
-  return _Td || (_Td = React.createElement(Td, {
-    className: "dnb-table__td__accordion-icon"
-  }, React.createElement(TableAccordionToggleButton, null)));
-}
+const isAccordionElement = element => element.type === TableAccordionTd || element.type === TableAccordionTr;
+const isTableHead = children => children.some(element => element.type === Th);
 //# sourceMappingURL=TableAccordion.js.map

package/components/table/TableAccordion.js.map

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

package/components/table/TableAccordionTd.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TableAccordionTrProps } from './TableAccordionTr';
+export type TableAccordionTdProps = {
+    /**
+     * Overwrite the internal collected colSpan (add +1)
+     */
+    colSpan?: number;
+};
+export default function TableAccordionTd(componentProps: TableAccordionTdProps & TableAccordionTrProps & React.TableHTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;

package/{es/components/table/TableAccordionContent.js → components/table/TableAccordionTd.js}

@@ -1,18 +1,14 @@
-"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";
 const _excluded = ["expanded", "noAnimation", "className", "children", "colSpan", "style"];
 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, { useCallback, useEffect } from 'react';
+import React from 'react';
 import classnames from 'classnames';
-import { useHeightAnimation } from '../height-animation/useHeightAnimation';
-import { getClosestScrollViewElement } from '../../shared/component-helper';
-import TableContext from './TableContext';
-export const TrContext = React.createContext(null);
-export default function TableAccordionContent(componentProps) {
+import useTableAnimationHandler from './useTableAnimationHandler';
+import { TableAccordionContext, TableContext } from './TableContext';
+export default function TableAccordionTd(componentProps) {
   var _React$useContext;
   const {
       expanded = null,
@@ -24,72 +20,42 @@ export default function TableAccordionContent(componentProps) {
     } = componentProps,
     props = _objectWithoutProperties(componentProps, _excluded);
   const allProps = (_React$useContext = React.useContext(TableContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.allProps;
-  const trContext = React.useContext(TrContext);
+  const tableAccordionContext = React.useContext(TableAccordionContext);
   const innerRef = React.useRef(null);
   const trRef = React.useRef(null);
-  const [ariaLive, setAriaLive] = React.useState(null);
-  const open = Boolean(expanded || (trContext === null || trContext === void 0 ? void 0 : trContext.trIsOpen));
-  const scrollViewHandler = useCallback((clip = open) => {
-    const scollView = getClosestScrollViewElement(trRef.current);
-    if (scollView instanceof HTMLElement) {
-      scollView.style.overflow = clip ? 'clip' : '';
-    }
-  }, [open]);
-  useEffect(() => {
-    if (open) {
-      scrollViewHandler();
-    }
-  }, [open, scrollViewHandler]);
-  const onOpen = useCallback(state => {
-    setAriaLive(state ? true : null);
-  }, []);
-  const onAnimationEnd = useCallback(state => {
-    var _trContext$onOpened, _trContext$onClosed;
-    const event = {
-      target: trRef.current
-    };
-    switch (state) {
-      case 'opened':
-        (_trContext$onOpened = trContext.onOpened) === null || _trContext$onOpened === void 0 ? void 0 : _trContext$onOpened.call(trContext, event);
-        break;
-      case 'closed':
-        (_trContext$onClosed = trContext.onClosed) === null || _trContext$onClosed === void 0 ? void 0 : _trContext$onClosed.call(trContext, event);
-        break;
-    }
-    scrollViewHandler(false);
-  }, [scrollViewHandler, trContext]);
   const {
+    ariaLive,
     isInDOM,
     isAnimating,
     isVisibleParallax,
     firstPaintStyle
-  } = useHeightAnimation(innerRef, {
-    open,
-    animate: Boolean(!noAnimation && !(trContext !== null && trContext !== void 0 && trContext.noAnimation)),
-    onOpen,
-    onAnimationEnd
+  } = useTableAnimationHandler({
+    innerRef,
+    trRef,
+    expanded,
+    noAnimation
   });
-  const countTds = (trContext === null || trContext === void 0 ? void 0 : trContext.countTds) || colSpan;
+  const countTds = (tableAccordionContext === null || tableAccordionContext === void 0 ? void 0 : tableAccordionContext.countTds) || colSpan;
   return React.createElement("tr", _extends({
     "aria-hidden": !isInDOM,
     hidden: isInDOM ? undefined : true,
     role: isInDOM ? 'row' : undefined,
     style: _objectSpread(_objectSpread({}, firstPaintStyle), style),
-    className: classnames('dnb-table__tr__accordion_content', className, isInDOM && "dnb-table__tr dnb-table__tr__accordion_content--expanded", isAnimating && 'dnb-table__tr__accordion_content--animating', isVisibleParallax && 'dnb-table__tr__accordion_content--parallax'),
+    className: classnames("dnb-table__tr__accordion-content dnb-table__tr__accordion-content--single", className, isInDOM && "dnb-table__tr dnb-table__tr__accordion-content--expanded", isAnimating && 'dnb-table__tr__accordion-content--animating', isVisibleParallax && 'dnb-table__tr__accordion-content--parallax'),
     ref: trRef
   }, props), React.createElement("td", {
     role: isInDOM ? 'cell' : undefined,
     colSpan: countTds,
     className: "dnb-table__td"
   }, isInDOM && React.createElement("div", {
-    className: "dnb-table__tr__accordion_content__inner",
+    className: "dnb-table__tr__accordion-content__inner",
     ref: innerRef
   }, React.createElement("div", {
-    className: "dnb-table__tr__accordion_content__inner__spacing"
+    className: "dnb-table__tr__accordion-content__inner__spacing"
   }, children)), React.createElement("span", {
     className: "dnb-sr-only"
   }, React.createElement("span", {
     "aria-live": "assertive"
   }, isInDOM && ariaLive ? allProps === null || allProps === void 0 ? void 0 : allProps.accordionMoreContentSR : null))));
 }
-//# sourceMappingURL=TableAccordionContent.js.map
+//# sourceMappingURL=TableAccordionTd.js.map

package/components/table/TableAccordionTd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableAccordionTd.js","names":["React","classnames","useTableAnimationHandler","TableAccordionContext","TableContext","TableAccordionTd","componentProps","_React$useContext","expanded","noAnimation","className","children","colSpan","style","props","_objectWithoutProperties","_excluded","allProps","useContext","tableAccordionContext","innerRef","useRef","trRef","ariaLive","isInDOM","isAnimating","isVisibleParallax","firstPaintStyle","countTds","createElement","_extends","hidden","undefined","role","_objectSpread","ref","accordionMoreContentSR"],"sources":["../../../../src/components/table/TableAccordionTd.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport useTableAnimationHandler from './useTableAnimationHandler'\nimport { TableAccordionContext, TableContext } from './TableContext'\nimport { TableAccordionTrProps } from './TableAccordionTr'\n\nexport type TableAccordionTdProps = {\n  /**\n   * Overwrite the internal collected colSpan (add +1)\n   */\n  colSpan?: number\n}\n\nexport default function TableAccordionTd(\n  componentProps: TableAccordionTdProps &\n    TableAccordionTrProps &\n    React.TableHTMLAttributes<HTMLTableRowElement>\n) {\n  const {\n    expanded = null,\n    noAnimation = null,\n    className,\n    children,\n    colSpan = 100,\n    style,\n    ...props\n  } = componentProps\n\n  const allProps = React.useContext(TableContext)?.allProps\n  const tableAccordionContext = React.useContext(TableAccordionContext)\n  const innerRef = React.useRef<HTMLDivElement>(null)\n  const trRef = React.useRef<HTMLTableRowElement>(null)\n  const {\n    ariaLive,\n    isInDOM,\n    isAnimating,\n    isVisibleParallax,\n    firstPaintStyle,\n  } = useTableAnimationHandler({\n    innerRef,\n    trRef,\n    expanded,\n    noAnimation,\n  })\n  const countTds = tableAccordionContext?.countTds || colSpan\n\n  return (\n    <tr\n      /**\n       * VoiceOver needs the \"tr\" to be in the DOM in order to be able to continue reading downwards,\n       * even it is either closed or opened. Else VO pretends that this current table row is the end of the table.\n       *\n       * + All the browsers do count the correct number (childCount) of rows + NVDA counts correct when used with Chrome.\n       * - Firefox on Windows does it as well, but not when used with NVDA.\n       */\n      aria-hidden={!isInDOM} // NVDA and VoiceOver needs \"aria-hidden\" to remove it from the accessibility tree\n      hidden={isInDOM ? undefined : true} // NVDA and VoiceOver needs \"hidden\" to be true in order to not count invisible table rows (based on \"tr\" element)\n      role={isInDOM ? 'row' : undefined} // NVDA and VoiceOver needs \"hidden\" to be true in order to not count invisible table rows (based on \"role\" element)\n      style={{ ...firstPaintStyle, ...style }}\n      className={classnames(\n        isInDOM && 'dnb-table__tr',\n        'dnb-table__tr__accordion-content',\n        'dnb-table__tr__accordion-content--single',\n        isInDOM && 'dnb-table__tr__accordion-content--expanded',\n        isAnimating && 'dnb-table__tr__accordion-content--animating',\n        isVisibleParallax && 'dnb-table__tr__accordion-content--parallax',\n        className\n      )}\n      ref={trRef}\n      {...props}\n    >\n      <td\n        role={isInDOM ? 'cell' : undefined} // remove the \"role\", because the parent role is removed as well\n        colSpan={countTds}\n        className=\"dnb-table__td\"\n      >\n        {isInDOM && (\n          <div\n            className=\"dnb-table__tr__accordion-content__inner\"\n            ref={innerRef}\n          >\n            <div className=\"dnb-table__tr__accordion-content__inner__spacing\">\n              {children}\n            </div>\n          </div>\n        )}\n        <span className=\"dnb-sr-only\">\n          <span aria-live=\"assertive\">\n            {isInDOM && ariaLive ? allProps?.accordionMoreContentSR : null}\n          </span>\n        </span>\n      </td>\n    </tr>\n  )\n}\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,wBAAwB,MAAM,4BAA4B;AACjE,SAASC,qBAAqB,EAAEC,YAAY,QAAQ,gBAAgB;AAUpE,eAAe,SAASC,gBAAgBA,CACtCC,cAEgD,EAChD;EAAA,IAAAC,iBAAA;EACA,MAAM;MACJC,QAAQ,GAAG,IAAI;MACfC,WAAW,GAAG,IAAI;MAClBC,SAAS;MACTC,QAAQ;MACRC,OAAO,GAAG,GAAG;MACbC;IAEF,CAAC,GAAGP,cAAc;IADbQ,KAAK,GAAAC,wBAAA,CACNT,cAAc,EAAAU,SAAA;EAElB,MAAMC,QAAQ,IAAAV,iBAAA,GAAGP,KAAK,CAACkB,UAAU,CAACd,YAAY,CAAC,cAAAG,iBAAA,uBAA9BA,iBAAA,CAAgCU,QAAQ;EACzD,MAAME,qBAAqB,GAAGnB,KAAK,CAACkB,UAAU,CAACf,qBAAqB,CAAC;EACrE,MAAMiB,QAAQ,GAAGpB,KAAK,CAACqB,MAAM,CAAiB,IAAI,CAAC;EACnD,MAAMC,KAAK,GAAGtB,KAAK,CAACqB,MAAM,CAAsB,IAAI,CAAC;EACrD,MAAM;IACJE,QAAQ;IACRC,OAAO;IACPC,WAAW;IACXC,iBAAiB;IACjBC;EACF,CAAC,GAAGzB,wBAAwB,CAAC;IAC3BkB,QAAQ;IACRE,KAAK;IACLd,QAAQ;IACRC;EACF,CAAC,CAAC;EACF,MAAMmB,QAAQ,GAAG,CAAAT,qBAAqB,aAArBA,qBAAqB,uBAArBA,qBAAqB,CAAES,QAAQ,KAAIhB,OAAO;EAE3D,OACEZ,KAAA,CAAA6B,aAAA,OAAAC,QAAA;IAQE,eAAa,CAACN,OAAQ;IACtBO,MAAM,EAAEP,OAAO,GAAGQ,SAAS,GAAG,IAAK;IACnCC,IAAI,EAAET,OAAO,GAAG,KAAK,GAAGQ,SAAU;IAClCnB,KAAK,EAAAqB,aAAA,CAAAA,aAAA,KAAOP,eAAe,GAAKd,KAAK,CAAG;IACxCH,SAAS,EAAET,UAAU,8EAOnBS,SAAS,EANTc,OAAO,gEAIPC,WAAW,IAAI,6CAA6C,EAC5DC,iBAAiB,IAAI,4CAEvB,CAAE;IACFS,GAAG,EAAEb;EAAM,GACPR,KAAK,GAETd,KAAA,CAAA6B,aAAA;IACEI,IAAI,EAAET,OAAO,GAAG,MAAM,GAAGQ,SAAU;IACnCpB,OAAO,EAAEgB,QAAS;IAClBlB,SAAS,EAAC;EAAe,GAExBc,OAAO,IACNxB,KAAA,CAAA6B,aAAA;IACEnB,SAAS,EAAC,yCAAyC;IACnDyB,GAAG,EAAEf;EAAS,GAEdpB,KAAA,CAAA6B,aAAA;IAAKnB,SAAS,EAAC;EAAkD,GAC9DC,QACE,CACF,CACN,EACDX,KAAA,CAAA6B,aAAA;IAAMnB,SAAS,EAAC;EAAa,GAC3BV,KAAA,CAAA6B,aAAA;IAAM,aAAU;EAAW,GACxBL,OAAO,IAAID,QAAQ,GAAGN,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEmB,sBAAsB,GAAG,IACtD,CACF,CACJ,CACF,CAAC;AAET"}

package/components/table/TableAccordionTr.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type TableAccordionTrProps = {
+    /**
+     * Set to true to expanded the content on initial render
+     */
+    expanded?: boolean;
+    /**
+     * Set to true to skip animation
+     * Default: false
+     */
+    noAnimation?: boolean;
+};
+export default function TableAccordionTr(componentProps: TableAccordionTrProps & React.TableHTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;

package/components/table/TableAccordionTr.js

@@ -0,0 +1,51 @@
+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 = ["expanded", "noAnimation", "className", "children", "style"];
+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 from 'react';
+import classnames from 'classnames';
+import useTableAnimationHandler from './useTableAnimationHandler';
+import { TableContext } from './TableContext';
+import Td from './TableTd';
+export default function TableAccordionTr(componentProps) {
+  var _React$useContext;
+  const {
+      expanded = null,
+      noAnimation = null,
+      className,
+      children,
+      style
+    } = componentProps,
+    props = _objectWithoutProperties(componentProps, _excluded);
+  const allProps = (_React$useContext = React.useContext(TableContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.allProps;
+  const innerRef = React.useRef(null);
+  const trRef = React.useRef(null);
+  const {
+    ariaLive,
+    isInDOM,
+    isAnimating,
+    isVisibleParallax,
+    firstPaintStyle
+  } = useTableAnimationHandler({
+    innerRef,
+    trRef,
+    expanded,
+    noAnimation
+  });
+  const expandColumn = React.createElement(Td, null, React.createElement("span", {
+    className: "dnb-sr-only"
+  }, React.createElement("span", {
+    "aria-live": "assertive"
+  }, isInDOM && ariaLive ? allProps === null || allProps === void 0 ? void 0 : allProps.accordionMoreContentSR : null)));
+  return React.createElement("tr", _extends({
+    "aria-hidden": !isInDOM,
+    hidden: isInDOM ? undefined : true,
+    role: isInDOM ? 'row' : undefined,
+    style: _objectSpread(_objectSpread({}, firstPaintStyle), style),
+    className: classnames('dnb-table__tr__accordion-content', className, isInDOM && "dnb-table__tr dnb-table__tr__accordion-content--expanded", isAnimating && 'dnb-table__tr__accordion-content--animating', isVisibleParallax && 'dnb-table__tr__accordion-content--parallax'),
+    ref: trRef
+  }, props), allProps.accordionChevronPlacement !== 'end' && expandColumn, isInDOM && children, allProps.accordionChevronPlacement === 'end' && expandColumn);
+}
+//# sourceMappingURL=TableAccordionTr.js.map

package/components/table/TableAccordionTr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableAccordionTr.js","names":["React","classnames","useTableAnimationHandler","TableContext","Td","TableAccordionTr","componentProps","_React$useContext","expanded","noAnimation","className","children","style","props","_objectWithoutProperties","_excluded","allProps","useContext","innerRef","useRef","trRef","ariaLive","isInDOM","isAnimating","isVisibleParallax","firstPaintStyle","expandColumn","createElement","accordionMoreContentSR","_extends","hidden","undefined","role","_objectSpread","ref","accordionChevronPlacement"],"sources":["../../../../src/components/table/TableAccordionTr.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport useTableAnimationHandler from './useTableAnimationHandler'\nimport { TableContext } from './TableContext'\nimport Td from './TableTd'\n\nexport type TableAccordionTrProps = {\n  /**\n   * Set to true to expanded the content on initial render\n   */\n  expanded?: boolean\n\n  /**\n   * Set to true to skip animation\n   * Default: false\n   */\n  noAnimation?: boolean\n}\n\nexport default function TableAccordionTr(\n  componentProps: TableAccordionTrProps &\n    React.TableHTMLAttributes<HTMLTableRowElement>\n) {\n  const {\n    expanded = null,\n    noAnimation = null,\n    className,\n    children,\n    style,\n    ...props\n  } = componentProps\n\n  const allProps = React.useContext(TableContext)?.allProps\n  const innerRef = React.useRef<HTMLDivElement>(null)\n  const trRef = React.useRef<HTMLTableRowElement>(null)\n\n  const {\n    ariaLive,\n    isInDOM,\n    isAnimating,\n    isVisibleParallax,\n    firstPaintStyle,\n  } = useTableAnimationHandler({\n    innerRef,\n    trRef,\n    expanded,\n    noAnimation,\n  })\n\n  const expandColumn = (\n    <Td>\n      <span className=\"dnb-sr-only\">\n        <span aria-live=\"assertive\">\n          {isInDOM && ariaLive ? allProps?.accordionMoreContentSR : null}\n        </span>\n      </span>\n    </Td>\n  )\n\n  return (\n    <tr\n      /**\n       * VoiceOver needs the \"tr\" to be in the DOM in order to be able to continue reading downwards,\n       * even it is either closed or opened. Else VO pretends that this current table row is the end of the table.\n       *\n       * + All the browsers do count the correct number (childCount) of rows + NVDA counts correct when used with Chrome.\n       * - Firefox on Windows does it as well, but not when used with NVDA.\n       */\n      aria-hidden={!isInDOM} // NVDA and VoiceOver needs \"aria-hidden\" to remove it from the accessibility tree\n      hidden={isInDOM ? undefined : true} // NVDA and VoiceOver needs \"hidden\" to be true in order to not count invisible table rows (based on \"tr\" element)\n      role={isInDOM ? 'row' : undefined} // NVDA and VoiceOver needs \"hidden\" to be true in order to not count invisible table rows (based on \"role\" element)\n      style={{ ...firstPaintStyle, ...style }}\n      className={classnames(\n        isInDOM && 'dnb-table__tr',\n        'dnb-table__tr__accordion-content',\n        isInDOM && 'dnb-table__tr__accordion-content--expanded',\n        isAnimating && 'dnb-table__tr__accordion-content--animating',\n        isVisibleParallax && 'dnb-table__tr__accordion-content--parallax',\n        className\n      )}\n      ref={trRef}\n      {...props}\n    >\n      {allProps.accordionChevronPlacement !== 'end' && expandColumn}\n      {isInDOM && children}\n      {allProps.accordionChevronPlacement === 'end' && expandColumn}\n    </tr>\n  )\n}\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,wBAAwB,MAAM,4BAA4B;AACjE,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,OAAOC,EAAE,MAAM,WAAW;AAe1B,eAAe,SAASC,gBAAgBA,CACtCC,cACgD,EAChD;EAAA,IAAAC,iBAAA;EACA,MAAM;MACJC,QAAQ,GAAG,IAAI;MACfC,WAAW,GAAG,IAAI;MAClBC,SAAS;MACTC,QAAQ;MACRC;IAEF,CAAC,GAAGN,cAAc;IADbO,KAAK,GAAAC,wBAAA,CACNR,cAAc,EAAAS,SAAA;EAElB,MAAMC,QAAQ,IAAAT,iBAAA,GAAGP,KAAK,CAACiB,UAAU,CAACd,YAAY,CAAC,cAAAI,iBAAA,uBAA9BA,iBAAA,CAAgCS,QAAQ;EACzD,MAAME,QAAQ,GAAGlB,KAAK,CAACmB,MAAM,CAAiB,IAAI,CAAC;EACnD,MAAMC,KAAK,GAAGpB,KAAK,CAACmB,MAAM,CAAsB,IAAI,CAAC;EAErD,MAAM;IACJE,QAAQ;IACRC,OAAO;IACPC,WAAW;IACXC,iBAAiB;IACjBC;EACF,CAAC,GAAGvB,wBAAwB,CAAC;IAC3BgB,QAAQ;IACRE,KAAK;IACLZ,QAAQ;IACRC;EACF,CAAC,CAAC;EAEF,MAAMiB,YAAY,GAChB1B,KAAA,CAAA2B,aAAA,CAACvB,EAAE,QACDJ,KAAA,CAAA2B,aAAA;IAAMjB,SAAS,EAAC;EAAa,GAC3BV,KAAA,CAAA2B,aAAA;IAAM,aAAU;EAAW,GACxBL,OAAO,IAAID,QAAQ,GAAGL,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEY,sBAAsB,GAAG,IACtD,CACF,CACJ,CACL;EAED,OACE5B,KAAA,CAAA2B,aAAA,OAAAE,QAAA;IAQE,eAAa,CAACP,OAAQ;IACtBQ,MAAM,EAAER,OAAO,GAAGS,SAAS,GAAG,IAAK;IACnCC,IAAI,EAAEV,OAAO,GAAG,KAAK,GAAGS,SAAU;IAClCnB,KAAK,EAAAqB,aAAA,CAAAA,aAAA,KAAOR,eAAe,GAAKb,KAAK,CAAG;IACxCF,SAAS,EAAET,UAAU,CAEnB,kCAAkC,EAIlCS,SAAS,EALTY,OAAO,gEAGPC,WAAW,IAAI,6CAA6C,EAC5DC,iBAAiB,IAAI,4CAEvB,CAAE;IACFU,GAAG,EAAEd;EAAM,GACPP,KAAK,GAERG,QAAQ,CAACmB,yBAAyB,KAAK,KAAK,IAAIT,YAAY,EAC5DJ,OAAO,IAAIX,QAAQ,EACnBK,QAAQ,CAACmB,yBAAyB,KAAK,KAAK,IAAIT,YAC/C,CAAC;AAET"}

package/components/table/TableContext.d.ts

@@ -3,5 +3,5 @@
  *
  */
 import React from 'react';
-declare const TableContext: React.Context<any>;
-export default TableContext;
+export declare const TableContext: React.Context<any>;
+export declare const TableAccordionContext: React.Context<any>;

package/components/table/TableContext.js

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

package/components/table/TableContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableContext.js","names":["React","TableContext","createContext"],"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["/**\n * Web TableContext Context\n *\n */\n\nimport React from 'react'\n\nconst TableContext = React.createContext(null)\n\nexport default TableContext\n"],"mappings":"AAKA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,YAAY,GAAGD,KAAK,CAACE,aAAa,CAAC,IAAI,CAAC;AAE9C,eAAeD,YAAY"}
+{"version":3,"file":"TableContext.js","names":["React","TableContext","createContext","TableAccordionContext"],"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["/**\n * Web TableContext Context\n *\n */\n\nimport React from 'react'\n\nexport const TableContext = React.createContext(null)\n\nexport const TableAccordionContext = React.createContext(null)\n"],"mappings":"AAKA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAO,MAAMC,YAAY,GAAGD,KAAK,CAACE,aAAa,CAAC,IAAI,CAAC;AAErD,OAAO,MAAMC,qBAAqB,GAAGH,KAAK,CAACE,aAAa,CAAC,IAAI,CAAC"}

package/components/table/TableTd.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import TableAccordionContent from './TableAccordionContent';
+import TableAccordionTd from './TableAccordionTd';
 export type TableTdProps = {
     /**
      * if set to `true`, no padding will be added
@@ -19,6 +19,6 @@ export type TableTdProps = {
 };
 declare function Td(componentProps: TableTdProps & React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace Td {
-    var AccordionContent: typeof TableAccordionContent;
+    var AccordionContent: typeof TableAccordionTd;
 }
 export default Td;

package/components/table/TableTd.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 const _excluded = ["className", "children", "noSpacing", "spacing"];
 import React from 'react';
 import classnames from 'classnames';
-import TableAccordionContent from './TableAccordionContent';
+import TableAccordionTd from './TableAccordionTd';
 export default function Td(componentProps) {
   const {
       className,
@@ -17,5 +17,5 @@ export default function Td(componentProps) {
     className: classnames('dnb-table__td', className, noSpacing && 'dnb-table__td--no-spacing', spacing && `dnb-table__td--spacing-${spacing}`)
   }, props), children);
 }
-Td.AccordionContent = TableAccordionContent;
+Td.AccordionContent = TableAccordionTd;
 //# sourceMappingURL=TableTd.js.map