@economic/taco 1.1.5-alpha.102 → 1.1.5-alpha.127

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (162) hide show
  1. package/dist/components/Accordion/Accordion.stories.d.ts +26 -0
  2. package/dist/components/Backdrop/Backdrop.stories.d.ts +7 -0
  3. package/dist/components/Badge/Badge.stories.d.ts +15 -0
  4. package/dist/components/Banner/Banner.stories.d.ts +23 -0
  5. package/dist/components/Button/Button.stories.d.ts +69 -0
  6. package/dist/components/Calendar/Calendar.d.ts +3 -1
  7. package/dist/components/Calendar/Calendar.stories.d.ts +13 -0
  8. package/dist/components/Card/Card.stories.d.ts +12 -0
  9. package/dist/components/Datepicker/Datepicker.stories.d.ts +43 -0
  10. package/dist/components/Dialog/Dialog.d.ts +1 -1
  11. package/dist/components/Dialog/Dialog.stories.d.ts +54 -0
  12. package/dist/components/Field/Field.stories.d.ts +14 -0
  13. package/dist/components/Form/Form.stories.d.ts +14 -0
  14. package/dist/components/Group/Group.d.ts +11 -1
  15. package/dist/components/Group/Group.stories.d.ts +23 -0
  16. package/dist/components/Hanger/Hanger.stories.d.ts +11 -0
  17. package/dist/components/HoverCard/HoverCard.stories.d.ts +28 -0
  18. package/dist/components/Icon/Icon.stories.d.ts +24 -0
  19. package/dist/components/Icon/components/ChevronLeftSolid.d.ts +3 -0
  20. package/dist/components/Icon/components/ChevronRightSolid.d.ts +3 -0
  21. package/dist/components/Icon/components/index.d.ts +1 -1
  22. package/dist/components/IconButton/IconButton.stories.d.ts +45 -0
  23. package/dist/components/Input/Input.d.ts +1 -1
  24. package/dist/components/Input/Input.stories.d.ts +43 -0
  25. package/dist/components/Listbox/Listbox.stories.d.ts +44 -0
  26. package/dist/components/Menu/Menu.d.ts +2 -2
  27. package/dist/components/Menu/Menu.stories.d.ts +93 -0
  28. package/dist/components/Menu/components/Item.d.ts +1 -1
  29. package/dist/components/Menu/components/Link.d.ts +1 -1
  30. package/dist/components/Navigation/Navigation.stories.d.ts +7 -0
  31. package/dist/components/Pagination/Pagination.stories.d.ts +28 -0
  32. package/dist/components/Popover/Popover.stories.d.ts +14 -0
  33. package/dist/components/Progress/Progress.stories.d.ts +8 -0
  34. package/dist/components/RadioGroup/RadioGroup.stories.d.ts +49 -0
  35. package/dist/components/SearchInput/SearchInput.stories.d.ts +41 -0
  36. package/dist/components/Select/Select.stories.d.ts +35 -0
  37. package/dist/components/Spinner/Spinner.stories.d.ts +15 -0
  38. package/dist/components/Table/Table.stories.d.ts +32 -0
  39. package/dist/components/Table/util/rowIndexPath.d.ts +2 -2
  40. package/dist/components/Tabs/Tabs.stories.d.ts +19 -0
  41. package/dist/components/Textarea/Textarea.stories.d.ts +40 -0
  42. package/dist/components/Toast/Toast.d.ts +2 -2
  43. package/dist/components/Toast/Toast.stories.d.ts +12 -0
  44. package/dist/components/Toast/Toaster.d.ts +2 -2
  45. package/dist/components/Tooltip/Tooltip.stories.d.ts +25 -0
  46. package/dist/components/Tour/Tour.stories.d.ts +11 -0
  47. package/dist/css/Typography.stories.d.ts +6 -0
  48. package/dist/esm/components/Badge/Badge.js +1 -1
  49. package/dist/esm/components/Badge/Badge.js.map +1 -1
  50. package/dist/esm/components/Calendar/Calendar.js +4 -11
  51. package/dist/esm/components/Calendar/Calendar.js.map +1 -1
  52. package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
  53. package/dist/esm/components/Combobox/Combobox.js.map +1 -1
  54. package/dist/esm/components/Combobox/useCombobox.js +12 -13
  55. package/dist/esm/components/Combobox/useCombobox.js.map +1 -1
  56. package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
  57. package/dist/esm/components/Dialog/Dialog.js +39 -58
  58. package/dist/esm/components/Dialog/Dialog.js.map +1 -1
  59. package/dist/esm/components/Dialog/components/Content.js.map +1 -1
  60. package/dist/esm/components/Dialog/components/Drawer.js.map +1 -1
  61. package/dist/esm/components/Field/Field.js +10 -12
  62. package/dist/esm/components/Field/Field.js.map +1 -1
  63. package/dist/esm/components/Form/Form.js +6 -8
  64. package/dist/esm/components/Form/Form.js.map +1 -1
  65. package/dist/esm/components/Group/Group.js +9 -8
  66. package/dist/esm/components/Group/Group.js.map +1 -1
  67. package/dist/esm/components/Hanger/Hanger.js +27 -35
  68. package/dist/esm/components/Hanger/Hanger.js.map +1 -1
  69. package/dist/esm/components/HoverCard/HoverCard.js +8 -9
  70. package/dist/esm/components/HoverCard/HoverCard.js.map +1 -1
  71. package/dist/esm/components/Icon/Icon.js +7 -8
  72. package/dist/esm/components/Icon/Icon.js.map +1 -1
  73. package/dist/esm/components/Icon/components/ChevronLeftSolid.js +20 -0
  74. package/dist/esm/components/Icon/components/ChevronLeftSolid.js.map +1 -0
  75. package/dist/esm/components/Icon/components/ChevronRightSolid.js +20 -0
  76. package/dist/esm/components/Icon/components/ChevronRightSolid.js.map +1 -0
  77. package/dist/esm/components/Icon/components/index.js +4 -0
  78. package/dist/esm/components/Icon/components/index.js.map +1 -1
  79. package/dist/esm/components/IconButton/IconButton.js +9 -11
  80. package/dist/esm/components/IconButton/IconButton.js.map +1 -1
  81. package/dist/esm/components/Input/Input.js +25 -25
  82. package/dist/esm/components/Input/Input.js.map +1 -1
  83. package/dist/esm/components/Listbox/Listbox.js +24 -25
  84. package/dist/esm/components/Listbox/Listbox.js.map +1 -1
  85. package/dist/esm/components/Listbox/ScrollableList.js +2 -2
  86. package/dist/esm/components/Listbox/ScrollableList.js.map +1 -1
  87. package/dist/esm/components/Listbox/useListbox.js +3 -2
  88. package/dist/esm/components/Listbox/useListbox.js.map +1 -1
  89. package/dist/esm/components/Listbox/useMultiListbox.js +7 -7
  90. package/dist/esm/components/Listbox/useMultiListbox.js.map +1 -1
  91. package/dist/esm/components/Menu/Menu.js +16 -34
  92. package/dist/esm/components/Menu/Menu.js.map +1 -1
  93. package/dist/esm/components/Menu/components/Content.js.map +1 -1
  94. package/dist/esm/components/Menu/components/RadioGroup.js.map +1 -1
  95. package/dist/esm/components/Navigation/Navigation.js +36 -44
  96. package/dist/esm/components/Navigation/Navigation.js.map +1 -1
  97. package/dist/esm/components/Pagination/PageNumbers.js.map +1 -1
  98. package/dist/esm/components/Pagination/Pagination.js +39 -56
  99. package/dist/esm/components/Pagination/Pagination.js.map +1 -1
  100. package/dist/esm/components/Pagination/usePaginationShortcuts.js +4 -5
  101. package/dist/esm/components/Pagination/usePaginationShortcuts.js.map +1 -1
  102. package/dist/esm/components/Popover/Popover.js +29 -34
  103. package/dist/esm/components/Popover/Popover.js.map +1 -1
  104. package/dist/esm/components/Popover/Primitives.js.map +1 -1
  105. package/dist/esm/components/Progress/Progress.js +11 -15
  106. package/dist/esm/components/Progress/Progress.js.map +1 -1
  107. package/dist/esm/components/Provider/Provider.js +13 -18
  108. package/dist/esm/components/Provider/Provider.js.map +1 -1
  109. package/dist/esm/components/RadioGroup/RadioGroup.js +45 -57
  110. package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
  111. package/dist/esm/components/SearchInput/SearchInput.js +10 -12
  112. package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
  113. package/dist/esm/components/Select/Select.js +30 -31
  114. package/dist/esm/components/Select/Select.js.map +1 -1
  115. package/dist/esm/components/Select/useSelect.js +6 -7
  116. package/dist/esm/components/Select/useSelect.js.map +1 -1
  117. package/dist/esm/components/Spinner/Spinner.js +12 -19
  118. package/dist/esm/components/Spinner/Spinner.js.map +1 -1
  119. package/dist/esm/components/Switch/Switch.js +9 -10
  120. package/dist/esm/components/Switch/Switch.js.map +1 -1
  121. package/dist/esm/components/Table/components/BaseTable.js.map +1 -1
  122. package/dist/esm/components/Table/components/WindowedTable.js.map +1 -1
  123. package/dist/esm/components/Table/hooks/plugins/useRowActions.js +2 -3
  124. package/dist/esm/components/Table/hooks/plugins/useRowActions.js.map +1 -1
  125. package/dist/esm/components/Table/hooks/useTable.js +5 -1
  126. package/dist/esm/components/Table/hooks/useTable.js.map +1 -1
  127. package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js +18 -13
  128. package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js.map +1 -1
  129. package/dist/esm/components/Table/util/rowIndexPath.js.map +1 -1
  130. package/dist/esm/components/Tabs/Tabs.js +25 -27
  131. package/dist/esm/components/Tabs/Tabs.js.map +1 -1
  132. package/dist/esm/components/Textarea/Textarea.js +11 -9
  133. package/dist/esm/components/Textarea/Textarea.js.map +1 -1
  134. package/dist/esm/components/Toast/Toast.js +6 -1
  135. package/dist/esm/components/Toast/Toast.js.map +1 -1
  136. package/dist/esm/components/Toast/Toaster.js +88 -118
  137. package/dist/esm/components/Toast/Toaster.js.map +1 -1
  138. package/dist/esm/components/Toast/util.js.map +1 -1
  139. package/dist/esm/components/Tooltip/Tooltip.js +7 -8
  140. package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
  141. package/dist/esm/components/Tour/Tour.js +46 -53
  142. package/dist/esm/components/Tour/Tour.js.map +1 -1
  143. package/dist/esm/components/Treeview/Treeview.js +26 -36
  144. package/dist/esm/components/Treeview/Treeview.js.map +1 -1
  145. package/dist/esm/components/VisuallyHidden/VisuallyHidden.js +1 -1
  146. package/dist/esm/components/VisuallyHidden/VisuallyHidden.js.map +1 -1
  147. package/dist/esm/index.css +623 -635
  148. package/dist/esm/index.js +1 -1
  149. package/dist/esm/primitives/Button.js.map +1 -1
  150. package/dist/esm/utils/hooks/useListKeyboardNavigation.js +10 -11
  151. package/dist/esm/utils/hooks/useListKeyboardNavigation.js.map +1 -1
  152. package/dist/esm/utils/input.js +1 -1
  153. package/dist/esm/utils/input.js.map +1 -1
  154. package/dist/index.css +623 -635
  155. package/dist/primitives/Button.d.ts +2 -1
  156. package/dist/taco.cjs.development.js +709 -783
  157. package/dist/taco.cjs.development.js.map +1 -1
  158. package/dist/taco.cjs.production.min.js +1 -1
  159. package/dist/taco.cjs.production.min.js.map +1 -1
  160. package/dist/utils/hooks/useListKeyboardNavigation.d.ts +1 -1
  161. package/package.json +5 -6
  162. package/types.json +18 -4
@@ -1,4 +1,3 @@
1
- import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
2
1
  import { forwardRef, createElement, useRef, useEffect, Fragment } from 'react';
3
2
  import cn from 'classnames';
4
3
  import { Icon } from '../Icon/Icon.js';
@@ -10,54 +9,52 @@ import { Combobox } from '../Combobox/Combobox.js';
10
9
  import { MultiListbox, Listbox } from '../Listbox/Listbox.js';
11
10
  import { useSelect } from './useSelect.js';
12
11
 
13
- var _excluded = ["autoFocus", "className", "highlighted", "style"],
14
- _excluded2 = ["editable"];
15
- var BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
16
- var autoFocus = props.autoFocus,
17
- externalClassName = props.className,
18
- style = props.style,
19
- otherProps = _objectWithoutPropertiesLoose(props, _excluded);
20
-
21
- var _useSelect = useSelect(otherProps, ref),
22
- button = _useSelect.button,
23
- listbox = _useSelect.listbox,
24
- popover = _useSelect.popover,
25
- input = _useSelect.input,
26
- text = _useSelect.text,
27
- _useSelect$more = _useSelect.more,
28
- more = _useSelect$more === void 0 ? 0 : _useSelect$more;
29
-
30
- var internalRef = useRef(null);
31
- var selectDimensions = useBoundingClientRectListener(internalRef);
32
- var className = cn('inline-flex relative w-full', {
12
+ const BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
13
+ const {
14
+ autoFocus,
15
+ className: externalClassName,
16
+ highlighted,
17
+ style,
18
+ ...otherProps
19
+ } = props;
20
+ const {
21
+ button,
22
+ listbox,
23
+ popover,
24
+ input,
25
+ text,
26
+ more = 0
27
+ } = useSelect(otherProps, ref);
28
+ const internalRef = useRef(null);
29
+ const selectDimensions = useBoundingClientRectListener(internalRef);
30
+ const className = cn('inline-flex relative w-full', {
33
31
  'yt-select--readonly': props.readOnly
34
32
  }, externalClassName);
35
- var inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
33
+ const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
36
34
  'border-blue': popover.open
37
35
  });
38
- useEffect(function () {
36
+ useEffect(() => {
39
37
  if (autoFocus && internalRef.current) {
40
38
  internalRef.current.focus();
41
39
  }
42
40
  }, []);
43
41
 
44
- var renderMultiSelection = function renderMultiSelection() {
42
+ const renderMultiSelection = () => {
45
43
  return createElement(Fragment, null, createElement("span", {
46
44
  className: "flex-grow truncate text-left"
47
45
  }, text), more > 0 && createElement(Badge, {
48
46
  className: "ml-2"
49
- }, "+" + more));
47
+ }, `+${more}`));
50
48
  };
51
49
 
52
- var commonListboxProps = _extends({}, listbox, {
50
+ const commonListboxProps = { ...listbox,
53
51
  className: 'w-auto',
54
52
  invalid: undefined,
55
53
  style: {
56
54
  minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
57
55
  },
58
56
  tabIndex: popover.open ? 0 : -1
59
- });
60
-
57
+ };
61
58
  return createElement("span", {
62
59
  className: className,
63
60
  "data-taco": "select",
@@ -80,9 +77,11 @@ var BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
80
77
  type: "text"
81
78
  }))));
82
79
  });
83
- var Select = /*#__PURE__*/forwardRef(function Select(props, ref) {
84
- var editable = props.editable,
85
- otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
80
+ const Select = /*#__PURE__*/forwardRef(function Select(props, ref) {
81
+ const {
82
+ editable,
83
+ ...otherProps
84
+ } = props;
86
85
 
87
86
  if (editable) {
88
87
  return createElement(Combobox, Object.assign({}, otherProps, {
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\n\nexport type SelectTexts = {\n /**\n * The text displayed when all options are selected when multiselect mode in on.\n */\n allOptionsSelected: string;\n};\n\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\n Omit<ComboboxProps, 'inline'> & {\n /**\n * Allows to select multiple values.\n * All the selected values will be combined in a comma-seperated string as the value of the input.\n */\n multiselect?: boolean;\n };\n\nexport type SelectProps = BaseSelectProps & {\n /**\n * Creates an editable select.\n * Setting this will render a inline Combobox which will display the provided data on click/focus,\n * even if there is no value in the input.\n * After user starts typing, matching data will be displayed.\n */\n editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\n const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\n const internalRef = React.useRef<HTMLButtonElement>(null);\n const selectDimensions = useBoundingClientRectListener(internalRef);\n const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {\n 'border-blue': popover.open,\n });\n\n React.useEffect(() => {\n if (autoFocus && internalRef.current) {\n internalRef.current.focus();\n }\n }, []);\n\n const renderMultiSelection = (): React.ReactNode => {\n return (\n <>\n <span className=\"flex-grow truncate text-left\">{text}</span>\n {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n </>\n );\n };\n\n const commonListboxProps: ListboxProps = {\n ...listbox,\n className: 'w-auto',\n invalid: undefined,\n style: { minWidth: selectDimensions?.width },\n tabIndex: popover.open ? 0 : -1,\n };\n\n return (\n <span className={className} data-taco=\"select\" style={style}>\n <PopoverPrimitive.Root {...popover}>\n <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\n {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\n <span className=\"flex h-8 w-8 items-center justify-center\">\n <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\n </span>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Content align=\"start\" sideOffset={4}>\n {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n </PopoverPrimitive.Content>\n <input {...input} className=\"hidden\" type=\"text\" />\n </PopoverPrimitive.Root>\n </span>\n );\n});\n\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n const { editable, ...otherProps } = props;\n\n if (editable) {\n return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\n }\n\n return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["BaseSelect","React","props","ref","autoFocus","externalClassName","className","style","otherProps","useSelect","button","listbox","popover","input","text","more","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","open","current","focus","renderMultiSelection","Badge","commonListboxProps","invalid","undefined","minWidth","width","tabIndex","PopoverPrimitive","multiselect","Icon","name","align","sideOffset","MultiListbox","Listbox","type","Select","editable","Combobox","dialog","inline"],"mappings":"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"}
1
+ {"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Icon } from '../Icon/Icon';\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\nimport { useSelect } from './useSelect';\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\nimport { Badge } from '../Badge/Badge';\nimport { getInputClasses } from '../Input/util';\n\nexport type SelectTexts = {\n /**\n * The text displayed when all options are selected when multiselect mode in on.\n */\n allOptionsSelected: string;\n};\n\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\n Omit<ComboboxProps, 'inline'> & {\n /**\n * Allows to select multiple values.\n * All the selected values will be combined in a comma-seperated string as the value of the input.\n */\n multiselect?: boolean;\n };\n\nexport type SelectProps = BaseSelectProps & {\n /**\n * Creates an editable select.\n * Setting this will render a inline Combobox which will display the provided data on click/focus,\n * even if there is no value in the input.\n * After user starts typing, matching data will be displayed.\n */\n editable?: boolean;\n};\n\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\n const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\n const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\n const internalRef = React.useRef<HTMLButtonElement>(null);\n const selectDimensions = useBoundingClientRectListener(internalRef);\n const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\n const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {\n 'border-blue': popover.open,\n });\n\n React.useEffect(() => {\n if (autoFocus && internalRef.current) {\n internalRef.current.focus();\n }\n }, []);\n\n const renderMultiSelection = (): React.ReactNode => {\n return (\n <>\n <span className=\"flex-grow truncate text-left\">{text}</span>\n {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\n </>\n );\n };\n\n const commonListboxProps: ListboxProps = {\n ...listbox,\n className: 'w-auto',\n invalid: undefined,\n style: { minWidth: selectDimensions?.width },\n tabIndex: popover.open ? 0 : -1,\n };\n\n return (\n <span className={className} data-taco=\"select\" style={style}>\n <PopoverPrimitive.Root {...popover}>\n <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\n {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\n <span className=\"flex h-8 w-8 items-center justify-center\">\n <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\n </span>\n </PopoverPrimitive.Trigger>\n <PopoverPrimitive.Content align=\"start\" sideOffset={4}>\n {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\n </PopoverPrimitive.Content>\n <input {...input} className=\"hidden\" type=\"text\" />\n </PopoverPrimitive.Root>\n </span>\n );\n});\n\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\n const { editable, ...otherProps } = props;\n\n if (editable) {\n return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\n }\n\n return <BaseSelect {...otherProps} ref={ref} />;\n});\n"],"names":["BaseSelect","React","props","ref","autoFocus","className","externalClassName","highlighted","style","otherProps","button","listbox","popover","input","text","more","useSelect","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","open","current","focus","renderMultiSelection","Badge","commonListboxProps","invalid","undefined","minWidth","width","tabIndex","PopoverPrimitive","multiselect","Icon","name","align","sideOffset","MultiListbox","Listbox","type","Select","editable","Combobox","dialog","inline"],"mappings":"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"}
@@ -3,7 +3,6 @@ import cn from 'classnames';
3
3
  import { v4 } from 'uuid';
4
4
  import { useLocalization } from '../Provider/Provider.js';
5
5
  import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
6
- import keycode from 'keycode';
7
6
  import { createCustomEvent } from '../../utils/input.js';
8
7
  import { useFlattenedData, findByValue, setInputValueByRef, sanitizeItem } from '../Listbox/util.js';
9
8
 
@@ -60,15 +59,15 @@ const useSelect = ({
60
59
  }, []); // event handlers
61
60
 
62
61
  const handleButtonKeyDown = event => {
63
- if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {
62
+ if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
64
63
  event.preventDefault();
65
64
  setOpen(true);
66
65
  }
67
66
  };
68
67
 
69
68
  const handleListboxKeyDown = event => {
70
- switch (event.keyCode) {
71
- case keycode('escape'):
69
+ switch (event.key) {
70
+ case 'Escape':
72
71
  {
73
72
  event.preventDefault();
74
73
 
@@ -80,10 +79,10 @@ const useSelect = ({
80
79
  break;
81
80
  }
82
81
 
83
- case keycode('tab'):
84
- case keycode('enter'):
82
+ case 'Tab':
83
+ case 'Enter':
85
84
  {
86
- if (event.keyCode !== keycode('tab')) {
85
+ if (event.key !== 'Tab') {
87
86
  event.preventDefault();
88
87
  }
89
88
 
@@ -1 +1 @@
1
- {"version":3,"file":"useSelect.js","sources":["../../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport cn from 'classnames';\nimport { v4 as uuid } from 'uuid';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useLocalization } from '../Provider/Provider';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n button: InternalButtonProps;\n listbox: InternalListboxProps;\n input: InternalInputProps;\n popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;\n text: string | JSX.Element;\n more?: number;\n};\n\nexport const useSelect = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data = [],\n defaultValue,\n disabled,\n emptyValue,\n id: nativeId,\n multiselect,\n onBlur,\n onClick,\n onChange,\n readOnly,\n value,\n ...otherProps\n }: SelectProps,\n ref: React.Ref<HTMLInputElement>\n): useSelect => {\n const { texts } = useLocalization();\n const flattenedData = useFlattenedData(data);\n const listboxInputRef = useProxiedRef<HTMLInputElement>(ref);\n const [open, setOpen] = React.useState(false);\n const id = React.useMemo(() => nativeId || `select_${uuid()}`, [nativeId]);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const buttonId = `${id}-button`;\n // support 'escape' resetting to the value that was set when the listbox opened\n const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n React.useEffect(() => {\n setLastValue(value);\n }, [open]);\n\n React.useEffect(() => {\n if (value === undefined) {\n if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n setInputValueByRef(inputRef.current, defaultValue);\n } else {\n if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0].value);\n }\n }\n } else {\n if (!multiselect && !findByValue(flattenedData, value)) {\n if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0].value);\n }\n }\n }\n }, []);\n\n // event handlers\n const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\n event.preventDefault();\n setOpen(true);\n }\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n switch (event.keyCode) {\n case keycode('escape'): {\n event.preventDefault();\n if (lastValue !== undefined) {\n setInputValueByRef(listboxInputRef.current, lastValue);\n }\n\n setOpen(false);\n break;\n }\n\n case keycode('tab'):\n case keycode('enter'): {\n if (event.keyCode !== keycode('tab')) {\n event.preventDefault();\n }\n setOpen(false);\n break;\n }\n\n default:\n }\n\n if (otherProps.onKeyDown) {\n otherProps.onKeyDown(event);\n }\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n event.preventDefault();\n if (!multiselect) {\n setOpen(false);\n if (onBlur) {\n onBlur(createCustomEvent('blur'));\n }\n }\n };\n\n let text: string | JSX.Element = '';\n let more = 0;\n\n if (value !== undefined) {\n if (multiselect) {\n const selectedValues = value?.toString().split(',') || [];\n\n if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n text = texts.select.allOptionsSelected;\n } else {\n text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n }\n } else {\n const item = findByValue(flattenedData, value);\n\n if (item) {\n text = item.icon ? (\n <>\n {React.cloneElement(item.icon, {\n className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n })}\n {item.text}\n </>\n ) : (\n item.text\n );\n }\n }\n }\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (onChange) {\n const item = findByValue(flattenedData, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const indexes = item?.path?.split('.') ?? [];\n\n if (indexes.length > 1) {\n // we don't want to map the current item\n indexes.pop();\n // we need to rebuild the path as we map\n let lastPath: string;\n\n (event as any).detail.parents = indexes.map(i => {\n lastPath = lastPath ? [lastPath, i].join('.') : i;\n return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n });\n }\n\n onChange(event);\n }\n };\n\n const button: InternalButtonProps = {\n 'aria-haspopup': 'listbox' as const,\n 'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n 'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n disabled: disabled || readOnly,\n id: buttonId,\n onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n type: 'button',\n };\n\n const listbox: InternalListboxProps = {\n ...otherProps,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n emptyValue,\n onBlur,\n onClick: handleListboxClick,\n onChange: event => {\n setInputValueByRef(inputRef.current, event.target.value);\n },\n onKeyDown: handleListboxKeyDown,\n ref: listboxInputRef,\n value,\n };\n\n const input: InternalInputProps = {\n onChange: handleInputChange,\n ref: inputRef,\n value: String(value ?? ''),\n };\n\n return {\n button,\n listbox,\n input,\n popover: {\n open,\n onOpenChange: open => {\n if (!open && onBlur) {\n onBlur(createCustomEvent('blur'));\n }\n setOpen(open);\n },\n },\n text,\n more,\n };\n};\n"],"names":["useSelect","ariaLabel","ariaLabelledBy","data","defaultValue","disabled","emptyValue","id","nativeId","multiselect","onBlur","onClick","onChange","readOnly","value","otherProps","ref","texts","useLocalization","flattenedData","useFlattenedData","listboxInputRef","useProxiedRef","open","setOpen","React","uuid","inputRef","buttonId","lastValue","setLastValue","undefined","findByValue","setInputValueByRef","current","length","handleButtonKeyDown","event","keyCode","keycode","preventDefault","handleListboxKeyDown","onKeyDown","handleListboxClick","createCustomEvent","text","more","selectedValues","toString","split","filter","item","select","allOptionsSelected","icon","className","cn","props","handleInputChange","persist","target","detail","sanitizeItem","indexes","path","pop","lastPath","parents","map","i","join","find","button","type","listbox","input","String","popover","onOpenChange"],"mappings":"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"}
1
+ {"version":3,"file":"useSelect.js","sources":["../../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { v4 as uuid } from 'uuid';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useLocalization } from '../Provider/Provider';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n button: InternalButtonProps;\n listbox: InternalListboxProps;\n input: InternalInputProps;\n popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;\n text: string | JSX.Element;\n more?: number;\n};\n\nexport const useSelect = (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data = [],\n defaultValue,\n disabled,\n emptyValue,\n id: nativeId,\n multiselect,\n onBlur,\n onClick,\n onChange,\n readOnly,\n value,\n ...otherProps\n }: SelectProps,\n ref: React.Ref<HTMLInputElement>\n): useSelect => {\n const { texts } = useLocalization();\n const flattenedData = useFlattenedData(data);\n const listboxInputRef = useProxiedRef<HTMLInputElement>(ref);\n const [open, setOpen] = React.useState(false);\n const id = React.useMemo(() => nativeId || `select_${uuid()}`, [nativeId]);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const buttonId = `${id}-button`;\n // support 'escape' resetting to the value that was set when the listbox opened\n const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n React.useEffect(() => {\n setLastValue(value);\n }, [open]);\n\n React.useEffect(() => {\n if (value === undefined) {\n if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n setInputValueByRef(inputRef.current, defaultValue);\n } else {\n if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0].value);\n }\n }\n } else {\n if (!multiselect && !findByValue(flattenedData, value)) {\n if (emptyValue !== undefined) {\n setInputValueByRef(inputRef.current, emptyValue);\n } else if (data.length > 0) {\n setInputValueByRef(inputRef.current, data[0].value);\n }\n }\n }\n }, []);\n\n // event handlers\n const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n event.preventDefault();\n setOpen(true);\n }\n };\n\n const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n switch (event.key) {\n case 'Escape': {\n event.preventDefault();\n if (lastValue !== undefined) {\n setInputValueByRef(listboxInputRef.current, lastValue);\n }\n\n setOpen(false);\n break;\n }\n\n case 'Tab':\n case 'Enter': {\n if (event.key !== 'Tab') {\n event.preventDefault();\n }\n setOpen(false);\n break;\n }\n\n default:\n }\n\n if (otherProps.onKeyDown) {\n otherProps.onKeyDown(event);\n }\n };\n\n const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n event.preventDefault();\n if (!multiselect) {\n setOpen(false);\n if (onBlur) {\n onBlur(createCustomEvent('blur'));\n }\n }\n };\n\n let text: string | JSX.Element = '';\n let more = 0;\n\n if (value !== undefined) {\n if (multiselect) {\n const selectedValues = value?.toString().split(',') || [];\n\n if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n text = texts.select.allOptionsSelected;\n } else {\n text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n }\n } else {\n const item = findByValue(flattenedData, value);\n\n if (item) {\n text = item.icon ? (\n <>\n {React.cloneElement(item.icon, {\n className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n })}\n {item.text}\n </>\n ) : (\n item.text\n );\n }\n }\n }\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n event.persist();\n\n if (onChange) {\n const item = findByValue(flattenedData, event.target.value);\n (event as any).detail = sanitizeItem(item);\n\n const indexes = item?.path?.split('.') ?? [];\n\n if (indexes.length > 1) {\n // we don't want to map the current item\n indexes.pop();\n // we need to rebuild the path as we map\n let lastPath: string;\n\n (event as any).detail.parents = indexes.map(i => {\n lastPath = lastPath ? [lastPath, i].join('.') : i;\n return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n });\n }\n\n onChange(event);\n }\n };\n\n const button: InternalButtonProps = {\n 'aria-haspopup': 'listbox' as const,\n 'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n 'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n disabled: disabled || readOnly,\n id: buttonId,\n onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n type: 'button',\n };\n\n const listbox: InternalListboxProps = {\n ...otherProps,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n data,\n disabled,\n emptyValue,\n onBlur,\n onClick: handleListboxClick,\n onChange: event => {\n setInputValueByRef(inputRef.current, event.target.value);\n },\n onKeyDown: handleListboxKeyDown,\n ref: listboxInputRef,\n value,\n };\n\n const input: InternalInputProps = {\n onChange: handleInputChange,\n ref: inputRef,\n value: String(value ?? ''),\n };\n\n return {\n button,\n listbox,\n input,\n popover: {\n open,\n onOpenChange: open => {\n if (!open && onBlur) {\n onBlur(createCustomEvent('blur'));\n }\n setOpen(open);\n },\n },\n text,\n more,\n };\n};\n"],"names":["useSelect","ariaLabel","ariaLabelledBy","data","defaultValue","disabled","emptyValue","id","nativeId","multiselect","onBlur","onClick","onChange","readOnly","value","otherProps","ref","texts","useLocalization","flattenedData","useFlattenedData","listboxInputRef","useProxiedRef","open","setOpen","React","uuid","inputRef","buttonId","lastValue","setLastValue","undefined","findByValue","setInputValueByRef","current","length","handleButtonKeyDown","event","key","preventDefault","handleListboxKeyDown","onKeyDown","handleListboxClick","createCustomEvent","text","more","selectedValues","toString","split","filter","item","select","allOptionsSelected","icon","className","cn","props","handleInputChange","persist","target","detail","sanitizeItem","indexes","path","pop","lastPath","parents","map","i","join","find","button","type","listbox","input","String","popover","onOpenChange"],"mappings":"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"}
@@ -1,28 +1,21 @@
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
- var _excluded = ["delay", "label"];
6
- var Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
7
- var _props$delay = props.delay,
8
- delay = _props$delay === void 0 ? 500 : _props$delay,
9
- label = props.label,
10
- otherProps = _objectWithoutPropertiesLoose(props, _excluded);
11
-
12
- var _React$useState = React__default.useState(!delay),
13
- visible = _React$useState[0],
14
- setVisibility = _React$useState[1];
15
-
16
- React__default.useEffect(function () {
17
- var timeout;
4
+ const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
5
+ const {
6
+ delay = 500,
7
+ label,
8
+ ...otherProps
9
+ } = props;
10
+ const [visible, setVisibility] = React__default.useState(!delay);
11
+ React__default.useEffect(() => {
12
+ let timeout;
18
13
 
19
14
  if (delay) {
20
- timeout = window.setTimeout(function () {
21
- return setVisibility(true);
22
- }, delay);
15
+ timeout = window.setTimeout(() => setVisibility(true), delay);
23
16
  }
24
17
 
25
- return function () {
18
+ return () => {
26
19
  if (timeout) {
27
20
  clearTimeout(timeout);
28
21
  }
@@ -33,7 +26,7 @@ var Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref
33
26
  return null;
34
27
  }
35
28
 
36
- var className = cn('inline-flex flex-col relative items-center', otherProps.className);
29
+ const className = cn('inline-flex flex-col relative items-center', otherProps.className);
37
30
  return React__default.createElement("div", Object.assign({}, otherProps, {
38
31
  className: className,
39
32
  "data-taco": "spinner",
@@ -1 +1 @@
1
- {"version":3,"file":"Spinner.js","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport './Spinner.css';\n\nexport type SpinnerProps = React.HTMLAttributes<HTMLDivElement> & {\n /**\n * Define a delay in milliseconds after which the spinner is shown.\n * Default value is `500`ms\n */\n delay?: number;\n /** Define a text that will be displayed below spinner */\n label?: string;\n};\n\nexport const Spinner = React.forwardRef(function Spinner(props: SpinnerProps, ref: React.Ref<HTMLDivElement>) {\n const { delay = 500, label, ...otherProps } = props;\n const [visible, setVisibility] = React.useState(!delay);\n\n React.useEffect(() => {\n let timeout: number;\n\n if (delay) {\n timeout = window.setTimeout(() => setVisibility(true), delay);\n }\n\n return () => {\n if (timeout) {\n clearTimeout(timeout);\n }\n };\n }, [delay]);\n\n if (!visible) {\n return null;\n }\n\n const className = cn('inline-flex flex-col relative items-center', otherProps.className);\n\n return (\n <div {...otherProps} className={className} data-taco=\"spinner\" ref={ref}>\n <svg\n className=\"h-10 w-10 animate-[spinnerRotation_2s_linear_infinite]\"\n viewBox=\"0 0 100 100\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"50\" cy=\"50\" r=\"45\"></circle>\n </svg>\n {label && <span className=\"mt-4\">{label}</span>}\n </div>\n );\n});\n"],"names":["Spinner","React","forwardRef","props","ref","delay","label","otherProps","useState","visible","setVisibility","useEffect","timeout","window","setTimeout","clearTimeout","className","cn","viewBox","xmlns","cx","cy","r"],"mappings":";;;;;IAcaA,OAAO,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,OAAT,CAAiBG,KAAjB,EAAsCC,GAAtC;EACpC,mBAA8CD,KAA9C,CAAQE,KAAR;MAAQA,KAAR,6BAAgB,GAAhB;MAAqBC,KAArB,GAA8CH,KAA9C,CAAqBG,KAArB;MAA+BC,UAA/B,iCAA8CJ,KAA9C;;EACA,sBAAiCF,cAAK,CAACO,QAAN,CAAe,CAACH,KAAhB,CAAjC;MAAOI,OAAP;MAAgBC,aAAhB;;EAEAT,cAAK,CAACU,SAAN,CAAgB;IACZ,IAAIC,OAAJ;;IAEA,IAAIP,KAAJ,EAAW;MACPO,OAAO,GAAGC,MAAM,CAACC,UAAP,CAAkB;QAAA,OAAMJ,aAAa,CAAC,IAAD,CAAnB;OAAlB,EAA6CL,KAA7C,CAAV;;;IAGJ,OAAO;MACH,IAAIO,OAAJ,EAAa;QACTG,YAAY,CAACH,OAAD,CAAZ;;KAFR;GAPJ,EAYG,CAACP,KAAD,CAZH;;EAcA,IAAI,CAACI,OAAL,EAAc;IACV,OAAO,IAAP;;;EAGJ,IAAMO,SAAS,GAAGC,EAAE,CAAC,4CAAD,EAA+CV,UAAU,CAACS,SAA1D,CAApB;EAEA,OACIf,4BAAA,MAAA,oBAASM;IAAYS,SAAS,EAAEA;iBAAqB;IAAUZ,GAAG,EAAEA;IAApE,EACIH,4BAAA,MAAA;IACIe,SAAS,EAAC;IACVE,OAAO,EAAC;IACRC,KAAK,EAAC;GAHV,EAKIlB,4BAAA,SAAA;IAAQmB,EAAE,EAAC;IAAKC,EAAE,EAAC;IAAKC,CAAC,EAAC;GAA1B,CALJ,CADJ,EAQKhB,KAAK,IAAIL,4BAAA,OAAA;IAAMe,SAAS,EAAC;GAAhB,EAAwBV,KAAxB,CARd,CADJ;AAYH,CApCsB;;;;"}
1
+ {"version":3,"file":"Spinner.js","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport './Spinner.css';\n\nexport type SpinnerProps = React.HTMLAttributes<HTMLDivElement> & {\n /**\n * Define a delay in milliseconds after which the spinner is shown.\n * Default value is `500`ms\n */\n delay?: number;\n /** Define a text that will be displayed below spinner */\n label?: string;\n};\n\nexport const Spinner = React.forwardRef(function Spinner(props: SpinnerProps, ref: React.Ref<HTMLDivElement>) {\n const { delay = 500, label, ...otherProps } = props;\n const [visible, setVisibility] = React.useState(!delay);\n\n React.useEffect(() => {\n let timeout: number;\n\n if (delay) {\n timeout = window.setTimeout(() => setVisibility(true), delay);\n }\n\n return () => {\n if (timeout) {\n clearTimeout(timeout);\n }\n };\n }, [delay]);\n\n if (!visible) {\n return null;\n }\n\n const className = cn('inline-flex flex-col relative items-center', otherProps.className);\n\n return (\n <div {...otherProps} className={className} data-taco=\"spinner\" ref={ref}>\n <svg\n className=\"h-10 w-10 animate-[spinnerRotation_2s_linear_infinite]\"\n viewBox=\"0 0 100 100\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"50\" cy=\"50\" r=\"45\"></circle>\n </svg>\n {label && <span className=\"mt-4\">{label}</span>}\n </div>\n );\n});\n"],"names":["Spinner","React","forwardRef","props","ref","delay","label","otherProps","visible","setVisibility","useState","useEffect","timeout","window","setTimeout","clearTimeout","className","cn","viewBox","xmlns","cx","cy","r"],"mappings":";;;MAcaA,OAAO,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,OAAT,CAAiBG,KAAjB,EAAsCC,GAAtC;EACpC,MAAM;IAAEC,KAAK,GAAG,GAAV;IAAeC,KAAf;IAAsB,GAAGC;MAAeJ,KAA9C;EACA,MAAM,CAACK,OAAD,EAAUC,aAAV,IAA2BR,cAAK,CAACS,QAAN,CAAe,CAACL,KAAhB,CAAjC;EAEAJ,cAAK,CAACU,SAAN,CAAgB;IACZ,IAAIC,OAAJ;;IAEA,IAAIP,KAAJ,EAAW;MACPO,OAAO,GAAGC,MAAM,CAACC,UAAP,CAAkB,MAAML,aAAa,CAAC,IAAD,CAArC,EAA6CJ,KAA7C,CAAV;;;IAGJ,OAAO;MACH,IAAIO,OAAJ,EAAa;QACTG,YAAY,CAACH,OAAD,CAAZ;;KAFR;GAPJ,EAYG,CAACP,KAAD,CAZH;;EAcA,IAAI,CAACG,OAAL,EAAc;IACV,OAAO,IAAP;;;EAGJ,MAAMQ,SAAS,GAAGC,EAAE,CAAC,4CAAD,EAA+CV,UAAU,CAACS,SAA1D,CAApB;EAEA,OACIf,4BAAA,MAAA,oBAASM;IAAYS,SAAS,EAAEA;iBAAqB;IAAUZ,GAAG,EAAEA;IAApE,EACIH,4BAAA,MAAA;IACIe,SAAS,EAAC;IACVE,OAAO,EAAC;IACRC,KAAK,EAAC;GAHV,EAIIlB,4BAAA,SAAA;IAAQmB,EAAE,EAAC;IAAKC,EAAE,EAAC;IAAKC,CAAC,EAAC;GAA1B,CAJJ,CADJ,EAOKhB,KAAK,IAAIL,4BAAA,OAAA;IAAMe,SAAS,EAAC;GAAhB,EAAwBV,KAAxB,CAPd,CADJ;AAWH,CAnCsB;;;;"}
@@ -1,20 +1,19 @@
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 { Root, Thumb } from '@radix-ui/react-switch';
5
4
 
6
- var _excluded = ["label", "onChange"];
7
- var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
8
- var label = props.label,
9
- onChange = props.onChange,
10
- otherProps = _objectWithoutPropertiesLoose(props, _excluded);
11
-
12
- var className = cn('group h-5 w-9 flex rounded-full inline-flex', {
5
+ const Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
6
+ const {
7
+ label,
8
+ onChange,
9
+ ...otherProps
10
+ } = props;
11
+ const className = cn('group h-5 w-9 flex rounded-full inline-flex', {
13
12
  'mr-2': !!label,
14
13
  'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus': !props.disabled,
15
14
  'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled
16
15
  }, props.className);
17
- var element = createElement(Root, Object.assign({}, otherProps, {
16
+ const element = createElement(Root, Object.assign({}, otherProps, {
18
17
  className: className,
19
18
  onCheckedChange: onChange,
20
19
  ref: ref
@@ -23,7 +22,7 @@ var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
23
22
  }));
24
23
 
25
24
  if (label) {
26
- var labelClassName = cn('flex items-center cursor-pointer', {
25
+ const labelClassName = cn('flex items-center cursor-pointer', {
27
26
  'cursor-not-allowed text-grey-dark': props.disabled
28
27
  });
29
28
  return createElement("label", {
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\n\ntype SwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n /** Label for the switch */\n label?: React.ReactNode;\n /* Whether user input is required */\n required?: boolean;\n};\n\ninterface UncontrolledSwitchProps extends SwitchBaseProps {\n checked?: never;\n onChange?: never;\n /* The default checked state (uncontrolled) */\n defaultChecked?: boolean;\n}\n\ninterface ControlledSwitchProps extends SwitchBaseProps {\n defaultChecked?: never;\n /* The current checked state (controlled) */\n checked: boolean;\n /* Handler called when the checked state changes */\n onChange: (checked: boolean) => void;\n}\n\nexport type SwitchProps = UncontrolledSwitchProps | ControlledSwitchProps;\n\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLButtonElement>) {\n const { label, onChange, ...otherProps } = props;\n\n const className = cn(\n 'group h-5 w-9 flex rounded-full inline-flex',\n {\n 'mr-2': !!label,\n 'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus':\n !props.disabled,\n 'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled,\n },\n props.className\n );\n\n const element = (\n <PrimitiveSwitch.Root {...otherProps} className={className} onCheckedChange={onChange} ref={ref}>\n <PrimitiveSwitch.Thumb className=\"'will-change-transform group-aria-checked:translate-x-[1.1rem] mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50\" />\n </PrimitiveSwitch.Root>\n );\n\n if (label) {\n const labelClassName = cn('flex items-center cursor-pointer', {\n 'cursor-not-allowed text-grey-dark': props.disabled,\n });\n\n return (\n <label className={labelClassName}>\n {element}\n {label}\n </label>\n );\n }\n\n return element;\n});\n"],"names":["Switch","React","props","ref","label","onChange","otherProps","className","cn","disabled","element","PrimitiveSwitch","onCheckedChange","labelClassName"],"mappings":";;;;;;IA4BaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CAAgBE,KAAhB,EAAoCC,GAApC;EACnC,IAAQC,KAAR,GAA2CF,KAA3C,CAAQE,KAAR;MAAeC,QAAf,GAA2CH,KAA3C,CAAeG,QAAf;MAA4BC,UAA5B,iCAA2CJ,KAA3C;;EAEA,IAAMK,SAAS,GAAGC,EAAE,CAChB,6CADgB,EAEhB;IACI,QAAQ,CAAC,CAACJ,KADd;IAEI,0GACI,CAACF,KAAK,CAACO,QAHf;IAII,+DAA+DP,KAAK,CAACO;GANzD,EAQhBP,KAAK,CAACK,SARU,CAApB;EAWA,IAAMG,OAAO,GACTT,aAAA,CAACU,IAAD,oBAA0BL;IAAYC,SAAS,EAAEA;IAAWK,eAAe,EAAEP;IAAUF,GAAG,EAAEA;IAA5F,EACIF,aAAA,CAACU,KAAD;IAAuBJ,SAAS,EAAC;GAAjC,CADJ,CADJ;;EAMA,IAAIH,KAAJ,EAAW;IACP,IAAMS,cAAc,GAAGL,EAAE,CAAC,kCAAD,EAAqC;MAC1D,qCAAqCN,KAAK,CAACO;KADtB,CAAzB;IAIA,OACIR,aAAA,QAAA;MAAOM,SAAS,EAAEM;KAAlB,EACKH,OADL,EAEKN,KAFL,CADJ;;;EAQJ,OAAOM,OAAP;AACH,CAlCqB;;;;"}
1
+ {"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\n\ntype SwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n /** Label for the switch */\n label?: React.ReactNode;\n /* Whether user input is required */\n required?: boolean;\n};\n\ninterface UncontrolledSwitchProps extends SwitchBaseProps {\n checked?: never;\n onChange?: never;\n /* The default checked state (uncontrolled) */\n defaultChecked?: boolean;\n}\n\ninterface ControlledSwitchProps extends SwitchBaseProps {\n defaultChecked?: never;\n /* The current checked state (controlled) */\n checked: boolean;\n /* Handler called when the checked state changes */\n onChange: (checked: boolean) => void;\n}\n\nexport type SwitchProps = UncontrolledSwitchProps | ControlledSwitchProps;\n\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLButtonElement>) {\n const { label, onChange, ...otherProps } = props;\n\n const className = cn(\n 'group h-5 w-9 flex rounded-full inline-flex',\n {\n 'mr-2': !!label,\n 'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus':\n !props.disabled,\n 'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled,\n },\n props.className\n );\n\n const element = (\n <PrimitiveSwitch.Root {...otherProps} className={className} onCheckedChange={onChange} ref={ref}>\n <PrimitiveSwitch.Thumb className=\"'will-change-transform group-aria-checked:translate-x-[1.1rem] mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50\" />\n </PrimitiveSwitch.Root>\n );\n\n if (label) {\n const labelClassName = cn('flex items-center cursor-pointer', {\n 'cursor-not-allowed text-grey-dark': props.disabled,\n });\n\n return (\n <label className={labelClassName}>\n {element}\n {label}\n </label>\n );\n }\n\n return element;\n});\n"],"names":["Switch","React","props","ref","label","onChange","otherProps","className","cn","disabled","element","PrimitiveSwitch","onCheckedChange","labelClassName"],"mappings":";;;;MA4BaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CAAgBE,KAAhB,EAAoCC,GAApC;EACnC,MAAM;IAAEC,KAAF;IAASC,QAAT;IAAmB,GAAGC;MAAeJ,KAA3C;EAEA,MAAMK,SAAS,GAAGC,EAAE,CAChB,6CADgB,EAEhB;IACI,QAAQ,CAAC,CAACJ,KADd;IAEI,0GACI,CAACF,KAAK,CAACO,QAHf;IAII,+DAA+DP,KAAK,CAACO;GANzD,EAQhBP,KAAK,CAACK,SARU,CAApB;EAWA,MAAMG,OAAO,GACTT,aAAA,CAACU,IAAD,oBAA0BL;IAAYC,SAAS,EAAEA;IAAWK,eAAe,EAAEP;IAAUF,GAAG,EAAEA;IAA5F,EACIF,aAAA,CAACU,KAAD;IAAuBJ,SAAS,EAAC;GAAjC,CADJ,CADJ;;EAMA,IAAIH,KAAJ,EAAW;IACP,MAAMS,cAAc,GAAGL,EAAE,CAAC,kCAAD,EAAqC;MAC1D,qCAAqCN,KAAK,CAACO;KADtB,CAAzB;IAIA,OACIR,aAAA,QAAA;MAAOM,SAAS,EAAEM;KAAlB,EACKH,OADL,EAEKN,KAFL,CADJ;;;EAQJ,OAAOM,OAAP;AACH,CAlCqB;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"BaseTable.js","sources":["../../../../../src/components/Table/components/BaseTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { HeaderGroup } from 'react-table';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { InternalBaseTable } from '../types';\nimport './Table.css';\nimport { Column } from '../util/renderColumn';\n\nexport const DefaultEmptyState = (): React.ReactNode => null;\n\nexport const BaseTable = React.forwardRef(function BaseTable(props: InternalBaseTable, ref: React.Ref<HTMLDivElement>) {\n const tableRef = useProxiedRef<HTMLDivElement>(ref);\n const { autoFocus, children, disableSorting: _, headerGroups, headerRef, bodyRef, ...otherProps } = props;\n\n React.useEffect(() => {\n if (autoFocus && tableRef.current) {\n tableRef.current.focus();\n }\n }, []);\n\n const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);\n\n return (\n <div {...otherProps} role=\"table\" className={className} ref={tableRef}>\n <div role=\"rowgroup\" className=\"yt-table__head\" ref={headerRef}>\n {headerGroups?.map((headerGroup: HeaderGroup<object>, index: number) => (\n <div\n key={index}\n role=\"row\"\n className=\"border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold\"\n >\n {headerGroup.headers.map((cell: any, index: number) => (\n <Column key={index} index={index} cell={cell} />\n ))}\n </div>\n ))}\n </div>\n\n <div role=\"rowgroup\" className=\"yt-table__body\" ref={bodyRef}>\n {children}\n </div>\n </div>\n );\n});\n"],"names":["DefaultEmptyState","BaseTable","React","forwardRef","props","ref","tableRef","useProxiedRef","autoFocus","children","disableSorting","_","headerGroups","headerRef","bodyRef","otherProps","useEffect","current","focus","className","cn","role","map","headerGroup","index","key","headers","cell","Column"],"mappings":";;;;;MAQaA,iBAAiB,GAAG,MAAuB;MAE3CC,SAAS,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,SAAT,CAAmBG,KAAnB,EAA6CC,GAA7C;EACtC,MAAMC,QAAQ,GAAGC,aAAa,CAAiBF,GAAjB,CAA9B;EACA,MAAM;IAAEG,SAAF;IAAaC,QAAb;IAAuBC,cAAc,EAAEC,CAAvC;IAA0CC,YAA1C;IAAwDC,SAAxD;IAAmEC,OAAnE;IAA4E,GAAGC;MAAeX,KAApG;EAEAF,cAAK,CAACc,SAAN,CAAgB;IACZ,IAAIR,SAAS,IAAIF,QAAQ,CAACW,OAA1B,EAAmC;MAC/BX,QAAQ,CAACW,OAAT,CAAiBC,KAAjB;;GAFR,EAIG,EAJH;EAMA,MAAMC,SAAS,GAAGC,EAAE,CAAC,wDAAD,EAA2DhB,KAAK,CAACe,SAAjE,CAApB;EAEA,OACIjB,4BAAA,MAAA,oBAASa;IAAYM,IAAI,EAAC;IAAQF,SAAS,EAAEA;IAAWd,GAAG,EAAEC;IAA7D,EACIJ,4BAAA,MAAA;IAAKmB,IAAI,EAAC;IAAWF,SAAS,EAAC;IAAiBd,GAAG,EAAEQ;GAArD,EACKD,YADL,aACKA,YADL,uBACKA,YAAY,CAAEU,GAAd,CAAkB,CAACC,WAAD,EAAmCC,KAAnC,KACftB,4BAAA,MAAA;IACIuB,GAAG,EAAED;IACLH,IAAI,EAAC;IACLF,SAAS,EAAC;GAHd,EAKKI,WAAW,CAACG,OAAZ,CAAoBJ,GAApB,CAAwB,CAACK,IAAD,EAAYH,KAAZ,KACrBtB,4BAAA,CAAC0B,MAAD;IAAQH,GAAG,EAAED;IAAOA,KAAK,EAAEA;IAAOG,IAAI,EAAEA;GAAxC,CADH,CALL,CADH,CADL,CADJ,EAeIzB,4BAAA,MAAA;IAAKmB,IAAI,EAAC;IAAWF,SAAS,EAAC;IAAiBd,GAAG,EAAES;GAArD,EACKL,QADL,CAfJ,CADJ;AAqBH,CAjCwB;;;;"}
1
+ {"version":3,"file":"BaseTable.js","sources":["../../../../../src/components/Table/components/BaseTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { HeaderGroup } from 'react-table';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { InternalBaseTable } from '../types';\nimport './Table.css';\nimport { Column } from '../util/renderColumn';\n\nexport const DefaultEmptyState = (): React.ReactNode => null;\n\nexport const BaseTable = React.forwardRef(function BaseTable(props: InternalBaseTable, ref: React.Ref<HTMLDivElement>) {\n const tableRef = useProxiedRef<HTMLDivElement>(ref);\n const { autoFocus, children, disableSorting: _, headerGroups, headerRef, bodyRef, ...otherProps } = props;\n\n React.useEffect(() => {\n if (autoFocus && tableRef.current) {\n tableRef.current.focus();\n }\n }, []);\n\n const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);\n\n return (\n <div {...otherProps} role=\"table\" className={className} ref={tableRef}>\n <div role=\"rowgroup\" className=\"yt-table__head\" ref={headerRef}>\n {headerGroups?.map((headerGroup: HeaderGroup<object>, index: number) => (\n <div\n key={index}\n role=\"row\"\n className=\"border-grey-light flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold\">\n {headerGroup.headers.map((cell: any, index: number) => (\n <Column key={index} index={index} cell={cell} />\n ))}\n </div>\n ))}\n </div>\n\n <div role=\"rowgroup\" className=\"yt-table__body\" ref={bodyRef}>\n {children}\n </div>\n </div>\n );\n});\n"],"names":["DefaultEmptyState","BaseTable","React","forwardRef","props","ref","tableRef","useProxiedRef","autoFocus","children","disableSorting","_","headerGroups","headerRef","bodyRef","otherProps","useEffect","current","focus","className","cn","role","map","headerGroup","index","key","headers","cell","Column"],"mappings":";;;;;MAQaA,iBAAiB,GAAG,MAAuB;MAE3CC,SAAS,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,SAAT,CAAmBG,KAAnB,EAA6CC,GAA7C;EACtC,MAAMC,QAAQ,GAAGC,aAAa,CAAiBF,GAAjB,CAA9B;EACA,MAAM;IAAEG,SAAF;IAAaC,QAAb;IAAuBC,cAAc,EAAEC,CAAvC;IAA0CC,YAA1C;IAAwDC,SAAxD;IAAmEC,OAAnE;IAA4E,GAAGC;MAAeX,KAApG;EAEAF,cAAK,CAACc,SAAN,CAAgB;IACZ,IAAIR,SAAS,IAAIF,QAAQ,CAACW,OAA1B,EAAmC;MAC/BX,QAAQ,CAACW,OAAT,CAAiBC,KAAjB;;GAFR,EAIG,EAJH;EAMA,MAAMC,SAAS,GAAGC,EAAE,CAAC,wDAAD,EAA2DhB,KAAK,CAACe,SAAjE,CAApB;EAEA,OACIjB,4BAAA,MAAA,oBAASa;IAAYM,IAAI,EAAC;IAAQF,SAAS,EAAEA;IAAWd,GAAG,EAAEC;IAA7D,EACIJ,4BAAA,MAAA;IAAKmB,IAAI,EAAC;IAAWF,SAAS,EAAC;IAAiBd,GAAG,EAAEQ;GAArD,EACKD,YADL,aACKA,YADL,uBACKA,YAAY,CAAEU,GAAd,CAAkB,CAACC,WAAD,EAAmCC,KAAnC,KACftB,4BAAA,MAAA;IACIuB,GAAG,EAAED;IACLH,IAAI,EAAC;IACLF,SAAS,EAAC;GAHd,EAIKI,WAAW,CAACG,OAAZ,CAAoBJ,GAApB,CAAwB,CAACK,IAAD,EAAYH,KAAZ,KACrBtB,4BAAA,CAAC0B,MAAD;IAAQH,GAAG,EAAED;IAAOA,KAAK,EAAEA;IAAOG,IAAI,EAAEA;GAAxC,CADH,CAJL,CADH,CADL,CADJ,EAcIzB,4BAAA,MAAA;IAAKmB,IAAI,EAAC;IAAWF,SAAS,EAAC;IAAiBd,GAAG,EAAES;GAArD,EACKL,QADL,CAdJ,CADJ;AAoBH,CAhCwB;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"WindowedTable.js","sources":["../../../../../src/components/Table/components/WindowedTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { PluginHook } from 'react-table';\nimport { areEqual, VariableSizeList } from 'react-window';\nimport InfiniteLoader from 'react-window-infinite-loader';\nimport { TableProps, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { useBoundingClientRectListener } from '../../../utils/hooks/useBoundingClientRectListener';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\nimport { useLocalization } from '../../Provider/Provider';\n\nconst ROW_HEIGHT = 40;\n\nconst VariableRow = React.memo(({ data, index, style: { height: _, ...style } }: any) => {\n const { texts } = useLocalization();\n const { rows, setRowHeight, rowProps, tableProps, instance, prepareRow, rowHeights } = data;\n const row = rows[index];\n const ref = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n if (ref?.current) {\n setRowHeight(index, ref.current.getBoundingClientRect().height);\n }\n }, [rowHeights[index]]);\n\n if (row) {\n prepareRow(row, index);\n\n return (\n <Row\n {...rowProps}\n style={style}\n key={index}\n index={index}\n row={row}\n instance={instance}\n headerGroups={tableProps.headerGroups}\n setRowHeight={setRowHeight}\n ref={ref}\n />\n );\n }\n\n return (\n <div className=\"yt-table__row\" role=\"row\" style={style}>\n <div className=\"yt-table__cell text-grey-dark\">{texts.table.loading}</div>\n </div>\n );\n}, areEqual);\n\nconst getAverageRowHeight = (rowHeights = {}) => {\n const keys = Object.keys(rowHeights);\n const estimatedHeight = keys.reduce((p, i) => p + rowHeights[i], 0);\n return estimatedHeight / keys.length;\n};\n\nexport const WindowedTable = React.forwardRef(function WindowedTable<T>(\n props: TableProps<T> & { plugins: PluginHook<{}>[] },\n ref: React.Ref<TableRef>\n) {\n const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n const { emptyStateRenderer = DefaultEmptyState, length, loadMore, ...otherProps } = props;\n const { rowProps, tableProps, rows, prepareRow, instance, state } = useTable<T>({ ...otherProps, windowed: true }, tableRef);\n\n // determine heights for windowing calculations\n const headerRef = React.useRef<HTMLDivElement>(null);\n const [rowsRef, setRowsRef] = React.useState<any>(null);\n const tableDimensions = useBoundingClientRectListener(tableRef);\n const headerDimensions = useBoundingClientRectListener(headerRef);\n const height = tableDimensions && headerDimensions ? tableDimensions.height - headerDimensions.height : null;\n\n // variable row height calculations\n const estimatedRowHeight = rowProps.rowHeight || ROW_HEIGHT;\n const rowHeights = React.useRef<Record<string, number>>({});\n const setRowHeight = React.useCallback((index: number, size: number) => {\n if (rowHeights.current[index] !== size) {\n rowHeights.current = {\n ...rowHeights.current,\n [index]: size,\n };\n\n if (rowsRef) {\n rowsRef.resetAfterIndex(0);\n }\n }\n }, []);\n const getRowHeight = React.useCallback(index => rowHeights.current[index] || estimatedRowHeight, []);\n\n React.useEffect(() => {\n if (rowsRef && rowProps.activeIndex !== undefined) {\n rowsRef.scrollToItem(rowProps.activeIndex, 'start');\n }\n }, [rowsRef, rowProps.activeIndex]);\n\n // trigger recalculation of variable row heights if the data changes\n React.useEffect(() => {\n rowHeights.current = {};\n\n if (rowsRef) {\n rowsRef.resetAfterIndex(0);\n }\n }, [rows.length]);\n\n const contentHeight = estimatedRowHeight * props.data.length || 0;\n const isScrollbarVisible = height !== null ? contentHeight > height : false;\n\n const className = cn(tableProps.className, 'yt-table--windowed', { 'table-with-scrollbar': isScrollbarVisible });\n\n let list;\n\n const itemData = {\n rows,\n setRowHeight,\n rowProps,\n tableProps,\n instance,\n prepareRow,\n state,\n rowHeights: rowHeights.current,\n };\n\n if (height && rows.length) {\n const listProps = {\n height,\n itemData,\n estimatedItemSize: getAverageRowHeight(rowHeights.current),\n itemSize: getRowHeight,\n width: '100%',\n };\n\n if (loadMore && length) {\n const isLoaded = (index: number) => !!rows[index];\n\n list = (\n <InfiniteLoader isItemLoaded={isLoaded} itemCount={length} loadMoreItems={loadMore as any}>\n {({ onItemsRendered, ref }: any) => (\n <VariableSizeList\n {...listProps}\n itemCount={length}\n onItemsRendered={onItemsRendered}\n ref={list => {\n ref(list);\n setRowsRef(list);\n }}\n >\n {VariableRow}\n </VariableSizeList>\n )}\n </InfiniteLoader>\n );\n } else {\n list = (\n <VariableSizeList\n {...listProps}\n itemCount={rows.length}\n ref={ref => {\n setRowsRef(ref);\n }}\n >\n {VariableRow}\n </VariableSizeList>\n );\n }\n }\n\n return (\n <BaseTable {...tableProps} className={className} headerRef={headerRef} ref={tableRef}>\n {list ? list : emptyStateRenderer()}\n </BaseTable>\n );\n}) as ForwardedGenericTableWithStatics;\n\nWindowedTable.Column = () => null;\nWindowedTable.Group = () => null;\n"],"names":["ROW_HEIGHT","VariableRow","React","memo","data","index","style","height","_","texts","useLocalization","rows","setRowHeight","rowProps","tableProps","instance","prepareRow","rowHeights","row","ref","useRef","useEffect","current","getBoundingClientRect","Row","key","headerGroups","className","role","table","loading","areEqual","getAverageRowHeight","keys","Object","estimatedHeight","reduce","p","i","length","WindowedTable","forwardRef","props","tableRef","useProxiedRef","emptyStateRenderer","DefaultEmptyState","loadMore","otherProps","state","useTable","windowed","headerRef","rowsRef","setRowsRef","useState","tableDimensions","useBoundingClientRectListener","headerDimensions","estimatedRowHeight","rowHeight","useCallback","size","resetAfterIndex","getRowHeight","activeIndex","undefined","scrollToItem","contentHeight","isScrollbarVisible","cn","list","itemData","listProps","estimatedItemSize","itemSize","width","isLoaded","InfiniteLoader","isItemLoaded","itemCount","loadMoreItems","onItemsRendered","VariableSizeList","BaseTable","Column","Group"],"mappings":"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"}
1
+ {"version":3,"file":"WindowedTable.js","sources":["../../../../../src/components/Table/components/WindowedTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { PluginHook } from 'react-table';\nimport { areEqual, VariableSizeList } from 'react-window';\nimport InfiniteLoader from 'react-window-infinite-loader';\nimport { TableProps, ForwardedGenericTableWithStatics, TableRef } from '../types';\nimport { useTable } from '../hooks/useTable';\nimport { useBoundingClientRectListener } from '../../../utils/hooks/useBoundingClientRectListener';\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\nimport { Row } from '../util/renderRow';\nimport { DefaultEmptyState, BaseTable } from './BaseTable';\nimport { useLocalization } from '../../Provider/Provider';\n\nconst ROW_HEIGHT = 40;\n\nconst VariableRow = React.memo(({ data, index, style: { height: _, ...style } }: any) => {\n const { texts } = useLocalization();\n const { rows, setRowHeight, rowProps, tableProps, instance, prepareRow, rowHeights } = data;\n const row = rows[index];\n const ref = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n if (ref?.current) {\n setRowHeight(index, ref.current.getBoundingClientRect().height);\n }\n }, [rowHeights[index]]);\n\n if (row) {\n prepareRow(row, index);\n\n return (\n <Row\n {...rowProps}\n style={style}\n key={index}\n index={index}\n row={row}\n instance={instance}\n headerGroups={tableProps.headerGroups}\n setRowHeight={setRowHeight}\n ref={ref}\n />\n );\n }\n\n return (\n <div className=\"yt-table__row\" role=\"row\" style={style}>\n <div className=\"yt-table__cell text-grey-dark\">{texts.table.loading}</div>\n </div>\n );\n}, areEqual);\n\nconst getAverageRowHeight = (rowHeights = {}) => {\n const keys = Object.keys(rowHeights);\n const estimatedHeight = keys.reduce((p, i) => p + rowHeights[i], 0);\n return estimatedHeight / keys.length;\n};\n\nexport const WindowedTable = React.forwardRef(function WindowedTable<T>(\n props: TableProps<T> & { plugins: PluginHook<{}>[] },\n ref: React.Ref<TableRef>\n) {\n const tableRef: any = useProxiedRef<HTMLDivElement>(ref);\n const { emptyStateRenderer = DefaultEmptyState, length, loadMore, ...otherProps } = props;\n const { rowProps, tableProps, rows, prepareRow, instance, state } = useTable<T>({ ...otherProps, windowed: true }, tableRef);\n\n // determine heights for windowing calculations\n const headerRef = React.useRef<HTMLDivElement>(null);\n const [rowsRef, setRowsRef] = React.useState<any>(null);\n const tableDimensions = useBoundingClientRectListener(tableRef);\n const headerDimensions = useBoundingClientRectListener(headerRef);\n const height = tableDimensions && headerDimensions ? tableDimensions.height - headerDimensions.height : null;\n\n // variable row height calculations\n const estimatedRowHeight = rowProps.rowHeight || ROW_HEIGHT;\n const rowHeights = React.useRef<Record<string, number>>({});\n const setRowHeight = React.useCallback((index: number, size: number) => {\n if (rowHeights.current[index] !== size) {\n rowHeights.current = {\n ...rowHeights.current,\n [index]: size,\n };\n\n if (rowsRef) {\n rowsRef.resetAfterIndex(0);\n }\n }\n }, []);\n const getRowHeight = React.useCallback(index => rowHeights.current[index] || estimatedRowHeight, []);\n\n React.useEffect(() => {\n if (rowsRef && rowProps.activeIndex !== undefined) {\n rowsRef.scrollToItem(rowProps.activeIndex, 'start');\n }\n }, [rowsRef, rowProps.activeIndex]);\n\n // trigger recalculation of variable row heights if the data changes\n React.useEffect(() => {\n rowHeights.current = {};\n\n if (rowsRef) {\n rowsRef.resetAfterIndex(0);\n }\n }, [rows.length]);\n\n const contentHeight = estimatedRowHeight * props.data.length || 0;\n const isScrollbarVisible = height !== null ? contentHeight > height : false;\n\n const className = cn(tableProps.className, 'yt-table--windowed', { 'table-with-scrollbar': isScrollbarVisible });\n\n let list;\n\n const itemData = {\n rows,\n setRowHeight,\n rowProps,\n tableProps,\n instance,\n prepareRow,\n state,\n rowHeights: rowHeights.current,\n };\n\n if (height && rows.length) {\n const listProps = {\n height,\n itemData,\n estimatedItemSize: getAverageRowHeight(rowHeights.current),\n itemSize: getRowHeight,\n width: '100%',\n };\n\n if (loadMore && length) {\n const isLoaded = (index: number) => !!rows[index];\n\n list = (\n <InfiniteLoader isItemLoaded={isLoaded} itemCount={length} loadMoreItems={loadMore as any}>\n {({ onItemsRendered, ref }: any) => (\n <VariableSizeList\n {...listProps}\n itemCount={length}\n onItemsRendered={onItemsRendered}\n ref={list => {\n ref(list);\n setRowsRef(list);\n }}>\n {VariableRow}\n </VariableSizeList>\n )}\n </InfiniteLoader>\n );\n } else {\n list = (\n <VariableSizeList\n {...listProps}\n itemCount={rows.length}\n ref={ref => {\n setRowsRef(ref);\n }}>\n {VariableRow}\n </VariableSizeList>\n );\n }\n }\n\n return (\n <BaseTable {...tableProps} className={className} headerRef={headerRef} ref={tableRef}>\n {list ? list : emptyStateRenderer()}\n </BaseTable>\n );\n}) as ForwardedGenericTableWithStatics;\n\nWindowedTable.Column = () => null;\nWindowedTable.Group = () => null;\n"],"names":["ROW_HEIGHT","VariableRow","React","memo","data","index","style","height","_","texts","useLocalization","rows","setRowHeight","rowProps","tableProps","instance","prepareRow","rowHeights","row","ref","useRef","useEffect","current","getBoundingClientRect","Row","key","headerGroups","className","role","table","loading","areEqual","getAverageRowHeight","keys","Object","estimatedHeight","reduce","p","i","length","WindowedTable","forwardRef","props","tableRef","useProxiedRef","emptyStateRenderer","DefaultEmptyState","loadMore","otherProps","state","useTable","windowed","headerRef","rowsRef","setRowsRef","useState","tableDimensions","useBoundingClientRectListener","headerDimensions","estimatedRowHeight","rowHeight","useCallback","size","resetAfterIndex","getRowHeight","activeIndex","undefined","scrollToItem","contentHeight","isScrollbarVisible","cn","list","itemData","listProps","estimatedItemSize","itemSize","width","isLoaded","InfiniteLoader","isItemLoaded","itemCount","loadMoreItems","onItemsRendered","VariableSizeList","BaseTable","Column","Group"],"mappings":"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"}
@@ -1,6 +1,5 @@
1
1
  import React__default from 'react';
2
2
  import { IconButton } from '../../../IconButton/IconButton.js';
3
- import keycode from 'keycode';
4
3
  import { Menu } from '../../../Menu/Menu.js';
5
4
  import { sanitizeRowProps } from '../../util.js';
6
5
  import { InView } from 'react-intersection-observer';
@@ -16,7 +15,7 @@ const getActions = (actions, row = undefined) => {
16
15
  const secondary = [];
17
16
 
18
17
  if (actions) {
19
- let visibleActions = actions.filter(x => !!x);
18
+ let visibleActions = actions.filter(x => !!x && typeof x !== 'boolean');
20
19
 
21
20
  if (row) {
22
21
  visibleActions = visibleActions.filter(action => {
@@ -86,7 +85,7 @@ const EditModeActions = () => {
86
85
  const listener = event => {
87
86
  var _event$target, _event$target$form;
88
87
 
89
- if (event.keyCode === keycode('escape') && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$form = _event$target.form) !== null && _event$target$form !== void 0 && _event$target$form.reset) {
88
+ if (event.key === 'Escape' && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$form = _event$target.form) !== null && _event$target$form !== void 0 && _event$target$form.reset) {
90
89
  event.preventDefault();
91
90
  event.target.form.reset();
92
91
  }