@economic/taco 0.0.31-alpha.0 → 0.0.31-alpha.1
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/esm/_virtual/_rollupPluginBabelHelpers.js +19 -1
- package/dist/esm/_virtual/_rollupPluginBabelHelpers.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 +5 -7
- package/dist/esm/components/Banner/Banner.js.map +1 -1
- package/dist/esm/components/Button/Button.js +13 -12
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/Calendar/Calendar.js +71 -56
- package/dist/esm/components/Calendar/Calendar.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +18 -15
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.js +25 -23
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Datepicker/Datepicker.js +52 -48
- package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +58 -39
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Field/Field.js +12 -10
- package/dist/esm/components/Field/Field.js.map +1 -1
- package/dist/esm/components/Form/Form.js +8 -6
- package/dist/esm/components/Form/Form.js.map +1 -1
- package/dist/esm/components/Group/Group.js +8 -6
- package/dist/esm/components/Group/Group.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +33 -25
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/Icon/Icon.js +8 -7
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js +11 -9
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/esm/components/Input/Input.js +24 -26
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Listbox/Listbox.js +25 -24
- package/dist/esm/components/Listbox/Listbox.js.map +1 -1
- package/dist/esm/components/Menu/Menu.js +43 -20
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Navigation/Navigation.js +44 -35
- package/dist/esm/components/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +56 -39
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +34 -29
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/Progress/Progress.js +15 -11
- package/dist/esm/components/Progress/Progress.js.map +1 -1
- package/dist/esm/components/Provider/Provider.js +18 -13
- package/dist/esm/components/Provider/Provider.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.js +57 -45
- package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +11 -10
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/components/Select/Select.js +31 -30
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Spinner/Spinner.js +19 -12
- package/dist/esm/components/Spinner/Spinner.js.map +1 -1
- package/dist/esm/components/Switch/Switch.js +10 -9
- package/dist/esm/components/Switch/Switch.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +27 -25
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/Textarea/Textarea.js +9 -11
- package/dist/esm/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/components/Toast/Toaster.js +118 -88
- package/dist/esm/components/Toast/Toaster.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +8 -7
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/Tour/Tour.js +50 -44
- package/dist/esm/components/Tour/Tour.js.map +1 -1
- package/dist/esm/components/Treeview/Treeview.js +36 -26
- 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/taco.cjs.development.js +1007 -813
- 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/tailwind.d.ts +1 -1
- package/package.json +3 -3
@@ -1,3 +1,4 @@
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
1
2
|
import React__default from 'react';
|
2
3
|
import cn from 'classnames';
|
3
4
|
import { Icon } from '../Icon/Icon.js';
|
@@ -5,20 +6,25 @@ import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
|
|
5
6
|
import { Treeview } from '../Treeview/Treeview.js';
|
6
7
|
import { useDropTarget } from '../../utils/hooks/useDropTarget.js';
|
7
8
|
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
9
|
+
var _excluded = ["active", "children", "onDrop", "postfix", "prefix", "role"],
|
10
|
+
_excluded2 = ["children"];
|
11
|
+
var Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
12
|
+
var active = props.active,
|
13
|
+
children = props.children,
|
14
|
+
onDrop = props.onDrop,
|
15
|
+
postfix = props.postfix,
|
16
|
+
prefix = props.prefix,
|
17
|
+
role = props.role,
|
18
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
19
|
+
|
20
|
+
var proxyRef = useProxiedRef(ref);
|
21
|
+
|
22
|
+
var _useDropTarget = useDropTarget(onDrop),
|
23
|
+
isDraggedOver = _useDropTarget[0],
|
24
|
+
dropTargetProps = _useDropTarget[1];
|
25
|
+
|
26
|
+
var isTreeitem = role === 'treeitem';
|
27
|
+
var className = cn('yt-navigation__item cursor-pointer', {
|
22
28
|
'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,
|
23
29
|
'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,
|
24
30
|
'yt-navigation__item--active': active && !isDraggedOver,
|
@@ -26,7 +32,7 @@ const Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
|
26
32
|
'yt-navigation__item--dropping bg-blue': isDraggedOver
|
27
33
|
}, props.className);
|
28
34
|
|
29
|
-
|
35
|
+
var handleClick = function handleClick(event) {
|
30
36
|
if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {
|
31
37
|
return;
|
32
38
|
}
|
@@ -49,19 +55,19 @@ const Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
|
|
49
55
|
className: "yt-navigation__item__postfix ml-1"
|
50
56
|
}, postfix));
|
51
57
|
});
|
52
|
-
|
58
|
+
var Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
|
53
59
|
return React__default.createElement("div", Object.assign({}, props, {
|
54
60
|
className: cn('w-full bg-white p-3', props.className),
|
55
61
|
ref: ref
|
56
62
|
}));
|
57
63
|
});
|
58
|
-
|
59
|
-
|
64
|
+
var MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
|
65
|
+
var className = cn('flex-shrink-0 space-y-1 outline-none', {
|
60
66
|
'bg-white pb-2': props.fixed
|
61
67
|
}, props.className);
|
62
68
|
|
63
|
-
|
64
|
-
|
69
|
+
var title = function title(expanded) {
|
70
|
+
var className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
|
65
71
|
'mb-1': expanded,
|
66
72
|
'cursor-pointer hover:text-blue': !props.fixed
|
67
73
|
});
|
@@ -78,14 +84,16 @@ const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(prop
|
|
78
84
|
ref: ref
|
79
85
|
}));
|
80
86
|
});
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
React__default.Children.toArray(props.children).filter(
|
87
|
+
var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
|
88
|
+
var scrollableAreas = React__default.useMemo(function () {
|
89
|
+
var scrollableAreas = [];
|
90
|
+
React__default.Children.toArray(props.children).filter(function (child) {
|
91
|
+
return !!child;
|
92
|
+
}).map(function (child) {
|
85
93
|
if (child.props.fixed) {
|
86
94
|
scrollableAreas.push(child);
|
87
95
|
} else {
|
88
|
-
|
96
|
+
var x = scrollableAreas[scrollableAreas.length - 1];
|
89
97
|
|
90
98
|
if (Array.isArray(x)) {
|
91
99
|
x.push(child);
|
@@ -99,18 +107,19 @@ const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
|
|
99
107
|
return React__default.createElement(Treeview, Object.assign({}, props, {
|
100
108
|
className: cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
|
101
109
|
ref: ref
|
102
|
-
}), scrollableAreas.map((area, i)
|
103
|
-
|
104
|
-
|
105
|
-
|
110
|
+
}), scrollableAreas.map(function (area, i) {
|
111
|
+
return Array.isArray(area) ? React__default.createElement("div", {
|
112
|
+
className: "divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
|
113
|
+
key: i
|
114
|
+
}, area) : area;
|
115
|
+
}));
|
106
116
|
});
|
107
117
|
Menu.Group = MenuGroup;
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
|
118
|
+
var Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
|
119
|
+
var children = props.children,
|
120
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
|
121
|
+
|
122
|
+
var className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);
|
114
123
|
return React__default.createElement("div", Object.assign({}, otherProps, {
|
115
124
|
className: className,
|
116
125
|
"data-taco": "navigation",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Navigation.js","sources":["../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\r\nimport { Icon } from '../Icon/Icon';\r\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\r\nimport './Navigation.css';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\n\r\n// Item\r\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\r\n /** Change the style to indicate the link is selected */\r\n active?: boolean;\r\n /** Handler to be used when dropping a dragged element over the navigation link */\r\n onDrop?: React.DragEventHandler;\r\n /**\r\n * Small amount of information placed next to the text of the link.\r\n * This can be any valid react element, for e.g. a `span`.\r\n * Should be used to indicate a relevant information of the link,\r\n * for e.g. the number of unread notifications\r\n */\r\n postfix?: React.ReactNode;\r\n /**\r\n * Small amount of information placed before the text of the link.\r\n * This can be any valid react element, for e.g. a `span`.\r\n * Should be used to indicate a feedback for user,\r\n * for e.g. display some sort of visual informational state or a relevant icon.\r\n */\r\n prefix?: React.ReactNode;\r\n /** Target of the link */\r\n target?: string;\r\n};\r\n\r\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\r\n const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\r\n const proxyRef = useProxiedRef<HTMLAnchorElement>(ref);\r\n const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\r\n const isTreeitem = role === 'treeitem';\r\n const className = cn(\r\n 'yt-navigation__item cursor-pointer',\r\n {\r\n 'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,\r\n 'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\r\n 'yt-navigation__item--active': active && !isDraggedOver,\r\n 'bg-grey-dark': isTreeitem && active && !isDraggedOver,\r\n 'yt-navigation__item--dropping bg-blue': isDraggedOver,\r\n },\r\n props.className\r\n );\r\n\r\n const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\r\n if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {\r\n return;\r\n }\r\n\r\n if (proxyRef.current) {\r\n proxyRef.current.click();\r\n }\r\n };\r\n\r\n return (\r\n <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\r\n {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\r\n <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\r\n {children}\r\n </a>\r\n {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\r\n </span>\r\n );\r\n});\r\n\r\n// Panel\r\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\r\n return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\r\n});\r\n\r\n// Group\r\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\r\n\r\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\r\n const className = cn(\r\n 'flex-shrink-0 space-y-1 outline-none',\r\n {\r\n 'bg-white pb-2': props.fixed,\r\n },\r\n props.className\r\n );\r\n const title = (expanded: boolean): JSX.Element => {\r\n const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\r\n 'mb-1': expanded,\r\n 'cursor-pointer hover:text-blue': !props.fixed,\r\n });\r\n\r\n return (\r\n <span className={className}>\r\n {typeof props.title === 'function' ? props.title(expanded) : props.title}\r\n {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\r\n </span>\r\n );\r\n };\r\n\r\n return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\r\n});\r\n\r\n// Menu\r\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\r\n\r\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\r\n NavigationMenuProps & React.RefAttributes<HTMLDivElement>\r\n> & {\r\n /** Expandable region reprezenting a group of related links */\r\n Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\r\n};\r\n\r\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\r\n const scrollableAreas = React.useMemo(() => {\r\n const scrollableAreas: any[] = [];\r\n\r\n React.Children.toArray(props.children)\r\n .filter(child => !!child)\r\n .map((child: React.ReactElement<NavigationMenuGroupProps>) => {\r\n if (child.props.fixed) {\r\n scrollableAreas.push(child);\r\n } else {\r\n const x = scrollableAreas[scrollableAreas.length - 1];\r\n if (Array.isArray(x)) {\r\n x.push(child);\r\n } else {\r\n scrollableAreas.push([child]);\r\n }\r\n }\r\n });\r\n\r\n return scrollableAreas;\r\n }, [props.children]);\r\n\r\n return (\r\n <Treeview\r\n {...props}\r\n className={cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\r\n ref={ref}\r\n >\r\n {scrollableAreas.map((area, i) =>\r\n Array.isArray(area) ? (\r\n <div\r\n className=\"divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\r\n key={i}\r\n >\r\n {area}\r\n </div>\r\n ) : (\r\n area\r\n )\r\n )}\r\n </Treeview>\r\n );\r\n}) as ForwardedNavigationMenuWithStatics;\r\n\r\nMenu.Group = MenuGroup;\r\n\r\n// Navigation\r\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\r\n NavigationProps & React.RefAttributes<HTMLDivElement>\r\n> & {\r\n /** Navigation link */\r\n Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\r\n /**\r\n * Container for the expandable groups that hold navigation links.\r\n * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\r\n * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\r\n */\r\n Menu: ForwardedNavigationMenuWithStatics;\r\n /**\r\n * Isolated container within the Navigation.\r\n * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\r\n * containing useful information for user and quick actions\r\n */\r\n Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\r\n};\r\n\r\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\r\n const { children, ...otherProps } = props;\r\n const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);\r\n\r\n return (\r\n <div {...otherProps} className={className} data-taco=\"navigation\" ref={ref}>\r\n {children}\r\n </div>\r\n );\r\n}) as ForwardedNavigationWithStatics;\r\n\r\nNavigation.Menu = Menu;\r\nNavigation.Item = Item;\r\nNavigation.Panel = Panel;\r\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useProxiedRef","isDraggedOver","dropTargetProps","useDropTarget","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","map","push","x","length","Array","isArray","area","i","key","Navigation"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Navigation.js","sources":["../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\r\nimport { Icon } from '../Icon/Icon';\r\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\r\nimport './Navigation.css';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\n\r\n// Item\r\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\r\n /** Change the style to indicate the link is selected */\r\n active?: boolean;\r\n /** Handler to be used when dropping a dragged element over the navigation link */\r\n onDrop?: React.DragEventHandler;\r\n /**\r\n * Small amount of information placed next to the text of the link.\r\n * This can be any valid react element, for e.g. a `span`.\r\n * Should be used to indicate a relevant information of the link,\r\n * for e.g. the number of unread notifications\r\n */\r\n postfix?: React.ReactNode;\r\n /**\r\n * Small amount of information placed before the text of the link.\r\n * This can be any valid react element, for e.g. a `span`.\r\n * Should be used to indicate a feedback for user,\r\n * for e.g. display some sort of visual informational state or a relevant icon.\r\n */\r\n prefix?: React.ReactNode;\r\n /** Target of the link */\r\n target?: string;\r\n};\r\n\r\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\r\n const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\r\n const proxyRef = useProxiedRef<HTMLAnchorElement>(ref);\r\n const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\r\n const isTreeitem = role === 'treeitem';\r\n const className = cn(\r\n 'yt-navigation__item cursor-pointer',\r\n {\r\n 'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,\r\n 'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\r\n 'yt-navigation__item--active': active && !isDraggedOver,\r\n 'bg-grey-dark': isTreeitem && active && !isDraggedOver,\r\n 'yt-navigation__item--dropping bg-blue': isDraggedOver,\r\n },\r\n props.className\r\n );\r\n\r\n const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\r\n if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {\r\n return;\r\n }\r\n\r\n if (proxyRef.current) {\r\n proxyRef.current.click();\r\n }\r\n };\r\n\r\n return (\r\n <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\r\n {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\r\n <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\r\n {children}\r\n </a>\r\n {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\r\n </span>\r\n );\r\n});\r\n\r\n// Panel\r\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\r\n return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\r\n});\r\n\r\n// Group\r\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\r\n\r\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\r\n const className = cn(\r\n 'flex-shrink-0 space-y-1 outline-none',\r\n {\r\n 'bg-white pb-2': props.fixed,\r\n },\r\n props.className\r\n );\r\n const title = (expanded: boolean): JSX.Element => {\r\n const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\r\n 'mb-1': expanded,\r\n 'cursor-pointer hover:text-blue': !props.fixed,\r\n });\r\n\r\n return (\r\n <span className={className}>\r\n {typeof props.title === 'function' ? props.title(expanded) : props.title}\r\n {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\r\n </span>\r\n );\r\n };\r\n\r\n return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\r\n});\r\n\r\n// Menu\r\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\r\n\r\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\r\n NavigationMenuProps & React.RefAttributes<HTMLDivElement>\r\n> & {\r\n /** Expandable region reprezenting a group of related links */\r\n Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\r\n};\r\n\r\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\r\n const scrollableAreas = React.useMemo(() => {\r\n const scrollableAreas: any[] = [];\r\n\r\n React.Children.toArray(props.children)\r\n .filter(child => !!child)\r\n .map((child: React.ReactElement<NavigationMenuGroupProps>) => {\r\n if (child.props.fixed) {\r\n scrollableAreas.push(child);\r\n } else {\r\n const x = scrollableAreas[scrollableAreas.length - 1];\r\n if (Array.isArray(x)) {\r\n x.push(child);\r\n } else {\r\n scrollableAreas.push([child]);\r\n }\r\n }\r\n });\r\n\r\n return scrollableAreas;\r\n }, [props.children]);\r\n\r\n return (\r\n <Treeview\r\n {...props}\r\n className={cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\r\n ref={ref}\r\n >\r\n {scrollableAreas.map((area, i) =>\r\n Array.isArray(area) ? (\r\n <div\r\n className=\"divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\r\n key={i}\r\n >\r\n {area}\r\n </div>\r\n ) : (\r\n area\r\n )\r\n )}\r\n </Treeview>\r\n );\r\n}) as ForwardedNavigationMenuWithStatics;\r\n\r\nMenu.Group = MenuGroup;\r\n\r\n// Navigation\r\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\r\n NavigationProps & React.RefAttributes<HTMLDivElement>\r\n> & {\r\n /** Navigation link */\r\n Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\r\n /**\r\n * Container for the expandable groups that hold navigation links.\r\n * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\r\n * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\r\n */\r\n Menu: ForwardedNavigationMenuWithStatics;\r\n /**\r\n * Isolated container within the Navigation.\r\n * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\r\n * containing useful information for user and quick actions\r\n */\r\n Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\r\n};\r\n\r\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\r\n const { children, ...otherProps } = props;\r\n const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);\r\n\r\n return (\r\n <div {...otherProps} className={className} data-taco=\"navigation\" ref={ref}>\r\n {children}\r\n </div>\r\n );\r\n}) as ForwardedNavigationWithStatics;\r\n\r\nNavigation.Menu = Menu;\r\nNavigation.Item = Item;\r\nNavigation.Panel = Panel;\r\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useProxiedRef","useDropTarget","isDraggedOver","dropTargetProps","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","map","push","x","length","Array","isArray","area","i","key","Navigation"],"mappings":"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"}
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
1
2
|
import { forwardRef, createElement } from 'react';
|
2
3
|
import cn from 'classnames';
|
3
4
|
import { IconButton } from '../IconButton/IconButton.js';
|
@@ -8,41 +9,47 @@ import { Select } from '../Select/Select.js';
|
|
8
9
|
import { usePaginationShortcuts } from './usePaginationShortcuts.js';
|
9
10
|
export { usePagination } from './usePagination.js';
|
10
11
|
|
11
|
-
|
12
|
-
|
13
|
-
|
12
|
+
var _excluded = ["length", "pageIndex", "pageSize", "pageSizes", "setPageIndex", "setPageSize", "showPageControls", "showPageNumbers", "showPageSize", "dangerouslyHijackGlobalKeyboardNavigation"];
|
13
|
+
|
14
|
+
var getShowingLabel = function getShowingLabel(length, pageIndex, pageSize, texts) {
|
15
|
+
var minItemIndex = pageIndex * pageSize + 1;
|
16
|
+
var maxItemIndex = (pageIndex + 1) * pageSize;
|
14
17
|
return texts.pagination.showingXofYofTotal.replace('[X]', length === 0 ? '0' : String(minItemIndex)).replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex)).replace('[total]', String(length));
|
15
18
|
};
|
16
19
|
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
20
|
+
var Pagination = /*#__PURE__*/forwardRef(function Pagination(props, ref) {
|
21
|
+
var length = props.length,
|
22
|
+
pageIndex = props.pageIndex,
|
23
|
+
pageSize = props.pageSize,
|
24
|
+
_props$pageSizes = props.pageSizes,
|
25
|
+
pageSizes = _props$pageSizes === void 0 ? [10, 25, 50, 100, 500] : _props$pageSizes,
|
26
|
+
setPageIndex = props.setPageIndex,
|
27
|
+
setPageSize = props.setPageSize,
|
28
|
+
_props$showPageContro = props.showPageControls,
|
29
|
+
showPageControls = _props$showPageContro === void 0 ? true : _props$showPageContro,
|
30
|
+
_props$showPageNumber = props.showPageNumbers,
|
31
|
+
showPageNumbers = _props$showPageNumber === void 0 ? true : _props$showPageNumber,
|
32
|
+
_props$showPageSize = props.showPageSize,
|
33
|
+
showPageSize = _props$showPageSize === void 0 ? true : _props$showPageSize,
|
34
|
+
_props$dangerouslyHij = props.dangerouslyHijackGlobalKeyboardNavigation,
|
35
|
+
dangerouslyHijackGlobalKeyboardNavigation = _props$dangerouslyHij === void 0 ? false : _props$dangerouslyHij,
|
36
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
37
|
+
|
38
|
+
var _useLocalization = useLocalization(),
|
39
|
+
texts = _useLocalization.texts;
|
40
|
+
|
41
|
+
var maxPageIndex = Math.ceil(length / pageSize) - 1;
|
42
|
+
var showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;
|
36
43
|
usePaginationShortcuts({
|
37
|
-
setPageIndex,
|
38
|
-
maxPageIndex,
|
39
|
-
pageIndex,
|
40
|
-
dangerouslyHijackGlobalKeyboardNavigation
|
44
|
+
setPageIndex: setPageIndex,
|
45
|
+
maxPageIndex: maxPageIndex,
|
46
|
+
pageIndex: pageIndex,
|
47
|
+
dangerouslyHijackGlobalKeyboardNavigation: dangerouslyHijackGlobalKeyboardNavigation
|
41
48
|
});
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
49
|
+
var pageCount = Math.ceil(length / pageSize);
|
50
|
+
var canPreviousPage = pageIndex > 0;
|
51
|
+
var canNextPage = pageIndex < pageCount - 1;
|
52
|
+
var className = cn('inline-flex relative justify-between items-center', props.className);
|
46
53
|
return createElement("div", Object.assign({}, otherProps, {
|
47
54
|
className: className,
|
48
55
|
"data-taco": "pagination",
|
@@ -52,11 +59,13 @@ const Pagination = /*#__PURE__*/forwardRef(function Pagination(props, ref) {
|
|
52
59
|
}, getShowingLabel(length, pageIndex, pageSize, texts), createElement(Select, {
|
53
60
|
"aria-label": texts.pagination.pageSize,
|
54
61
|
className: "ml-4 !w-20",
|
55
|
-
data: pageSizes.map(pageSize
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
62
|
+
data: pageSizes.map(function (pageSize) {
|
63
|
+
return {
|
64
|
+
text: String(pageSize),
|
65
|
+
value: pageSize
|
66
|
+
};
|
67
|
+
}),
|
68
|
+
onChange: function onChange(event) {
|
60
69
|
setPageIndex(0);
|
61
70
|
setPageSize(Number(event.target.value));
|
62
71
|
},
|
@@ -68,14 +77,18 @@ const Pagination = /*#__PURE__*/forwardRef(function Pagination(props, ref) {
|
|
68
77
|
appearance: "default",
|
69
78
|
disabled: !canPreviousPage,
|
70
79
|
icon: "arrow-start",
|
71
|
-
onClick: ()
|
80
|
+
onClick: function onClick() {
|
81
|
+
return setPageIndex(0);
|
82
|
+
},
|
72
83
|
"aria-label": showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage,
|
73
84
|
tooltip: showShortcutTexts ? texts.pagination.actions.firstPageWithShortcut : texts.pagination.actions.firstPage
|
74
85
|
}), createElement(IconButton, {
|
75
86
|
appearance: "default",
|
76
87
|
disabled: !canPreviousPage,
|
77
88
|
icon: "arrow-left",
|
78
|
-
onClick: ()
|
89
|
+
onClick: function onClick() {
|
90
|
+
return setPageIndex(pageIndex - 1);
|
91
|
+
},
|
79
92
|
"aria-label": showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage,
|
80
93
|
tooltip: showShortcutTexts ? texts.pagination.actions.previousPageWithShortcut : texts.pagination.actions.previousPage
|
81
94
|
}), showPageNumbers && pageCount > 0 && createElement(PageNumbers, {
|
@@ -86,14 +99,18 @@ const Pagination = /*#__PURE__*/forwardRef(function Pagination(props, ref) {
|
|
86
99
|
appearance: "default",
|
87
100
|
disabled: !canNextPage,
|
88
101
|
icon: "arrow-right",
|
89
|
-
onClick: ()
|
102
|
+
onClick: function onClick() {
|
103
|
+
return setPageIndex(pageIndex + 1);
|
104
|
+
},
|
90
105
|
"aria-label": showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage,
|
91
106
|
tooltip: showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage
|
92
107
|
}), createElement(IconButton, {
|
93
108
|
appearance: "default",
|
94
109
|
disabled: !canNextPage,
|
95
110
|
icon: "arrow-end",
|
96
|
-
onClick: ()
|
111
|
+
onClick: function onClick() {
|
112
|
+
return setPageIndex(pageCount - 1);
|
113
|
+
},
|
97
114
|
"aria-label": showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage,
|
98
115
|
tooltip: showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage
|
99
116
|
})));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { PageNumbers } from './PageNumbers';\r\nimport { LocalizationTexts, useLocalization } from '../Provider/Provider';\r\nimport { Select } from '../Select/Select';\r\nimport { Group } from '../Group/Group';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { usePaginationValues } from './usePagination';\r\nimport { usePaginationShortcuts } from './usePaginationShortcuts';\r\n\r\nexport * from './usePagination';\r\n\r\nexport type PaginationTextsActions = {\r\n /**\r\n * Aria-label for first page action button.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n firstPage: string;\r\n /**\r\n * Aria-label for first page action button with shortcut.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n firstPageWithShortcut: string;\r\n /**\r\n * Aria-label for next page action button.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n nextPage: string;\r\n /**\r\n * Aria-label for next page action button with shortcut.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n nextPageWithShortcut: string;\r\n /**\r\n * Aria-label for previous page action button.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n previousPage: string;\r\n /**\r\n * Aria-label for previous page action button with shortcut.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n previousPageWithShortcut: string;\r\n /**\r\n * Aria-label for last page action button.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n lastPage: string;\r\n /**\r\n * Aria-label for last page action button with shortcut.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n lastPageWithShortcut: string;\r\n /**\r\n * Aria-label for page X action button.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n pageX: string;\r\n};\r\n\r\nexport type PaginationTexts = {\r\n /**\r\n * Aria-label provided for page numbers and page actions group.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n label: string;\r\n /**\r\n * Aria-label provided for page size selection.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n pageSize: string;\r\n /**\r\n * Text that indicates the number of the first and last element displayed on the current page, out of total items\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n showingXofYofTotal: string;\r\n /**\r\n * Aria-labels provided for page action buttons.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n actions: PaginationTextsActions;\r\n};\r\n\r\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> &\r\n usePaginationValues & {\r\n /** Indicate total number of items that will be paginated */\r\n length: number;\r\n /** Page size options */\r\n pageSizes?: number[];\r\n /** Shows page controls */\r\n showPageControls?: boolean;\r\n /** Shows page numbers between navigation buttons, which allows users to quickly navigate to a specific page */\r\n showPageNumbers?: boolean;\r\n /** Shows a dropdown with page sizes, which allows user to change the number of items displayed on the page */\r\n showPageSize?: boolean;\r\n /** Enable pagination shortcuts */\r\n dangerouslyHijackGlobalKeyboardNavigation?: boolean;\r\n };\r\n\r\nconst getShowingLabel = (length: number, pageIndex: number, pageSize: number, texts: LocalizationTexts): string => {\r\n const minItemIndex = pageIndex * pageSize + 1;\r\n const maxItemIndex = (pageIndex + 1) * pageSize;\r\n\r\n return texts.pagination.showingXofYofTotal\r\n .replace('[X]', length === 0 ? '0' : String(minItemIndex))\r\n .replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex))\r\n .replace('[total]', String(length));\r\n};\r\n\r\nexport const Pagination = React.forwardRef(function Pagination(props: PaginationProps, ref: React.Ref<HTMLDivElement>) {\r\n const {\r\n length,\r\n pageIndex,\r\n pageSize,\r\n pageSizes = [10, 25, 50, 100, 500],\r\n setPageIndex,\r\n setPageSize,\r\n showPageControls = true,\r\n showPageNumbers = true,\r\n showPageSize = true,\r\n dangerouslyHijackGlobalKeyboardNavigation = false,\r\n ...otherProps\r\n } = props;\r\n const { texts } = useLocalization();\r\n\r\n const maxPageIndex = Math.ceil(length / pageSize) - 1;\r\n const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;\r\n\r\n usePaginationShortcuts({\r\n setPageIndex,\r\n maxPageIndex,\r\n pageIndex,\r\n dangerouslyHijackGlobalKeyboardNavigation,\r\n });\r\n\r\n const pageCount = Math.ceil(length / pageSize);\r\n const canPreviousPage = pageIndex > 0;\r\n const canNextPage = pageIndex < pageCount - 1;\r\n\r\n const className = cn('inline-flex relative justify-between items-center', props.className);\r\n\r\n return (\r\n <div {...otherProps} className={className} data-taco=\"pagination\" ref={ref}>\r\n {showPageSize && (\r\n <span className=\"mr-4\">\r\n {getShowingLabel(length, pageIndex, pageSize, texts)}\r\n <Select\r\n aria-label={texts.pagination.pageSize}\r\n className=\"ml-4 !w-20\"\r\n data={pageSizes.map(pageSize => ({\r\n text: String(pageSize),\r\n value: pageSize,\r\n }))}\r\n onChange={event => {\r\n setPageIndex(0);\r\n setPageSize(Number(event.target.value));\r\n }}\r\n value={pageSize}\r\n />\r\n </span>\r\n )}\r\n {showPageControls && (\r\n <Group as=\"nav\" aria-label={texts.pagination.label}>\r\n <IconButton\r\n appearance=\"default\"\r\n disabled={!canPreviousPage}\r\n icon=\"arrow-start\"\r\n onClick={() => setPageIndex(0)}\r\n aria-label={\r\n showShortcutTexts\r\n ? texts.pagination.actions.firstPageWithShortcut\r\n : texts.pagination.actions.firstPage\r\n }\r\n tooltip={\r\n showShortcutTexts\r\n ? texts.pagination.actions.firstPageWithShortcut\r\n : texts.pagination.actions.firstPage\r\n }\r\n />\r\n <IconButton\r\n appearance=\"default\"\r\n disabled={!canPreviousPage}\r\n icon=\"arrow-left\"\r\n onClick={() => setPageIndex(pageIndex - 1)}\r\n aria-label={\r\n showShortcutTexts\r\n ? texts.pagination.actions.previousPageWithShortcut\r\n : texts.pagination.actions.previousPage\r\n }\r\n tooltip={\r\n showShortcutTexts\r\n ? texts.pagination.actions.previousPageWithShortcut\r\n : texts.pagination.actions.previousPage\r\n }\r\n />\r\n {showPageNumbers && pageCount > 0 && (\r\n <PageNumbers pageCount={pageCount} currentPageIndex={pageIndex} onClick={setPageIndex} />\r\n )}\r\n <IconButton\r\n appearance=\"default\"\r\n disabled={!canNextPage}\r\n icon=\"arrow-right\"\r\n onClick={() => setPageIndex(pageIndex + 1)}\r\n aria-label={\r\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\r\n }\r\n tooltip={\r\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\r\n }\r\n />\r\n <IconButton\r\n appearance=\"default\"\r\n disabled={!canNextPage}\r\n icon=\"arrow-end\"\r\n onClick={() => setPageIndex(pageCount - 1)}\r\n aria-label={\r\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\r\n }\r\n tooltip={\r\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\r\n }\r\n />\r\n </Group>\r\n )}\r\n </div>\r\n );\r\n});\r\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';\r\nimport cn from 'classnames';\r\nimport { PageNumbers } from './PageNumbers';\r\nimport { LocalizationTexts, useLocalization } from '../Provider/Provider';\r\nimport { Select } from '../Select/Select';\r\nimport { Group } from '../Group/Group';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { usePaginationValues } from './usePagination';\r\nimport { usePaginationShortcuts } from './usePaginationShortcuts';\r\n\r\nexport * from './usePagination';\r\n\r\nexport type PaginationTextsActions = {\r\n /**\r\n * Aria-label for first page action button.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n firstPage: string;\r\n /**\r\n * Aria-label for first page action button with shortcut.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n firstPageWithShortcut: string;\r\n /**\r\n * Aria-label for next page action button.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n nextPage: string;\r\n /**\r\n * Aria-label for next page action button with shortcut.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n nextPageWithShortcut: string;\r\n /**\r\n * Aria-label for previous page action button.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n previousPage: string;\r\n /**\r\n * Aria-label for previous page action button with shortcut.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n previousPageWithShortcut: string;\r\n /**\r\n * Aria-label for last page action button.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n lastPage: string;\r\n /**\r\n * Aria-label for last page action button with shortcut.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n lastPageWithShortcut: string;\r\n /**\r\n * Aria-label for page X action button.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n pageX: string;\r\n};\r\n\r\nexport type PaginationTexts = {\r\n /**\r\n * Aria-label provided for page numbers and page actions group.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n label: string;\r\n /**\r\n * Aria-label provided for page size selection.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n pageSize: string;\r\n /**\r\n * Text that indicates the number of the first and last element displayed on the current page, out of total items\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n showingXofYofTotal: string;\r\n /**\r\n * Aria-labels provided for page action buttons.\r\n * To read more about how to provide the text, see [Provider](component:provider) component\r\n */\r\n actions: PaginationTextsActions;\r\n};\r\n\r\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> &\r\n usePaginationValues & {\r\n /** Indicate total number of items that will be paginated */\r\n length: number;\r\n /** Page size options */\r\n pageSizes?: number[];\r\n /** Shows page controls */\r\n showPageControls?: boolean;\r\n /** Shows page numbers between navigation buttons, which allows users to quickly navigate to a specific page */\r\n showPageNumbers?: boolean;\r\n /** Shows a dropdown with page sizes, which allows user to change the number of items displayed on the page */\r\n showPageSize?: boolean;\r\n /** Enable pagination shortcuts */\r\n dangerouslyHijackGlobalKeyboardNavigation?: boolean;\r\n };\r\n\r\nconst getShowingLabel = (length: number, pageIndex: number, pageSize: number, texts: LocalizationTexts): string => {\r\n const minItemIndex = pageIndex * pageSize + 1;\r\n const maxItemIndex = (pageIndex + 1) * pageSize;\r\n\r\n return texts.pagination.showingXofYofTotal\r\n .replace('[X]', length === 0 ? '0' : String(minItemIndex))\r\n .replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex))\r\n .replace('[total]', String(length));\r\n};\r\n\r\nexport const Pagination = React.forwardRef(function Pagination(props: PaginationProps, ref: React.Ref<HTMLDivElement>) {\r\n const {\r\n length,\r\n pageIndex,\r\n pageSize,\r\n pageSizes = [10, 25, 50, 100, 500],\r\n setPageIndex,\r\n setPageSize,\r\n showPageControls = true,\r\n showPageNumbers = true,\r\n showPageSize = true,\r\n dangerouslyHijackGlobalKeyboardNavigation = false,\r\n ...otherProps\r\n } = props;\r\n const { texts } = useLocalization();\r\n\r\n const maxPageIndex = Math.ceil(length / pageSize) - 1;\r\n const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;\r\n\r\n usePaginationShortcuts({\r\n setPageIndex,\r\n maxPageIndex,\r\n pageIndex,\r\n dangerouslyHijackGlobalKeyboardNavigation,\r\n });\r\n\r\n const pageCount = Math.ceil(length / pageSize);\r\n const canPreviousPage = pageIndex > 0;\r\n const canNextPage = pageIndex < pageCount - 1;\r\n\r\n const className = cn('inline-flex relative justify-between items-center', props.className);\r\n\r\n return (\r\n <div {...otherProps} className={className} data-taco=\"pagination\" ref={ref}>\r\n {showPageSize && (\r\n <span className=\"mr-4\">\r\n {getShowingLabel(length, pageIndex, pageSize, texts)}\r\n <Select\r\n aria-label={texts.pagination.pageSize}\r\n className=\"ml-4 !w-20\"\r\n data={pageSizes.map(pageSize => ({\r\n text: String(pageSize),\r\n value: pageSize,\r\n }))}\r\n onChange={event => {\r\n setPageIndex(0);\r\n setPageSize(Number(event.target.value));\r\n }}\r\n value={pageSize}\r\n />\r\n </span>\r\n )}\r\n {showPageControls && (\r\n <Group as=\"nav\" aria-label={texts.pagination.label}>\r\n <IconButton\r\n appearance=\"default\"\r\n disabled={!canPreviousPage}\r\n icon=\"arrow-start\"\r\n onClick={() => setPageIndex(0)}\r\n aria-label={\r\n showShortcutTexts\r\n ? texts.pagination.actions.firstPageWithShortcut\r\n : texts.pagination.actions.firstPage\r\n }\r\n tooltip={\r\n showShortcutTexts\r\n ? texts.pagination.actions.firstPageWithShortcut\r\n : texts.pagination.actions.firstPage\r\n }\r\n />\r\n <IconButton\r\n appearance=\"default\"\r\n disabled={!canPreviousPage}\r\n icon=\"arrow-left\"\r\n onClick={() => setPageIndex(pageIndex - 1)}\r\n aria-label={\r\n showShortcutTexts\r\n ? texts.pagination.actions.previousPageWithShortcut\r\n : texts.pagination.actions.previousPage\r\n }\r\n tooltip={\r\n showShortcutTexts\r\n ? texts.pagination.actions.previousPageWithShortcut\r\n : texts.pagination.actions.previousPage\r\n }\r\n />\r\n {showPageNumbers && pageCount > 0 && (\r\n <PageNumbers pageCount={pageCount} currentPageIndex={pageIndex} onClick={setPageIndex} />\r\n )}\r\n <IconButton\r\n appearance=\"default\"\r\n disabled={!canNextPage}\r\n icon=\"arrow-right\"\r\n onClick={() => setPageIndex(pageIndex + 1)}\r\n aria-label={\r\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\r\n }\r\n tooltip={\r\n showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\r\n }\r\n />\r\n <IconButton\r\n appearance=\"default\"\r\n disabled={!canNextPage}\r\n icon=\"arrow-end\"\r\n onClick={() => setPageIndex(pageCount - 1)}\r\n aria-label={\r\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\r\n }\r\n tooltip={\r\n showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\r\n }\r\n />\r\n </Group>\r\n )}\r\n </div>\r\n );\r\n});\r\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,21 +1,23 @@
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
1
2
|
import { forwardRef, useMemo, createElement, createContext, useContext, isValidElement } from 'react';
|
2
3
|
import cn from 'classnames';
|
3
4
|
import { Root, Trigger as Trigger$1, Close as Close$1 } from '@radix-ui/react-popover';
|
4
5
|
import { UnstyledContent, UnstyledArrow } from './Primitives.js';
|
5
6
|
import mergeRefs from '../../utils/mergeRefs.js';
|
6
7
|
|
7
|
-
|
8
|
+
var _excluded = ["children", "trigger"];
|
9
|
+
var PopoverContext = /*#__PURE__*/createContext({
|
8
10
|
props: {},
|
9
11
|
ref: null
|
10
12
|
});
|
11
|
-
|
13
|
+
var Trigger = /*#__PURE__*/forwardRef(function PopoverTrigger(props, ref) {
|
12
14
|
var _props$children;
|
13
15
|
|
14
|
-
|
15
|
-
|
16
|
+
var context = useContext(PopoverContext);
|
17
|
+
var children = props.children;
|
16
18
|
|
17
19
|
if (isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
|
18
|
-
console.warn(
|
20
|
+
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");
|
19
21
|
children = createElement("span", null, props.children);
|
20
22
|
}
|
21
23
|
|
@@ -25,22 +27,22 @@ const Trigger = /*#__PURE__*/forwardRef(function PopoverTrigger(props, ref) {
|
|
25
27
|
asChild: true
|
26
28
|
}));
|
27
29
|
});
|
28
|
-
|
29
|
-
children,
|
30
|
-
|
31
|
-
|
32
|
-
|
30
|
+
var RenderPropWrapper = /*#__PURE__*/forwardRef(function RenderPropWrapper(_ref, ref) {
|
31
|
+
var children = _ref.children,
|
32
|
+
onClick = _ref.onClick;
|
33
|
+
|
34
|
+
var close = function close() {
|
33
35
|
onClick(new CustomEvent('hide'));
|
34
36
|
};
|
35
37
|
|
36
38
|
return children({
|
37
|
-
close,
|
38
|
-
ref
|
39
|
+
close: close,
|
40
|
+
ref: ref
|
39
41
|
});
|
40
42
|
});
|
41
|
-
|
42
|
-
|
43
|
-
|
43
|
+
var Content = /*#__PURE__*/forwardRef(function PopoverContent(props, ref) {
|
44
|
+
var className = cn('bg-white focus:border-blue-light', props.className);
|
45
|
+
var output;
|
44
46
|
|
45
47
|
if (typeof props.children === 'function') {
|
46
48
|
output = createElement(Close$1, {
|
@@ -58,20 +60,23 @@ const Content = /*#__PURE__*/forwardRef(function PopoverContent(props, ref) {
|
|
58
60
|
className: "text-white"
|
59
61
|
}));
|
60
62
|
});
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
63
|
+
var Close = /*#__PURE__*/forwardRef(function (props, ref) {
|
64
|
+
return createElement(Close$1, Object.assign({}, props, {
|
65
|
+
ref: ref,
|
66
|
+
asChild: true
|
67
|
+
}));
|
68
|
+
});
|
69
|
+
var Popover = /*#__PURE__*/forwardRef(function Popover(props, ref) {
|
70
|
+
var children = props.children,
|
71
|
+
trigger = props.trigger,
|
72
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
73
|
+
|
74
|
+
var context = useMemo(function () {
|
75
|
+
return {
|
76
|
+
props: otherProps,
|
77
|
+
ref: ref
|
78
|
+
};
|
79
|
+
}, [otherProps]);
|
75
80
|
return createElement(PopoverContext.Provider, {
|
76
81
|
value: context
|
77
82
|
}, 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';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Placement } from '../..';\r\nimport { UnstyledArrow, UnstyledContent } from './Primitives';\r\nimport mergeRefs from '../../utils/mergeRefs';\r\n\r\ntype PopoverContextValue = { props: any; ref: React.Ref<HTMLElement> };\r\n\r\nconst PopoverContext = React.createContext<PopoverContextValue>({\r\n props: {},\r\n ref: null,\r\n});\r\n\r\nexport type PopoverTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\r\nconst Trigger = React.forwardRef(function PopoverTrigger(props: PopoverTriggerProps, ref: React.Ref<HTMLButtonElement>) {\r\n const context = React.useContext(PopoverContext);\r\n let children = props.children;\r\n\r\n if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\r\n console.warn(\r\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`\r\n );\r\n children = <span>{props.children}</span>;\r\n }\r\n\r\n return (\r\n <PopoverPrimitive.Trigger {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\r\n );\r\n});\r\n\r\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick }: any, ref) {\r\n const close = () => {\r\n onClick(new CustomEvent('hide'));\r\n };\r\n\r\n return children({ close, ref });\r\n});\r\n\r\nexport type PopoverContentRenderProps = { close: () => void };\r\nexport type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\r\n children: React.ReactNode | ((props: PopoverContentRenderProps) => React.ReactNode);\r\n /** Set the position of the Popover relative to its trigger. Default value is `bottom` */\r\n placement?: Placement;\r\n};\r\nconst Content = React.forwardRef(function PopoverContent(props: PopoverContentProps, ref: React.Ref<HTMLDivElement>) {\r\n const className = cn('bg-white focus:border-blue-light', props.className);\r\n\r\n let output;\r\n\r\n if (typeof props.children === 'function') {\r\n output = (\r\n <PopoverPrimitive.Close asChild>\r\n <RenderPropWrapper>{props.children}</RenderPropWrapper>\r\n </PopoverPrimitive.Close>\r\n );\r\n } else {\r\n output = props.children;\r\n }\r\n\r\n return (\r\n <UnstyledContent className={className} placement={props.placement} ref={ref}>\r\n {output}\r\n <UnstyledArrow className=\"text-white\" />\r\n </UnstyledContent>\r\n );\r\n});\r\n\r\nexport type PopoverCloseProps = React.HTMLAttributes<HTMLButtonElement>;\r\nconst Close = React.forwardRef(\r\n (props: PopoverCloseProps, ref: React.Ref<HTMLButtonElement>): JSX.Element => (\r\n <PopoverPrimitive.Close {...props} ref={ref} asChild />\r\n )\r\n);\r\n\r\nexport type PopoverProps = React.PropsWithChildren<{\r\n /** A trigger to be used for the popover, should not be set if `children` already contains a trigger */\r\n trigger?: JSX.Element;\r\n}>;\r\nexport type ForwardedPopoverWithStatics = React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLElement>> & {\r\n Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps>;\r\n Content: React.ForwardRefExoticComponent<PopoverContentProps>;\r\n Close: React.ForwardRefExoticComponent<PopoverCloseProps>;\r\n};\r\n\r\nexport const Popover = React.forwardRef(function Popover(props: PopoverProps, ref: React.Ref<HTMLElement>) {\r\n const { children, trigger, ...otherProps } = props;\r\n const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\r\n\r\n return (\r\n <PopoverContext.Provider value={context}>\r\n <PopoverPrimitive.Root>\r\n {trigger && <Trigger>{trigger}</Trigger>}\r\n {children}\r\n </PopoverPrimitive.Root>\r\n </PopoverContext.Provider>\r\n );\r\n}) as ForwardedPopoverWithStatics;\r\nPopover.Trigger = Trigger;\r\nPopover.Content = Content;\r\nPopover.Close = Close;\r\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';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Placement } from '../..';\r\nimport { UnstyledArrow, UnstyledContent } from './Primitives';\r\nimport mergeRefs from '../../utils/mergeRefs';\r\n\r\ntype PopoverContextValue = { props: any; ref: React.Ref<HTMLElement> };\r\n\r\nconst PopoverContext = React.createContext<PopoverContextValue>({\r\n props: {},\r\n ref: null,\r\n});\r\n\r\nexport type PopoverTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\r\nconst Trigger = React.forwardRef(function PopoverTrigger(props: PopoverTriggerProps, ref: React.Ref<HTMLButtonElement>) {\r\n const context = React.useContext(PopoverContext);\r\n let children = props.children;\r\n\r\n if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\r\n console.warn(\r\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`\r\n );\r\n children = <span>{props.children}</span>;\r\n }\r\n\r\n return (\r\n <PopoverPrimitive.Trigger {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\r\n );\r\n});\r\n\r\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick }: any, ref) {\r\n const close = () => {\r\n onClick(new CustomEvent('hide'));\r\n };\r\n\r\n return children({ close, ref });\r\n});\r\n\r\nexport type PopoverContentRenderProps = { close: () => void };\r\nexport type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\r\n children: React.ReactNode | ((props: PopoverContentRenderProps) => React.ReactNode);\r\n /** Set the position of the Popover relative to its trigger. Default value is `bottom` */\r\n placement?: Placement;\r\n};\r\nconst Content = React.forwardRef(function PopoverContent(props: PopoverContentProps, ref: React.Ref<HTMLDivElement>) {\r\n const className = cn('bg-white focus:border-blue-light', props.className);\r\n\r\n let output;\r\n\r\n if (typeof props.children === 'function') {\r\n output = (\r\n <PopoverPrimitive.Close asChild>\r\n <RenderPropWrapper>{props.children}</RenderPropWrapper>\r\n </PopoverPrimitive.Close>\r\n );\r\n } else {\r\n output = props.children;\r\n }\r\n\r\n return (\r\n <UnstyledContent className={className} placement={props.placement} ref={ref}>\r\n {output}\r\n <UnstyledArrow className=\"text-white\" />\r\n </UnstyledContent>\r\n );\r\n});\r\n\r\nexport type PopoverCloseProps = React.HTMLAttributes<HTMLButtonElement>;\r\nconst Close = React.forwardRef(\r\n (props: PopoverCloseProps, ref: React.Ref<HTMLButtonElement>): JSX.Element => (\r\n <PopoverPrimitive.Close {...props} ref={ref} asChild />\r\n )\r\n);\r\n\r\nexport type PopoverProps = React.PropsWithChildren<{\r\n /** A trigger to be used for the popover, should not be set if `children` already contains a trigger */\r\n trigger?: JSX.Element;\r\n}>;\r\nexport type ForwardedPopoverWithStatics = React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLElement>> & {\r\n Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps>;\r\n Content: React.ForwardRefExoticComponent<PopoverContentProps>;\r\n Close: React.ForwardRefExoticComponent<PopoverCloseProps>;\r\n};\r\n\r\nexport const Popover = React.forwardRef(function Popover(props: PopoverProps, ref: React.Ref<HTMLElement>) {\r\n const { children, trigger, ...otherProps } = props;\r\n const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\r\n\r\n return (\r\n <PopoverContext.Provider value={context}>\r\n <PopoverPrimitive.Root>\r\n {trigger && <Trigger>{trigger}</Trigger>}\r\n {children}\r\n </PopoverPrimitive.Root>\r\n </PopoverContext.Provider>\r\n );\r\n}) as ForwardedPopoverWithStatics;\r\nPopover.Trigger = Trigger;\r\nPopover.Content = Content;\r\nPopover.Close = Close;\r\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":"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"}
|
@@ -1,23 +1,27 @@
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
1
2
|
import React__default from 'react';
|
2
3
|
import cn from 'classnames';
|
3
4
|
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
5
|
+
var _excluded = ["duration"];
|
6
|
+
var Progress = function Progress(_ref) {
|
7
|
+
var _cn;
|
8
|
+
|
9
|
+
var _ref$duration = _ref.duration,
|
10
|
+
duration = _ref$duration === void 0 ? undefined : _ref$duration,
|
11
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
12
|
+
|
13
|
+
var style;
|
9
14
|
|
10
15
|
if (duration) {
|
11
16
|
style = {
|
12
|
-
animationDuration:
|
17
|
+
animationDuration: duration + "ms"
|
13
18
|
};
|
14
19
|
}
|
15
20
|
|
16
|
-
|
17
|
-
|
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
|
-
|
20
|
-
});
|
21
|
+
var className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);
|
22
|
+
var progressClassName = cn('yt-progress__bar block h-1', (_cn = {
|
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
|
+
}, _cn["w-0 bg-grey-dark animate-[progress_linear]"] = duration, _cn));
|
21
25
|
return React__default.createElement("span", Object.assign({}, props, {
|
22
26
|
"data-taco": "progress",
|
23
27
|
className: className
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Progress.js","sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport './Progress.css';\r\n\r\nexport type ProgressProps = React.HTMLAttributes<HTMLSpanElement> & {\r\n /**\r\n * Indicates how long (in milliseconds) a progress bar will take to progress through.\r\n * By default, progress bar has no duration\r\n */\r\n duration?: number;\r\n};\r\n\r\nexport const Progress = ({ duration = undefined, ...props }: ProgressProps): JSX.Element => {\r\n let style;\r\n\r\n if (duration) {\r\n style = {\r\n animationDuration: `${duration}ms`,\r\n };\r\n }\r\n\r\n const className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);\r\n\r\n const progressClassName = cn('yt-progress__bar block h-1', {\r\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-[' ']\":\r\n !duration,\r\n [`w-0 bg-grey-dark animate-[progress_linear]`]: duration,\r\n });\r\n\r\n return (\r\n <span {...props} data-taco=\"progress\" className={className}>\r\n <span className={progressClassName} data-taco=\"progress-bar\" style={style} />\r\n </span>\r\n );\r\n};\r\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';\r\nimport cn from 'classnames';\r\nimport './Progress.css';\r\n\r\nexport type ProgressProps = React.HTMLAttributes<HTMLSpanElement> & {\r\n /**\r\n * Indicates how long (in milliseconds) a progress bar will take to progress through.\r\n * By default, progress bar has no duration\r\n */\r\n duration?: number;\r\n};\r\n\r\nexport const Progress = ({ duration = undefined, ...props }: ProgressProps): JSX.Element => {\r\n let style;\r\n\r\n if (duration) {\r\n style = {\r\n animationDuration: `${duration}ms`,\r\n };\r\n }\r\n\r\n const className = cn('bg-grey-light rounded block h-1 overflow-hidden w-full', props.className);\r\n\r\n const progressClassName = cn('yt-progress__bar block h-1', {\r\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-[' ']\":\r\n !duration,\r\n [`w-0 bg-grey-dark animate-[progress_linear]`]: duration,\r\n });\r\n\r\n return (\r\n <span {...props} data-taco=\"progress\" className={className}>\r\n <span className={progressClassName} data-taco=\"progress-bar\" style={style} />\r\n </span>\r\n );\r\n};\r\n"],"names":["Progress","duration","undefined","props","style","animationDuration","className","cn","progressClassName","React"],"mappings":";;;;;IAYaA,QAAQ,GAAG,SAAXA,QAAW;;;2BAAGC;MAAAA,sCAAWC;MAAcC;;AAChD,MAAIC,KAAJ;;AAEA,MAAIH,QAAJ,EAAc;AACVG,IAAAA,KAAK,GAAG;AACJC,MAAAA,iBAAiB,EAAKJ,QAAL;AADb,KAAR;AAGH;;AAED,MAAMK,SAAS,GAAGC,EAAE,CAAC,wDAAD,EAA2DJ,KAAK,CAACG,SAAjE,CAApB;AAEA,MAAME,iBAAiB,GAAGD,EAAE,CAAC,4BAAD;AACxB,6JACI,CAACN;AAFmB,yDAGwBA,QAHxB,OAA5B;AAMA,SACIQ,4BAAA,OAAA,oBAAUN;iBAAiB;AAAWG,IAAAA,SAAS,EAAEA;IAAjD,EACIG,4BAAA,OAAA;AAAMH,IAAAA,SAAS,EAAEE;iBAA6B;AAAeJ,IAAAA,KAAK,EAAEA;GAApE,CADJ,CADJ;AAKH;;;;"}
|