@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.
Files changed (118) hide show
  1. package/css/salt-lab.css +86 -121
  2. package/dist-cjs/combo-box-next/ComboBoxNext.js +1 -1
  3. package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -1
  4. package/dist-cjs/dropdown-next/DropdownNext.js +1 -2
  5. package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -1
  6. package/dist-cjs/index.js +4 -0
  7. package/dist-cjs/index.js.map +1 -1
  8. package/dist-cjs/pagination/CompactInput.css.js +6 -0
  9. package/dist-cjs/pagination/CompactInput.css.js.map +1 -0
  10. package/dist-cjs/pagination/CompactInput.js +31 -35
  11. package/dist-cjs/pagination/CompactInput.js.map +1 -1
  12. package/dist-cjs/pagination/CompactPaginator.css.js +6 -0
  13. package/dist-cjs/pagination/CompactPaginator.css.js.map +1 -0
  14. package/dist-cjs/pagination/CompactPaginator.js +76 -0
  15. package/dist-cjs/pagination/CompactPaginator.js.map +1 -0
  16. package/dist-cjs/pagination/GoToInput.css.js +6 -0
  17. package/dist-cjs/pagination/GoToInput.css.js.map +1 -0
  18. package/dist-cjs/pagination/GoToInput.js +37 -59
  19. package/dist-cjs/pagination/GoToInput.js.map +1 -1
  20. package/dist-cjs/pagination/PageButton.css.js +6 -0
  21. package/dist-cjs/pagination/PageButton.css.js.map +1 -0
  22. package/dist-cjs/pagination/PageButton.js +34 -33
  23. package/dist-cjs/pagination/PageButton.js.map +1 -1
  24. package/dist-cjs/pagination/PageRanges.css.js +6 -0
  25. package/dist-cjs/pagination/PageRanges.css.js.map +1 -0
  26. package/dist-cjs/pagination/PageRanges.js +73 -0
  27. package/dist-cjs/pagination/PageRanges.js.map +1 -0
  28. package/dist-cjs/pagination/Pagination.css.js +1 -1
  29. package/dist-cjs/pagination/Pagination.js +21 -38
  30. package/dist-cjs/pagination/Pagination.js.map +1 -1
  31. package/dist-cjs/pagination/PaginationContext.js +1 -6
  32. package/dist-cjs/pagination/PaginationContext.js.map +1 -1
  33. package/dist-cjs/pagination/Paginator.css.js +6 -0
  34. package/dist-cjs/pagination/Paginator.css.js.map +1 -0
  35. package/dist-cjs/pagination/Paginator.js +33 -43
  36. package/dist-cjs/pagination/Paginator.js.map +1 -1
  37. package/dist-cjs/pagination/usePaginationContext.js +1 -1
  38. package/dist-cjs/pagination/usePaginationContext.js.map +1 -1
  39. package/dist-cjs/pill-next/PillNext.css.js +1 -1
  40. package/dist-cjs/pill-next/PillNext.js +26 -31
  41. package/dist-cjs/pill-next/PillNext.js.map +1 -1
  42. package/dist-es/combo-box-next/ComboBoxNext.js +1 -1
  43. package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -1
  44. package/dist-es/dropdown-next/DropdownNext.js +1 -2
  45. package/dist-es/dropdown-next/DropdownNext.js.map +1 -1
  46. package/dist-es/index.js +2 -0
  47. package/dist-es/index.js.map +1 -1
  48. package/dist-es/pagination/CompactInput.css.js +4 -0
  49. package/dist-es/pagination/CompactInput.css.js.map +1 -0
  50. package/dist-es/pagination/CompactInput.js +32 -36
  51. package/dist-es/pagination/CompactInput.js.map +1 -1
  52. package/dist-es/pagination/CompactPaginator.css.js +4 -0
  53. package/dist-es/pagination/CompactPaginator.css.js.map +1 -0
  54. package/dist-es/pagination/CompactPaginator.js +72 -0
  55. package/dist-es/pagination/CompactPaginator.js.map +1 -0
  56. package/dist-es/pagination/GoToInput.css.js +4 -0
  57. package/dist-es/pagination/GoToInput.css.js.map +1 -0
  58. package/dist-es/pagination/GoToInput.js +40 -62
  59. package/dist-es/pagination/GoToInput.js.map +1 -1
  60. package/dist-es/pagination/PageButton.css.js +4 -0
  61. package/dist-es/pagination/PageButton.css.js.map +1 -0
  62. package/dist-es/pagination/PageButton.js +34 -33
  63. package/dist-es/pagination/PageButton.js.map +1 -1
  64. package/dist-es/pagination/PageRanges.css.js +4 -0
  65. package/dist-es/pagination/PageRanges.css.js.map +1 -0
  66. package/dist-es/pagination/PageRanges.js +69 -0
  67. package/dist-es/pagination/PageRanges.js.map +1 -0
  68. package/dist-es/pagination/Pagination.css.js +1 -1
  69. package/dist-es/pagination/Pagination.js +20 -37
  70. package/dist-es/pagination/Pagination.js.map +1 -1
  71. package/dist-es/pagination/PaginationContext.js +1 -6
  72. package/dist-es/pagination/PaginationContext.js.map +1 -1
  73. package/dist-es/pagination/Paginator.css.js +4 -0
  74. package/dist-es/pagination/Paginator.css.js.map +1 -0
  75. package/dist-es/pagination/Paginator.js +32 -42
  76. package/dist-es/pagination/Paginator.js.map +1 -1
  77. package/dist-es/pagination/usePaginationContext.js +1 -1
  78. package/dist-es/pagination/usePaginationContext.js.map +1 -1
  79. package/dist-es/pill-next/PillNext.css.js +1 -1
  80. package/dist-es/pill-next/PillNext.js +28 -33
  81. package/dist-es/pill-next/PillNext.js.map +1 -1
  82. package/dist-types/combo-box-next/useComboBox.d.ts +2 -2
  83. package/dist-types/combo-box-next/useComboboxPortal.d.ts +2 -2
  84. package/dist-types/dialog/useDialog.d.ts +6 -7
  85. package/dist-types/drawer/useDrawer.d.ts +6 -7
  86. package/dist-types/dropdown-next/useDropdownNext.d.ts +12 -4
  87. package/dist-types/pagination/CompactInput.d.ts +2 -8
  88. package/dist-types/pagination/CompactPaginator.d.ts +1 -0
  89. package/dist-types/pagination/GoToInput.d.ts +13 -4
  90. package/dist-types/pagination/PageButton.d.ts +2 -3
  91. package/dist-types/pagination/PageRanges.d.ts +5 -0
  92. package/dist-types/pagination/Pagination.d.ts +15 -4
  93. package/dist-types/pagination/PaginationContext.d.ts +2 -4
  94. package/dist-types/pagination/Paginator.d.ts +6 -3
  95. package/dist-types/pagination/index.d.ts +2 -0
  96. package/dist-types/pill-next/PillNext.d.ts +1 -4
  97. package/dist-types/tabs/drag-drop/drag-utils.d.ts +6 -6
  98. package/package.json +3 -3
  99. package/dist-cjs/pagination/ArrowButton.js +0 -64
  100. package/dist-cjs/pagination/ArrowButton.js.map +0 -1
  101. package/dist-cjs/pagination/CompactControls.js +0 -38
  102. package/dist-cjs/pagination/CompactControls.js.map +0 -1
  103. package/dist-cjs/pagination/RegularControls.js +0 -58
  104. package/dist-cjs/pagination/RegularControls.js.map +0 -1
  105. package/dist-cjs/pagination/utils.js +0 -10
  106. package/dist-cjs/pagination/utils.js.map +0 -1
  107. package/dist-es/pagination/ArrowButton.js +0 -60
  108. package/dist-es/pagination/ArrowButton.js.map +0 -1
  109. package/dist-es/pagination/CompactControls.js +0 -34
  110. package/dist-es/pagination/CompactControls.js.map +0 -1
  111. package/dist-es/pagination/RegularControls.js +0 -54
  112. package/dist-es/pagination/RegularControls.js.map +0 -1
  113. package/dist-es/pagination/utils.js +0 -6
  114. package/dist-es/pagination/utils.js.map +0 -1
  115. package/dist-types/pagination/ArrowButton.d.ts +0 -7
  116. package/dist-types/pagination/CompactControls.d.ts +0 -8
  117. package/dist-types/pagination/RegularControls.d.ts +0 -8
  118. 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 utils = require('./utils.js');
11
- var FormFieldLegacy = require('../form-field-legacy/FormFieldLegacy.js');
12
- require('../form-field-legacy/FormLabel.js');
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
- id: idProp,
18
+ inputRef,
19
+ inputVariant = "primary",
20
20
  label = "Go to",
21
- FormFieldProps: { ...restFormFieldLegacyProps } = {},
22
21
  ...restProps
23
- }, forwardedRef) => {
24
- const { compact, count, onPageChange, paginatorElement } = usePaginationContext.usePaginationContext();
25
- const id = core.useId(idProp);
26
- const rootRef = React.useRef(null);
27
- const forkedRef = core.useForkRef(rootRef, forwardedRef);
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 = React.useCallback(
30
- (event) => {
31
- setInputValue(event.target.value);
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 = React.useCallback(() => {
43
+ const onBlur = () => {
45
44
  setInputValue("");
46
- }, [setInputValue]);
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.jsx("span", {
65
- className: clsx.clsx(
66
- utils.withBaseName("goToInputWrapper"),
67
- { [utils.withBaseName(`${position}GoToInput`)]: position },
68
- className
69
- ),
70
- ref: forkedRef,
71
- children: /* @__PURE__ */ jsxRuntime.jsx(FormFieldLegacy.FormFieldLegacy, {
72
- className: utils.withBaseName("goToInputField"),
73
- fullWidth: false,
74
- label,
75
- labelPlacement: "left",
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
- id,
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 useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useForkRef, useId, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { usePaginationContext } from \"./usePaginationContext\";\nimport { withBaseName } from \"./utils\";\nimport {\n FormFieldLegacy as FormField,\n FormFieldLegacyProps as FormFieldProps,\n} from \"../form-field-legacy\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nexport interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {\n label?: string;\n FormFieldProps?: Partial<FormFieldProps>;\n}\n\nexport const GoToInput = forwardRef<HTMLSpanElement, GoToInputProps>(\n (\n {\n className,\n id: idProp,\n label = \"Go to\",\n FormFieldProps: { ...restFormFieldLegacyProps } = {},\n ...restProps\n },\n\n forwardedRef\n ) => {\n const { compact, count, onPageChange, paginatorElement } =\n usePaginationContext();\n\n const id = useId(idProp);\n\n const rootRef = useRef<HTMLSpanElement>(null);\n const forkedRef = useForkRef(rootRef, forwardedRef);\n\n const [inputValue, setInputValue] = useState(\"\");\n\n const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n (event) => {\n setInputValue(event.target.value);\n },\n [setInputValue]\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(pageValue);\n }\n setInputValue(\"\");\n }\n };\n\n const onBlur = useCallback(() => {\n setInputValue(\"\");\n }, [setInputValue]);\n\n useEffect(() => {\n if (compact) {\n setInputValue(\"\");\n }\n }, [compact]);\n\n const [position, setPosition] = useState<\"left\" | \"right\">();\n\n useIsomorphicLayoutEffect(() => {\n if (paginatorElement && !compact && rootRef.current) {\n setPosition(\n rootRef.current.compareDocumentPosition(paginatorElement) ===\n Node.DOCUMENT_POSITION_PRECEDING\n ? \"right\"\n : \"left\"\n );\n }\n }, [paginatorElement, compact, rootRef.current]);\n\n if (compact) {\n return null;\n }\n\n const widthCh = `${`${count}`.length}ch`;\n\n return (\n <span\n className={clsx(\n withBaseName(\"goToInputWrapper\"),\n { [withBaseName(`${position!}GoToInput`)]: position },\n className\n )}\n ref={forkedRef}\n >\n <FormField\n className={withBaseName(\"goToInputField\")}\n fullWidth={false}\n label={label}\n labelPlacement=\"left\"\n {...restFormFieldLegacyProps}\n >\n <Input\n className={clsx(withBaseName(\"goToInput\"), {\n [withBaseName(\"goToInputFixed\")]: count < 100,\n })}\n id={id}\n inputProps={{\n \"aria-labelledby\": id,\n \"aria-label\": `Page, ${count} total`,\n style: { width: widthCh },\n }}\n onBlur={onBlur}\n onChange={onChange}\n onKeyDown={onKeyDown}\n value={inputValue}\n textAlign={\"center\"}\n />\n </FormField>\n </span>\n );\n }\n);\n"],"names":["forwardRef","usePaginationContext","useId","useRef","useForkRef","useState","useCallback","useEffect","useIsomorphicLayoutEffect","jsx","clsx","withBaseName","FormField","Input"],"mappings":";;;;;;;;;;;;;;;AAyBO,MAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,SAAA;AAAA,IACA,EAAI,EAAA,MAAA;AAAA,IACJ,KAAQ,GAAA,OAAA;AAAA,IACR,cAAgB,EAAA,EAAA,GAAK,wBAAyB,EAAA,GAAI,EAAC;AAAA,IAChD,GAAA,SAAA;AAAA,KAGL,YACG,KAAA;AACH,IAAA,MAAM,EAAE,OAAS,EAAA,KAAA,EAAO,YAAc,EAAA,gBAAA,KACpCC,yCAAqB,EAAA,CAAA;AAEvB,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA,CAAA;AAEvB,IAAM,MAAA,OAAA,GAAUC,aAAwB,IAAI,CAAA,CAAA;AAC5C,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,OAAA,EAAS,YAAY,CAAA,CAAA;AAElD,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,eAAS,EAAE,CAAA,CAAA;AAE/C,IAAA,MAAM,QAAiD,GAAAC,iBAAA;AAAA,MACrD,CAAC,KAAU,KAAA;AACT,QAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,OAClC;AAAA,MACA,CAAC,aAAa,CAAA;AAAA,KAChB,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,SAAS,CAAA,CAAA;AAAA,SACxB;AACA,QAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,OAClB;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,MAAA,GAASA,kBAAY,MAAM;AAC/B,MAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,KAClB,EAAG,CAAC,aAAa,CAAC,CAAA,CAAA;AAElB,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,OAClB;AAAA,KACF,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIF,cAA2B,EAAA,CAAA;AAE3D,IAAAG,8BAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,gBAAoB,IAAA,CAAC,OAAW,IAAA,OAAA,CAAQ,OAAS,EAAA;AACnD,QAAA,WAAA;AAAA,UACE,QAAQ,OAAQ,CAAA,uBAAA,CAAwB,gBAAgB,CACtD,KAAA,IAAA,CAAK,8BACH,OACA,GAAA,MAAA;AAAA,SACN,CAAA;AAAA,OACF;AAAA,OACC,CAAC,gBAAA,EAAkB,OAAS,EAAA,OAAA,CAAQ,OAAO,CAAC,CAAA,CAAA;AAE/C,IAAA,IAAI,OAAS,EAAA;AACX,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,OAAA,GAAU,CAAG,EAAA,CAAA,EAAG,KAAQ,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,CAAA;AAE9B,IAAA,uBACGC,cAAA,CAAA,MAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACTC,mBAAa,kBAAkB,CAAA;AAAA,QAC/B,EAAE,CAACA,kBAAA,CAAa,CAAG,EAAA,QAAA,CAAA,SAAA,CAAoB,IAAI,QAAS,EAAA;AAAA,QACpD,SAAA;AAAA,OACF;AAAA,MACA,GAAK,EAAA,SAAA;AAAA,MAEL,QAAC,kBAAAF,cAAA,CAAAG,+BAAA,EAAA;AAAA,QACC,SAAA,EAAWD,mBAAa,gBAAgB,CAAA;AAAA,QACxC,SAAW,EAAA,KAAA;AAAA,QACX,KAAA;AAAA,QACA,cAAe,EAAA,MAAA;AAAA,QACd,GAAG,wBAAA;AAAA,QAEJ,QAAC,kBAAAF,cAAA,CAAAI,uBAAA,EAAA;AAAA,UACC,SAAW,EAAAH,SAAA,CAAKC,kBAAa,CAAA,WAAW,CAAG,EAAA;AAAA,YACzC,CAACA,kBAAA,CAAa,gBAAgB,CAAA,GAAI,KAAQ,GAAA,GAAA;AAAA,WAC3C,CAAA;AAAA,UACD,EAAA;AAAA,UACA,UAAY,EAAA;AAAA,YACV,iBAAmB,EAAA,EAAA;AAAA,YACnB,cAAc,CAAS,MAAA,EAAA,KAAA,CAAA,MAAA,CAAA;AAAA,YACvB,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,SACb,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
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 utils = require('./utils.js');
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 PageButton = ({
11
- page,
12
- isSelected,
13
- onPageChange,
14
- disabled
15
- }) => {
16
- const name = `Page ${page}`;
17
- const onKeyDown = (event) => {
18
- if (event.key === "Enter") {
19
- onPageChange(page);
20
- }
21
- };
22
- const onClick = () => {
23
- onPageChange(page);
24
- };
25
- return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
26
- "aria-label": name,
27
- name,
28
- "aria-current": isSelected ? "page" : void 0,
29
- variant: "secondary",
30
- className: clsx.clsx(utils.withBaseName("pageButton"), {
31
- [utils.withBaseName("pageButtonSelected")]: isSelected,
32
- [utils.withBaseName("pageButtonFixed")]: page < 100
33
- }),
34
- onClick,
35
- onKeyDown,
36
- role: "link",
37
- disabled,
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 { KeyboardEventHandler, MouseEventHandler } from \"react\";\nimport { withBaseName } from \"./utils\";\nimport { Button } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\n\nexport interface PageButtonProps {\n page: number;\n isSelected?: boolean;\n onPageChange: (page: number) => void;\n disabled?: boolean;\n}\n\nexport const PageButton = ({\n page,\n isSelected,\n onPageChange,\n disabled,\n}: PageButtonProps) => {\n const name = `Page ${page}`;\n\n const onKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n if (event.key === \"Enter\") {\n onPageChange(page);\n }\n };\n\n const onClick: MouseEventHandler<HTMLButtonElement> = () => {\n onPageChange(page);\n };\n\n return (\n <Button\n aria-label={name}\n name={name}\n aria-current={isSelected ? \"page\" : undefined}\n variant=\"secondary\"\n className={clsx(withBaseName(\"pageButton\"), {\n [withBaseName(\"pageButtonSelected\")]: isSelected,\n [withBaseName(\"pageButtonFixed\")]: page < 100,\n })}\n onClick={onClick}\n onKeyDown={onKeyDown}\n role=\"link\"\n disabled={disabled}\n >\n {page}\n </Button>\n );\n};\n"],"names":["jsx","Button","clsx","withBaseName"],"mappings":";;;;;;;;;AAYO,MAAM,aAAa,CAAC;AAAA,EACzB,IAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AACF,CAAuB,KAAA;AACrB,EAAA,MAAM,OAAO,CAAQ,KAAA,EAAA,IAAA,CAAA,CAAA,CAAA;AAErB,EAAM,MAAA,SAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,KACnB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,UAAgD,MAAM;AAC1D,IAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,uBACGA,cAAA,CAAAC,WAAA,EAAA;AAAA,IACC,YAAY,EAAA,IAAA;AAAA,IACZ,IAAA;AAAA,IACA,cAAA,EAAc,aAAa,MAAS,GAAA,KAAA,CAAA;AAAA,IACpC,OAAQ,EAAA,WAAA;AAAA,IACR,SAAW,EAAAC,SAAA,CAAKC,kBAAa,CAAA,YAAY,CAAG,EAAA;AAAA,MAC1C,CAACA,kBAAa,CAAA,oBAAoB,CAAI,GAAA,UAAA;AAAA,MACtC,CAACA,kBAAA,CAAa,iBAAiB,CAAA,GAAI,IAAO,GAAA,GAAA;AAAA,KAC3C,CAAA;AAAA,IACD,OAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAK,EAAA,MAAA;AAAA,IACL,QAAA;AAAA,IAEC,QAAA,EAAA,IAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
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 = ".salt-density-medium {\n --pagination-button-size: 28px;\n --pagination-fontSize: 12px;\n}\n\n.salt-density-high {\n --pagination-button-size: 20px;\n --pagination-fontSize: 11px;\n}\n\n.salt-density-low {\n --pagination-button-size: 36px;\n --pagination-fontSize: 14px;\n}\n\n.salt-density-touch {\n --pagination-button-size: 44px;\n --pagination-fontSize: 16px;\n}\n\n.saltPagination {\n display: flex;\n flex-direction: row;\n}\n\n.saltPagination-arrowButton {\n width: var(--pagination-button-size);\n height: var(--pagination-button-size);\n}\n\n.saltPagination-previousButton {\n margin-right: var(--salt-size-unit);\n}\n\n.saltPagination-nextButton {\n margin-left: var(--salt-size-unit);\n}\n\n.saltPagination-pageButton {\n min-width: var(--pagination-button-size);\n height: var(--pagination-button-size);\n --saltButton-fontWeight: var(--salt-text-fontWeight);\n}\n\n.saltPagination-pageButtonSelected {\n background: var(--salt-selectable-background-selected);\n color: var(--salt-palette-interact-cta-foreground-active);\n}\n\n.saltPagination-pageButtonFixed {\n padding: 0;\n}\n\n.saltPagination-ellipsis {\n width: var(--pagination-button-size);\n height: var(--pagination-button-size);\n text-align: center;\n}\n\n.saltPagination-accessibleText {\n display: block;\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n top: 0;\n left: 0;\n opacity: 0;\n}\n\n.saltPagination-compactInputField {\n}\n\n.saltPagination-compactInput {\n height: var(--pagination-button-size);\n min-width: unset;\n}\n\n.saltPagination-compactInputFixed {\n min-width: var(--pagination-button-size);\n width: var(--pagination-button-size);\n}\n\n.saltPagination-compactSeparator {\n height: var(--pagination-button-size);\n width: var(--pagination-button-size);\n text-align: center;\n font-size: var(--pagination-fontSize);\n line-height: var(--pagination-button-size);\n}\n\n.saltPagination-goToInputWrapper {\n}\n\n.saltPagination-leftGoToInput {\n margin-right: var(--salt-size-unit);\n}\n\n.saltPagination-rightGoToInput {\n margin-left: var(--salt-size-unit);\n min-width: unset;\n}\n\n.saltPagination-goToInputField {\n}\n\n.saltPagination-goToInput {\n height: var(--pagination-button-size);\n min-width: unset;\n}\n\n.saltPagination-goToInputFixed {\n min-width: var(--pagination-button-size);\n width: var(--pagination-button-size);\n}\n";
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 utils = require('./utils.js');
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
- initialPage = 1,
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: initialPage,
27
- name: "Paginator",
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
- compact,
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(utils.withBaseName(), className),
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 { useAriaAnnouncer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n forwardRef,\n HTMLAttributes,\n KeyboardEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { PaginationContext, paginationContext } from \"./PaginationContext\";\nimport { withBaseName } from \"./utils\";\n\nconst { Provider } = paginationContext;\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n count: number;\n page?: number;\n initialPage?: number;\n onPageChange?: (page: number) => void;\n compact?: boolean;\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n (\n {\n className,\n count,\n children,\n initialPage = 1,\n page: pageProp,\n onPageChange: onPageChangeProp,\n compact = false,\n ...restProps\n },\n ref\n ) => {\n const [pageState, setPageState] = useControlled({\n controlled: pageProp,\n default: initialPage,\n name: \"Paginator\",\n state: \"page\",\n });\n\n const [paginatorElement, setPaginatorElement] = useState<HTMLDivElement>();\n\n const onPageChange = useCallback(\n (page: number) => {\n setPageState(page);\n onPageChangeProp && onPageChangeProp(page);\n },\n [onPageChangeProp, setPageState]\n );\n\n const contextValue: PaginationContext = useMemo(\n () => ({\n page: pageState,\n count,\n compact,\n onPageChange,\n paginatorElement,\n setPaginatorElement,\n }),\n [pageState, count, onPageChange]\n );\n\n const onKeyDown: KeyboardEventHandler = useCallback(\n ({ altKey, key }) => {\n if (altKey) {\n switch (key) {\n case \"PageDown\":\n onPageChange(Math.min(pageState + 1, count));\n break;\n case \"PageUp\":\n onPageChange(Math.max(pageState - 1, 1));\n break;\n default:\n }\n }\n },\n [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 useEffect(() => {\n if (count < pageState) {\n onPageChange(1);\n }\n }, [count, pageState, onPageChange]);\n\n if (count < 2) {\n return null;\n }\n\n return (\n <Provider value={contextValue}>\n <nav\n className={clsx(withBaseName(), className)}\n onKeyDown={onKeyDown}\n ref={ref}\n {...restProps}\n >\n {children}\n </nav>\n </Provider>\n );\n }\n);\n"],"names":["paginationContext","forwardRef","useControlled","useState","useCallback","useMemo","useAriaAnnouncer","useRef","useEffect","jsx","clsx","withBaseName"],"mappings":"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"}
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
- compact: false,
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";