@cimpress-ui/react 1.21.0 → 1.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/components/app-shell/app-shell.d.ts +5 -4
- package/dist/commonjs/components/app-shell/app-shell.d.ts.map +1 -1
- package/dist/commonjs/components/app-shell/app-shell.js +4 -4
- package/dist/commonjs/components/app-shell/app-shell.js.map +1 -1
- package/dist/commonjs/components/breadcrumbs/breadcrumbs.d.ts.map +1 -1
- package/dist/commonjs/components/breadcrumbs/breadcrumbs.js +3 -2
- package/dist/commonjs/components/breadcrumbs/breadcrumbs.js.map +1 -1
- package/dist/commonjs/components/combo-box/combo-box.d.ts +7 -1
- package/dist/commonjs/components/combo-box/combo-box.d.ts.map +1 -1
- package/dist/commonjs/components/combo-box/combo-box.js +6 -2
- package/dist/commonjs/components/combo-box/combo-box.js.map +1 -1
- package/dist/commonjs/components/date-picker/views/view-grid-cell.js +5 -5
- package/dist/commonjs/components/date-picker/views/view-grid-cell.js.map +1 -1
- package/dist/commonjs/components/file-picker/file-picker.d.ts.map +1 -1
- package/dist/commonjs/components/file-picker/file-picker.js +4 -3
- package/dist/commonjs/components/file-picker/file-picker.js.map +1 -1
- package/dist/commonjs/components/internal/focusable-container/focusable-container.js +4 -4
- package/dist/commonjs/components/internal/focusable-container/focusable-container.js.map +1 -1
- package/dist/commonjs/components/link-tabs/link-tabs.d.ts.map +1 -1
- package/dist/commonjs/components/link-tabs/link-tabs.js +4 -4
- package/dist/commonjs/components/link-tabs/link-tabs.js.map +1 -1
- package/dist/commonjs/components/progress-bar/progress-bar.js +2 -2
- package/dist/commonjs/components/progress-bar/progress-bar.js.map +1 -1
- package/dist/commonjs/components/slider/slider.js +2 -2
- package/dist/commonjs/components/slider/slider.js.map +1 -1
- package/dist/commonjs/components/table/contexts/table-state.d.ts.map +1 -1
- package/dist/commonjs/components/table/contexts/table-state.js +2 -1
- package/dist/commonjs/components/table/contexts/table-state.js.map +1 -1
- package/dist/commonjs/components/table/hooks/use-table-cell.d.ts.map +1 -1
- package/dist/commonjs/components/table/hooks/use-table-cell.js +3 -2
- package/dist/commonjs/components/table/hooks/use-table-cell.js.map +1 -1
- package/dist/commonjs/components/table/hooks/use-table.d.ts.map +1 -1
- package/dist/commonjs/components/table/hooks/use-table.js +4 -3
- package/dist/commonjs/components/table/hooks/use-table.js.map +1 -1
- package/dist/commonjs/components/table/table-body-cell.d.ts.map +1 -1
- package/dist/commonjs/components/table/table-body-cell.js +3 -3
- package/dist/commonjs/components/table/table-body-cell.js.map +1 -1
- package/dist/commonjs/components/table/table-body-row.d.ts.map +1 -1
- package/dist/commonjs/components/table/table-body-row.js +2 -3
- package/dist/commonjs/components/table/table-body-row.js.map +1 -1
- package/dist/commonjs/components/table/table-empty-state.d.ts.map +1 -1
- package/dist/commonjs/components/table/table-empty-state.js +4 -4
- package/dist/commonjs/components/table/table-empty-state.js.map +1 -1
- package/dist/commonjs/components/table/table-header-cell.d.ts.map +1 -1
- package/dist/commonjs/components/table/table-header-cell.js +4 -4
- package/dist/commonjs/components/table/table-header-cell.js.map +1 -1
- package/dist/commonjs/components/table/table-header-row.d.ts.map +1 -1
- package/dist/commonjs/components/table/table-header-row.js +2 -2
- package/dist/commonjs/components/table/table-header-row.js.map +1 -1
- package/dist/commonjs/components/table/table.d.ts.map +1 -1
- package/dist/commonjs/components/table/table.js +3 -3
- package/dist/commonjs/components/table/table.js.map +1 -1
- package/dist/commonjs/components/tag-field/tag-field-input.js +8 -15
- package/dist/commonjs/components/tag-field/tag-field-input.js.map +1 -1
- package/dist/commonjs/components/tag-field/tag-field-list-box.js +2 -36
- package/dist/commonjs/components/tag-field/tag-field-list-box.js.map +1 -1
- package/dist/commonjs/components/tag-field/tag-field.d.ts +1 -1
- package/dist/commonjs/components/tag-field/tag-field.d.ts.map +1 -1
- package/dist/commonjs/components/tag-field/tag-field.js +17 -92
- package/dist/commonjs/components/tag-field/tag-field.js.map +1 -1
- package/dist/commonjs/components/text-inputs/text-field.js +4 -4
- package/dist/commonjs/components/text-inputs/text-field.js.map +1 -1
- package/dist/commonjs/components/toggle-button/internal-toggle-button.d.ts.map +1 -1
- package/dist/commonjs/components/toggle-button/internal-toggle-button.js +2 -1
- package/dist/commonjs/components/toggle-button/internal-toggle-button.js.map +1 -1
- package/dist/commonjs/components/typography/link.d.ts +1 -1
- package/dist/commonjs/components/typography/link.d.ts.map +1 -1
- package/dist/commonjs/components/typography/link.js.map +1 -1
- package/dist/esm/components/app-shell/app-shell.d.ts +5 -4
- package/dist/esm/components/app-shell/app-shell.d.ts.map +1 -1
- package/dist/esm/components/app-shell/app-shell.js +4 -4
- package/dist/esm/components/app-shell/app-shell.js.map +1 -1
- package/dist/esm/components/breadcrumbs/breadcrumbs.d.ts.map +1 -1
- package/dist/esm/components/breadcrumbs/breadcrumbs.js +2 -1
- package/dist/esm/components/breadcrumbs/breadcrumbs.js.map +1 -1
- package/dist/esm/components/combo-box/combo-box.d.ts +7 -1
- package/dist/esm/components/combo-box/combo-box.d.ts.map +1 -1
- package/dist/esm/components/combo-box/combo-box.js +6 -2
- package/dist/esm/components/combo-box/combo-box.js.map +1 -1
- package/dist/esm/components/date-picker/views/view-grid-cell.js +3 -3
- package/dist/esm/components/date-picker/views/view-grid-cell.js.map +1 -1
- package/dist/esm/components/file-picker/file-picker.d.ts.map +1 -1
- package/dist/esm/components/file-picker/file-picker.js +2 -1
- package/dist/esm/components/file-picker/file-picker.js.map +1 -1
- package/dist/esm/components/internal/focusable-container/focusable-container.js +2 -2
- package/dist/esm/components/internal/focusable-container/focusable-container.js.map +1 -1
- package/dist/esm/components/link-tabs/link-tabs.d.ts.map +1 -1
- package/dist/esm/components/link-tabs/link-tabs.js +1 -1
- package/dist/esm/components/link-tabs/link-tabs.js.map +1 -1
- package/dist/esm/components/progress-bar/progress-bar.js +1 -1
- package/dist/esm/components/progress-bar/progress-bar.js.map +1 -1
- package/dist/esm/components/slider/slider.js +1 -1
- package/dist/esm/components/slider/slider.js.map +1 -1
- package/dist/esm/components/table/contexts/table-state.d.ts.map +1 -1
- package/dist/esm/components/table/contexts/table-state.js +2 -1
- package/dist/esm/components/table/contexts/table-state.js.map +1 -1
- package/dist/esm/components/table/hooks/use-table-cell.d.ts.map +1 -1
- package/dist/esm/components/table/hooks/use-table-cell.js +3 -2
- package/dist/esm/components/table/hooks/use-table-cell.js.map +1 -1
- package/dist/esm/components/table/hooks/use-table.d.ts.map +1 -1
- package/dist/esm/components/table/hooks/use-table.js +4 -3
- package/dist/esm/components/table/hooks/use-table.js.map +1 -1
- package/dist/esm/components/table/table-body-cell.d.ts.map +1 -1
- package/dist/esm/components/table/table-body-cell.js +1 -1
- package/dist/esm/components/table/table-body-cell.js.map +1 -1
- package/dist/esm/components/table/table-body-row.d.ts.map +1 -1
- package/dist/esm/components/table/table-body-row.js +1 -2
- package/dist/esm/components/table/table-body-row.js.map +1 -1
- package/dist/esm/components/table/table-empty-state.d.ts.map +1 -1
- package/dist/esm/components/table/table-empty-state.js +1 -1
- package/dist/esm/components/table/table-empty-state.js.map +1 -1
- package/dist/esm/components/table/table-header-cell.d.ts.map +1 -1
- package/dist/esm/components/table/table-header-cell.js +1 -1
- package/dist/esm/components/table/table-header-cell.js.map +1 -1
- package/dist/esm/components/table/table-header-row.d.ts.map +1 -1
- package/dist/esm/components/table/table-header-row.js +1 -1
- package/dist/esm/components/table/table-header-row.js.map +1 -1
- package/dist/esm/components/table/table.d.ts.map +1 -1
- package/dist/esm/components/table/table.js +1 -1
- package/dist/esm/components/table/table.js.map +1 -1
- package/dist/esm/components/tag-field/tag-field-input.js +9 -16
- package/dist/esm/components/tag-field/tag-field-input.js.map +1 -1
- package/dist/esm/components/tag-field/tag-field-list-box.js +4 -38
- package/dist/esm/components/tag-field/tag-field-list-box.js.map +1 -1
- package/dist/esm/components/tag-field/tag-field.d.ts +1 -1
- package/dist/esm/components/tag-field/tag-field.d.ts.map +1 -1
- package/dist/esm/components/tag-field/tag-field.js +19 -94
- package/dist/esm/components/tag-field/tag-field.js.map +1 -1
- package/dist/esm/components/text-inputs/text-field.js +1 -1
- package/dist/esm/components/text-inputs/text-field.js.map +1 -1
- package/dist/esm/components/toggle-button/internal-toggle-button.d.ts.map +1 -1
- package/dist/esm/components/toggle-button/internal-toggle-button.js +2 -1
- package/dist/esm/components/toggle-button/internal-toggle-button.js.map +1 -1
- package/dist/esm/components/typography/link.d.ts +1 -1
- package/dist/esm/components/typography/link.d.ts.map +1 -1
- package/dist/esm/components/typography/link.js.map +1 -1
- package/dist-styles/core.css +1 -1
- package/dist-styles/styles.css +1 -1
- package/package.json +12 -12
- package/dist/commonjs/components/tag-field/tag-field-tags.d.ts +0 -2
- package/dist/commonjs/components/tag-field/tag-field-tags.d.ts.map +0 -1
- package/dist/commonjs/components/tag-field/tag-field-tags.js +0 -31
- package/dist/commonjs/components/tag-field/tag-field-tags.js.map +0 -1
- package/dist/esm/components/tag-field/tag-field-tags.d.ts +0 -2
- package/dist/esm/components/tag-field/tag-field-tags.d.ts.map +0 -1
- package/dist/esm/components/tag-field/tag-field-tags.js +0 -28
- package/dist/esm/components/tag-field/tag-field-tags.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusable-container.js","sourceRoot":"","sources":["../../../../../src/components/internal/focusable-container/focusable-container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"focusable-container.js","sourceRoot":"","sources":["../../../../../src/components/internal/focusable-container/focusable-container.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAqC,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAUrD,SAAS,kBAAkB,CACzB,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,EAA2B,EAChE,GAAiC;IAEjC,MAAM,YAAY,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IACvC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,CAAC;QAC9C,MAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;QAE5C,IAAI,uBAAmD,CAAC;QAExD,IAAI,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC;YAC/B,uBAAuB,GAAG,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC9D,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;oBACf,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;oBAC9B,eAAe,CACb,eAAe,KAAK,YAAY;wBAC9B,CAAC,CAAC,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,WAAW;wBACzC,CAAC,CAAC,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,CAC9C,CAAC;gBACJ,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,uBAAuB,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QACpD,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,IAAI,uBAAuB,EAAE,CAAC;gBAChD,uBAAuB,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;YACtD,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAEpC,MAAM,cAAc,GAAuC;QACzD,SAAS,EAAE,yBAAyB;QACpC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,oBAAoB,EAAE,cAAc,IAAI,SAAS;QACjD,gBAAgB,EAAE,eAAe;KAClC,CAAC;IAEF,OAAO,CACL,iBAAS,UAAU,CAAC,KAAK,EAAE,UAAU,EAAE,cAAc,CAAC,EAAE,GAAG,EAAE,YAAY,YACtE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,gDAAgD;AAChD;;;GAGG;AACH,MAAM,mBAAmB,GAAG,UAAU,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,CAAC;AAEjF,OAAO,EAAE,mBAAmB,IAAI,kBAAkB,EAAE,CAAC","sourcesContent":["import { useLayoutEffect } from '@react-aria/utils';\nimport { type ForwardedRef, type ReactNode, useState } from 'react';\nimport { useFocusRing, mergeProps, useObjectRef } from 'react-aria';\nimport { forwardRef } from '../../../forward-ref.js';\nimport type { NativeElementProps } from '../../types.js';\n\ninterface FocusableContainerProps extends NativeElementProps<HTMLDivElement> {\n /** The contents of the container. */\n children: ReactNode;\n /** The expected scrolling direction. */\n scrollDirection: 'horizontal' | 'vertical';\n}\n\nfunction FocusableContainer(\n { children, scrollDirection, ...props }: FocusableContainerProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const containerRef = useObjectRef(ref);\n const [isScrollable, setIsScrollable] = useState(false);\n const { focusProps, isFocusVisible } = useFocusRing();\n\n useLayoutEffect(() => {\n const containerElement = containerRef.current;\n const isSSR = typeof window === 'undefined';\n\n let containerResizeObserver: ResizeObserver | undefined;\n\n if (containerElement && !isSSR) {\n containerResizeObserver = new window.ResizeObserver((entries) => {\n if (entries[0]) {\n const { target } = entries[0];\n setIsScrollable(\n scrollDirection === 'horizontal'\n ? target.scrollWidth > target.clientWidth\n : target.scrollHeight > target.clientHeight,\n );\n }\n });\n\n containerResizeObserver.observe(containerElement);\n }\n\n return () => {\n if (containerElement && containerResizeObserver) {\n containerResizeObserver.unobserve(containerElement);\n }\n };\n }, [containerRef, scrollDirection]);\n\n const containerProps: NativeElementProps<HTMLDivElement> = {\n className: 'cim-focusable-container',\n tabIndex: isScrollable ? 0 : -1,\n 'data-focus-visible': isFocusVisible || undefined,\n 'data-direction': scrollDirection,\n };\n\n return (\n <div {...mergeProps(props, focusProps, containerProps)} ref={containerRef}>\n {children}\n </div>\n );\n}\n\n// TODO: export this component from the package?\n/**\n * Renders a container that can be focused if it becomes scrollable.\n * @internal\n */\nconst _FocusableContainer = forwardRef(FocusableContainer, 'FocusableContainer');\n\nexport { _FocusableContainer as FocusableContainer };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link-tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/link-tabs/link-tabs.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"link-tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/link-tabs/link-tabs.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAA0C,MAAM,OAAO,CAAC;AAE/E,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAIxF,OAAO,KAAK,EACV,iBAAiB,EACjB,WAAW,EACX,IAAI,EACJ,eAAe,EACf,kBAAkB,EAClB,YAAY,EACb,MAAM,aAAa,CAAC;AAIrB,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,iBAAiB;IACnE,wCAAwC;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,iEAAiE;IACjE,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,yDAAyD;IACzD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CAC5C;AA6CD;;;;GAIG;AACH,QAAA,MAAM,SAAS,+JAAmD,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAEjC,MAAM,WAAW,YACf,SACE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EACvB,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,EACrC,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IAC/E,4CAA4C;IAC5C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,8CAA8C;AAC9C,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,KAAK,EACL,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,GAAG,KAAK,EACT,EAAE,YAAY,2CA8Bd;yBAvCe,OAAO"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useId } from '@react-aria/utils';
|
|
4
3
|
import { useControlledState } from '@react-stately/utils';
|
|
5
4
|
import clsx from 'clsx';
|
|
6
5
|
import { useMemo, useContext } from 'react';
|
|
6
|
+
import { useId } from 'react-aria';
|
|
7
7
|
import { Link as RACLink } from 'react-aria-components';
|
|
8
8
|
import { forwardRef } from '../../forward-ref.js';
|
|
9
9
|
import { useProductionWarning } from '../../utils/use-production-warning.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link-tabs.js","sourceRoot":"","sources":["../../../../src/components/link-tabs/link-tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"link-tabs.js","sourceRoot":"","sources":["../../../../src/components/link-tabs/link-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { type ReactNode, type ForwardedRef, useMemo, useContext } from 'react';\nimport { useId } from 'react-aria';\nimport { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type {\n AriaLabelingProps,\n CommonProps,\n Href,\n NavigationProps,\n StringLikeChildren,\n WithRequired,\n} from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { LinkTabsContext, type LinkTabsContextValue } from './context.js';\n\nexport interface LinkTabsProps extends CommonProps, AriaLabelingProps {\n /** Link tabs belonging to the group. */\n children: ReactNode;\n /** Whether the link tabs are disabled. */\n isDisabled?: boolean;\n /** The currently selected key in the collection (controlled). */\n currentHref?: Href | null;\n /** The initial selected key in the collection (uncontrolled). */\n defaultHref?: Href | null;\n /** Handler that is called when the selection changes. */\n onHrefChange?: (href: Href | null) => void;\n}\n\nfunction LinkTabs(\n {\n children,\n currentHref,\n defaultHref,\n onHrefChange,\n UNSAFE_className,\n UNSAFE_style,\n id,\n isDisabled,\n ...props\n }: LinkTabsProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!ariaLabel && !ariaLabelledBy) {\n console.warn('LinkTabs requires one of aria-label / aria-labelledby for accessibility');\n }\n }, [ariaLabel, ariaLabelledBy]);\n\n const linkTabsId = useId(id);\n const [href, setHref] = useControlledState(currentHref, defaultHref ?? null, onHrefChange);\n\n const linkTabsContext: LinkTabsContextValue = useMemo(\n () => ({\n isDisabled,\n currentHref: href,\n setCurrentHref: setHref,\n }),\n [isDisabled, href, setHref],\n );\n\n return (\n <nav {...props} ref={ref} id={linkTabsId} className={clsx('cim-link-tabs', UNSAFE_className)}>\n <ul style={UNSAFE_style} aria-labelledby={linkTabsId} data-disabled={isDisabled} className=\"cim-tab-list\">\n <LinkTabsContext.Provider value={linkTabsContext}>{children}</LinkTabsContext.Provider>\n </ul>\n </nav>\n );\n}\n\n/**\n * Displays a list of tabs to help users navigate through a website.\n *\n * See [tabs usage guidelines](https://ui.cimpress.io/components/tabs/).\n */\nconst _LinkTabs = withStyleProps(forwardRef(LinkTabs), 'LinkTabs');\n\nexport { _LinkTabs as LinkTabs };\n\nexport interface LinkTabProps\n extends\n Omit<CommonProps, 'id'>,\n WithRequired<NavigationProps, 'href'>,\n Pick<RACLinkProps, 'children' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The text to display as the tab title. */\n children: StringLikeChildren;\n /** An icon displayed before the tab title. */\n iconStart?: ReactNode;\n /** A badge displayed after the tab title. */\n badge?: ReactNode;\n}\n\n/** Renders a single tab within `LinkTabs`. */\nexport function LinkTab({\n children,\n href,\n iconStart,\n badge,\n UNSAFE_className,\n UNSAFE_style,\n isDisabled,\n ...props\n}: LinkTabProps) {\n const linkTabsContext = useContext(LinkTabsContext);\n if (!linkTabsContext) {\n throw new Error('Cannot use link tab outside of link tabs');\n }\n\n const { isDisabled: isGroupDisabled, currentHref, setCurrentHref } = linkTabsContext;\n\n const isCurrent = href === currentHref;\n\n return (\n <li>\n <RACLink\n {...props}\n className={clsx('cim-tab-item', 'cim-link-tab-item', UNSAFE_className)}\n style={UNSAFE_style}\n href={href}\n onPress={() => setCurrentHref(href)}\n aria-current={isCurrent ? 'page' : undefined}\n data-selected={isCurrent || undefined}\n isDisabled={isDisabled || isGroupDisabled}\n >\n {iconStart}\n <Text as=\"span\" variant=\"medium-semibold\" alignment=\"center\">\n {children}\n </Text>\n {badge}\n </RACLink>\n </li>\n );\n}\n\nLinkTab.displayName = 'LinkTab';\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useId } from '@react-aria/utils';
|
|
4
3
|
import clsx from 'clsx';
|
|
4
|
+
import { useId } from 'react-aria';
|
|
5
5
|
import { Provider as RACProvider, TextContext as RACTextContext, ProgressBar as RACProgressBar, } from 'react-aria-components';
|
|
6
6
|
import { forwardRef } from '../../forward-ref.js';
|
|
7
7
|
import { withStyleProps } from '../../with-style-props.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,
|
|
1
|
+
{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EACL,QAAQ,IAAI,WAAW,EACvB,WAAW,IAAI,cAAc,EAC7B,WAAW,IAAI,cAAc,GAE9B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE5F,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAkBnD,SAAS,WAAW,CAClB,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,GAAG,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAoB,EACnH,GAAiC;IAEjC,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;IAE9B,OAAO,CACL,KAAC,WAAW,IAAC,MAAM,EAAE,CAAC,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CAAC,YACxF,KAAC,cAAc,OACT,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,EACrD,KAAK,EAAE,YAAY,sBACD,CAAC,WAAW,IAAI,aAAa,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAEpG,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC9B,8BACE,KAAC,cAAc,IAAC,UAAU,EAAE,KAAK,YAAG,KAAK,GAAkB,EAC1D,SAAS,IAAI,CACZ,eAAM,SAAS,EAAE,IAAI,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,YAC5F,SAAS,GACL,CACR,EACD,cAAK,SAAS,EAAC,wBAAwB,YACrC,cACE,SAAS,EAAC,uBAAuB,EACjC,KAAK,EACH;gCACE,+BAA+B,EAAE,UAAU,GAAG,GAAG;gCACjD,+BAA+B,EAAE,gBAAgB,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,GAAG;6BACrE,GAEpB,GACE,EACN,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IACzD,CACJ,GACc,GACL,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;AAE5E,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { CSSProperties, ForwardedRef } from 'react';\nimport { useId } from 'react-aria';\nimport {\n Provider as RACProvider,\n TextContext as RACTextContext,\n ProgressBar as RACProgressBar,\n type ProgressBarProps as RACProgressBarProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface ProgressBarProps\n extends CommonProps, LabellableProps, Pick<RACProgressBarProps, 'value' | 'valueLabel' | 'maxValue'> {\n /**\n * The tone of the progress bar.\n * @default 'base'\n */\n tone?: 'base' | 'success' | 'warning' | 'critical';\n /**\n * Whether the value of the progress bar should be displayed above it.\n * @default true\n */\n showValue?: boolean;\n /** A description for the progress bar. */\n description?: string;\n}\n\nfunction ProgressBar(\n { label, description, tone = 'base', showValue = true, UNSAFE_className, UNSAFE_style, ...props }: ProgressBarProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const descriptionId = useId();\n\n return (\n <RACProvider values={[[RACTextContext, { slots: { description: { id: descriptionId } } }]]}>\n <RACProgressBar\n {...props}\n ref={ref}\n className={clsx('cim-progress-bar', UNSAFE_className)}\n style={UNSAFE_style}\n aria-describedby={[description && descriptionId, props['aria-describedby']].filter(Boolean).join(' ')}\n >\n {({ percentage, valueText }) => (\n <>\n <FormFieldLabel isRequired={false}>{label}</FormFieldLabel>\n {showValue && (\n <span className={clsx('cim-progress-bar-value', textStyle({ variant: 'medium', tone: 'base' }))}>\n {valueText}\n </span>\n )}\n <div className=\"cim-progress-bar-track\">\n <div\n className=\"cim-progress-bar-fill\"\n style={\n {\n '--cim-progress-bar-percentage': percentage + '%',\n '--cim-progress-bar-fill-color': `var(--cim-bg-${tone === 'base' ? 'accent' : tone})`,\n } as CSSProperties\n }\n />\n </div>\n <FormFieldDescription>{description}</FormFieldDescription>\n </>\n )}\n </RACProgressBar>\n </RACProvider>\n );\n}\n\n/**\n * Visualizes the progress of an operation.\n *\n * See [progress bar usage guidelines](https://ui.cimpress.io/components/progress-bar/).\n */\nconst _ProgressBar = withStyleProps(forwardRef(ProgressBar), 'ProgressBar');\n\nexport { _ProgressBar as ProgressBar };\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useId } from '@react-aria/utils';
|
|
4
3
|
import clsx from 'clsx';
|
|
5
4
|
import { useContext } from 'react';
|
|
5
|
+
import { useId } from 'react-aria';
|
|
6
6
|
import { LabelContext as RACLabelContext, NumberField as RACNumberField, Provider as RACProvider, Slider as RACSlider, SliderOutput as RACSliderOutput, SliderStateContext as RACSliderStateContext, SliderThumb as RACSliderThumb, SliderTrack as RACSliderTrack, TextContext as RACTextContext, useSlottedContext, } from 'react-aria-components';
|
|
7
7
|
import { forwardRef } from '../../forward-ref.js';
|
|
8
8
|
import { useProductionWarning } from '../../utils/use-production-warning.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useId } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport {\n LabelContext as RACLabelContext,\n NumberField as RACNumberField,\n Provider as RACProvider,\n Slider as RACSlider,\n SliderOutput as RACSliderOutput,\n SliderStateContext as RACSliderStateContext,\n SliderThumb as RACSliderThumb,\n SliderTrack as RACSliderTrack,\n TextContext as RACTextContext,\n useSlottedContext,\n type NumberFieldProps as RACNumberFieldProps,\n type SliderProps as RACSliderProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Input } from '../internal/input/input.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\n// TODO: move to translations when stabilized\nconst sliderStrings = {\n srMinimum: 'minimum',\n srMaximum: 'maximum',\n};\n\nexport interface UNSTABLE_SliderProps<T extends number | number[] = number>\n extends\n CommonProps,\n LabellableProps,\n Pick<RACSliderProps<T>, 'isDisabled' | 'minValue' | 'maxValue' | 'step' | 'formatOptions'> {\n /** A description for the field. Provides a hint such as specific requirements for what to choose. */\n description?: string;\n /** The current value (controlled). */\n value?: T;\n /** The default value (uncontrolled). */\n defaultValue?: T;\n /** Handler that is called when the value changes. */\n onChange?: (value: T) => void;\n /** Handler that is called when the slider stops moving. */\n onChangeEnd?: (value: T) => void;\n /**\n * The `<form>` element to associate the input with.\n * The value of this attribute must be the id of a `<form>` in the same document.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n */\n form?: string;\n /**\n * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).\n */\n name?: T extends number[] ? string[] : string;\n /** Show input fields for slider values. */\n withInput?: boolean;\n /** Show static labels for minimum and maximum values. */\n showLabels?: boolean;\n}\n\nfunction UNSTABLE_Slider<T extends number | number[] = number>(\n {\n label,\n description,\n UNSAFE_className,\n UNSAFE_style,\n form,\n name,\n withInput,\n showLabels,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n ...props\n }: UNSTABLE_SliderProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const descriptionId = useId();\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Slider requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACProvider values={[[RACTextContext, { slots: { description: { id: descriptionId } } }]]}>\n <RACSlider\n {...props}\n ref={ref}\n className={clsx('cim-slider', UNSAFE_className)}\n style={UNSAFE_style}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n orientation=\"horizontal\"\n aria-describedby={[description && descriptionId, props['aria-describedby']].filter(Boolean).join(' ')}\n >\n {({ state, isDisabled }) => {\n return (\n <>\n <FormFieldLabel isRequired={false} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n {!withInput && label != null && (\n <RACSliderOutput className=\"cim-slider-output\">\n <Text as=\"span\" variant=\"medium\">\n {state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n </Text>\n </RACSliderOutput>\n )}\n <div className=\"cim-slider-track-container\">\n {showLabels && (\n <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-slider-label-min\">\n {state.getThumbMinValue(0)}\n </Text>\n )}\n\n <RACSliderTrack className=\"cim-slider-track\">\n {({ state: trackState, isDisabled: trackIsDisabled }) => (\n <>\n <div className=\"cim-slider-track-background\" data-disabled={trackIsDisabled || undefined} />\n <div\n className=\"cim-slider-fill\"\n style={\n (state.values.length === 1\n ? {\n '--cim-slider-fill-size': trackState.getThumbPercent(0) * 100 + '%',\n }\n : state.values.length === 2\n ? {\n '--cim-slider-fill-start': trackState.getThumbPercent(0) * 100 + '%',\n '--cim-slider-fill-size':\n (trackState.getThumbPercent(1) - trackState.getThumbPercent(0)) * 100 + '%',\n }\n : {}) as React.CSSProperties\n }\n />\n {trackState.values.map((_, i) => (\n <SliderThumb key={i} index={i} name={typeof name === 'string' ? name : name?.[i]} form={form} />\n ))}\n </>\n )}\n </RACSliderTrack>\n {showLabels && (\n <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-slider-label-max\">\n {state.getThumbMaxValue(state.values.length - 1)}\n </Text>\n )}\n {withInput && (\n <div className=\"cim-slider-inputs-container-wide\">\n {state.values.map((_, i) => (\n <SliderNumberField\n key={i}\n index={i}\n style={{ order: state.values.length === 2 ? (i === 0 ? -1 : 1) : undefined }}\n formatOptions={props.formatOptions}\n >\n <Input width=\"fit-content\" />\n </SliderNumberField>\n ))}\n </div>\n )}\n </div>\n {withInput && (\n <div className=\"cim-slider-inputs-container-narrow\">\n {state.values.map((_, i) => (\n <SliderNumberField key={i} index={i} formatOptions={props.formatOptions}>\n <Input />\n </SliderNumberField>\n ))}\n </div>\n )}\n <FormFieldDescription>{description}</FormFieldDescription>\n </>\n );\n }}\n </RACSlider>\n </RACProvider>\n );\n}\n\ninterface SliderNumberFieldProps extends RACNumberFieldProps {\n index: number;\n}\n\nfunction SliderNumberField({ index, ...props }: SliderNumberFieldProps) {\n const state = useContext(RACSliderStateContext)!;\n const labelProps = useSlottedContext(RACLabelContext)!;\n\n return (\n <RACNumberField\n {...props}\n className=\"cim-slider-input\"\n value={state.values[index]}\n onChange={(value) => state.setThumbValue(index, value ?? 0)}\n aria-labelledby={labelProps.id}\n aria-label={\n state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined\n }\n />\n );\n}\n\nfunction SliderThumb({ index, name, form }: { index: number; name?: string | string[]; form?: string }) {\n const state = useContext(RACSliderStateContext)!;\n\n return (\n <RACSliderThumb\n index={index}\n className=\"cim-slider-thumb\"\n name={typeof name === 'string' ? name : name?.[index]}\n form={form}\n aria-label={\n state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined\n }\n />\n );\n}\n\n/**\n * Allows users to select one or more values within a range.\n */\nconst _UNSTABLE_Slider = withStyleProps(forwardRef(UNSTABLE_Slider), 'Slider');\n\nexport { _UNSTABLE_Slider as UNSTABLE_Slider };\n"]}
|
|
1
|
+
{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, type ForwardedRef } from 'react';\nimport { useId } from 'react-aria';\nimport {\n LabelContext as RACLabelContext,\n NumberField as RACNumberField,\n Provider as RACProvider,\n Slider as RACSlider,\n SliderOutput as RACSliderOutput,\n SliderStateContext as RACSliderStateContext,\n SliderThumb as RACSliderThumb,\n SliderTrack as RACSliderTrack,\n TextContext as RACTextContext,\n useSlottedContext,\n type NumberFieldProps as RACNumberFieldProps,\n type SliderProps as RACSliderProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport { Input } from '../internal/input/input.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\nimport { Text } from '../typography/text.js';\n\n// TODO: move to translations when stabilized\nconst sliderStrings = {\n srMinimum: 'minimum',\n srMaximum: 'maximum',\n};\n\nexport interface UNSTABLE_SliderProps<T extends number | number[] = number>\n extends\n CommonProps,\n LabellableProps,\n Pick<RACSliderProps<T>, 'isDisabled' | 'minValue' | 'maxValue' | 'step' | 'formatOptions'> {\n /** A description for the field. Provides a hint such as specific requirements for what to choose. */\n description?: string;\n /** The current value (controlled). */\n value?: T;\n /** The default value (uncontrolled). */\n defaultValue?: T;\n /** Handler that is called when the value changes. */\n onChange?: (value: T) => void;\n /** Handler that is called when the slider stops moving. */\n onChangeEnd?: (value: T) => void;\n /**\n * The `<form>` element to associate the input with.\n * The value of this attribute must be the id of a `<form>` in the same document.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n */\n form?: string;\n /**\n * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).\n */\n name?: T extends number[] ? string[] : string;\n /** Show input fields for slider values. */\n withInput?: boolean;\n /** Show static labels for minimum and maximum values. */\n showLabels?: boolean;\n}\n\nfunction UNSTABLE_Slider<T extends number | number[] = number>(\n {\n label,\n description,\n UNSAFE_className,\n UNSAFE_style,\n form,\n name,\n withInput,\n showLabels,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n ...props\n }: UNSTABLE_SliderProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const descriptionId = useId();\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('Slider requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACProvider values={[[RACTextContext, { slots: { description: { id: descriptionId } } }]]}>\n <RACSlider\n {...props}\n ref={ref}\n className={clsx('cim-slider', UNSAFE_className)}\n style={UNSAFE_style}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n orientation=\"horizontal\"\n aria-describedby={[description && descriptionId, props['aria-describedby']].filter(Boolean).join(' ')}\n >\n {({ state, isDisabled }) => {\n return (\n <>\n <FormFieldLabel isRequired={false} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n {!withInput && label != null && (\n <RACSliderOutput className=\"cim-slider-output\">\n <Text as=\"span\" variant=\"medium\">\n {state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n </Text>\n </RACSliderOutput>\n )}\n <div className=\"cim-slider-track-container\">\n {showLabels && (\n <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-slider-label-min\">\n {state.getThumbMinValue(0)}\n </Text>\n )}\n\n <RACSliderTrack className=\"cim-slider-track\">\n {({ state: trackState, isDisabled: trackIsDisabled }) => (\n <>\n <div className=\"cim-slider-track-background\" data-disabled={trackIsDisabled || undefined} />\n <div\n className=\"cim-slider-fill\"\n style={\n (state.values.length === 1\n ? {\n '--cim-slider-fill-size': trackState.getThumbPercent(0) * 100 + '%',\n }\n : state.values.length === 2\n ? {\n '--cim-slider-fill-start': trackState.getThumbPercent(0) * 100 + '%',\n '--cim-slider-fill-size':\n (trackState.getThumbPercent(1) - trackState.getThumbPercent(0)) * 100 + '%',\n }\n : {}) as React.CSSProperties\n }\n />\n {trackState.values.map((_, i) => (\n <SliderThumb key={i} index={i} name={typeof name === 'string' ? name : name?.[i]} form={form} />\n ))}\n </>\n )}\n </RACSliderTrack>\n {showLabels && (\n <Text as=\"span\" variant=\"medium\" UNSAFE_className=\"cim-slider-label-max\">\n {state.getThumbMaxValue(state.values.length - 1)}\n </Text>\n )}\n {withInput && (\n <div className=\"cim-slider-inputs-container-wide\">\n {state.values.map((_, i) => (\n <SliderNumberField\n key={i}\n index={i}\n style={{ order: state.values.length === 2 ? (i === 0 ? -1 : 1) : undefined }}\n formatOptions={props.formatOptions}\n >\n <Input width=\"fit-content\" />\n </SliderNumberField>\n ))}\n </div>\n )}\n </div>\n {withInput && (\n <div className=\"cim-slider-inputs-container-narrow\">\n {state.values.map((_, i) => (\n <SliderNumberField key={i} index={i} formatOptions={props.formatOptions}>\n <Input />\n </SliderNumberField>\n ))}\n </div>\n )}\n <FormFieldDescription>{description}</FormFieldDescription>\n </>\n );\n }}\n </RACSlider>\n </RACProvider>\n );\n}\n\ninterface SliderNumberFieldProps extends RACNumberFieldProps {\n index: number;\n}\n\nfunction SliderNumberField({ index, ...props }: SliderNumberFieldProps) {\n const state = useContext(RACSliderStateContext)!;\n const labelProps = useSlottedContext(RACLabelContext)!;\n\n return (\n <RACNumberField\n {...props}\n className=\"cim-slider-input\"\n value={state.values[index]}\n onChange={(value) => state.setThumbValue(index, value ?? 0)}\n aria-labelledby={labelProps.id}\n aria-label={\n state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined\n }\n />\n );\n}\n\nfunction SliderThumb({ index, name, form }: { index: number; name?: string | string[]; form?: string }) {\n const state = useContext(RACSliderStateContext)!;\n\n return (\n <RACSliderThumb\n index={index}\n className=\"cim-slider-thumb\"\n name={typeof name === 'string' ? name : name?.[index]}\n form={form}\n aria-label={\n state.values.length === 2 ? (index === 0 ? sliderStrings.srMinimum : sliderStrings.srMaximum) : undefined\n }\n />\n );\n}\n\n/**\n * Allows users to select one or more values within a range.\n */\nconst _UNSTABLE_Slider = withStyleProps(forwardRef(UNSTABLE_Slider), 'Slider');\n\nexport { _UNSTABLE_Slider as UNSTABLE_Slider };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-state.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,SAAS,EAAyC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"table-state.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,SAAS,EAAyC,MAAM,OAAO,CAAC;AAI7F,mEAAmE;AACnE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wBAAwB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,wEAAwE;IACxE,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,2BAA2B,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;CACnE;AAID,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,GACzB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wBAAwB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACtD,2CA8CA;AAGD,wBAAgB,aAAa,IAAI,UAAU,CAO1C"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffectEvent as useRACEffectEvent
|
|
2
|
+
import { useEffectEvent as useRACEffectEvent } from '@react-aria/utils';
|
|
3
3
|
import { createContext, useContext, useMemo, useRef, useState } from 'react';
|
|
4
|
+
import { useId } from 'react-aria';
|
|
4
5
|
import { useLocalizedMessages } from '../../../i18n/localization-provider.js';
|
|
5
6
|
const TableStateContext = createContext(null);
|
|
6
7
|
export function TableStateProvider({ children, rowSelectionMode, areAllRowsSelected, areSomeRowsSelected, onAllRowsSelectionToggle, }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,
|
|
1
|
+
{"version":3,"file":"table-state.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/table-state.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,aAAa,EAAkB,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAgB9E,MAAM,iBAAiB,GAAG,aAAa,CAAoB,IAAI,CAAC,CAAC;AAEjE,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,GAOzB;IACC,+EAA+E;IAC/E,sDAAsD;IACtD,oDAAoD;IACpD,MAAM,2BAA2B,GAAG,MAAM,CAAsB,SAAS,CAAC,CAAC;IAC3E,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IAE3G,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,QAAQ,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAE/C,MAAM,gCAAgC,GAAG,iBAAiB,CAAC,wBAAwB,CAAC,CAAC;IAErF,MAAM,UAAU,GAAe,OAAO,CACpC,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,wBAAwB,EAAE,gCAAgC;QAC1D,IAAI,wBAAwB;YAC1B,OAAO,2BAA2B,CAAC,OAAO,CAAC;QAC7C,CAAC;QACD,2BAA2B,CAAC,wBAA6C;YACvE,2BAA2B,CAAC,OAAO,GAAG,wBAAwB,CAAC;YAC/D,4BAA4B,CAAC,wBAAwB,CAAC,CAAC;QACzD,CAAC;KACF,CAAC;IACF,uDAAuD;IACvD;QACE,WAAW;QACX,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,gCAAgC;QAChC,yBAAyB;KAC1B,CACF,CAAC;IAEF,OAAO,CACL,MAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,aAC1C,QAAQ,EACT,eAAM,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,WAAW,YAC9C,QAAQ,CAAC,MAAM,CAAC,uBAAuB,CAAC,GACpC,IACoB,CAC9B,CAAC;AACJ,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,aAAa;IAC3B,MAAM,UAAU,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IACjD,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["import { useEffectEvent as useRACEffectEvent } from '@react-aria/utils';\nimport { createContext, type ReactNode, useContext, useMemo, useRef, useState } from 'react';\nimport { useId } from 'react-aria';\nimport { useLocalizedMessages } from '../../../i18n/localization-provider.js';\n\n/** Represents the type of row selection allowed within a table. */\nexport type RowSelectionMode = 'single' | 'multiple' | 'none';\n\nexport interface TableState {\n sortLabelId: string;\n rowSelectionMode: RowSelectionMode;\n areAllRowsSelected?: boolean;\n areSomeRowsSelected?: boolean;\n onAllRowsSelectionToggle?: (value?: boolean) => void;\n /** The selection state that will be applied to the next focused row. */\n pendingRowSelectionState?: boolean;\n setPendingRowSelectionState: (value: boolean | undefined) => void;\n}\n\nconst TableStateContext = createContext<TableState | null>(null);\n\nexport function TableStateProvider({\n children,\n rowSelectionMode,\n areAllRowsSelected,\n areSomeRowsSelected,\n onAllRowsSelectionToggle,\n}: {\n children: ReactNode;\n rowSelectionMode: RowSelectionMode;\n areAllRowsSelected?: boolean;\n areSomeRowsSelected?: boolean;\n onAllRowsSelectionToggle?: (value?: boolean) => void;\n}) {\n // When the pending selection state is updated, we want to trigger a re-render,\n // but we also want immediate access to the new value.\n // Hence why it is stored as both a ref and a state.\n const pendingRowSelectionStateRef = useRef<boolean | undefined>(undefined);\n const [_pendingRowSelectionState, _setPendingRowSelectionState] = useState<boolean | undefined>(undefined);\n\n const sortLabelId = useId();\n const messages = useLocalizedMessages('table');\n\n const onAllRowsSelectionToggleMemoized = useRACEffectEvent(onAllRowsSelectionToggle);\n\n const tableState: TableState = useMemo(\n () => ({\n sortLabelId,\n rowSelectionMode,\n areAllRowsSelected,\n areSomeRowsSelected,\n onAllRowsSelectionToggle: onAllRowsSelectionToggleMemoized,\n get pendingRowSelectionState() {\n return pendingRowSelectionStateRef.current;\n },\n setPendingRowSelectionState(pendingRowSelectionState: boolean | undefined) {\n pendingRowSelectionStateRef.current = pendingRowSelectionState;\n _setPendingRowSelectionState(pendingRowSelectionState);\n },\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n sortLabelId,\n rowSelectionMode,\n areAllRowsSelected,\n areSomeRowsSelected,\n onAllRowsSelectionToggleMemoized,\n _pendingRowSelectionState,\n ],\n );\n\n return (\n <TableStateContext.Provider value={tableState}>\n {children}\n <span style={{ display: 'none' }} id={sortLabelId}>\n {messages.format('toggleColumnSortOrder')}\n </span>\n </TableStateContext.Provider>\n );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableState(): TableState {\n const tableState = useContext(TableStateContext);\n if (!tableState) {\n throw new Error('Cannot use table state outside of a table');\n }\n\n return tableState;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-table-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"AAGA,OAAO,EAAqD,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-table-cell.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"AAGA,OAAO,EAAqD,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAErG,OAAO,KAAK,EAAoB,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAM3E,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,kBAAkB,CAAC,oBAAoB,CAAC,CAAC;CACrD;AAED,wBAAgB,YAAY,CAC1B,GAAG,EAAE,SAAS,CAAC,oBAAoB,GAAG,IAAI,CAAC,EAC3C,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,GAChB,YAAY,CAsJd"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { getFocusableTreeWalker
|
|
1
|
+
import { getFocusableTreeWalker } from '@react-aria/focus';
|
|
2
2
|
import { isFocusVisible } from '@react-aria/interactions';
|
|
3
|
-
import {
|
|
3
|
+
import { useEffectEvent as useRACEffectEvent, useLayoutEffect } from '@react-aria/utils';
|
|
4
4
|
import { useEffect } from 'react';
|
|
5
|
+
import { useFocusRing, mergeProps } from 'react-aria';
|
|
5
6
|
import { useTableFocus } from '../contexts/focus.js';
|
|
6
7
|
import { useTableRowState } from '../contexts/row-state.js';
|
|
7
8
|
import { useTableState } from '../contexts/table-state.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-table-cell.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"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","sourcesContent":["import { getFocusableTreeWalker, useFocusRing } from '@react-aria/focus';\nimport { isFocusVisible } from '@react-aria/interactions';\nimport { mergeProps, useEffectEvent as useRACEffectEvent, useLayoutEffect } from '@react-aria/utils';\nimport { type KeyboardEventHandler, type FocusEventHandler, type RefObject, useEffect } from 'react';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { useTableFocus } from '../contexts/focus.js';\nimport { useTableRowState } from '../contexts/row-state.js';\nimport { useTableState } from '../contexts/table-state.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTableCell {\n cellProps: NativeElementProps<HTMLTableCellElement>;\n}\n\nexport function useTableCell(\n ref: RefObject<HTMLTableCellElement | null>,\n rowKey: string,\n columnKey: string,\n): UseTableCell {\n const tableFocus = useTableFocus();\n const { pendingRowSelectionState, setPendingRowSelectionState } = useTableState();\n const { onSelectionToggle } = useTableRowState();\n\n const { focusProps, isFocusVisible: isCellFocusVisible } = useFocusRing();\n\n const isTabbable = rowKey === tableFocus.focusedRowKey && columnKey === tableFocus.focusedColumnKey;\n\n // Handles focusing the cell.\n // If there is a focusable child, it is focused, otherwise the cell itself is focused.\n const focusCell = () => {\n if (!ref.current) {\n return;\n }\n\n // If there's a pending selection state, apply it to this cell's row.\n // If this cell is a header cell, `onSelectionToggle` will be undefined, but we still want to clear the pending selection state.\n if (pendingRowSelectionState !== undefined) {\n onSelectionToggle?.(pendingRowSelectionState);\n setPendingRowSelectionState(undefined);\n }\n\n // If focus is already on a focusable child within the cell, early return so we don't shift focus\n if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {\n return;\n }\n\n const treeWalker = getFocusableTreeWalker(ref.current);\n const focusable = tableFocus.childFocusStrategy === 'last' ? treeWalker.lastChild() : treeWalker.firstChild();\n\n if (focusable) {\n // Cell has focusable children, focus the child\n focusTableChild(focusable as FocusableElement);\n } else if (!ref.current.contains(document.activeElement)) {\n // Cell has no focusable children and current focus is outside of the cell, focus the cell itself\n focusTableChild(ref.current);\n } else if (ref.current === document.activeElement && !isTabbable) {\n // Focus is on the current cell, but table focus is elsewhere, update table focus state\n tableFocus.setFocus(rowKey, columnKey);\n }\n };\n\n // Focus the cell DOM node when table focus moves to this cell\n useLayoutEffect(() => {\n if (isTabbable && !ref.current!.contains(document.activeElement)) {\n focusCell();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ref, isTabbable]);\n\n const resetIfFocused = useRACEffectEvent(() => {\n if (isTabbable) {\n tableFocus.setFocus('', '');\n }\n });\n\n // Reset table focus when the focused cell unmounts\n useEffect(\n () => () => {\n resetIfFocused();\n },\n [resetIfFocused],\n );\n\n const onFocus: FocusEventHandler = (e) => {\n // Ignore focus events bubbling through portals\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n // If cell is already focused, return early.\n // However, if focus happens as a result of a press, we need to re-run the child-focusing logic,\n // otherwise `useFocusRing` will force the cell itself to become focused.\n if (e.currentTarget.contains(e.relatedTarget) && isFocusVisible()) {\n return;\n }\n\n // There are 3 scenarios for why a cell might receive focus:\n // - focus happens through a press, we need to update table focus state to the current cell\n // - focus happens through arrow key navigation within the table,\n // we do nothing as table focus state would have already been updated earlier\n // - focus happens through tabbing into the table from outside,\n // we do nothing because we want to restore focus to the previously focused cell,\n // and overriding table focus state would make that impossible\n if (!isFocusVisible()) {\n tableFocus.setFocus(rowKey, columnKey);\n }\n\n if (e.target === ref.current) {\n // If the cell itself receives focus, wait a frame so that focus finishes propagating\n // up to the tree, and move focus to a focusable child if possible.\n requestAnimationFrame(() => {\n if (document.activeElement === ref.current) {\n focusCell();\n }\n });\n }\n };\n\n // Handles keyboard navigation between focusable children within the cell.\n const onKeyDownCapture: KeyboardEventHandler = (e) => {\n // Ignore keyboard events bubbling through portals\n if (!e.currentTarget.contains(e.target as Element) || !ref.current || !document.activeElement) {\n return;\n }\n\n const walker = getFocusableTreeWalker(ref.current);\n walker.currentNode = document.activeElement;\n\n if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n // Move to the previous/next focusable element within the cell\n const childElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n\n if (childElementToFocus && childElementToFocus !== ref.current) {\n focusTableChild(childElementToFocus as FocusableElement);\n } else {\n // If there is no previous/next focusable element within the current cell, focus should move to the previous/next cell.\n // This is handled by `useTable`, so we need to let the event bubble up to it.\n // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n // Solution: re-dispatch the event from a parent element of the current cell.\n ref.current.parentElement!.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n }\n } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n // Move to the previous/next cell in the current column.\n // This is handled by `useTable`, so we need to let the event bubble up to it.\n // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n // Solution: re-dispatch the event from a parent element of the current cell.\n ref.current.parentElement?.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n } else {\n // if we didn't handle anything, return early so we don't stop propagation and preventDefault\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n };\n\n const customProps: NativeElementProps<HTMLTableCellElement> = {\n tabIndex: isTabbable ? 0 : -1,\n onFocus,\n onKeyDownCapture,\n 'data-cell-row-key': rowKey,\n 'data-cell-column-key': columnKey,\n 'data-focus-visible': isCellFocusVisible || undefined,\n };\n\n return {\n cellProps: mergeProps(focusProps, customProps),\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"use-table-cell.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,cAAc,IAAI,iBAAiB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzF,OAAO,EAAqE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrG,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAMhE,MAAM,UAAU,YAAY,CAC1B,GAA2C,EAC3C,MAAc,EACd,SAAiB;IAEjB,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,GAAG,aAAa,EAAE,CAAC;IAClF,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEjD,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE,GAAG,YAAY,EAAE,CAAC;IAE1E,MAAM,UAAU,GAAG,MAAM,KAAK,UAAU,CAAC,aAAa,IAAI,SAAS,KAAK,UAAU,CAAC,gBAAgB,CAAC;IAEpG,6BAA6B;IAC7B,sFAAsF;IACtF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,qEAAqE;QACrE,gIAAgI;QAChI,IAAI,wBAAwB,KAAK,SAAS,EAAE,CAAC;YAC3C,iBAAiB,EAAE,CAAC,wBAAwB,CAAC,CAAC;YAC9C,2BAA2B,CAAC,SAAS,CAAC,CAAC;QACzC,CAAC;QAED,iGAAiG;QACjG,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,GAAG,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE,CAAC;YAC3F,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,sBAAsB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACvD,MAAM,SAAS,GAAG,UAAU,CAAC,kBAAkB,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,EAAE,CAAC;QAE9G,IAAI,SAAS,EAAE,CAAC;YACd,+CAA+C;YAC/C,eAAe,CAAC,SAA6B,CAAC,CAAC;QACjD,CAAC;aAAM,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;YACzD,iGAAiG;YACjG,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC/B,CAAC;aAAM,IAAI,GAAG,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;YACjE,uFAAuF;YACvF,UAAU,CAAC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC;IAEF,8DAA8D;IAC9D,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,UAAU,IAAI,CAAC,GAAG,CAAC,OAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;YACjE,SAAS,EAAE,CAAC;QACd,CAAC;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;IAEtB,MAAM,cAAc,GAAG,iBAAiB,CAAC,GAAG,EAAE;QAC5C,IAAI,UAAU,EAAE,CAAC;YACf,UAAU,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,mDAAmD;IACnD,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,cAAc,EAAE,CAAC;IACnB,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,MAAM,OAAO,GAAsB,CAAC,CAAC,EAAE,EAAE;QACvC,+CAA+C;QAC/C,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QAED,4CAA4C;QAC5C,gGAAgG;QAChG,yEAAyE;QACzE,IAAI,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,cAAc,EAAE,EAAE,CAAC;YAClE,OAAO;QACT,CAAC;QAED,4DAA4D;QAC5D,2FAA2F;QAC3F,iEAAiE;QACjE,+EAA+E;QAC/E,+DAA+D;QAC/D,mFAAmF;QACnF,gEAAgE;QAChE,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;YACtB,UAAU,CAAC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QACzC,CAAC;QAED,IAAI,CAAC,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,CAAC;YAC7B,qFAAqF;YACrF,mEAAmE;YACnE,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,QAAQ,CAAC,aAAa,KAAK,GAAG,CAAC,OAAO,EAAE,CAAC;oBAC3C,SAAS,EAAE,CAAC;gBACd,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,CAAC;IAEF,0EAA0E;IAC1E,MAAM,gBAAgB,GAAyB,CAAC,CAAC,EAAE,EAAE;QACnD,kDAAkD;QAClD,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC;YAC9F,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,sBAAsB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACnD,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC;QAE5C,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YACpD,8DAA8D;YAC9D,MAAM,mBAAmB,GAAG,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;YAE9F,IAAI,mBAAmB,IAAI,mBAAmB,KAAK,GAAG,CAAC,OAAO,EAAE,CAAC;gBAC/D,eAAe,CAAC,mBAAuC,CAAC,CAAC;YAC3D,CAAC;iBAAM,CAAC;gBACN,uHAAuH;gBACvH,8EAA8E;gBAC9E,0IAA0I;gBAC1I,6EAA6E;gBAC7E,GAAG,CAAC,OAAO,CAAC,aAAc,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;YACjG,CAAC;QACH,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACxD,wDAAwD;YACxD,8EAA8E;YAC9E,0IAA0I;YAC1I,6EAA6E;YAC7E,GAAG,CAAC,OAAO,CAAC,aAAa,EAAE,aAAa,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;QACjG,CAAC;aAAM,CAAC;YACN,6FAA6F;YAC7F,OAAO;QACT,CAAC;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,WAAW,GAA6C;QAC5D,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7B,OAAO;QACP,gBAAgB;QAChB,mBAAmB,EAAE,MAAM;QAC3B,sBAAsB,EAAE,SAAS;QACjC,oBAAoB,EAAE,kBAAkB,IAAI,SAAS;KACtD,CAAC;IAEF,OAAO;QACL,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,WAAW,CAAC;KAC/C,CAAC;AACJ,CAAC","sourcesContent":["import { getFocusableTreeWalker } from '@react-aria/focus';\nimport { isFocusVisible } from '@react-aria/interactions';\nimport { useEffectEvent as useRACEffectEvent, useLayoutEffect } from '@react-aria/utils';\nimport { type KeyboardEventHandler, type FocusEventHandler, type RefObject, useEffect } from 'react';\nimport { useFocusRing, mergeProps } from 'react-aria';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { useTableFocus } from '../contexts/focus.js';\nimport { useTableRowState } from '../contexts/row-state.js';\nimport { useTableState } from '../contexts/table-state.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTableCell {\n cellProps: NativeElementProps<HTMLTableCellElement>;\n}\n\nexport function useTableCell(\n ref: RefObject<HTMLTableCellElement | null>,\n rowKey: string,\n columnKey: string,\n): UseTableCell {\n const tableFocus = useTableFocus();\n const { pendingRowSelectionState, setPendingRowSelectionState } = useTableState();\n const { onSelectionToggle } = useTableRowState();\n\n const { focusProps, isFocusVisible: isCellFocusVisible } = useFocusRing();\n\n const isTabbable = rowKey === tableFocus.focusedRowKey && columnKey === tableFocus.focusedColumnKey;\n\n // Handles focusing the cell.\n // If there is a focusable child, it is focused, otherwise the cell itself is focused.\n const focusCell = () => {\n if (!ref.current) {\n return;\n }\n\n // If there's a pending selection state, apply it to this cell's row.\n // If this cell is a header cell, `onSelectionToggle` will be undefined, but we still want to clear the pending selection state.\n if (pendingRowSelectionState !== undefined) {\n onSelectionToggle?.(pendingRowSelectionState);\n setPendingRowSelectionState(undefined);\n }\n\n // If focus is already on a focusable child within the cell, early return so we don't shift focus\n if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {\n return;\n }\n\n const treeWalker = getFocusableTreeWalker(ref.current);\n const focusable = tableFocus.childFocusStrategy === 'last' ? treeWalker.lastChild() : treeWalker.firstChild();\n\n if (focusable) {\n // Cell has focusable children, focus the child\n focusTableChild(focusable as FocusableElement);\n } else if (!ref.current.contains(document.activeElement)) {\n // Cell has no focusable children and current focus is outside of the cell, focus the cell itself\n focusTableChild(ref.current);\n } else if (ref.current === document.activeElement && !isTabbable) {\n // Focus is on the current cell, but table focus is elsewhere, update table focus state\n tableFocus.setFocus(rowKey, columnKey);\n }\n };\n\n // Focus the cell DOM node when table focus moves to this cell\n useLayoutEffect(() => {\n if (isTabbable && !ref.current!.contains(document.activeElement)) {\n focusCell();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ref, isTabbable]);\n\n const resetIfFocused = useRACEffectEvent(() => {\n if (isTabbable) {\n tableFocus.setFocus('', '');\n }\n });\n\n // Reset table focus when the focused cell unmounts\n useEffect(\n () => () => {\n resetIfFocused();\n },\n [resetIfFocused],\n );\n\n const onFocus: FocusEventHandler = (e) => {\n // Ignore focus events bubbling through portals\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n // If cell is already focused, return early.\n // However, if focus happens as a result of a press, we need to re-run the child-focusing logic,\n // otherwise `useFocusRing` will force the cell itself to become focused.\n if (e.currentTarget.contains(e.relatedTarget) && isFocusVisible()) {\n return;\n }\n\n // There are 3 scenarios for why a cell might receive focus:\n // - focus happens through a press, we need to update table focus state to the current cell\n // - focus happens through arrow key navigation within the table,\n // we do nothing as table focus state would have already been updated earlier\n // - focus happens through tabbing into the table from outside,\n // we do nothing because we want to restore focus to the previously focused cell,\n // and overriding table focus state would make that impossible\n if (!isFocusVisible()) {\n tableFocus.setFocus(rowKey, columnKey);\n }\n\n if (e.target === ref.current) {\n // If the cell itself receives focus, wait a frame so that focus finishes propagating\n // up to the tree, and move focus to a focusable child if possible.\n requestAnimationFrame(() => {\n if (document.activeElement === ref.current) {\n focusCell();\n }\n });\n }\n };\n\n // Handles keyboard navigation between focusable children within the cell.\n const onKeyDownCapture: KeyboardEventHandler = (e) => {\n // Ignore keyboard events bubbling through portals\n if (!e.currentTarget.contains(e.target as Element) || !ref.current || !document.activeElement) {\n return;\n }\n\n const walker = getFocusableTreeWalker(ref.current);\n walker.currentNode = document.activeElement;\n\n if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n // Move to the previous/next focusable element within the cell\n const childElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n\n if (childElementToFocus && childElementToFocus !== ref.current) {\n focusTableChild(childElementToFocus as FocusableElement);\n } else {\n // If there is no previous/next focusable element within the current cell, focus should move to the previous/next cell.\n // This is handled by `useTable`, so we need to let the event bubble up to it.\n // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n // Solution: re-dispatch the event from a parent element of the current cell.\n ref.current.parentElement!.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n }\n } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n // Move to the previous/next cell in the current column.\n // This is handled by `useTable`, so we need to let the event bubble up to it.\n // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n // Solution: re-dispatch the event from a parent element of the current cell.\n ref.current.parentElement?.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n } else {\n // if we didn't handle anything, return early so we don't stop propagation and preventDefault\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n };\n\n const customProps: NativeElementProps<HTMLTableCellElement> = {\n tabIndex: isTabbable ? 0 : -1,\n onFocus,\n onKeyDownCapture,\n 'data-cell-row-key': rowKey,\n 'data-cell-column-key': columnKey,\n 'data-focus-visible': isCellFocusVisible || undefined,\n };\n\n return {\n cellProps: mergeProps(focusProps, customProps),\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-table.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"use-table.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAoB,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAK3E,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CAClD;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,QAAQ,CAkK1E"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { getFocusableTreeWalker
|
|
2
|
-
import { getInteractionModality
|
|
3
|
-
import { isCtrlKeyPressed
|
|
1
|
+
import { getFocusableTreeWalker } from '@react-aria/focus';
|
|
2
|
+
import { getInteractionModality } from '@react-aria/interactions';
|
|
3
|
+
import { isCtrlKeyPressed } from '@react-aria/utils';
|
|
4
|
+
import { useFocusable, useKeyboard, mergeProps } from 'react-aria';
|
|
4
5
|
import { useTableFocus } from '../contexts/focus.js';
|
|
5
6
|
import { useTableState } from '../contexts/table-state.js';
|
|
6
7
|
import { focusTableChild } from '../utils/focus-table-child.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-table.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGjE,OAAO,EAA2B,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAMhE,MAAM,UAAU,QAAQ,CAAC,GAAuC;IAC9D,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,GAAG,aAAa,EAAE,CAAC;IAEvE,MAAM,gBAAgB,GAAsB,CAAC,CAAC,EAAE,EAAE;QAChD,IAAI,CAAC,UAAU,CAAC,aAAa,IAAI,CAAC,UAAU,CAAC,gBAAgB,EAAE,CAAC;YAC9D,6CAA6C;YAC7C,uFAAuF;YACvF,MAAM,kBAAkB,GAAG,CAAC,CAAC,aAAwB,CAAC;YACtD,MAAM,YAAY,GAAG,CAAC,CAAC,aAAa,CAAC,gBAAgB,CAAC,2CAA2C,CAAC,CAAC;YACnG,IAAI,kBAAuC,CAAC;YAE5C,IACE,kBAAkB;gBAClB,CAAC,CAAC,aAAa,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC,2BAA2B,EAC9F,CAAC;gBACD,kBAAkB,GAAG,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAC7D,CAAC;iBAAM,CAAC;gBACN,kBAAkB,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;YACvC,CAAC;YAED,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,GAAI,kBAA2C,CAAC,OAAO,CAAC;YAE3F,uFAAuF;YACvF,UAAU,CAAC,QAAQ,CAAC,UAAW,EAAE,aAAc,CAAC,CAAC;QACnD,CAAC;aAAM,CAAC;YACN,MAAM,OAAO,GAAG,CAAC,CAAC,aAAa,CAAC,aAAa,CAC3C,uBAAuB,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,4BAA4B,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAC3G,CAAC;YAE1B,IAAI,OAAO,EAAE,CAAC;gBACZ,qDAAqD;gBACrD,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;oBAC9C,eAAe,CAAC,OAAO,CAAC,CAAC;gBAC3B,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,EAAE,cAAc,EAAE,GAAG,YAAY,CACrC;QACE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,+CAA+C;YAC/C,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC;gBACxC,OAAO;YACT,CAAC;YAED,gBAAgB,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC;KACF,EACD,GAAG,CACJ,CAAC;IAEF,MAAM,EAAE,aAAa,EAAE,GAAG,WAAW,CAAC;QACpC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,kDAAkD;YAClD,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC;gBACxC,OAAO;YACT,CAAC;YAED,MAAM,kBAAkB,GAAG,CAAC,CAAC,aAAa,CAAC,aAAa,CACtD,uBAAuB,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,4BAA4B,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAC3G,CAAC;YAE1B,IAAI,kBAAkB,GAAgB,IAAI,CAAC;YAC3C,IAAI,qBAAqD,CAAC;YAE1D,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;gBACpD,2CAA2C;gBAC3C,MAAM,QAAQ,GAAG,uBAAuB,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,iCAAiC,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC;gBAC1J,MAAM,MAAM,GAAG,sBAAsB,CAAC,CAAC,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACrG,MAAM,CAAC,WAAW,GAAG,kBAAkB,CAAC;gBACxC,kBAAkB,GAAG,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;gBACvF,qBAAqB,GAAG,CAAC,CAAC,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YACnE,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBACxD,8CAA8C;gBAC9C,MAAM,QAAQ,GAAG,uBAAuB,CACtC,CAAC,CAAC,aAAa,EACf,UAAU,CAAC,aAAa,EACxB,UAAU,CAAC,gBAAgB,CAC5B,CAAC;gBACF,MAAM,MAAM,GAAG,sBAAsB,CAAC,CAAC,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACrG,MAAM,CAAC,WAAW,GAAG,kBAAkB,CAAC;gBACxC,kBAAkB,GAAG,CAAC,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;YACvF,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,UAAU,EAAE,CAAC;gBACtD,+BAA+B;gBAC/B,MAAM,QAAQ,GAAG,uBAAuB,CACtC,CAAC,CAAC,aAAa,EACf,UAAU,CAAC,aAAa,EACxB,UAAU,CAAC,gBAAgB,CAC5B,CAAC;gBACF,MAAM,MAAM,GAAG,sBAAsB,CAAC,CAAC,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACrG,MAAM,CAAC,WAAW,GAAG,kBAAkB,CAAC;gBAExC,MAAM,OAAO,GAAG,CAAC,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAErG,yGAAyG;gBACzG,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;oBAC3B,OAAO,EAAE,CAAC;gBACZ,CAAC;gBAED,kBAAkB,GAAG,MAAM,CAAC,WAAW,CAAC;YAC1C,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,MAAM,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;gBAC/C,0EAA0E;gBAC1E,kEAAkE;gBAClE,MAAM,QAAQ,GAAG,2CAA2C,CAAC;gBAC7D,MAAM,MAAM,GAAG,sBAAsB,CAAC,CAAC,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACrG,MAAM,CAAC,WAAW,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,aAAc,CAAC;gBAC/F,kBAAkB,GAAG,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;gBACjF,qBAAqB,GAAG,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;YAC9D,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;gBAC3B,kIAAkI;gBAClI,4GAA4G;gBAC5G,mHAAmH;gBACnH,oHAAoH;gBACpH,MAAM,YAAY,GAAG,CAAC,CAAC,aAAiC,CAAC;gBACzD,MAAM,YAAY,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,sBAAsB,CAAC,CAAC,CAAC,YAAY,CAAC,kBAAkB,CAAC;gBAExG,IAAI,YAAY,EAAE,CAAC;oBACjB,eAAe,CAAC,YAAgC,CAAC,CAAC;gBACpD,CAAC;gBAED,OAAO;YACT,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,gBAAgB,CAAC,CAAC,CAAC,IAAI,gBAAgB,KAAK,UAAU,EAAE,CAAC;gBACnF,kBAAkB;gBAClB,wBAAwB,EAAE,CAAC,IAAI,CAAC,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,wEAAwE;gBACxE,OAAO;YACT,CAAC;YAED,IAAI,kBAAkB,EAAE,CAAC;gBACvB,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,GAAI,kBAA2C,CAAC,OAAO,CAAC;gBAE3F,uFAAuF;gBACvF,UAAU,CAAC,QAAQ,CAAC,UAAW,EAAE,aAAc,EAAE,qBAAqB,CAAC,CAAC;YAC1E,CAAC;YAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,WAAW,GAAyC;QACxD,IAAI,EAAE,MAAM;QACZ,2EAA2E;QAC3E,0CAA0C;QAC1C,QAAQ,EAAE,UAAU,CAAC,aAAa,IAAI,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1E,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE;YACpB,wHAAwH;YACxH,IACE,sBAAsB,EAAE,KAAK,UAAU;gBACvC,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC;gBAC1C,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAClC,CAAC;gBACD,gBAAgB,CAAC,CAAC,CAAC,CAAC;YACtB,CAAC;QACH,CAAC;KACF,CAAC;IAEF,OAAO;QACL,UAAU,EAAE,UAAU,CAAC,cAAc,EAAE,aAAa,EAAE,WAAW,CAAC;KACnE,CAAC;AACJ,CAAC;AAED,6FAA6F;AAC7F,SAAS,uBAAuB,CAAC,YAA8B,EAAE,MAAc,EAAE,SAAiB;IAChG,MAAM,YAAY,GAAG,0BAA0B,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,8BAA8B,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;IAC1H,MAAM,YAAY,GAAG,YAAY,CAAC,aAAa,CAC7C,yBAAyB,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,4BAA4B,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CACjG,CAAC;IAEF,MAAM,eAAe,GAAa,CAAC,YAAY,CAAC,CAAC;IAEjD,IAAI,aAAa,GAAG,YAAY,EAAE,sBAAsB,CAAC;IAEzD,OAAO,aAAa,EAAE,CAAC;QACrB,MAAM,EAAE,aAAa,EAAE,GAAI,aAA6B,CAAC,OAAO,CAAC;QAEjE,IAAI,aAAa,EAAE,CAAC;YAClB,eAAe,CAAC,IAAI,CAClB,0BAA0B,GAAG,CAAC,MAAM,CAAC,aAAa,CAAC,uCAAuC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAClH,CAAC;QACJ,CAAC;QAED,aAAa,GAAG,aAAa,CAAC,sBAAsB,CAAC;IACvD,CAAC;IAED,OAAO,OAAO,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;AAC9C,CAAC","sourcesContent":["import { getFocusableTreeWalker, useFocusable } from '@react-aria/focus';\nimport { getInteractionModality, useKeyboard } from '@react-aria/interactions';\nimport { isCtrlKeyPressed, mergeProps } from '@react-aria/utils';\nimport type { FocusEventHandler, RefObject } from 'react';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { type ChildFocusStrategy, useTableFocus } from '../contexts/focus.js';\nimport { useTableState } from '../contexts/table-state.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTable {\n tableProps: NativeElementProps<HTMLTableElement>;\n}\n\nexport function useTable(ref: RefObject<HTMLTableElement | null>): UseTable {\n const tableFocus = useTableFocus();\n const { rowSelectionMode, onAllRowsSelectionToggle } = useTableState();\n\n const restoreCellFocus: FocusEventHandler = (e) => {\n if (!tableFocus.focusedRowKey || !tableFocus.focusedColumnKey) {\n // User hasn't interacted with the table yet.\n // Focus the first or last cell, depending on which direction the user is tabbing from.\n const lastFocusedElement = e.relatedTarget as Element;\n const cellElements = e.currentTarget.querySelectorAll('[data-cell-row-key][data-cell-column-key]');\n let cellElementToFocus: Element | undefined;\n\n if (\n lastFocusedElement &&\n e.currentTarget.compareDocumentPosition(lastFocusedElement) & Node.DOCUMENT_POSITION_FOLLOWING\n ) {\n cellElementToFocus = cellElements[cellElements.length - 1];\n } else {\n cellElementToFocus = cellElements[0];\n }\n\n const { cellRowKey, cellColumnKey } = (cellElementToFocus as HTMLTableCellElement).dataset;\n\n // We know the keys are defined, because we queried the DOM for elements that have them\n tableFocus.setFocus(cellRowKey!, cellColumnKey!);\n } else {\n const element = e.currentTarget.querySelector(\n `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'][data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']`,\n ) as HTMLTableCellElement;\n\n if (element) {\n // If focus is already within the cell, don't refocus\n if (!element.contains(document.activeElement)) {\n focusTableChild(element);\n }\n }\n }\n };\n\n const { focusableProps } = useFocusable(\n {\n onFocus: (e) => {\n // Ignore focus events bubbling through portals\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n restoreCellFocus(e);\n },\n },\n ref,\n );\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: (e) => {\n // Ignore keyboard events bubbling through portals\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n const focusedCellElement = e.currentTarget.querySelector(\n `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'][data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']`,\n ) as HTMLTableCellElement;\n\n let cellElementToFocus: Node | null = null;\n let newChildFocusStrategy: ChildFocusStrategy | undefined;\n\n if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n // Focus previous/next cell in the same row\n const selector = `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}']:not([data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}'])`;\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = focusedCellElement;\n cellElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n newChildFocusStrategy = e.key === 'ArrowLeft' ? 'last' : 'first';\n } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n // Focus previous/next cell in the same column\n const selector = constructColumnSelector(\n e.currentTarget,\n tableFocus.focusedRowKey,\n tableFocus.focusedColumnKey,\n );\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = focusedCellElement;\n cellElementToFocus = e.key === 'ArrowUp' ? walker.previousNode() : walker.nextNode();\n } else if (e.key === 'PageUp' || e.key === 'PageDown') {\n // Move focus up/down by 5 rows\n const selector = constructColumnSelector(\n e.currentTarget,\n tableFocus.focusedRowKey,\n tableFocus.focusedColumnKey,\n );\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = focusedCellElement;\n\n const advance = e.key === 'PageUp' ? walker.previousNode.bind(walker) : walker.nextNode.bind(walker);\n\n // `advance()` will do nothing if there's no appropriate node found, so it's safe to just call it 5 times\n for (let i = 0; i < 5; i++) {\n advance();\n }\n\n cellElementToFocus = walker.currentNode;\n } else if (e.key === 'Home' || e.key === 'End') {\n // If Ctrl/Cmd is pressed, move focus to the first/last cell of the table;\n // otherwise, move focus to the first/last cell of the current row\n const selector = '[data-cell-row-key][data-cell-column-key]';\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = isCtrlKeyPressed(e) ? e.currentTarget : focusedCellElement.parentElement!;\n cellElementToFocus = e.key === 'Home' ? walker.firstChild() : walker.lastChild();\n newChildFocusStrategy = e.key === 'Home' ? 'first' : 'last';\n } else if (e.key === 'Tab') {\n // Table is supposed to be a single Tab stop, but cells may contain elements that are tabbable (checkboxes, buttons, menus, etc.).\n // We don't control the rendering of these elements, so we can't override their tabIndex to prevent tabbing.\n // Instead, we detect when Tab key is pressed, and move focus manually to the guard element before/after the table,\n // so that the browser default behavior will apply starting from that element rather than the currently focused one.\n const tableElement = e.currentTarget as HTMLTableElement;\n const guardElement = e.shiftKey ? tableElement.previousElementSibling : tableElement.nextElementSibling;\n\n if (guardElement) {\n focusTableChild(guardElement as FocusableElement);\n }\n\n return;\n } else if (e.key === 'a' && isCtrlKeyPressed(e) && rowSelectionMode === 'multiple') {\n // Select all rows\n onAllRowsSelectionToggle?.(true);\n } else {\n // if we didn't handle anything, return early so we don't preventDefault\n return;\n }\n\n if (cellElementToFocus) {\n const { cellRowKey, cellColumnKey } = (cellElementToFocus as HTMLTableCellElement).dataset;\n\n // We know the keys are defined, because we queried the DOM for elements that have them\n tableFocus.setFocus(cellRowKey!, cellColumnKey!, newChildFocusStrategy);\n }\n\n e.preventDefault();\n },\n });\n\n const customProps: NativeElementProps<HTMLTableElement> = {\n role: 'grid',\n // If no cell is tabbable within the table, make the table itself tabbable,\n // otherwise the Tab key will just skip it\n tabIndex: tableFocus.focusedRowKey && tableFocus.focusedColumnKey ? -1 : 0,\n onFocusCapture: (e) => {\n // If we're navigating into the table with a keyboard, focus the last focused cell instead of the first tabbable element\n if (\n getInteractionModality() === 'keyboard' &&\n !e.currentTarget.contains(e.relatedTarget) &&\n e.currentTarget.contains(e.target)\n ) {\n restoreCellFocus(e);\n }\n },\n };\n\n return {\n tableProps: mergeProps(focusableProps, keyboardProps, customProps),\n };\n}\n\n/** Constructs a DOM selector for cells in the same column, taking `colspan` into account. */\nfunction constructColumnSelector(tableElement: HTMLTableElement, rowKey: string, columnKey: string): string {\n const baseSelector = `[data-cell-column-key='${CSS.escape(columnKey)}']:not([data-cell-row-key='${CSS.escape(rowKey)}'])`;\n const columnHeader = tableElement.querySelector(\n `th[data-cell-row-key='${CSS.escape(rowKey)}'][data-cell-column-key='${CSS.escape(columnKey)}']`,\n );\n\n const columnSelectors: string[] = [baseSelector];\n\n let currentColumn = columnHeader?.previousElementSibling;\n\n while (currentColumn) {\n const { cellColumnKey } = (currentColumn as HTMLElement).dataset;\n\n if (cellColumnKey) {\n columnSelectors.push(\n `[data-cell-column-key='${CSS.escape(cellColumnKey)}'][colspan]:not([data-cell-row-key='${CSS.escape(rowKey)}'])`,\n );\n }\n\n currentColumn = currentColumn.previousElementSibling;\n }\n\n return `:is(${columnSelectors.join(', ')})`;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"use-table.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { getFocusableTreeWalker } from '@react-aria/focus';\nimport { getInteractionModality } from '@react-aria/interactions';\nimport { isCtrlKeyPressed } from '@react-aria/utils';\nimport type { FocusEventHandler, RefObject } from 'react';\nimport { useFocusable, useKeyboard, mergeProps } from 'react-aria';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { type ChildFocusStrategy, useTableFocus } from '../contexts/focus.js';\nimport { useTableState } from '../contexts/table-state.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTable {\n tableProps: NativeElementProps<HTMLTableElement>;\n}\n\nexport function useTable(ref: RefObject<HTMLTableElement | null>): UseTable {\n const tableFocus = useTableFocus();\n const { rowSelectionMode, onAllRowsSelectionToggle } = useTableState();\n\n const restoreCellFocus: FocusEventHandler = (e) => {\n if (!tableFocus.focusedRowKey || !tableFocus.focusedColumnKey) {\n // User hasn't interacted with the table yet.\n // Focus the first or last cell, depending on which direction the user is tabbing from.\n const lastFocusedElement = e.relatedTarget as Element;\n const cellElements = e.currentTarget.querySelectorAll('[data-cell-row-key][data-cell-column-key]');\n let cellElementToFocus: Element | undefined;\n\n if (\n lastFocusedElement &&\n e.currentTarget.compareDocumentPosition(lastFocusedElement) & Node.DOCUMENT_POSITION_FOLLOWING\n ) {\n cellElementToFocus = cellElements[cellElements.length - 1];\n } else {\n cellElementToFocus = cellElements[0];\n }\n\n const { cellRowKey, cellColumnKey } = (cellElementToFocus as HTMLTableCellElement).dataset;\n\n // We know the keys are defined, because we queried the DOM for elements that have them\n tableFocus.setFocus(cellRowKey!, cellColumnKey!);\n } else {\n const element = e.currentTarget.querySelector(\n `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'][data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']`,\n ) as HTMLTableCellElement;\n\n if (element) {\n // If focus is already within the cell, don't refocus\n if (!element.contains(document.activeElement)) {\n focusTableChild(element);\n }\n }\n }\n };\n\n const { focusableProps } = useFocusable(\n {\n onFocus: (e) => {\n // Ignore focus events bubbling through portals\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n restoreCellFocus(e);\n },\n },\n ref,\n );\n\n const { keyboardProps } = useKeyboard({\n onKeyDown: (e) => {\n // Ignore keyboard events bubbling through portals\n if (!e.currentTarget.contains(e.target)) {\n return;\n }\n\n const focusedCellElement = e.currentTarget.querySelector(\n `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'][data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']`,\n ) as HTMLTableCellElement;\n\n let cellElementToFocus: Node | null = null;\n let newChildFocusStrategy: ChildFocusStrategy | undefined;\n\n if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n // Focus previous/next cell in the same row\n const selector = `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}']:not([data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}'])`;\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = focusedCellElement;\n cellElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n newChildFocusStrategy = e.key === 'ArrowLeft' ? 'last' : 'first';\n } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n // Focus previous/next cell in the same column\n const selector = constructColumnSelector(\n e.currentTarget,\n tableFocus.focusedRowKey,\n tableFocus.focusedColumnKey,\n );\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = focusedCellElement;\n cellElementToFocus = e.key === 'ArrowUp' ? walker.previousNode() : walker.nextNode();\n } else if (e.key === 'PageUp' || e.key === 'PageDown') {\n // Move focus up/down by 5 rows\n const selector = constructColumnSelector(\n e.currentTarget,\n tableFocus.focusedRowKey,\n tableFocus.focusedColumnKey,\n );\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = focusedCellElement;\n\n const advance = e.key === 'PageUp' ? walker.previousNode.bind(walker) : walker.nextNode.bind(walker);\n\n // `advance()` will do nothing if there's no appropriate node found, so it's safe to just call it 5 times\n for (let i = 0; i < 5; i++) {\n advance();\n }\n\n cellElementToFocus = walker.currentNode;\n } else if (e.key === 'Home' || e.key === 'End') {\n // If Ctrl/Cmd is pressed, move focus to the first/last cell of the table;\n // otherwise, move focus to the first/last cell of the current row\n const selector = '[data-cell-row-key][data-cell-column-key]';\n const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n walker.currentNode = isCtrlKeyPressed(e) ? e.currentTarget : focusedCellElement.parentElement!;\n cellElementToFocus = e.key === 'Home' ? walker.firstChild() : walker.lastChild();\n newChildFocusStrategy = e.key === 'Home' ? 'first' : 'last';\n } else if (e.key === 'Tab') {\n // Table is supposed to be a single Tab stop, but cells may contain elements that are tabbable (checkboxes, buttons, menus, etc.).\n // We don't control the rendering of these elements, so we can't override their tabIndex to prevent tabbing.\n // Instead, we detect when Tab key is pressed, and move focus manually to the guard element before/after the table,\n // so that the browser default behavior will apply starting from that element rather than the currently focused one.\n const tableElement = e.currentTarget as HTMLTableElement;\n const guardElement = e.shiftKey ? tableElement.previousElementSibling : tableElement.nextElementSibling;\n\n if (guardElement) {\n focusTableChild(guardElement as FocusableElement);\n }\n\n return;\n } else if (e.key === 'a' && isCtrlKeyPressed(e) && rowSelectionMode === 'multiple') {\n // Select all rows\n onAllRowsSelectionToggle?.(true);\n } else {\n // if we didn't handle anything, return early so we don't preventDefault\n return;\n }\n\n if (cellElementToFocus) {\n const { cellRowKey, cellColumnKey } = (cellElementToFocus as HTMLTableCellElement).dataset;\n\n // We know the keys are defined, because we queried the DOM for elements that have them\n tableFocus.setFocus(cellRowKey!, cellColumnKey!, newChildFocusStrategy);\n }\n\n e.preventDefault();\n },\n });\n\n const customProps: NativeElementProps<HTMLTableElement> = {\n role: 'grid',\n // If no cell is tabbable within the table, make the table itself tabbable,\n // otherwise the Tab key will just skip it\n tabIndex: tableFocus.focusedRowKey && tableFocus.focusedColumnKey ? -1 : 0,\n onFocusCapture: (e) => {\n // If we're navigating into the table with a keyboard, focus the last focused cell instead of the first tabbable element\n if (\n getInteractionModality() === 'keyboard' &&\n !e.currentTarget.contains(e.relatedTarget) &&\n e.currentTarget.contains(e.target)\n ) {\n restoreCellFocus(e);\n }\n },\n };\n\n return {\n tableProps: mergeProps(focusableProps, keyboardProps, customProps),\n };\n}\n\n/** Constructs a DOM selector for cells in the same column, taking `colspan` into account. */\nfunction constructColumnSelector(tableElement: HTMLTableElement, rowKey: string, columnKey: string): string {\n const baseSelector = `[data-cell-column-key='${CSS.escape(columnKey)}']:not([data-cell-row-key='${CSS.escape(rowKey)}'])`;\n const columnHeader = tableElement.querySelector(\n `th[data-cell-row-key='${CSS.escape(rowKey)}'][data-cell-column-key='${CSS.escape(columnKey)}']`,\n );\n\n const columnSelectors: string[] = [baseSelector];\n\n let currentColumn = columnHeader?.previousElementSibling;\n\n while (currentColumn) {\n const { cellColumnKey } = (currentColumn as HTMLElement).dataset;\n\n if (cellColumnKey) {\n columnSelectors.push(\n `[data-cell-column-key='${CSS.escape(cellColumnKey)}'][colspan]:not([data-cell-row-key='${CSS.escape(rowKey)}'])`,\n );\n }\n\n currentColumn = currentColumn.previousElementSibling;\n }\n\n return `:is(${columnSelectors.join(', ')})`;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-body-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-cell.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"table-body-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-cell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK/C,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAyBD;;;;GAIG;AACH,QAAA,MAAM,cAAc,yHAA6C,CAAC;AAElE,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { mergeProps, useObjectRef } from '
|
|
3
|
+
import { mergeProps, useObjectRef } from 'react-aria';
|
|
4
4
|
import { forwardRef } from '../../forward-ref.js';
|
|
5
5
|
import { useColumnData } from './contexts/column-collection.js';
|
|
6
6
|
import { useTableRowState } from './contexts/row-state.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-body-cell.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-cell.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;
|
|
1
|
+
{"version":3,"file":"table-body-cell.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-cell.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAYzD,SAAS,aAAa,CACpB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAsB,EACrF,GAAuC;IAEvC,MAAM,OAAO,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAC/D,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE5C,OAAO,CACL,gBACM,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,EAChC,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,UAAU,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,YAAY,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,YAAY,mBACrF,UAAU,EAAE,MAAM,oBACjB,UAAU,EAAE,gBAAgB,YAE3C,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;AAElE,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,CAAC","sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { mergeProps, useObjectRef } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { useColumnData } from './contexts/column-collection.js';\nimport { useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface TableBodyCellProps extends CommonProps {\n /** The contents of the cell. */\n children: ReactNode;\n /**\n * A unique identifier for the column that this cell belongs to.\n * Cells that belong to the same column must have the same `columnKey`.\n */\n columnKey: string;\n}\n\nfunction TableBodyCell(\n { children, UNSAFE_className, UNSAFE_style, columnKey, ...props }: TableBodyCellProps,\n ref: ForwardedRef<HTMLTableCellElement>,\n) {\n const cellRef = useObjectRef(ref);\n const { rowKey } = useTableRowState();\n const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n const columnData = useColumnData(columnKey);\n\n return (\n <td\n {...mergeProps(props, cellProps)}\n ref={cellRef}\n className={UNSAFE_className}\n style={columnData?.width !== undefined ? { ...UNSAFE_style, width: columnData.width } : UNSAFE_style}\n aria-colindex={columnData?.number}\n data-alignment={columnData?.contentAlignment}\n >\n {children}\n </td>\n );\n}\n\n/**\n * Renders a cell within a table body row.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBodyCell = forwardRef(TableBodyCell, 'TableBodyCell');\n\nexport { _TableBodyCell as TableBodyCell };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-body-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"table-body-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK/C,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAoBD;;;;GAIG;AACH,QAAA,MAAM,aAAa,uHAA2C,CAAC;AA6B/D,OAAO,EAAE,aAAa,IAAI,YAAY,EAAE,CAAC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { mergeProps, useId } from '
|
|
4
|
-
import { useHover } from 'react-aria';
|
|
3
|
+
import { mergeProps, useHover, useId } from 'react-aria';
|
|
5
4
|
import { forwardRef } from '../../forward-ref.js';
|
|
6
5
|
import { useTableLoading } from './contexts/loading.js';
|
|
7
6
|
import { TableRowStateProvider } from './contexts/row-state.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-body-row.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"table-body-row.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAiCjE,SAAS,YAAY,CACnB,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,KAAK,EAAqB,EAC9D,GAAsC;IAEtC,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,iBAAiB,YACjG,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,GAChC,CACzB,CAAC;AACJ,CAAC;AAOD;;;;GAIG;AACH,MAAM,aAAa,GAAG,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAE/D,SAAS,iBAAiB,CAAC,EACzB,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACxE,YAAY,GACW;IACvB,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;IAEpC,OAAO,CACL,gBACM,UAAU,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,EAGrC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACvC,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,mBACJ,SAAS,mBACT,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,kBAChE,SAAS,IAAI,SAAS,mBACrB,UAAU,IAAI,SAAS,YAErC,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,aAAa,IAAI,YAAY,EAAE,CAAC","sourcesContent":["'use client';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { mergeProps, useHover, useId } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { useTableLoading } from './contexts/loading.js';\nimport { TableRowStateProvider } from './contexts/row-state.js';\nimport { useSelectableRow } from './hooks/use-selectable-row.js';\n\nexport interface TableBodyRowProps extends CommonProps {\n /** The cells that belong to this row. */\n children: ReactNode;\n /**\n * The row's position within the full dataset, including headers.\n *\n * Provide this value if your table presents a subset of rows, such as when using pagination.\n *\n * This number must be:\n * - greater than or equal to `1`\n * - greater than the `rowNumber` of any previous rows\n * - less than or equal to the `totalRowCount` of the parent `Table`\n *\n * Use together with `totalRowCount` on the `Table` component.\n */\n rowNumber?: number;\n /**\n * Whether the row is selected.\n *\n * This value will be ignored if `rowSelectionMode` on the `Table` component is set to `'none'`.\n */\n isSelected?: boolean;\n /**\n * A function called when the row's selection state should change.\n *\n * If called without an argument, you are free to pick the new selection state based on your own logic.\n * If called with an argument, you must set the selection state to the provided value.\n */\n onSelectionToggle?: (value?: boolean) => void;\n}\n\nfunction TableBodyRow(\n { isSelected, onSelectionToggle, ...props }: TableBodyRowProps,\n ref: ForwardedRef<HTMLTableRowElement>,\n) {\n const rowKey = useId();\n\n return (\n <TableRowStateProvider rowKey={rowKey} isSelected={isSelected} onSelectionToggle={onSelectionToggle}>\n <TableBodyRowInner props={props} forwardedRef={ref} />\n </TableRowStateProvider>\n );\n}\n\ninterface TableBodyRowInnerProps {\n props: Omit<TableBodyRowProps, 'isSelected' | 'onSelectionToggle'>;\n forwardedRef: ForwardedRef<HTMLTableRowElement>;\n}\n\n/**\n * Renders a row within a table body.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBodyRow = forwardRef(TableBodyRow, 'TableBodyRow');\n\nfunction TableBodyRowInner({\n props: { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props },\n forwardedRef,\n}: TableBodyRowInnerProps) {\n const { rowProps, isSelected, rowSelectionMode } = useSelectableRow();\n const { hoverProps, isHovered } = useHover({});\n const isLoading = useTableLoading();\n\n return (\n <tr\n {...mergeProps(rowProps, hoverProps, props)}\n // Workaround for React not having type definitions for the `inert` attribute\n // eslint-disable-next-line internal/no-extra-props-in-spread\n {...{ inert: isLoading ? '' : undefined }}\n ref={forwardedRef}\n className={UNSAFE_className}\n style={UNSAFE_style}\n aria-rowindex={rowNumber}\n aria-selected={rowSelectionMode !== 'none' ? (isSelected ?? false) : undefined}\n data-hovered={isHovered || undefined}\n data-selected={isSelected || undefined}\n >\n {children}\n </tr>\n );\n}\n\nexport { _TableBodyRow as TableBodyRow };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-empty-state.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-empty-state.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"table-empty-state.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-empty-state.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM/C,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,WAAW,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAYD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,2HAAiD,CAAC;AA6CxE,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { mergeProps, useId, useObjectRef } from '@react-aria/utils';
|
|
4
3
|
import clsx from 'clsx';
|
|
4
|
+
import { mergeProps, useId, useObjectRef } from 'react-aria';
|
|
5
5
|
import { forwardRef } from '../../forward-ref.js';
|
|
6
6
|
import { Text } from '../typography/text.js';
|
|
7
7
|
import { useColumnData, useFullWidthCell } from './contexts/column-collection.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-empty-state.js","sourceRoot":"","sources":["../../../../src/components/table/table-empty-state.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"table-empty-state.js","sourceRoot":"","sources":["../../../../src/components/table/table-empty-state.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAWzD,SAAS,eAAe,CAAC,KAA2B,EAAE,GAAuC;IAC3F,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,YACnC,KAAC,oBAAoB,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,GACnC,CACzB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,UAAU,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC;AAOxE,SAAS,oBAAoB,CAAC,EAC5B,KAAK,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAC/E,YAAY,GACc;IAC1B,MAAM,OAAO,GAAG,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,kDAAkD;IAClD,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAC/D,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE5C,OAAO,CACL,uBACE,gBACM,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,EAChC,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,EAC1D,KAAK,EAAE,YAAY,mBACJ,UAAU,EAAE,MAAM,EACjC,OAAO,EAAE,OAAO,oBACD,QAAQ,YAEvB,eAAK,SAAS,EAAC,+BAA+B,aAC5C,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YAC1C,KAAK,GACD,EAEP,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,YACzC,WAAW,GACP,EAEN,MAAM,IAAI,cAAK,SAAS,EAAC,8BAA8B,YAAE,MAAM,GAAO,IACnE,GACH,IArBC,gCAAgC,CAsBnC,CACN,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { mergeProps, useId, useObjectRef } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { useColumnData, useFullWidthCell } from './contexts/column-collection.js';\nimport { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface TableEmptyStateProps extends CommonProps {\n /** The title of the empty state. */\n title: string;\n /** The description of the empty state. */\n description: string;\n /** An optional action button displayed within the empty state. */\n action?: ReactNode;\n}\n\nfunction TableEmptyState(props: TableEmptyStateProps, ref: ForwardedRef<HTMLTableCellElement>) {\n const rowKey = useId();\n\n return (\n <TableRowStateProvider rowKey={rowKey}>\n <TableEmptyStateInner props={props} forwardedRef={ref} />\n </TableRowStateProvider>\n );\n}\n\n/**\n * Renders an empty state within a table that has no data.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableEmptyState = forwardRef(TableEmptyState, 'TableEmptyState');\n\ninterface TableEmptyStateInnerProps {\n props: TableEmptyStateProps;\n forwardedRef: ForwardedRef<HTMLTableCellElement>;\n}\n\nfunction TableEmptyStateInner({\n props: { UNSAFE_className, UNSAFE_style, title, description, action, ...props },\n forwardedRef,\n}: TableEmptyStateInnerProps) {\n const cellRef = useObjectRef(forwardedRef);\n const { columnKey, colSpan } = useFullWidthCell(cellRef);\n const { rowKey } = useTableRowState();\n // `useTableCell` requires `TableRowStateProvider`\n const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n const columnData = useColumnData(columnKey);\n\n return (\n <tr key=\"__cim__internal__empty-state__\">\n <td\n {...mergeProps(props, cellProps)}\n ref={cellRef}\n className={clsx('cim-table-empty-state', UNSAFE_className)}\n style={UNSAFE_style}\n aria-colindex={columnData?.number}\n colSpan={colSpan}\n data-alignment=\"center\"\n >\n <div className=\"cim-table-empty-state-content\">\n <Text as=\"span\" variant=\"title-6\" tone=\"base\">\n {title}\n </Text>\n\n <Text as=\"span\" variant=\"medium\" tone=\"base\">\n {description}\n </Text>\n\n {action && <div className=\"cim-table-empty-state-action\">{action}</div>}\n </div>\n </td>\n </tr>\n );\n}\n\nexport { _TableEmptyState as TableEmptyState };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-header-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"table-header-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,KAAK,sBAAsB,EAAyB,MAAM,iCAAiC,CAAC;AAMrG,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;;OAGG;IACH,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD;;OAEG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gDAAgD;IAChD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAgFD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,2HAAiD,CAAC;AAExE,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { mergeProps, useId, useObjectRef } from '@react-aria/utils';
|
|
4
3
|
import { useRef } from 'react';
|
|
4
|
+
import { mergeProps, useId, useObjectRef } from 'react-aria';
|
|
5
5
|
import { forwardRef } from '../../forward-ref.js';
|
|
6
6
|
import { IconSortAscending, IconSortDescending, IconSortUnsorted } from '../../icons/index.js';
|
|
7
7
|
import { useServerLayoutEffect } from '../../utils/use-server-layout-effect.js';
|