@economic/taco 9.0.0-EC-112200-test-release.0 → 9.0.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/components/Pagination/Pagination.cjs +7 -10
- package/dist/components/Pagination/Pagination.cjs.map +1 -1
- package/dist/components/Pagination/Pagination.js +7 -10
- package/dist/components/Pagination/Pagination.js.map +1 -1
- package/dist/components/Tabs/components/TabList.cjs +1 -1
- package/dist/components/Tabs/components/TabList.cjs.map +1 -1
- package/dist/components/Tabs/components/TabList.js +1 -1
- package/dist/components/Tabs/components/TabList.js.map +1 -1
- package/dist/components/Tabs/components/Trigger.cjs +3 -3
- package/dist/components/Tabs/components/Trigger.cjs.map +1 -1
- package/dist/components/Tabs/components/Trigger.js +3 -3
- package/dist/components/Tabs/components/Trigger.js.map +1 -1
- package/package.json +3 -4
|
@@ -4,7 +4,7 @@ const React = require("react");
|
|
|
4
4
|
const cn = require("clsx");
|
|
5
5
|
const PageNumbers = require("./PageNumbers.cjs");
|
|
6
6
|
const Localization = require("../Provider/Localization.cjs");
|
|
7
|
-
const
|
|
7
|
+
const Select2 = require("../Select2/Select2.cjs");
|
|
8
8
|
const Group = require("../Group/Group.cjs");
|
|
9
9
|
const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
|
|
10
10
|
const usePaginationShortcuts = require("./usePaginationShortcuts.cjs");
|
|
@@ -57,21 +57,18 @@ const Pagination = React__namespace.forwardRef(function Pagination2(props, ref)
|
|
|
57
57
|
const canPreviousPage = pageIndex > 0;
|
|
58
58
|
const canNextPage = pageIndex < pageCount - 1;
|
|
59
59
|
const className = cn("inline-flex relative justify-between items-center", props.className);
|
|
60
|
-
return /* @__PURE__ */ React__namespace.createElement("div", { ...otherProps, className, "data-taco": "pagination", ref }, showPageSize && /* @__PURE__ */ React__namespace.createElement("span", { className: "mr-4" }, getShowingLabel(length, pageIndex, pageSize, texts), /* @__PURE__ */ React__namespace.createElement(
|
|
61
|
-
|
|
60
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { ...otherProps, className, "data-taco": "pagination", ref }, showPageSize && /* @__PURE__ */ React__namespace.createElement("span", { className: "mr-4 inline-flex items-center" }, getShowingLabel(length, pageIndex, pageSize, texts), /* @__PURE__ */ React__namespace.createElement(
|
|
61
|
+
Select2.Select2,
|
|
62
62
|
{
|
|
63
63
|
"aria-label": texts.pagination.pageSize,
|
|
64
64
|
className: "ml-4 !w-20",
|
|
65
|
-
|
|
66
|
-
text: String(pageSize2),
|
|
67
|
-
value: pageSize2
|
|
68
|
-
})),
|
|
69
|
-
onChange: (event) => {
|
|
65
|
+
onChange: (value) => {
|
|
70
66
|
setPageIndex(0);
|
|
71
|
-
setPageSize(Number(
|
|
67
|
+
setPageSize(Number(value));
|
|
72
68
|
},
|
|
73
69
|
value: pageSize
|
|
74
|
-
}
|
|
70
|
+
},
|
|
71
|
+
pageSizes.map((size) => /* @__PURE__ */ React__namespace.createElement(Select2.Select2.Option, { key: size, value: size }, String(size)))
|
|
75
72
|
)), showPageControls && /* @__PURE__ */ React__namespace.createElement(Group.Group, { as: "nav", "aria-label": texts.pagination.label }, /* @__PURE__ */ React__namespace.createElement(
|
|
76
73
|
IconButton.LegacyIconButton,
|
|
77
74
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.cjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { PageNumbers } from './PageNumbers';\nimport { LocalizationTexts, useLocalization } from '../Provider/Localization';\nimport { Select } from '../Select/Select';\nimport { Group } from '../Group/Group';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { usePaginationValues } from './usePagination';\nimport { usePaginationShortcuts } from './usePaginationShortcuts';\n\nexport * from './usePagination';\n\nexport type PaginationTextsActions = {\n /**\n * Aria-label for first page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n firstPage: string;\n /**\n * Aria-label for first page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n firstPageWithShortcut: string;\n /**\n * Aria-label for next page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n nextPage: string;\n /**\n * Aria-label for next page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n nextPageWithShortcut: string;\n /**\n * Aria-label for previous page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n previousPage: string;\n /**\n * Aria-label for previous page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n previousPageWithShortcut: string;\n /**\n * Aria-label for last page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n lastPage: string;\n /**\n * Aria-label for last page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n lastPageWithShortcut: string;\n /**\n * Aria-label for page X action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n pageX: string;\n};\n\nexport type PaginationTexts = {\n /**\n * Aria-label provided for page numbers and page actions group.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n label: string;\n /**\n * Aria-label provided for page size selection.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n pageSize: string;\n /**\n * Text that indicates the number of the first and last element displayed on the current page, out of total items\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n showingXofYofTotal: string;\n /**\n * Aria-labels provided for page action buttons.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n actions: PaginationTextsActions;\n};\n\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> &\n usePaginationValues & {\n /** Indicate total number of items that will be paginated */\n length: number;\n /** Page size options */\n pageSizes?: number[];\n /** Shows page controls */\n showPageControls?: boolean;\n /** Shows page numbers between navigation buttons, which allows users to quickly navigate to a specific page */\n showPageNumbers?: boolean;\n /** Shows a dropdown with page sizes, which allows user to change the number of items displayed on the page */\n showPageSize?: boolean;\n /** Enable pagination shortcuts */\n dangerouslyHijackGlobalKeyboardNavigation?: boolean;\n };\n\nconst getShowingLabel = (length: number, pageIndex: number, pageSize: number, texts: LocalizationTexts): string => {\n const minItemIndex = pageIndex * pageSize + 1;\n const maxItemIndex = (pageIndex + 1) * pageSize;\n\n return texts.pagination.showingXofYofTotal\n .replace('[X]', length === 0 ? '0' : String(minItemIndex))\n .replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex))\n .replace('[total]', String(length));\n};\n\nexport const Pagination = React.forwardRef(function Pagination(props: PaginationProps, ref: React.Ref<HTMLDivElement>) {\n const {\n length,\n pageIndex,\n pageSize,\n pageSizes = [10, 25, 50, 100, 500],\n setPageIndex,\n setPageSize,\n showPageControls = true,\n showPageNumbers = true,\n showPageSize = true,\n dangerouslyHijackGlobalKeyboardNavigation = false,\n ...otherProps\n } = props;\n const { texts } = useLocalization();\n\n const maxPageIndex = Math.ceil(length / pageSize) - 1;\n const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;\n\n usePaginationShortcuts({\n setPageIndex,\n maxPageIndex,\n pageIndex,\n dangerouslyHijackGlobalKeyboardNavigation,\n });\n\n const pageCount = Math.ceil(length / pageSize);\n const canPreviousPage = pageIndex > 0;\n const canNextPage = pageIndex < pageCount - 1;\n\n const className = cn('inline-flex relative justify-between items-center', props.className);\n\n return (\n <div {...otherProps} className={className} data-taco=\"pagination\" ref={ref}>\n {showPageSize && (\n <span className=\"mr-4\">\n {getShowingLabel(length, pageIndex, pageSize, texts)}\n <Select\n aria-label={texts.pagination.pageSize}\n className=\"ml-4 !w-20\"\n data={pageSizes.map(pageSize => ({\n text: String(pageSize),\n value: pageSize,\n }))}\n onChange={event => {\n setPageIndex(0);\n setPageSize(Number(event.target.value));\n }}\n value={pageSize}\n />\n </span>\n )}\n {showPageControls && (\n <Group as=\"nav\" aria-label={texts.pagination.label}>\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canPreviousPage}\n icon=\"arrow-start\"\n onClick={() => setPageIndex(0)}\n aria-label={\n showShortcutTexts\n ? texts.pagination.actions.firstPageWithShortcut\n : texts.pagination.actions.firstPage\n }\n tooltip={\n showShortcutTexts\n ? texts.pagination.actions.firstPageWithShortcut\n : texts.pagination.actions.firstPage\n }\n />\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canPreviousPage}\n icon=\"arrow-left\"\n onClick={() => setPageIndex(pageIndex - 1)}\n aria-label={\n showShortcutTexts\n ? texts.pagination.actions.previousPageWithShortcut\n : texts.pagination.actions.previousPage\n }\n tooltip={\n showShortcutTexts\n ? texts.pagination.actions.previousPageWithShortcut\n : texts.pagination.actions.previousPage\n }\n />\n {showPageNumbers && pageCount > 0 && (\n <PageNumbers pageCount={pageCount} currentPageIndex={pageIndex} onClick={setPageIndex} />\n )}\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canNextPage}\n icon=\"arrow-right\"\n onClick={() => setPageIndex(pageIndex + 1)}\n aria-label={\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n }\n tooltip={\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n }\n />\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canNextPage}\n icon=\"arrow-end\"\n onClick={() => setPageIndex(pageCount - 1)}\n aria-label={\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n }\n tooltip={\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n }\n />\n </Group>\n )}\n </div>\n );\n});\n"],"names":["React","Pagination","useLocalization","usePaginationShortcuts","Select","pageSize","Group","LegacyIconButton","PageNumbers"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Pagination.cjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { PageNumbers } from './PageNumbers';\nimport { LocalizationTexts, useLocalization } from '../Provider/Localization';\nimport { Select2 } from '../Select2/Select2';\nimport { Group } from '../Group/Group';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { usePaginationValues } from './usePagination';\nimport { usePaginationShortcuts } from './usePaginationShortcuts';\n\nexport * from './usePagination';\n\nexport type PaginationTextsActions = {\n /**\n * Aria-label for first page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n firstPage: string;\n /**\n * Aria-label for first page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n firstPageWithShortcut: string;\n /**\n * Aria-label for next page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n nextPage: string;\n /**\n * Aria-label for next page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n nextPageWithShortcut: string;\n /**\n * Aria-label for previous page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n previousPage: string;\n /**\n * Aria-label for previous page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n previousPageWithShortcut: string;\n /**\n * Aria-label for last page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n lastPage: string;\n /**\n * Aria-label for last page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n lastPageWithShortcut: string;\n /**\n * Aria-label for page X action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n pageX: string;\n};\n\nexport type PaginationTexts = {\n /**\n * Aria-label provided for page numbers and page actions group.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n label: string;\n /**\n * Aria-label provided for page size selection.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n pageSize: string;\n /**\n * Text that indicates the number of the first and last element displayed on the current page, out of total items\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n showingXofYofTotal: string;\n /**\n * Aria-labels provided for page action buttons.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n actions: PaginationTextsActions;\n};\n\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> &\n usePaginationValues & {\n /** Indicate total number of items that will be paginated */\n length: number;\n /** Page size options */\n pageSizes?: number[];\n /** Shows page controls */\n showPageControls?: boolean;\n /** Shows page numbers between navigation buttons, which allows users to quickly navigate to a specific page */\n showPageNumbers?: boolean;\n /** Shows a dropdown with page sizes, which allows user to change the number of items displayed on the page */\n showPageSize?: boolean;\n /** Enable pagination shortcuts */\n dangerouslyHijackGlobalKeyboardNavigation?: boolean;\n };\n\nconst getShowingLabel = (length: number, pageIndex: number, pageSize: number, texts: LocalizationTexts): string => {\n const minItemIndex = pageIndex * pageSize + 1;\n const maxItemIndex = (pageIndex + 1) * pageSize;\n\n return texts.pagination.showingXofYofTotal\n .replace('[X]', length === 0 ? '0' : String(minItemIndex))\n .replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex))\n .replace('[total]', String(length));\n};\n\nexport const Pagination = React.forwardRef(function Pagination(props: PaginationProps, ref: React.Ref<HTMLDivElement>) {\n const {\n length,\n pageIndex,\n pageSize,\n pageSizes = [10, 25, 50, 100, 500],\n setPageIndex,\n setPageSize,\n showPageControls = true,\n showPageNumbers = true,\n showPageSize = true,\n dangerouslyHijackGlobalKeyboardNavigation = false,\n ...otherProps\n } = props;\n const { texts } = useLocalization();\n\n const maxPageIndex = Math.ceil(length / pageSize) - 1;\n const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;\n\n usePaginationShortcuts({\n setPageIndex,\n maxPageIndex,\n pageIndex,\n dangerouslyHijackGlobalKeyboardNavigation,\n });\n\n const pageCount = Math.ceil(length / pageSize);\n const canPreviousPage = pageIndex > 0;\n const canNextPage = pageIndex < pageCount - 1;\n\n const className = cn('inline-flex relative justify-between items-center', props.className);\n\n return (\n <div {...otherProps} className={className} data-taco=\"pagination\" ref={ref}>\n {showPageSize && (\n <span className=\"mr-4 inline-flex items-center\">\n {getShowingLabel(length, pageIndex, pageSize, texts)}\n <Select2\n aria-label={texts.pagination.pageSize}\n className=\"ml-4 !w-20\"\n onChange={value => {\n setPageIndex(0);\n setPageSize(Number(value));\n }}\n value={pageSize}>\n {pageSizes.map(size => (\n <Select2.Option key={size} value={size}>\n {String(size)}\n </Select2.Option>\n ))}\n </Select2>\n </span>\n )}\n {showPageControls && (\n <Group as=\"nav\" aria-label={texts.pagination.label}>\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canPreviousPage}\n icon=\"arrow-start\"\n onClick={() => setPageIndex(0)}\n aria-label={\n showShortcutTexts\n ? texts.pagination.actions.firstPageWithShortcut\n : texts.pagination.actions.firstPage\n }\n tooltip={\n showShortcutTexts\n ? texts.pagination.actions.firstPageWithShortcut\n : texts.pagination.actions.firstPage\n }\n />\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canPreviousPage}\n icon=\"arrow-left\"\n onClick={() => setPageIndex(pageIndex - 1)}\n aria-label={\n showShortcutTexts\n ? texts.pagination.actions.previousPageWithShortcut\n : texts.pagination.actions.previousPage\n }\n tooltip={\n showShortcutTexts\n ? texts.pagination.actions.previousPageWithShortcut\n : texts.pagination.actions.previousPage\n }\n />\n {showPageNumbers && pageCount > 0 && (\n <PageNumbers pageCount={pageCount} currentPageIndex={pageIndex} onClick={setPageIndex} />\n )}\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canNextPage}\n icon=\"arrow-right\"\n onClick={() => setPageIndex(pageIndex + 1)}\n aria-label={\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n }\n tooltip={\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n }\n />\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canNextPage}\n icon=\"arrow-end\"\n onClick={() => setPageIndex(pageCount - 1)}\n aria-label={\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n }\n tooltip={\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n }\n />\n </Group>\n )}\n </div>\n );\n});\n"],"names":["React","Pagination","useLocalization","usePaginationShortcuts","Select2","Group","LegacyIconButton","PageNumbers"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import * as React from "react";
|
|
|
2
2
|
import cn from "clsx";
|
|
3
3
|
import { PageNumbers } from "./PageNumbers.js";
|
|
4
4
|
import { useLocalization } from "../Provider/Localization.js";
|
|
5
|
-
import {
|
|
5
|
+
import { Select2 } from "../Select2/Select2.js";
|
|
6
6
|
import { Group } from "../Group/Group.js";
|
|
7
7
|
import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
|
|
8
8
|
import { usePaginationShortcuts } from "./usePaginationShortcuts.js";
|
|
@@ -38,21 +38,18 @@ const Pagination = React.forwardRef(function Pagination2(props, ref) {
|
|
|
38
38
|
const canPreviousPage = pageIndex > 0;
|
|
39
39
|
const canNextPage = pageIndex < pageCount - 1;
|
|
40
40
|
const className = cn("inline-flex relative justify-between items-center", props.className);
|
|
41
|
-
return /* @__PURE__ */ React.createElement("div", { ...otherProps, className, "data-taco": "pagination", ref }, showPageSize && /* @__PURE__ */ React.createElement("span", { className: "mr-4" }, getShowingLabel(length, pageIndex, pageSize, texts), /* @__PURE__ */ React.createElement(
|
|
42
|
-
|
|
41
|
+
return /* @__PURE__ */ React.createElement("div", { ...otherProps, className, "data-taco": "pagination", ref }, showPageSize && /* @__PURE__ */ React.createElement("span", { className: "mr-4 inline-flex items-center" }, getShowingLabel(length, pageIndex, pageSize, texts), /* @__PURE__ */ React.createElement(
|
|
42
|
+
Select2,
|
|
43
43
|
{
|
|
44
44
|
"aria-label": texts.pagination.pageSize,
|
|
45
45
|
className: "ml-4 !w-20",
|
|
46
|
-
|
|
47
|
-
text: String(pageSize2),
|
|
48
|
-
value: pageSize2
|
|
49
|
-
})),
|
|
50
|
-
onChange: (event) => {
|
|
46
|
+
onChange: (value) => {
|
|
51
47
|
setPageIndex(0);
|
|
52
|
-
setPageSize(Number(
|
|
48
|
+
setPageSize(Number(value));
|
|
53
49
|
},
|
|
54
50
|
value: pageSize
|
|
55
|
-
}
|
|
51
|
+
},
|
|
52
|
+
pageSizes.map((size) => /* @__PURE__ */ React.createElement(Select2.Option, { key: size, value: size }, String(size)))
|
|
56
53
|
)), showPageControls && /* @__PURE__ */ React.createElement(Group, { as: "nav", "aria-label": texts.pagination.label }, /* @__PURE__ */ React.createElement(
|
|
57
54
|
LegacyIconButton,
|
|
58
55
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { PageNumbers } from './PageNumbers';\nimport { LocalizationTexts, useLocalization } from '../Provider/Localization';\nimport { Select } from '../Select/Select';\nimport { Group } from '../Group/Group';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { usePaginationValues } from './usePagination';\nimport { usePaginationShortcuts } from './usePaginationShortcuts';\n\nexport * from './usePagination';\n\nexport type PaginationTextsActions = {\n /**\n * Aria-label for first page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n firstPage: string;\n /**\n * Aria-label for first page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n firstPageWithShortcut: string;\n /**\n * Aria-label for next page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n nextPage: string;\n /**\n * Aria-label for next page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n nextPageWithShortcut: string;\n /**\n * Aria-label for previous page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n previousPage: string;\n /**\n * Aria-label for previous page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n previousPageWithShortcut: string;\n /**\n * Aria-label for last page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n lastPage: string;\n /**\n * Aria-label for last page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n lastPageWithShortcut: string;\n /**\n * Aria-label for page X action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n pageX: string;\n};\n\nexport type PaginationTexts = {\n /**\n * Aria-label provided for page numbers and page actions group.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n label: string;\n /**\n * Aria-label provided for page size selection.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n pageSize: string;\n /**\n * Text that indicates the number of the first and last element displayed on the current page, out of total items\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n showingXofYofTotal: string;\n /**\n * Aria-labels provided for page action buttons.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n actions: PaginationTextsActions;\n};\n\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> &\n usePaginationValues & {\n /** Indicate total number of items that will be paginated */\n length: number;\n /** Page size options */\n pageSizes?: number[];\n /** Shows page controls */\n showPageControls?: boolean;\n /** Shows page numbers between navigation buttons, which allows users to quickly navigate to a specific page */\n showPageNumbers?: boolean;\n /** Shows a dropdown with page sizes, which allows user to change the number of items displayed on the page */\n showPageSize?: boolean;\n /** Enable pagination shortcuts */\n dangerouslyHijackGlobalKeyboardNavigation?: boolean;\n };\n\nconst getShowingLabel = (length: number, pageIndex: number, pageSize: number, texts: LocalizationTexts): string => {\n const minItemIndex = pageIndex * pageSize + 1;\n const maxItemIndex = (pageIndex + 1) * pageSize;\n\n return texts.pagination.showingXofYofTotal\n .replace('[X]', length === 0 ? '0' : String(minItemIndex))\n .replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex))\n .replace('[total]', String(length));\n};\n\nexport const Pagination = React.forwardRef(function Pagination(props: PaginationProps, ref: React.Ref<HTMLDivElement>) {\n const {\n length,\n pageIndex,\n pageSize,\n pageSizes = [10, 25, 50, 100, 500],\n setPageIndex,\n setPageSize,\n showPageControls = true,\n showPageNumbers = true,\n showPageSize = true,\n dangerouslyHijackGlobalKeyboardNavigation = false,\n ...otherProps\n } = props;\n const { texts } = useLocalization();\n\n const maxPageIndex = Math.ceil(length / pageSize) - 1;\n const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;\n\n usePaginationShortcuts({\n setPageIndex,\n maxPageIndex,\n pageIndex,\n dangerouslyHijackGlobalKeyboardNavigation,\n });\n\n const pageCount = Math.ceil(length / pageSize);\n const canPreviousPage = pageIndex > 0;\n const canNextPage = pageIndex < pageCount - 1;\n\n const className = cn('inline-flex relative justify-between items-center', props.className);\n\n return (\n <div {...otherProps} className={className} data-taco=\"pagination\" ref={ref}>\n {showPageSize && (\n <span className=\"mr-4\">\n {getShowingLabel(length, pageIndex, pageSize, texts)}\n <Select\n aria-label={texts.pagination.pageSize}\n className=\"ml-4 !w-20\"\n data={pageSizes.map(pageSize => ({\n text: String(pageSize),\n value: pageSize,\n }))}\n onChange={event => {\n setPageIndex(0);\n setPageSize(Number(event.target.value));\n }}\n value={pageSize}\n />\n </span>\n )}\n {showPageControls && (\n <Group as=\"nav\" aria-label={texts.pagination.label}>\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canPreviousPage}\n icon=\"arrow-start\"\n onClick={() => setPageIndex(0)}\n aria-label={\n showShortcutTexts\n ? texts.pagination.actions.firstPageWithShortcut\n : texts.pagination.actions.firstPage\n }\n tooltip={\n showShortcutTexts\n ? texts.pagination.actions.firstPageWithShortcut\n : texts.pagination.actions.firstPage\n }\n />\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canPreviousPage}\n icon=\"arrow-left\"\n onClick={() => setPageIndex(pageIndex - 1)}\n aria-label={\n showShortcutTexts\n ? texts.pagination.actions.previousPageWithShortcut\n : texts.pagination.actions.previousPage\n }\n tooltip={\n showShortcutTexts\n ? texts.pagination.actions.previousPageWithShortcut\n : texts.pagination.actions.previousPage\n }\n />\n {showPageNumbers && pageCount > 0 && (\n <PageNumbers pageCount={pageCount} currentPageIndex={pageIndex} onClick={setPageIndex} />\n )}\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canNextPage}\n icon=\"arrow-right\"\n onClick={() => setPageIndex(pageIndex + 1)}\n aria-label={\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n }\n tooltip={\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n }\n />\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canNextPage}\n icon=\"arrow-end\"\n onClick={() => setPageIndex(pageCount - 1)}\n aria-label={\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n }\n tooltip={\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n }\n />\n </Group>\n )}\n </div>\n );\n});\n"],"names":["Pagination","pageSize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { PageNumbers } from './PageNumbers';\nimport { LocalizationTexts, useLocalization } from '../Provider/Localization';\nimport { Select2 } from '../Select2/Select2';\nimport { Group } from '../Group/Group';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { usePaginationValues } from './usePagination';\nimport { usePaginationShortcuts } from './usePaginationShortcuts';\n\nexport * from './usePagination';\n\nexport type PaginationTextsActions = {\n /**\n * Aria-label for first page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n firstPage: string;\n /**\n * Aria-label for first page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n firstPageWithShortcut: string;\n /**\n * Aria-label for next page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n nextPage: string;\n /**\n * Aria-label for next page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n nextPageWithShortcut: string;\n /**\n * Aria-label for previous page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n previousPage: string;\n /**\n * Aria-label for previous page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n previousPageWithShortcut: string;\n /**\n * Aria-label for last page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n lastPage: string;\n /**\n * Aria-label for last page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n lastPageWithShortcut: string;\n /**\n * Aria-label for page X action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n pageX: string;\n};\n\nexport type PaginationTexts = {\n /**\n * Aria-label provided for page numbers and page actions group.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n label: string;\n /**\n * Aria-label provided for page size selection.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n pageSize: string;\n /**\n * Text that indicates the number of the first and last element displayed on the current page, out of total items\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n showingXofYofTotal: string;\n /**\n * Aria-labels provided for page action buttons.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n actions: PaginationTextsActions;\n};\n\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> &\n usePaginationValues & {\n /** Indicate total number of items that will be paginated */\n length: number;\n /** Page size options */\n pageSizes?: number[];\n /** Shows page controls */\n showPageControls?: boolean;\n /** Shows page numbers between navigation buttons, which allows users to quickly navigate to a specific page */\n showPageNumbers?: boolean;\n /** Shows a dropdown with page sizes, which allows user to change the number of items displayed on the page */\n showPageSize?: boolean;\n /** Enable pagination shortcuts */\n dangerouslyHijackGlobalKeyboardNavigation?: boolean;\n };\n\nconst getShowingLabel = (length: number, pageIndex: number, pageSize: number, texts: LocalizationTexts): string => {\n const minItemIndex = pageIndex * pageSize + 1;\n const maxItemIndex = (pageIndex + 1) * pageSize;\n\n return texts.pagination.showingXofYofTotal\n .replace('[X]', length === 0 ? '0' : String(minItemIndex))\n .replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex))\n .replace('[total]', String(length));\n};\n\nexport const Pagination = React.forwardRef(function Pagination(props: PaginationProps, ref: React.Ref<HTMLDivElement>) {\n const {\n length,\n pageIndex,\n pageSize,\n pageSizes = [10, 25, 50, 100, 500],\n setPageIndex,\n setPageSize,\n showPageControls = true,\n showPageNumbers = true,\n showPageSize = true,\n dangerouslyHijackGlobalKeyboardNavigation = false,\n ...otherProps\n } = props;\n const { texts } = useLocalization();\n\n const maxPageIndex = Math.ceil(length / pageSize) - 1;\n const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;\n\n usePaginationShortcuts({\n setPageIndex,\n maxPageIndex,\n pageIndex,\n dangerouslyHijackGlobalKeyboardNavigation,\n });\n\n const pageCount = Math.ceil(length / pageSize);\n const canPreviousPage = pageIndex > 0;\n const canNextPage = pageIndex < pageCount - 1;\n\n const className = cn('inline-flex relative justify-between items-center', props.className);\n\n return (\n <div {...otherProps} className={className} data-taco=\"pagination\" ref={ref}>\n {showPageSize && (\n <span className=\"mr-4 inline-flex items-center\">\n {getShowingLabel(length, pageIndex, pageSize, texts)}\n <Select2\n aria-label={texts.pagination.pageSize}\n className=\"ml-4 !w-20\"\n onChange={value => {\n setPageIndex(0);\n setPageSize(Number(value));\n }}\n value={pageSize}>\n {pageSizes.map(size => (\n <Select2.Option key={size} value={size}>\n {String(size)}\n </Select2.Option>\n ))}\n </Select2>\n </span>\n )}\n {showPageControls && (\n <Group as=\"nav\" aria-label={texts.pagination.label}>\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canPreviousPage}\n icon=\"arrow-start\"\n onClick={() => setPageIndex(0)}\n aria-label={\n showShortcutTexts\n ? texts.pagination.actions.firstPageWithShortcut\n : texts.pagination.actions.firstPage\n }\n tooltip={\n showShortcutTexts\n ? texts.pagination.actions.firstPageWithShortcut\n : texts.pagination.actions.firstPage\n }\n />\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canPreviousPage}\n icon=\"arrow-left\"\n onClick={() => setPageIndex(pageIndex - 1)}\n aria-label={\n showShortcutTexts\n ? texts.pagination.actions.previousPageWithShortcut\n : texts.pagination.actions.previousPage\n }\n tooltip={\n showShortcutTexts\n ? texts.pagination.actions.previousPageWithShortcut\n : texts.pagination.actions.previousPage\n }\n />\n {showPageNumbers && pageCount > 0 && (\n <PageNumbers pageCount={pageCount} currentPageIndex={pageIndex} onClick={setPageIndex} />\n )}\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canNextPage}\n icon=\"arrow-right\"\n onClick={() => setPageIndex(pageIndex + 1)}\n aria-label={\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n }\n tooltip={\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n }\n />\n <LegacyIconButton\n appearance=\"default\"\n disabled={!canNextPage}\n icon=\"arrow-end\"\n onClick={() => setPageIndex(pageCount - 1)}\n aria-label={\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n }\n tooltip={\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n }\n />\n </Group>\n )}\n </div>\n );\n});\n"],"names":["Pagination"],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ const focusManagerOptions = {
|
|
|
16
16
|
const TabList = React.forwardRef(function Tab(props, ref) {
|
|
17
17
|
const { children, ...otherProps } = props;
|
|
18
18
|
const className = cn(
|
|
19
|
-
"border-gray-
|
|
19
|
+
"border-gray-200 flex flex-row m-0 mb-4 print:hidden",
|
|
20
20
|
"aria-orientation-horizontal:border-b",
|
|
21
21
|
"aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col",
|
|
22
22
|
props.className
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabList.cjs","sources":["../../../../src/components/Tabs/components/TabList.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { TabContext } from '../Context';\nimport { OverflowGroup } from '../../OverflowGroup/OverflowGroup';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { useFocusManager } from '@react-aria/focus';\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst focusManagerOptions = {\n wrap: true,\n tabbable: false,\n accept: (element: Element) => {\n return element.getAttribute('role') === 'tab';\n },\n};\n\nexport const TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n const { children, ...otherProps } = props;\n const className = clsx(\n 'border-gray-
|
|
1
|
+
{"version":3,"file":"TabList.cjs","sources":["../../../../src/components/Tabs/components/TabList.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { TabContext } from '../Context';\nimport { OverflowGroup } from '../../OverflowGroup/OverflowGroup';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { useFocusManager } from '@react-aria/focus';\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst focusManagerOptions = {\n wrap: true,\n tabbable: false,\n accept: (element: Element) => {\n return element.getAttribute('role') === 'tab';\n },\n};\n\nexport const TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n const { children, ...otherProps } = props;\n const className = clsx(\n 'border-gray-200 flex flex-row m-0 mb-4 print:hidden',\n 'aria-orientation-horizontal:border-b',\n 'aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col',\n props.className\n );\n\n const context = React.useContext(TabContext);\n const focusManager = useFocusManager();\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (context.orientation === 'horizontal') {\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n focusManager?.focusNext(focusManagerOptions);\n }\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n focusManager?.focusPrevious(focusManagerOptions);\n }\n } else if (context.orientation === 'vertical') {\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n focusManager?.focusPrevious(focusManagerOptions);\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n focusManager?.focusNext(focusManagerOptions);\n }\n }\n };\n\n return (\n <div\n {...otherProps}\n aria-orientation={context?.orientation}\n role=\"tablist\"\n className={className}\n ref={ref}\n onKeyDown={handleKeyDown}>\n <OverflowGroup\n wrapChild\n className='w-full [[aria-orientation=\"vertical\"]_&]:flex-col'\n moreButton={(text: string) => <LegacyButton>{text}</LegacyButton>}>\n {React.Children.toArray(children).filter(child => {\n if (React.isValidElement(child)) {\n return !child.props.hidden;\n }\n\n return true;\n })}\n </OverflowGroup>\n </div>\n );\n});\n"],"names":["clsx","TabContext","useFocusManager","OverflowGroup","LegacyButton"],"mappings":";;;;;;;;AAUA,MAAM,sBAAsB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,CAAC,YAAqB;AACnB,WAAA,QAAQ,aAAa,MAAM,MAAM;AAAA,EAAA;AAEhD;AAEO,MAAM,UAAU,MAAM,WAAW,SAAS,IAAI,OAAqB,KAAgC;AACtG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAYA;AAAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACV;AAEM,QAAA,UAAU,MAAM,WAAWC,kBAAU;AAC3C,QAAM,eAAeC,MAAAA,gBAAgB;AAE/B,QAAA,gBAAgB,CAAC,UAA+B;AAC9C,QAAA,QAAQ,gBAAgB,cAAc;AAClC,UAAA,MAAM,QAAQ,cAAc;AAC5B,cAAM,eAAe;AACrB,qDAAc,UAAU;AAAA,MAAmB;AAG3C,UAAA,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAe;AACrB,qDAAc,cAAc;AAAA,MAAmB;AAAA,IACnD,WACO,QAAQ,gBAAgB,YAAY;AACvC,UAAA,MAAM,QAAQ,WAAW;AACzB,cAAM,eAAe;AACrB,qDAAc,cAAc;AAAA,MAAmB;AAG/C,UAAA,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAe;AACrB,qDAAc,UAAU;AAAA,MAAmB;AAAA,IAC/C;AAAA,EAER;AAGI,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,oBAAkB,mCAAS;AAAA,MAC3B,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IAAA;AAAA,IACX,sBAAA;AAAA,MAACC,cAAA;AAAA,MAAA;AAAA,QACG,WAAS;AAAA,QACT,WAAU;AAAA,QACV,YAAY,CAAC,SAAiB,sBAAA,cAACC,OAAAA,oBAAc,IAAK;AAAA,MAAA;AAAA,MACjD,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAS,UAAA;AAC1C,YAAA,MAAM,eAAe,KAAK,GAAG;AACtB,iBAAA,CAAC,MAAM,MAAM;AAAA,QAAA;AAGjB,eAAA;AAAA,MACV,CAAA;AAAA,IAAA;AAAA,EAET;AAER,CAAC;;"}
|
|
@@ -14,7 +14,7 @@ const focusManagerOptions = {
|
|
|
14
14
|
const TabList = React__default.forwardRef(function Tab(props, ref) {
|
|
15
15
|
const { children, ...otherProps } = props;
|
|
16
16
|
const className = cn(
|
|
17
|
-
"border-gray-
|
|
17
|
+
"border-gray-200 flex flex-row m-0 mb-4 print:hidden",
|
|
18
18
|
"aria-orientation-horizontal:border-b",
|
|
19
19
|
"aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col",
|
|
20
20
|
props.className
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabList.js","sources":["../../../../src/components/Tabs/components/TabList.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { TabContext } from '../Context';\nimport { OverflowGroup } from '../../OverflowGroup/OverflowGroup';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { useFocusManager } from '@react-aria/focus';\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst focusManagerOptions = {\n wrap: true,\n tabbable: false,\n accept: (element: Element) => {\n return element.getAttribute('role') === 'tab';\n },\n};\n\nexport const TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n const { children, ...otherProps } = props;\n const className = clsx(\n 'border-gray-
|
|
1
|
+
{"version":3,"file":"TabList.js","sources":["../../../../src/components/Tabs/components/TabList.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { TabContext } from '../Context';\nimport { OverflowGroup } from '../../OverflowGroup/OverflowGroup';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { useFocusManager } from '@react-aria/focus';\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst focusManagerOptions = {\n wrap: true,\n tabbable: false,\n accept: (element: Element) => {\n return element.getAttribute('role') === 'tab';\n },\n};\n\nexport const TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n const { children, ...otherProps } = props;\n const className = clsx(\n 'border-gray-200 flex flex-row m-0 mb-4 print:hidden',\n 'aria-orientation-horizontal:border-b',\n 'aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col',\n props.className\n );\n\n const context = React.useContext(TabContext);\n const focusManager = useFocusManager();\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (context.orientation === 'horizontal') {\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n focusManager?.focusNext(focusManagerOptions);\n }\n\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n focusManager?.focusPrevious(focusManagerOptions);\n }\n } else if (context.orientation === 'vertical') {\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n focusManager?.focusPrevious(focusManagerOptions);\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n focusManager?.focusNext(focusManagerOptions);\n }\n }\n };\n\n return (\n <div\n {...otherProps}\n aria-orientation={context?.orientation}\n role=\"tablist\"\n className={className}\n ref={ref}\n onKeyDown={handleKeyDown}>\n <OverflowGroup\n wrapChild\n className='w-full [[aria-orientation=\"vertical\"]_&]:flex-col'\n moreButton={(text: string) => <LegacyButton>{text}</LegacyButton>}>\n {React.Children.toArray(children).filter(child => {\n if (React.isValidElement(child)) {\n return !child.props.hidden;\n }\n\n return true;\n })}\n </OverflowGroup>\n </div>\n );\n});\n"],"names":["React","clsx"],"mappings":";;;;;;AAUA,MAAM,sBAAsB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,CAAC,YAAqB;AACnB,WAAA,QAAQ,aAAa,MAAM,MAAM;AAAA,EAAA;AAEhD;AAEO,MAAM,UAAUA,eAAM,WAAW,SAAS,IAAI,OAAqB,KAAgC;AACtG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAYC;AAAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACV;AAEM,QAAA,UAAUD,eAAM,WAAW,UAAU;AAC3C,QAAM,eAAe,gBAAgB;AAE/B,QAAA,gBAAgB,CAAC,UAA+B;AAC9C,QAAA,QAAQ,gBAAgB,cAAc;AAClC,UAAA,MAAM,QAAQ,cAAc;AAC5B,cAAM,eAAe;AACrB,qDAAc,UAAU;AAAA,MAAmB;AAG3C,UAAA,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAe;AACrB,qDAAc,cAAc;AAAA,MAAmB;AAAA,IACnD,WACO,QAAQ,gBAAgB,YAAY;AACvC,UAAA,MAAM,QAAQ,WAAW;AACzB,cAAM,eAAe;AACrB,qDAAc,cAAc;AAAA,MAAmB;AAG/C,UAAA,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAe;AACrB,qDAAc,UAAU;AAAA,MAAmB;AAAA,IAC/C;AAAA,EAER;AAGI,SAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,oBAAkB,mCAAS;AAAA,MAC3B,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IAAA;AAAA,IACXA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAS;AAAA,QACT,WAAU;AAAA,QACV,YAAY,CAAC,SAAiBA,+BAAA,cAAC,oBAAc,IAAK;AAAA,MAAA;AAAA,MACjDA,eAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAS,UAAA;AAC1C,YAAAA,eAAM,eAAe,KAAK,GAAG;AACtB,iBAAA,CAAC,MAAM,MAAM;AAAA,QAAA;AAGjB,eAAA;AAAA,MACV,CAAA;AAAA,IAAA;AAAA,EAET;AAER,CAAC;"}
|
|
@@ -24,11 +24,11 @@ const TabTrigger = React.forwardRef(function Tab(props, forwardedRef) {
|
|
|
24
24
|
"group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100 pointer-events-none rounded px-3"
|
|
25
25
|
);
|
|
26
26
|
const activeClassName = cn(
|
|
27
|
-
"pointer-events-none absolute hidden bg-blue-500 group-aria-selected:flex",
|
|
27
|
+
"pointer-events-none absolute z-[1] hidden bg-blue-500 group-aria-selected:flex",
|
|
28
28
|
// horizontal
|
|
29
|
-
'[[aria-orientation="horizontal"]_&]:rounded-t-sm [[aria-orientation="horizontal"]_&]:bottom-0 [[aria-orientation="horizontal"]_&]:left-0 [[aria-orientation="horizontal"]_&]:right-0 [[aria-orientation="horizontal"]_&]
|
|
29
|
+
'[[aria-orientation="horizontal"]_&]:rounded-t-sm [[aria-orientation="horizontal"]_&]:bottom-0 [[aria-orientation="horizontal"]_&]:left-0 [[aria-orientation="horizontal"]_&]:right-0 [[aria-orientation="horizontal"]_&]:h-0.5',
|
|
30
30
|
// vertical
|
|
31
|
-
'[[aria-orientation="vertical"]_&]:rounded-l-sm [[aria-orientation="vertical"]_&]:right-0 [[aria-orientation="vertical"]_&]:top-0 [[aria-orientation="vertical"]_&]:bottom-0 [[aria-orientation="vertical"]_&]
|
|
31
|
+
'[[aria-orientation="vertical"]_&]:rounded-l-sm [[aria-orientation="vertical"]_&]:right-0 [[aria-orientation="vertical"]_&]:top-0 [[aria-orientation="vertical"]_&]:bottom-0 [[aria-orientation="vertical"]_&]:w-0.5'
|
|
32
32
|
);
|
|
33
33
|
const triggerId = utils.createTriggerId(context.baseId, id);
|
|
34
34
|
const panelId = utils.createPanelId(context.baseId, id);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Trigger.cjs","sources":["../../../../src/components/Tabs/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { getButtonClasses } from '../../LegacyComponents/Button/util';\nimport { TabContext } from '../Context';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { createPanelId, createTriggerId } from './utils';\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n /**\n * A unique value that associates the trigger with a content.\n */\n id: string;\n /**\n * When true, prevents the user from interacting with the tab.\n */\n disabled?: boolean;\n /** A tooltip to show when hovering over the trigger */\n tooltip?: string | JSX.Element;\n};\n\nexport const TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, forwardedRef: React.Ref<HTMLButtonElement>) {\n const { children, id, disabled, tooltip, ...otherProps } = props;\n const context = React.useContext(TabContext);\n const ref = useMergedRef<HTMLButtonElement>(forwardedRef);\n\n const triggerClassName = clsx(\n props.className,\n 'group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',\n // horizontal\n '[[aria-orientation=\"horizontal\"]_&]:pb-1',\n // vertical\n '[[aria-orientation=\"vertical\"]_&]:pr-1'\n );\n const buttonClassName = clsx(\n getButtonClasses(),\n 'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100 pointer-events-none rounded px-3'\n );\n const activeClassName = clsx(\n 'pointer-events-none absolute hidden bg-blue-500 group-aria-selected:flex',\n // horizontal\n '[[aria-orientation=\"horizontal\"]_&]:rounded-t-sm [[aria-orientation=\"horizontal\"]_&]:bottom-0 [[aria-orientation=\"horizontal\"]_&]:left-0 [[aria-orientation=\"horizontal\"]_&]:right-0 [[aria-orientation=\"horizontal\"]_&]
|
|
1
|
+
{"version":3,"file":"Trigger.cjs","sources":["../../../../src/components/Tabs/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { getButtonClasses } from '../../LegacyComponents/Button/util';\nimport { TabContext } from '../Context';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { createPanelId, createTriggerId } from './utils';\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n /**\n * A unique value that associates the trigger with a content.\n */\n id: string;\n /**\n * When true, prevents the user from interacting with the tab.\n */\n disabled?: boolean;\n /** A tooltip to show when hovering over the trigger */\n tooltip?: string | JSX.Element;\n};\n\nexport const TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, forwardedRef: React.Ref<HTMLButtonElement>) {\n const { children, id, disabled, tooltip, ...otherProps } = props;\n const context = React.useContext(TabContext);\n const ref = useMergedRef<HTMLButtonElement>(forwardedRef);\n\n const triggerClassName = clsx(\n props.className,\n 'group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',\n // horizontal\n '[[aria-orientation=\"horizontal\"]_&]:pb-1',\n // vertical\n '[[aria-orientation=\"vertical\"]_&]:pr-1'\n );\n const buttonClassName = clsx(\n getButtonClasses(),\n 'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100 pointer-events-none rounded px-3'\n );\n const activeClassName = clsx(\n 'pointer-events-none absolute z-[1] hidden bg-blue-500 group-aria-selected:flex',\n // horizontal\n '[[aria-orientation=\"horizontal\"]_&]:rounded-t-sm [[aria-orientation=\"horizontal\"]_&]:bottom-0 [[aria-orientation=\"horizontal\"]_&]:left-0 [[aria-orientation=\"horizontal\"]_&]:right-0 [[aria-orientation=\"horizontal\"]_&]:h-0.5',\n // vertical\n '[[aria-orientation=\"vertical\"]_&]:rounded-l-sm [[aria-orientation=\"vertical\"]_&]:right-0 [[aria-orientation=\"vertical\"]_&]:top-0 [[aria-orientation=\"vertical\"]_&]:bottom-0 [[aria-orientation=\"vertical\"]_&]:w-0.5'\n );\n\n const triggerId = createTriggerId(context.baseId, id);\n const panelId = createPanelId(context.baseId, id);\n\n const trigger = (\n <button\n {...otherProps}\n aria-selected={id === context?.activeTabId}\n aria-controls={panelId}\n id={triggerId}\n role=\"tab\"\n type=\"button\"\n className={triggerClassName}\n disabled={disabled}\n onFocus={() => context.onChange(id)}\n ref={ref}\n tabIndex={context?.activeTabId !== undefined ? (id === context?.activeTabId ? 0 : -1) : 0}>\n <span className={buttonClassName}>{children}</span>\n <span className={activeClassName} />\n </button>\n );\n\n if (tooltip) {\n return <Tooltip title={tooltip}>{trigger}</Tooltip>;\n }\n\n return trigger;\n});\n"],"names":["TabContext","useMergedRef","clsx","getButtonClasses","createTriggerId","createPanelId","Tooltip"],"mappings":";;;;;;;;;AAsBO,MAAM,aAAa,MAAM,WAAW,SAAS,IAAI,OAAwB,cAA4C;AACxH,QAAM,EAAE,UAAU,IAAI,UAAU,SAAS,GAAG,eAAe;AACrD,QAAA,UAAU,MAAM,WAAWA,kBAAU;AACrC,QAAA,MAAMC,0BAAgC,YAAY;AAExD,QAAM,mBAAmBC;AAAAA,IACrB,MAAM;AAAA,IACN;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACJ;AACA,QAAM,kBAAkBA;AAAAA,IACpBC,sBAAiB;AAAA,IACjB;AAAA,EACJ;AACA,QAAM,kBAAkBD;AAAAA,IACpB;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACJ;AAEA,QAAM,YAAYE,MAAA,gBAAgB,QAAQ,QAAQ,EAAE;AACpD,QAAM,UAAUC,MAAA,cAAc,QAAQ,QAAQ,EAAE;AAEhD,QAAM,UACF,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,QAAO,mCAAS;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW;AAAA,MACX;AAAA,MACA,SAAS,MAAM,QAAQ,SAAS,EAAE;AAAA,MAClC;AAAA,MACA,WAAU,mCAAS,iBAAgB,SAAa,QAAO,mCAAS,eAAc,IAAI,KAAM;AAAA,IAAA;AAAA,IACvF,sBAAA,cAAA,QAAA,EAAK,WAAW,gBAAA,GAAkB,QAAS;AAAA,IAC5C,sBAAA,cAAC,QAAK,EAAA,WAAW,gBAAiB,CAAA;AAAA,EACtC;AAGJ,MAAI,SAAS;AACT,WAAQ,sBAAA,cAAAC,QAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,OAAQ;AAAA,EAAA;AAGtC,SAAA;AACX,CAAC;;"}
|
|
@@ -22,11 +22,11 @@ const TabTrigger = React__default.forwardRef(function Tab(props, forwardedRef) {
|
|
|
22
22
|
"group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100 pointer-events-none rounded px-3"
|
|
23
23
|
);
|
|
24
24
|
const activeClassName = cn(
|
|
25
|
-
"pointer-events-none absolute hidden bg-blue-500 group-aria-selected:flex",
|
|
25
|
+
"pointer-events-none absolute z-[1] hidden bg-blue-500 group-aria-selected:flex",
|
|
26
26
|
// horizontal
|
|
27
|
-
'[[aria-orientation="horizontal"]_&]:rounded-t-sm [[aria-orientation="horizontal"]_&]:bottom-0 [[aria-orientation="horizontal"]_&]:left-0 [[aria-orientation="horizontal"]_&]:right-0 [[aria-orientation="horizontal"]_&]
|
|
27
|
+
'[[aria-orientation="horizontal"]_&]:rounded-t-sm [[aria-orientation="horizontal"]_&]:bottom-0 [[aria-orientation="horizontal"]_&]:left-0 [[aria-orientation="horizontal"]_&]:right-0 [[aria-orientation="horizontal"]_&]:h-0.5',
|
|
28
28
|
// vertical
|
|
29
|
-
'[[aria-orientation="vertical"]_&]:rounded-l-sm [[aria-orientation="vertical"]_&]:right-0 [[aria-orientation="vertical"]_&]:top-0 [[aria-orientation="vertical"]_&]:bottom-0 [[aria-orientation="vertical"]_&]
|
|
29
|
+
'[[aria-orientation="vertical"]_&]:rounded-l-sm [[aria-orientation="vertical"]_&]:right-0 [[aria-orientation="vertical"]_&]:top-0 [[aria-orientation="vertical"]_&]:bottom-0 [[aria-orientation="vertical"]_&]:w-0.5'
|
|
30
30
|
);
|
|
31
31
|
const triggerId = createTriggerId(context.baseId, id);
|
|
32
32
|
const panelId = createPanelId(context.baseId, id);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Trigger.js","sources":["../../../../src/components/Tabs/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { getButtonClasses } from '../../LegacyComponents/Button/util';\nimport { TabContext } from '../Context';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { createPanelId, createTriggerId } from './utils';\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n /**\n * A unique value that associates the trigger with a content.\n */\n id: string;\n /**\n * When true, prevents the user from interacting with the tab.\n */\n disabled?: boolean;\n /** A tooltip to show when hovering over the trigger */\n tooltip?: string | JSX.Element;\n};\n\nexport const TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, forwardedRef: React.Ref<HTMLButtonElement>) {\n const { children, id, disabled, tooltip, ...otherProps } = props;\n const context = React.useContext(TabContext);\n const ref = useMergedRef<HTMLButtonElement>(forwardedRef);\n\n const triggerClassName = clsx(\n props.className,\n 'group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',\n // horizontal\n '[[aria-orientation=\"horizontal\"]_&]:pb-1',\n // vertical\n '[[aria-orientation=\"vertical\"]_&]:pr-1'\n );\n const buttonClassName = clsx(\n getButtonClasses(),\n 'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100 pointer-events-none rounded px-3'\n );\n const activeClassName = clsx(\n 'pointer-events-none absolute hidden bg-blue-500 group-aria-selected:flex',\n // horizontal\n '[[aria-orientation=\"horizontal\"]_&]:rounded-t-sm [[aria-orientation=\"horizontal\"]_&]:bottom-0 [[aria-orientation=\"horizontal\"]_&]:left-0 [[aria-orientation=\"horizontal\"]_&]:right-0 [[aria-orientation=\"horizontal\"]_&]
|
|
1
|
+
{"version":3,"file":"Trigger.js","sources":["../../../../src/components/Tabs/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { getButtonClasses } from '../../LegacyComponents/Button/util';\nimport { TabContext } from '../Context';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { createPanelId, createTriggerId } from './utils';\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n /**\n * A unique value that associates the trigger with a content.\n */\n id: string;\n /**\n * When true, prevents the user from interacting with the tab.\n */\n disabled?: boolean;\n /** A tooltip to show when hovering over the trigger */\n tooltip?: string | JSX.Element;\n};\n\nexport const TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, forwardedRef: React.Ref<HTMLButtonElement>) {\n const { children, id, disabled, tooltip, ...otherProps } = props;\n const context = React.useContext(TabContext);\n const ref = useMergedRef<HTMLButtonElement>(forwardedRef);\n\n const triggerClassName = clsx(\n props.className,\n 'group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',\n // horizontal\n '[[aria-orientation=\"horizontal\"]_&]:pb-1',\n // vertical\n '[[aria-orientation=\"vertical\"]_&]:pr-1'\n );\n const buttonClassName = clsx(\n getButtonClasses(),\n 'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100 pointer-events-none rounded px-3'\n );\n const activeClassName = clsx(\n 'pointer-events-none absolute z-[1] hidden bg-blue-500 group-aria-selected:flex',\n // horizontal\n '[[aria-orientation=\"horizontal\"]_&]:rounded-t-sm [[aria-orientation=\"horizontal\"]_&]:bottom-0 [[aria-orientation=\"horizontal\"]_&]:left-0 [[aria-orientation=\"horizontal\"]_&]:right-0 [[aria-orientation=\"horizontal\"]_&]:h-0.5',\n // vertical\n '[[aria-orientation=\"vertical\"]_&]:rounded-l-sm [[aria-orientation=\"vertical\"]_&]:right-0 [[aria-orientation=\"vertical\"]_&]:top-0 [[aria-orientation=\"vertical\"]_&]:bottom-0 [[aria-orientation=\"vertical\"]_&]:w-0.5'\n );\n\n const triggerId = createTriggerId(context.baseId, id);\n const panelId = createPanelId(context.baseId, id);\n\n const trigger = (\n <button\n {...otherProps}\n aria-selected={id === context?.activeTabId}\n aria-controls={panelId}\n id={triggerId}\n role=\"tab\"\n type=\"button\"\n className={triggerClassName}\n disabled={disabled}\n onFocus={() => context.onChange(id)}\n ref={ref}\n tabIndex={context?.activeTabId !== undefined ? (id === context?.activeTabId ? 0 : -1) : 0}>\n <span className={buttonClassName}>{children}</span>\n <span className={activeClassName} />\n </button>\n );\n\n if (tooltip) {\n return <Tooltip title={tooltip}>{trigger}</Tooltip>;\n }\n\n return trigger;\n});\n"],"names":["React","clsx"],"mappings":";;;;;;;AAsBO,MAAM,aAAaA,eAAM,WAAW,SAAS,IAAI,OAAwB,cAA4C;AACxH,QAAM,EAAE,UAAU,IAAI,UAAU,SAAS,GAAG,eAAe;AACrD,QAAA,UAAUA,eAAM,WAAW,UAAU;AACrC,QAAA,MAAM,aAAgC,YAAY;AAExD,QAAM,mBAAmBC;AAAAA,IACrB,MAAM;AAAA,IACN;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACJ;AACA,QAAM,kBAAkBA;AAAAA,IACpB,iBAAiB;AAAA,IACjB;AAAA,EACJ;AACA,QAAM,kBAAkBA;AAAAA,IACpB;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACJ;AAEA,QAAM,YAAY,gBAAgB,QAAQ,QAAQ,EAAE;AACpD,QAAM,UAAU,cAAc,QAAQ,QAAQ,EAAE;AAEhD,QAAM,UACFD,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,QAAO,mCAAS;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW;AAAA,MACX;AAAA,MACA,SAAS,MAAM,QAAQ,SAAS,EAAE;AAAA,MAClC;AAAA,MACA,WAAU,mCAAS,iBAAgB,SAAa,QAAO,mCAAS,eAAc,IAAI,KAAM;AAAA,IAAA;AAAA,IACvFA,+BAAA,cAAA,QAAA,EAAK,WAAW,gBAAA,GAAkB,QAAS;AAAA,IAC5CA,+BAAA,cAAC,QAAK,EAAA,WAAW,gBAAiB,CAAA;AAAA,EACtC;AAGJ,MAAI,SAAS;AACT,WAAQA,+BAAA,cAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,OAAQ;AAAA,EAAA;AAGtC,SAAA;AACX,CAAC;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@economic/taco",
|
|
3
|
-
"version": "9.0.0
|
|
3
|
+
"version": "9.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@dnd-kit/modifiers": "^7.0.0",
|
|
47
47
|
"@dnd-kit/sortable": "^7.0.2",
|
|
48
48
|
"@dnd-kit/utilities": "^3.2.2",
|
|
49
|
-
"@economic/taco-tokens": "^3.0.0
|
|
49
|
+
"@economic/taco-tokens": "^3.0.0",
|
|
50
50
|
"@radix-ui/react-popover": "1.0.2",
|
|
51
51
|
"@radix-ui/react-scroll-area": "1.2.10",
|
|
52
52
|
"@react-aria/focus": "^3.19.0",
|
|
@@ -62,7 +62,6 @@
|
|
|
62
62
|
"react-day-picker": "^9.11.0",
|
|
63
63
|
"react-intersection-observer": "^9.4.0",
|
|
64
64
|
"react-joyride": "^3.1.0",
|
|
65
|
-
"react-joyride-react19-compat": "2.9.5-react19-compat",
|
|
66
65
|
"react-table": "^7.8.0",
|
|
67
66
|
"react-window": "^1.8.11",
|
|
68
67
|
"react-window-infinite-loader": "^1.0.10",
|
|
@@ -103,5 +102,5 @@
|
|
|
103
102
|
"optionalDependencies": {
|
|
104
103
|
"@rollup/rollup-linux-x64-gnu": "^4.62.2"
|
|
105
104
|
},
|
|
106
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "fcc85009715722985291a6c70e2bdd1008685e31"
|
|
107
106
|
}
|