@salt-ds/core 1.13.4 → 1.15.0
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-core.css +269 -1
- package/dist-cjs/checkbox/Checkbox.js +8 -8
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js +6 -3
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js +11 -5
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/checkbox/internal/useCheckboxGroup.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/index.js +16 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/ConditionalWrapper.js +35 -0
- package/dist-cjs/navigation-item/ConditionalWrapper.js.map +1 -0
- package/dist-cjs/navigation-item/ExpansionIcon.js +29 -0
- package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -0
- package/dist-cjs/navigation-item/NavigationItem.css.js +6 -0
- package/dist-cjs/navigation-item/NavigationItem.css.js.map +1 -0
- package/dist-cjs/navigation-item/NavigationItem.js +82 -0
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -0
- package/dist-cjs/pagination/CompactInput.css.js +6 -0
- package/dist-cjs/pagination/CompactInput.css.js.map +1 -0
- package/dist-cjs/pagination/CompactInput.js +67 -0
- package/dist-cjs/pagination/CompactInput.js.map +1 -0
- package/dist-cjs/pagination/CompactPaginator.css.js +6 -0
- package/dist-cjs/pagination/CompactPaginator.css.js.map +1 -0
- package/dist-cjs/pagination/CompactPaginator.js +87 -0
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -0
- package/dist-cjs/pagination/GoToInput.css.js +6 -0
- package/dist-cjs/pagination/GoToInput.css.js.map +1 -0
- package/dist-cjs/pagination/GoToInput.js +92 -0
- package/dist-cjs/pagination/GoToInput.js.map +1 -0
- package/dist-cjs/pagination/PageButton.css.js +6 -0
- package/dist-cjs/pagination/PageButton.css.js.map +1 -0
- package/dist-cjs/pagination/PageButton.js +49 -0
- package/dist-cjs/pagination/PageButton.js.map +1 -0
- package/dist-cjs/pagination/PageRanges.css.js +6 -0
- package/dist-cjs/pagination/PageRanges.css.js.map +1 -0
- package/dist-cjs/pagination/PageRanges.js +78 -0
- package/dist-cjs/pagination/PageRanges.js.map +1 -0
- package/dist-cjs/pagination/Pagination.css.js +6 -0
- package/dist-cjs/pagination/Pagination.css.js.map +1 -0
- package/dist-cjs/pagination/Pagination.js +85 -0
- package/dist-cjs/pagination/Pagination.js.map +1 -0
- package/dist-cjs/pagination/PaginationContext.js +17 -0
- package/dist-cjs/pagination/PaginationContext.js.map +1 -0
- package/dist-cjs/pagination/Paginator.css.js +6 -0
- package/dist-cjs/pagination/Paginator.css.js.map +1 -0
- package/dist-cjs/pagination/Paginator.js +74 -0
- package/dist-cjs/pagination/Paginator.js.map +1 -0
- package/dist-cjs/pagination/usePagination.js +27 -0
- package/dist-cjs/pagination/usePagination.js.map +1 -0
- package/dist-cjs/pagination/usePaginationContext.js +19 -0
- package/dist-cjs/pagination/usePaginationContext.js.map +1 -0
- package/dist-cjs/pill/Pill.css.js +6 -0
- package/dist-cjs/pill/Pill.css.js.map +1 -0
- package/dist-cjs/pill/Pill.js +64 -0
- package/dist-cjs/pill/Pill.js.map +1 -0
- package/dist-cjs/radio-button/RadioButton.js +11 -11
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js +6 -3
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js +1 -4
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/scrim/Scrim.css.js +6 -0
- package/dist-cjs/scrim/Scrim.css.js.map +1 -0
- package/dist-cjs/scrim/Scrim.js +44 -0
- package/dist-cjs/scrim/Scrim.js.map +1 -0
- package/dist-cjs/switch/Switch.js +1 -1
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +3 -2
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.js +1 -1
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +8 -8
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js +6 -3
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js +11 -5
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/checkbox/internal/useCheckboxGroup.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/index.js +8 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/ConditionalWrapper.js +31 -0
- package/dist-es/navigation-item/ConditionalWrapper.js.map +1 -0
- package/dist-es/navigation-item/ExpansionIcon.js +25 -0
- package/dist-es/navigation-item/ExpansionIcon.js.map +1 -0
- package/dist-es/navigation-item/NavigationItem.css.js +4 -0
- package/dist-es/navigation-item/NavigationItem.css.js.map +1 -0
- package/dist-es/navigation-item/NavigationItem.js +78 -0
- package/dist-es/navigation-item/NavigationItem.js.map +1 -0
- package/dist-es/pagination/CompactInput.css.js +4 -0
- package/dist-es/pagination/CompactInput.css.js.map +1 -0
- package/dist-es/pagination/CompactInput.js +63 -0
- package/dist-es/pagination/CompactInput.js.map +1 -0
- package/dist-es/pagination/CompactPaginator.css.js +4 -0
- package/dist-es/pagination/CompactPaginator.css.js.map +1 -0
- package/dist-es/pagination/CompactPaginator.js +83 -0
- package/dist-es/pagination/CompactPaginator.js.map +1 -0
- package/dist-es/pagination/GoToInput.css.js +4 -0
- package/dist-es/pagination/GoToInput.css.js.map +1 -0
- package/dist-es/pagination/GoToInput.js +88 -0
- package/dist-es/pagination/GoToInput.js.map +1 -0
- package/dist-es/pagination/PageButton.css.js +4 -0
- package/dist-es/pagination/PageButton.css.js.map +1 -0
- package/dist-es/pagination/PageButton.js +45 -0
- package/dist-es/pagination/PageButton.js.map +1 -0
- package/dist-es/pagination/PageRanges.css.js +4 -0
- package/dist-es/pagination/PageRanges.css.js.map +1 -0
- package/dist-es/pagination/PageRanges.js +74 -0
- package/dist-es/pagination/PageRanges.js.map +1 -0
- package/dist-es/pagination/Pagination.css.js +4 -0
- package/dist-es/pagination/Pagination.css.js.map +1 -0
- package/dist-es/pagination/Pagination.js +81 -0
- package/dist-es/pagination/Pagination.js.map +1 -0
- package/dist-es/pagination/PaginationContext.js +13 -0
- package/dist-es/pagination/PaginationContext.js.map +1 -0
- package/dist-es/pagination/Paginator.css.js +4 -0
- package/dist-es/pagination/Paginator.css.js.map +1 -0
- package/dist-es/pagination/Paginator.js +70 -0
- package/dist-es/pagination/Paginator.js.map +1 -0
- package/dist-es/pagination/usePagination.js +23 -0
- package/dist-es/pagination/usePagination.js.map +1 -0
- package/dist-es/pagination/usePaginationContext.js +15 -0
- package/dist-es/pagination/usePaginationContext.js.map +1 -0
- package/dist-es/pill/Pill.css.js +4 -0
- package/dist-es/pill/Pill.css.js.map +1 -0
- package/dist-es/pill/Pill.js +56 -0
- package/dist-es/pill/Pill.js.map +1 -0
- package/dist-es/radio-button/RadioButton.js +11 -11
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js +6 -3
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js +1 -4
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/scrim/Scrim.css.js +4 -0
- package/dist-es/scrim/Scrim.css.js.map +1 -0
- package/dist-es/scrim/Scrim.js +40 -0
- package/dist-es/scrim/Scrim.js.map +1 -0
- package/dist-es/switch/Switch.js +1 -1
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +3 -2
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/tooltip/Tooltip.js +1 -1
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-types/checkbox/internal/CheckboxGroupContext.d.ts +1 -3
- package/dist-types/checkbox/internal/useCheckboxGroup.d.ts +1 -2
- package/dist-types/form-field-context/FormFieldContext.d.ts +1 -2
- package/dist-types/index.d.ts +4 -0
- package/dist-types/navigation-item/ConditionalWrapper.d.ts +8 -0
- package/dist-types/navigation-item/ExpansionIcon.d.ts +2 -0
- package/dist-types/navigation-item/NavigationItem.d.ts +36 -0
- package/dist-types/navigation-item/index.d.ts +1 -0
- package/dist-types/pagination/CompactInput.d.ts +2 -0
- package/dist-types/pagination/CompactPaginator.d.ts +1 -0
- package/dist-types/pagination/GoToInput.d.ts +16 -0
- package/dist-types/pagination/PageButton.d.ts +6 -0
- package/dist-types/pagination/PageRanges.d.ts +5 -0
- package/dist-types/pagination/Pagination.d.ts +20 -0
- package/dist-types/pagination/PaginationContext.d.ts +7 -0
- package/dist-types/pagination/Paginator.d.ts +12 -0
- package/dist-types/pagination/index.d.ts +5 -0
- package/dist-types/pagination/usePagination.d.ts +2 -0
- package/dist-types/pagination/usePaginationContext.d.ts +1 -0
- package/dist-types/pill/Pill.d.ts +4 -0
- package/dist-types/pill/index.d.ts +1 -0
- package/dist-types/radio-button/internal/RadioGroupContext.d.ts +1 -3
- package/dist-types/radio-button/internal/useRadioGroup.d.ts +1 -1
- package/dist-types/scrim/Scrim.d.ts +13 -0
- package/dist-types/scrim/index.d.ts +1 -0
- package/dist-types/toggle-button/ToggleButton.d.ts +3 -3
- package/dist-types/toggle-button-group/ToggleButtonGroup.d.ts +3 -2
- package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +5 -3
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
|
+
import { Button } from '../button/Button.js';
|
|
5
|
+
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
6
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
7
|
+
import '../utils/useId.js';
|
|
8
|
+
import '../salt-provider/SaltProvider.js';
|
|
9
|
+
import '../viewport/ViewportProvider.js';
|
|
10
|
+
import { usePaginationContext } from './usePaginationContext.js';
|
|
11
|
+
import { useWindow } from '@salt-ds/window';
|
|
12
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
13
|
+
import css_248z from './PageButton.css.js';
|
|
14
|
+
|
|
15
|
+
const withBaseName = makePrefixer("saltPageButton");
|
|
16
|
+
const PageButton = forwardRef(
|
|
17
|
+
function PageButton2({ page, selected, disabled }, ref) {
|
|
18
|
+
const targetWindow = useWindow();
|
|
19
|
+
useComponentCssInjection({
|
|
20
|
+
testId: "salt-page-button",
|
|
21
|
+
css: css_248z,
|
|
22
|
+
window: targetWindow
|
|
23
|
+
});
|
|
24
|
+
const { count, onPageChange } = usePaginationContext();
|
|
25
|
+
const onClick = (event) => {
|
|
26
|
+
onPageChange(event, page);
|
|
27
|
+
};
|
|
28
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
29
|
+
"aria-label": `Page ${page} of ${count}`,
|
|
30
|
+
"aria-current": selected ? "page" : void 0,
|
|
31
|
+
variant: "secondary",
|
|
32
|
+
className: clsx(withBaseName(), {
|
|
33
|
+
[withBaseName("selected")]: selected,
|
|
34
|
+
[withBaseName("fixed")]: page < 100
|
|
35
|
+
}),
|
|
36
|
+
onClick,
|
|
37
|
+
disabled,
|
|
38
|
+
ref,
|
|
39
|
+
children: page
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
export { PageButton };
|
|
45
|
+
//# sourceMappingURL=PageButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import { MouseEventHandler, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { Button } from \"../button\";\nimport { makePrefixer } from \"../utils\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport pageButtonCss from \"./PageButton.css\";\n\nconst withBaseName = makePrefixer(\"saltPageButton\");\n\nexport interface PageButtonProps {\n page: number;\n selected?: boolean;\n disabled?: boolean;\n}\nexport const PageButton = forwardRef<HTMLButtonElement, PageButtonProps>(\n function PageButton({ page, selected, disabled }: PageButtonProps, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-page-button\",\n css: pageButtonCss,\n window: targetWindow,\n });\n\n const { count, onPageChange } = usePaginationContext();\n\n const onClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, page);\n };\n\n return (\n <Button\n aria-label={`Page ${page} of ${count}`}\n aria-current={selected ? \"page\" : undefined}\n variant=\"secondary\"\n className={clsx(withBaseName(), {\n [withBaseName(\"selected\")]: selected,\n [withBaseName(\"fixed\")]: page < 100,\n })}\n onClick={onClick}\n disabled={disabled}\n ref={ref}\n >\n {page}\n </Button>\n );\n }\n);\n"],"names":["PageButton","pageButtonCss"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAO3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,EAAE,MAAM,QAAU,EAAA,QAAA,IAA6B,GAAK,EAAA;AACtE,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAErD,IAAM,MAAA,OAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,MAAA,YAAA,CAAa,OAAO,IAAI,CAAA,CAAA;AAAA,KAC1B,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,YAAA,EAAY,QAAQ,IAAW,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA;AAAA,MAC/B,cAAA,EAAc,WAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MAClC,OAAQ,EAAA,WAAA;AAAA,MACR,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,QAC9B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,OAAO,CAAA,GAAI,IAAO,GAAA,GAAA;AAAA,OACjC,CAAA;AAAA,MACD,OAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAA;AAAA,MAEC,QAAA,EAAA,IAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var css_248z = ".saltPageRanges-ellipsis {\n display: inline-flex;\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n line-height: var(--salt-size-base);\n justify-content: center;\n}\n";
|
|
2
|
+
|
|
3
|
+
export { css_248z as default };
|
|
4
|
+
//# sourceMappingURL=PageRanges.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageRanges.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
|
+
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
4
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
5
|
+
import '../utils/useId.js';
|
|
6
|
+
import '../salt-provider/SaltProvider.js';
|
|
7
|
+
import '../viewport/ViewportProvider.js';
|
|
8
|
+
import 'clsx';
|
|
9
|
+
import { PageButton } from './PageButton.js';
|
|
10
|
+
import { usePagination } from './usePagination.js';
|
|
11
|
+
import { usePaginationContext } from './usePaginationContext.js';
|
|
12
|
+
import { useWindow } from '@salt-ds/window';
|
|
13
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
14
|
+
import css_248z from './PageRanges.css.js';
|
|
15
|
+
|
|
16
|
+
const withBaseName = makePrefixer("saltPageRanges");
|
|
17
|
+
const Ellipsis = () => {
|
|
18
|
+
return /* @__PURE__ */ jsx("div", {
|
|
19
|
+
className: withBaseName("ellipsis"),
|
|
20
|
+
children: `\u2026`
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
const mapRange = (range, fn) => {
|
|
24
|
+
const result = [];
|
|
25
|
+
for (let i = range[0]; i <= range[1]; ++i) {
|
|
26
|
+
result.push(fn(i));
|
|
27
|
+
}
|
|
28
|
+
return result;
|
|
29
|
+
};
|
|
30
|
+
function PageRanges({
|
|
31
|
+
siblingCount = 2,
|
|
32
|
+
boundaryCount = 1
|
|
33
|
+
}) {
|
|
34
|
+
const targetWindow = useWindow();
|
|
35
|
+
useComponentCssInjection({
|
|
36
|
+
testId: "salt-page-ranges",
|
|
37
|
+
css: css_248z,
|
|
38
|
+
window: targetWindow
|
|
39
|
+
});
|
|
40
|
+
const { count, page } = usePaginationContext();
|
|
41
|
+
const renderPages = useCallback(
|
|
42
|
+
(range) => mapRange(range, (i) => /* @__PURE__ */ jsx(PageButton, {
|
|
43
|
+
page: i,
|
|
44
|
+
selected: page === i
|
|
45
|
+
}, i)),
|
|
46
|
+
[page]
|
|
47
|
+
);
|
|
48
|
+
const [leftPages, middlePages, rightPages] = usePagination(
|
|
49
|
+
page,
|
|
50
|
+
count,
|
|
51
|
+
Math.max(1, boundaryCount),
|
|
52
|
+
siblingCount
|
|
53
|
+
);
|
|
54
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
|
55
|
+
children: [
|
|
56
|
+
leftPages && /* @__PURE__ */ jsxs(Fragment, {
|
|
57
|
+
children: [
|
|
58
|
+
renderPages(leftPages),
|
|
59
|
+
/* @__PURE__ */ jsx(Ellipsis, {})
|
|
60
|
+
]
|
|
61
|
+
}),
|
|
62
|
+
middlePages && renderPages(middlePages),
|
|
63
|
+
rightPages && /* @__PURE__ */ jsxs(Fragment, {
|
|
64
|
+
children: [
|
|
65
|
+
/* @__PURE__ */ jsx(Ellipsis, {}),
|
|
66
|
+
renderPages(rightPages)
|
|
67
|
+
]
|
|
68
|
+
})
|
|
69
|
+
]
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export { PageRanges };
|
|
74
|
+
//# sourceMappingURL=PageRanges.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageRanges.js","sources":["../src/pagination/PageRanges.tsx"],"sourcesContent":["import { ReactElement, useCallback } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { PageButton } from \"./PageButton\";\nimport { PageRange, usePagination } from \"./usePagination\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport pageRangesCss from \"./PageRanges.css\";\n\nconst withBaseName = makePrefixer(\"saltPageRanges\");\n\nexport interface PageRangesProps {\n boundaryCount?: number;\n siblingCount?: number;\n}\n\nconst Ellipsis = () => {\n return <div className={withBaseName(\"ellipsis\")}>{`\\u2026`}</div>;\n};\n\nconst mapRange = (range: PageRange, fn: (i: number) => ReactElement) => {\n const result: ReactElement[] = [];\n for (let i = range[0]; i <= range[1]; ++i) {\n result.push(fn(i));\n }\n return result;\n};\n\nexport function PageRanges({\n siblingCount = 2,\n boundaryCount = 1,\n}: PageRangesProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-page-ranges\",\n css: pageRangesCss,\n window: targetWindow,\n });\n\n const { count, page } = usePaginationContext();\n\n const renderPages = useCallback(\n (range: PageRange) =>\n mapRange(range, (i) => (\n <PageButton key={i} page={i} selected={page === i} />\n )),\n [page]\n );\n\n const [leftPages, middlePages, rightPages] = usePagination(\n page,\n count,\n Math.max(1, boundaryCount),\n siblingCount\n );\n\n return (\n <>\n {leftPages && (\n <>\n {renderPages(leftPages)}\n <Ellipsis />\n </>\n )}\n {middlePages && renderPages(middlePages)}\n {rightPages && (\n <>\n <Ellipsis />\n {renderPages(rightPages)}\n </>\n )}\n </>\n );\n}\n"],"names":["pageRangesCss"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAOlD,MAAM,WAAW,MAAM;AACrB,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,IAAI,QAAA,EAAA,CAAA,MAAA,CAAA;AAAA,GAAS,CAAA,CAAA;AAC7D,CAAA,CAAA;AAEA,MAAM,QAAA,GAAW,CAAC,KAAA,EAAkB,EAAoC,KAAA;AACtE,EAAA,MAAM,SAAyB,EAAC,CAAA;AAChC,EAAA,KAAA,IAAS,IAAI,KAAM,CAAA,CAAA,CAAA,EAAI,KAAK,KAAM,CAAA,CAAA,CAAA,EAAI,EAAE,CAAG,EAAA;AACzC,IAAO,MAAA,CAAA,IAAA,CAAK,EAAG,CAAA,CAAC,CAAC,CAAA,CAAA;AAAA,GACnB;AACA,EAAO,OAAA,MAAA,CAAA;AACT,CAAA,CAAA;AAEO,SAAS,UAAW,CAAA;AAAA,EACzB,YAAe,GAAA,CAAA;AAAA,EACf,aAAgB,GAAA,CAAA;AAClB,CAAoB,EAAA;AAClB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAK,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE7C,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,KACC,KAAA,QAAA,CAAS,KAAO,EAAA,CAAC,sBACd,GAAA,CAAA,UAAA,EAAA;AAAA,MAAmB,IAAM,EAAA,CAAA;AAAA,MAAG,UAAU,IAAS,KAAA,CAAA;AAAA,KAAA,EAA/B,CAAkC,CACpD,CAAA;AAAA,IACH,CAAC,IAAI,CAAA;AAAA,GACP,CAAA;AAEA,EAAA,MAAM,CAAC,SAAA,EAAW,WAAa,EAAA,UAAU,CAAI,GAAA,aAAA;AAAA,IAC3C,IAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA,CAAK,GAAI,CAAA,CAAA,EAAG,aAAa,CAAA;AAAA,IACzB,YAAA;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACG,QAAA,EAAA;AAAA,MACC,SAAA,oBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,QACG,QAAA,EAAA;AAAA,UAAA,WAAA,CAAY,SAAS,CAAA;AAAA,8BACrB,QAAS,EAAA,EAAA,CAAA;AAAA,SAAA;AAAA,OACZ,CAAA;AAAA,MAED,WAAA,IAAe,YAAY,WAAW,CAAA;AAAA,MACtC,UACC,oBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,QACE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAS,EAAA,EAAA,CAAA;AAAA,UACT,YAAY,UAAU,CAAA;AAAA,SAAA;AAAA,OACzB,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pagination.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef, useCallback, useMemo, useRef, useEffect } from 'react';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
|
+
import '../aria-announcer/AriaAnnouncerContext.js';
|
|
5
|
+
import { useAriaAnnouncer } from '../aria-announcer/useAriaAnnouncer.js';
|
|
6
|
+
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
7
|
+
import { useControlled } from '../utils/useControlled.js';
|
|
8
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
9
|
+
import '../utils/useId.js';
|
|
10
|
+
import '../salt-provider/SaltProvider.js';
|
|
11
|
+
import '../viewport/ViewportProvider.js';
|
|
12
|
+
import { paginationContext } from './PaginationContext.js';
|
|
13
|
+
import { useWindow } from '@salt-ds/window';
|
|
14
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
15
|
+
import css_248z from './Pagination.css.js';
|
|
16
|
+
|
|
17
|
+
const withBaseName = makePrefixer("saltPagination");
|
|
18
|
+
const { Provider } = paginationContext;
|
|
19
|
+
const Pagination = forwardRef(
|
|
20
|
+
function Pagination2({
|
|
21
|
+
className,
|
|
22
|
+
count,
|
|
23
|
+
children,
|
|
24
|
+
defaultPage = 1,
|
|
25
|
+
page: pageProp,
|
|
26
|
+
onPageChange: onPageChangeProp,
|
|
27
|
+
...restProps
|
|
28
|
+
}, ref) {
|
|
29
|
+
const targetWindow = useWindow();
|
|
30
|
+
useComponentCssInjection({
|
|
31
|
+
testId: "salt-pagination",
|
|
32
|
+
css: css_248z,
|
|
33
|
+
window: targetWindow
|
|
34
|
+
});
|
|
35
|
+
const [pageState, setPageState] = useControlled({
|
|
36
|
+
controlled: pageProp,
|
|
37
|
+
default: defaultPage,
|
|
38
|
+
name: "Pagination",
|
|
39
|
+
state: "page"
|
|
40
|
+
});
|
|
41
|
+
const onPageChange = useCallback(
|
|
42
|
+
(event, page) => {
|
|
43
|
+
setPageState(page);
|
|
44
|
+
onPageChangeProp && onPageChangeProp(event, page);
|
|
45
|
+
},
|
|
46
|
+
[onPageChangeProp, setPageState]
|
|
47
|
+
);
|
|
48
|
+
const contextValue = useMemo(
|
|
49
|
+
() => ({
|
|
50
|
+
page: pageState,
|
|
51
|
+
count,
|
|
52
|
+
onPageChange
|
|
53
|
+
}),
|
|
54
|
+
[pageState, count, onPageChange]
|
|
55
|
+
);
|
|
56
|
+
const { announce } = useAriaAnnouncer();
|
|
57
|
+
const mounted = useRef(false);
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
if (mounted.current) {
|
|
60
|
+
announce(`Page ${pageState}`);
|
|
61
|
+
} else {
|
|
62
|
+
mounted.current = true;
|
|
63
|
+
}
|
|
64
|
+
}, [announce, pageState]);
|
|
65
|
+
if (count < 2) {
|
|
66
|
+
return null;
|
|
67
|
+
}
|
|
68
|
+
return /* @__PURE__ */ jsx(Provider, {
|
|
69
|
+
value: contextValue,
|
|
70
|
+
children: /* @__PURE__ */ jsx("nav", {
|
|
71
|
+
className: clsx(withBaseName(), className),
|
|
72
|
+
ref,
|
|
73
|
+
...restProps,
|
|
74
|
+
children
|
|
75
|
+
})
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
|
|
80
|
+
export { Pagination };
|
|
81
|
+
//# sourceMappingURL=Pagination.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":["../src/pagination/Pagination.tsx"],"sourcesContent":["import {\n forwardRef,\n HTMLAttributes,\n SyntheticEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { PaginationContext, paginationContext } from \"./PaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport paginationCss from \"./Pagination.css\";\n\nconst withBaseName = makePrefixer(\"saltPagination\");\n\nconst { Provider } = paginationContext;\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n /**\n * Number of pages.\n */\n count: number;\n /**\n * Current/active page.\n */\n page?: number;\n /**\n * Default current/active page.\n */\n defaultPage?: number;\n /**\n * Callback function triggered when current page changed.\n */\n onPageChange?: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n function Pagination(\n {\n className,\n count,\n children,\n defaultPage = 1,\n page: pageProp,\n onPageChange: onPageChangeProp,\n ...restProps\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pagination\",\n css: paginationCss,\n window: targetWindow,\n });\n\n const [pageState, setPageState] = useControlled({\n controlled: pageProp,\n default: defaultPage,\n name: \"Pagination\",\n state: \"page\",\n });\n\n const onPageChange = useCallback(\n (event: SyntheticEvent, page: number) => {\n setPageState(page);\n onPageChangeProp && onPageChangeProp(event, page);\n },\n [onPageChangeProp, setPageState]\n );\n\n const contextValue: PaginationContext = useMemo(\n () => ({\n page: pageState,\n count,\n onPageChange,\n }),\n [pageState, count, onPageChange]\n );\n\n const { announce } = useAriaAnnouncer();\n const mounted = useRef<boolean>(false);\n\n useEffect(() => {\n if (mounted.current) {\n announce(`Page ${pageState}`);\n } else {\n mounted.current = true;\n }\n }, [announce, pageState]);\n\n if (count < 2) {\n return null;\n }\n\n return (\n <Provider value={contextValue}>\n <nav\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...restProps}\n >\n {children}\n </nav>\n </Provider>\n );\n }\n);\n"],"names":["Pagination","paginationCss"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAElD,MAAM,EAAE,UAAa,GAAA,iBAAA,CAAA;AAqBd,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,CAAA;AAAA,IACd,IAAM,EAAA,QAAA;AAAA,IACN,YAAc,EAAA,gBAAA;AAAA,IACX,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,aAAc,CAAA;AAAA,MAC9C,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,WAAA;AAAA,MACT,IAAM,EAAA,YAAA;AAAA,MACN,KAAO,EAAA,MAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAA,MAAM,YAAe,GAAA,WAAA;AAAA,MACnB,CAAC,OAAuB,IAAiB,KAAA;AACvC,QAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,QAAoB,gBAAA,IAAA,gBAAA,CAAiB,OAAO,IAAI,CAAA,CAAA;AAAA,OAClD;AAAA,MACA,CAAC,kBAAkB,YAAY,CAAA;AAAA,KACjC,CAAA;AAEA,IAAA,MAAM,YAAkC,GAAA,OAAA;AAAA,MACtC,OAAO;AAAA,QACL,IAAM,EAAA,SAAA;AAAA,QACN,KAAA;AAAA,QACA,YAAA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,SAAW,EAAA,KAAA,EAAO,YAAY,CAAA;AAAA,KACjC,CAAA;AAEA,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,gBAAiB,EAAA,CAAA;AACtC,IAAM,MAAA,OAAA,GAAU,OAAgB,KAAK,CAAA,CAAA;AAErC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,QAAA,QAAA,CAAS,QAAQ,SAAW,CAAA,CAAA,CAAA,CAAA;AAAA,OACvB,MAAA;AACL,QAAA,OAAA,CAAQ,OAAU,GAAA,IAAA,CAAA;AAAA,OACpB;AAAA,KACC,EAAA,CAAC,QAAU,EAAA,SAAS,CAAC,CAAA,CAAA;AAExB,IAAA,IAAI,QAAQ,CAAG,EAAA;AACb,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MAAS,KAAO,EAAA,YAAA;AAAA,MACf,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { createContext } from 'react';
|
|
2
|
+
|
|
3
|
+
const paginationContext = createContext({
|
|
4
|
+
page: 0,
|
|
5
|
+
count: 0,
|
|
6
|
+
onPageChange: () => void 0
|
|
7
|
+
});
|
|
8
|
+
if (process.env.NODE_ENV !== "production") {
|
|
9
|
+
paginationContext.displayName = "PaginationContext";
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export { paginationContext };
|
|
13
|
+
//# sourceMappingURL=PaginationContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaginationContext.js","sources":["../src/pagination/PaginationContext.ts"],"sourcesContent":["import { SyntheticEvent, createContext } from \"react\";\n\nexport interface PaginationContext {\n page: number;\n count: number;\n onPageChange: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const paginationContext = createContext<PaginationContext>({\n page: 0,\n count: 0,\n onPageChange: () => undefined,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n paginationContext.displayName = \"PaginationContext\";\n}\n"],"names":[],"mappings":";;AAQO,MAAM,oBAAoB,aAAiC,CAAA;AAAA,EAChE,IAAM,EAAA,CAAA;AAAA,EACN,KAAO,EAAA,CAAA;AAAA,EACP,cAAc,MAAM,KAAA,CAAA;AACtB,CAAC,EAAA;AAED,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,iBAAA,CAAkB,WAAc,GAAA,mBAAA,CAAA;AAClC;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var css_248z = ".saltPaginator {\n display: flex;\n flex-wrap: nowrap;\n}\n\n.saltPaginator-arrowButton-previous {\n --saltButton-margin: 0 var(--salt-spacing-100) 0 0;\n}\n\n.saltPaginator-arrowButton-next {\n --saltButton-margin: 0 0 0 var(--salt-spacing-100);\n}\n";
|
|
2
|
+
|
|
3
|
+
export { css_248z as default };
|
|
4
|
+
//# sourceMappingURL=Paginator.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Paginator.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { Button } from '../button/Button.js';
|
|
5
|
+
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
6
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
7
|
+
import '../utils/useId.js';
|
|
8
|
+
import '../salt-provider/SaltProvider.js';
|
|
9
|
+
import '../viewport/ViewportProvider.js';
|
|
10
|
+
import { ChevronLeftIcon, ChevronRightIcon } from '@salt-ds/icons';
|
|
11
|
+
import { PageRanges } from './PageRanges.js';
|
|
12
|
+
import { usePaginationContext } from './usePaginationContext.js';
|
|
13
|
+
import { useWindow } from '@salt-ds/window';
|
|
14
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
15
|
+
import css_248z from './Paginator.css.js';
|
|
16
|
+
|
|
17
|
+
const withBaseName = makePrefixer("saltPaginator");
|
|
18
|
+
const Paginator = forwardRef(
|
|
19
|
+
function Paginator2({ className, boundaryCount, siblingCount, ...restProps }, ref) {
|
|
20
|
+
const targetWindow = useWindow();
|
|
21
|
+
useComponentCssInjection({
|
|
22
|
+
testId: "salt-paginator",
|
|
23
|
+
css: css_248z,
|
|
24
|
+
window: targetWindow
|
|
25
|
+
});
|
|
26
|
+
const { count, page, onPageChange } = usePaginationContext();
|
|
27
|
+
const onPreviousPage = (event) => {
|
|
28
|
+
onPageChange(event, Math.max(1, page - 1));
|
|
29
|
+
};
|
|
30
|
+
const onNextPage = (event) => {
|
|
31
|
+
onPageChange(event, Math.min(page + 1, count));
|
|
32
|
+
};
|
|
33
|
+
const isOnFirstPage = page === 1;
|
|
34
|
+
const isOnLastPage = page === count;
|
|
35
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
36
|
+
className: clsx(withBaseName(), className),
|
|
37
|
+
...restProps,
|
|
38
|
+
ref,
|
|
39
|
+
children: [
|
|
40
|
+
/* @__PURE__ */ jsx(Button, {
|
|
41
|
+
variant: "secondary",
|
|
42
|
+
"aria-label": "Previous Page",
|
|
43
|
+
onClick: onPreviousPage,
|
|
44
|
+
disabled: isOnFirstPage,
|
|
45
|
+
className: withBaseName("arrowButton-previous"),
|
|
46
|
+
children: /* @__PURE__ */ jsx(ChevronLeftIcon, {
|
|
47
|
+
"aria-hidden": true
|
|
48
|
+
})
|
|
49
|
+
}),
|
|
50
|
+
/* @__PURE__ */ jsx(PageRanges, {
|
|
51
|
+
siblingCount,
|
|
52
|
+
boundaryCount
|
|
53
|
+
}),
|
|
54
|
+
/* @__PURE__ */ jsx(Button, {
|
|
55
|
+
variant: "secondary",
|
|
56
|
+
"aria-label": "Next Page",
|
|
57
|
+
onClick: onNextPage,
|
|
58
|
+
disabled: isOnLastPage,
|
|
59
|
+
className: withBaseName("arrowButton-next"),
|
|
60
|
+
children: /* @__PURE__ */ jsx(ChevronRightIcon, {
|
|
61
|
+
"aria-hidden": true
|
|
62
|
+
})
|
|
63
|
+
})
|
|
64
|
+
]
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
|
|
69
|
+
export { Paginator };
|
|
70
|
+
//# sourceMappingURL=Paginator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Paginator.js","sources":["../src/pagination/Paginator.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, MouseEventHandler } from \"react\";\nimport { Button } from \"../button\";\nimport { makePrefixer } from \"../utils\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { PageRanges } from \"./PageRanges\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport paginatorCss from \"./Paginator.css\";\n\nconst withBaseName = makePrefixer(\"saltPaginator\");\n\nexport interface PaginatorProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Number of pages next to the arrow buttons when page range is truncated.\n */\n boundaryCount?: number;\n /**\n * Number of pages on each side of the current page when page range is truncated.\n */\n siblingCount?: number;\n}\n\nexport const Paginator = forwardRef<HTMLDivElement, PaginatorProps>(\n function Paginator(\n { className, boundaryCount, siblingCount, ...restProps },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-paginator\",\n css: paginatorCss,\n window: targetWindow,\n });\n\n const { count, page, onPageChange } = usePaginationContext();\n\n const onPreviousPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, Math.max(1, page - 1));\n };\n\n const onNextPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, Math.min(page + 1, count));\n };\n\n const isOnFirstPage = page === 1;\n const isOnLastPage = page === count;\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n <Button\n variant=\"secondary\"\n aria-label=\"Previous Page\"\n onClick={onPreviousPage}\n disabled={isOnFirstPage}\n className={withBaseName(\"arrowButton-previous\")}\n >\n <ChevronLeftIcon aria-hidden />\n </Button>\n <PageRanges siblingCount={siblingCount} boundaryCount={boundaryCount} />\n <Button\n variant=\"secondary\"\n aria-label=\"Next Page\"\n onClick={onNextPage}\n disabled={isOnLastPage}\n className={withBaseName(\"arrowButton-next\")}\n >\n <ChevronRightIcon aria-hidden />\n </Button>\n </div>\n );\n }\n);\n"],"names":["Paginator","paginatorCss"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAa1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,WACP,EAAE,SAAA,EAAW,eAAe,YAAiB,EAAA,GAAA,SAAA,IAC7C,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiB,oBAAqB,EAAA,CAAA;AAE3D,IAAM,MAAA,cAAA,GAAuD,CAAC,KAAU,KAAA;AACtE,MAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,GAAO,CAAC,CAAC,CAAA,CAAA;AAAA,KAC3C,CAAA;AAEA,IAAM,MAAA,UAAA,GAAmD,CAAC,KAAU,KAAA;AAClE,MAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,IAAO,GAAA,CAAA,EAAG,KAAK,CAAC,CAAA,CAAA;AAAA,KAC/C,CAAA;AAEA,IAAA,MAAM,gBAAgB,IAAS,KAAA,CAAA,CAAA;AAC/B,IAAA,MAAM,eAAe,IAAS,KAAA,KAAA,CAAA;AAE9B,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,SAAA;AAAA,MAAW,GAAA;AAAA,MAC9D,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,YAAW,EAAA,eAAA;AAAA,UACX,OAAS,EAAA,cAAA;AAAA,UACT,QAAU,EAAA,aAAA;AAAA,UACV,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,UAE9C,QAAC,kBAAA,GAAA,CAAA,eAAA,EAAA;AAAA,YAAgB,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,SAC/B,CAAA;AAAA,wBACC,GAAA,CAAA,UAAA,EAAA;AAAA,UAAW,YAAA;AAAA,UAA4B,aAAA;AAAA,SAA8B,CAAA;AAAA,wBACrE,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,OAAQ,EAAA,WAAA;AAAA,UACR,YAAW,EAAA,WAAA;AAAA,UACX,OAAS,EAAA,UAAA;AAAA,UACT,QAAU,EAAA,YAAA;AAAA,UACV,SAAA,EAAW,aAAa,kBAAkB,CAAA;AAAA,UAE1C,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,YAAiB,aAAW,EAAA,IAAA;AAAA,WAAC,CAAA;AAAA,SAChC,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
function usePagination(page, count, boundaryCount, siblingCount) {
|
|
2
|
+
const totalButtonsVisible = 2 * (boundaryCount + siblingCount) + 3;
|
|
3
|
+
const isEnoughSpace = totalButtonsVisible >= count;
|
|
4
|
+
const isLeftEllipsis = !isEnoughSpace && page - boundaryCount - siblingCount > 2;
|
|
5
|
+
const isRightEllipsis = !isEnoughSpace && page + boundaryCount + siblingCount + 1 < count;
|
|
6
|
+
const leftPages = isLeftEllipsis ? [1, boundaryCount] : void 0;
|
|
7
|
+
const rightPages = isRightEllipsis ? [count - boundaryCount + 1, count] : void 0;
|
|
8
|
+
let middlePages;
|
|
9
|
+
if (!isLeftEllipsis) {
|
|
10
|
+
middlePages = [
|
|
11
|
+
1,
|
|
12
|
+
isRightEllipsis ? boundaryCount + 2 + 2 * siblingCount : count
|
|
13
|
+
];
|
|
14
|
+
} else if (!isRightEllipsis) {
|
|
15
|
+
middlePages = [count - boundaryCount - 1 - 2 * siblingCount, count];
|
|
16
|
+
} else {
|
|
17
|
+
middlePages = [page - siblingCount, page + siblingCount];
|
|
18
|
+
}
|
|
19
|
+
return [leftPages, middlePages, rightPages];
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export { usePagination };
|
|
23
|
+
//# sourceMappingURL=usePagination.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { useContext } from 'react';
|
|
2
|
+
import { paginationContext } from './PaginationContext.js';
|
|
3
|
+
|
|
4
|
+
const usePaginationContext = () => {
|
|
5
|
+
const context = useContext(paginationContext);
|
|
6
|
+
if (process.env.NODE_ENV !== "production") {
|
|
7
|
+
if (!context) {
|
|
8
|
+
console.error(`usePaginationContext should be used inside of Pagination`);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
return context;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export { usePaginationContext };
|
|
15
|
+
//# sourceMappingURL=usePaginationContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePaginationContext.js","sources":["../src/pagination/usePaginationContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { paginationContext } from \"./PaginationContext\";\n\nexport const usePaginationContext = () => {\n const context = useContext(paginationContext);\n if (process.env.NODE_ENV !== \"production\") {\n if (!context) {\n console.error(`usePaginationContext should be used inside of Pagination`);\n }\n }\n return context;\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,uBAAuB,MAAM;AACxC,EAAM,MAAA,OAAA,GAAU,WAAW,iBAAiB,CAAA,CAAA;AAC5C,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAA,OAAA,CAAQ,MAAM,CAA0D,wDAAA,CAAA,CAAA,CAAA;AAAA,KAC1E;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var css_248z = "/* Styles applied to the root element */\n.saltPill {\n appearance: none;\n display: inline-flex;\n align-items: center;\n background: var(--saltPill-background, var(--salt-actionable-primary-background));\n border-radius: 0;\n border: 0;\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n min-height: var(--salt-text-minHeight);\n outline: 0;\n position: relative;\n gap: var(--salt-spacing-50);\n padding-left: var(--salt-spacing-50);\n padding-right: var(--salt-spacing-50);\n color: var(--saltPill-color, var(--salt-actionable-primary-foreground));\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n overflow: hidden;\n white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable */\n.saltPill-clickable {\n cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltPill-clickable:hover,\n.saltPill-clickable:focus-visible {\n color: var(--salt-actionable-primary-foreground-hover);\n background: var(--salt-actionable-primary-background-hover);\n}\n\n.saltPill-clickable.saltPill-active,\n.saltPill-clickable:active {\n background: var(--salt-actionable-primary-background-active);\n color: var(--salt-actionable-primary-foreground-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill:disabled,\n.saltPill:disabled:hover {\n color: var(--salt-actionable-primary-foreground-disabled);\n background: var(--salt-actionable-primary-background-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n";
|
|
2
|
+
|
|
3
|
+
export { css_248z as default };
|
|
4
|
+
//# sourceMappingURL=Pill.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pill.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import { useWindow } from '@salt-ds/window';
|
|
5
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
6
|
+
import css_248z from './Pill.css.js';
|
|
7
|
+
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
8
|
+
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
9
|
+
import '../utils/useId.js';
|
|
10
|
+
import '../salt-provider/SaltProvider.js';
|
|
11
|
+
import '../viewport/ViewportProvider.js';
|
|
12
|
+
import '../button/Button.js';
|
|
13
|
+
import { useButton } from '../button/useButton.js';
|
|
14
|
+
|
|
15
|
+
const withBaseName = makePrefixer("saltPill");
|
|
16
|
+
const Pill = forwardRef(function Pill2({
|
|
17
|
+
children,
|
|
18
|
+
className,
|
|
19
|
+
disabled,
|
|
20
|
+
onKeyUp,
|
|
21
|
+
onKeyDown,
|
|
22
|
+
onClick,
|
|
23
|
+
onBlur,
|
|
24
|
+
...rest
|
|
25
|
+
}, ref) {
|
|
26
|
+
const targetWindow = useWindow();
|
|
27
|
+
useComponentCssInjection({
|
|
28
|
+
testId: "salt-pill",
|
|
29
|
+
css: css_248z,
|
|
30
|
+
window: targetWindow
|
|
31
|
+
});
|
|
32
|
+
const { buttonProps, active } = useButton({
|
|
33
|
+
disabled,
|
|
34
|
+
onKeyUp,
|
|
35
|
+
onKeyDown,
|
|
36
|
+
onClick,
|
|
37
|
+
onBlur
|
|
38
|
+
});
|
|
39
|
+
const { tabIndex, ...restButtonProps } = buttonProps;
|
|
40
|
+
return /* @__PURE__ */ jsx("button", {
|
|
41
|
+
"data-testid": "pill",
|
|
42
|
+
ref,
|
|
43
|
+
className: clsx(
|
|
44
|
+
withBaseName(),
|
|
45
|
+
withBaseName("clickable"),
|
|
46
|
+
{ [withBaseName("active")]: active },
|
|
47
|
+
className
|
|
48
|
+
),
|
|
49
|
+
...restButtonProps,
|
|
50
|
+
...rest,
|
|
51
|
+
children
|
|
52
|
+
});
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
export { Pill };
|
|
56
|
+
//# sourceMappingURL=Pill.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pill.js","sources":["../src/pill/Pill.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport clsx from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport pillCss from \"./Pill.css\";\nimport { makePrefixer } from \"../utils\";\nimport { useButton } from \"../button\";\n\nconst withBaseName = makePrefixer(\"saltPill\");\n\n/* eslint-disable @typescript-eslint/no-empty-interface */\nexport interface PillProps extends ComponentPropsWithoutRef<\"button\"> {}\n\nexport const Pill = forwardRef<HTMLButtonElement, PillProps>(function Pill(\n {\n children,\n className,\n disabled,\n onKeyUp,\n onKeyDown,\n onClick,\n onBlur,\n ...rest\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pill\",\n css: pillCss,\n window: targetWindow,\n });\n const { buttonProps, active } = useButton<HTMLButtonElement>({\n disabled,\n onKeyUp,\n onKeyDown,\n onClick,\n onBlur,\n });\n // we do not want to spread tab index in this case because the button element\n // does not require tabindex=\"0\" attribute\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { tabIndex, ...restButtonProps } = buttonProps;\n return (\n <button\n data-testid=\"pill\"\n ref={ref}\n className={clsx(\n withBaseName(),\n withBaseName(\"clickable\"),\n { [withBaseName(\"active\")]: active },\n className\n )}\n {...restButtonProps}\n {...rest}\n >\n {children}\n </button>\n );\n});\n"],"names":["Pill","pillCss"],"mappings":";;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAK/B,MAAA,IAAA,GAAO,UAAyC,CAAA,SAASA,KACpE,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,MAAM,EAAE,WAAA,EAAa,MAAO,EAAA,GAAI,SAA6B,CAAA;AAAA,IAC3D,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,GACD,CAAA,CAAA;AAID,EAAM,MAAA,EAAE,QAAa,EAAA,GAAA,eAAA,EAAoB,GAAA,WAAA,CAAA;AACzC,EAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,GAAA;AAAA,IACA,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,WAAW,CAAA;AAAA,MACxB,EAAE,CAAC,YAAa,CAAA,QAAQ,IAAI,MAAO,EAAA;AAAA,MACnC,SAAA;AAAA,KACF;AAAA,IACC,GAAG,eAAA;AAAA,IACH,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -18,7 +18,7 @@ import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
|
|
|
18
18
|
const withBaseName = makePrefixer("saltRadioButton");
|
|
19
19
|
const RadioButton = forwardRef(
|
|
20
20
|
function RadioButton2(props, ref) {
|
|
21
|
-
var _a, _b
|
|
21
|
+
var _a, _b;
|
|
22
22
|
const {
|
|
23
23
|
checked: checkedProp,
|
|
24
24
|
className,
|
|
@@ -55,11 +55,11 @@ const RadioButton = forwardRef(
|
|
|
55
55
|
onChange: inputOnChange,
|
|
56
56
|
...restInputProps
|
|
57
57
|
} = inputProps;
|
|
58
|
-
const disabled = (
|
|
59
|
-
const readOnly = (
|
|
60
|
-
const validationStatus = !disabled ? (
|
|
61
|
-
const radioGroupChecked = radioGroup.value != null && value != null ? radioGroup.value === value : checkedProp;
|
|
62
|
-
const name = nameProp != null ? nameProp : radioGroup.name;
|
|
58
|
+
const disabled = (radioGroup == null ? void 0 : radioGroup.disabled) || formFieldDisabled || disabledProp;
|
|
59
|
+
const readOnly = (radioGroup == null ? void 0 : radioGroup.readOnly) || formFieldReadOnly || readOnlyProp;
|
|
60
|
+
const validationStatus = !disabled ? (_b = (_a = radioGroup == null ? void 0 : radioGroup.validationStatus) != null ? _a : formFieldValidationStatus) != null ? _b : validationStatusProp : void 0;
|
|
61
|
+
const radioGroupChecked = (radioGroup == null ? void 0 : radioGroup.value) != null && value != null ? radioGroup.value === value : checkedProp;
|
|
62
|
+
const name = nameProp != null ? nameProp : radioGroup == null ? void 0 : radioGroup.name;
|
|
63
63
|
const [checked, setCheckedState] = useControlled({
|
|
64
64
|
controlled: radioGroupChecked,
|
|
65
65
|
default: Boolean(checkedProp),
|
|
@@ -74,7 +74,7 @@ const RadioButton = forwardRef(
|
|
|
74
74
|
setCheckedState(newChecked);
|
|
75
75
|
onChange == null ? void 0 : onChange(event);
|
|
76
76
|
inputOnChange == null ? void 0 : inputOnChange(event);
|
|
77
|
-
(_a2 = radioGroup.onChange) == null ? void 0 : _a2.call(radioGroup, event);
|
|
77
|
+
(_a2 = radioGroup == null ? void 0 : radioGroup.onChange) == null ? void 0 : _a2.call(radioGroup, event);
|
|
78
78
|
};
|
|
79
79
|
return /* @__PURE__ */ jsxs("label", {
|
|
80
80
|
className: clsx(
|
|
@@ -92,13 +92,13 @@ const RadioButton = forwardRef(
|
|
|
92
92
|
children: [
|
|
93
93
|
/* @__PURE__ */ jsx("input", {
|
|
94
94
|
"aria-describedby": clsx(
|
|
95
|
-
|
|
95
|
+
radioGroup == void 0 ? formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-describedby"] : void 0,
|
|
96
96
|
inputDescribedBy
|
|
97
|
-
),
|
|
97
|
+
) || void 0,
|
|
98
98
|
"aria-labelledby": clsx(
|
|
99
|
-
|
|
99
|
+
radioGroup == void 0 ? formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-labelledby"] : void 0,
|
|
100
100
|
inputLabelledBy
|
|
101
|
-
),
|
|
101
|
+
) || void 0,
|
|
102
102
|
className: clsx(withBaseName("input"), inputClassName),
|
|
103
103
|
checked,
|
|
104
104
|
disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport radioButtonCss from \"./RadioButton.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * Set the default selected radio button in the group\n */\n checked?: boolean;\n /**\n * Set the disabled state\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * Set the error state\n */\n error?: boolean;\n /**\n * Props to be passed to the radio input\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /**\n * The label to be shown next to the radio icon\n */\n label?: ReactNode;\n /**\n * Name of the radio group\n */\n name?: string;\n /**\n * Callback for blur event\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback for change event\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback for focus event\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Set the read only state.\n */\n readOnly?: boolean;\n /**\n * Value of radio button\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * RadioButton has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked: checkedProp,\n className,\n disabled: disabledProp,\n error,\n inputProps = {},\n label,\n name: nameProp,\n onFocus,\n onBlur,\n onChange,\n readOnly: readOnlyProp,\n value,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button\",\n css: radioButtonCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const radioGroup = useRadioGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const disabled = radioGroup
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport radioButtonCss from \"./RadioButton.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * Set the default selected radio button in the group\n */\n checked?: boolean;\n /**\n * Set the disabled state\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * Set the error state\n */\n error?: boolean;\n /**\n * Props to be passed to the radio input\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /**\n * The label to be shown next to the radio icon\n */\n label?: ReactNode;\n /**\n * Name of the radio group\n */\n name?: string;\n /**\n * Callback for blur event\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback for change event\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback for focus event\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Set the read only state.\n */\n readOnly?: boolean;\n /**\n * Value of radio button\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * RadioButton has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked: checkedProp,\n className,\n disabled: disabledProp,\n error,\n inputProps = {},\n label,\n name: nameProp,\n onFocus,\n onBlur,\n onChange,\n readOnly: readOnlyProp,\n value,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button\",\n css: radioButtonCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const radioGroup = useRadioGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const disabled = radioGroup?.disabled || formFieldDisabled || disabledProp;\n const readOnly = radioGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n const validationStatus = !disabled\n ? radioGroup?.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp\n : undefined;\n\n const radioGroupChecked =\n radioGroup?.value != null && value != null\n ? radioGroup.value === value\n : checkedProp;\n const name = nameProp ?? radioGroup?.name;\n\n const [checked, setCheckedState] = useControlled({\n controlled: radioGroupChecked,\n default: Boolean(checkedProp),\n name: \"RadioBase\",\n state: \"checked\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (readOnly) return;\n\n const newChecked = event.target.checked;\n setCheckedState(newChecked);\n\n onChange?.(event);\n inputOnChange?.(event);\n radioGroup?.onChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"error\")]: error /* **Deprecated** */,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={\n clsx(\n radioGroup == undefined\n ? formFieldA11yProps?.[\"aria-describedby\"]\n : undefined,\n inputDescribedBy\n ) || undefined\n }\n aria-labelledby={\n clsx(\n radioGroup == undefined\n ? formFieldA11yProps?.[\"aria-labelledby\"]\n : undefined,\n inputLabelledBy\n ) || undefined\n }\n className={clsx(withBaseName(\"input\"), inputClassName)}\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n name={name}\n value={value}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"radio\"\n {...restInputProps}\n />\n <RadioButtonIcon\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n }\n);\n"],"names":["RadioButton","radioButtonCss","_a"],"mappings":"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"}
|