@salt-ds/lab 1.0.0-alpha.27 → 1.0.0-alpha.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/salt-lab.css +1 -200
- package/dist-cjs/index.js +0 -14
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/layer-layout/LayerLayout.js +1 -2
- package/dist-cjs/layer-layout/LayerLayout.js.map +1 -1
- package/dist-es/index.js +0 -7
- package/dist-es/index.js.map +1 -1
- package/dist-es/layer-layout/LayerLayout.js +1 -2
- package/dist-es/layer-layout/LayerLayout.js.map +1 -1
- package/dist-types/index.d.ts +0 -3
- package/dist-types/layer-layout/LayerLayout.d.ts +1 -1
- package/package.json +2 -2
- package/dist-cjs/navigation-item/ConditionalWrapper.js +0 -35
- package/dist-cjs/navigation-item/ConditionalWrapper.js.map +0 -1
- package/dist-cjs/navigation-item/ExpansionIcon.js +0 -29
- package/dist-cjs/navigation-item/ExpansionIcon.js.map +0 -1
- package/dist-cjs/navigation-item/NavigationItem.css.js +0 -6
- package/dist-cjs/navigation-item/NavigationItem.css.js.map +0 -1
- package/dist-cjs/navigation-item/NavigationItem.js +0 -78
- package/dist-cjs/navigation-item/NavigationItem.js.map +0 -1
- package/dist-cjs/pagination/CompactInput.css.js +0 -6
- package/dist-cjs/pagination/CompactInput.css.js.map +0 -1
- package/dist-cjs/pagination/CompactInput.js +0 -62
- package/dist-cjs/pagination/CompactInput.js.map +0 -1
- package/dist-cjs/pagination/CompactPaginator.css.js +0 -6
- package/dist-cjs/pagination/CompactPaginator.css.js.map +0 -1
- package/dist-cjs/pagination/CompactPaginator.js +0 -76
- package/dist-cjs/pagination/CompactPaginator.js.map +0 -1
- package/dist-cjs/pagination/GoToInput.css.js +0 -6
- package/dist-cjs/pagination/GoToInput.css.js.map +0 -1
- package/dist-cjs/pagination/GoToInput.js +0 -77
- package/dist-cjs/pagination/GoToInput.js.map +0 -1
- package/dist-cjs/pagination/PageButton.css.js +0 -6
- package/dist-cjs/pagination/PageButton.css.js.map +0 -1
- package/dist-cjs/pagination/PageButton.js +0 -44
- package/dist-cjs/pagination/PageButton.js.map +0 -1
- package/dist-cjs/pagination/PageRanges.css.js +0 -6
- package/dist-cjs/pagination/PageRanges.css.js.map +0 -1
- package/dist-cjs/pagination/PageRanges.js +0 -73
- package/dist-cjs/pagination/PageRanges.js.map +0 -1
- package/dist-cjs/pagination/Pagination.css.js +0 -6
- package/dist-cjs/pagination/Pagination.css.js.map +0 -1
- package/dist-cjs/pagination/Pagination.js +0 -78
- package/dist-cjs/pagination/Pagination.js.map +0 -1
- package/dist-cjs/pagination/PaginationContext.js +0 -17
- package/dist-cjs/pagination/PaginationContext.js.map +0 -1
- package/dist-cjs/pagination/Paginator.css.js +0 -6
- package/dist-cjs/pagination/Paginator.css.js.map +0 -1
- package/dist-cjs/pagination/Paginator.js +0 -69
- package/dist-cjs/pagination/Paginator.js.map +0 -1
- package/dist-cjs/pagination/usePagination.js +0 -27
- package/dist-cjs/pagination/usePagination.js.map +0 -1
- package/dist-cjs/pagination/usePaginationContext.js +0 -19
- package/dist-cjs/pagination/usePaginationContext.js.map +0 -1
- package/dist-cjs/scrim/Scrim.css.js +0 -6
- package/dist-cjs/scrim/Scrim.css.js.map +0 -1
- package/dist-cjs/scrim/Scrim.js +0 -40
- package/dist-cjs/scrim/Scrim.js.map +0 -1
- package/dist-es/navigation-item/ConditionalWrapper.js +0 -31
- package/dist-es/navigation-item/ConditionalWrapper.js.map +0 -1
- package/dist-es/navigation-item/ExpansionIcon.js +0 -25
- package/dist-es/navigation-item/ExpansionIcon.js.map +0 -1
- package/dist-es/navigation-item/NavigationItem.css.js +0 -4
- package/dist-es/navigation-item/NavigationItem.css.js.map +0 -1
- package/dist-es/navigation-item/NavigationItem.js +0 -74
- package/dist-es/navigation-item/NavigationItem.js.map +0 -1
- package/dist-es/pagination/CompactInput.css.js +0 -4
- package/dist-es/pagination/CompactInput.css.js.map +0 -1
- package/dist-es/pagination/CompactInput.js +0 -58
- package/dist-es/pagination/CompactInput.js.map +0 -1
- package/dist-es/pagination/CompactPaginator.css.js +0 -4
- package/dist-es/pagination/CompactPaginator.css.js.map +0 -1
- package/dist-es/pagination/CompactPaginator.js +0 -72
- package/dist-es/pagination/CompactPaginator.js.map +0 -1
- package/dist-es/pagination/GoToInput.css.js +0 -4
- package/dist-es/pagination/GoToInput.css.js.map +0 -1
- package/dist-es/pagination/GoToInput.js +0 -73
- package/dist-es/pagination/GoToInput.js.map +0 -1
- package/dist-es/pagination/PageButton.css.js +0 -4
- package/dist-es/pagination/PageButton.css.js.map +0 -1
- package/dist-es/pagination/PageButton.js +0 -40
- package/dist-es/pagination/PageButton.js.map +0 -1
- package/dist-es/pagination/PageRanges.css.js +0 -4
- package/dist-es/pagination/PageRanges.css.js.map +0 -1
- package/dist-es/pagination/PageRanges.js +0 -69
- package/dist-es/pagination/PageRanges.js.map +0 -1
- package/dist-es/pagination/Pagination.css.js +0 -4
- package/dist-es/pagination/Pagination.css.js.map +0 -1
- package/dist-es/pagination/Pagination.js +0 -74
- package/dist-es/pagination/Pagination.js.map +0 -1
- package/dist-es/pagination/PaginationContext.js +0 -13
- package/dist-es/pagination/PaginationContext.js.map +0 -1
- package/dist-es/pagination/Paginator.css.js +0 -4
- package/dist-es/pagination/Paginator.css.js.map +0 -1
- package/dist-es/pagination/Paginator.js +0 -65
- package/dist-es/pagination/Paginator.js.map +0 -1
- package/dist-es/pagination/usePagination.js +0 -23
- package/dist-es/pagination/usePagination.js.map +0 -1
- package/dist-es/pagination/usePaginationContext.js +0 -15
- package/dist-es/pagination/usePaginationContext.js.map +0 -1
- package/dist-es/scrim/Scrim.css.js +0 -4
- package/dist-es/scrim/Scrim.css.js.map +0 -1
- package/dist-es/scrim/Scrim.js +0 -36
- package/dist-es/scrim/Scrim.js.map +0 -1
- package/dist-types/navigation-item/ConditionalWrapper.d.ts +0 -8
- package/dist-types/navigation-item/ExpansionIcon.d.ts +0 -2
- package/dist-types/navigation-item/NavigationItem.d.ts +0 -36
- package/dist-types/navigation-item/index.d.ts +0 -1
- package/dist-types/pagination/CompactInput.d.ts +0 -2
- package/dist-types/pagination/CompactPaginator.d.ts +0 -1
- package/dist-types/pagination/GoToInput.d.ts +0 -16
- package/dist-types/pagination/PageButton.d.ts +0 -6
- package/dist-types/pagination/PageRanges.d.ts +0 -5
- package/dist-types/pagination/Pagination.d.ts +0 -20
- package/dist-types/pagination/PaginationContext.d.ts +0 -7
- package/dist-types/pagination/Paginator.d.ts +0 -12
- package/dist-types/pagination/index.d.ts +0 -5
- package/dist-types/pagination/usePagination.d.ts +0 -2
- package/dist-types/pagination/usePaginationContext.d.ts +0 -1
- package/dist-types/scrim/Scrim.d.ts +0 -13
- package/dist-types/scrim/index.d.ts +0 -1
- package/dist-types/scrim/internal/PreventFocus.d.ts +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"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":";;;;;;"}
|
package/dist-cjs/scrim/Scrim.js
DELETED
|
@@ -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
|