@salt-ds/lab 1.0.0-alpha.27 → 1.0.0-alpha.28
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/css/salt-lab.css +1 -200
- package/dist-cjs/index.js +0 -14
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/layer-layout/LayerLayout.js +1 -2
- package/dist-cjs/layer-layout/LayerLayout.js.map +1 -1
- package/dist-es/index.js +0 -7
- package/dist-es/index.js.map +1 -1
- package/dist-es/layer-layout/LayerLayout.js +1 -2
- package/dist-es/layer-layout/LayerLayout.js.map +1 -1
- package/dist-types/index.d.ts +0 -3
- package/dist-types/layer-layout/LayerLayout.d.ts +1 -1
- package/package.json +2 -2
- package/dist-cjs/navigation-item/ConditionalWrapper.js +0 -35
- package/dist-cjs/navigation-item/ConditionalWrapper.js.map +0 -1
- package/dist-cjs/navigation-item/ExpansionIcon.js +0 -29
- package/dist-cjs/navigation-item/ExpansionIcon.js.map +0 -1
- package/dist-cjs/navigation-item/NavigationItem.css.js +0 -6
- package/dist-cjs/navigation-item/NavigationItem.css.js.map +0 -1
- package/dist-cjs/navigation-item/NavigationItem.js +0 -78
- package/dist-cjs/navigation-item/NavigationItem.js.map +0 -1
- package/dist-cjs/pagination/CompactInput.css.js +0 -6
- package/dist-cjs/pagination/CompactInput.css.js.map +0 -1
- package/dist-cjs/pagination/CompactInput.js +0 -62
- package/dist-cjs/pagination/CompactInput.js.map +0 -1
- package/dist-cjs/pagination/CompactPaginator.css.js +0 -6
- package/dist-cjs/pagination/CompactPaginator.css.js.map +0 -1
- package/dist-cjs/pagination/CompactPaginator.js +0 -76
- package/dist-cjs/pagination/CompactPaginator.js.map +0 -1
- package/dist-cjs/pagination/GoToInput.css.js +0 -6
- package/dist-cjs/pagination/GoToInput.css.js.map +0 -1
- package/dist-cjs/pagination/GoToInput.js +0 -77
- package/dist-cjs/pagination/GoToInput.js.map +0 -1
- package/dist-cjs/pagination/PageButton.css.js +0 -6
- package/dist-cjs/pagination/PageButton.css.js.map +0 -1
- package/dist-cjs/pagination/PageButton.js +0 -44
- package/dist-cjs/pagination/PageButton.js.map +0 -1
- package/dist-cjs/pagination/PageRanges.css.js +0 -6
- package/dist-cjs/pagination/PageRanges.css.js.map +0 -1
- package/dist-cjs/pagination/PageRanges.js +0 -73
- package/dist-cjs/pagination/PageRanges.js.map +0 -1
- package/dist-cjs/pagination/Pagination.css.js +0 -6
- package/dist-cjs/pagination/Pagination.css.js.map +0 -1
- package/dist-cjs/pagination/Pagination.js +0 -78
- package/dist-cjs/pagination/Pagination.js.map +0 -1
- package/dist-cjs/pagination/PaginationContext.js +0 -17
- package/dist-cjs/pagination/PaginationContext.js.map +0 -1
- package/dist-cjs/pagination/Paginator.css.js +0 -6
- package/dist-cjs/pagination/Paginator.css.js.map +0 -1
- package/dist-cjs/pagination/Paginator.js +0 -69
- package/dist-cjs/pagination/Paginator.js.map +0 -1
- package/dist-cjs/pagination/usePagination.js +0 -27
- package/dist-cjs/pagination/usePagination.js.map +0 -1
- package/dist-cjs/pagination/usePaginationContext.js +0 -19
- package/dist-cjs/pagination/usePaginationContext.js.map +0 -1
- package/dist-cjs/scrim/Scrim.css.js +0 -6
- package/dist-cjs/scrim/Scrim.css.js.map +0 -1
- package/dist-cjs/scrim/Scrim.js +0 -40
- package/dist-cjs/scrim/Scrim.js.map +0 -1
- package/dist-es/navigation-item/ConditionalWrapper.js +0 -31
- package/dist-es/navigation-item/ConditionalWrapper.js.map +0 -1
- package/dist-es/navigation-item/ExpansionIcon.js +0 -25
- package/dist-es/navigation-item/ExpansionIcon.js.map +0 -1
- package/dist-es/navigation-item/NavigationItem.css.js +0 -4
- package/dist-es/navigation-item/NavigationItem.css.js.map +0 -1
- package/dist-es/navigation-item/NavigationItem.js +0 -74
- package/dist-es/navigation-item/NavigationItem.js.map +0 -1
- package/dist-es/pagination/CompactInput.css.js +0 -4
- package/dist-es/pagination/CompactInput.css.js.map +0 -1
- package/dist-es/pagination/CompactInput.js +0 -58
- package/dist-es/pagination/CompactInput.js.map +0 -1
- package/dist-es/pagination/CompactPaginator.css.js +0 -4
- package/dist-es/pagination/CompactPaginator.css.js.map +0 -1
- package/dist-es/pagination/CompactPaginator.js +0 -72
- package/dist-es/pagination/CompactPaginator.js.map +0 -1
- package/dist-es/pagination/GoToInput.css.js +0 -4
- package/dist-es/pagination/GoToInput.css.js.map +0 -1
- package/dist-es/pagination/GoToInput.js +0 -73
- package/dist-es/pagination/GoToInput.js.map +0 -1
- package/dist-es/pagination/PageButton.css.js +0 -4
- package/dist-es/pagination/PageButton.css.js.map +0 -1
- package/dist-es/pagination/PageButton.js +0 -40
- package/dist-es/pagination/PageButton.js.map +0 -1
- package/dist-es/pagination/PageRanges.css.js +0 -4
- package/dist-es/pagination/PageRanges.css.js.map +0 -1
- package/dist-es/pagination/PageRanges.js +0 -69
- package/dist-es/pagination/PageRanges.js.map +0 -1
- package/dist-es/pagination/Pagination.css.js +0 -4
- package/dist-es/pagination/Pagination.css.js.map +0 -1
- package/dist-es/pagination/Pagination.js +0 -74
- package/dist-es/pagination/Pagination.js.map +0 -1
- package/dist-es/pagination/PaginationContext.js +0 -13
- package/dist-es/pagination/PaginationContext.js.map +0 -1
- package/dist-es/pagination/Paginator.css.js +0 -4
- package/dist-es/pagination/Paginator.css.js.map +0 -1
- package/dist-es/pagination/Paginator.js +0 -65
- package/dist-es/pagination/Paginator.js.map +0 -1
- package/dist-es/pagination/usePagination.js +0 -23
- package/dist-es/pagination/usePagination.js.map +0 -1
- package/dist-es/pagination/usePaginationContext.js +0 -15
- package/dist-es/pagination/usePaginationContext.js.map +0 -1
- package/dist-es/scrim/Scrim.css.js +0 -4
- package/dist-es/scrim/Scrim.css.js.map +0 -1
- package/dist-es/scrim/Scrim.js +0 -36
- package/dist-es/scrim/Scrim.js.map +0 -1
- package/dist-types/navigation-item/ConditionalWrapper.d.ts +0 -8
- package/dist-types/navigation-item/ExpansionIcon.d.ts +0 -2
- package/dist-types/navigation-item/NavigationItem.d.ts +0 -36
- package/dist-types/navigation-item/index.d.ts +0 -1
- package/dist-types/pagination/CompactInput.d.ts +0 -2
- package/dist-types/pagination/CompactPaginator.d.ts +0 -1
- package/dist-types/pagination/GoToInput.d.ts +0 -16
- package/dist-types/pagination/PageButton.d.ts +0 -6
- package/dist-types/pagination/PageRanges.d.ts +0 -5
- package/dist-types/pagination/Pagination.d.ts +0 -20
- package/dist-types/pagination/PaginationContext.d.ts +0 -7
- package/dist-types/pagination/Paginator.d.ts +0 -12
- package/dist-types/pagination/index.d.ts +0 -5
- package/dist-types/pagination/usePagination.d.ts +0 -2
- package/dist-types/pagination/usePaginationContext.d.ts +0 -1
- package/dist-types/scrim/Scrim.d.ts +0 -13
- package/dist-types/scrim/index.d.ts +0 -1
- package/dist-types/scrim/internal/PreventFocus.d.ts +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import { MouseEventHandler, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport pageButtonCss from \"./PageButton.css\";\n\nconst withBaseName = makePrefixer(\"saltPageButton\");\n\nexport interface PageButtonProps {\n page: number;\n selected?: boolean;\n disabled?: boolean;\n}\nexport const PageButton = forwardRef<HTMLButtonElement, PageButtonProps>(\n function PageButton({ page, selected, disabled }: PageButtonProps, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-page-button\",\n css: pageButtonCss,\n window: targetWindow,\n });\n\n const { count, onPageChange } = usePaginationContext();\n\n const onClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, page);\n };\n\n return (\n <Button\n aria-label={`Page ${page} of ${count}`}\n aria-current={selected ? \"page\" : undefined}\n variant=\"secondary\"\n className={clsx(withBaseName(), {\n [withBaseName(\"selected\")]: selected,\n [withBaseName(\"fixed\")]: page < 100,\n })}\n onClick={onClick}\n disabled={disabled}\n ref={ref}\n >\n {page}\n </Button>\n );\n }\n);\n"],"names":["PageButton","pageButtonCss"],"mappings":";;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAO3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,EAAE,MAAM,QAAU,EAAA,QAAA,IAA6B,GAAK,EAAA;AACtE,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAErD,IAAM,MAAA,OAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,MAAA,YAAA,CAAa,OAAO,IAAI,CAAA,CAAA;AAAA,KAC1B,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,YAAA,EAAY,QAAQ,IAAW,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA;AAAA,MAC/B,cAAA,EAAc,WAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MAClC,OAAQ,EAAA,WAAA;AAAA,MACR,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,QAC9B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,OAAO,CAAA,GAAI,IAAO,GAAA,GAAA;AAAA,OACjC,CAAA;AAAA,MACD,OAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAA;AAAA,MAEC,QAAA,EAAA,IAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = ".saltPageRanges-ellipsis {\n display: inline-flex;\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n line-height: var(--salt-size-base);\n justify-content: center;\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=PageRanges.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageRanges.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useCallback } from 'react';
|
|
3
|
-
import { makePrefixer } from '@salt-ds/core';
|
|
4
|
-
import { PageButton } from './PageButton.js';
|
|
5
|
-
import { usePagination } from './usePagination.js';
|
|
6
|
-
import { usePaginationContext } from './usePaginationContext.js';
|
|
7
|
-
import { useWindow } from '@salt-ds/window';
|
|
8
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
9
|
-
import css_248z from './PageRanges.css.js';
|
|
10
|
-
|
|
11
|
-
const withBaseName = makePrefixer("saltPageRanges");
|
|
12
|
-
const Ellipsis = () => {
|
|
13
|
-
return /* @__PURE__ */ jsx("div", {
|
|
14
|
-
className: withBaseName("ellipsis"),
|
|
15
|
-
children: `\u2026`
|
|
16
|
-
});
|
|
17
|
-
};
|
|
18
|
-
const mapRange = (range, fn) => {
|
|
19
|
-
const result = [];
|
|
20
|
-
for (let i = range[0]; i <= range[1]; ++i) {
|
|
21
|
-
result.push(fn(i));
|
|
22
|
-
}
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
function PageRanges({
|
|
26
|
-
siblingCount = 2,
|
|
27
|
-
boundaryCount = 1
|
|
28
|
-
}) {
|
|
29
|
-
const targetWindow = useWindow();
|
|
30
|
-
useComponentCssInjection({
|
|
31
|
-
testId: "salt-page-ranges",
|
|
32
|
-
css: css_248z,
|
|
33
|
-
window: targetWindow
|
|
34
|
-
});
|
|
35
|
-
const { count, page } = usePaginationContext();
|
|
36
|
-
const renderPages = useCallback(
|
|
37
|
-
(range) => mapRange(range, (i) => /* @__PURE__ */ jsx(PageButton, {
|
|
38
|
-
page: i,
|
|
39
|
-
selected: page === i
|
|
40
|
-
}, i)),
|
|
41
|
-
[page]
|
|
42
|
-
);
|
|
43
|
-
const [leftPages, middlePages, rightPages] = usePagination(
|
|
44
|
-
page,
|
|
45
|
-
count,
|
|
46
|
-
Math.max(1, boundaryCount),
|
|
47
|
-
siblingCount
|
|
48
|
-
);
|
|
49
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
|
50
|
-
children: [
|
|
51
|
-
leftPages && /* @__PURE__ */ jsxs(Fragment, {
|
|
52
|
-
children: [
|
|
53
|
-
renderPages(leftPages),
|
|
54
|
-
/* @__PURE__ */ jsx(Ellipsis, {})
|
|
55
|
-
]
|
|
56
|
-
}),
|
|
57
|
-
middlePages && renderPages(middlePages),
|
|
58
|
-
rightPages && /* @__PURE__ */ jsxs(Fragment, {
|
|
59
|
-
children: [
|
|
60
|
-
/* @__PURE__ */ jsx(Ellipsis, {}),
|
|
61
|
-
renderPages(rightPages)
|
|
62
|
-
]
|
|
63
|
-
})
|
|
64
|
-
]
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
export { PageRanges };
|
|
69
|
-
//# sourceMappingURL=PageRanges.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PageRanges.js","sources":["../src/pagination/PageRanges.tsx"],"sourcesContent":["import { ReactElement, useCallback } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { PageButton } from \"./PageButton\";\nimport { PageRange, usePagination } from \"./usePagination\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport pageRangesCss from \"./PageRanges.css\";\n\nconst withBaseName = makePrefixer(\"saltPageRanges\");\n\nexport interface PageRangesProps {\n boundaryCount?: number;\n siblingCount?: number;\n}\n\nconst Ellipsis = () => {\n return <div className={withBaseName(\"ellipsis\")}>{`\\u2026`}</div>;\n};\n\nconst mapRange = (range: PageRange, fn: (i: number) => ReactElement) => {\n const result: ReactElement[] = [];\n for (let i = range[0]; i <= range[1]; ++i) {\n result.push(fn(i));\n }\n return result;\n};\n\nexport function PageRanges({\n siblingCount = 2,\n boundaryCount = 1,\n}: PageRangesProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-page-ranges\",\n css: pageRangesCss,\n window: targetWindow,\n });\n\n const { count, page } = usePaginationContext();\n\n const renderPages = useCallback(\n (range: PageRange) =>\n mapRange(range, (i) => (\n <PageButton key={i} page={i} selected={page === i} />\n )),\n [page]\n );\n\n const [leftPages, middlePages, rightPages] = usePagination(\n page,\n count,\n Math.max(1, boundaryCount),\n siblingCount\n );\n\n return (\n <>\n {leftPages && (\n <>\n {renderPages(leftPages)}\n <Ellipsis />\n </>\n )}\n {middlePages && renderPages(middlePages)}\n {rightPages && (\n <>\n <Ellipsis />\n {renderPages(rightPages)}\n </>\n )}\n </>\n );\n}\n"],"names":["pageRangesCss"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAOlD,MAAM,WAAW,MAAM;AACrB,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,IAAI,QAAA,EAAA,CAAA,MAAA,CAAA;AAAA,GAAS,CAAA,CAAA;AAC7D,CAAA,CAAA;AAEA,MAAM,QAAA,GAAW,CAAC,KAAA,EAAkB,EAAoC,KAAA;AACtE,EAAA,MAAM,SAAyB,EAAC,CAAA;AAChC,EAAA,KAAA,IAAS,IAAI,KAAM,CAAA,CAAA,CAAA,EAAI,KAAK,KAAM,CAAA,CAAA,CAAA,EAAI,EAAE,CAAG,EAAA;AACzC,IAAO,MAAA,CAAA,IAAA,CAAK,EAAG,CAAA,CAAC,CAAC,CAAA,CAAA;AAAA,GACnB;AACA,EAAO,OAAA,MAAA,CAAA;AACT,CAAA,CAAA;AAEO,SAAS,UAAW,CAAA;AAAA,EACzB,YAAe,GAAA,CAAA;AAAA,EACf,aAAgB,GAAA,CAAA;AAClB,CAAoB,EAAA;AAClB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAK,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE7C,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,KACC,KAAA,QAAA,CAAS,KAAO,EAAA,CAAC,sBACd,GAAA,CAAA,UAAA,EAAA;AAAA,MAAmB,IAAM,EAAA,CAAA;AAAA,MAAG,UAAU,IAAS,KAAA,CAAA;AAAA,KAAA,EAA/B,CAAkC,CACpD,CAAA;AAAA,IACH,CAAC,IAAI,CAAA;AAAA,GACP,CAAA;AAEA,EAAA,MAAM,CAAC,SAAA,EAAW,WAAa,EAAA,UAAU,CAAI,GAAA,aAAA;AAAA,IAC3C,IAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA,CAAK,GAAI,CAAA,CAAA,EAAG,aAAa,CAAA;AAAA,IACzB,YAAA;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACG,QAAA,EAAA;AAAA,MACC,SAAA,oBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,QACG,QAAA,EAAA;AAAA,UAAA,WAAA,CAAY,SAAS,CAAA;AAAA,8BACrB,QAAS,EAAA,EAAA,CAAA;AAAA,SAAA;AAAA,OACZ,CAAA;AAAA,MAED,WAAA,IAAe,YAAY,WAAW,CAAA;AAAA,MACtC,UACC,oBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,QACE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAS,EAAA,EAAA,CAAA;AAAA,UACT,YAAY,UAAU,CAAA;AAAA,SAAA;AAAA,OACzB,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef, useCallback, useMemo, useRef, useEffect } from 'react';
|
|
3
|
-
import { clsx } from 'clsx';
|
|
4
|
-
import { makePrefixer, useControlled, useAriaAnnouncer } from '@salt-ds/core';
|
|
5
|
-
import { paginationContext } from './PaginationContext.js';
|
|
6
|
-
import { useWindow } from '@salt-ds/window';
|
|
7
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
8
|
-
import css_248z from './Pagination.css.js';
|
|
9
|
-
|
|
10
|
-
const withBaseName = makePrefixer("saltPagination");
|
|
11
|
-
const { Provider } = paginationContext;
|
|
12
|
-
const Pagination = forwardRef(
|
|
13
|
-
function Pagination2({
|
|
14
|
-
className,
|
|
15
|
-
count,
|
|
16
|
-
children,
|
|
17
|
-
defaultPage = 1,
|
|
18
|
-
page: pageProp,
|
|
19
|
-
onPageChange: onPageChangeProp,
|
|
20
|
-
...restProps
|
|
21
|
-
}, ref) {
|
|
22
|
-
const targetWindow = useWindow();
|
|
23
|
-
useComponentCssInjection({
|
|
24
|
-
testId: "salt-pagination",
|
|
25
|
-
css: css_248z,
|
|
26
|
-
window: targetWindow
|
|
27
|
-
});
|
|
28
|
-
const [pageState, setPageState] = useControlled({
|
|
29
|
-
controlled: pageProp,
|
|
30
|
-
default: defaultPage,
|
|
31
|
-
name: "Pagination",
|
|
32
|
-
state: "page"
|
|
33
|
-
});
|
|
34
|
-
const onPageChange = useCallback(
|
|
35
|
-
(event, page) => {
|
|
36
|
-
setPageState(page);
|
|
37
|
-
onPageChangeProp && onPageChangeProp(event, page);
|
|
38
|
-
},
|
|
39
|
-
[onPageChangeProp, setPageState]
|
|
40
|
-
);
|
|
41
|
-
const contextValue = useMemo(
|
|
42
|
-
() => ({
|
|
43
|
-
page: pageState,
|
|
44
|
-
count,
|
|
45
|
-
onPageChange
|
|
46
|
-
}),
|
|
47
|
-
[pageState, count, onPageChange]
|
|
48
|
-
);
|
|
49
|
-
const { announce } = useAriaAnnouncer();
|
|
50
|
-
const mounted = useRef(false);
|
|
51
|
-
useEffect(() => {
|
|
52
|
-
if (mounted.current) {
|
|
53
|
-
announce(`Page ${pageState}`);
|
|
54
|
-
} else {
|
|
55
|
-
mounted.current = true;
|
|
56
|
-
}
|
|
57
|
-
}, [announce, pageState]);
|
|
58
|
-
if (count < 2) {
|
|
59
|
-
return null;
|
|
60
|
-
}
|
|
61
|
-
return /* @__PURE__ */ jsx(Provider, {
|
|
62
|
-
value: contextValue,
|
|
63
|
-
children: /* @__PURE__ */ jsx("nav", {
|
|
64
|
-
className: clsx(withBaseName(), className),
|
|
65
|
-
ref,
|
|
66
|
-
...restProps,
|
|
67
|
-
children
|
|
68
|
-
})
|
|
69
|
-
});
|
|
70
|
-
}
|
|
71
|
-
);
|
|
72
|
-
|
|
73
|
-
export { Pagination };
|
|
74
|
-
//# sourceMappingURL=Pagination.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../src/pagination/Pagination.tsx"],"sourcesContent":["import {\n forwardRef,\n HTMLAttributes,\n SyntheticEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, useAriaAnnouncer, useControlled } from \"@salt-ds/core\";\nimport { PaginationContext, paginationContext } from \"./PaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport paginationCss from \"./Pagination.css\";\n\nconst withBaseName = makePrefixer(\"saltPagination\");\n\nconst { Provider } = paginationContext;\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n /**\n * Number of pages.\n */\n count: number;\n /**\n * Current/active page.\n */\n page?: number;\n /**\n * Default current/active page.\n */\n defaultPage?: number;\n /**\n * Callback function triggered when current page changed.\n */\n onPageChange?: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n function Pagination(\n {\n className,\n count,\n children,\n defaultPage = 1,\n page: pageProp,\n onPageChange: onPageChangeProp,\n ...restProps\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pagination\",\n css: paginationCss,\n window: targetWindow,\n });\n\n const [pageState, setPageState] = useControlled({\n controlled: pageProp,\n default: defaultPage,\n name: \"Pagination\",\n state: \"page\",\n });\n\n const onPageChange = useCallback(\n (event: SyntheticEvent, page: number) => {\n setPageState(page);\n onPageChangeProp && onPageChangeProp(event, page);\n },\n [onPageChangeProp, setPageState]\n );\n\n const contextValue: PaginationContext = useMemo(\n () => ({\n page: pageState,\n count,\n onPageChange,\n }),\n [pageState, count, onPageChange]\n );\n\n const { announce } = useAriaAnnouncer();\n const mounted = useRef<boolean>(false);\n\n useEffect(() => {\n if (mounted.current) {\n announce(`Page ${pageState}`);\n } else {\n mounted.current = true;\n }\n }, [announce, pageState]);\n\n if (count < 2) {\n return null;\n }\n\n return (\n <Provider value={contextValue}>\n <nav\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...restProps}\n >\n {children}\n </nav>\n </Provider>\n );\n }\n);\n"],"names":["Pagination","paginationCss"],"mappings":";;;;;;;;;AAkBA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAElD,MAAM,EAAE,UAAa,GAAA,iBAAA,CAAA;AAqBd,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,CAAA;AAAA,IACd,IAAM,EAAA,QAAA;AAAA,IACN,YAAc,EAAA,gBAAA;AAAA,IACX,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,aAAc,CAAA;AAAA,MAC9C,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,WAAA;AAAA,MACT,IAAM,EAAA,YAAA;AAAA,MACN,KAAO,EAAA,MAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAA,MAAM,YAAe,GAAA,WAAA;AAAA,MACnB,CAAC,OAAuB,IAAiB,KAAA;AACvC,QAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,QAAoB,gBAAA,IAAA,gBAAA,CAAiB,OAAO,IAAI,CAAA,CAAA;AAAA,OAClD;AAAA,MACA,CAAC,kBAAkB,YAAY,CAAA;AAAA,KACjC,CAAA;AAEA,IAAA,MAAM,YAAkC,GAAA,OAAA;AAAA,MACtC,OAAO;AAAA,QACL,IAAM,EAAA,SAAA;AAAA,QACN,KAAA;AAAA,QACA,YAAA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,SAAW,EAAA,KAAA,EAAO,YAAY,CAAA;AAAA,KACjC,CAAA;AAEA,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,gBAAiB,EAAA,CAAA;AACtC,IAAM,MAAA,OAAA,GAAU,OAAgB,KAAK,CAAA,CAAA;AAErC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,QAAA,QAAA,CAAS,QAAQ,SAAW,CAAA,CAAA,CAAA,CAAA;AAAA,OACvB,MAAA;AACL,QAAA,OAAA,CAAQ,OAAU,GAAA,IAAA,CAAA;AAAA,OACpB;AAAA,KACC,EAAA,CAAC,QAAU,EAAA,SAAS,CAAC,CAAA,CAAA;AAExB,IAAA,IAAI,QAAQ,CAAG,EAAA;AACb,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MAAS,KAAO,EAAA,YAAA;AAAA,MACf,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { createContext } from 'react';
|
|
2
|
-
|
|
3
|
-
const paginationContext = createContext({
|
|
4
|
-
page: 0,
|
|
5
|
-
count: 0,
|
|
6
|
-
onPageChange: () => void 0
|
|
7
|
-
});
|
|
8
|
-
if (process.env.NODE_ENV !== "production") {
|
|
9
|
-
paginationContext.displayName = "PaginationContext";
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export { paginationContext };
|
|
13
|
-
//# sourceMappingURL=PaginationContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationContext.js","sources":["../src/pagination/PaginationContext.ts"],"sourcesContent":["import { SyntheticEvent, createContext } from \"react\";\n\nexport interface PaginationContext {\n page: number;\n count: number;\n onPageChange: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const paginationContext = createContext<PaginationContext>({\n page: 0,\n count: 0,\n onPageChange: () => undefined,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n paginationContext.displayName = \"PaginationContext\";\n}\n"],"names":[],"mappings":";;AAQO,MAAM,oBAAoB,aAAiC,CAAA;AAAA,EAChE,IAAM,EAAA,CAAA;AAAA,EACN,KAAO,EAAA,CAAA;AAAA,EACP,cAAc,MAAM,KAAA,CAAA;AACtB,CAAC,EAAA;AAED,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,iBAAA,CAAkB,WAAc,GAAA,mBAAA,CAAA;AAClC;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = ".saltPaginator {\n display: flex;\n flex-wrap: nowrap;\n}\n\n.saltPaginator-arrowButton-previous {\n --saltButton-margin: 0 var(--salt-spacing-100) 0 0;\n}\n\n.saltPaginator-arrowButton-next {\n --saltButton-margin: 0 0 0 var(--salt-spacing-100);\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=Paginator.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Paginator.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { clsx } from 'clsx';
|
|
3
|
-
import { forwardRef } from 'react';
|
|
4
|
-
import { makePrefixer, Button } from '@salt-ds/core';
|
|
5
|
-
import { ChevronLeftIcon, ChevronRightIcon } from '@salt-ds/icons';
|
|
6
|
-
import { PageRanges } from './PageRanges.js';
|
|
7
|
-
import { usePaginationContext } from './usePaginationContext.js';
|
|
8
|
-
import { useWindow } from '@salt-ds/window';
|
|
9
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
10
|
-
import css_248z from './Paginator.css.js';
|
|
11
|
-
|
|
12
|
-
const withBaseName = makePrefixer("saltPaginator");
|
|
13
|
-
const Paginator = forwardRef(
|
|
14
|
-
function Paginator2({ className, boundaryCount, siblingCount, ...restProps }, ref) {
|
|
15
|
-
const targetWindow = useWindow();
|
|
16
|
-
useComponentCssInjection({
|
|
17
|
-
testId: "salt-paginator",
|
|
18
|
-
css: css_248z,
|
|
19
|
-
window: targetWindow
|
|
20
|
-
});
|
|
21
|
-
const { count, page, onPageChange } = usePaginationContext();
|
|
22
|
-
const onPreviousPage = (event) => {
|
|
23
|
-
onPageChange(event, Math.max(1, page - 1));
|
|
24
|
-
};
|
|
25
|
-
const onNextPage = (event) => {
|
|
26
|
-
onPageChange(event, Math.min(page + 1, count));
|
|
27
|
-
};
|
|
28
|
-
const isOnFirstPage = page === 1;
|
|
29
|
-
const isOnLastPage = page === count;
|
|
30
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
31
|
-
className: clsx(withBaseName(), className),
|
|
32
|
-
...restProps,
|
|
33
|
-
ref,
|
|
34
|
-
children: [
|
|
35
|
-
/* @__PURE__ */ jsx(Button, {
|
|
36
|
-
variant: "secondary",
|
|
37
|
-
"aria-label": "Previous Page",
|
|
38
|
-
onClick: onPreviousPage,
|
|
39
|
-
disabled: isOnFirstPage,
|
|
40
|
-
className: withBaseName("arrowButton-previous"),
|
|
41
|
-
children: /* @__PURE__ */ jsx(ChevronLeftIcon, {
|
|
42
|
-
"aria-hidden": true
|
|
43
|
-
})
|
|
44
|
-
}),
|
|
45
|
-
/* @__PURE__ */ jsx(PageRanges, {
|
|
46
|
-
siblingCount,
|
|
47
|
-
boundaryCount
|
|
48
|
-
}),
|
|
49
|
-
/* @__PURE__ */ jsx(Button, {
|
|
50
|
-
variant: "secondary",
|
|
51
|
-
"aria-label": "Next Page",
|
|
52
|
-
onClick: onNextPage,
|
|
53
|
-
disabled: isOnLastPage,
|
|
54
|
-
className: withBaseName("arrowButton-next"),
|
|
55
|
-
children: /* @__PURE__ */ jsx(ChevronRightIcon, {
|
|
56
|
-
"aria-hidden": true
|
|
57
|
-
})
|
|
58
|
-
})
|
|
59
|
-
]
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
);
|
|
63
|
-
|
|
64
|
-
export { Paginator };
|
|
65
|
-
//# sourceMappingURL=Paginator.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Paginator.js","sources":["../src/pagination/Paginator.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, MouseEventHandler } from \"react\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { PageRanges } from \"./PageRanges\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport paginatorCss from \"./Paginator.css\";\n\nconst withBaseName = makePrefixer(\"saltPaginator\");\n\nexport interface PaginatorProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Number of pages next to the arrow buttons when page range is truncated.\n */\n boundaryCount?: number;\n /**\n * Number of pages on each side of the current page when page range is truncated.\n */\n siblingCount?: number;\n}\n\nexport const Paginator = forwardRef<HTMLDivElement, PaginatorProps>(\n function Paginator(\n { className, boundaryCount, siblingCount, ...restProps },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-paginator\",\n css: paginatorCss,\n window: targetWindow,\n });\n\n const { count, page, onPageChange } = usePaginationContext();\n\n const onPreviousPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, Math.max(1, page - 1));\n };\n\n const onNextPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, Math.min(page + 1, count));\n };\n\n const isOnFirstPage = page === 1;\n const isOnLastPage = page === count;\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n <Button\n variant=\"secondary\"\n aria-label=\"Previous Page\"\n onClick={onPreviousPage}\n disabled={isOnFirstPage}\n className={withBaseName(\"arrowButton-previous\")}\n >\n <ChevronLeftIcon aria-hidden />\n </Button>\n <PageRanges siblingCount={siblingCount} boundaryCount={boundaryCount} />\n <Button\n variant=\"secondary\"\n aria-label=\"Next Page\"\n onClick={onNextPage}\n disabled={isOnLastPage}\n className={withBaseName(\"arrowButton-next\")}\n >\n <ChevronRightIcon aria-hidden />\n </Button>\n </div>\n );\n }\n);\n"],"names":["Paginator","paginatorCss"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAa1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,WACP,EAAE,SAAA,EAAW,eAAe,YAAiB,EAAA,GAAA,SAAA,IAC7C,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiB,oBAAqB,EAAA,CAAA;AAE3D,IAAM,MAAA,cAAA,GAAuD,CAAC,KAAU,KAAA;AACtE,MAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,GAAO,CAAC,CAAC,CAAA,CAAA;AAAA,KAC3C,CAAA;AAEA,IAAM,MAAA,UAAA,GAAmD,CAAC,KAAU,KAAA;AAClE,MAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,IAAO,GAAA,CAAA,EAAG,KAAK,CAAC,CAAA,CAAA;AAAA,KAC/C,CAAA;AAEA,IAAA,MAAM,gBAAgB,IAAS,KAAA,CAAA,CAAA;AAC/B,IAAA,MAAM,eAAe,IAAS,KAAA,KAAA,CAAA;AAE9B,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,MAC9D,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,YAAW,EAAA,eAAA;AAAA,UACX,OAAS,EAAA,cAAA;AAAA,UACT,QAAU,EAAA,aAAA;AAAA,UACV,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,UAE9C,QAAC,kBAAA,GAAA,CAAA,eAAA,EAAA;AAAA,YAAgB,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,SAC/B,CAAA;AAAA,wBACC,GAAA,CAAA,UAAA,EAAA;AAAA,UAAW,YAAA;AAAA,UAA4B,aAAA;AAAA,SAA8B,CAAA;AAAA,wBACrE,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,YAAW,EAAA,WAAA;AAAA,UACX,OAAS,EAAA,UAAA;AAAA,UACT,QAAU,EAAA,YAAA;AAAA,UACV,SAAA,EAAW,aAAa,kBAAkB,CAAA;AAAA,UAE1C,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,YAAiB,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,SAChC,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
function usePagination(page, count, boundaryCount, siblingCount) {
|
|
2
|
-
const totalButtonsVisible = 2 * (boundaryCount + siblingCount) + 3;
|
|
3
|
-
const isEnoughSpace = totalButtonsVisible >= count;
|
|
4
|
-
const isLeftEllipsis = !isEnoughSpace && page - boundaryCount - siblingCount > 2;
|
|
5
|
-
const isRightEllipsis = !isEnoughSpace && page + boundaryCount + siblingCount + 1 < count;
|
|
6
|
-
const leftPages = isLeftEllipsis ? [1, boundaryCount] : void 0;
|
|
7
|
-
const rightPages = isRightEllipsis ? [count - boundaryCount + 1, count] : void 0;
|
|
8
|
-
let middlePages;
|
|
9
|
-
if (!isLeftEllipsis) {
|
|
10
|
-
middlePages = [
|
|
11
|
-
1,
|
|
12
|
-
isRightEllipsis ? boundaryCount + 2 + 2 * siblingCount : count
|
|
13
|
-
];
|
|
14
|
-
} else if (!isRightEllipsis) {
|
|
15
|
-
middlePages = [count - boundaryCount - 1 - 2 * siblingCount, count];
|
|
16
|
-
} else {
|
|
17
|
-
middlePages = [page - siblingCount, page + siblingCount];
|
|
18
|
-
}
|
|
19
|
-
return [leftPages, middlePages, rightPages];
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export { usePagination };
|
|
23
|
-
//# sourceMappingURL=usePagination.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"usePagination.js","sources":["../src/pagination/usePagination.ts"],"sourcesContent":["export type PageRange = [number, number];\n\nexport function usePagination(\n page: number,\n count: number,\n boundaryCount: number,\n siblingCount: number\n) {\n const totalButtonsVisible = 2 * (boundaryCount + siblingCount) + 3;\n const isEnoughSpace = totalButtonsVisible >= count;\n\n const isLeftEllipsis =\n !isEnoughSpace && page - boundaryCount - siblingCount > 2;\n\n const isRightEllipsis =\n !isEnoughSpace && page + boundaryCount + siblingCount + 1 < count;\n\n const leftPages = isLeftEllipsis\n ? ([1, boundaryCount] as PageRange)\n : undefined;\n\n const rightPages = isRightEllipsis\n ? ([count - boundaryCount + 1, count] as PageRange)\n : undefined;\n\n let middlePages: PageRange;\n\n if (!isLeftEllipsis) {\n middlePages = [\n 1,\n isRightEllipsis ? boundaryCount + 2 + 2 * siblingCount : count,\n ];\n } else if (!isRightEllipsis) {\n middlePages = [count - boundaryCount - 1 - 2 * siblingCount, count];\n } else {\n middlePages = [page - siblingCount, page + siblingCount];\n }\n\n return [leftPages, middlePages, rightPages] as const;\n}\n"],"names":[],"mappings":"AAEO,SAAS,aACd,CAAA,IAAA,EACA,KACA,EAAA,aAAA,EACA,YACA,EAAA;AACA,EAAM,MAAA,mBAAA,GAAsB,CAAK,IAAA,aAAA,GAAgB,YAAgB,CAAA,GAAA,CAAA,CAAA;AACjE,EAAA,MAAM,gBAAgB,mBAAuB,IAAA,KAAA,CAAA;AAE7C,EAAA,MAAM,cACJ,GAAA,CAAC,aAAiB,IAAA,IAAA,GAAO,gBAAgB,YAAe,GAAA,CAAA,CAAA;AAE1D,EAAA,MAAM,kBACJ,CAAC,aAAA,IAAiB,IAAO,GAAA,aAAA,GAAgB,eAAe,CAAI,GAAA,KAAA,CAAA;AAE9D,EAAA,MAAM,SAAY,GAAA,cAAA,GACb,CAAC,CAAA,EAAG,aAAa,CAClB,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,MAAM,aAAa,eACd,GAAA,CAAC,QAAQ,aAAgB,GAAA,CAAA,EAAG,KAAK,CAClC,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAI,IAAA,WAAA,CAAA;AAEJ,EAAA,IAAI,CAAC,cAAgB,EAAA;AACnB,IAAc,WAAA,GAAA;AAAA,MACZ,CAAA;AAAA,MACA,eAAkB,GAAA,aAAA,GAAgB,CAAI,GAAA,CAAA,GAAI,YAAe,GAAA,KAAA;AAAA,KAC3D,CAAA;AAAA,GACF,MAAA,IAAW,CAAC,eAAiB,EAAA;AAC3B,IAAA,WAAA,GAAc,CAAC,KAAQ,GAAA,aAAA,GAAgB,CAAI,GAAA,CAAA,GAAI,cAAc,KAAK,CAAA,CAAA;AAAA,GAC7D,MAAA;AACL,IAAA,WAAA,GAAc,CAAC,IAAA,GAAO,YAAc,EAAA,IAAA,GAAO,YAAY,CAAA,CAAA;AAAA,GACzD;AAEA,EAAO,OAAA,CAAC,SAAW,EAAA,WAAA,EAAa,UAAU,CAAA,CAAA;AAC5C;;;;"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { useContext } from 'react';
|
|
2
|
-
import { paginationContext } from './PaginationContext.js';
|
|
3
|
-
|
|
4
|
-
const usePaginationContext = () => {
|
|
5
|
-
const context = useContext(paginationContext);
|
|
6
|
-
if (process.env.NODE_ENV !== "production") {
|
|
7
|
-
if (!context) {
|
|
8
|
-
console.error(`usePaginationContext should be used inside of Pagination`);
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
return context;
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
export { usePaginationContext };
|
|
15
|
-
//# sourceMappingURL=usePaginationContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"usePaginationContext.js","sources":["../src/pagination/usePaginationContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { paginationContext } from \"./PaginationContext\";\n\nexport const usePaginationContext = () => {\n const context = useContext(paginationContext);\n if (process.env.NODE_ENV !== \"production\") {\n if (!context) {\n console.error(`usePaginationContext should be used inside of Pagination`);\n }\n }\n return context;\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,uBAAuB,MAAM;AACxC,EAAM,MAAA,OAAA,GAAU,WAAW,iBAAiB,CAAA,CAAA;AAC5C,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA,CAAQ,MAAM,CAA0D,wDAAA,CAAA,CAAA,CAAA;AAAA,KAC1E;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = "/* Style applied to the root element */\n.saltScrim {\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n bottom: 0;\n height: 100%;\n display: flex;\n z-index: calc(var(--salt-zIndex-drawer) - 1);\n position: absolute;\n align-items: center;\n justify-content: center;\n background: var(--saltScrim-background, var(--salt-overlayable-background));\n -webkit-tap-highlight-color: transparent;\n}\n\n.saltScrim:focus {\n outline: none;\n}\n\n/* Style applied to the root element when fixed={true} */\n.saltScrim-fixed {\n position: fixed;\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=Scrim.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Scrim.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/dist-es/scrim/Scrim.js
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { clsx } from 'clsx';
|
|
3
|
-
import { forwardRef } from 'react';
|
|
4
|
-
import { makePrefixer } from '@salt-ds/core';
|
|
5
|
-
import { useWindow } from '@salt-ds/window';
|
|
6
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
7
|
-
import css_248z from './Scrim.css.js';
|
|
8
|
-
|
|
9
|
-
const withBaseName = makePrefixer("saltScrim");
|
|
10
|
-
const Scrim = forwardRef(function Scrim2({ className, children, fixed = false, open = true, ...rest }, ref) {
|
|
11
|
-
const targetWindow = useWindow();
|
|
12
|
-
useComponentCssInjection({
|
|
13
|
-
testId: "salt-scrim",
|
|
14
|
-
css: css_248z,
|
|
15
|
-
window: targetWindow
|
|
16
|
-
});
|
|
17
|
-
if (!open) {
|
|
18
|
-
return null;
|
|
19
|
-
}
|
|
20
|
-
return /* @__PURE__ */ jsx("div", {
|
|
21
|
-
className: clsx(
|
|
22
|
-
withBaseName(),
|
|
23
|
-
{
|
|
24
|
-
[withBaseName("fixed")]: fixed
|
|
25
|
-
},
|
|
26
|
-
className
|
|
27
|
-
),
|
|
28
|
-
"data-testid": "scrim",
|
|
29
|
-
ref,
|
|
30
|
-
...rest,
|
|
31
|
-
children
|
|
32
|
-
});
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
export { Scrim };
|
|
36
|
-
//# sourceMappingURL=Scrim.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport scrimCss from \"./Scrim.css\";\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nexport interface ScrimProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true` the scrim is bound to the document viewport.\n * The default value of this prop is false, and the default behavior is for Scrim to be bound to its parent container (nearest positioned ancestor).\n */\n fixed?: boolean;\n /**\n * If `true` the scrim is shown.\n */\n open?: boolean;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n { className, children, fixed = false, open = true, ...rest },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-scrim\",\n css: scrimCss,\n window: targetWindow,\n });\n\n if (!open) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"fixed\")]: fixed,\n },\n className\n )}\n data-testid=\"scrim\"\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n});\n"],"names":["Scrim","scrimCss"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AActC,MAAM,KAAQ,GAAA,UAAA,CAAuC,SAASA,MAAAA,CACnE,EAAE,SAAA,EAAW,QAAU,EAAA,KAAA,GAAQ,KAAO,EAAA,IAAA,GAAO,IAAS,EAAA,GAAA,IAAA,IACtD,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,OAC3B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,OAAA;AAAA,IACZ,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
2
|
-
import { NavigationItemProps } from "./NavigationItem";
|
|
3
|
-
interface ConditionalWrapperProps extends Pick<NavigationItemProps, "parent" | "expanded" | "onExpand" | "active" | "href" | "onClick"> {
|
|
4
|
-
children: ReactNode;
|
|
5
|
-
className: string;
|
|
6
|
-
}
|
|
7
|
-
export declare const ConditionalWrapper: ({ children, className, parent, expanded, onExpand, active, href, }: ConditionalWrapperProps) => JSX.Element;
|
|
8
|
-
export {};
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef, MouseEventHandler } from "react";
|
|
2
|
-
export interface NavigationItemProps extends ComponentPropsWithoutRef<"div"> {
|
|
3
|
-
/**
|
|
4
|
-
* Whether the navigation item is active.
|
|
5
|
-
*/
|
|
6
|
-
active?: boolean;
|
|
7
|
-
/**
|
|
8
|
-
* Whether the nested group is collapsed and there is an active nested item within it.
|
|
9
|
-
*/
|
|
10
|
-
blurActive?: boolean;
|
|
11
|
-
/**
|
|
12
|
-
* Whether the navigation item is expanded.
|
|
13
|
-
*/
|
|
14
|
-
expanded?: boolean;
|
|
15
|
-
/**
|
|
16
|
-
* Level of nesting.
|
|
17
|
-
*/
|
|
18
|
-
level?: number;
|
|
19
|
-
/**
|
|
20
|
-
* The orientation of the navigation item.
|
|
21
|
-
*/
|
|
22
|
-
orientation?: "horizontal" | "vertical";
|
|
23
|
-
/**
|
|
24
|
-
* Whether the navigation item is a parent with nested items.
|
|
25
|
-
*/
|
|
26
|
-
parent?: boolean;
|
|
27
|
-
/**
|
|
28
|
-
* Action to be triggered when the navigation item is expanded.
|
|
29
|
-
*/
|
|
30
|
-
onExpand?: MouseEventHandler<HTMLButtonElement>;
|
|
31
|
-
/**
|
|
32
|
-
* Href to be passed to the Link element.
|
|
33
|
-
*/
|
|
34
|
-
href?: string;
|
|
35
|
-
}
|
|
36
|
-
export declare const NavigationItem: import("react").ForwardRefExoticComponent<NavigationItemProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./NavigationItem";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const CompactPaginator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { HTMLAttributes, Ref } from "react";
|
|
2
|
-
export interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {
|
|
3
|
-
/**
|
|
4
|
-
* Input label.
|
|
5
|
-
*/
|
|
6
|
-
label?: string;
|
|
7
|
-
/**
|
|
8
|
-
* Optional ref for the input component
|
|
9
|
-
*/
|
|
10
|
-
inputRef?: Ref<HTMLInputElement>;
|
|
11
|
-
/**
|
|
12
|
-
* Change input variant.
|
|
13
|
-
*/
|
|
14
|
-
inputVariant?: "primary" | "secondary";
|
|
15
|
-
}
|
|
16
|
-
export declare const GoToInput: import("react").ForwardRefExoticComponent<GoToInputProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { HTMLAttributes, SyntheticEvent } from "react";
|
|
2
|
-
export interface PaginationProps extends HTMLAttributes<HTMLElement> {
|
|
3
|
-
/**
|
|
4
|
-
* Number of pages.
|
|
5
|
-
*/
|
|
6
|
-
count: number;
|
|
7
|
-
/**
|
|
8
|
-
* Current/active page.
|
|
9
|
-
*/
|
|
10
|
-
page?: number;
|
|
11
|
-
/**
|
|
12
|
-
* Default current/active page.
|
|
13
|
-
*/
|
|
14
|
-
defaultPage?: number;
|
|
15
|
-
/**
|
|
16
|
-
* Callback function triggered when current page changed.
|
|
17
|
-
*/
|
|
18
|
-
onPageChange?: (event: SyntheticEvent, page: number) => void;
|
|
19
|
-
}
|
|
20
|
-
export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { HTMLAttributes } from "react";
|
|
2
|
-
export interface PaginatorProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
-
/**
|
|
4
|
-
* Number of pages next to the arrow buttons when page range is truncated.
|
|
5
|
-
*/
|
|
6
|
-
boundaryCount?: number;
|
|
7
|
-
/**
|
|
8
|
-
* Number of pages on each side of the current page when page range is truncated.
|
|
9
|
-
*/
|
|
10
|
-
siblingCount?: number;
|
|
11
|
-
}
|
|
12
|
-
export declare const Paginator: import("react").ForwardRefExoticComponent<PaginatorProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const usePaginationContext: () => import("./PaginationContext").PaginationContext;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef } from "react";
|
|
2
|
-
export interface ScrimProps extends ComponentPropsWithoutRef<"div"> {
|
|
3
|
-
/**
|
|
4
|
-
* If `true` the scrim is bound to the document viewport.
|
|
5
|
-
* The default value of this prop is false, and the default behavior is for Scrim to be bound to its parent container (nearest positioned ancestor).
|
|
6
|
-
*/
|
|
7
|
-
fixed?: boolean;
|
|
8
|
-
/**
|
|
9
|
-
* If `true` the scrim is shown.
|
|
10
|
-
*/
|
|
11
|
-
open?: boolean;
|
|
12
|
-
}
|
|
13
|
-
export declare const Scrim: import("react").ForwardRefExoticComponent<ScrimProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./Scrim";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function preventFocusOthers(originalTarget: HTMLElement | null, tabbableSelector: string, parentNode: HTMLElement): () => void;
|