@economic/taco 1.1.13-alpha.0 → 1.3.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/dist/components/Group/Group.d.ts +11 -1
- package/dist/components/Icon/components/ChevronLeftSolid.d.ts +3 -0
- package/dist/components/Icon/components/ChevronRightSolid.d.ts +3 -0
- package/dist/components/Icon/components/index.d.ts +1 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Menu/Menu.d.ts +2 -2
- package/dist/components/Menu/components/Item.d.ts +1 -1
- package/dist/components/Menu/components/Link.d.ts +1 -1
- package/dist/components/Toast/Toast.d.ts +2 -2
- package/dist/components/Toast/Toaster.d.ts +2 -2
- package/dist/esm/components/Accordion/Accordion.js +31 -34
- package/dist/esm/components/Accordion/Accordion.js.map +1 -1
- package/dist/esm/components/Backdrop/Backdrop.js +2 -2
- package/dist/esm/components/Backdrop/Backdrop.js.map +1 -1
- package/dist/esm/components/Badge/Badge.js +14 -14
- package/dist/esm/components/Badge/Badge.js.map +1 -1
- package/dist/esm/components/Banner/Banner.js +7 -5
- package/dist/esm/components/Banner/Banner.js.map +1 -1
- package/dist/esm/components/Banner/util.js +1 -1
- package/dist/esm/components/Banner/util.js.map +1 -1
- package/dist/esm/components/Button/Button.js +12 -13
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/Button/util.js +18 -23
- package/dist/esm/components/Button/util.js.map +1 -1
- package/dist/esm/components/Calendar/Calendar.js +56 -71
- package/dist/esm/components/Calendar/Calendar.js.map +1 -1
- package/dist/esm/components/Card/Card.js +13 -12
- package/dist/esm/components/Card/Card.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +15 -18
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.js +23 -25
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Combobox/useCombobox.js +78 -99
- package/dist/esm/components/Combobox/useCombobox.js.map +1 -1
- package/dist/esm/components/Datepicker/Datepicker.js +48 -52
- package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/components/Datepicker/useDatepicker.js +27 -34
- package/dist/esm/components/Datepicker/useDatepicker.js.map +1 -1
- package/dist/esm/components/Dialog/Context.js +4 -4
- package/dist/esm/components/Dialog/Context.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +39 -58
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Dialog/components/Content.js +39 -44
- package/dist/esm/components/Dialog/components/Content.js.map +1 -1
- package/dist/esm/components/Dialog/components/Drawer.js +3 -3
- package/dist/esm/components/Dialog/components/Drawer.js.map +1 -1
- package/dist/esm/components/Dialog/components/Extra.js +2 -2
- package/dist/esm/components/Dialog/components/Extra.js.map +1 -1
- package/dist/esm/components/Dialog/components/Trigger.js +2 -2
- package/dist/esm/components/Dialog/components/Trigger.js.map +1 -1
- package/dist/esm/components/Field/Field.js +10 -12
- package/dist/esm/components/Field/Field.js.map +1 -1
- package/dist/esm/components/Form/Form.js +6 -8
- package/dist/esm/components/Form/Form.js.map +1 -1
- package/dist/esm/components/Group/Group.js +9 -8
- package/dist/esm/components/Group/Group.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +27 -35
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/HoverCard/HoverCard.js +8 -9
- package/dist/esm/components/HoverCard/HoverCard.js.map +1 -1
- package/dist/esm/components/Icon/Icon.js +7 -8
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/Icon/components/ChevronLeftSolid.js +20 -0
- package/dist/esm/components/Icon/components/ChevronLeftSolid.js.map +1 -0
- package/dist/esm/components/Icon/components/ChevronRightSolid.js +20 -0
- package/dist/esm/components/Icon/components/ChevronRightSolid.js.map +1 -0
- package/dist/esm/components/Icon/components/index.js +8 -4
- package/dist/esm/components/Icon/components/index.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js +9 -11
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/esm/components/Input/Input.js +25 -25
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Input/util.js +2 -2
- package/dist/esm/components/Input/util.js.map +1 -1
- package/dist/esm/components/Listbox/Listbox.js +24 -25
- package/dist/esm/components/Listbox/Listbox.js.map +1 -1
- package/dist/esm/components/Listbox/ScrollableList.js +65 -84
- package/dist/esm/components/Listbox/ScrollableList.js.map +1 -1
- package/dist/esm/components/Listbox/useListbox.js +53 -61
- package/dist/esm/components/Listbox/useListbox.js.map +1 -1
- package/dist/esm/components/Listbox/useMultiListbox.js +69 -96
- package/dist/esm/components/Listbox/useMultiListbox.js.map +1 -1
- package/dist/esm/components/Listbox/useTypeahead.js +10 -9
- package/dist/esm/components/Listbox/useTypeahead.js.map +1 -1
- package/dist/esm/components/Listbox/util.js +48 -85
- package/dist/esm/components/Listbox/util.js.map +1 -1
- package/dist/esm/components/Menu/Context.js +2 -2
- package/dist/esm/components/Menu/Context.js.map +1 -1
- package/dist/esm/components/Menu/Menu.js +16 -34
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Menu/components/Checkbox.js +9 -10
- package/dist/esm/components/Menu/components/Checkbox.js.map +1 -1
- package/dist/esm/components/Menu/components/Content.js +9 -11
- package/dist/esm/components/Menu/components/Content.js.map +1 -1
- package/dist/esm/components/Menu/components/Header.js +3 -3
- package/dist/esm/components/Menu/components/Header.js.map +1 -1
- package/dist/esm/components/Menu/components/Item.js +30 -31
- package/dist/esm/components/Menu/components/Item.js.map +1 -1
- package/dist/esm/components/Menu/components/Link.js +10 -11
- package/dist/esm/components/Menu/components/Link.js.map +1 -1
- package/dist/esm/components/Menu/components/RadioGroup.js +17 -19
- package/dist/esm/components/Menu/components/RadioGroup.js.map +1 -1
- package/dist/esm/components/Menu/components/Separator.js +1 -1
- package/dist/esm/components/Menu/components/Separator.js.map +1 -1
- package/dist/esm/components/Menu/components/Trigger.js +4 -4
- package/dist/esm/components/Menu/components/Trigger.js.map +1 -1
- package/dist/esm/components/Navigation/Navigation.js +35 -44
- package/dist/esm/components/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/Pagination/PageNumbers.js +23 -28
- package/dist/esm/components/Pagination/PageNumbers.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +39 -56
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Pagination/usePagination.js +7 -21
- package/dist/esm/components/Pagination/usePagination.js.map +1 -1
- package/dist/esm/components/Pagination/usePaginationShortcuts.js +13 -14
- package/dist/esm/components/Pagination/usePaginationShortcuts.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +29 -34
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/Popover/Primitives.js +7 -8
- package/dist/esm/components/Popover/Primitives.js.map +1 -1
- package/dist/esm/components/Progress/Progress.js +11 -15
- package/dist/esm/components/Progress/Progress.js.map +1 -1
- package/dist/esm/components/Provider/Provider.js +13 -18
- package/dist/esm/components/Provider/Provider.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.js +45 -57
- package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +10 -12
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/components/Select/Select.js +30 -31
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Select/useSelect.js +69 -88
- package/dist/esm/components/Select/useSelect.js.map +1 -1
- package/dist/esm/components/Spinner/Spinner.js +12 -19
- package/dist/esm/components/Spinner/Spinner.js.map +1 -1
- package/dist/esm/components/Switch/Switch.js +9 -10
- package/dist/esm/components/Switch/Switch.js.map +1 -1
- package/dist/esm/components/Table/components/BaseTable.js +23 -30
- package/dist/esm/components/Table/components/BaseTable.js.map +1 -1
- package/dist/esm/components/Table/components/PaginatedTable.js +3 -7
- package/dist/esm/components/Table/components/PaginatedTable.js.map +1 -1
- package/dist/esm/components/Table/components/Table.js +18 -25
- package/dist/esm/components/Table/components/Table.js.map +1 -1
- package/dist/esm/components/Table/components/WindowedTable.js +89 -109
- package/dist/esm/components/Table/components/WindowedTable.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowActions.js +123 -148
- package/dist/esm/components/Table/hooks/plugins/useRowActions.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowDraggable.js +57 -61
- package/dist/esm/components/Table/hooks/plugins/useRowDraggable.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowEditing.js +39 -36
- package/dist/esm/components/Table/hooks/plugins/useRowEditing.js.map +1 -1
- package/dist/esm/components/Table/hooks/plugins/useRowSelect.js +79 -89
- package/dist/esm/components/Table/hooks/plugins/useRowSelect.js.map +1 -1
- package/dist/esm/components/Table/hooks/useRowCreation.js +29 -64
- package/dist/esm/components/Table/hooks/useRowCreation.js.map +1 -1
- package/dist/esm/components/Table/hooks/useTable.js +123 -141
- package/dist/esm/components/Table/hooks/useTable.js.map +1 -1
- package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js +23 -27
- package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js.map +1 -1
- package/dist/esm/components/Table/util/renderColumn.js +10 -10
- package/dist/esm/components/Table/util/renderColumn.js.map +1 -1
- package/dist/esm/components/Table/util/renderRow.js +37 -46
- package/dist/esm/components/Table/util/renderRow.js.map +1 -1
- package/dist/esm/components/Table/util/rowIndexPath.js +14 -16
- package/dist/esm/components/Table/util/rowIndexPath.js.map +1 -1
- package/dist/esm/components/Table/util/sortTypes.js +23 -31
- package/dist/esm/components/Table/util/sortTypes.js.map +1 -1
- package/dist/esm/components/Table/util.js +29 -41
- package/dist/esm/components/Table/util.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +25 -27
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/Textarea/Textarea.js +11 -9
- package/dist/esm/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/components/Toast/Toast.js +27 -23
- package/dist/esm/components/Toast/Toast.js.map +1 -1
- package/dist/esm/components/Toast/Toaster.js +88 -118
- package/dist/esm/components/Toast/Toaster.js.map +1 -1
- package/dist/esm/components/Toast/util.js +2 -2
- package/dist/esm/components/Toast/util.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +7 -8
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/Tour/Tour.js +46 -53
- package/dist/esm/components/Tour/Tour.js.map +1 -1
- package/dist/esm/components/Treeview/Treeview.js +26 -36
- package/dist/esm/components/Treeview/Treeview.js.map +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js.map +1 -1
- package/dist/esm/index.css +1 -9
- package/dist/esm/index.js +1 -1
- package/dist/esm/primitives/Button.js +9 -13
- package/dist/esm/primitives/Button.js.map +1 -1
- package/dist/esm/utils/date.js +20 -40
- package/dist/esm/utils/date.js.map +1 -1
- package/dist/esm/utils/hooks/useBoundingClientRectListener.js +12 -20
- package/dist/esm/utils/hooks/useBoundingClientRectListener.js.map +1 -1
- package/dist/esm/utils/hooks/useDraggable.js +16 -17
- package/dist/esm/utils/hooks/useDraggable.js.map +1 -1
- package/dist/esm/utils/hooks/useDropTarget.js +7 -10
- package/dist/esm/utils/hooks/useDropTarget.js.map +1 -1
- package/dist/esm/utils/hooks/useListKeyboardNavigation.js +15 -30
- package/dist/esm/utils/hooks/useListKeyboardNavigation.js.map +1 -1
- package/dist/esm/utils/hooks/useListScrollTo.js +9 -9
- package/dist/esm/utils/hooks/useListScrollTo.js.map +1 -1
- package/dist/esm/utils/hooks/useOnClickOutside.js +6 -8
- package/dist/esm/utils/hooks/useOnClickOutside.js.map +1 -1
- package/dist/esm/utils/hooks/useProxiedRef.js +3 -3
- package/dist/esm/utils/hooks/useProxiedRef.js.map +1 -1
- package/dist/esm/utils/hooks/useTimer.js +9 -17
- package/dist/esm/utils/hooks/useTimer.js.map +1 -1
- package/dist/esm/utils/input.js +8 -12
- package/dist/esm/utils/input.js.map +1 -1
- package/dist/esm/utils/mergeRefs.js +2 -2
- package/dist/esm/utils/mergeRefs.js.map +1 -1
- package/dist/esm/utils/taillwind.js +2 -2
- package/dist/esm/utils/taillwind.js.map +1 -1
- package/dist/index.css +1 -9
- package/dist/taco.cjs.development.js +2368 -2883
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/dist/utils/hooks/useListKeyboardNavigation.d.ts +1 -1
- package/package.json +4 -5
- package/types.json +13 -4
- package/dist/esm/_virtual/_rollupPluginBabelHelpers.js +0 -34
- package/dist/esm/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
@@ -1,4 +1,3 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { IconButton } from '../IconButton/IconButton.js';
|
@@ -9,47 +8,41 @@ import { Select } from '../Select/Select.js';
|
|
9
8
|
import { usePaginationShortcuts } from './usePaginationShortcuts.js';
|
10
9
|
export { usePagination } from './usePagination.js';
|
11
10
|
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
var minItemIndex = pageIndex * pageSize + 1;
|
16
|
-
var maxItemIndex = (pageIndex + 1) * pageSize;
|
11
|
+
const getShowingLabel = (length, pageIndex, pageSize, texts) => {
|
12
|
+
const minItemIndex = pageIndex * pageSize + 1;
|
13
|
+
const maxItemIndex = (pageIndex + 1) * pageSize;
|
17
14
|
return texts.pagination.showingXofYofTotal.replace('[X]', length === 0 ? '0' : String(minItemIndex)).replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex)).replace('[total]', String(length));
|
18
15
|
};
|
19
16
|
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
texts = _useLocalization.texts;
|
40
|
-
|
41
|
-
var maxPageIndex = Math.ceil(length / pageSize) - 1;
|
42
|
-
var showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
|
17
|
+
const Pagination = /*#__PURE__*/forwardRef(function Pagination(props, ref) {
|
18
|
+
const {
|
19
|
+
length,
|
20
|
+
pageIndex,
|
21
|
+
pageSize,
|
22
|
+
pageSizes = [10, 25, 50, 100, 500],
|
23
|
+
setPageIndex,
|
24
|
+
setPageSize,
|
25
|
+
showPageControls = true,
|
26
|
+
showPageNumbers = true,
|
27
|
+
showPageSize = true,
|
28
|
+
dangerouslyHijackGlobalKeyboardNavigation = false,
|
29
|
+
...otherProps
|
30
|
+
} = props;
|
31
|
+
const {
|
32
|
+
texts
|
33
|
+
} = useLocalization();
|
34
|
+
const maxPageIndex = Math.ceil(length / pageSize) - 1;
|
35
|
+
const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
|
43
36
|
usePaginationShortcuts({
|
44
|
-
setPageIndex
|
45
|
-
maxPageIndex
|
46
|
-
pageIndex
|
47
|
-
dangerouslyHijackGlobalKeyboardNavigation
|
37
|
+
setPageIndex,
|
38
|
+
maxPageIndex,
|
39
|
+
pageIndex,
|
40
|
+
dangerouslyHijackGlobalKeyboardNavigation
|
48
41
|
});
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
42
|
+
const pageCount = Math.ceil(length / pageSize);
|
43
|
+
const canPreviousPage = pageIndex > 0;
|
44
|
+
const canNextPage = pageIndex < pageCount - 1;
|
45
|
+
const className = cn('inline-flex relative justify-between items-center', props.className);
|
53
46
|
return createElement("div", Object.assign({}, otherProps, {
|
54
47
|
className: className,
|
55
48
|
"data-taco": "pagination",
|
@@ -59,13 +52,11 @@ var Pagination = /*#__PURE__*/forwardRef(function Pagination(props, ref) {
|
|
59
52
|
}, getShowingLabel(length, pageIndex, pageSize, texts), createElement(Select, {
|
60
53
|
"aria-label": texts.pagination.pageSize,
|
61
54
|
className: "ml-4 !w-20",
|
62
|
-
data: pageSizes.map(
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
}),
|
68
|
-
onChange: function onChange(event) {
|
55
|
+
data: pageSizes.map(pageSize => ({
|
56
|
+
text: String(pageSize),
|
57
|
+
value: pageSize
|
58
|
+
})),
|
59
|
+
onChange: event => {
|
69
60
|
setPageIndex(0);
|
70
61
|
setPageSize(Number(event.target.value));
|
71
62
|
},
|
@@ -77,18 +68,14 @@ var Pagination = /*#__PURE__*/forwardRef(function Pagination(props, ref) {
|
|
77
68
|
appearance: "default",
|
78
69
|
disabled: !canPreviousPage,
|
79
70
|
icon: "arrow-start",
|
80
|
-
onClick:
|
81
|
-
return setPageIndex(0);
|
82
|
-
},
|
71
|
+
onClick: () => setPageIndex(0),
|
83
72
|
"aria-label": showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage,
|
84
73
|
tooltip: showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage
|
85
74
|
}), createElement(IconButton, {
|
86
75
|
appearance: "default",
|
87
76
|
disabled: !canPreviousPage,
|
88
77
|
icon: "arrow-left",
|
89
|
-
onClick:
|
90
|
-
return setPageIndex(pageIndex - 1);
|
91
|
-
},
|
78
|
+
onClick: () => setPageIndex(pageIndex - 1),
|
92
79
|
"aria-label": showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage,
|
93
80
|
tooltip: showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage
|
94
81
|
}), showPageNumbers && pageCount > 0 && createElement(PageNumbers, {
|
@@ -99,18 +86,14 @@ var Pagination = /*#__PURE__*/forwardRef(function Pagination(props, ref) {
|
|
99
86
|
appearance: "default",
|
100
87
|
disabled: !canNextPage,
|
101
88
|
icon: "arrow-right",
|
102
|
-
onClick:
|
103
|
-
return setPageIndex(pageIndex + 1);
|
104
|
-
},
|
89
|
+
onClick: () => setPageIndex(pageIndex + 1),
|
105
90
|
"aria-label": showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage,
|
106
91
|
tooltip: showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage
|
107
92
|
}), createElement(IconButton, {
|
108
93
|
appearance: "default",
|
109
94
|
disabled: !canNextPage,
|
110
95
|
icon: "arrow-end",
|
111
|
-
onClick:
|
112
|
-
return setPageIndex(pageCount - 1);
|
113
|
-
},
|
96
|
+
onClick: () => setPageIndex(pageCount - 1),
|
114
97
|
"aria-label": showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage,
|
115
98
|
tooltip: showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage
|
116
99
|
})));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { PageNumbers } from './PageNumbers';\nimport { LocalizationTexts, useLocalization } from '../Provider/Provider';\nimport { Select } from '../Select/Select';\nimport { Group } from '../Group/Group';\nimport { IconButton } from '../IconButton/IconButton';\nimport { usePaginationValues } from './usePagination';\nimport { usePaginationShortcuts } from './usePaginationShortcuts';\n\nexport * from './usePagination';\n\nexport type PaginationTextsActions = {\n /**\n * Aria-label for first page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n firstPage: string;\n /**\n * Aria-label for first page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n firstPageWithShortcut: string;\n /**\n * Aria-label for next page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n nextPage: string;\n /**\n * Aria-label for next page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n nextPageWithShortcut: string;\n /**\n * Aria-label for previous page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n previousPage: string;\n /**\n * Aria-label for previous page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n previousPageWithShortcut: string;\n /**\n * Aria-label for last page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n lastPage: string;\n /**\n * Aria-label for last page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n lastPageWithShortcut: string;\n /**\n * Aria-label for page X action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n pageX: string;\n};\n\nexport type PaginationTexts = {\n /**\n * Aria-label provided for page numbers and page actions group.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n label: string;\n /**\n * Aria-label provided for page size selection.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n pageSize: string;\n /**\n * Text that indicates the number of the first and last element displayed on the current page, out of total items\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n showingXofYofTotal: string;\n /**\n * Aria-labels provided for page action buttons.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n actions: PaginationTextsActions;\n};\n\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> &\n usePaginationValues & {\n /** Indicate total number of items that will be paginated */\n length: number;\n /** Page size options */\n pageSizes?: number[];\n /** Shows page controls */\n showPageControls?: boolean;\n /** Shows page numbers between navigation buttons, which allows users to quickly navigate to a specific page */\n showPageNumbers?: boolean;\n /** Shows a dropdown with page sizes, which allows user to change the number of items displayed on the page */\n showPageSize?: boolean;\n /** Enable pagination shortcuts */\n dangerouslyHijackGlobalKeyboardNavigation?: boolean;\n };\n\nconst getShowingLabel = (length: number, pageIndex: number, pageSize: number, texts: LocalizationTexts): string => {\n const minItemIndex = pageIndex * pageSize + 1;\n const maxItemIndex = (pageIndex + 1) * pageSize;\n\n return texts.pagination.showingXofYofTotal\n .replace('[X]', length === 0 ? '0' : String(minItemIndex))\n .replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex))\n .replace('[total]', String(length));\n};\n\nexport const Pagination = React.forwardRef(function Pagination(props: PaginationProps, ref: React.Ref<HTMLDivElement>) {\n const {\n length,\n pageIndex,\n pageSize,\n pageSizes = [10, 25, 50, 100, 500],\n setPageIndex,\n setPageSize,\n showPageControls = true,\n showPageNumbers = true,\n showPageSize = true,\n dangerouslyHijackGlobalKeyboardNavigation = false,\n ...otherProps\n } = props;\n const { texts } = useLocalization();\n\n const maxPageIndex = Math.ceil(length / pageSize) - 1;\n const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;\n\n usePaginationShortcuts({\n setPageIndex,\n maxPageIndex,\n pageIndex,\n dangerouslyHijackGlobalKeyboardNavigation,\n });\n\n const pageCount = Math.ceil(length / pageSize);\n const canPreviousPage = pageIndex > 0;\n const canNextPage = pageIndex < pageCount - 1;\n\n const className = cn('inline-flex relative justify-between items-center', props.className);\n\n return (\n <div {...otherProps} className={className} data-taco=\"pagination\" ref={ref}>\n {showPageSize && (\n <span className=\"mr-4\">\n {getShowingLabel(length, pageIndex, pageSize, texts)}\n <Select\n aria-label={texts.pagination.pageSize}\n className=\"ml-4 !w-20\"\n data={pageSizes.map(pageSize => ({\n text: String(pageSize),\n value: pageSize,\n }))}\n onChange={event => {\n setPageIndex(0);\n setPageSize(Number(event.target.value));\n }}\n value={pageSize}\n />\n </span>\n )}\n {showPageControls && (\n <Group as=\"nav\" aria-label={texts.pagination.label}>\n <IconButton\n appearance=\"default\"\n disabled={!canPreviousPage}\n icon=\"arrow-start\"\n onClick={() => setPageIndex(0)}\n aria-label={\n showShortcutTexts\n ? texts.pagination.actions.firstPageWithShortcut\n : texts.pagination.actions.firstPage\n }\n tooltip={\n showShortcutTexts\n ? texts.pagination.actions.firstPageWithShortcut\n : texts.pagination.actions.firstPage\n }\n />\n <IconButton\n appearance=\"default\"\n disabled={!canPreviousPage}\n icon=\"arrow-left\"\n onClick={() => setPageIndex(pageIndex - 1)}\n aria-label={\n showShortcutTexts\n ? texts.pagination.actions.previousPageWithShortcut\n : texts.pagination.actions.previousPage\n }\n tooltip={\n showShortcutTexts\n ? texts.pagination.actions.previousPageWithShortcut\n : texts.pagination.actions.previousPage\n }\n />\n {showPageNumbers && pageCount > 0 && (\n <PageNumbers pageCount={pageCount} currentPageIndex={pageIndex} onClick={setPageIndex} />\n )}\n <IconButton\n appearance=\"default\"\n disabled={!canNextPage}\n icon=\"arrow-right\"\n onClick={() => setPageIndex(pageIndex + 1)}\n aria-label={\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n }\n tooltip={\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n }\n />\n <IconButton\n appearance=\"default\"\n disabled={!canNextPage}\n icon=\"arrow-end\"\n onClick={() => setPageIndex(pageCount - 1)}\n aria-label={\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n }\n tooltip={\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n }\n />\n </Group>\n )}\n </div>\n );\n});\n"],"names":["getShowingLabel","length","pageIndex","pageSize","texts","minItemIndex","maxItemIndex","pagination","showingXofYofTotal","replace","String","Pagination","React","props","ref","pageSizes","setPageIndex","setPageSize","showPageControls","showPageNumbers","showPageSize","dangerouslyHijackGlobalKeyboardNavigation","otherProps","useLocalization","maxPageIndex","Math","ceil","showShortcutTexts","usePaginationShortcuts","pageCount","canPreviousPage","canNextPage","className","cn","Select","data","map","text","value","onChange","event","Number","target","Group","as","label","IconButton","appearance","disabled","icon","onClick","actions","firstPageWithShortcut","firstPage","tooltip","previousPageWithShortcut","previousPage","PageNumbers","currentPageIndex","nextPageWithShortcut","nextPage","lastPageWithShortcut","lastPage"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Pagination.js","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { PageNumbers } from './PageNumbers';\nimport { LocalizationTexts, useLocalization } from '../Provider/Provider';\nimport { Select } from '../Select/Select';\nimport { Group } from '../Group/Group';\nimport { IconButton } from '../IconButton/IconButton';\nimport { usePaginationValues } from './usePagination';\nimport { usePaginationShortcuts } from './usePaginationShortcuts';\n\nexport * from './usePagination';\n\nexport type PaginationTextsActions = {\n /**\n * Aria-label for first page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n firstPage: string;\n /**\n * Aria-label for first page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n firstPageWithShortcut: string;\n /**\n * Aria-label for next page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n nextPage: string;\n /**\n * Aria-label for next page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n nextPageWithShortcut: string;\n /**\n * Aria-label for previous page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n previousPage: string;\n /**\n * Aria-label for previous page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n previousPageWithShortcut: string;\n /**\n * Aria-label for last page action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n lastPage: string;\n /**\n * Aria-label for last page action button with shortcut.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n lastPageWithShortcut: string;\n /**\n * Aria-label for page X action button.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n pageX: string;\n};\n\nexport type PaginationTexts = {\n /**\n * Aria-label provided for page numbers and page actions group.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n label: string;\n /**\n * Aria-label provided for page size selection.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n pageSize: string;\n /**\n * Text that indicates the number of the first and last element displayed on the current page, out of total items\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n showingXofYofTotal: string;\n /**\n * Aria-labels provided for page action buttons.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n actions: PaginationTextsActions;\n};\n\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> &\n usePaginationValues & {\n /** Indicate total number of items that will be paginated */\n length: number;\n /** Page size options */\n pageSizes?: number[];\n /** Shows page controls */\n showPageControls?: boolean;\n /** Shows page numbers between navigation buttons, which allows users to quickly navigate to a specific page */\n showPageNumbers?: boolean;\n /** Shows a dropdown with page sizes, which allows user to change the number of items displayed on the page */\n showPageSize?: boolean;\n /** Enable pagination shortcuts */\n dangerouslyHijackGlobalKeyboardNavigation?: boolean;\n };\n\nconst getShowingLabel = (length: number, pageIndex: number, pageSize: number, texts: LocalizationTexts): string => {\n const minItemIndex = pageIndex * pageSize + 1;\n const maxItemIndex = (pageIndex + 1) * pageSize;\n\n return texts.pagination.showingXofYofTotal\n .replace('[X]', length === 0 ? '0' : String(minItemIndex))\n .replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex))\n .replace('[total]', String(length));\n};\n\nexport const Pagination = React.forwardRef(function Pagination(props: PaginationProps, ref: React.Ref<HTMLDivElement>) {\n const {\n length,\n pageIndex,\n pageSize,\n pageSizes = [10, 25, 50, 100, 500],\n setPageIndex,\n setPageSize,\n showPageControls = true,\n showPageNumbers = true,\n showPageSize = true,\n dangerouslyHijackGlobalKeyboardNavigation = false,\n ...otherProps\n } = props;\n const { texts } = useLocalization();\n\n const maxPageIndex = Math.ceil(length / pageSize) - 1;\n const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;\n\n usePaginationShortcuts({\n setPageIndex,\n maxPageIndex,\n pageIndex,\n dangerouslyHijackGlobalKeyboardNavigation,\n });\n\n const pageCount = Math.ceil(length / pageSize);\n const canPreviousPage = pageIndex > 0;\n const canNextPage = pageIndex < pageCount - 1;\n\n const className = cn('inline-flex relative justify-between items-center', props.className);\n\n return (\n <div {...otherProps} className={className} data-taco=\"pagination\" ref={ref}>\n {showPageSize && (\n <span className=\"mr-4\">\n {getShowingLabel(length, pageIndex, pageSize, texts)}\n <Select\n aria-label={texts.pagination.pageSize}\n className=\"ml-4 !w-20\"\n data={pageSizes.map(pageSize => ({\n text: String(pageSize),\n value: pageSize,\n }))}\n onChange={event => {\n setPageIndex(0);\n setPageSize(Number(event.target.value));\n }}\n value={pageSize}\n />\n </span>\n )}\n {showPageControls && (\n <Group as=\"nav\" aria-label={texts.pagination.label}>\n <IconButton\n appearance=\"default\"\n disabled={!canPreviousPage}\n icon=\"arrow-start\"\n onClick={() => setPageIndex(0)}\n aria-label={\n showShortcutTexts\n ? texts.pagination.actions.firstPageWithShortcut\n : texts.pagination.actions.firstPage\n }\n tooltip={\n showShortcutTexts\n ? texts.pagination.actions.firstPageWithShortcut\n : texts.pagination.actions.firstPage\n }\n />\n <IconButton\n appearance=\"default\"\n disabled={!canPreviousPage}\n icon=\"arrow-left\"\n onClick={() => setPageIndex(pageIndex - 1)}\n aria-label={\n showShortcutTexts\n ? texts.pagination.actions.previousPageWithShortcut\n : texts.pagination.actions.previousPage\n }\n tooltip={\n showShortcutTexts\n ? texts.pagination.actions.previousPageWithShortcut\n : texts.pagination.actions.previousPage\n }\n />\n {showPageNumbers && pageCount > 0 && (\n <PageNumbers pageCount={pageCount} currentPageIndex={pageIndex} onClick={setPageIndex} />\n )}\n <IconButton\n appearance=\"default\"\n disabled={!canNextPage}\n icon=\"arrow-right\"\n onClick={() => setPageIndex(pageIndex + 1)}\n aria-label={\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n }\n tooltip={\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n }\n />\n <IconButton\n appearance=\"default\"\n disabled={!canNextPage}\n icon=\"arrow-end\"\n onClick={() => setPageIndex(pageCount - 1)}\n aria-label={\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n }\n tooltip={\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n }\n />\n </Group>\n )}\n </div>\n );\n});\n"],"names":["getShowingLabel","length","pageIndex","pageSize","texts","minItemIndex","maxItemIndex","pagination","showingXofYofTotal","replace","String","Pagination","React","props","ref","pageSizes","setPageIndex","setPageSize","showPageControls","showPageNumbers","showPageSize","dangerouslyHijackGlobalKeyboardNavigation","otherProps","useLocalization","maxPageIndex","Math","ceil","showShortcutTexts","usePaginationShortcuts","pageCount","canPreviousPage","canNextPage","className","cn","Select","data","map","text","value","onChange","event","Number","target","Group","as","label","IconButton","appearance","disabled","icon","onClick","actions","firstPageWithShortcut","firstPage","tooltip","previousPageWithShortcut","previousPage","PageNumbers","currentPageIndex","nextPageWithShortcut","nextPage","lastPageWithShortcut","lastPage"],"mappings":";;;;;;;;;;AAmGA,MAAMA,eAAe,GAAG,CAACC,MAAD,EAAiBC,SAAjB,EAAoCC,QAApC,EAAsDC,KAAtD;EACpB,MAAMC,YAAY,GAAGH,SAAS,GAAGC,QAAZ,GAAuB,CAA5C;EACA,MAAMG,YAAY,GAAG,CAACJ,SAAS,GAAG,CAAb,IAAkBC,QAAvC;EAEA,OAAOC,KAAK,CAACG,UAAN,CAAiBC,kBAAjB,CACFC,OADE,CACM,KADN,EACaR,MAAM,KAAK,CAAX,GAAe,GAAf,GAAqBS,MAAM,CAACL,YAAD,CADxC,EAEFI,OAFE,CAEM,KAFN,EAEaC,MAAM,CAACJ,YAAY,GAAGL,MAAf,GAAwBA,MAAxB,GAAiCK,YAAlC,CAFnB,EAGFG,OAHE,CAGM,SAHN,EAGiBC,MAAM,CAACT,MAAD,CAHvB,CAAP;AAIH,CARD;;MAUaU,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;EACvC,MAAM;IACFb,MADE;IAEFC,SAFE;IAGFC,QAHE;IAIFY,SAAS,GAAG,CAAC,EAAD,EAAK,EAAL,EAAS,EAAT,EAAa,GAAb,EAAkB,GAAlB,CAJV;IAKFC,YALE;IAMFC,WANE;IAOFC,gBAAgB,GAAG,IAPjB;IAQFC,eAAe,GAAG,IARhB;IASFC,YAAY,GAAG,IATb;IAUFC,yCAAyC,GAAG,KAV1C;IAWF,GAAGC;MACHT,KAZJ;EAaA,MAAM;IAAET;MAAUmB,eAAe,EAAjC;EAEA,MAAMC,YAAY,GAAGC,IAAI,CAACC,IAAL,CAAUzB,MAAM,GAAGE,QAAnB,IAA+B,CAApD;EACA,MAAMwB,iBAAiB,GAAGN,yCAA1B;EAEAO,sBAAsB,CAAC;IACnBZ,YADmB;IAEnBQ,YAFmB;IAGnBtB,SAHmB;IAInBmB;GAJkB,CAAtB;EAOA,MAAMQ,SAAS,GAAGJ,IAAI,CAACC,IAAL,CAAUzB,MAAM,GAAGE,QAAnB,CAAlB;EACA,MAAM2B,eAAe,GAAG5B,SAAS,GAAG,CAApC;EACA,MAAM6B,WAAW,GAAG7B,SAAS,GAAG2B,SAAS,GAAG,CAA5C;EAEA,MAAMG,SAAS,GAAGC,EAAE,CAAC,mDAAD,EAAsDpB,KAAK,CAACmB,SAA5D,CAApB;EAEA,OACIpB,aAAA,MAAA,oBAASU;IAAYU,SAAS,EAAEA;iBAAqB;IAAalB,GAAG,EAAEA;IAAvE,EACKM,YAAY,IACTR,aAAA,OAAA;IAAMoB,SAAS,EAAC;GAAhB,EACKhC,eAAe,CAACC,MAAD,EAASC,SAAT,EAAoBC,QAApB,EAA8BC,KAA9B,CADpB,EAEIQ,aAAA,CAACsB,MAAD;kBACgB9B,KAAK,CAACG,UAAN,CAAiBJ;IAC7B6B,SAAS,EAAC;IACVG,IAAI,EAAEpB,SAAS,CAACqB,GAAV,CAAcjC,QAAQ,KAAK;MAC7BkC,IAAI,EAAE3B,MAAM,CAACP,QAAD,CADiB;MAE7BmC,KAAK,EAAEnC;KAFiB,CAAtB;IAINoC,QAAQ,EAAEC,KAAK;MACXxB,YAAY,CAAC,CAAD,CAAZ;MACAC,WAAW,CAACwB,MAAM,CAACD,KAAK,CAACE,MAAN,CAAaJ,KAAd,CAAP,CAAX;;IAEJA,KAAK,EAAEnC;GAXX,CAFJ,CAFR,EAmBKe,gBAAgB,IACbN,aAAA,CAAC+B,KAAD;IAAOC,EAAE,EAAC;kBAAkBxC,KAAK,CAACG,UAAN,CAAiBsC;GAA7C,EACIjC,aAAA,CAACkC,UAAD;IACIC,UAAU,EAAC;IACXC,QAAQ,EAAE,CAAClB;IACXmB,IAAI,EAAC;IACLC,OAAO,EAAE,MAAMlC,YAAY,CAAC,CAAD;kBAEvBW,iBAAiB,GACXvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBC,qBADd,GAEXhD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBE;IAEnCC,OAAO,EACH3B,iBAAiB,GACXvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBC,qBADd,GAEXhD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBE;GAbvC,CADJ,EAiBIzC,aAAA,CAACkC,UAAD;IACIC,UAAU,EAAC;IACXC,QAAQ,EAAE,CAAClB;IACXmB,IAAI,EAAC;IACLC,OAAO,EAAE,MAAMlC,YAAY,CAACd,SAAS,GAAG,CAAb;kBAEvByB,iBAAiB,GACXvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBI,wBADd,GAEXnD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBK;IAEnCF,OAAO,EACH3B,iBAAiB,GACXvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBI,wBADd,GAEXnD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBK;GAbvC,CAjBJ,EAiCKrC,eAAe,IAAIU,SAAS,GAAG,CAA/B,IACGjB,aAAA,CAAC6C,WAAD;IAAa5B,SAAS,EAAEA;IAAW6B,gBAAgB,EAAExD;IAAWgD,OAAO,EAAElC;GAAzE,CAlCR,EAoCIJ,aAAA,CAACkC,UAAD;IACIC,UAAU,EAAC;IACXC,QAAQ,EAAE,CAACjB;IACXkB,IAAI,EAAC;IACLC,OAAO,EAAE,MAAMlC,YAAY,CAACd,SAAS,GAAG,CAAb;kBAEvByB,iBAAiB,GAAGvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBQ,oBAA5B,GAAmDvD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBS;IAEjGN,OAAO,EACH3B,iBAAiB,GAAGvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBQ,oBAA5B,GAAmDvD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBS;GATrG,CApCJ,EAgDIhD,aAAA,CAACkC,UAAD;IACIC,UAAU,EAAC;IACXC,QAAQ,EAAE,CAACjB;IACXkB,IAAI,EAAC;IACLC,OAAO,EAAE,MAAMlC,YAAY,CAACa,SAAS,GAAG,CAAb;kBAEvBF,iBAAiB,GAAGvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBU,oBAA5B,GAAmDzD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBW;IAEjGR,OAAO,EACH3B,iBAAiB,GAAGvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBU,oBAA5B,GAAmDzD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBW;GATrG,CAhDJ,CApBR,CADJ;AAqFH,CArHyB;;;;"}
|
@@ -1,27 +1,13 @@
|
|
1
1
|
import React__default from 'react';
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
}
|
7
|
-
|
8
|
-
if (initialPageSize === void 0) {
|
9
|
-
initialPageSize = 10;
|
10
|
-
}
|
11
|
-
|
12
|
-
var _React$useState = React__default.useState(initialPageIndex),
|
13
|
-
pageIndex = _React$useState[0],
|
14
|
-
setPageIndex = _React$useState[1];
|
15
|
-
|
16
|
-
var _React$useState2 = React__default.useState(initialPageSize),
|
17
|
-
pageSize = _React$useState2[0],
|
18
|
-
setPageSize = _React$useState2[1];
|
19
|
-
|
3
|
+
const usePagination = (initialPageIndex = 0, initialPageSize = 10) => {
|
4
|
+
const [pageIndex, setPageIndex] = React__default.useState(initialPageIndex);
|
5
|
+
const [pageSize, setPageSize] = React__default.useState(initialPageSize);
|
20
6
|
return {
|
21
|
-
pageIndex
|
22
|
-
pageSize
|
23
|
-
setPageIndex
|
24
|
-
setPageSize
|
7
|
+
pageIndex,
|
8
|
+
pageSize,
|
9
|
+
setPageIndex,
|
10
|
+
setPageSize
|
25
11
|
};
|
26
12
|
};
|
27
13
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"usePagination.js","sources":["../../../../src/components/Pagination/usePagination.tsx"],"sourcesContent":["import React from 'react';\n\nexport type usePaginationValues = {\n /** Current page index (zero based) */\n pageIndex: number;\n /** Number of items displayed on a page */\n pageSize: number;\n /** Handler called when navigating through pages */\n setPageIndex: (pageIndex: number) => void;\n /** Handler called when changing the size of the page */\n setPageSize: (size: number) => void;\n};\n\nexport const usePagination = (initialPageIndex = 0, initialPageSize = 10): usePaginationValues => {\n const [pageIndex, setPageIndex] = React.useState(initialPageIndex);\n const [pageSize, setPageSize] = React.useState(initialPageSize);\n\n return {\n pageIndex,\n pageSize,\n setPageIndex,\n setPageSize,\n };\n};\n"],"names":["usePagination","initialPageIndex","initialPageSize","
|
1
|
+
{"version":3,"file":"usePagination.js","sources":["../../../../src/components/Pagination/usePagination.tsx"],"sourcesContent":["import React from 'react';\n\nexport type usePaginationValues = {\n /** Current page index (zero based) */\n pageIndex: number;\n /** Number of items displayed on a page */\n pageSize: number;\n /** Handler called when navigating through pages */\n setPageIndex: (pageIndex: number) => void;\n /** Handler called when changing the size of the page */\n setPageSize: (size: number) => void;\n};\n\nexport const usePagination = (initialPageIndex = 0, initialPageSize = 10): usePaginationValues => {\n const [pageIndex, setPageIndex] = React.useState(initialPageIndex);\n const [pageSize, setPageSize] = React.useState(initialPageSize);\n\n return {\n pageIndex,\n pageSize,\n setPageIndex,\n setPageSize,\n };\n};\n"],"names":["usePagination","initialPageIndex","initialPageSize","pageIndex","setPageIndex","React","useState","pageSize","setPageSize"],"mappings":";;MAaaA,aAAa,GAAG,CAACC,gBAAgB,GAAG,CAApB,EAAuBC,eAAe,GAAG,EAAzC;EACzB,MAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4BC,cAAK,CAACC,QAAN,CAAeL,gBAAf,CAAlC;EACA,MAAM,CAACM,QAAD,EAAWC,WAAX,IAA0BH,cAAK,CAACC,QAAN,CAAeJ,eAAf,CAAhC;EAEA,OAAO;IACHC,SADG;IAEHI,QAFG;IAGHH,YAHG;IAIHI;GAJJ;AAMH;;;;"}
|
@@ -1,44 +1,43 @@
|
|
1
1
|
import React__default from 'react';
|
2
|
-
import keycode from 'keycode';
|
3
2
|
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
if (setPageIndex && event.
|
3
|
+
const usePaginationShortcuts = ({
|
4
|
+
setPageIndex,
|
5
|
+
maxPageIndex,
|
6
|
+
pageIndex,
|
7
|
+
dangerouslyHijackGlobalKeyboardNavigation: useGlobalKeyboardNavigation
|
8
|
+
}) => {
|
9
|
+
const onKeyDown = event => {
|
10
|
+
if (setPageIndex && event.key === 'Home') {
|
12
11
|
event.preventDefault();
|
13
12
|
setPageIndex(0);
|
14
13
|
return;
|
15
14
|
}
|
16
15
|
|
17
|
-
if (setPageIndex && event.
|
16
|
+
if (setPageIndex && event.key === 'End') {
|
18
17
|
event.preventDefault();
|
19
18
|
setPageIndex(maxPageIndex);
|
20
19
|
return;
|
21
20
|
}
|
22
21
|
|
23
|
-
if (setPageIndex && event.
|
22
|
+
if (setPageIndex && event.key === 'PageUp') {
|
24
23
|
event.preventDefault();
|
25
24
|
setPageIndex(Math.max(0, pageIndex - 1));
|
26
25
|
return;
|
27
26
|
}
|
28
27
|
|
29
|
-
if (setPageIndex && event.
|
28
|
+
if (setPageIndex && event.key === 'PageDown') {
|
30
29
|
event.preventDefault();
|
31
30
|
setPageIndex(Math.min(maxPageIndex, pageIndex + 1));
|
32
31
|
return;
|
33
32
|
}
|
34
33
|
};
|
35
34
|
|
36
|
-
React__default.useEffect(
|
35
|
+
React__default.useEffect(() => {
|
37
36
|
if (useGlobalKeyboardNavigation) {
|
38
37
|
window.addEventListener('keydown', onKeyDown);
|
39
38
|
}
|
40
39
|
|
41
|
-
return
|
40
|
+
return () => {
|
42
41
|
if (useGlobalKeyboardNavigation) {
|
43
42
|
window.removeEventListener('keydown', onKeyDown);
|
44
43
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"usePaginationShortcuts.js","sources":["../../../../src/components/Pagination/usePaginationShortcuts.tsx"],"sourcesContent":["import React from 'react';\
|
1
|
+
{"version":3,"file":"usePaginationShortcuts.js","sources":["../../../../src/components/Pagination/usePaginationShortcuts.tsx"],"sourcesContent":["import React from 'react';\n\ninterface Props {\n setPageIndex: (pageIndex: number) => void;\n maxPageIndex: number;\n pageIndex: number;\n dangerouslyHijackGlobalKeyboardNavigation: boolean;\n}\n\nexport const usePaginationShortcuts = ({\n setPageIndex,\n maxPageIndex,\n pageIndex,\n dangerouslyHijackGlobalKeyboardNavigation: useGlobalKeyboardNavigation,\n}: Props) => {\n const onKeyDown = (event: KeyboardEvent): void => {\n if (setPageIndex && event.key === 'Home') {\n event.preventDefault();\n setPageIndex(0);\n return;\n }\n\n if (setPageIndex && event.key === 'End') {\n event.preventDefault();\n setPageIndex(maxPageIndex);\n return;\n }\n\n if (setPageIndex && event.key === 'PageUp') {\n event.preventDefault();\n setPageIndex(Math.max(0, pageIndex - 1));\n return;\n }\n\n if (setPageIndex && event.key === 'PageDown') {\n event.preventDefault();\n setPageIndex(Math.min(maxPageIndex, pageIndex + 1));\n return;\n }\n };\n\n React.useEffect(() => {\n if (useGlobalKeyboardNavigation) {\n window.addEventListener('keydown', onKeyDown);\n }\n\n return () => {\n if (useGlobalKeyboardNavigation) {\n window.removeEventListener('keydown', onKeyDown);\n }\n };\n }, [onKeyDown, useGlobalKeyboardNavigation]);\n};\n"],"names":["usePaginationShortcuts","setPageIndex","maxPageIndex","pageIndex","dangerouslyHijackGlobalKeyboardNavigation","useGlobalKeyboardNavigation","onKeyDown","event","key","preventDefault","Math","max","min","React","useEffect","window","addEventListener","removeEventListener"],"mappings":";;MASaA,sBAAsB,GAAG,CAAC;EACnCC,YADmC;EAEnCC,YAFmC;EAGnCC,SAHmC;EAInCC,yCAAyC,EAAEC;AAJR,CAAD;EAMlC,MAAMC,SAAS,GAAIC,KAAD;IACd,IAAIN,YAAY,IAAIM,KAAK,CAACC,GAAN,KAAc,MAAlC,EAA0C;MACtCD,KAAK,CAACE,cAAN;MACAR,YAAY,CAAC,CAAD,CAAZ;MACA;;;IAGJ,IAAIA,YAAY,IAAIM,KAAK,CAACC,GAAN,KAAc,KAAlC,EAAyC;MACrCD,KAAK,CAACE,cAAN;MACAR,YAAY,CAACC,YAAD,CAAZ;MACA;;;IAGJ,IAAID,YAAY,IAAIM,KAAK,CAACC,GAAN,KAAc,QAAlC,EAA4C;MACxCD,KAAK,CAACE,cAAN;MACAR,YAAY,CAACS,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYR,SAAS,GAAG,CAAxB,CAAD,CAAZ;MACA;;;IAGJ,IAAIF,YAAY,IAAIM,KAAK,CAACC,GAAN,KAAc,UAAlC,EAA8C;MAC1CD,KAAK,CAACE,cAAN;MACAR,YAAY,CAACS,IAAI,CAACE,GAAL,CAASV,YAAT,EAAuBC,SAAS,GAAG,CAAnC,CAAD,CAAZ;MACA;;GAtBR;;EA0BAU,cAAK,CAACC,SAAN,CAAgB;IACZ,IAAIT,2BAAJ,EAAiC;MAC7BU,MAAM,CAACC,gBAAP,CAAwB,SAAxB,EAAmCV,SAAnC;;;IAGJ,OAAO;MACH,IAAID,2BAAJ,EAAiC;QAC7BU,MAAM,CAACE,mBAAP,CAA2B,SAA3B,EAAsCX,SAAtC;;KAFR;GALJ,EAUG,CAACA,SAAD,EAAYD,2BAAZ,CAVH;AAWH;;;;"}
|
@@ -1,23 +1,21 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, useMemo, createElement, createContext, useContext, isValidElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { Root, Trigger as Trigger$1, Close as Close$1 } from '@radix-ui/react-popover';
|
5
4
|
import { UnstyledContent, UnstyledArrow } from './Primitives.js';
|
6
5
|
import { mergeRefs } from '../../utils/mergeRefs.js';
|
7
6
|
|
8
|
-
|
9
|
-
var PopoverContext = /*#__PURE__*/createContext({
|
7
|
+
const PopoverContext = /*#__PURE__*/createContext({
|
10
8
|
props: {},
|
11
9
|
ref: null
|
12
10
|
});
|
13
|
-
|
11
|
+
const Trigger = /*#__PURE__*/forwardRef(function PopoverTrigger(props, ref) {
|
14
12
|
var _props$children;
|
15
13
|
|
16
|
-
|
17
|
-
|
14
|
+
const context = useContext(PopoverContext);
|
15
|
+
let children = props.children;
|
18
16
|
|
19
17
|
if (isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
|
20
|
-
console.warn(
|
18
|
+
console.warn(`Popover.Trigger requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`);
|
21
19
|
children = createElement("span", null, props.children);
|
22
20
|
}
|
23
21
|
|
@@ -27,22 +25,22 @@ var Trigger = /*#__PURE__*/forwardRef(function PopoverTrigger(props, ref) {
|
|
27
25
|
asChild: true
|
28
26
|
}));
|
29
27
|
});
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
28
|
+
const RenderPropWrapper = /*#__PURE__*/forwardRef(function RenderPropWrapper({
|
29
|
+
children,
|
30
|
+
onClick
|
31
|
+
}, ref) {
|
32
|
+
const close = () => {
|
35
33
|
onClick(new CustomEvent('hide'));
|
36
34
|
};
|
37
35
|
|
38
36
|
return children({
|
39
|
-
close
|
40
|
-
ref
|
37
|
+
close,
|
38
|
+
ref
|
41
39
|
});
|
42
40
|
});
|
43
|
-
|
44
|
-
|
45
|
-
|
41
|
+
const Content = /*#__PURE__*/forwardRef(function PopoverContent(props, ref) {
|
42
|
+
const className = cn('bg-white focus:border-blue-light', props.className);
|
43
|
+
let output;
|
46
44
|
|
47
45
|
if (typeof props.children === 'function') {
|
48
46
|
output = createElement(Close$1, {
|
@@ -60,23 +58,20 @@ var Content = /*#__PURE__*/forwardRef(function PopoverContent(props, ref) {
|
|
60
58
|
className: "text-white"
|
61
59
|
}));
|
62
60
|
});
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
ref: ref
|
78
|
-
};
|
79
|
-
}, [otherProps]);
|
61
|
+
const Close = /*#__PURE__*/forwardRef((props, ref) => createElement(Close$1, Object.assign({}, props, {
|
62
|
+
ref: ref,
|
63
|
+
asChild: true
|
64
|
+
})));
|
65
|
+
const Popover = /*#__PURE__*/forwardRef(function Popover(props, ref) {
|
66
|
+
const {
|
67
|
+
children,
|
68
|
+
trigger,
|
69
|
+
...otherProps
|
70
|
+
} = props;
|
71
|
+
const context = useMemo(() => ({
|
72
|
+
props: otherProps,
|
73
|
+
ref
|
74
|
+
}), [otherProps]);
|
80
75
|
return createElement(PopoverContext.Provider, {
|
81
76
|
value: context
|
82
77
|
}, createElement(Root, null, trigger && createElement(Trigger, null, trigger), children));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Popover.js","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Placement } from '../..';\nimport { UnstyledArrow, UnstyledContent } from './Primitives';\nimport { mergeRefs } from '../../utils/mergeRefs';\n\ntype PopoverContextValue = { props: any; ref: React.Ref<HTMLElement> };\n\nconst PopoverContext = React.createContext<PopoverContextValue>({\n props: {},\n ref: null,\n});\n\nexport type PopoverTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\nconst Trigger = React.forwardRef(function PopoverTrigger(props: PopoverTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n const context = React.useContext(PopoverContext);\n let children = props.children;\n\n if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n console.warn(\n `Popover.Trigger requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n );\n children = <span>{props.children}</span>;\n }\n\n return (\n <PopoverPrimitive.Trigger {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\n );\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick }: any, ref) {\n const close = () => {\n onClick(new CustomEvent('hide'));\n };\n\n return children({ close, ref });\n});\n\nexport type PopoverContentRenderProps = { close: () => void };\nexport type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n children: React.ReactNode | ((props: PopoverContentRenderProps) => React.ReactNode);\n /** Set the position of the Popover relative to its trigger. Default value is `bottom` */\n placement?: Placement;\n};\nconst Content = React.forwardRef(function PopoverContent(props: PopoverContentProps, ref: React.Ref<HTMLDivElement>) {\n const className = cn('bg-white focus:border-blue-light', props.className);\n\n let output;\n\n if (typeof props.children === 'function') {\n output = (\n <PopoverPrimitive.Close asChild>\n <RenderPropWrapper>{props.children}</RenderPropWrapper>\n </PopoverPrimitive.Close>\n );\n } else {\n output = props.children;\n }\n\n return (\n <UnstyledContent className={className} placement={props.placement} ref={ref}>\n {output}\n <UnstyledArrow className=\"text-white\" />\n </UnstyledContent>\n );\n});\n\nexport type PopoverCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nconst Close = React.forwardRef(\n (props: PopoverCloseProps, ref: React.Ref<HTMLButtonElement>): JSX.Element => (\n <PopoverPrimitive.Close {...props} ref={ref} asChild />\n )\n);\n\nexport type PopoverProps = React.PropsWithChildren<{\n /** A trigger to be used for the popover, should not be set if `children` already contains a trigger */\n trigger?: JSX.Element;\n}>;\nexport type ForwardedPopoverWithStatics = React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLElement>> & {\n Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps>;\n Content: React.ForwardRefExoticComponent<PopoverContentProps>;\n Close: React.ForwardRefExoticComponent<PopoverCloseProps>;\n};\n\nexport const Popover = React.forwardRef(function Popover(props: PopoverProps, ref: React.Ref<HTMLElement>) {\n const { children, trigger, ...otherProps } = props;\n const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\n\n return (\n <PopoverContext.Provider value={context}>\n <PopoverPrimitive.Root>\n {trigger && <Trigger>{trigger}</Trigger>}\n {children}\n </PopoverPrimitive.Root>\n </PopoverContext.Provider>\n );\n}) as ForwardedPopoverWithStatics;\nPopover.Trigger = Trigger;\nPopover.Content = Content;\nPopover.Close = Close;\n"],"names":["PopoverContext","React","props","ref","Trigger","PopoverTrigger","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","RenderPropWrapper","onClick","close","CustomEvent","Content","PopoverContent","className","cn","output","UnstyledContent","placement","UnstyledArrow","Close","Popover","trigger","otherProps","Provider","value"],"mappings":"
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Placement } from '../..';\nimport { UnstyledArrow, UnstyledContent } from './Primitives';\nimport { mergeRefs } from '../../utils/mergeRefs';\n\ntype PopoverContextValue = { props: any; ref: React.Ref<HTMLElement> };\n\nconst PopoverContext = React.createContext<PopoverContextValue>({\n props: {},\n ref: null,\n});\n\nexport type PopoverTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\nconst Trigger = React.forwardRef(function PopoverTrigger(props: PopoverTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n const context = React.useContext(PopoverContext);\n let children = props.children;\n\n if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\n console.warn(\n `Popover.Trigger requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\n );\n children = <span>{props.children}</span>;\n }\n\n return (\n <PopoverPrimitive.Trigger {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\n );\n});\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick }: any, ref) {\n const close = () => {\n onClick(new CustomEvent('hide'));\n };\n\n return children({ close, ref });\n});\n\nexport type PopoverContentRenderProps = { close: () => void };\nexport type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n children: React.ReactNode | ((props: PopoverContentRenderProps) => React.ReactNode);\n /** Set the position of the Popover relative to its trigger. Default value is `bottom` */\n placement?: Placement;\n};\nconst Content = React.forwardRef(function PopoverContent(props: PopoverContentProps, ref: React.Ref<HTMLDivElement>) {\n const className = cn('bg-white focus:border-blue-light', props.className);\n\n let output;\n\n if (typeof props.children === 'function') {\n output = (\n <PopoverPrimitive.Close asChild>\n <RenderPropWrapper>{props.children}</RenderPropWrapper>\n </PopoverPrimitive.Close>\n );\n } else {\n output = props.children;\n }\n\n return (\n <UnstyledContent className={className} placement={props.placement} ref={ref}>\n {output}\n <UnstyledArrow className=\"text-white\" />\n </UnstyledContent>\n );\n});\n\nexport type PopoverCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nconst Close = React.forwardRef(\n (props: PopoverCloseProps, ref: React.Ref<HTMLButtonElement>): JSX.Element => (\n <PopoverPrimitive.Close {...props} ref={ref} asChild />\n )\n);\n\nexport type PopoverProps = React.PropsWithChildren<{\n /** A trigger to be used for the popover, should not be set if `children` already contains a trigger */\n trigger?: JSX.Element;\n}>;\nexport type ForwardedPopoverWithStatics = React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLElement>> & {\n Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps>;\n Content: React.ForwardRefExoticComponent<PopoverContentProps>;\n Close: React.ForwardRefExoticComponent<PopoverCloseProps>;\n};\n\nexport const Popover = React.forwardRef(function Popover(props: PopoverProps, ref: React.Ref<HTMLElement>) {\n const { children, trigger, ...otherProps } = props;\n const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\n\n return (\n <PopoverContext.Provider value={context}>\n <PopoverPrimitive.Root>\n {trigger && <Trigger>{trigger}</Trigger>}\n {children}\n </PopoverPrimitive.Root>\n </PopoverContext.Provider>\n );\n}) as ForwardedPopoverWithStatics;\nPopover.Trigger = Trigger;\nPopover.Content = Content;\nPopover.Close = Close;\n"],"names":["PopoverContext","React","props","ref","Trigger","PopoverTrigger","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","RenderPropWrapper","onClick","close","CustomEvent","Content","PopoverContent","className","cn","output","UnstyledContent","placement","UnstyledArrow","Close","Popover","trigger","otherProps","Provider","value"],"mappings":";;;;;;AASA,MAAMA,cAAc,gBAAGC,aAAA,CAAyC;EAC5DC,KAAK,EAAE,EADqD;EAE5DC,GAAG,EAAE;AAFuD,CAAzC,CAAvB;AAMA,MAAMC,OAAO,gBAAGH,UAAA,CAAiB,SAASI,cAAT,CAAwBH,KAAxB,EAAoDC,GAApD;;;EAC7B,MAAMG,OAAO,GAAGL,UAAA,CAAiBD,cAAjB,CAAhB;EACA,IAAIO,QAAQ,GAAGL,KAAK,CAACK,QAArB;;EAEA,IAAIN,cAAA,CAAqBC,KAAK,CAACK,QAA3B,KAAwC,2BAAOL,KAAK,CAACK,QAAb,oDAAO,gBAAgBC,IAAvB,MAAgC,UAA5E,EAAwF;IACpFC,OAAO,CAACC,IAAR,qHACwHR,KAAK,CAACK,QAAN,CAAeC,IAAf,CAAoBG,kDAAkDT,KAAK,CAACK,QAAN,CAAeC,IAAf,CAAoBG,sFADlN;IAGAJ,QAAQ,GAAGN,aAAA,OAAA,MAAA,EAAOC,KAAK,CAACK,QAAb,CAAX;;;EAGJ,OACIN,aAAA,CAACW,SAAD,oBAA8BN,OAAO,CAACJ,OAAWA;IAAOK,QAAQ,EAAEA;IAAUJ,GAAG,EAAEU,SAAS,CAAC,CAACP,OAAO,CAACH,GAAT,EAAcA,GAAd,CAAD;IAAsBW,OAAO;IAAvH,CADJ;AAGH,CAde,CAAhB;AAgBA,MAAMC,iBAAiB,gBAAGd,UAAA,CAAiB,SAASc,iBAAT,CAA2B;EAAER,QAAF;EAAYS;AAAZ,CAA3B,EAAuDb,GAAvD;EACvC,MAAMc,KAAK,GAAG;IACVD,OAAO,CAAC,IAAIE,WAAJ,CAAgB,MAAhB,CAAD,CAAP;GADJ;;EAIA,OAAOX,QAAQ,CAAC;IAAEU,KAAF;IAASd;GAAV,CAAf;AACH,CANyB,CAA1B;AAcA,MAAMgB,OAAO,gBAAGlB,UAAA,CAAiB,SAASmB,cAAT,CAAwBlB,KAAxB,EAAoDC,GAApD;EAC7B,MAAMkB,SAAS,GAAGC,EAAE,CAAC,kCAAD,EAAqCpB,KAAK,CAACmB,SAA3C,CAApB;EAEA,IAAIE,MAAJ;;EAEA,IAAI,OAAOrB,KAAK,CAACK,QAAb,KAA0B,UAA9B,EAA0C;IACtCgB,MAAM,GACFtB,aAAA,CAACW,OAAD;MAAwBE,OAAO;KAA/B,EACIb,aAAA,CAACc,iBAAD,MAAA,EAAoBb,KAAK,CAACK,QAA1B,CADJ,CADJ;GADJ,MAMO;IACHgB,MAAM,GAAGrB,KAAK,CAACK,QAAf;;;EAGJ,OACIN,aAAA,CAACuB,eAAD;IAAiBH,SAAS,EAAEA;IAAWI,SAAS,EAAEvB,KAAK,CAACuB;IAAWtB,GAAG,EAAEA;GAAxE,EACKoB,MADL,EAEItB,aAAA,CAACyB,aAAD;IAAeL,SAAS,EAAC;GAAzB,CAFJ,CADJ;AAMH,CArBe,CAAhB;AAwBA,MAAMM,KAAK,gBAAG1B,UAAA,CACV,CAACC,KAAD,EAA2BC,GAA3B,KACIF,aAAA,CAACW,OAAD,oBAA4BV;EAAOC,GAAG,EAAEA;EAAKW,OAAO;EAApD,CAFM,CAAd;MAgBac,OAAO,gBAAG3B,UAAA,CAAiB,SAAS2B,OAAT,CAAiB1B,KAAjB,EAAsCC,GAAtC;EACpC,MAAM;IAAEI,QAAF;IAAYsB,OAAZ;IAAqB,GAAGC;MAAe5B,KAA7C;EACA,MAAMI,OAAO,GAAGL,OAAA,CAAc,OAAO;IAAEC,KAAK,EAAE4B,UAAT;IAAqB3B;GAA5B,CAAd,EAAkD,CAAC2B,UAAD,CAAlD,CAAhB;EAEA,OACI7B,aAAA,CAACD,cAAc,CAAC+B,QAAhB;IAAyBC,KAAK,EAAE1B;GAAhC,EACIL,aAAA,CAACW,IAAD,MAAA,EACKiB,OAAO,IAAI5B,aAAA,CAACG,OAAD,MAAA,EAAUyB,OAAV,CADhB,EAEKtB,QAFL,CADJ,CADJ;AAQH,CAZsB;AAavBqB,OAAO,CAACxB,OAAR,GAAkBA,OAAlB;AACAwB,OAAO,CAACT,OAAR,GAAkBA,OAAlB;AACAS,OAAO,CAACD,KAAR,GAAgBA,KAAhB;;;;"}
|
@@ -1,10 +1,8 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
import { Arrow, Content } from '@radix-ui/react-popover';
|
5
4
|
|
6
|
-
|
7
|
-
var UnstyledArrow = /*#__PURE__*/forwardRef(function PopoverArrow(props, ref) {
|
5
|
+
const UnstyledArrow = /*#__PURE__*/forwardRef(function PopoverArrow(props, ref) {
|
8
6
|
return createElement(Arrow, {
|
9
7
|
className: "pointer-events-none -mt-px",
|
10
8
|
asChild: true,
|
@@ -25,11 +23,12 @@ var UnstyledArrow = /*#__PURE__*/forwardRef(function PopoverArrow(props, ref) {
|
|
25
23
|
d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
|
26
24
|
})));
|
27
25
|
});
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
26
|
+
const UnstyledContent = /*#__PURE__*/forwardRef(function PopoverContent(props, ref) {
|
27
|
+
const {
|
28
|
+
placement: side,
|
29
|
+
...otherProps
|
30
|
+
} = props;
|
31
|
+
const className = cn('border border-transparent rounded p-3 yt-shadow focus:yt-focus outline-none group z-[996]', props.className);
|
33
32
|
return createElement(Content, Object.assign({}, otherProps, {
|
34
33
|
className: className,
|
35
34
|
side: side,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Primitives.js","sources":["../../../../src/components/Popover/Primitives.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Placement } from '../../types';\n\nexport const UnstyledArrow = React.forwardRef(function PopoverArrow(\n props: React.SVGAttributes<SVGElement>,\n ref: React.Ref<SVGSVGElement>\n) {\n return (\n <PopoverPrimitive.Arrow className=\"pointer-events-none -mt-px\" asChild offset={2} width={30} height={11}>\n <svg {...props} ref={ref} viewBox=\"0 19 30 11\" style={{ transform: 'rotateZ(180deg)' }}>\n <path\n className=\"text-grey-dark group-focus:text-blue-light fill-current\"\n d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"\n ></path>\n <path\n className=\"fill-current\"\n d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"\n ></path>\n </svg>\n </PopoverPrimitive.Arrow>\n );\n});\n\nexport type UnstyledContentProps = Omit<PopoverPrimitive.PopoverContentProps, 'side'> & {\n /** Set the position of the Popover relative to its trigger. Default value is `bottom` */\n placement?: Placement;\n};\nexport const UnstyledContent = React.forwardRef(function PopoverContent(\n props: UnstyledContentProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const { placement: side, ...otherProps } = props;\n\n const className = cn(\n 'border border-transparent rounded p-3 yt-shadow focus:yt-focus outline-none group z-[996]',\n props.className\n );\n\n return <PopoverPrimitive.Content {...otherProps} className={className} side={side} sideOffset={1} ref={ref} />;\n});\n"],"names":["UnstyledArrow","React","PopoverArrow","props","ref","PopoverPrimitive","className","asChild","offset","width","height","viewBox","style","transform","d","UnstyledContent","PopoverContent","
|
1
|
+
{"version":3,"file":"Primitives.js","sources":["../../../../src/components/Popover/Primitives.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Placement } from '../../types';\n\nexport const UnstyledArrow = React.forwardRef(function PopoverArrow(\n props: React.SVGAttributes<SVGElement>,\n ref: React.Ref<SVGSVGElement>\n) {\n return (\n <PopoverPrimitive.Arrow className=\"pointer-events-none -mt-px\" asChild offset={2} width={30} height={11}>\n <svg {...props} ref={ref} viewBox=\"0 19 30 11\" style={{ transform: 'rotateZ(180deg)' }}>\n <path\n className=\"text-grey-dark group-focus:text-blue-light fill-current\"\n d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z\"\n ></path>\n <path\n className=\"fill-current\"\n d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"\n ></path>\n </svg>\n </PopoverPrimitive.Arrow>\n );\n});\n\nexport type UnstyledContentProps = Omit<PopoverPrimitive.PopoverContentProps, 'side'> & {\n /** Set the position of the Popover relative to its trigger. Default value is `bottom` */\n placement?: Placement;\n};\nexport const UnstyledContent = React.forwardRef(function PopoverContent(\n props: UnstyledContentProps,\n ref: React.Ref<HTMLDivElement>\n) {\n const { placement: side, ...otherProps } = props;\n\n const className = cn(\n 'border border-transparent rounded p-3 yt-shadow focus:yt-focus outline-none group z-[996]',\n props.className\n );\n\n return <PopoverPrimitive.Content {...otherProps} className={className} side={side} sideOffset={1} ref={ref} />;\n});\n"],"names":["UnstyledArrow","React","PopoverArrow","props","ref","PopoverPrimitive","className","asChild","offset","width","height","viewBox","style","transform","d","UnstyledContent","PopoverContent","placement","side","otherProps","cn","sideOffset"],"mappings":";;;;MAKaA,aAAa,gBAAGC,UAAA,CAAiB,SAASC,YAAT,CAC1CC,KAD0C,EAE1CC,GAF0C;EAI1C,OACIH,aAAA,CAACI,KAAD;IAAwBC,SAAS,EAAC;IAA6BC,OAAO;IAACC,MAAM,EAAE;IAAGC,KAAK,EAAE;IAAIC,MAAM,EAAE;GAArG,EACIT,aAAA,MAAA,oBAASE;IAAOC,GAAG,EAAEA;IAAKO,OAAO,EAAC;IAAaC,KAAK,EAAE;MAAEC,SAAS,EAAE;;IAAnE,EACIZ,aAAA,OAAA;IACIK,SAAS,EAAC;IACVQ,CAAC,EAAC;GAFN,CADJ,EAKIb,aAAA,OAAA;IACIK,SAAS,EAAC;IACVQ,CAAC,EAAC;GAFN,CALJ,CADJ,CADJ;AAcH,CAlB4B;MAwBhBC,eAAe,gBAAGd,UAAA,CAAiB,SAASe,cAAT,CAC5Cb,KAD4C,EAE5CC,GAF4C;EAI5C,MAAM;IAAEa,SAAS,EAAEC,IAAb;IAAmB,GAAGC;MAAehB,KAA3C;EAEA,MAAMG,SAAS,GAAGc,EAAE,CAChB,2FADgB,EAEhBjB,KAAK,CAACG,SAFU,CAApB;EAKA,OAAOL,aAAA,CAACI,OAAD,oBAA8Bc;IAAYb,SAAS,EAAEA;IAAWY,IAAI,EAAEA;IAAMG,UAAU,EAAE;IAAGjB,GAAG,EAAEA;IAAhG,CAAP;AACH,CAZ8B;;;;"}
|
@@ -1,27 +1,23 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import React__default from 'react';
|
3
2
|
import cn from 'classnames';
|
4
3
|
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
duration = _ref$duration === void 0 ? undefined : _ref$duration,
|
11
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
12
|
-
|
13
|
-
var style;
|
4
|
+
const Progress = ({
|
5
|
+
duration = undefined,
|
6
|
+
...props
|
7
|
+
}) => {
|
8
|
+
let style;
|
14
9
|
|
15
10
|
if (duration) {
|
16
11
|
style = {
|
17
|
-
animationDuration: duration
|
12
|
+
animationDuration: `${duration}ms`
|
18
13
|
};
|
19
14
|
}
|
20
15
|
|
21
|
-
|
22
|
-
|
23
|
-
"w-full before:h-1 before:bg-grey-dark before:block before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:content-[' ']": !duration
|
24
|
-
|
16
|
+
const className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);
|
17
|
+
const progressClassName = cn('yt-progress__bar block h-1', {
|
18
|
+
"w-full before:h-1 before:bg-grey-dark before:block before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:content-[' ']": !duration,
|
19
|
+
[`w-0 bg-grey-dark animate-[progress_linear]`]: duration
|
20
|
+
});
|
25
21
|
return React__default.createElement("span", Object.assign({}, props, {
|
26
22
|
"data-taco": "progress",
|
27
23
|
className: className
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Progress.js","sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport './Progress.css';\n\nexport type ProgressProps = React.HTMLAttributes<HTMLSpanElement> & {\n /**\n * Indicates how long (in milliseconds) a progress bar will take to progress through.\n * By default, progress bar has no duration\n */\n duration?: number;\n};\n\nexport const Progress = ({ duration = undefined, ...props }: ProgressProps): JSX.Element => {\n let style;\n\n if (duration) {\n style = {\n animationDuration: `${duration}ms`,\n };\n }\n\n const className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);\n\n const progressClassName = cn('yt-progress__bar block h-1', {\n \"w-full before:h-1 before:bg-grey-dark before:block before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:content-[' ']\":\n !duration,\n [`w-0 bg-grey-dark animate-[progress_linear]`]: duration,\n });\n\n return (\n <span {...props} data-taco=\"progress\" className={className}>\n <span className={progressClassName} data-taco=\"progress-bar\" style={style} />\n </span>\n );\n};\n"],"names":["Progress","duration","undefined","props","style","animationDuration","className","cn","progressClassName","React"],"mappings":"
|
1
|
+
{"version":3,"file":"Progress.js","sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport './Progress.css';\n\nexport type ProgressProps = React.HTMLAttributes<HTMLSpanElement> & {\n /**\n * Indicates how long (in milliseconds) a progress bar will take to progress through.\n * By default, progress bar has no duration\n */\n duration?: number;\n};\n\nexport const Progress = ({ duration = undefined, ...props }: ProgressProps): JSX.Element => {\n let style;\n\n if (duration) {\n style = {\n animationDuration: `${duration}ms`,\n };\n }\n\n const className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);\n\n const progressClassName = cn('yt-progress__bar block h-1', {\n \"w-full before:h-1 before:bg-grey-dark before:block before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:content-[' ']\":\n !duration,\n [`w-0 bg-grey-dark animate-[progress_linear]`]: duration,\n });\n\n return (\n <span {...props} data-taco=\"progress\" className={className}>\n <span className={progressClassName} data-taco=\"progress-bar\" style={style} />\n </span>\n );\n};\n"],"names":["Progress","duration","undefined","props","style","animationDuration","className","cn","progressClassName","React"],"mappings":";;;MAYaA,QAAQ,GAAG,CAAC;EAAEC,QAAQ,GAAGC,SAAb;EAAwB,GAAGC;AAA3B,CAAD;EACpB,IAAIC,KAAJ;;EAEA,IAAIH,QAAJ,EAAc;IACVG,KAAK,GAAG;MACJC,iBAAiB,KAAKJ;KAD1B;;;EAKJ,MAAMK,SAAS,GAAGC,EAAE,CAAC,wDAAD,EAA2DJ,KAAK,CAACG,SAAjE,CAApB;EAEA,MAAME,iBAAiB,GAAGD,EAAE,CAAC,4BAAD,EAA+B;IACvD,yJACI,CAACN,QAFkD;IAGvD,6CAAA,GAAgDA;GAHxB,CAA5B;EAMA,OACIQ,4BAAA,OAAA,oBAAUN;iBAAiB;IAAWG,SAAS,EAAEA;IAAjD,EACIG,4BAAA,OAAA;IAAMH,SAAS,EAAEE;iBAA6B;IAAeJ,KAAK,EAAEA;GAApE,CADJ,CADJ;AAKH;;;;"}
|