@danske/sapphire-react-lab 0.106.2 → 0.107.0

package/build/esm/lab/src/Autocomplete/src/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","sources":["../../../../../../src/Autocomplete/src/Autocomplete.tsx"],"sourcesContent":["import React, { Key, ReactElement, useRef } from 'react';\nimport {\n  ListBoxProps,\n  useThemeCheck,\n  useSapphireStyleProps,\n  SapphireStyleProps,\n  ListBoxPopover,\n  useComboBoxState,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { useComboBox } from 'react-aria/useComboBox';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\nimport { useFocusableRef } from '@react-spectrum/utils';\nimport type { ComboBoxProps } from 'react-stately/useComboBoxState';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\n\nexport type AutocompleteProps<T extends object> = GlobalDomAttributes &\n  SapphireStyleProps &\n  Pick<\n    ComboBoxProps<T>,\n    | 'items'\n    | 'children'\n    | 'inputValue'\n    | 'defaultInputValue'\n    | 'onInputChange'\n    | 'isDisabled'\n  > &\n  Pick<ListBoxProps<T>, 'loadingState' | 'loadingSkeletonRowsCount'> & {\n    /**\n     * This prop is badly named. It is NOT related to a selection state being\n     * changed since there is no selection state in this component.\n     *\n     * This callback simply notifies you when the user filled in the text field\n     * by selecting an option from the autocomplete dropdown. Similar to an\n     * onClick.\n     *\n     * @deprecated\n     * Use `onSuggestionSelected` instead.\n     */\n    onSelectionChange?: Pick<\n      ComboBoxProps<T>,\n      'onSelectionChange'\n    >['onSelectionChange'];\n\n    /*\n     * This callback simply notifies you when the user filled in the text field\n     * by selecting an option from the autocomplete dropdown. Similar to an\n     * onClick.\n     */\n    onSuggestionSelected?: (key: Key) => void;\n    /**\n     * Render function for the input element.\n     * Receives props that should be spread onto the input component.\n     */\n    renderInput: (inputProps: any) => ReactElement;\n\n    /**\n     * Accessible label for the suggestions listbox.\n     */\n    listboxAriaLabel?: string;\n\n    /**\n     * Controlled selected value.\n     */\n    value?: React.Key | null;\n\n    /**\n     * Decide what items to display in the dropdown menu.\n     * @default 'String.includes'\n     */\n    defaultFilter?: (textValue: string, inputValue: string) => boolean;\n  };\n\nexport function Autocomplete<T extends object>(\n  props: AutocompleteProps<T>\n): ReactElement {\n  useThemeCheck();\n  const formatMessage = useMessageFormatter(intlMessages);\n\n  const {\n    inputValue,\n    renderInput,\n    loadingState,\n    loadingSkeletonRowsCount,\n    listboxAriaLabel,\n    onSuggestionSelected,\n    onSelectionChange,\n    ...otherProps\n  } = props;\n\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(props);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listBoxRef = useFocusableRef<HTMLUListElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useFocusableRef<HTMLDivElement>(null);\n  const collectionRef = useRef<\n    ReturnType<typeof useComboBoxState>['collection'] | null\n  >(null);\n\n  const state = useComboBoxState({\n    ...props,\n    inputValue,\n    allowsEmptyCollection: loadingState === 'loading',\n    allowsCustomValue: true,\n    shouldCloseOnBlur: true,\n    onSelectionChange: (key) => {\n      if (key !== null) {\n        onSelectionChange?.(key);\n        onSuggestionSelected?.(key);\n        // When both value and inputValue are controlled, react-stately skips\n        // updating inputValue\n        const itemText = collectionRef.current?.getItem(key)?.textValue ?? '';\n        if (itemText) {\n          props.onInputChange?.(itemText);\n        }\n      }\n    },\n  });\n\n  collectionRef.current = state.collection;\n\n  const { inputProps, listBoxProps } = useComboBox(\n    {\n      ...props,\n      'aria-label': listboxAriaLabel || formatMessage('listbox-suggestions'),\n      inputRef,\n      listBoxRef,\n      popoverRef,\n    },\n    state\n  );\n\n  const inputElement = renderInput({\n    ...inputProps,\n    isDisabled: props.isDisabled,\n    inputRef,\n    'aria-haspopup': 'listbox',\n    'aria-expanded': state.isOpen,\n    onChange: (value: string) => {\n      inputProps.onChange?.({\n        target: { value },\n        currentTarget: { value },\n      } as React.ChangeEvent<HTMLInputElement>);\n    },\n  });\n\n  return (\n    <div\n      ref={triggerRef}\n      {...filterDOMProps(otherProps, { global: true })}\n      style={{ display: 'inline-flex', ...style }}\n      className={className}\n    >\n      {inputElement}\n      {state.isOpen && (\n        <ListBoxPopover<T>\n          state={state}\n          triggerRef={triggerRef}\n          popoverRef={popoverRef}\n          listBoxRef={listBoxRef}\n          listBoxProps={listBoxProps}\n          loadingState={loadingState}\n          loadingSkeletonRowsCount={loadingSkeletonRowsCount}\n          selectWidth={triggerRef.current?.offsetWidth}\n          disableSelectedStyles\n          isNonModal\n        >\n          {props.children || []}\n        </ListBoxPopover>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/build/esm/lab/src/Breadcrumbs/src/BreadcrumbItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbItem.js","sources":["../../../../../../src/Breadcrumbs/src/BreadcrumbItem.tsx"],"sourcesContent":["import React, { useContext, ForwardedRef } from 'react';\nimport type { BreadcrumbProps as RACBreadcrumbProps } from 'react-aria-components';\nimport { CollectionNode } from 'react-aria/private/collections/BaseCollection';\nimport { createLeafComponent } from 'react-aria/CollectionBuilder';\nimport {\n  useSapphireStyleProps,\n  useThemeCheck,\n  SapphireStyleProps,\n  Typography,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { BreadcrumbsSeparator } from './BreadcrumbsSeparator';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport { BreadcrumbsContext } from './Breadcrumbs';\nimport { BreadcrumbOverflowMenu } from './BreadcrumbOverflowMenu';\nimport { BreadcrumbItemNode } from './types';\nimport {\n  BreadcrumbItemLink,\n  BreadcrumbItemLinkProps,\n} from './BreadcrumbItemLink';\n\nexport type BreadcrumbItemProps = {\n  isDisabled?: boolean;\n} & SapphireStyleProps &\n  GlobalDomAttributes &\n  Pick<RACBreadcrumbProps, 'children'> &\n  BreadcrumbItemLinkProps;\n\nclass BreadcrumbItemCollectionNode extends CollectionNode<unknown> {\n  static readonly type = 'item';\n}\n\n/**\n * The implementation is based on React Aria's BreadcrumbItem, with added support for\n * overflow menu data handling.\n */\nexport const BreadcrumbItem = createLeafComponent(\n  BreadcrumbItemCollectionNode,\n  function BreadcrumbItem(\n    props: BreadcrumbItemProps,\n    ref: ForwardedRef<HTMLLIElement>,\n    node: BreadcrumbItemNode\n  ): JSX.Element {\n    useThemeCheck();\n    const { styleProps } = useSapphireStyleProps(props);\n    const {\n      size,\n      overflowNodes,\n      isDisabled: breadcrumbsDisabled,\n    } = useContext(BreadcrumbsContext);\n    const { isDisabled: individualDisabled = false } = props;\n\n    const isCurrent = node.nextKey == null;\n    const isDisabled = individualDisabled || breadcrumbsDisabled;\n\n    /**\n     * The item should not be rendered if it's in the overflow indexes.\n     * The only exception is the first overflow menu item, which will be rendered\n     * as the overflow menu trigger.\n     */\n    const shouldRender = !overflowNodes.some((item) => item?.key === node.key);\n    const showOverflowMenu = overflowNodes[0]?.key === node.key;\n\n    if (!shouldRender && !showOverflowMenu) {\n      return <></>;\n    }\n\n    if (!shouldRender && showOverflowMenu) {\n      return <BreadcrumbOverflowMenu />;\n    }\n\n    node.href = props.href;\n\n    return (\n      <li\n        ref={ref}\n        className={clsx(styles['sapphire-breadcrumbs__item'])}\n        style={{ ...styleProps.style }}\n        data-disabled={isDisabled || undefined}\n        data-current={isCurrent || undefined}\n      >\n        {isCurrent ? (\n          <Typography.Body\n            elementType=\"span\"\n            isSemibold\n            size={size === 'lg' ? 'md' : size === 'md' ? 'sm' : 'xs'}\n          >\n            {node.rendered}\n          </Typography.Body>\n        ) : (\n          <BreadcrumbItemLink isDisabled={isDisabled} {...props}>\n            {node.rendered}\n          </BreadcrumbItemLink>\n        )}\n        {!isCurrent && <BreadcrumbsSeparator />}\n      </li>\n    );\n  }\n);\n"],"names":["BreadcrumbItem"],"mappings":";;;;;;;;;;;AA6BA,MAAM,qCAAqC,cAAA,CAAwB;AAAA,EACjE,OAAgB,IAAA,GAAO,MAAA;AACzB;AAMO,MAAM,cAAA,GAAiB,mBAAA;AAAA,EAC5B,4BAAA;AAAA,EACA,SAASA,eAAAA,CACP,KAAA,EACA,GAAA,EACA,IAAA,EACa;AACb,IAAA,aAAA,EAAc;AACd,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,IAAA,MAAM;AAAA,MACJ,IAAA;AAAA,MACA,aAAA;AAAA,MACA,UAAA,EAAY;AAAA,KACd,GAAI,WAAW,kBAAkB,CAAA;AACjC,IAAA,MAAM,EAAE,UAAA,EAAY,kBAAA,GAAqB,KAAA,EAAM,GAAI,KAAA;AAEnD,IAAA,MAAM,SAAA,GAAY,KAAK,OAAA,IAAW,IAAA;AAClC,IAAA,MAAM,aAAa,kBAAA,IAAsB,mBAAA;AAOzC,IAAA,MAAM,YAAA,GAAe,CAAC,aAAA,CAAc,IAAA,CAAK,CAAC,IAAA,KAAS,IAAA,EAAM,GAAA,KAAQ,IAAA,CAAK,GAAG,CAAA;AACzE,IAAA,MAAM,gBAAA,GAAmB,aAAA,CAAc,CAAC,CAAA,EAAG,QAAQ,IAAA,CAAK,GAAA;AAExD,IAAA,IAAI,CAAC,YAAA,IAAgB,CAAC,gBAAA,EAAkB;AACtC,MAAA,uBAAO,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAE,CAAA;AAAA,IACX;AAEA,IAAA,IAAI,CAAC,gBAAgB,gBAAA,EAAkB;AACrC,MAAA,2CAAQ,sBAAA,EAAA,IAAuB,CAAA;AAAA,IACjC;AAEA,IAAA,IAAA,CAAK,OAAO,KAAA,CAAM,IAAA;AAElB,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,4BAA4B,CAAC,CAAA;AAAA,QACpD,KAAA,EAAO,EAAE,GAAG,UAAA,CAAW,KAAA,EAAM;AAAA,QAC7B,iBAAe,UAAA,IAAc,MAAA;AAAA,QAC7B,gBAAc,SAAA,IAAa;AAAA,OAAA;AAAA,MAE1B,SAAA,mBACC,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA,CAAW,IAAA;AAAA,QAAX;AAAA,UACC,WAAA,EAAY,MAAA;AAAA,UACZ,UAAA,EAAU,IAAA;AAAA,UACV,MAAM,IAAA,KAAS,IAAA,GAAO,IAAA,GAAO,IAAA,KAAS,OAAO,IAAA,GAAO;AAAA,SAAA;AAAA,QAEnD,IAAA,CAAK;AAAA,0BAGR,KAAA,CAAA,aAAA,CAAC,kBAAA,EAAA,EAAmB,YAAyB,GAAG,KAAA,EAAA,EAC7C,KAAK,QACR,CAAA;AAAA,MAED,CAAC,SAAA,oBAAa,KAAA,CAAA,aAAA,CAAC,oBAAA,EAAA,IAAqB;AAAA,KACvC;AAAA,EAEJ;AACF;;;;"}

package/build/esm/lab/src/Breadcrumbs/src/BreadcrumbItemLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbItemLink.js","sources":["../../../../../../src/Breadcrumbs/src/BreadcrumbItemLink.tsx"],"sourcesContent":["import React, { useContext, forwardRef } from 'react';\nimport {\n  Button,\n  ButtonProps,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { FocusableRef } from '@react-types/shared';\nimport { BreadcrumbsContext } from './Breadcrumbs';\nimport { BreadcrumbItemStatic } from './BreadcrumbItemStatic';\n\nexport type BreadcrumbItemLinkProps = Pick<\n  ButtonProps<'a'>,\n  | 'children'\n  | 'href'\n  | 'hrefLang'\n  | 'target'\n  | 'rel'\n  | 'isDisabled'\n  | 'icon'\n  // TODO when moving to \"core\", use types under `types.ts` instead of plain strings\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'aria-details'\n  | 'UNSAFE_onClick'\n> &\n  SapphireStyleProps &\n  GlobalDomAttributes;\n\nexport const BreadcrumbItemLink = forwardRef(function BreadcrumbItemLink(\n  { children, ...props }: BreadcrumbItemLinkProps,\n  ref: FocusableRef<HTMLAnchorElement>\n): JSX.Element {\n  useThemeCheck();\n  const { styleProps: sapphireStyleProps } = useSapphireStyleProps(props);\n  const { style, className, ...styleProps } = sapphireStyleProps;\n  const { size } = useContext(BreadcrumbsContext);\n\n  if (!props.href && !props.UNSAFE_onClick) {\n    return (\n      <BreadcrumbItemStatic {...props} size={size}>\n        {children}\n      </BreadcrumbItemStatic>\n    );\n  }\n\n  return (\n    <Button\n      {...props}\n      {...styleProps}\n      UNSAFE_className={className}\n      UNSAFE_style={{ ...style }}\n      ref={ref}\n      size={size}\n      variant=\"tertiary\"\n      isDisabled={props.isDisabled}\n    >\n      {children}\n    </Button>\n  );\n});\n\nBreadcrumbItemLink.displayName = 'BreadcrumbItemLink';\n"],"names":["BreadcrumbItemLink"],"mappings":";;;;;AAgCO,MAAM,kBAAA,GAAqB,WAAW,SAASA,mBAAAA,CACpD,EAAE,QAAA,EAAU,GAAG,KAAA,EAAM,EACrB,GAAA,EACa;AACb,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAY,kBAAA,EAAmB,GAAI,sBAAsB,KAAK,CAAA;AACtE,EAAA,MAAM,EAAE,KAAA,EAAO,SAAA,EAAW,GAAG,YAAW,GAAI,kBAAA;AAC5C,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,UAAA,CAAW,kBAAkB,CAAA;AAE9C,EAAA,IAAI,CAAC,KAAA,CAAM,IAAA,IAAQ,CAAC,MAAM,cAAA,EAAgB;AACxC,IAAA,uBACE,KAAA,CAAA,aAAA,CAAC,oBAAA,EAAA,EAAsB,GAAG,KAAA,EAAO,QAC9B,QACH,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,gBAAA,EAAkB,SAAA;AAAA,MAClB,YAAA,EAAc,EAAE,GAAG,KAAA,EAAM;AAAA,MACzB,GAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MACR,YAAY,KAAA,CAAM;AAAA,KAAA;AAAA,IAEjB;AAAA,GACH;AAEJ,CAAC;AAED,kBAAA,CAAmB,WAAA,GAAc,oBAAA;;;;"}

package/build/esm/lab/src/Breadcrumbs/src/BreadcrumbItemStatic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbItemStatic.js","sources":["../../../../../../src/Breadcrumbs/src/BreadcrumbItemStatic.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n  TooltipIfNeeded,\n} from '@danske/sapphire-react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport { mergeRefs } from 'react-aria/mergeRefs';\n\nexport type BreadcrumbItemStaticProps = Pick<\n  React.HTMLAttributes<HTMLSpanElement>,\n  'children'\n> &\n  SapphireStyleProps &\n  GlobalDomAttributes & { size: 'sm' | 'md' | 'lg' };\n\nexport const BreadcrumbItemStatic = forwardRef<\n  HTMLSpanElement,\n  BreadcrumbItemStaticProps\n>(function BreadcrumbItemStatic({ size, ...props }, ref): JSX.Element {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  return (\n    <TooltipIfNeeded<HTMLSpanElement> title={props.children}>\n      {(tooltipContentRef, tooltipProps) => {\n        const positioningRef = tooltipProps?.ref;\n        return (\n          <span\n            {...tooltipProps}\n            ref={\n              mergeRefs(\n                ref,\n                tooltipContentRef,\n                positioningRef\n              ) as React.LegacyRef<HTMLSpanElement>\n            }\n            className={clsx(\n              styles['sapphire-breadcrumbs__item--static'],\n              {\n                [styles['sapphire-breadcrumbs__item--static--sm']]:\n                  size === 'sm',\n                [styles['sapphire-breadcrumbs__item--static--lg']]:\n                  size === 'lg',\n              },\n              styleProps.className\n            )}\n            style={styleProps.style}\n          >\n            {props.children}\n          </span>\n        );\n      }}\n    </TooltipIfNeeded>\n  );\n});\n"],"names":["BreadcrumbItemStatic"],"mappings":";;;;;;AAmBO,MAAM,oBAAA,GAAuB,WAGlC,SAASA,qBAAAA,CAAqB,EAAE,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,EAAkB;AACpE,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,2CACG,eAAA,EAAA,EAAiC,KAAA,EAAO,MAAM,QAAA,EAAA,EAC5C,CAAC,mBAAmB,YAAA,KAAiB;AACpC,IAAA,MAAM,iBAAiB,YAAA,EAAc,GAAA;AACrC,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACJ,GAAA,EACE,SAAA;AAAA,UACE,GAAA;AAAA,UACA,iBAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEF,SAAA,EAAW,IAAA;AAAA,UACT,OAAO,oCAAoC,CAAA;AAAA,UAC3C;AAAA,YACE,CAAC,MAAA,CAAO,wCAAwC,CAAC,GAC/C,IAAA,KAAS,IAAA;AAAA,YACX,CAAC,MAAA,CAAO,wCAAwC,CAAC,GAC/C,IAAA,KAAS;AAAA,WACb;AAAA,UACA,UAAA,CAAW;AAAA,SACb;AAAA,QACA,OAAO,UAAA,CAAW;AAAA,OAAA;AAAA,MAEjB,KAAA,CAAM;AAAA,KACT;AAAA,EAEJ,CACF,CAAA;AAEJ,CAAC;;;;"}

package/build/esm/lab/src/Breadcrumbs/src/BreadcrumbOverflowMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbOverflowMenu.js","sources":["../../../../../../src/Breadcrumbs/src/BreadcrumbOverflowMenu.tsx"],"sourcesContent":["import { Menu, MenuItem, IconButton } from '@danske/sapphire-react';\nimport { OverflowMenuHorizontal } from '@danske/sapphire-icons/react';\nimport React from 'react';\nimport { useContext } from 'react';\nimport { BreadcrumbsContext } from './Breadcrumbs';\nimport { BreadcrumbsSeparator } from './BreadcrumbsSeparator';\n\n/**\n * Component that is being rendered in the case of overflowed breadcrumbs.\n * It is an internal component, so it's automatically rendered when the Breadcrumb\n * component detects overflow.\n */\nexport const BreadcrumbOverflowMenu = (): JSX.Element => {\n  const { size, overflowNodes } = useContext(BreadcrumbsContext);\n\n  return (\n    <>\n      <Menu\n        triggerElement={\n          <IconButton aria-label=\"Show more breadcrumbs\" size={size}>\n            <OverflowMenuHorizontal />\n          </IconButton>\n        }\n      >\n        {overflowNodes.map((item) =>\n          !item ? null : (\n            <MenuItem\n              key={item.key}\n              id={item.key}\n              href={item.href}\n              isDisabled={!item.href}\n            >\n              {item.rendered}\n            </MenuItem>\n          )\n        )}\n      </Menu>\n      <BreadcrumbsSeparator />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,yBAAyB,MAAmB;AACvD,EAAA,MAAM,EAAE,IAAA,EAAM,aAAA,EAAc,GAAI,WAAW,kBAAkB,CAAA;AAE7D,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,cAAA,sCACG,UAAA,EAAA,EAAW,YAAA,EAAW,yBAAwB,IAAA,EAAA,kBAC7C,KAAA,CAAA,aAAA,CAAC,4BAAuB,CAC1B;AAAA,KAAA;AAAA,IAGD,aAAA,CAAc,GAAA;AAAA,MAAI,CAAC,IAAA,KAClB,CAAC,IAAA,GAAO,IAAA,mBACN,KAAA,CAAA,aAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,KAAK,IAAA,CAAK,GAAA;AAAA,UACV,IAAI,IAAA,CAAK,GAAA;AAAA,UACT,MAAM,IAAA,CAAK,IAAA;AAAA,UACX,UAAA,EAAY,CAAC,IAAA,CAAK;AAAA,SAAA;AAAA,QAEjB,IAAA,CAAK;AAAA;AACR;AAEJ,GACF,kBACA,KAAA,CAAA,aAAA,CAAC,oBAAA,EAAA,IAAqB,CACxB,CAAA;AAEJ;;;;"}

package/build/esm/lab/src/Breadcrumbs/src/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../../../../src/Breadcrumbs/src/Breadcrumbs.tsx"],"sourcesContent":["import React, { createContext } from 'react';\nimport { useBreadcrumbs } from 'react-aria/useBreadcrumbs';\nimport { Collection } from 'react-aria/Collection';\nimport { CollectionBuilder } from 'react-aria/CollectionBuilder';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { mergeProps } from 'react-aria/mergeProps';\nimport { forwardRefType } from '@react-types/shared';\nimport { ForwardedRef, forwardRef, useContext, useRef } from 'react';\nimport {\n  BreadcrumbsContext as RACBreadcrumbsContext,\n  BreadcrumbsProps as RACBreadcrumbsProps,\n  CollectionRendererContext,\n  useContextProps,\n} from 'react-aria-components';\nimport { useBreadcrumbThreshold } from './useBreadcrumbThreshold';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport clsx from 'clsx';\nimport { BreadcrumbItemNode } from './types';\n\nexport type BreadcrumbsProps<T extends object> = Pick<\n  RACBreadcrumbsProps<T>,\n  'aria-label' | 'isDisabled' | 'children'\n> & {\n  /**\n   * The size of the breadcrumbs component.\n   *\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Maximum width for the breadcrumbs container. When content overflows,\n   * it will show an overflow menu with the first and last items.\n   */\n  maxWidth?: React.CSSProperties['maxWidth'];\n} & SapphireStyleProps &\n  GlobalDomAttributes;\n\nexport const BreadcrumbsContext = createContext<{\n  size: 'sm' | 'md' | 'lg';\n  overflowNodes: (BreadcrumbItemNode | null)[];\n  isDisabled?: boolean;\n}>({ size: 'md', overflowNodes: [] });\n\n/**\n * Shows the path to the current page through a hierarchical trail of links,\n * helping users understand their location within the application and navigate back to\n * parent pages.\n */\nexport const Breadcrumbs = (forwardRef as forwardRefType)(function Breadcrumbs<\n  T extends object\n>(\n  { maxWidth, size = 'md', ...props }: BreadcrumbsProps<T>,\n  fwdRef: ForwardedRef<HTMLOListElement>\n) {\n  const [RACprops, ref] = useContextProps(props, fwdRef, RACBreadcrumbsContext);\n  const { styleProps } = useSapphireStyleProps(RACprops);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const { CollectionRoot } = useContext(CollectionRendererContext);\n  const { navProps } = useBreadcrumbs(RACprops);\n  const DOMProps = filterDOMProps(RACprops, { global: true });\n\n  return (\n    <CollectionBuilder content={<Collection {...RACprops} />}>\n      {(collection) => {\n        const { overflowNodes } = useBreadcrumbThreshold(\n          collection.size,\n          containerRef,\n          ref\n        );\n        const keys = Array.from(collection.getKeys());\n        return (\n          <div\n            ref={containerRef}\n            style={{\n              ...styleProps.style,\n              maxWidth,\n              display: 'flex',\n            }}\n          >\n            <ol\n              ref={ref}\n              {...mergeProps(DOMProps, navProps)}\n              className={clsx(styles['sapphire-breadcrumbs'], {\n                [styles['sapphire-breadcrumbs--sm']]: size === 'sm',\n                [styles['sapphire-breadcrumbs--lg']]: size === 'lg',\n              })}\n            >\n              <BreadcrumbsContext.Provider\n                value={{\n                  size,\n                  overflowNodes: overflowNodes.map((index) =>\n                    collection.getItem(keys[index])\n                  ),\n                  isDisabled: RACprops.isDisabled,\n                }}\n              >\n                <RACBreadcrumbsContext.Provider value={RACprops}>\n                  <CollectionRoot collection={collection} />\n                </RACBreadcrumbsContext.Provider>\n              </BreadcrumbsContext.Provider>\n            </ol>\n          </div>\n        );\n      }}\n    </CollectionBuilder>\n  );\n});\n"],"names":["Breadcrumbs","RACBreadcrumbsContext"],"mappings":";;;;;;;;;;;;AA0CO,MAAM,kBAAA,GAAqB,cAI/B,EAAE,IAAA,EAAM,MAAM,aAAA,EAAe,IAAI;AAO7B,MAAM,WAAA,GAAe,UAAA,CAA8B,SAASA,YAAAA,CAGjE,EAAE,QAAA,EAAU,IAAA,GAAO,IAAA,EAAM,GAAG,KAAA,EAAM,EAClC,MAAA,EACA;AACA,EAAA,MAAM,CAAC,QAAA,EAAU,GAAG,IAAI,eAAA,CAAgB,KAAA,EAAO,QAAQC,oBAAqB,CAAA;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,QAAQ,CAAA;AACrD,EAAA,MAAM,YAAA,GAAe,OAAuB,IAAI,CAAA;AAChD,EAAA,MAAM,EAAE,cAAA,EAAe,GAAI,UAAA,CAAW,yBAAyB,CAAA;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,cAAA,CAAe,QAAQ,CAAA;AAC5C,EAAA,MAAM,WAAW,cAAA,CAAe,QAAA,EAAU,EAAE,MAAA,EAAQ,MAAM,CAAA;AAE1D,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,qBAAkB,OAAA,kBAAS,KAAA,CAAA,aAAA,CAAC,cAAY,GAAG,QAAA,EAAU,CAAA,EAAA,EACnD,CAAC,UAAA,KAAe;AACf,IAAA,MAAM,EAAE,eAAc,GAAI,sBAAA;AAAA,MACxB,UAAA,CAAW,IAAA;AAAA,MACX,YAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,IAAA,GAAO,KAAA,CAAM,IAAA,CAAK,UAAA,CAAW,SAAS,CAAA;AAC5C,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,YAAA;AAAA,QACL,KAAA,EAAO;AAAA,UACL,GAAG,UAAA,CAAW,KAAA;AAAA,UACd,QAAA;AAAA,UACA,OAAA,EAAS;AAAA;AACX,OAAA;AAAA,sBAEA,KAAA,CAAA,aAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACC,GAAG,UAAA,CAAW,QAAA,EAAU,QAAQ,CAAA;AAAA,UACjC,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,sBAAsB,CAAA,EAAG;AAAA,YAC9C,CAAC,MAAA,CAAO,0BAA0B,CAAC,GAAG,IAAA,KAAS,IAAA;AAAA,YAC/C,CAAC,MAAA,CAAO,0BAA0B,CAAC,GAAG,IAAA,KAAS;AAAA,WAChD;AAAA,SAAA;AAAA,wBAED,KAAA,CAAA,aAAA;AAAA,UAAC,kBAAA,CAAmB,QAAA;AAAA,UAAnB;AAAA,YACC,KAAA,EAAO;AAAA,cACL,IAAA;AAAA,cACA,eAAe,aAAA,CAAc,GAAA;AAAA,gBAAI,CAAC,KAAA,KAChC,UAAA,CAAW,OAAA,CAAQ,IAAA,CAAK,KAAK,CAAC;AAAA,eAChC;AAAA,cACA,YAAY,QAAA,CAAS;AAAA;AACvB,WAAA;AAAA,0BAEA,KAAA,CAAA,aAAA,CAACA,qBAAsB,QAAA,EAAtB,EAA+B,OAAO,QAAA,EAAA,kBACrC,KAAA,CAAA,aAAA,CAAC,cAAA,EAAA,EAAe,UAAA,EAAwB,CAC1C;AAAA;AACF;AACF,KACF;AAAA,EAEJ,CACF,CAAA;AAEJ,CAAC;;;;"}

package/build/esm/lab/src/Breadcrumbs/src/BreadcrumbsSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsSeparator.js","sources":["../../../../../../src/Breadcrumbs/src/BreadcrumbsSeparator.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { useContext } from 'react';\nimport styles from '@danske/sapphire-css/components/breadcrumbs/breadcrumbs.module.css';\nimport { ChevronRight } from '@danske/sapphire-icons/react';\nimport { Icon } from '@danske/sapphire-react';\nimport { BreadcrumbsContext } from './Breadcrumbs';\n\nexport const BreadcrumbsSeparator = (): JSX.Element => {\n  const { size } = useContext(BreadcrumbsContext);\n\n  // Based on the design\n  const iconSize = size === 'lg' ? 'md' : 'sm';\n\n  return (\n    <span\n      className={clsx(styles['sapphire-breadcrumbs__separator'])}\n      aria-hidden=\"true\"\n    >\n      <Icon size={iconSize}>\n        <ChevronRight />\n      </Icon>\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAOO,MAAM,uBAAuB,MAAmB;AACrD,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,UAAA,CAAW,kBAAkB,CAAA;AAG9C,EAAA,MAAM,QAAA,GAAW,IAAA,KAAS,IAAA,GAAO,IAAA,GAAO,IAAA;AAExC,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,iCAAiC,CAAC,CAAA;AAAA,MACzD,aAAA,EAAY;AAAA,KAAA;AAAA,wCAEX,IAAA,EAAA,EAAK,IAAA,EAAM,QAAA,EAAA,kBACV,KAAA,CAAA,aAAA,CAAC,kBAAa,CAChB;AAAA,GACF;AAEJ;;;;"}

package/build/esm/lab/src/Breadcrumbs/src/useBreadcrumbThreshold.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreadcrumbThreshold.js","sources":["../../../../../../src/Breadcrumbs/src/useBreadcrumbThreshold.ts"],"sourcesContent":["import { useState, useMemo, useEffect } from 'react';\nimport { useResizeObserver } from 'react-aria/private/utils/useResizeObserver';\n\nexport const useBreadcrumbThreshold = (\n  childrenCount: number,\n  containerRef: React.RefObject<HTMLElement>,\n  breadcrumbRef: React.RefObject<HTMLOListElement>\n) => {\n  const [itemWidths, setItemWidths] = useState<number[]>([]);\n  const [containerWidth, setContainerWidth] = useState<number>(0);\n\n  const { shouldRenderOverflow, maxVisibleTailChildren } = useMemo(() => {\n    if (!containerWidth || itemWidths.length === 0) {\n      return {\n        shouldRenderOverflow: false,\n        maxVisibleTailChildren: childrenCount,\n      };\n    }\n\n    // Exit early if the container is wider than all items combined\n    const totalItemWidth = itemWidths.reduce((a, b) => a + b, 0);\n    if (totalItemWidth <= containerWidth) {\n      return {\n        shouldRenderOverflow: false,\n        maxVisibleTailChildren: itemWidths.length - 1,\n      };\n    }\n\n    // The minimum number of items in the container is 2 (first and last).\n    let totalWidth = itemWidths[0] + itemWidths[itemWidths.length - 1];\n    let visibleTailCount = 1; // Last item counted by default\n\n    for (\n      let i = itemWidths.length - 2;\n      i > 0 && totalWidth + itemWidths[i] < containerWidth;\n      i--\n    ) {\n      totalWidth += itemWidths[i];\n      visibleTailCount++;\n    }\n\n    visibleTailCount--; // When we are overflowing, take into account the icon button that will be rendered\n    return {\n      shouldRenderOverflow: true,\n      maxVisibleTailChildren: Math.max(1, visibleTailCount),\n    };\n  }, [itemWidths, containerWidth, childrenCount]);\n\n  /**\n   * Compute the individual widths of the breadcrumb items.\n   * It's important to have these values for all the items, since they disappear if the container\n   * is overflowing. We need these values to recompute the number of items that can fit,\n   * but we can't do that once they have disappeared from the container.\n   */\n  const computeItemWidths = () => {\n    if (!breadcrumbRef.current) return;\n    const breadcrumbItems = Array.from(\n      breadcrumbRef.current.children\n    ) as HTMLElement[];\n    const widths = breadcrumbItems\n      .map((item) => item.offsetWidth)\n      .filter(Boolean);\n\n    if (widths.length === breadcrumbItems.length) {\n      setItemWidths(widths);\n    }\n  };\n\n  /**\n   * Recompute the item widths when the children change.\n   */\n  useEffect(() => {\n    if (childrenCount !== itemWidths.length) {\n      computeItemWidths();\n    }\n  }, [containerRef.current, childrenCount]);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: () => {\n      if (!containerRef.current) return;\n      setContainerWidth(containerRef.current.offsetWidth);\n    },\n  });\n\n  const overflowNodes = useMemo(() => {\n    if (childrenCount > 0 && shouldRenderOverflow) {\n      const tailCount = maxVisibleTailChildren > 1 ? maxVisibleTailChildren : 1;\n      const actualTailCount =\n        maxVisibleTailChildren === 1 ? maxVisibleTailChildren : tailCount;\n      const limitedTailCount = Math.min(actualTailCount, 5); // By design, we limit the number of visible tail items to 6\n      const tailStartIndex = childrenCount - limitedTailCount;\n      // Return overflow indexes (hidden items) - all items except first and tail items\n      return Array.from({ length: tailStartIndex - 1 }, (_, i) => i + 1);\n    }\n    return [];\n  }, [childrenCount, shouldRenderOverflow, maxVisibleTailChildren]);\n\n  return {\n    overflowNodes,\n  };\n};\n"],"names":[],"mappings":"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"}

package/build/esm/lab/src/DataGrid/index.js

@@ -0,0 +1,9 @@
+import { EditableCellContent } from './src/EditableCellContent.js';
+import { DataGrid } from './src/DataGrid.js';
+
+const _DataGrid = Object.assign(DataGrid, {
+  EditableCellContent
+});
+
+export { _DataGrid as DataGrid };
+//# sourceMappingURL=index.js.map

package/build/esm/lab/src/DataGrid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/DataGrid/index.ts"],"sourcesContent":["import { EditableCellContent } from './src/EditableCellContent';\nimport { DataGrid } from './src/DataGrid';\n\nexport {\n  type DataGridColumn,\n  type DataGridAccessorKeyColumn,\n  type DataGridAccessorFnColumn,\n  type DataGridDisplayColumn,\n  type DataGridBodyCellRenderProps,\n  type DataGridProps,\n  type DataGridSortDescriptor,\n  type DataGridSelectionMode,\n  type Layout,\n  type ColumnSizingFor,\n  type FixedColumnSizing,\n  type AutoColumnSizing,\n} from './src/DataGrid';\n\nexport {\n  createDataGridColumnHelper,\n  type CreateDataGridColumnHelperOptions,\n  type DataGridColumnHelper,\n} from './src/createDataGridColumnHelper';\n\nconst _DataGrid = Object.assign(DataGrid, {\n  EditableCellContent,\n});\n\nexport { _DataGrid as DataGrid };\n"],"names":[],"mappings":";;;AAwBA,MAAM,SAAA,GAAY,MAAA,CAAO,MAAA,CAAO,QAAA,EAAU;AAAA,EACxC;AACF,CAAC;;;;"}

package/build/esm/lab/src/DataGrid/src/DataGrid.js

@@ -0,0 +1,463 @@
+import React, { useRef, useMemo } from 'react';
+import { useReactTable, getExpandedRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useThemeCheck, useSapphireStyleProps, Skeleton, Checkbox, Table } from '@danske/sapphire-react';
+import { useControlledState } from 'react-stately/useControlledState';
+import { useLoadMore } from 'react-aria/private/utils/useLoadMore';
+import { useMeasureColumnWidths } from './useMeasureColumnWidths.js';
+import { useGridKeyboardNavigation } from './useGridKeyboardNavigation.js';
+import { RadioBox } from '../../../../core/src/Radio/src/RadioBox.js';
+import { PaginationContext } from '../../../../core/src/Pagination/src/usePaginationContext.js';
+import { DataGridCellContext } from './DataGridCellContext.js';
+
+const DEFAULT_ROW_HEIGHTS = {
+  sm: 40,
+  md: 48,
+  lg: 56,
+  xl: 64
+};
+const SELECTION_COLUMN_ID = "__selection";
+function DataGrid({
+  "aria-label": ariaLabel,
+  columns,
+  data,
+  cellSpacing = "md",
+  sortDescriptor,
+  onSortChange,
+  defaultSortDescriptor,
+  selectionMode = "none",
+  disallowEmptySelection,
+  getRowId,
+  selectedRowIds: selectedRowsProp,
+  defaultSelectedRowIds,
+  onSelectionChange,
+  emptyState,
+  loadingState,
+  loadingSkeletonRowsCount = 3,
+  hideLastDivider,
+  enableRowVirtualization,
+  estimatedRowHeight,
+  rowExpansion,
+  expandedRowIds,
+  defaultExpandedRowIds,
+  onExpandedRowsChange,
+  onLoadMore,
+  onRowAction,
+  isDisabled,
+  disabledBehavior = "all",
+  layout = "auto",
+  footer,
+  stickyHeader = "auto",
+  stickyFooter = "auto",
+  context,
+  ...otherProps
+}) {
+  useThemeCheck();
+  const { styleProps, filteredProps } = useSapphireStyleProps(otherProps);
+  const [sorting, setSorting] = useControlledState(
+    toSortingState(sortDescriptor),
+    toSortingState(defaultSortDescriptor) ?? [],
+    (sortingState) => {
+      onSortChange?.(fromSortingState(sortingState));
+    }
+  );
+  const [rowSelection, setRowSelection] = useControlledState(
+    toBooleanMap(selectedRowsProp),
+    toBooleanMap(defaultSelectedRowIds) ?? {},
+    (state) => {
+      onSelectionChange?.(
+        fromBooleanMap(state),
+        pendingSelectionInteraction.current
+      );
+    }
+  );
+  const pendingSelectionInteraction = useRef("select");
+  const handleRowSelectionChange = (updater) => {
+    const newValue = typeof updater === "function" ? updater(rowSelection) : updater;
+    if (!disallowEmptySelection || Object.values(newValue).filter(Boolean).length > 0) {
+      setRowSelection(newValue);
+      pendingSelectionInteraction.current = "select";
+    }
+  };
+  const [expanded, setExpanded] = useControlledState(
+    toBooleanMap(expandedRowIds),
+    toBooleanMap(defaultExpandedRowIds) ?? {},
+    (expandedState) => {
+      onExpandedRowsChange?.(
+        expandedState === true ? [] : fromBooleanMap(expandedState)
+      );
+    }
+  );
+  const contextRef = useRef(context);
+  contextRef.current = context;
+  const allColumns = useMemo(() => {
+    const result = [];
+    if (selectionMode !== "none") {
+      result.push({
+        id: SELECTION_COLUMN_ID,
+        header: selectionMode === "multiple" ? ({ table: table2 }) => /* @__PURE__ */ React.createElement(
+          Checkbox,
+          {
+            "aria-label": "Select all",
+            isSelected: table2.getIsAllRowsSelected(),
+            isIndeterminate: table2.getIsSomeRowsSelected(),
+            isDisabled: isDisabled === true,
+            onChange: (isSelected) => {
+              pendingSelectionInteraction.current = "select-all";
+              table2.toggleAllRowsSelected(isSelected);
+            }
+          }
+        ) : () => null,
+        cell: ({ row }) => {
+          const checkboxProps = {
+            "aria-label": "Select",
+            // TODO(i18n)
+            isSelected: row.getIsSelected(),
+            isDisabled: !row.getCanSelect(),
+            onChange: (isSelected) => row.toggleSelected(isSelected)
+          };
+          return selectionMode === "single" && disallowEmptySelection ? /* @__PURE__ */ React.createElement(RadioBox, { role: "checkbox", ...checkboxProps }) : /* @__PURE__ */ React.createElement(Checkbox, { ...checkboxProps });
+        },
+        renderLoadingSkeleton: (i) => /* @__PURE__ */ React.createElement(Skeleton.From, { index: i, margin: "auto" }, /* @__PURE__ */ React.createElement(Checkbox, null))
+      });
+    }
+    result.push(
+      ...columns.map(({ header, cell, footer: footer2, ...column }) => {
+        return {
+          ...column,
+          header: typeof header === "function" ? () => header({ context: contextRef.current }) : header,
+          footer: typeof footer2 === "function" ? () => footer2({ context: contextRef.current }) : footer2,
+          cell: ({ row, getValue }) => {
+            const value = getValue();
+            if (!cell) {
+              return value;
+            }
+            return cell({
+              rowData: row.original,
+              value,
+              rowIndex: row.index,
+              context: contextRef.current
+            });
+          }
+        };
+      })
+    );
+    return result;
+  }, [
+    selectionMode,
+    disallowEmptySelection,
+    isDisabled,
+    disabledBehavior,
+    columns
+  ]);
+  const table = useReactTable({
+    data,
+    columns: allColumns,
+    state: { sorting, rowSelection, expanded },
+    defaultColumn: {
+      enableSorting: false,
+      // TODO(decision): should sorting be enabled or disabled by default?
+      size: void 0
+    },
+    getRowId,
+    getSubRows: rowExpansion?.type === "subRows" ? rowExpansion.getSubRows : void 0,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    // sorting
+    enableMultiSort: false,
+    sortDescFirst: false,
+    // TODO(decision): should it be an option?
+    manualSorting: sortDescriptor !== void 0,
+    onSortingChange: setSorting,
+    // row selection
+    enableRowSelection: selectionMode === "none" ? false : isDisabled !== void 0 ? (tanStackRow) => {
+      const disabled = typeof isDisabled === "function" ? isDisabled?.(tanStackRow.original) : isDisabled;
+      return !disabled;
+    } : true,
+    enableMultiRowSelection: selectionMode === "multiple",
+    onRowSelectionChange: handleRowSelectionChange,
+    // row expansion
+    onExpandedChange: setExpanded
+  });
+  const containerRef = useRef(null);
+  const tableRef = useRef(null);
+  const { measuredColumnWidths } = useMeasureColumnWidths({
+    table,
+    data,
+    tableRef,
+    enabled: Boolean(enableRowVirtualization && layout === "auto")
+  });
+  const rows = table.getRowModel().rows;
+  const rowItems = [];
+  if (loadingState !== "loading") {
+    for (const row of rows) {
+      const disabled = typeof isDisabled === "function" ? isDisabled?.(row.original) : isDisabled ?? false;
+      const expandedView = rowExpansion?.type === "expandedView" ? rowExpansion.getExpandedView(row.original, row.index) : void 0;
+      rowItems.push({
+        type: "data",
+        row,
+        hasExpandedView: Boolean(expandedView),
+        disabled
+      });
+      if (expandedView && row.getIsExpanded()) {
+        rowItems.push({
+          type: "expandedView",
+          row,
+          expandedView
+        });
+      }
+    }
+  }
+  if (loadingState) {
+    for (let skeletonIndex = 0; skeletonIndex < loadingSkeletonRowsCount; skeletonIndex++) {
+      rowItems.push({ type: "skeleton", skeletonIndex });
+    }
+  }
+  const { gridKeyboardNavigationProps, rangeExtractor } = useGridKeyboardNavigation({
+    tableRef,
+    enabled: true,
+    scrollContainerRef: containerRef,
+    rowItemCount: rowItems.length,
+    onScrollToRowIndex: enableRowVirtualization ? (...args) => {
+      virtualizer.scrollToIndex(...args);
+    } : void 0
+  });
+  const virtualizer = useVirtualizer({
+    count: rowItems.length,
+    getScrollElement: () => containerRef.current,
+    estimateSize: () => estimatedRowHeight ?? DEFAULT_ROW_HEIGHTS[cellSpacing],
+    overscan: 5,
+    enabled: enableRowVirtualization,
+    rangeExtractor
+  });
+  const virtualRows = enableRowVirtualization ? virtualizer.getVirtualItems() : null;
+  const topGap = (virtualRows?.[1]?.start || 0) - (virtualRows?.[0]?.end || 0);
+  const bottomGap = (virtualRows?.[virtualRows.length - 2]?.end || 0) - (virtualRows?.[virtualRows.length - 1]?.start || 0);
+  const virtualPaddingTop = virtualRows?.length ? virtualRows[0].start + topGap : 0;
+  const virtualPaddingBottom = virtualRows?.length ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end + bottomGap : 0;
+  const renderedRowItems = virtualRows ? virtualRows.map((vi) => ({ rowItem: rowItems[vi.index], index: vi.index })).filter(({ rowItem }) => !!rowItem) : rowItems.map((rowItem, index) => ({ rowItem, index }));
+  const columnCount = table.getVisibleLeafColumns().length;
+  const hasFooterRow = columns.some((col) => col.footer != null);
+  useLoadMore(
+    { isLoading: !!loadingState, onLoadMore, items: data },
+    containerRef
+  );
+  const columnSizeVars = Object.fromEntries(
+    table.getVisibleLeafColumns().flatMap((col) => {
+      const columnDef = col.columnDef;
+      const width = measuredColumnWidths?.[col.id] ?? columnDef.sizing?.width;
+      if (width === void 0) return [];
+      const cssValue = typeof width === "number" ? `${width}px` : width;
+      return [[`--col-${col.id}-width`, cssValue]];
+    })
+  );
+  return /* @__PURE__ */ React.createElement(
+    Table.Container,
+    {
+      ref: containerRef,
+      hideLastDivider: hideLastDivider || data.length === 0 && !loadingState,
+      stickyHeader,
+      stickyFooter,
+      UNSAFE_style: styleProps.style,
+      UNSAFE_className: styleProps.className,
+      footer: footer ? /* @__PURE__ */ React.createElement(PaginationContext.Provider, { value: { scrollableRef: containerRef } }, footer) : void 0,
+      ...filteredProps
+    },
+    /* @__PURE__ */ React.createElement(
+      Table,
+      {
+        ref: tableRef,
+        role: "grid",
+        "aria-label": ariaLabel,
+        cellSpacing,
+        "aria-busy": Boolean(loadingState) || void 0,
+        layout: layout === "fixed" || measuredColumnWidths !== null ? "fixed" : "auto",
+        UNSAFE_style: columnSizeVars,
+        ...gridKeyboardNavigationProps
+      },
+      /* @__PURE__ */ React.createElement("colgroup", null, table.getVisibleLeafColumns().map((col) => {
+        const varName = `--col-${col.id}-width`;
+        return /* @__PURE__ */ React.createElement(
+          "col",
+          {
+            key: col.id,
+            style: columnSizeVars[varName] ? { width: `var(${varName})` } : void 0
+          }
+        );
+      })),
+      /* @__PURE__ */ React.createElement(Table.Header, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React.createElement(Table.HeaderRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
+        const columnDef = header.column.columnDef;
+        return /* @__PURE__ */ React.createElement(
+          Table.HeaderCell,
+          {
+            key: header.id,
+            allowsSorting: header.column.getCanSort(),
+            sortDirection: mapSortDirection(
+              header.column.getIsSorted()
+            ),
+            onPress: header.column.getToggleSortingHandler(),
+            align: columnDef.align,
+            variant: header.column.id === SELECTION_COLUMN_ID ? "selection" : "normal",
+            minWidth: columnDef.sizing?.minWidth,
+            maxWidth: columnDef.sizing?.maxWidth
+          },
+          header.isPlaceholder ? null : flexRender(columnDef.header, header.getContext())
+        );
+      })))),
+      /* @__PURE__ */ React.createElement(Table.Body, null, virtualPaddingTop > 0 && /* @__PURE__ */ React.createElement("tr", { "aria-hidden": true, style: { height: virtualPaddingTop } }, /* @__PURE__ */ React.createElement("td", { colSpan: columnCount })), renderedRowItems.map(({ rowItem, index: itemIndex }) => {
+        if (rowItem.type === "skeleton") {
+          const { skeletonIndex: i } = rowItem;
+          return /* @__PURE__ */ React.createElement(Table.Row, { key: `skeleton-${i}`, "aria-hidden": true }, table.getVisibleLeafColumns().map((col) => {
+            const columnDef = col.columnDef;
+            const renderLoadingSkeleton = columnDef.renderLoadingSkeleton ?? ((i2) => /* @__PURE__ */ React.createElement(Skeleton.Text, { index: i2, widthType: "randomPct" }));
+            return /* @__PURE__ */ React.createElement(
+              Table.Cell,
+              {
+                key: col.id,
+                align: columnDef.align,
+                overflow: "none",
+                variant: col.id === SELECTION_COLUMN_ID ? "selection" : "normal"
+              },
+              renderLoadingSkeleton(i)
+            );
+          }));
+        }
+        if (rowItem.type === "expandedView") {
+          const { row: row2 } = rowItem;
+          return /* @__PURE__ */ React.createElement(
+            Table.Row,
+            {
+              key: `${row2.id}-expanded-view`,
+              "data-index": itemIndex,
+              ref: (element) => {
+                virtualizer.measureElement(element);
+              }
+            },
+            /* @__PURE__ */ React.createElement(Table.Cell, { colSpan: columnCount, overflow: "none" }, rowItem.expandedView)
+          );
+        }
+        const { row, disabled } = rowItem;
+        const canExpand = row.getCanExpand() || rowItem.hasExpandedView;
+        const toggleRowExpansion = canExpand ? () => row?.toggleExpanded() : void 0;
+        const toggleRowSelection = row.getCanSelect() ? () => row?.toggleSelected() : void 0;
+        const rowAction = onRowAction ? () => onRowAction(row.original) : void 0;
+        const isRowActionDisabled = disabled && disabledBehavior !== "selection";
+        const onAction = !isRowActionDisabled ? rowAction ?? toggleRowExpansion ?? toggleRowSelection : void 0;
+        const firstUserColumnId = row.getVisibleCells().find((c) => c.column.id !== SELECTION_COLUMN_ID)?.column.id;
+        return /* @__PURE__ */ React.createElement(
+          Table.Row,
+          {
+            key: row.id,
+            isDisabled: isRowActionDisabled,
+            isSelected: selectionMode !== "none" ? row.getIsSelected() : void 0,
+            "aria-selected": selectionMode !== "none" ? row.getIsSelected() : void 0,
+            onAction: onAction && ((e) => {
+              if (e.pointerType === "keyboard" && e.key === " " && toggleRowSelection) {
+                toggleRowSelection();
+              } else {
+                onAction?.();
+              }
+            }),
+            triggerActionOnPressStart: onAction === toggleRowSelection,
+            isExpanded: row.getIsExpanded() && rowExpansion?.type === "expandedView",
+            "aria-level": rowExpansion != null ? row.depth + 1 : void 0,
+            "data-grid-row": isRowActionDisabled ? void 0 : "",
+            "data-index": itemIndex,
+            ref: (element) => {
+              virtualizer.measureElement(element);
+            }
+          },
+          row.getVisibleCells().map((cell) => {
+            const columnDef = cell.column.columnDef;
+            const isTreeColumn = rowExpansion != null && cell.column.id === firstUserColumnId;
+            return /* @__PURE__ */ React.createElement(
+              DataGridCell,
+              {
+                key: cell.id,
+                align: columnDef.align,
+                isRowHeader: columnDef.isRowHeader,
+                variant: cell.column.id === SELECTION_COLUMN_ID ? "selection" : isTreeColumn ? "tree" : "normal"
+              },
+              isTreeColumn && canExpand && /* @__PURE__ */ React.createElement(
+                Table.ToggleExpandButton,
+                {
+                  isExpanded: row.getIsExpanded(),
+                  onPress: toggleRowExpansion,
+                  isDisabled: isRowActionDisabled
+                }
+              ),
+              flexRender(columnDef.cell, cell.getContext())
+            );
+          })
+        );
+      }), virtualPaddingBottom > 0 && /* @__PURE__ */ React.createElement("tr", { "aria-hidden": true, style: { height: virtualPaddingBottom } }, /* @__PURE__ */ React.createElement("td", { colSpan: columnCount })), !loadingState && data.length === 0 && emptyState != null && /* @__PURE__ */ React.createElement(Table.Row, null, /* @__PURE__ */ React.createElement(Table.Cell, { colSpan: columnCount, overflow: "none" }, emptyState))),
+      hasFooterRow && table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ React.createElement(Table.Footer, { key: footerGroup.id }, /* @__PURE__ */ React.createElement(Table.Row, null, footerGroup.headers.map((footer2) => {
+        const columnDef = footer2.column.columnDef;
+        return /* @__PURE__ */ React.createElement(
+          Table.Cell,
+          {
+            key: footer2.id,
+            role: "gridcell",
+            align: columnDef.align,
+            overflow: "none"
+          },
+          footer2.isPlaceholder ? null : flexRender(columnDef.footer, footer2.getContext())
+        );
+      }))))
+    )
+  );
+}
+function DataGridCell({
+  align,
+  isRowHeader,
+  children,
+  variant
+}) {
+  const ref = React.useRef(null);
+  return /* @__PURE__ */ React.createElement(DataGridCellContext.Provider, { value: { ref } }, /* @__PURE__ */ React.createElement(
+    Table.Cell,
+    {
+      ref,
+      role: isRowHeader ? "rowheader" : "gridcell",
+      align,
+      overflow: "none",
+      variant
+    },
+    children
+  ));
+}
+function fromBooleanMap(state) {
+  return Object.entries(state).filter(([, isExpanded]) => isExpanded).map(([id]) => id);
+}
+function toBooleanMap(ids) {
+  return ids?.reduce((acc, id) => {
+    acc[id] = true;
+    return acc;
+  }, {});
+}
+function toSortingState(sorting) {
+  return sorting ? [
+    {
+      id: sorting.column,
+      desc: sorting.direction === "descending"
+    }
+  ] : void 0;
+}
+function fromSortingState(sorting) {
+  return sorting[0] ? {
+    column: sorting[0].id,
+    direction: sorting[0].desc ? "descending" : "ascending"
+  } : void 0;
+}
+function mapSortDirection(tanStackSortDirection) {
+  if (tanStackSortDirection === "asc") {
+    return "ascending";
+  } else if (tanStackSortDirection === "desc") {
+    return "descending";
+  }
+  return void 0;
+}
+
+export { DataGrid };
+//# sourceMappingURL=DataGrid.js.map