@salt-ds/lab 1.0.0-alpha.27 → 1.0.0-alpha.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/css/salt-lab.css +1 -200
  2. package/dist-cjs/index.js +0 -14
  3. package/dist-cjs/index.js.map +1 -1
  4. package/dist-cjs/layer-layout/LayerLayout.js +1 -2
  5. package/dist-cjs/layer-layout/LayerLayout.js.map +1 -1
  6. package/dist-es/index.js +0 -7
  7. package/dist-es/index.js.map +1 -1
  8. package/dist-es/layer-layout/LayerLayout.js +1 -2
  9. package/dist-es/layer-layout/LayerLayout.js.map +1 -1
  10. package/dist-types/index.d.ts +0 -3
  11. package/dist-types/layer-layout/LayerLayout.d.ts +1 -1
  12. package/package.json +2 -2
  13. package/dist-cjs/navigation-item/ConditionalWrapper.js +0 -35
  14. package/dist-cjs/navigation-item/ConditionalWrapper.js.map +0 -1
  15. package/dist-cjs/navigation-item/ExpansionIcon.js +0 -29
  16. package/dist-cjs/navigation-item/ExpansionIcon.js.map +0 -1
  17. package/dist-cjs/navigation-item/NavigationItem.css.js +0 -6
  18. package/dist-cjs/navigation-item/NavigationItem.css.js.map +0 -1
  19. package/dist-cjs/navigation-item/NavigationItem.js +0 -78
  20. package/dist-cjs/navigation-item/NavigationItem.js.map +0 -1
  21. package/dist-cjs/pagination/CompactInput.css.js +0 -6
  22. package/dist-cjs/pagination/CompactInput.css.js.map +0 -1
  23. package/dist-cjs/pagination/CompactInput.js +0 -62
  24. package/dist-cjs/pagination/CompactInput.js.map +0 -1
  25. package/dist-cjs/pagination/CompactPaginator.css.js +0 -6
  26. package/dist-cjs/pagination/CompactPaginator.css.js.map +0 -1
  27. package/dist-cjs/pagination/CompactPaginator.js +0 -76
  28. package/dist-cjs/pagination/CompactPaginator.js.map +0 -1
  29. package/dist-cjs/pagination/GoToInput.css.js +0 -6
  30. package/dist-cjs/pagination/GoToInput.css.js.map +0 -1
  31. package/dist-cjs/pagination/GoToInput.js +0 -77
  32. package/dist-cjs/pagination/GoToInput.js.map +0 -1
  33. package/dist-cjs/pagination/PageButton.css.js +0 -6
  34. package/dist-cjs/pagination/PageButton.css.js.map +0 -1
  35. package/dist-cjs/pagination/PageButton.js +0 -44
  36. package/dist-cjs/pagination/PageButton.js.map +0 -1
  37. package/dist-cjs/pagination/PageRanges.css.js +0 -6
  38. package/dist-cjs/pagination/PageRanges.css.js.map +0 -1
  39. package/dist-cjs/pagination/PageRanges.js +0 -73
  40. package/dist-cjs/pagination/PageRanges.js.map +0 -1
  41. package/dist-cjs/pagination/Pagination.css.js +0 -6
  42. package/dist-cjs/pagination/Pagination.css.js.map +0 -1
  43. package/dist-cjs/pagination/Pagination.js +0 -78
  44. package/dist-cjs/pagination/Pagination.js.map +0 -1
  45. package/dist-cjs/pagination/PaginationContext.js +0 -17
  46. package/dist-cjs/pagination/PaginationContext.js.map +0 -1
  47. package/dist-cjs/pagination/Paginator.css.js +0 -6
  48. package/dist-cjs/pagination/Paginator.css.js.map +0 -1
  49. package/dist-cjs/pagination/Paginator.js +0 -69
  50. package/dist-cjs/pagination/Paginator.js.map +0 -1
  51. package/dist-cjs/pagination/usePagination.js +0 -27
  52. package/dist-cjs/pagination/usePagination.js.map +0 -1
  53. package/dist-cjs/pagination/usePaginationContext.js +0 -19
  54. package/dist-cjs/pagination/usePaginationContext.js.map +0 -1
  55. package/dist-cjs/scrim/Scrim.css.js +0 -6
  56. package/dist-cjs/scrim/Scrim.css.js.map +0 -1
  57. package/dist-cjs/scrim/Scrim.js +0 -40
  58. package/dist-cjs/scrim/Scrim.js.map +0 -1
  59. package/dist-es/navigation-item/ConditionalWrapper.js +0 -31
  60. package/dist-es/navigation-item/ConditionalWrapper.js.map +0 -1
  61. package/dist-es/navigation-item/ExpansionIcon.js +0 -25
  62. package/dist-es/navigation-item/ExpansionIcon.js.map +0 -1
  63. package/dist-es/navigation-item/NavigationItem.css.js +0 -4
  64. package/dist-es/navigation-item/NavigationItem.css.js.map +0 -1
  65. package/dist-es/navigation-item/NavigationItem.js +0 -74
  66. package/dist-es/navigation-item/NavigationItem.js.map +0 -1
  67. package/dist-es/pagination/CompactInput.css.js +0 -4
  68. package/dist-es/pagination/CompactInput.css.js.map +0 -1
  69. package/dist-es/pagination/CompactInput.js +0 -58
  70. package/dist-es/pagination/CompactInput.js.map +0 -1
  71. package/dist-es/pagination/CompactPaginator.css.js +0 -4
  72. package/dist-es/pagination/CompactPaginator.css.js.map +0 -1
  73. package/dist-es/pagination/CompactPaginator.js +0 -72
  74. package/dist-es/pagination/CompactPaginator.js.map +0 -1
  75. package/dist-es/pagination/GoToInput.css.js +0 -4
  76. package/dist-es/pagination/GoToInput.css.js.map +0 -1
  77. package/dist-es/pagination/GoToInput.js +0 -73
  78. package/dist-es/pagination/GoToInput.js.map +0 -1
  79. package/dist-es/pagination/PageButton.css.js +0 -4
  80. package/dist-es/pagination/PageButton.css.js.map +0 -1
  81. package/dist-es/pagination/PageButton.js +0 -40
  82. package/dist-es/pagination/PageButton.js.map +0 -1
  83. package/dist-es/pagination/PageRanges.css.js +0 -4
  84. package/dist-es/pagination/PageRanges.css.js.map +0 -1
  85. package/dist-es/pagination/PageRanges.js +0 -69
  86. package/dist-es/pagination/PageRanges.js.map +0 -1
  87. package/dist-es/pagination/Pagination.css.js +0 -4
  88. package/dist-es/pagination/Pagination.css.js.map +0 -1
  89. package/dist-es/pagination/Pagination.js +0 -74
  90. package/dist-es/pagination/Pagination.js.map +0 -1
  91. package/dist-es/pagination/PaginationContext.js +0 -13
  92. package/dist-es/pagination/PaginationContext.js.map +0 -1
  93. package/dist-es/pagination/Paginator.css.js +0 -4
  94. package/dist-es/pagination/Paginator.css.js.map +0 -1
  95. package/dist-es/pagination/Paginator.js +0 -65
  96. package/dist-es/pagination/Paginator.js.map +0 -1
  97. package/dist-es/pagination/usePagination.js +0 -23
  98. package/dist-es/pagination/usePagination.js.map +0 -1
  99. package/dist-es/pagination/usePaginationContext.js +0 -15
  100. package/dist-es/pagination/usePaginationContext.js.map +0 -1
  101. package/dist-es/scrim/Scrim.css.js +0 -4
  102. package/dist-es/scrim/Scrim.css.js.map +0 -1
  103. package/dist-es/scrim/Scrim.js +0 -36
  104. package/dist-es/scrim/Scrim.js.map +0 -1
  105. package/dist-types/navigation-item/ConditionalWrapper.d.ts +0 -8
  106. package/dist-types/navigation-item/ExpansionIcon.d.ts +0 -2
  107. package/dist-types/navigation-item/NavigationItem.d.ts +0 -36
  108. package/dist-types/navigation-item/index.d.ts +0 -1
  109. package/dist-types/pagination/CompactInput.d.ts +0 -2
  110. package/dist-types/pagination/CompactPaginator.d.ts +0 -1
  111. package/dist-types/pagination/GoToInput.d.ts +0 -16
  112. package/dist-types/pagination/PageButton.d.ts +0 -6
  113. package/dist-types/pagination/PageRanges.d.ts +0 -5
  114. package/dist-types/pagination/Pagination.d.ts +0 -20
  115. package/dist-types/pagination/PaginationContext.d.ts +0 -7
  116. package/dist-types/pagination/Paginator.d.ts +0 -12
  117. package/dist-types/pagination/index.d.ts +0 -5
  118. package/dist-types/pagination/usePagination.d.ts +0 -2
  119. package/dist-types/pagination/usePaginationContext.d.ts +0 -1
  120. package/dist-types/scrim/Scrim.d.ts +0 -13
  121. package/dist-types/scrim/index.d.ts +0 -1
  122. package/dist-types/scrim/internal/PreventFocus.d.ts +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"Paginator.js","sources":["../src/pagination/Paginator.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, MouseEventHandler } from \"react\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { PageRanges } from \"./PageRanges\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport paginatorCss from \"./Paginator.css\";\n\nconst withBaseName = makePrefixer(\"saltPaginator\");\n\nexport interface PaginatorProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Number of pages next to the arrow buttons when page range is truncated.\n */\n boundaryCount?: number;\n /**\n * Number of pages on each side of the current page when page range is truncated.\n */\n siblingCount?: number;\n}\n\nexport const Paginator = forwardRef<HTMLDivElement, PaginatorProps>(\n function Paginator(\n { className, boundaryCount, siblingCount, ...restProps },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-paginator\",\n css: paginatorCss,\n window: targetWindow,\n });\n\n const { count, page, onPageChange } = usePaginationContext();\n\n const onPreviousPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, Math.max(1, page - 1));\n };\n\n const onNextPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, Math.min(page + 1, count));\n };\n\n const isOnFirstPage = page === 1;\n const isOnLastPage = page === count;\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n <Button\n variant=\"secondary\"\n aria-label=\"Previous Page\"\n onClick={onPreviousPage}\n disabled={isOnFirstPage}\n className={withBaseName(\"arrowButton-previous\")}\n >\n <ChevronLeftIcon aria-hidden />\n </Button>\n <PageRanges siblingCount={siblingCount} boundaryCount={boundaryCount} />\n <Button\n variant=\"secondary\"\n aria-label=\"Next Page\"\n onClick={onNextPage}\n disabled={isOnLastPage}\n className={withBaseName(\"arrowButton-next\")}\n >\n <ChevronRightIcon aria-hidden />\n </Button>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Paginator","useWindow","useComponentCssInjection","paginatorCss","usePaginationContext","jsxs","clsx","jsx","Button","ChevronLeftIcon","PageRanges","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAa1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,WACP,EAAE,SAAA,EAAW,eAAe,YAAiB,EAAA,GAAA,SAAA,IAC7C,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiBC,yCAAqB,EAAA,CAAA;AAE3D,IAAM,MAAA,cAAA,GAAuD,CAAC,KAAU,KAAA;AACtE,MAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,GAAO,CAAC,CAAC,CAAA,CAAA;AAAA,KAC3C,CAAA;AAEA,IAAM,MAAA,UAAA,GAAmD,CAAC,KAAU,KAAA;AAClE,MAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,IAAO,GAAA,CAAA,EAAG,KAAK,CAAC,CAAA,CAAA;AAAA,KAC/C,CAAA;AAEA,IAAA,MAAM,gBAAgB,IAAS,KAAA,CAAA,CAAA;AAC/B,IAAA,MAAM,eAAe,IAAS,KAAA,KAAA,CAAA;AAE9B,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,MAC9D,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAAC,WAAA,EAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,YAAW,EAAA,eAAA;AAAA,UACX,OAAS,EAAA,cAAA;AAAA,UACT,QAAU,EAAA,aAAA;AAAA,UACV,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,UAE9C,QAAC,kBAAAD,cAAA,CAAAE,qBAAA,EAAA;AAAA,YAAgB,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,SAC/B,CAAA;AAAA,wBACCF,cAAA,CAAAG,qBAAA,EAAA;AAAA,UAAW,YAAA;AAAA,UAA4B,aAAA;AAAA,SAA8B,CAAA;AAAA,wBACrEH,cAAA,CAAAC,WAAA,EAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,YAAW,EAAA,WAAA;AAAA,UACX,OAAS,EAAA,UAAA;AAAA,UACT,QAAU,EAAA,YAAA;AAAA,UACV,SAAA,EAAW,aAAa,kBAAkB,CAAA;AAAA,UAE1C,QAAC,kBAAAD,cAAA,CAAAI,sBAAA,EAAA;AAAA,YAAiB,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,SAChC,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,27 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- function usePagination(page, count, boundaryCount, siblingCount) {
6
- const totalButtonsVisible = 2 * (boundaryCount + siblingCount) + 3;
7
- const isEnoughSpace = totalButtonsVisible >= count;
8
- const isLeftEllipsis = !isEnoughSpace && page - boundaryCount - siblingCount > 2;
9
- const isRightEllipsis = !isEnoughSpace && page + boundaryCount + siblingCount + 1 < count;
10
- const leftPages = isLeftEllipsis ? [1, boundaryCount] : void 0;
11
- const rightPages = isRightEllipsis ? [count - boundaryCount + 1, count] : void 0;
12
- let middlePages;
13
- if (!isLeftEllipsis) {
14
- middlePages = [
15
- 1,
16
- isRightEllipsis ? boundaryCount + 2 + 2 * siblingCount : count
17
- ];
18
- } else if (!isRightEllipsis) {
19
- middlePages = [count - boundaryCount - 1 - 2 * siblingCount, count];
20
- } else {
21
- middlePages = [page - siblingCount, page + siblingCount];
22
- }
23
- return [leftPages, middlePages, rightPages];
24
- }
25
-
26
- exports.usePagination = usePagination;
27
- //# sourceMappingURL=usePagination.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"usePagination.js","sources":["../src/pagination/usePagination.ts"],"sourcesContent":["export type PageRange = [number, number];\n\nexport function usePagination(\n page: number,\n count: number,\n boundaryCount: number,\n siblingCount: number\n) {\n const totalButtonsVisible = 2 * (boundaryCount + siblingCount) + 3;\n const isEnoughSpace = totalButtonsVisible >= count;\n\n const isLeftEllipsis =\n !isEnoughSpace && page - boundaryCount - siblingCount > 2;\n\n const isRightEllipsis =\n !isEnoughSpace && page + boundaryCount + siblingCount + 1 < count;\n\n const leftPages = isLeftEllipsis\n ? ([1, boundaryCount] as PageRange)\n : undefined;\n\n const rightPages = isRightEllipsis\n ? ([count - boundaryCount + 1, count] as PageRange)\n : undefined;\n\n let middlePages: PageRange;\n\n if (!isLeftEllipsis) {\n middlePages = [\n 1,\n isRightEllipsis ? boundaryCount + 2 + 2 * siblingCount : count,\n ];\n } else if (!isRightEllipsis) {\n middlePages = [count - boundaryCount - 1 - 2 * siblingCount, count];\n } else {\n middlePages = [page - siblingCount, page + siblingCount];\n }\n\n return [leftPages, middlePages, rightPages] as const;\n}\n"],"names":[],"mappings":";;;;AAEO,SAAS,aACd,CAAA,IAAA,EACA,KACA,EAAA,aAAA,EACA,YACA,EAAA;AACA,EAAM,MAAA,mBAAA,GAAsB,CAAK,IAAA,aAAA,GAAgB,YAAgB,CAAA,GAAA,CAAA,CAAA;AACjE,EAAA,MAAM,gBAAgB,mBAAuB,IAAA,KAAA,CAAA;AAE7C,EAAA,MAAM,cACJ,GAAA,CAAC,aAAiB,IAAA,IAAA,GAAO,gBAAgB,YAAe,GAAA,CAAA,CAAA;AAE1D,EAAA,MAAM,kBACJ,CAAC,aAAA,IAAiB,IAAO,GAAA,aAAA,GAAgB,eAAe,CAAI,GAAA,KAAA,CAAA;AAE9D,EAAA,MAAM,SAAY,GAAA,cAAA,GACb,CAAC,CAAA,EAAG,aAAa,CAClB,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,MAAM,aAAa,eACd,GAAA,CAAC,QAAQ,aAAgB,GAAA,CAAA,EAAG,KAAK,CAClC,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAI,IAAA,WAAA,CAAA;AAEJ,EAAA,IAAI,CAAC,cAAgB,EAAA;AACnB,IAAc,WAAA,GAAA;AAAA,MACZ,CAAA;AAAA,MACA,eAAkB,GAAA,aAAA,GAAgB,CAAI,GAAA,CAAA,GAAI,YAAe,GAAA,KAAA;AAAA,KAC3D,CAAA;AAAA,GACF,MAAA,IAAW,CAAC,eAAiB,EAAA;AAC3B,IAAA,WAAA,GAAc,CAAC,KAAQ,GAAA,aAAA,GAAgB,CAAI,GAAA,CAAA,GAAI,cAAc,KAAK,CAAA,CAAA;AAAA,GAC7D,MAAA;AACL,IAAA,WAAA,GAAc,CAAC,IAAA,GAAO,YAAc,EAAA,IAAA,GAAO,YAAY,CAAA,CAAA;AAAA,GACzD;AAEA,EAAO,OAAA,CAAC,SAAW,EAAA,WAAA,EAAa,UAAU,CAAA,CAAA;AAC5C;;;;"}
@@ -1,19 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var PaginationContext = require('./PaginationContext.js');
7
-
8
- const usePaginationContext = () => {
9
- const context = React.useContext(PaginationContext.paginationContext);
10
- if (process.env.NODE_ENV !== "production") {
11
- if (!context) {
12
- console.error(`usePaginationContext should be used inside of Pagination`);
13
- }
14
- }
15
- return context;
16
- };
17
-
18
- exports.usePaginationContext = usePaginationContext;
19
- //# sourceMappingURL=usePaginationContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"usePaginationContext.js","sources":["../src/pagination/usePaginationContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { paginationContext } from \"./PaginationContext\";\n\nexport const usePaginationContext = () => {\n const context = useContext(paginationContext);\n if (process.env.NODE_ENV !== \"production\") {\n if (!context) {\n console.error(`usePaginationContext should be used inside of Pagination`);\n }\n }\n return context;\n};\n"],"names":["useContext","paginationContext"],"mappings":";;;;;;;AAGO,MAAM,uBAAuB,MAAM;AACxC,EAAM,MAAA,OAAA,GAAUA,iBAAWC,mCAAiB,CAAA,CAAA;AAC5C,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA,CAAQ,MAAM,CAA0D,wDAAA,CAAA,CAAA,CAAA;AAAA,KAC1E;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var css_248z = "/* Style applied to the root element */\n.saltScrim {\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n bottom: 0;\n height: 100%;\n display: flex;\n z-index: calc(var(--salt-zIndex-drawer) - 1);\n position: absolute;\n align-items: center;\n justify-content: center;\n background: var(--saltScrim-background, var(--salt-overlayable-background));\n -webkit-tap-highlight-color: transparent;\n}\n\n.saltScrim:focus {\n outline: none;\n}\n\n/* Style applied to the root element when fixed={true} */\n.saltScrim-fixed {\n position: fixed;\n}\n";
4
-
5
- module.exports = css_248z;
6
- //# sourceMappingURL=Scrim.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Scrim.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,40 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var clsx = require('clsx');
7
- var React = require('react');
8
- var core = require('@salt-ds/core');
9
- var window = require('@salt-ds/window');
10
- var styles = require('@salt-ds/styles');
11
- var Scrim$1 = require('./Scrim.css.js');
12
-
13
- const withBaseName = core.makePrefixer("saltScrim");
14
- const Scrim = React.forwardRef(function Scrim2({ className, children, fixed = false, open = true, ...rest }, ref) {
15
- const targetWindow = window.useWindow();
16
- styles.useComponentCssInjection({
17
- testId: "salt-scrim",
18
- css: Scrim$1,
19
- window: targetWindow
20
- });
21
- if (!open) {
22
- return null;
23
- }
24
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
25
- className: clsx.clsx(
26
- withBaseName(),
27
- {
28
- [withBaseName("fixed")]: fixed
29
- },
30
- className
31
- ),
32
- "data-testid": "scrim",
33
- ref,
34
- ...rest,
35
- children
36
- });
37
- });
38
-
39
- exports.Scrim = Scrim;
40
- //# sourceMappingURL=Scrim.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport scrimCss from \"./Scrim.css\";\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nexport interface ScrimProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true` the scrim is bound to the document viewport.\n * The default value of this prop is false, and the default behavior is for Scrim to be bound to its parent container (nearest positioned ancestor).\n */\n fixed?: boolean;\n /**\n * If `true` the scrim is shown.\n */\n open?: boolean;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n { className, children, fixed = false, open = true, ...rest },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-scrim\",\n css: scrimCss,\n window: targetWindow,\n });\n\n if (!open) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"fixed\")]: fixed,\n },\n className\n )}\n data-testid=\"scrim\"\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Scrim","useWindow","useComponentCssInjection","scrimCss","jsx","clsx"],"mappings":";;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,WAAW,CAAA,CAAA;AActC,MAAM,KAAQ,GAAAC,gBAAA,CAAuC,SAASC,MAAAA,CACnE,EAAE,SAAA,EAAW,QAAU,EAAA,KAAA,GAAQ,KAAO,EAAA,IAAA,GAAO,IAAS,EAAA,GAAA,IAAA,IACtD,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,OAC3B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,OAAA;AAAA,IACZ,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -1,31 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
-
3
- const ConditionalWrapper = ({
4
- children,
5
- className,
6
- parent,
7
- expanded,
8
- onExpand,
9
- active,
10
- href
11
- }) => {
12
- const handleExpand = (event) => {
13
- event.stopPropagation();
14
- onExpand == null ? void 0 : onExpand(event);
15
- };
16
- return parent || href === void 0 ? /* @__PURE__ */ jsx("button", {
17
- "aria-label": "expand",
18
- "aria-expanded": expanded,
19
- className,
20
- onClick: handleExpand,
21
- children
22
- }) : /* @__PURE__ */ jsx("a", {
23
- "aria-current": active ? "page" : void 0,
24
- href,
25
- className,
26
- children
27
- });
28
- };
29
-
30
- export { ConditionalWrapper };
31
- //# sourceMappingURL=ConditionalWrapper.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ConditionalWrapper.js","sources":["../src/navigation-item/ConditionalWrapper.tsx"],"sourcesContent":["import { MouseEvent, ReactNode } from \"react\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\ninterface ConditionalWrapperProps\n extends Pick<\n NavigationItemProps,\n \"parent\" | \"expanded\" | \"onExpand\" | \"active\" | \"href\" | \"onClick\"\n > {\n children: ReactNode;\n className: string;\n}\n\nexport const ConditionalWrapper = ({\n children,\n className,\n parent,\n expanded,\n onExpand,\n active,\n href,\n}: ConditionalWrapperProps) => {\n const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onExpand?.(event);\n };\n\n return parent || href === undefined ? (\n <button\n aria-label=\"expand\"\n aria-expanded={expanded}\n className={className}\n onClick={handleExpand}\n >\n {children}\n </button>\n ) : (\n <a\n aria-current={active ? \"page\" : undefined}\n href={href}\n className={className}\n >\n {children}\n </a>\n );\n};\n"],"names":[],"mappings":";;AAYO,MAAM,qBAAqB,CAAC;AAAA,EACjC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AACF,CAA+B,KAAA;AAC7B,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAO,OAAA,MAAA,IAAU,IAAS,KAAA,KAAA,CAAA,mBACvB,GAAA,CAAA,QAAA,EAAA;AAAA,IACC,YAAW,EAAA,QAAA;AAAA,IACX,eAAe,EAAA,QAAA;AAAA,IACf,SAAA;AAAA,IACA,OAAS,EAAA,YAAA;AAAA,IAER,QAAA;AAAA,GACH,oBAEC,GAAA,CAAA,GAAA,EAAA;AAAA,IACC,cAAA,EAAc,SAAS,MAAS,GAAA,KAAA,CAAA;AAAA,IAChC,IAAA;AAAA,IACA,SAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
@@ -1,25 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { ChevronDownIcon, ChevronRightIcon } from '@salt-ds/icons';
3
-
4
- const iconExpansionMap = {
5
- vertical: {
6
- expanded: ChevronDownIcon,
7
- collapsed: ChevronRightIcon
8
- },
9
- horizontal: {
10
- expanded: ChevronDownIcon,
11
- collapsed: ChevronDownIcon
12
- }
13
- };
14
- function ExpansionIcon({
15
- expanded = false,
16
- orientation = "horizontal"
17
- }) {
18
- const Icon = iconExpansionMap[orientation][expanded ? "expanded" : "collapsed"];
19
- return /* @__PURE__ */ jsx(Icon, {
20
- "aria-hidden": "true"
21
- });
22
- }
23
-
24
- export { ExpansionIcon };
25
- //# sourceMappingURL=ExpansionIcon.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ExpansionIcon.js","sources":["../src/navigation-item/ExpansionIcon.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\nconst iconExpansionMap = {\n vertical: {\n expanded: ChevronDownIcon,\n collapsed: ChevronRightIcon,\n },\n horizontal: {\n expanded: ChevronDownIcon,\n collapsed: ChevronDownIcon,\n },\n};\n\nexport function ExpansionIcon({\n expanded = false,\n orientation = \"horizontal\",\n}: Pick<NavigationItemProps, \"expanded\" | \"orientation\" | \"className\">) {\n const Icon =\n iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n return <Icon aria-hidden=\"true\" />;\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,gBAAmB,GAAA;AAAA,EACvB,QAAU,EAAA;AAAA,IACR,QAAU,EAAA,eAAA;AAAA,IACV,SAAW,EAAA,gBAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAA,eAAA;AAAA,IACV,SAAW,EAAA,eAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEO,SAAS,aAAc,CAAA;AAAA,EAC5B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA,YAAA;AAChB,CAAwE,EAAA;AACtE,EAAA,MAAM,IACJ,GAAA,gBAAA,CAAiB,WAAa,CAAA,CAAA,QAAA,GAAW,UAAa,GAAA,WAAA,CAAA,CAAA;AACxD,EAAA,uBAAQ,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,aAAY,EAAA,MAAA;AAAA,GAAO,CAAA,CAAA;AAClC;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem-wrapper {\n display: flex;\n gap: var(--salt-spacing-100);\n align-items: center;\n position: relative;\n background: none;\n border: none;\n font-size: var(--salt-text-fontSize);\n text-decoration: none;\n cursor: var(--salt-selectable-cursor-hover);\n /* Hover off animation */\n transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Vars applied to NavigationItem component when root */\n.saltNavigationItem-rootItem {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-label .saltIcon {\n top: var(--salt-spacing-25);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n padding: 0 var(--salt-spacing-100);\n width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n padding-top: 0;\n padding-bottom: 0;\n padding-right: var(--salt-spacing-100);\n padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n color: var(--salt-content-primary-foreground);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n flex: 1;\n text-align: left;\n display: flex;\n align-items: baseline;\n gap: var(--salt-spacing-100);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n margin-left: auto;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n content: \"\";\n position: absolute;\n top: var(--salt-spacing-25);\n left: 0;\n display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n width: 100%;\n height: var(--salt-size-indicator);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n width: var(--salt-size-indicator);\n left: var(--salt-spacing-25);\n height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n background: var(--salt-navigable-indicator-hover);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-active::after,\n.saltNavigationItem-active:hover::after,\n.saltNavigationItem-active:focus::after {\n background: var(--salt-navigable-indicator-active);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=NavigationItem.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NavigationItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,74 +0,0 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { forwardRef } from 'react';
3
- import { makePrefixer } from '@salt-ds/core';
4
- import { clsx } from 'clsx';
5
- import { ExpansionIcon } from './ExpansionIcon.js';
6
- import { ConditionalWrapper } from './ConditionalWrapper.js';
7
- import css_248z from './NavigationItem.css.js';
8
- import { useWindow } from '@salt-ds/window';
9
- import { useComponentCssInjection } from '@salt-ds/styles';
10
-
11
- const withBaseName = makePrefixer("saltNavigationItem");
12
- const NavigationItem = forwardRef(
13
- function NavigationItem2(props, ref) {
14
- const {
15
- active,
16
- blurActive,
17
- children,
18
- className,
19
- expanded = false,
20
- orientation = "horizontal",
21
- parent,
22
- level = 0,
23
- onExpand,
24
- href,
25
- style: styleProp,
26
- ...rest
27
- } = props;
28
- const targetWindow = useWindow();
29
- useComponentCssInjection({
30
- testId: "salt-navigation-item",
31
- css: css_248z,
32
- window: targetWindow
33
- });
34
- const style = {
35
- ...styleProp,
36
- "--saltNavigationItem-level": `${level}`
37
- };
38
- return /* @__PURE__ */ jsx("div", {
39
- ref,
40
- className: clsx(withBaseName(), className),
41
- style,
42
- ...rest,
43
- children: /* @__PURE__ */ jsxs(ConditionalWrapper, {
44
- className: clsx(
45
- withBaseName("wrapper"),
46
- {
47
- [withBaseName("active")]: active || blurActive,
48
- [withBaseName("blurActive")]: blurActive,
49
- [withBaseName("rootItem")]: level === 0
50
- },
51
- withBaseName(orientation)
52
- ),
53
- parent,
54
- expanded,
55
- onExpand,
56
- active,
57
- href,
58
- children: [
59
- /* @__PURE__ */ jsx("span", {
60
- className: withBaseName("label"),
61
- children
62
- }),
63
- parent && /* @__PURE__ */ jsx(ExpansionIcon, {
64
- expanded,
65
- orientation
66
- })
67
- ]
68
- })
69
- });
70
- }
71
- );
72
-
73
- export { NavigationItem };
74
- //# sourceMappingURL=NavigationItem.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport { ConditionalWrapper } from \"./ConditionalWrapper\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the navigation item is active.\n */\n active?: boolean;\n /**\n * Whether the nested group is collapsed and there is an active nested item within it.\n */\n blurActive?: boolean;\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * Level of nesting.\n */\n level?: number;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * Whether the navigation item is a parent with nested items.\n */\n parent?: boolean;\n /**\n * Action to be triggered when the navigation item is expanded.\n */\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /**\n * Href to be passed to the Link element.\n */\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n function NavigationItem(props, ref) {\n const {\n active,\n blurActive,\n children,\n className,\n expanded = false,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n href,\n style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-navigation-item\",\n css: navigationItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavigationItem-level\": `${level}`,\n };\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n style={style}\n {...rest}\n >\n <ConditionalWrapper\n className={clsx(\n withBaseName(\"wrapper\"),\n {\n [withBaseName(\"active\")]: active || blurActive,\n [withBaseName(\"blurActive\")]: blurActive,\n [withBaseName(\"rootItem\")]: level === 0,\n },\n withBaseName(orientation)\n )}\n parent={parent}\n expanded={expanded}\n onExpand={onExpand}\n active={active}\n href={href}\n >\n <span className={withBaseName(\"label\")}>{children}</span>\n {parent && (\n <ExpansionIcon expanded={expanded} orientation={orientation} />\n )}\n </ConditionalWrapper>\n </div>\n );\n }\n);\n"],"names":["NavigationItem","navigationItemCss"],"mappings":";;;;;;;;;;AA6CA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,8BAA8B,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KACnC,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,IAAA,CAAA,kBAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,SAAS,CAAA;AAAA,UACtB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,MAAU,IAAA,UAAA;AAAA,YACpC,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,YAC9B,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,WACxC;AAAA,UACA,aAAa,WAAW,CAAA;AAAA,SAC1B;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,UACjD,0BACE,GAAA,CAAA,aAAA,EAAA;AAAA,YAAc,QAAA;AAAA,YAAoB,WAAA;AAAA,WAA0B,CAAA;AAAA,SAAA;AAAA,OAEjE,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = ".saltCompactInput {\n --saltInput-paddingLeft: 0;\n --saltInput-paddingRight: 0;\n}\n\n.saltCompactInput-defaultSize.saltInput {\n --saltInput-minWidth: var(--salt-size-base);\n width: var(--salt-size-base);\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=CompactInput.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CompactInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,58 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { clsx } from 'clsx';
3
- import { forwardRef, useState, useEffect } from 'react';
4
- import { makePrefixer, Input } from '@salt-ds/core';
5
- import { usePaginationContext } from './usePaginationContext.js';
6
- import { useWindow } from '@salt-ds/window';
7
- import { useComponentCssInjection } from '@salt-ds/styles';
8
- import css_248z from './CompactInput.css.js';
9
-
10
- const withBaseName = makePrefixer("saltCompactInput");
11
- const CompactInput = forwardRef(function CompactInput2(props, ref) {
12
- const targetWindow = useWindow();
13
- useComponentCssInjection({
14
- testId: "salt-compact-input",
15
- css: css_248z,
16
- window: targetWindow
17
- });
18
- const { count, page, onPageChange } = usePaginationContext();
19
- const [inputValue, setInputValue] = useState(`${page}`);
20
- useEffect(() => {
21
- setInputValue(`${page}`);
22
- }, [page]);
23
- const handleChange = (event) => {
24
- setInputValue(event.target.value);
25
- };
26
- const handleKeyDown = (event) => {
27
- if (event.key === "Enter") {
28
- const pageValue = Number(inputValue);
29
- if (!isNaN(pageValue) && pageValue <= count && pageValue > 0) {
30
- onPageChange(event, pageValue);
31
- } else {
32
- setInputValue(`${page}`);
33
- }
34
- }
35
- };
36
- const handleBlur = () => {
37
- setInputValue(`${page}`);
38
- };
39
- return /* @__PURE__ */ jsx(Input, {
40
- className: clsx(withBaseName(), {
41
- [withBaseName("defaultSize")]: count < 100
42
- }),
43
- inputProps: {
44
- "aria-label": `Go to page, ${count} total`,
45
- style: { width: `${`${count}`.length}ch` }
46
- },
47
- onBlur: handleBlur,
48
- onChange: handleChange,
49
- onKeyDown: handleKeyDown,
50
- value: inputValue,
51
- textAlign: "center",
52
- ref,
53
- ...props
54
- });
55
- });
56
-
57
- export { CompactInput };
58
- //# sourceMappingURL=CompactInput.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CompactInput.js","sources":["../src/pagination/CompactInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n KeyboardEventHandler,\n forwardRef,\n useEffect,\n useState,\n} from \"react\";\nimport { Input, InputProps, makePrefixer } from \"@salt-ds/core\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport compactInputCss from \"./CompactInput.css\";\n\nconst withBaseName = makePrefixer(\"saltCompactInput\");\n\nexport const CompactInput = forwardRef<\n HTMLInputElement,\n Pick<InputProps, \"inputRef\" | \"variant\">\n>(function CompactInput(props, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-compact-input\",\n css: compactInputCss,\n window: targetWindow,\n });\n\n const { count, page, onPageChange } = usePaginationContext();\n\n const [inputValue, setInputValue] = useState(`${page}`);\n\n useEffect(() => {\n setInputValue(`${page}`);\n }, [page]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n setInputValue(event.target.value);\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n if (event.key === \"Enter\") {\n const pageValue = Number(inputValue);\n if (!isNaN(pageValue) && pageValue <= count && pageValue > 0) {\n onPageChange(event, pageValue);\n } else {\n setInputValue(`${page}`);\n }\n }\n };\n\n const handleBlur = () => {\n setInputValue(`${page}`);\n };\n\n return (\n <Input\n className={clsx(withBaseName(), {\n [withBaseName(\"defaultSize\")]: count < 100,\n })}\n inputProps={{\n \"aria-label\": `Go to page, ${count} total`,\n style: { width: `${`${count}`.length}ch` },\n }}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n value={inputValue}\n textAlign={\"center\"}\n ref={ref}\n {...props}\n />\n );\n});\n"],"names":["CompactInput","compactInputCss"],"mappings":";;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA,CAG1B,SAASA,aAAAA,CAAa,OAAO,GAAK,EAAA;AAClC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiB,oBAAqB,EAAA,CAAA;AAE3D,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,QAAA,CAAS,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,GAClC,CAAA;AAEA,EAAM,MAAA,aAAA,GAAwD,CAAC,KAAU,KAAA;AACvE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,MAAA,IAAI,CAAC,KAAM,CAAA,SAAS,KAAK,SAAa,IAAA,KAAA,IAAS,YAAY,CAAG,EAAA;AAC5D,QAAA,YAAA,CAAa,OAAO,SAAS,CAAA,CAAA;AAAA,OACxB,MAAA;AACL,QAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,KAAQ,GAAA,GAAA;AAAA,KACxC,CAAA;AAAA,IACD,UAAY,EAAA;AAAA,MACV,cAAc,CAAe,YAAA,EAAA,KAAA,CAAA,MAAA,CAAA;AAAA,MAC7B,OAAO,EAAE,KAAA,EAAO,CAAG,EAAA,CAAA,EAAG,QAAQ,MAAW,CAAA,EAAA,CAAA,EAAA;AAAA,KAC3C;AAAA,IACA,MAAQ,EAAA,UAAA;AAAA,IACR,QAAU,EAAA,YAAA;AAAA,IACV,SAAW,EAAA,aAAA;AAAA,IACX,KAAO,EAAA,UAAA;AAAA,IACP,SAAW,EAAA,QAAA;AAAA,IACX,GAAA;AAAA,IACC,GAAG,KAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = ".saltCompactPaginator {\n flex-wrap: nowrap;\n display: flex;\n gap: var(--salt-spacing-100);\n align-items: center;\n}\n\n.saltCompactPaginator-arrowButton {\n --saltButton-width: var(--salt-size-base);\n --saltButton-height: var(--salt-size-base);\n --saltButton-padding: var(--salt-spacing-100);\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=CompactPaginator.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CompactPaginator.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,72 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { forwardRef } from 'react';
3
- import { clsx } from 'clsx';
4
- import { makePrefixer, Button, Text } from '@salt-ds/core';
5
- import { ChevronLeftIcon, ChevronRightIcon } from '@salt-ds/icons';
6
- import { PageButton } from './PageButton.js';
7
- import { usePaginationContext } from './usePaginationContext.js';
8
- import { useWindow } from '@salt-ds/window';
9
- import { useComponentCssInjection } from '@salt-ds/styles';
10
- import css_248z from './CompactPaginator.css.js';
11
-
12
- const withBaseName = makePrefixer("saltCompactPaginator");
13
- const CompactPaginator = forwardRef(function CompactPaginator2({ children, className, ...restProps }, ref) {
14
- const targetWindow = useWindow();
15
- useComponentCssInjection({
16
- testId: "salt-compact-paginator",
17
- css: css_248z,
18
- window: targetWindow
19
- });
20
- const { count, page, onPageChange } = usePaginationContext();
21
- const onPreviousPage = (event) => {
22
- onPageChange(event, Math.max(1, page - 1));
23
- };
24
- const onNextPage = (event) => {
25
- onPageChange(event, Math.min(page + 1, count));
26
- };
27
- const isOnFirstPage = page === 1;
28
- const isOnLastPage = page === count;
29
- return /* @__PURE__ */ jsxs("div", {
30
- className: clsx(withBaseName(), className),
31
- ...restProps,
32
- ref,
33
- children: [
34
- /* @__PURE__ */ jsx(Button, {
35
- variant: "secondary",
36
- "aria-label": "Previous Page",
37
- onClick: onPreviousPage,
38
- disabled: isOnFirstPage,
39
- className: withBaseName("arrowButton"),
40
- children: /* @__PURE__ */ jsx(ChevronLeftIcon, {
41
- "aria-hidden": true
42
- })
43
- }),
44
- children ? children : /* @__PURE__ */ jsx(PageButton, {
45
- page,
46
- disabled: true
47
- }),
48
- /* @__PURE__ */ jsx(Text, {
49
- as: "span",
50
- variant: "secondary",
51
- children: "of"
52
- }),
53
- /* @__PURE__ */ jsx(PageButton, {
54
- page: count,
55
- disabled: isOnLastPage
56
- }),
57
- /* @__PURE__ */ jsx(Button, {
58
- variant: "secondary",
59
- "aria-label": "Next Page",
60
- onClick: onNextPage,
61
- disabled: isOnLastPage,
62
- className: withBaseName("arrowButton"),
63
- children: /* @__PURE__ */ jsx(ChevronRightIcon, {
64
- "aria-hidden": true
65
- })
66
- })
67
- ]
68
- });
69
- });
70
-
71
- export { CompactPaginator };
72
- //# sourceMappingURL=CompactPaginator.js.map
@@ -1 +0,0 @@
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":["CompactPaginator","compactPaginatorCss"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAE3C,MAAA,gBAAA,GAAmB,WAG9B,SAASA,iBAAAA,CAAiB,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EAAG,GAAK,EAAA;AACtE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiB,oBAAqB,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,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAC9D,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,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,kBAAA,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,aAAW,EAAA,IAAA;AAAA,SAAC,CAAA;AAAA,OAC/B,CAAA;AAAA,MACC,QAAA,GAAW,2BAAY,GAAA,CAAA,UAAA,EAAA;AAAA,QAAW,IAAA;AAAA,QAAY,QAAQ,EAAA,IAAA;AAAA,OAAC,CAAA;AAAA,sBACvD,GAAA,CAAA,IAAA,EAAA;AAAA,QAAK,EAAG,EAAA,MAAA;AAAA,QAAO,OAAQ,EAAA,WAAA;AAAA,QAAY,QAAA,EAAA,IAAA;AAAA,OAEpC,CAAA;AAAA,sBACC,GAAA,CAAA,UAAA,EAAA;AAAA,QAAW,IAAM,EAAA,KAAA;AAAA,QAAO,QAAU,EAAA,YAAA;AAAA,OAAc,CAAA;AAAA,sBAChD,GAAA,CAAA,MAAA,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,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,UAAiB,aAAW,EAAA,IAAA;AAAA,SAAC,CAAA;AAAA,OAChC,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -1,4 +0,0 @@
1
- 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";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=GoToInput.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"GoToInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,73 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { clsx } from 'clsx';
3
- import { forwardRef, useState } from 'react';
4
- import { makePrefixer, FormField, FormFieldLabel, Input } from '@salt-ds/core';
5
- import { usePaginationContext } from './usePaginationContext.js';
6
- import { useWindow } from '@salt-ds/window';
7
- import { useComponentCssInjection } from '@salt-ds/styles';
8
- import css_248z from './GoToInput.css.js';
9
-
10
- const withBaseName = makePrefixer("saltGoToInput");
11
- const GoToInput = forwardRef(
12
- function GoToInput2({
13
- className,
14
- inputRef,
15
- inputVariant = "primary",
16
- label = "Go to",
17
- ...restProps
18
- }, ref) {
19
- const targetWindow = useWindow();
20
- useComponentCssInjection({
21
- testId: "salt-go-to-input",
22
- css: css_248z,
23
- window: targetWindow
24
- });
25
- const { count, onPageChange } = usePaginationContext();
26
- const [inputValue, setInputValue] = useState("");
27
- const onChange = (event) => {
28
- setInputValue(event.target.value);
29
- };
30
- const onKeyDown = (event) => {
31
- if (event.key === "Enter") {
32
- const pageValue = Number(inputValue);
33
- if (!inputValue.startsWith("0") && !isNaN(pageValue) && pageValue > 0 && pageValue <= count) {
34
- onPageChange(event, pageValue);
35
- }
36
- setInputValue("");
37
- }
38
- };
39
- const onBlur = () => {
40
- setInputValue("");
41
- };
42
- const widthCh = `${`${count}`.length}ch`;
43
- return /* @__PURE__ */ jsxs(FormField, {
44
- labelPlacement: "left",
45
- className: clsx(withBaseName(), className),
46
- ref,
47
- ...restProps,
48
- children: [
49
- /* @__PURE__ */ jsx(FormFieldLabel, {
50
- children: label
51
- }),
52
- /* @__PURE__ */ jsx(Input, {
53
- className: clsx(withBaseName("input"), {
54
- [withBaseName("inputDefaultSize")]: count < 100
55
- }),
56
- ref: inputRef,
57
- inputProps: {
58
- style: { width: widthCh }
59
- },
60
- onBlur,
61
- onChange,
62
- onKeyDown,
63
- value: inputValue,
64
- textAlign: "center",
65
- variant: inputVariant
66
- })
67
- ]
68
- });
69
- }
70
- );
71
-
72
- export { GoToInput };
73
- //# sourceMappingURL=GoToInput.js.map
@@ -1 +0,0 @@
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":["GoToInput","goToInputCss"],"mappings":";;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAgB1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,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,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAI,oBAAqB,EAAA,CAAA;AACrD,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,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,uBACG,IAAA,CAAA,SAAA,EAAA;AAAA,MACC,cAAe,EAAA,MAAA;AAAA,MACf,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,cAAA,EAAA;AAAA,UAAgB,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,wBACtB,GAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAA,IAAA,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;;;;"}
@@ -1,4 +0,0 @@
1
- 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";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=PageButton.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PageButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,40 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { forwardRef } from 'react';
3
- import { clsx } from 'clsx';
4
- import { makePrefixer, Button } from '@salt-ds/core';
5
- import { usePaginationContext } from './usePaginationContext.js';
6
- import { useWindow } from '@salt-ds/window';
7
- import { useComponentCssInjection } from '@salt-ds/styles';
8
- import css_248z from './PageButton.css.js';
9
-
10
- const withBaseName = makePrefixer("saltPageButton");
11
- const PageButton = forwardRef(
12
- function PageButton2({ page, selected, disabled }, ref) {
13
- const targetWindow = useWindow();
14
- useComponentCssInjection({
15
- testId: "salt-page-button",
16
- css: css_248z,
17
- window: targetWindow
18
- });
19
- const { count, onPageChange } = usePaginationContext();
20
- const onClick = (event) => {
21
- onPageChange(event, page);
22
- };
23
- return /* @__PURE__ */ jsx(Button, {
24
- "aria-label": `Page ${page} of ${count}`,
25
- "aria-current": selected ? "page" : void 0,
26
- variant: "secondary",
27
- className: clsx(withBaseName(), {
28
- [withBaseName("selected")]: selected,
29
- [withBaseName("fixed")]: page < 100
30
- }),
31
- onClick,
32
- disabled,
33
- ref,
34
- children: page
35
- });
36
- }
37
- );
38
-
39
- export { PageButton };
40
- //# sourceMappingURL=PageButton.js.map