@salt-ds/lab 1.0.0-alpha.25 → 1.0.0-alpha.26
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 +86 -121
- package/dist-cjs/combo-box-next/ComboBoxNext.js +1 -1
- package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -1
- package/dist-cjs/dropdown-next/DropdownNext.js +1 -2
- package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -1
- package/dist-cjs/index.js +4 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/pagination/CompactInput.css.js +6 -0
- package/dist-cjs/pagination/CompactInput.css.js.map +1 -0
- package/dist-cjs/pagination/CompactInput.js +31 -35
- package/dist-cjs/pagination/CompactInput.js.map +1 -1
- package/dist-cjs/pagination/CompactPaginator.css.js +6 -0
- package/dist-cjs/pagination/CompactPaginator.css.js.map +1 -0
- package/dist-cjs/pagination/CompactPaginator.js +76 -0
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -0
- package/dist-cjs/pagination/GoToInput.css.js +6 -0
- package/dist-cjs/pagination/GoToInput.css.js.map +1 -0
- package/dist-cjs/pagination/GoToInput.js +37 -59
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pagination/PageButton.css.js +6 -0
- package/dist-cjs/pagination/PageButton.css.js.map +1 -0
- package/dist-cjs/pagination/PageButton.js +34 -33
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/PageRanges.css.js +6 -0
- package/dist-cjs/pagination/PageRanges.css.js.map +1 -0
- package/dist-cjs/pagination/PageRanges.js +73 -0
- package/dist-cjs/pagination/PageRanges.js.map +1 -0
- package/dist-cjs/pagination/Pagination.css.js +1 -1
- package/dist-cjs/pagination/Pagination.js +21 -38
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/PaginationContext.js +1 -6
- package/dist-cjs/pagination/PaginationContext.js.map +1 -1
- package/dist-cjs/pagination/Paginator.css.js +6 -0
- package/dist-cjs/pagination/Paginator.css.js.map +1 -0
- package/dist-cjs/pagination/Paginator.js +33 -43
- package/dist-cjs/pagination/Paginator.js.map +1 -1
- package/dist-cjs/pagination/usePaginationContext.js +1 -1
- package/dist-cjs/pagination/usePaginationContext.js.map +1 -1
- package/dist-cjs/pill-next/PillNext.css.js +1 -1
- package/dist-cjs/pill-next/PillNext.js +26 -31
- package/dist-cjs/pill-next/PillNext.js.map +1 -1
- package/dist-es/combo-box-next/ComboBoxNext.js +1 -1
- package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -1
- package/dist-es/dropdown-next/DropdownNext.js +1 -2
- package/dist-es/dropdown-next/DropdownNext.js.map +1 -1
- package/dist-es/index.js +2 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/pagination/CompactInput.css.js +4 -0
- package/dist-es/pagination/CompactInput.css.js.map +1 -0
- package/dist-es/pagination/CompactInput.js +32 -36
- package/dist-es/pagination/CompactInput.js.map +1 -1
- package/dist-es/pagination/CompactPaginator.css.js +4 -0
- package/dist-es/pagination/CompactPaginator.css.js.map +1 -0
- package/dist-es/pagination/CompactPaginator.js +72 -0
- package/dist-es/pagination/CompactPaginator.js.map +1 -0
- package/dist-es/pagination/GoToInput.css.js +4 -0
- package/dist-es/pagination/GoToInput.css.js.map +1 -0
- package/dist-es/pagination/GoToInput.js +40 -62
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pagination/PageButton.css.js +4 -0
- package/dist-es/pagination/PageButton.css.js.map +1 -0
- package/dist-es/pagination/PageButton.js +34 -33
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/PageRanges.css.js +4 -0
- package/dist-es/pagination/PageRanges.css.js.map +1 -0
- package/dist-es/pagination/PageRanges.js +69 -0
- package/dist-es/pagination/PageRanges.js.map +1 -0
- package/dist-es/pagination/Pagination.css.js +1 -1
- package/dist-es/pagination/Pagination.js +20 -37
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/PaginationContext.js +1 -6
- package/dist-es/pagination/PaginationContext.js.map +1 -1
- package/dist-es/pagination/Paginator.css.js +4 -0
- package/dist-es/pagination/Paginator.css.js.map +1 -0
- package/dist-es/pagination/Paginator.js +32 -42
- package/dist-es/pagination/Paginator.js.map +1 -1
- package/dist-es/pagination/usePaginationContext.js +1 -1
- package/dist-es/pagination/usePaginationContext.js.map +1 -1
- package/dist-es/pill-next/PillNext.css.js +1 -1
- package/dist-es/pill-next/PillNext.js +28 -33
- package/dist-es/pill-next/PillNext.js.map +1 -1
- package/dist-types/combo-box-next/useComboBox.d.ts +2 -2
- package/dist-types/combo-box-next/useComboboxPortal.d.ts +2 -2
- package/dist-types/dialog/useDialog.d.ts +6 -7
- package/dist-types/drawer/useDrawer.d.ts +6 -7
- package/dist-types/dropdown-next/useDropdownNext.d.ts +12 -4
- package/dist-types/pagination/CompactInput.d.ts +2 -8
- package/dist-types/pagination/CompactPaginator.d.ts +1 -0
- package/dist-types/pagination/GoToInput.d.ts +13 -4
- package/dist-types/pagination/PageButton.d.ts +2 -3
- package/dist-types/pagination/PageRanges.d.ts +5 -0
- package/dist-types/pagination/Pagination.d.ts +15 -4
- package/dist-types/pagination/PaginationContext.d.ts +2 -4
- package/dist-types/pagination/Paginator.d.ts +6 -3
- package/dist-types/pagination/index.d.ts +2 -0
- package/dist-types/pill-next/PillNext.d.ts +1 -4
- package/dist-types/tabs/drag-drop/drag-utils.d.ts +6 -6
- package/package.json +3 -3
- package/dist-cjs/pagination/ArrowButton.js +0 -64
- package/dist-cjs/pagination/ArrowButton.js.map +0 -1
- package/dist-cjs/pagination/CompactControls.js +0 -38
- package/dist-cjs/pagination/CompactControls.js.map +0 -1
- package/dist-cjs/pagination/RegularControls.js +0 -58
- package/dist-cjs/pagination/RegularControls.js.map +0 -1
- package/dist-cjs/pagination/utils.js +0 -10
- package/dist-cjs/pagination/utils.js.map +0 -1
- package/dist-es/pagination/ArrowButton.js +0 -60
- package/dist-es/pagination/ArrowButton.js.map +0 -1
- package/dist-es/pagination/CompactControls.js +0 -34
- package/dist-es/pagination/CompactControls.js.map +0 -1
- package/dist-es/pagination/RegularControls.js +0 -54
- package/dist-es/pagination/RegularControls.js.map +0 -1
- package/dist-es/pagination/utils.js +0 -6
- package/dist-es/pagination/utils.js.map +0 -1
- package/dist-types/pagination/ArrowButton.d.ts +0 -7
- package/dist-types/pagination/CompactControls.d.ts +0 -8
- package/dist-types/pagination/RegularControls.d.ts +0 -8
- package/dist-types/pagination/utils.d.ts +0 -1
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var core = require('@salt-ds/core');
|
|
9
|
+
var icons = require('@salt-ds/icons');
|
|
10
|
+
var PageButton = require('./PageButton.js');
|
|
11
|
+
var usePaginationContext = require('./usePaginationContext.js');
|
|
12
|
+
var window = require('@salt-ds/window');
|
|
13
|
+
var styles = require('@salt-ds/styles');
|
|
14
|
+
var CompactPaginator$1 = require('./CompactPaginator.css.js');
|
|
15
|
+
|
|
16
|
+
const withBaseName = core.makePrefixer("saltCompactPaginator");
|
|
17
|
+
const CompactPaginator = React.forwardRef(function CompactPaginator2({ children, className, ...restProps }, ref) {
|
|
18
|
+
const targetWindow = window.useWindow();
|
|
19
|
+
styles.useComponentCssInjection({
|
|
20
|
+
testId: "salt-compact-paginator",
|
|
21
|
+
css: CompactPaginator$1,
|
|
22
|
+
window: targetWindow
|
|
23
|
+
});
|
|
24
|
+
const { count, page, onPageChange } = usePaginationContext.usePaginationContext();
|
|
25
|
+
const onPreviousPage = (event) => {
|
|
26
|
+
onPageChange(event, Math.max(1, page - 1));
|
|
27
|
+
};
|
|
28
|
+
const onNextPage = (event) => {
|
|
29
|
+
onPageChange(event, Math.min(page + 1, count));
|
|
30
|
+
};
|
|
31
|
+
const isOnFirstPage = page === 1;
|
|
32
|
+
const isOnLastPage = page === count;
|
|
33
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
34
|
+
className: clsx.clsx(withBaseName(), className),
|
|
35
|
+
...restProps,
|
|
36
|
+
ref,
|
|
37
|
+
children: [
|
|
38
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.Button, {
|
|
39
|
+
variant: "secondary",
|
|
40
|
+
"aria-label": "Previous Page",
|
|
41
|
+
onClick: onPreviousPage,
|
|
42
|
+
disabled: isOnFirstPage,
|
|
43
|
+
className: withBaseName("arrowButton"),
|
|
44
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronLeftIcon, {
|
|
45
|
+
"aria-hidden": true
|
|
46
|
+
})
|
|
47
|
+
}),
|
|
48
|
+
children ? children : /* @__PURE__ */ jsxRuntime.jsx(PageButton.PageButton, {
|
|
49
|
+
page,
|
|
50
|
+
disabled: true
|
|
51
|
+
}),
|
|
52
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.Text, {
|
|
53
|
+
as: "span",
|
|
54
|
+
variant: "secondary",
|
|
55
|
+
children: "of"
|
|
56
|
+
}),
|
|
57
|
+
/* @__PURE__ */ jsxRuntime.jsx(PageButton.PageButton, {
|
|
58
|
+
page: count,
|
|
59
|
+
disabled: isOnLastPage
|
|
60
|
+
}),
|
|
61
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.Button, {
|
|
62
|
+
variant: "secondary",
|
|
63
|
+
"aria-label": "Next Page",
|
|
64
|
+
onClick: onNextPage,
|
|
65
|
+
disabled: isOnLastPage,
|
|
66
|
+
className: withBaseName("arrowButton"),
|
|
67
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {
|
|
68
|
+
"aria-hidden": true
|
|
69
|
+
})
|
|
70
|
+
})
|
|
71
|
+
]
|
|
72
|
+
});
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
exports.CompactPaginator = CompactPaginator;
|
|
76
|
+
//# sourceMappingURL=CompactPaginator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CompactPaginator.js","sources":["../src/pagination/CompactPaginator.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from \"react\";\nimport { clsx } from \"clsx\";\nimport { Button, Text, makePrefixer } from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { PageButton } from \"./PageButton\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport compactPaginatorCss from \"./CompactPaginator.css\";\n\nconst withBaseName = makePrefixer(\"saltCompactPaginator\");\n\nexport const CompactPaginator = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(function CompactPaginator({ children, className, ...restProps }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-compact-paginator\",\n css: compactPaginatorCss,\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\")}\n >\n <ChevronLeftIcon aria-hidden />\n </Button>\n {children ? children : <PageButton page={page} disabled />}\n <Text as=\"span\" variant=\"secondary\">\n of\n </Text>\n <PageButton page={count} disabled={isOnLastPage} />\n <Button\n variant=\"secondary\"\n aria-label=\"Next Page\"\n onClick={onNextPage}\n disabled={isOnLastPage}\n className={withBaseName(\"arrowButton\")}\n >\n <ChevronRightIcon aria-hidden />\n </Button>\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","CompactPaginator","useWindow","useComponentCssInjection","compactPaginatorCss","usePaginationContext","jsxs","clsx","jsx","Button","ChevronLeftIcon","PageButton","Text","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA,CAAA;AAE3C,MAAA,gBAAA,GAAmBC,iBAG9B,SAASC,iBAAAA,CAAiB,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EAAG,GAAK,EAAA;AACtE,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiBC,yCAAqB,EAAA,CAAA;AAE3D,EAAM,MAAA,cAAA,GAAuD,CAAC,KAAU,KAAA;AACtE,IAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,GAAO,CAAC,CAAC,CAAA,CAAA;AAAA,GAC3C,CAAA;AAEA,EAAM,MAAA,UAAA,GAAmD,CAAC,KAAU,KAAA;AAClE,IAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,IAAO,GAAA,CAAA,EAAG,KAAK,CAAC,CAAA,CAAA;AAAA,GAC/C,CAAA;AAEA,EAAA,MAAM,gBAAgB,IAAS,KAAA,CAAA,CAAA;AAC/B,EAAA,MAAM,eAAe,IAAS,KAAA,KAAA,CAAA;AAE9B,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAC9D,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,WAAA,EAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACR,YAAW,EAAA,eAAA;AAAA,QACX,OAAS,EAAA,cAAA;AAAA,QACT,QAAU,EAAA,aAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAC,kBAAAD,cAAA,CAAAE,qBAAA,EAAA;AAAA,UAAgB,aAAW,EAAA,IAAA;AAAA,SAAC,CAAA;AAAA,OAC/B,CAAA;AAAA,MACC,QAAA,GAAW,2BAAYF,cAAA,CAAAG,qBAAA,EAAA;AAAA,QAAW,IAAA;AAAA,QAAY,QAAQ,EAAA,IAAA;AAAA,OAAC,CAAA;AAAA,sBACvDH,cAAA,CAAAI,SAAA,EAAA;AAAA,QAAK,EAAG,EAAA,MAAA;AAAA,QAAO,OAAQ,EAAA,WAAA;AAAA,QAAY,QAAA,EAAA,IAAA;AAAA,OAEpC,CAAA;AAAA,sBACCJ,cAAA,CAAAG,qBAAA,EAAA;AAAA,QAAW,IAAM,EAAA,KAAA;AAAA,QAAO,QAAU,EAAA,YAAA;AAAA,OAAc,CAAA;AAAA,sBAChDH,cAAA,CAAAC,WAAA,EAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACR,YAAW,EAAA,WAAA;AAAA,QACX,OAAS,EAAA,UAAA;AAAA,QACT,QAAU,EAAA,YAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAC,kBAAAD,cAAA,CAAAK,sBAAA,EAAA;AAAA,UAAiB,aAAW,EAAA,IAAA;AAAA,SAAC,CAAA;AAAA,OAChC,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltGoToInput.saltFormField {\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n align-items: baseline;\n text-wrap: nowrap;\n}\n\n.saltGoToInput-input {\n height: var(--salt-size-base);\n --saltInput-minWidth: unset;\n}\n\n.saltGoToInput-inputDefaultSize {\n --saltInput-minWidth: var(--salt-size-base);\n max-width: var(--salt-size-base);\n width: var(--salt-size-base);\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=GoToInput.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GoToInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -7,90 +7,68 @@ var clsx = require('clsx');
|
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var core = require('@salt-ds/core');
|
|
9
9
|
var usePaginationContext = require('./usePaginationContext.js');
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
require('
|
|
13
|
-
var InputLegacy = require('../input-legacy/InputLegacy.js');
|
|
14
|
-
require('../input-legacy/StaticInputAdornment.js');
|
|
10
|
+
var window = require('@salt-ds/window');
|
|
11
|
+
var styles = require('@salt-ds/styles');
|
|
12
|
+
var GoToInput$1 = require('./GoToInput.css.js');
|
|
15
13
|
|
|
14
|
+
const withBaseName = core.makePrefixer("saltGoToInput");
|
|
16
15
|
const GoToInput = React.forwardRef(
|
|
17
|
-
({
|
|
16
|
+
function GoToInput2({
|
|
18
17
|
className,
|
|
19
|
-
|
|
18
|
+
inputRef,
|
|
19
|
+
inputVariant = "primary",
|
|
20
20
|
label = "Go to",
|
|
21
|
-
FormFieldProps: { ...restFormFieldLegacyProps } = {},
|
|
22
21
|
...restProps
|
|
23
|
-
},
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
}, ref) {
|
|
23
|
+
const targetWindow = window.useWindow();
|
|
24
|
+
styles.useComponentCssInjection({
|
|
25
|
+
testId: "salt-go-to-input",
|
|
26
|
+
css: GoToInput$1,
|
|
27
|
+
window: targetWindow
|
|
28
|
+
});
|
|
29
|
+
const { count, onPageChange } = usePaginationContext.usePaginationContext();
|
|
28
30
|
const [inputValue, setInputValue] = React.useState("");
|
|
29
|
-
const onChange =
|
|
30
|
-
(event)
|
|
31
|
-
|
|
32
|
-
},
|
|
33
|
-
[setInputValue]
|
|
34
|
-
);
|
|
31
|
+
const onChange = (event) => {
|
|
32
|
+
setInputValue(event.target.value);
|
|
33
|
+
};
|
|
35
34
|
const onKeyDown = (event) => {
|
|
36
35
|
if (event.key === "Enter") {
|
|
37
36
|
const pageValue = Number(inputValue);
|
|
38
37
|
if (!inputValue.startsWith("0") && !isNaN(pageValue) && pageValue > 0 && pageValue <= count) {
|
|
39
|
-
onPageChange(pageValue);
|
|
38
|
+
onPageChange(event, pageValue);
|
|
40
39
|
}
|
|
41
40
|
setInputValue("");
|
|
42
41
|
}
|
|
43
42
|
};
|
|
44
|
-
const onBlur =
|
|
43
|
+
const onBlur = () => {
|
|
45
44
|
setInputValue("");
|
|
46
|
-
}
|
|
47
|
-
React.useEffect(() => {
|
|
48
|
-
if (compact) {
|
|
49
|
-
setInputValue("");
|
|
50
|
-
}
|
|
51
|
-
}, [compact]);
|
|
52
|
-
const [position, setPosition] = React.useState();
|
|
53
|
-
core.useIsomorphicLayoutEffect(() => {
|
|
54
|
-
if (paginatorElement && !compact && rootRef.current) {
|
|
55
|
-
setPosition(
|
|
56
|
-
rootRef.current.compareDocumentPosition(paginatorElement) === Node.DOCUMENT_POSITION_PRECEDING ? "right" : "left"
|
|
57
|
-
);
|
|
58
|
-
}
|
|
59
|
-
}, [paginatorElement, compact, rootRef.current]);
|
|
60
|
-
if (compact) {
|
|
61
|
-
return null;
|
|
62
|
-
}
|
|
45
|
+
};
|
|
63
46
|
const widthCh = `${`${count}`.length}ch`;
|
|
64
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
...restFormFieldLegacyProps,
|
|
77
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(InputLegacy.InputLegacy, {
|
|
78
|
-
className: clsx.clsx(utils.withBaseName("goToInput"), {
|
|
79
|
-
[utils.withBaseName("goToInputFixed")]: count < 100
|
|
47
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, {
|
|
48
|
+
labelPlacement: "left",
|
|
49
|
+
className: clsx.clsx(withBaseName(), className),
|
|
50
|
+
ref,
|
|
51
|
+
...restProps,
|
|
52
|
+
children: [
|
|
53
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, {
|
|
54
|
+
children: label
|
|
55
|
+
}),
|
|
56
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.Input, {
|
|
57
|
+
className: clsx.clsx(withBaseName("input"), {
|
|
58
|
+
[withBaseName("inputDefaultSize")]: count < 100
|
|
80
59
|
}),
|
|
81
|
-
|
|
60
|
+
ref: inputRef,
|
|
82
61
|
inputProps: {
|
|
83
|
-
"aria-labelledby": id,
|
|
84
|
-
"aria-label": `Page, ${count} total`,
|
|
85
62
|
style: { width: widthCh }
|
|
86
63
|
},
|
|
87
64
|
onBlur,
|
|
88
65
|
onChange,
|
|
89
66
|
onKeyDown,
|
|
90
67
|
value: inputValue,
|
|
91
|
-
textAlign: "center"
|
|
68
|
+
textAlign: "center",
|
|
69
|
+
variant: inputVariant
|
|
92
70
|
})
|
|
93
|
-
|
|
71
|
+
]
|
|
94
72
|
});
|
|
95
73
|
}
|
|
96
74
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GoToInput.js","sources":["../src/pagination/GoToInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n forwardRef,\n HTMLAttributes,\n KeyboardEventHandler,\n
|
|
1
|
+
{"version":3,"file":"GoToInput.js","sources":["../src/pagination/GoToInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n forwardRef,\n HTMLAttributes,\n KeyboardEventHandler,\n Ref,\n useState,\n} from \"react\";\nimport { FormField, FormFieldLabel, Input, makePrefixer } from \"@salt-ds/core\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport goToInputCss from \"./GoToInput.css\";\n\nconst withBaseName = makePrefixer(\"saltGoToInput\");\nexport interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {\n /**\n * Input label.\n */\n label?: string;\n /**\n * Optional ref for the input component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * Change input variant.\n */\n inputVariant?: \"primary\" | \"secondary\";\n}\n\nexport const GoToInput = forwardRef<HTMLDivElement, GoToInputProps>(\n function GoToInput(\n {\n className,\n inputRef,\n inputVariant = \"primary\",\n label = \"Go to\",\n ...restProps\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-go-to-input\",\n css: goToInputCss,\n window: targetWindow,\n });\n\n const { count, onPageChange } = usePaginationContext();\n const [inputValue, setInputValue] = useState(\"\");\n\n const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n setInputValue(event.target.value);\n };\n\n const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n if (event.key === \"Enter\") {\n const pageValue = Number(inputValue);\n if (\n !inputValue.startsWith(\"0\") &&\n !isNaN(pageValue) &&\n pageValue > 0 &&\n pageValue <= count\n ) {\n onPageChange(event, pageValue);\n }\n setInputValue(\"\");\n }\n };\n\n const onBlur = () => {\n setInputValue(\"\");\n };\n\n const widthCh = `${`${count}`.length}ch`;\n\n return (\n <FormField\n labelPlacement=\"left\"\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...restProps}\n >\n <FormFieldLabel>{label}</FormFieldLabel>\n <Input\n className={clsx(withBaseName(\"input\"), {\n [withBaseName(\"inputDefaultSize\")]: count < 100,\n })}\n ref={inputRef}\n inputProps={{\n style: { width: widthCh },\n }}\n onBlur={onBlur}\n onChange={onChange}\n onKeyDown={onKeyDown}\n value={inputValue}\n textAlign={\"center\"}\n variant={inputVariant}\n />\n </FormField>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","GoToInput","useWindow","useComponentCssInjection","goToInputCss","usePaginationContext","useState","jsxs","FormField","clsx","jsx","FormFieldLabel","Input"],"mappings":";;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAgB1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAe,GAAA,SAAA;AAAA,IACf,KAAQ,GAAA,OAAA;AAAA,IACL,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAIC,yCAAqB,EAAA,CAAA;AACrD,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,eAAS,EAAE,CAAA,CAAA;AAE/C,IAAM,MAAA,QAAA,GAAiD,CAAC,KAAU,KAAA;AAChE,MAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,KAClC,CAAA;AAEA,IAAM,MAAA,SAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,MAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,QAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,QAAA,IACE,CAAC,UAAA,CAAW,UAAW,CAAA,GAAG,CAC1B,IAAA,CAAC,KAAM,CAAA,SAAS,CAChB,IAAA,SAAA,GAAY,CACZ,IAAA,SAAA,IAAa,KACb,EAAA;AACA,UAAA,YAAA,CAAa,OAAO,SAAS,CAAA,CAAA;AAAA,SAC/B;AACA,QAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,OAClB;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAM,MAAA,OAAA,GAAU,CAAG,EAAA,CAAA,EAAG,KAAQ,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,CAAA;AAE9B,IAAA,uBACGC,eAAA,CAAAC,cAAA,EAAA;AAAA,MACC,cAAe,EAAA,MAAA;AAAA,MACf,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAAC,mBAAA,EAAA;AAAA,UAAgB,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,wBACtBD,cAAA,CAAAE,UAAA,EAAA;AAAA,UACC,SAAW,EAAAH,SAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,YACrC,CAAC,YAAA,CAAa,kBAAkB,CAAA,GAAI,KAAQ,GAAA,GAAA;AAAA,WAC7C,CAAA;AAAA,UACD,GAAK,EAAA,QAAA;AAAA,UACL,UAAY,EAAA;AAAA,YACV,KAAA,EAAO,EAAE,KAAA,EAAO,OAAQ,EAAA;AAAA,WAC1B;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,KAAO,EAAA,UAAA;AAAA,UACP,SAAW,EAAA,QAAA;AAAA,UACX,OAAS,EAAA,YAAA;AAAA,SACX,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var css_248z = ".saltPageButton {\n --saltButton-minWidth: var(--salt-size-base);\n --saltButton-fontWeight: var(--salt-text-fontWeight);\n --saltButton-height: var(--salt-size-base);\n --saltButton-text-color: var(--salt-content-primary-foreground);\n --saltButton-background-active: var(--salt-selectable-background-selected);\n --saltButton-text-color-active: var(--salt-content-primary-foreground);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n --saltButton-background-hover: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:disabled {\n --saltButton-text-color-disabled: var(--salt-content-secondary-foreground);\n --saltButton-cursor-disabled: var(--salt-editable-cursor-readonly);\n}\n\n.saltPageButton-selected {\n --saltButton-background: var(--salt-selectable-background-selected);\n}\n.saltPageButton-selected:focus-visible {\n --saltButton-background-hover: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n --saltButton-padding: 0;\n}\n";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=PageButton.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -3,41 +3,42 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var
|
|
7
|
-
var core = require('@salt-ds/core');
|
|
6
|
+
var React = require('react');
|
|
8
7
|
var clsx = require('clsx');
|
|
8
|
+
var core = require('@salt-ds/core');
|
|
9
|
+
var usePaginationContext = require('./usePaginationContext.js');
|
|
10
|
+
var window = require('@salt-ds/window');
|
|
11
|
+
var styles = require('@salt-ds/styles');
|
|
12
|
+
var PageButton$1 = require('./PageButton.css.js');
|
|
9
13
|
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
children: page
|
|
39
|
-
});
|
|
40
|
-
};
|
|
14
|
+
const withBaseName = core.makePrefixer("saltPageButton");
|
|
15
|
+
const PageButton = React.forwardRef(
|
|
16
|
+
function PageButton2({ page, selected, disabled }, ref) {
|
|
17
|
+
const targetWindow = window.useWindow();
|
|
18
|
+
styles.useComponentCssInjection({
|
|
19
|
+
testId: "salt-page-button",
|
|
20
|
+
css: PageButton$1,
|
|
21
|
+
window: targetWindow
|
|
22
|
+
});
|
|
23
|
+
const { count, onPageChange } = usePaginationContext.usePaginationContext();
|
|
24
|
+
const onClick = (event) => {
|
|
25
|
+
onPageChange(event, page);
|
|
26
|
+
};
|
|
27
|
+
return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
|
|
28
|
+
"aria-label": `Page ${page} of ${count}`,
|
|
29
|
+
"aria-current": selected ? "page" : void 0,
|
|
30
|
+
variant: "secondary",
|
|
31
|
+
className: clsx.clsx(withBaseName(), {
|
|
32
|
+
[withBaseName("selected")]: selected,
|
|
33
|
+
[withBaseName("fixed")]: page < 100
|
|
34
|
+
}),
|
|
35
|
+
onClick,
|
|
36
|
+
disabled,
|
|
37
|
+
ref,
|
|
38
|
+
children: page
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
);
|
|
41
42
|
|
|
42
43
|
exports.PageButton = PageButton;
|
|
43
44
|
//# sourceMappingURL=PageButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import {
|
|
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":["makePrefixer","forwardRef","PageButton","useWindow","useComponentCssInjection","pageButtonCss","usePaginationContext","jsx","Button","clsx"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA,CAAA;AAO3C,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,WAAW,CAAA,EAAE,MAAM,QAAU,EAAA,QAAA,IAA6B,GAAK,EAAA;AACtE,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAIC,yCAAqB,EAAA,CAAA;AAErD,IAAM,MAAA,OAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,MAAA,YAAA,CAAa,OAAO,IAAI,CAAA,CAAA;AAAA,KAC1B,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAAC,WAAA,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,EAAWC,SAAK,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;;;;"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
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";
|
|
4
|
+
|
|
5
|
+
module.exports = css_248z;
|
|
6
|
+
//# sourceMappingURL=PageRanges.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageRanges.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var core = require('@salt-ds/core');
|
|
8
|
+
var PageButton = require('./PageButton.js');
|
|
9
|
+
var usePagination = require('./usePagination.js');
|
|
10
|
+
var usePaginationContext = require('./usePaginationContext.js');
|
|
11
|
+
var window = require('@salt-ds/window');
|
|
12
|
+
var styles = require('@salt-ds/styles');
|
|
13
|
+
var PageRanges$1 = require('./PageRanges.css.js');
|
|
14
|
+
|
|
15
|
+
const withBaseName = core.makePrefixer("saltPageRanges");
|
|
16
|
+
const Ellipsis = () => {
|
|
17
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
18
|
+
className: withBaseName("ellipsis"),
|
|
19
|
+
children: `\u2026`
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
const mapRange = (range, fn) => {
|
|
23
|
+
const result = [];
|
|
24
|
+
for (let i = range[0]; i <= range[1]; ++i) {
|
|
25
|
+
result.push(fn(i));
|
|
26
|
+
}
|
|
27
|
+
return result;
|
|
28
|
+
};
|
|
29
|
+
function PageRanges({
|
|
30
|
+
siblingCount = 2,
|
|
31
|
+
boundaryCount = 1
|
|
32
|
+
}) {
|
|
33
|
+
const targetWindow = window.useWindow();
|
|
34
|
+
styles.useComponentCssInjection({
|
|
35
|
+
testId: "salt-page-ranges",
|
|
36
|
+
css: PageRanges$1,
|
|
37
|
+
window: targetWindow
|
|
38
|
+
});
|
|
39
|
+
const { count, page } = usePaginationContext.usePaginationContext();
|
|
40
|
+
const renderPages = React.useCallback(
|
|
41
|
+
(range) => mapRange(range, (i) => /* @__PURE__ */ jsxRuntime.jsx(PageButton.PageButton, {
|
|
42
|
+
page: i,
|
|
43
|
+
selected: page === i
|
|
44
|
+
}, i)),
|
|
45
|
+
[page]
|
|
46
|
+
);
|
|
47
|
+
const [leftPages, middlePages, rightPages] = usePagination.usePagination(
|
|
48
|
+
page,
|
|
49
|
+
count,
|
|
50
|
+
Math.max(1, boundaryCount),
|
|
51
|
+
siblingCount
|
|
52
|
+
);
|
|
53
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
54
|
+
children: [
|
|
55
|
+
leftPages && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
56
|
+
children: [
|
|
57
|
+
renderPages(leftPages),
|
|
58
|
+
/* @__PURE__ */ jsxRuntime.jsx(Ellipsis, {})
|
|
59
|
+
]
|
|
60
|
+
}),
|
|
61
|
+
middlePages && renderPages(middlePages),
|
|
62
|
+
rightPages && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
63
|
+
children: [
|
|
64
|
+
/* @__PURE__ */ jsxRuntime.jsx(Ellipsis, {}),
|
|
65
|
+
renderPages(rightPages)
|
|
66
|
+
]
|
|
67
|
+
})
|
|
68
|
+
]
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
exports.PageRanges = PageRanges;
|
|
73
|
+
//# sourceMappingURL=PageRanges.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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":["makePrefixer","jsx","useWindow","useComponentCssInjection","pageRangesCss","usePaginationContext","useCallback","PageButton","usePagination","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA,CAAA;AAOlD,MAAM,WAAW,MAAM;AACrB,EAAA,uBAAQC,cAAA,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,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAK,EAAA,GAAIC,yCAAqB,EAAA,CAAA;AAE7C,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,KACC,KAAA,QAAA,CAAS,KAAO,EAAA,CAAC,sBACdL,cAAA,CAAAM,qBAAA,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,GAAAC,2BAAA;AAAA,IAC3C,IAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA,CAAK,GAAI,CAAA,CAAA,EAAG,aAAa,CAAA;AAAA,IACzB,YAAA;AAAA,GACF,CAAA;AAEA,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACG,QAAA,EAAA;AAAA,MACC,SAAA,oBAAAD,eAAA,CAAAC,mBAAA,EAAA;AAAA,QACG,QAAA,EAAA;AAAA,UAAA,WAAA,CAAY,SAAS,CAAA;AAAA,yCACrB,QAAS,EAAA,EAAA,CAAA;AAAA,SAAA;AAAA,OACZ,CAAA;AAAA,MAED,WAAA,IAAe,YAAY,WAAW,CAAA;AAAA,MACtC,UACC,oBAAAD,eAAA,CAAAC,mBAAA,EAAA;AAAA,QACE,QAAA,EAAA;AAAA,0BAAAT,cAAA,CAAC,QAAS,EAAA,EAAA,CAAA;AAAA,UACT,YAAY,UAAU,CAAA;AAAA,SAAA;AAAA,OACzB,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".
|
|
3
|
+
var css_248z = ".saltPagination {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Pagination.css.js.map
|
|
@@ -3,35 +3,42 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var core = require('@salt-ds/core');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
6
|
var React = require('react');
|
|
7
|
+
var clsx = require('clsx');
|
|
8
|
+
var core = require('@salt-ds/core');
|
|
9
9
|
var PaginationContext = require('./PaginationContext.js');
|
|
10
|
-
var
|
|
10
|
+
var window = require('@salt-ds/window');
|
|
11
|
+
var styles = require('@salt-ds/styles');
|
|
12
|
+
var Pagination$1 = require('./Pagination.css.js');
|
|
11
13
|
|
|
14
|
+
const withBaseName = core.makePrefixer("saltPagination");
|
|
12
15
|
const { Provider } = PaginationContext.paginationContext;
|
|
13
16
|
const Pagination = React.forwardRef(
|
|
14
|
-
({
|
|
17
|
+
function Pagination2({
|
|
15
18
|
className,
|
|
16
19
|
count,
|
|
17
20
|
children,
|
|
18
|
-
|
|
21
|
+
defaultPage = 1,
|
|
19
22
|
page: pageProp,
|
|
20
23
|
onPageChange: onPageChangeProp,
|
|
21
|
-
compact = false,
|
|
22
24
|
...restProps
|
|
23
|
-
}, ref)
|
|
25
|
+
}, ref) {
|
|
26
|
+
const targetWindow = window.useWindow();
|
|
27
|
+
styles.useComponentCssInjection({
|
|
28
|
+
testId: "salt-pagination",
|
|
29
|
+
css: Pagination$1,
|
|
30
|
+
window: targetWindow
|
|
31
|
+
});
|
|
24
32
|
const [pageState, setPageState] = core.useControlled({
|
|
25
33
|
controlled: pageProp,
|
|
26
|
-
default:
|
|
27
|
-
name: "
|
|
34
|
+
default: defaultPage,
|
|
35
|
+
name: "Pagination",
|
|
28
36
|
state: "page"
|
|
29
37
|
});
|
|
30
|
-
const [paginatorElement, setPaginatorElement] = React.useState();
|
|
31
38
|
const onPageChange = React.useCallback(
|
|
32
|
-
(page) => {
|
|
39
|
+
(event, page) => {
|
|
33
40
|
setPageState(page);
|
|
34
|
-
onPageChangeProp && onPageChangeProp(page);
|
|
41
|
+
onPageChangeProp && onPageChangeProp(event, page);
|
|
35
42
|
},
|
|
36
43
|
[onPageChangeProp, setPageState]
|
|
37
44
|
);
|
|
@@ -39,28 +46,10 @@ const Pagination = React.forwardRef(
|
|
|
39
46
|
() => ({
|
|
40
47
|
page: pageState,
|
|
41
48
|
count,
|
|
42
|
-
|
|
43
|
-
onPageChange,
|
|
44
|
-
paginatorElement,
|
|
45
|
-
setPaginatorElement
|
|
49
|
+
onPageChange
|
|
46
50
|
}),
|
|
47
51
|
[pageState, count, onPageChange]
|
|
48
52
|
);
|
|
49
|
-
const onKeyDown = React.useCallback(
|
|
50
|
-
({ altKey, key }) => {
|
|
51
|
-
if (altKey) {
|
|
52
|
-
switch (key) {
|
|
53
|
-
case "PageDown":
|
|
54
|
-
onPageChange(Math.min(pageState + 1, count));
|
|
55
|
-
break;
|
|
56
|
-
case "PageUp":
|
|
57
|
-
onPageChange(Math.max(pageState - 1, 1));
|
|
58
|
-
break;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
[onPageChange]
|
|
63
|
-
);
|
|
64
53
|
const { announce } = core.useAriaAnnouncer();
|
|
65
54
|
const mounted = React.useRef(false);
|
|
66
55
|
React.useEffect(() => {
|
|
@@ -70,19 +59,13 @@ const Pagination = React.forwardRef(
|
|
|
70
59
|
mounted.current = true;
|
|
71
60
|
}
|
|
72
61
|
}, [announce, pageState]);
|
|
73
|
-
React.useEffect(() => {
|
|
74
|
-
if (count < pageState) {
|
|
75
|
-
onPageChange(1);
|
|
76
|
-
}
|
|
77
|
-
}, [count, pageState, onPageChange]);
|
|
78
62
|
if (count < 2) {
|
|
79
63
|
return null;
|
|
80
64
|
}
|
|
81
65
|
return /* @__PURE__ */ jsxRuntime.jsx(Provider, {
|
|
82
66
|
value: contextValue,
|
|
83
67
|
children: /* @__PURE__ */ jsxRuntime.jsx("nav", {
|
|
84
|
-
className: clsx.clsx(
|
|
85
|
-
onKeyDown,
|
|
68
|
+
className: clsx.clsx(withBaseName(), className),
|
|
86
69
|
ref,
|
|
87
70
|
...restProps,
|
|
88
71
|
children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../src/pagination/Pagination.tsx"],"sourcesContent":["import {
|
|
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":["makePrefixer","paginationContext","forwardRef","Pagination","useWindow","useComponentCssInjection","paginationCss","useControlled","useCallback","useMemo","useAriaAnnouncer","useRef","useEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA,CAAA;AAElD,MAAM,EAAE,UAAa,GAAAC,mCAAA,CAAA;AAqBd,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,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,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,kBAAc,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,GAAAC,iBAAA;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,GAAAC,aAAA;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,GAAIC,qBAAiB,EAAA,CAAA;AACtC,IAAM,MAAA,OAAA,GAAUC,aAAgB,KAAK,CAAA,CAAA;AAErC,IAAAC,eAAA,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,uBACGC,cAAA,CAAA,QAAA,EAAA;AAAA,MAAS,KAAO,EAAA,YAAA;AAAA,MACf,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAW,EAAAC,SAAA,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;;;;"}
|
|
@@ -7,12 +7,7 @@ var React = require('react');
|
|
|
7
7
|
const paginationContext = React.createContext({
|
|
8
8
|
page: 0,
|
|
9
9
|
count: 0,
|
|
10
|
-
|
|
11
|
-
onPageChange: () => {
|
|
12
|
-
},
|
|
13
|
-
paginatorElement: void 0,
|
|
14
|
-
setPaginatorElement: () => {
|
|
15
|
-
}
|
|
10
|
+
onPageChange: () => void 0
|
|
16
11
|
});
|
|
17
12
|
if (process.env.NODE_ENV !== "production") {
|
|
18
13
|
paginationContext.displayName = "PaginationContext";
|