@economic/taco 1.1.4 → 1.1.5-alpha.102

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 (160) hide show
  1. package/README.md +82 -82
  2. package/dist/components/Icon/components/LogOut.d.ts +3 -0
  3. package/dist/components/Icon/components/Menu.d.ts +3 -0
  4. package/dist/components/Icon/components/Numbers.d.ts +3 -0
  5. package/dist/components/Icon/components/Profile.d.ts +3 -0
  6. package/dist/components/Icon/components/index.d.ts +1 -1
  7. package/dist/components/Input/Input.d.ts +1 -1
  8. package/dist/components/Menu/Menu.d.ts +2 -2
  9. package/dist/components/Menu/components/Item.d.ts +1 -1
  10. package/dist/components/Menu/components/Link.d.ts +1 -1
  11. package/dist/components/Tour/Tour.d.ts +2 -0
  12. package/dist/esm/components/Banner/util.js +1 -1
  13. package/dist/esm/components/Banner/util.js.map +1 -1
  14. package/dist/esm/components/Button/util.js +18 -23
  15. package/dist/esm/components/Button/util.js.map +1 -1
  16. package/dist/esm/components/Card/Card.js +3 -0
  17. package/dist/esm/components/Card/Card.js.map +1 -1
  18. package/dist/esm/components/Combobox/Combobox.js +1 -0
  19. package/dist/esm/components/Combobox/Combobox.js.map +1 -1
  20. package/dist/esm/components/Combobox/useCombobox.js +67 -87
  21. package/dist/esm/components/Combobox/useCombobox.js.map +1 -1
  22. package/dist/esm/components/Datepicker/useDatepicker.js +27 -34
  23. package/dist/esm/components/Datepicker/useDatepicker.js.map +1 -1
  24. package/dist/esm/components/Dialog/Context.js +4 -4
  25. package/dist/esm/components/Dialog/Context.js.map +1 -1
  26. package/dist/esm/components/Dialog/components/Content.js +39 -44
  27. package/dist/esm/components/Dialog/components/Content.js.map +1 -1
  28. package/dist/esm/components/Dialog/components/Drawer.js +3 -3
  29. package/dist/esm/components/Dialog/components/Drawer.js.map +1 -1
  30. package/dist/esm/components/Dialog/components/Extra.js +2 -2
  31. package/dist/esm/components/Dialog/components/Extra.js.map +1 -1
  32. package/dist/esm/components/Dialog/components/Trigger.js +3 -3
  33. package/dist/esm/components/Dialog/components/Trigger.js.map +1 -1
  34. package/dist/esm/components/Hanger/Hanger.js +1 -1
  35. package/dist/esm/components/Hanger/Hanger.js.map +1 -1
  36. package/dist/esm/components/Icon/components/LogOut.js +20 -0
  37. package/dist/esm/components/Icon/components/LogOut.js.map +1 -0
  38. package/dist/esm/components/Icon/components/Menu.js +18 -0
  39. package/dist/esm/components/Icon/components/Menu.js.map +1 -0
  40. package/dist/esm/components/Icon/components/Numbers.js +18 -0
  41. package/dist/esm/components/Icon/components/Numbers.js.map +1 -0
  42. package/dist/esm/components/Icon/components/Profile.js +20 -0
  43. package/dist/esm/components/Icon/components/Profile.js.map +1 -0
  44. package/dist/esm/components/Icon/components/index.js +12 -4
  45. package/dist/esm/components/Icon/components/index.js.map +1 -1
  46. package/dist/esm/components/Input/util.js +2 -2
  47. package/dist/esm/components/Input/util.js.map +1 -1
  48. package/dist/esm/components/Listbox/ScrollableList.js +64 -83
  49. package/dist/esm/components/Listbox/ScrollableList.js.map +1 -1
  50. package/dist/esm/components/Listbox/useListbox.js +51 -60
  51. package/dist/esm/components/Listbox/useListbox.js.map +1 -1
  52. package/dist/esm/components/Listbox/useMultiListbox.js +64 -91
  53. package/dist/esm/components/Listbox/useMultiListbox.js.map +1 -1
  54. package/dist/esm/components/Listbox/useTypeahead.js +10 -9
  55. package/dist/esm/components/Listbox/useTypeahead.js.map +1 -1
  56. package/dist/esm/components/Listbox/util.js +48 -85
  57. package/dist/esm/components/Listbox/util.js.map +1 -1
  58. package/dist/esm/components/Menu/Context.js +2 -2
  59. package/dist/esm/components/Menu/Context.js.map +1 -1
  60. package/dist/esm/components/Menu/components/Checkbox.js +9 -10
  61. package/dist/esm/components/Menu/components/Checkbox.js.map +1 -1
  62. package/dist/esm/components/Menu/components/Content.js +9 -11
  63. package/dist/esm/components/Menu/components/Content.js.map +1 -1
  64. package/dist/esm/components/Menu/components/Header.js +3 -3
  65. package/dist/esm/components/Menu/components/Header.js.map +1 -1
  66. package/dist/esm/components/Menu/components/Item.js +30 -31
  67. package/dist/esm/components/Menu/components/Item.js.map +1 -1
  68. package/dist/esm/components/Menu/components/Link.js +10 -11
  69. package/dist/esm/components/Menu/components/Link.js.map +1 -1
  70. package/dist/esm/components/Menu/components/RadioGroup.js +17 -19
  71. package/dist/esm/components/Menu/components/RadioGroup.js.map +1 -1
  72. package/dist/esm/components/Menu/components/Separator.js +1 -1
  73. package/dist/esm/components/Menu/components/Separator.js.map +1 -1
  74. package/dist/esm/components/Menu/components/Trigger.js +4 -4
  75. package/dist/esm/components/Menu/components/Trigger.js.map +1 -1
  76. package/dist/esm/components/Pagination/PageNumbers.js +23 -28
  77. package/dist/esm/components/Pagination/PageNumbers.js.map +1 -1
  78. package/dist/esm/components/Pagination/usePagination.js +7 -21
  79. package/dist/esm/components/Pagination/usePagination.js.map +1 -1
  80. package/dist/esm/components/Pagination/usePaginationShortcuts.js +9 -9
  81. package/dist/esm/components/Pagination/usePaginationShortcuts.js.map +1 -1
  82. package/dist/esm/components/Popover/Popover.js +1 -1
  83. package/dist/esm/components/Popover/Popover.js.map +1 -1
  84. package/dist/esm/components/Popover/Primitives.js +7 -8
  85. package/dist/esm/components/Popover/Primitives.js.map +1 -1
  86. package/dist/esm/components/SearchInput/SearchInput.js +4 -1
  87. package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
  88. package/dist/esm/components/Select/useSelect.js +63 -81
  89. package/dist/esm/components/Select/useSelect.js.map +1 -1
  90. package/dist/esm/components/Table/components/BaseTable.js +23 -30
  91. package/dist/esm/components/Table/components/BaseTable.js.map +1 -1
  92. package/dist/esm/components/Table/components/PaginatedTable.js +3 -7
  93. package/dist/esm/components/Table/components/PaginatedTable.js.map +1 -1
  94. package/dist/esm/components/Table/components/Table.js +18 -25
  95. package/dist/esm/components/Table/components/Table.js.map +1 -1
  96. package/dist/esm/components/Table/components/WindowedTable.js +89 -109
  97. package/dist/esm/components/Table/components/WindowedTable.js.map +1 -1
  98. package/dist/esm/components/Table/hooks/plugins/useRowActions.js +122 -146
  99. package/dist/esm/components/Table/hooks/plugins/useRowActions.js.map +1 -1
  100. package/dist/esm/components/Table/hooks/plugins/useRowDraggable.js +57 -61
  101. package/dist/esm/components/Table/hooks/plugins/useRowDraggable.js.map +1 -1
  102. package/dist/esm/components/Table/hooks/plugins/useRowEditing.js +39 -36
  103. package/dist/esm/components/Table/hooks/plugins/useRowEditing.js.map +1 -1
  104. package/dist/esm/components/Table/hooks/plugins/useRowSelect.js +79 -89
  105. package/dist/esm/components/Table/hooks/plugins/useRowSelect.js.map +1 -1
  106. package/dist/esm/components/Table/hooks/useRowCreation.js +29 -64
  107. package/dist/esm/components/Table/hooks/useRowCreation.js.map +1 -1
  108. package/dist/esm/components/Table/hooks/useTable.js +119 -141
  109. package/dist/esm/components/Table/hooks/useTable.js.map +1 -1
  110. package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js +13 -16
  111. package/dist/esm/components/Table/hooks/useTableKeyboardNavigation.js.map +1 -1
  112. package/dist/esm/components/Table/util/renderColumn.js +10 -10
  113. package/dist/esm/components/Table/util/renderColumn.js.map +1 -1
  114. package/dist/esm/components/Table/util/renderRow.js +37 -46
  115. package/dist/esm/components/Table/util/renderRow.js.map +1 -1
  116. package/dist/esm/components/Table/util/rowIndexPath.js +14 -16
  117. package/dist/esm/components/Table/util/rowIndexPath.js.map +1 -1
  118. package/dist/esm/components/Table/util/sortTypes.js +23 -31
  119. package/dist/esm/components/Table/util/sortTypes.js.map +1 -1
  120. package/dist/esm/components/Table/util.js +29 -41
  121. package/dist/esm/components/Table/util.js.map +1 -1
  122. package/dist/esm/components/Toast/Toast.js +21 -22
  123. package/dist/esm/components/Toast/Toast.js.map +1 -1
  124. package/dist/esm/components/Toast/util.js +2 -2
  125. package/dist/esm/components/Toast/util.js.map +1 -1
  126. package/dist/esm/components/Tour/Tour.js +3 -1
  127. package/dist/esm/components/Tour/Tour.js.map +1 -1
  128. package/dist/esm/index.css +661 -661
  129. package/dist/esm/index.js +4 -1
  130. package/dist/esm/index.js.map +1 -1
  131. package/dist/esm/primitives/Button.js +9 -13
  132. package/dist/esm/primitives/Button.js.map +1 -1
  133. package/dist/esm/utils/date.js.map +1 -1
  134. package/dist/esm/utils/hooks/useBoundingClientRectListener.js.map +1 -1
  135. package/dist/esm/utils/hooks/useDraggable.js +16 -17
  136. package/dist/esm/utils/hooks/useDraggable.js.map +1 -1
  137. package/dist/esm/utils/hooks/useDropTarget.js.map +1 -1
  138. package/dist/esm/utils/hooks/useListKeyboardNavigation.js.map +1 -1
  139. package/dist/esm/utils/hooks/useListScrollTo.js.map +1 -1
  140. package/dist/esm/utils/hooks/useOnClickOutside.js.map +1 -1
  141. package/dist/esm/utils/hooks/useProxiedRef.js.map +1 -1
  142. package/dist/esm/utils/hooks/useTimer.js +9 -17
  143. package/dist/esm/utils/hooks/useTimer.js.map +1 -1
  144. package/dist/esm/utils/input.js +7 -11
  145. package/dist/esm/utils/input.js.map +1 -1
  146. package/dist/esm/utils/mergeRefs.js +1 -1
  147. package/dist/esm/utils/mergeRefs.js.map +1 -1
  148. package/dist/esm/utils/taillwind.js +2 -2
  149. package/dist/esm/utils/taillwind.js.map +1 -1
  150. package/dist/index.css +661 -661
  151. package/dist/index.d.ts +4 -1
  152. package/dist/taco.cjs.development.js +1566 -1823
  153. package/dist/taco.cjs.development.js.map +1 -1
  154. package/dist/taco.cjs.production.min.js +1 -1
  155. package/dist/taco.cjs.production.min.js.map +1 -1
  156. package/dist/utils/mergeRefs.d.ts +1 -1
  157. package/package.json +6 -7
  158. package/plugins/tailwindcss-aria-attributes.js +73 -73
  159. package/tailwind.config.js +9 -0
  160. package/types.json +2612 -7006
@@ -1,4 +1,3 @@
1
- import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
2
1
  import React__default from 'react';
3
2
  import cn from 'classnames';
4
3
  import { IconButton } from '../IconButton/IconButton.js';
@@ -7,36 +6,36 @@ import useTimer from '../../utils/hooks/useTimer.js';
7
6
  import { getBadgeIcon } from './util.js';
8
7
  import { useLocalization } from '../Provider/Provider.js';
9
8
 
10
- var _excluded = ["content", "lastUpdated", "onClose", "options"];
11
- var Toast = function Toast(_ref) {
12
- var content = _ref.content,
13
- lastUpdated = _ref.lastUpdated,
14
- handleClose = _ref.onClose,
15
- options = _ref.options,
16
- props = _objectWithoutPropertiesLoose(_ref, _excluded);
17
-
18
- var _useLocalization = useLocalization(),
19
- texts = _useLocalization.texts;
20
-
21
- var autoClose = options.autoClose,
22
- _options$type = options.type,
23
- type = _options$type === void 0 ? 'default' : _options$type;
24
- var className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow', {
9
+ const Toast = ({
10
+ content,
11
+ lastUpdated,
12
+ onClose: handleClose,
13
+ options,
14
+ ...props
15
+ }) => {
16
+ const {
17
+ texts
18
+ } = useLocalization();
19
+ const {
20
+ autoClose,
21
+ type = 'default'
22
+ } = options;
23
+ const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow', {
25
24
  'border border-grey': type === 'default' || type === 'loading' || !type,
26
25
  'border border-grey-darker': type === 'success',
27
26
  'border border-blue': type === 'information',
28
27
  'border border-yellow-dark': type === 'warning',
29
28
  'border border-red': type === 'error'
30
29
  });
31
- var timer = useTimer(autoClose, handleClose);
32
- var controls = useAnimation();
33
- React__default.useEffect(function () {
30
+ const timer = useTimer(autoClose, handleClose);
31
+ const controls = useAnimation();
32
+ React__default.useEffect(() => {
34
33
  if (autoClose) {
35
34
  timer.start();
36
35
  }
37
36
  }, [autoClose]);
38
37
 
39
- var triggerUpdateAnimation = function triggerUpdateAnimation() {
38
+ const triggerUpdateAnimation = function () {
40
39
  try {
41
40
  return Promise.resolve(controls.start({
42
41
  scale: 1.05
@@ -50,7 +49,7 @@ var Toast = function Toast(_ref) {
50
49
  }
51
50
  };
52
51
 
53
- React__default.useEffect(function () {
52
+ React__default.useEffect(() => {
54
53
  if (lastUpdated) {
55
54
  triggerUpdateAnimation();
56
55
 
@@ -69,7 +68,7 @@ var Toast = function Toast(_ref) {
69
68
  className: "flex-grow"
70
69
  }, content), React__default.createElement(IconButton, {
71
70
  appearance: "discrete",
72
- className: "text-grey-darkest cursor-pointer -mr-2 !px-0",
71
+ className: "text-grey-darkest -mr-2 cursor-pointer !px-0",
73
72
  icon: "close",
74
73
  "aria-label": texts.toasts.dismiss,
75
74
  onClick: handleClose
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.js","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { motion, useAnimation } from 'framer-motion';\nimport useTimer from '../../utils/hooks/useTimer';\nimport { getBadgeIcon } from './util';\nimport { State } from '../../types';\nimport { useLocalization } from '../Provider/Provider';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type ToastsTexts = {\n /** Aria-label for the close icon button of toast */\n dismiss: string;\n};\n\nexport type ToastType = Omit<State, 'default'> | 'loading';\nexport type ToastOptions = {\n /** Provide time in milliseconds after which the toast should autoclose */\n autoClose?: number;\n /**\n * State will change the icon displayed in toast and other characteristics,\n * for e.g. `loading` state will display a progress animation.\n * Default value is `default`\n */\n type?: ToastType;\n};\nexport type ToastProps = {\n /** Provide a unique id for toast */\n id: string;\n /**\n * Content can be any valid react node, for e.g. a `div`, or a simple text.\n * Note that content can also be `null`, resulting in a slimmer version of your toast with a vertically centered title\n */\n content: React.ReactNode;\n /** Additional options to define your toast */\n options: ToastOptions;\n /**\n * Handler called when toast closes.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n onClose: () => void;\n lastUpdated?: number;\n lastDuplicateId?: string;\n};\n\nexport const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }: ToastProps): JSX.Element => {\n const { texts } = useLocalization();\n const { autoClose, type = 'default' } = options;\n const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow', {\n 'border border-grey': type === 'default' || type === 'loading' || !type,\n 'border border-grey-darker': type === 'success',\n 'border border-blue': type === 'information',\n 'border border-yellow-dark': type === 'warning',\n 'border border-red': type === 'error',\n });\n const timer = useTimer(autoClose, handleClose);\n const controls = useAnimation();\n\n React.useEffect(() => {\n if (autoClose) {\n timer.start();\n }\n }, [autoClose]);\n\n const triggerUpdateAnimation = async () => {\n await controls.start({ scale: 1.05 });\n await controls.start({ scale: 1 });\n };\n\n React.useEffect(() => {\n if (lastUpdated) {\n triggerUpdateAnimation();\n\n if (timer.running) {\n timer.start();\n }\n }\n }, [lastUpdated]);\n\n return (\n <motion.div\n {...props}\n animate={controls}\n className={className}\n data-taco=\"toast\"\n onMouseEnter={timer.pause}\n onMouseLeave={timer.resume}\n >\n {getBadgeIcon(type)}\n {content && <div className=\"flex-grow\">{content}</div>}\n <IconButton\n appearance=\"discrete\"\n className=\"text-grey-darkest cursor-pointer -mr-2 !px-0\"\n icon=\"close\"\n aria-label={texts.toasts.dismiss}\n onClick={handleClose}\n />\n </motion.div>\n );\n};\n"],"names":["Toast","content","lastUpdated","handleClose","onClose","options","props","useLocalization","texts","autoClose","type","className","cn","timer","useTimer","controls","useAnimation","React","useEffect","start","triggerUpdateAnimation","scale","running","motion","div","animate","onMouseEnter","pause","onMouseLeave","resume","getBadgeIcon","IconButton","appearance","icon","toasts","dismiss","onClick"],"mappings":";;;;;;;;;;IA4CaA,KAAK,GAAG,SAARA,KAAQ;MAAGC,eAAAA;MAASC,mBAAAA;MAAsBC,mBAATC;MAAsBC,eAAAA;MAAYC;;EAC5E,uBAAkBC,eAAe,EAAjC;MAAQC,KAAR,oBAAQA,KAAR;;EACA,IAAQC,SAAR,GAAwCJ,OAAxC,CAAQI,SAAR;sBAAwCJ,OAAxC,CAAmBK,IAAnB;MAAmBA,IAAnB,8BAA0B,SAA1B;EACA,IAAMC,SAAS,GAAGC,EAAE,CAAC,6EAAD,EAAgF;IAChG,sBAAsBF,IAAI,KAAK,SAAT,IAAsBA,IAAI,KAAK,SAA/B,IAA4C,CAACA,IAD6B;IAEhG,6BAA6BA,IAAI,KAAK,SAF0D;IAGhG,sBAAsBA,IAAI,KAAK,aAHiE;IAIhG,6BAA6BA,IAAI,KAAK,SAJ0D;IAKhG,qBAAqBA,IAAI,KAAK;GALd,CAApB;EAOA,IAAMG,KAAK,GAAGC,QAAQ,CAACL,SAAD,EAAYN,WAAZ,CAAtB;EACA,IAAMY,QAAQ,GAAGC,YAAY,EAA7B;EAEAC,cAAK,CAACC,SAAN,CAAgB;IACZ,IAAIT,SAAJ,EAAe;MACXI,KAAK,CAACM,KAAN;;GAFR,EAIG,CAACV,SAAD,CAJH;;EAMA,IAAMW,sBAAsB,YAAtBA,sBAAsB;IAAA;6BAClBL,QAAQ,CAACI,KAAT,CAAe;QAAEE,KAAK,EAAE;OAAxB;+BACAN,QAAQ,CAACI,KAAT,CAAe;UAAEE,KAAK,EAAE;SAAxB;;KAFkB;MAAA;;GAA5B;;EAKAJ,cAAK,CAACC,SAAN,CAAgB;IACZ,IAAIhB,WAAJ,EAAiB;MACbkB,sBAAsB;;MAEtB,IAAIP,KAAK,CAACS,OAAV,EAAmB;QACfT,KAAK,CAACM,KAAN;;;GALZ,EAQG,CAACjB,WAAD,CARH;EAUA,OACIe,4BAAA,CAACM,MAAM,CAACC,GAAR,oBACQlB;IACJmB,OAAO,EAAEV;IACTJ,SAAS,EAAEA;iBACD;IACVe,YAAY,EAAEb,KAAK,CAACc;IACpBC,YAAY,EAAEf,KAAK,CAACgB;IANxB,EAQKC,YAAY,CAACpB,IAAD,CARjB,EASKT,OAAO,IAAIgB,4BAAA,MAAA;IAAKN,SAAS,EAAC;GAAf,EAA4BV,OAA5B,CAThB,EAUIgB,4BAAA,CAACc,UAAD;IACIC,UAAU,EAAC;IACXrB,SAAS,EAAC;IACVsB,IAAI,EAAC;kBACOzB,KAAK,CAAC0B,MAAN,CAAaC;IACzBC,OAAO,EAAEjC;GALb,CAVJ,CADJ;AAoBH;;;;"}
1
+ {"version":3,"file":"Toast.js","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { motion, useAnimation } from 'framer-motion';\nimport useTimer from '../../utils/hooks/useTimer';\nimport { getBadgeIcon } from './util';\nimport { State } from '../../types';\nimport { useLocalization } from '../Provider/Provider';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type ToastsTexts = {\n /** Aria-label for the close icon button of toast */\n dismiss: string;\n};\n\nexport type ToastType = Omit<State, 'default'> | 'loading';\nexport type ToastOptions = {\n /** Provide time in milliseconds after which the toast should autoclose */\n autoClose?: number;\n /**\n * State will change the icon displayed in toast and other characteristics,\n * for e.g. `loading` state will display a progress animation.\n * Default value is `default`\n */\n type?: ToastType;\n};\nexport type ToastProps = {\n /** Provide a unique id for toast */\n id: string;\n /**\n * Content can be any valid react node, for e.g. a `div`, or a simple text.\n * Note that content can also be `null`, resulting in a slimmer version of your toast with a vertically centered title\n */\n content: React.ReactNode;\n /** Additional options to define your toast */\n options: ToastOptions;\n /**\n * Handler called when toast closes.\n * To read more about how to provide the text, see [Provider](component:provider) component\n */\n onClose: () => void;\n lastUpdated?: number;\n lastDuplicateId?: string;\n};\n\nexport const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }: ToastProps): JSX.Element => {\n const { texts } = useLocalization();\n const { autoClose, type = 'default' } = options;\n const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow', {\n 'border border-grey': type === 'default' || type === 'loading' || !type,\n 'border border-grey-darker': type === 'success',\n 'border border-blue': type === 'information',\n 'border border-yellow-dark': type === 'warning',\n 'border border-red': type === 'error',\n });\n const timer = useTimer(autoClose, handleClose);\n const controls = useAnimation();\n\n React.useEffect(() => {\n if (autoClose) {\n timer.start();\n }\n }, [autoClose]);\n\n const triggerUpdateAnimation = async () => {\n await controls.start({ scale: 1.05 });\n await controls.start({ scale: 1 });\n };\n\n React.useEffect(() => {\n if (lastUpdated) {\n triggerUpdateAnimation();\n\n if (timer.running) {\n timer.start();\n }\n }\n }, [lastUpdated]);\n\n return (\n <motion.div\n {...props}\n animate={controls}\n className={className}\n data-taco=\"toast\"\n onMouseEnter={timer.pause}\n onMouseLeave={timer.resume}\n >\n {getBadgeIcon(type)}\n {content && <div className=\"flex-grow\">{content}</div>}\n <IconButton\n appearance=\"discrete\"\n className=\"text-grey-darkest -mr-2 cursor-pointer !px-0\"\n icon=\"close\"\n aria-label={texts.toasts.dismiss}\n onClick={handleClose}\n />\n </motion.div>\n );\n};\n"],"names":["Toast","content","lastUpdated","onClose","handleClose","options","props","texts","useLocalization","autoClose","type","className","cn","timer","useTimer","controls","useAnimation","React","useEffect","start","triggerUpdateAnimation","scale","running","motion","div","animate","onMouseEnter","pause","onMouseLeave","resume","getBadgeIcon","IconButton","appearance","icon","toasts","dismiss","onClick"],"mappings":";;;;;;;;MA4CaA,KAAK,GAAG,CAAC;EAAEC,OAAF;EAAWC,WAAX;EAAwBC,OAAO,EAAEC,WAAjC;EAA8CC,OAA9C;EAAuD,GAAGC;AAA1D,CAAD;EACjB,MAAM;IAAEC;MAAUC,eAAe,EAAjC;EACA,MAAM;IAAEC,SAAF;IAAaC,IAAI,GAAG;MAAcL,OAAxC;EACA,MAAMM,SAAS,GAAGC,EAAE,CAAC,6EAAD,EAAgF;IAChG,sBAAsBF,IAAI,KAAK,SAAT,IAAsBA,IAAI,KAAK,SAA/B,IAA4C,CAACA,IAD6B;IAEhG,6BAA6BA,IAAI,KAAK,SAF0D;IAGhG,sBAAsBA,IAAI,KAAK,aAHiE;IAIhG,6BAA6BA,IAAI,KAAK,SAJ0D;IAKhG,qBAAqBA,IAAI,KAAK;GALd,CAApB;EAOA,MAAMG,KAAK,GAAGC,QAAQ,CAACL,SAAD,EAAYL,WAAZ,CAAtB;EACA,MAAMW,QAAQ,GAAGC,YAAY,EAA7B;EAEAC,cAAK,CAACC,SAAN,CAAgB;IACZ,IAAIT,SAAJ,EAAe;MACXI,KAAK,CAACM,KAAN;;GAFR,EAIG,CAACV,SAAD,CAJH;;EAMA,MAAMW,sBAAsB;IAAA;6BAClBL,QAAQ,CAACI,KAAT,CAAe;QAAEE,KAAK,EAAE;OAAxB;+BACAN,QAAQ,CAACI,KAAT,CAAe;UAAEE,KAAK,EAAE;SAAxB;;KAFkB;MAAA;;GAA5B;;EAKAJ,cAAK,CAACC,SAAN,CAAgB;IACZ,IAAIhB,WAAJ,EAAiB;MACbkB,sBAAsB;;MAEtB,IAAIP,KAAK,CAACS,OAAV,EAAmB;QACfT,KAAK,CAACM,KAAN;;;GALZ,EAQG,CAACjB,WAAD,CARH;EAUA,OACIe,4BAAA,CAACM,MAAM,CAACC,GAAR,oBACQlB;IACJmB,OAAO,EAAEV;IACTJ,SAAS,EAAEA;iBACD;IACVe,YAAY,EAAEb,KAAK,CAACc;IACpBC,YAAY,EAAEf,KAAK,CAACgB;IANxB,EAQKC,YAAY,CAACpB,IAAD,CARjB,EASKT,OAAO,IAAIgB,4BAAA,MAAA;IAAKN,SAAS,EAAC;GAAf,EAA4BV,OAA5B,CAThB,EAUIgB,4BAAA,CAACc,UAAD;IACIC,UAAU,EAAC;IACXrB,SAAS,EAAC;IACVsB,IAAI,EAAC;kBACO1B,KAAK,CAAC2B,MAAN,CAAaC;IACzBC,OAAO,EAAEhC;GALb,CAVJ,CADJ;AAoBH;;;;"}
@@ -3,8 +3,8 @@ import cn from 'classnames';
3
3
  import { Icon } from '../Icon/Icon.js';
4
4
  import { Spinner } from '../Spinner/Spinner.js';
5
5
 
6
- var getBadgeIcon = function getBadgeIcon(type) {
7
- var css = 'rounded-full flex-shrink-0 mr-2';
6
+ const getBadgeIcon = type => {
7
+ const css = 'rounded-full flex-shrink-0 mr-2';
8
8
 
9
9
  switch (type) {
10
10
  case 'success':
@@ -1 +1 @@
1
- {"version":3,"file":"util.js","sources":["../../../../src/components/Toast/util.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon } from '../Icon/Icon';\nimport { Spinner } from '../Spinner/Spinner';\nimport { ToastType } from './Toast';\n\nexport const getBadgeIcon = (type: ToastType): JSX.Element | null => {\n const css = 'rounded-full flex-shrink-0 mr-2';\n\n switch (type) {\n case 'success':\n return <Icon name=\"tick\" className={cn(css, 'yt-green-solid')} />;\n\n case 'warning':\n return <Icon name=\"warning\" className={cn(css, 'yt-yellow-solid')} />;\n\n case 'error':\n return <Icon name=\"warning\" className={cn(css, 'yt-red-solid')} />;\n\n case 'information':\n return <Icon name=\"info\" className={cn(css, 'yt-blue-solid')} />;\n\n case 'loading':\n return <Spinner delay={0} className={cn(css, 'h-6 w-6')} />;\n\n default:\n return null;\n }\n};\n"],"names":["getBadgeIcon","type","css","React","Icon","name","className","cn","Spinner","delay"],"mappings":";;;;;IAMaA,YAAY,GAAG,SAAfA,YAAe,CAACC,IAAD;EACxB,IAAMC,GAAG,GAAG,iCAAZ;;EAEA,QAAQD,IAAR;IACI,KAAK,SAAL;MACI,OAAOE,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAOC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,gBAAN;OAA/B,CAAP;;IAEJ,KAAK,SAAL;MACI,OAAOC,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAUC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,iBAAN;OAAlC,CAAP;;IAEJ,KAAK,OAAL;MACI,OAAOC,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAUC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,cAAN;OAAlC,CAAP;;IAEJ,KAAK,aAAL;MACI,OAAOC,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAOC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,eAAN;OAA/B,CAAP;;IAEJ,KAAK,SAAL;MACI,OAAOC,4BAAA,CAACK,OAAD;QAASC,KAAK,EAAE;QAAGH,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,SAAN;OAAhC,CAAP;;IAEJ;MACI,OAAO,IAAP;;AAEX;;;;"}
1
+ {"version":3,"file":"util.js","sources":["../../../../src/components/Toast/util.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon } from '../Icon/Icon';\nimport { Spinner } from '../Spinner/Spinner';\nimport { ToastType } from './Toast';\n\nexport const getBadgeIcon = (type: ToastType): JSX.Element | null => {\n const css = 'rounded-full flex-shrink-0 mr-2';\n\n switch (type) {\n case 'success':\n return <Icon name=\"tick\" className={cn(css, 'yt-green-solid')} />;\n\n case 'warning':\n return <Icon name=\"warning\" className={cn(css, 'yt-yellow-solid')} />;\n\n case 'error':\n return <Icon name=\"warning\" className={cn(css, 'yt-red-solid')} />;\n\n case 'information':\n return <Icon name=\"info\" className={cn(css, 'yt-blue-solid')} />;\n\n case 'loading':\n return <Spinner delay={0} className={cn(css, 'h-6 w-6')} />;\n\n default:\n return null;\n }\n};\n"],"names":["getBadgeIcon","type","css","React","Icon","name","className","cn","Spinner","delay"],"mappings":";;;;;MAMaA,YAAY,GAAIC,IAAD;EACxB,MAAMC,GAAG,GAAG,iCAAZ;;EAEA,QAAQD,IAAR;IACI,KAAK,SAAL;MACI,OAAOE,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAOC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,gBAAN;OAA/B,CAAP;;IAEJ,KAAK,SAAL;MACI,OAAOC,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAUC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,iBAAN;OAAlC,CAAP;;IAEJ,KAAK,OAAL;MACI,OAAOC,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAUC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,cAAN;OAAlC,CAAP;;IAEJ,KAAK,aAAL;MACI,OAAOC,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAOC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,eAAN;OAA/B,CAAP;;IAEJ,KAAK,SAAL;MACI,OAAOC,4BAAA,CAACK,OAAD;QAASC,KAAK,EAAE;QAAGH,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,SAAN;OAAhC,CAAP;;IAEJ;MACI,OAAO,IAAP;;AAEX;;;;"}
@@ -7,7 +7,7 @@ import keycode from 'keycode';
7
7
  import { Group } from '../Group/Group.js';
8
8
  import Joyride, { ACTIONS, LIFECYCLE, EVENTS } from 'react-joyride';
9
9
 
10
- var _excluded = ["autoStart", "onComplete", "onClose", "onReady", "spotlightClicks", "disableCloseOnEsc", "disableScrollParentFix"];
10
+ var _excluded = ["autoStart", "onComplete", "onClose", "onReady", "spotlightClicks", "disableCloseOnEsc", "disableScrollParentFix", "scrollOffset"];
11
11
 
12
12
  var Tooltip = function Tooltip(_ref) {
13
13
  var continuous = _ref.continuous,
@@ -72,6 +72,7 @@ var Tour = function Tour(props) {
72
72
  disableTourSkipOnEsc = props.disableCloseOnEsc,
73
73
  _props$disableScrollP = props.disableScrollParentFix,
74
74
  disableScrollParentFix = _props$disableScrollP === void 0 ? false : _props$disableScrollP,
75
+ scrollOffset = props.scrollOffset,
75
76
  rest = _objectWithoutPropertiesLoose(props, _excluded);
76
77
 
77
78
  var steps = useMemo(function () {
@@ -132,6 +133,7 @@ var Tour = function Tour(props) {
132
133
  spotlightClicks: spotlightClicks,
133
134
  disableScrollParentFix: disableScrollParentFix,
134
135
  callback: callback,
136
+ scrollOffset: scrollOffset,
135
137
  styles: {
136
138
  /** style beacon */
137
139
  options: {
@@ -1 +1 @@
1
- {"version":3,"file":"Tour.js","sources":["../../../../src/components/Tour/Tour.tsx"],"sourcesContent":["import keycode from 'keycode';\nimport * as React from 'react';\nimport Joyride, { Step, CallBackProps, ACTIONS, LIFECYCLE, Placement, EVENTS, TooltipRenderProps } from 'react-joyride';\n\nimport { Button } from '../Button/Button';\nimport { Group } from '../Group/Group';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Provider';\n\nexport type TourTexts = {\n /** Text for back action button */\n back: string;\n /**\n * Text for close button.\n * This button is displayed if tour is not continuous - replacing the `Next` button.\n * It will pause the flow of the tour and close the tooltip\n */\n close: string;\n /**\n * Aria-label and title for close icon button in each step.\n * This button skips and completes the flow entirely\n */\n skip: string;\n /**\n * Text for last action button.\n * This button is displayed when user is on the last step of the tour\n */\n last: string;\n /**\n * Text for next action button.\n * This button is displayed if tour has more than one steps and is continuous\n */\n next: string;\n /** Aria label and title for beacon that will open the tour step */\n open: string;\n};\n\nexport type TourStepProps = {\n /** Content can be any valid react node, for e.g. a `div` */\n children: React.ReactNode;\n /** Define the position of the tour's popup relative to the element is presenting */\n position?: Placement;\n /** The css selector of the html element you want to include in a tour */\n selector: string;\n /**\n * Show beacon for step.\n * A beacon is a styled component which indicates the current element to be presented.\n * For more informations about how to create a beacon, read [Joyride](https://docs.react-joyride.com) docs\n */\n showBeacon?: boolean;\n /** Text displayed above the children/content of the popup */\n title: string;\n};\n\nconst Tooltip = ({\n continuous,\n index,\n isLastStep,\n step,\n backProps,\n primaryProps,\n skipProps,\n tooltipProps,\n size,\n locale,\n disableTourSkipOnEsc,\n}: TooltipRenderProps & { locale: TourTexts; disableTourSkipOnEsc?: boolean }) => {\n const skipButtonRef = React.useRef<HTMLButtonElement>(null);\n\n React.useEffect(() => {\n const onWindowKeyDown = (event: KeyboardEvent): void => {\n if (!disableTourSkipOnEsc) {\n if (event.keyCode === keycode('esc') && skipButtonRef.current !== null) {\n event.preventDefault();\n skipButtonRef.current.click();\n return;\n }\n }\n };\n\n window.addEventListener('keydown', onWindowKeyDown);\n\n return () => {\n window.removeEventListener('keydown', onWindowKeyDown);\n };\n }, []);\n\n return (\n <div {...tooltipProps} className=\"yt-tour__step w-88 relative rounded bg-white p-4\">\n <IconButton\n {...skipProps}\n ref={skipButtonRef}\n appearance=\"discrete\"\n icon=\"close\"\n title={locale.skip}\n aria-label={locale.skip}\n className=\"absolute top-0 right-0 mt-1 mr-1\"\n />\n {step.title && <h5>{step.title}</h5>}\n {step.content}\n <Group className=\"mt-4 justify-end\">\n {index > 0 && (\n <Button {...backProps} appearance=\"discrete\">\n {locale.back}\n </Button>\n )}\n <Button {...primaryProps} appearance=\"primary\">\n {continuous\n ? isLastStep\n ? `${locale.last} (${index + 1}/${size})`\n : `${locale.next} (${index + 1}/${size})`\n : locale.close}\n </Button>\n </Group>\n </div>\n );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const TourStep = (_props: TourStepProps): null => null;\n\nexport type TourProps = {\n /** Controls if [Joyride](https://docs.react-joyride.com) is active */\n autoStart?: boolean;\n /** Children should be one or more `Tour.Step` components */\n children: any;\n /** Are there more than one steps and should you be able to navigate between them using `Next` and `Previous` buttons */\n continuous?: boolean;\n /** Disable closing of tour when click on `Escape` */\n disableCloseOnEsc?: boolean;\n /** Don't close the presenting popup of the tour step when clicking outside it */\n disableOverlayClose?: boolean;\n /** Allows user to interact with the presented components (mouse and touch events) when the popup is visible */\n disableScrolling?: boolean;\n /* When user clicks on the close icon button, which will close the tour and complete the flow */\n onClose?: (step: TourStepProps) => void;\n /* When user completes the entire flow */\n onComplete?: Function;\n /** When step is ready */\n onReady?: (step: TourStepProps) => void;\n /* Allow mouse and touch events through the spotlight */\n spotlightClicks?: boolean;\n /* Stops the injection of custom overflow styles on parent container. Can be used to prevent remaining overflow styles after tour is done. */\n disableScrollParentFix?: boolean;\n};\n\nexport const Tour = (props: TourProps) => {\n const {\n texts: { tour },\n } = useLocalization();\n\n const {\n autoStart: run,\n onComplete,\n onClose,\n onReady,\n spotlightClicks,\n disableCloseOnEsc: disableTourSkipOnEsc,\n disableScrollParentFix = false,\n ...rest\n } = props;\n\n const steps = React.useMemo(() => {\n return React.Children.map(props.children, child => {\n const step: Step = {\n disableBeacon: !child.props.showBeacon,\n target: child.props.selector,\n placement: child.props.position,\n title: child.props.title,\n content: child.props.children,\n };\n return step;\n });\n }, [props.children]);\n\n const getStep = React.useCallback(\n (selector: string | HTMLElement) => props.children.find((child: any) => child.props.selector === selector)?.props,\n [props.children]\n );\n\n function callback(state: CallBackProps) {\n if (state.action === ACTIONS.SKIP && state.lifecycle === LIFECYCLE.COMPLETE) {\n if (onClose) {\n onClose(getStep(state.step.target));\n }\n }\n\n if (state.type === EVENTS.TOUR_END) {\n if (onComplete) {\n onComplete();\n }\n }\n\n if (state.lifecycle === LIFECYCLE.READY) {\n if (onReady) {\n onReady(getStep(state.step.target));\n }\n }\n }\n\n return (\n <Joyride\n {...rest}\n run={run}\n steps={steps}\n showProgress\n floaterProps={{\n disableAnimation: true,\n }}\n tooltipComponent={tooltipProps => (\n <Tooltip {...tooltipProps} locale={tour} disableTourSkipOnEsc={disableTourSkipOnEsc} />\n )}\n locale={tour}\n spotlightPadding={8}\n spotlightClicks={spotlightClicks}\n disableScrollParentFix={disableScrollParentFix}\n callback={callback}\n styles={{\n /** style beacon */\n options: {\n // tailwind.theme.colors.blue.light\n primaryColor: '#6ba4ff',\n },\n }}\n disableCloseOnEsc\n />\n );\n};\n\nTour.Step = TourStep;\n"],"names":["Tooltip","continuous","index","isLastStep","step","backProps","primaryProps","skipProps","tooltipProps","size","locale","disableTourSkipOnEsc","skipButtonRef","React","onWindowKeyDown","event","keyCode","keycode","current","preventDefault","click","window","addEventListener","removeEventListener","className","IconButton","ref","appearance","icon","title","skip","content","Group","Button","back","last","next","close","TourStep","_props","Tour","props","useLocalization","tour","texts","run","autoStart","onComplete","onClose","onReady","spotlightClicks","disableCloseOnEsc","disableScrollParentFix","rest","steps","map","children","child","disableBeacon","showBeacon","target","selector","placement","position","getStep","find","callback","state","action","ACTIONS","SKIP","lifecycle","LIFECYCLE","COMPLETE","type","EVENTS","TOUR_END","READY","Joyride","showProgress","floaterProps","disableAnimation","tooltipComponent","spotlightPadding","styles","options","primaryColor","Step"],"mappings":"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"}
1
+ {"version":3,"file":"Tour.js","sources":["../../../../src/components/Tour/Tour.tsx"],"sourcesContent":["import keycode from 'keycode';\nimport * as React from 'react';\nimport Joyride, { Step, CallBackProps, ACTIONS, LIFECYCLE, Placement, EVENTS, TooltipRenderProps } from 'react-joyride';\n\nimport { Button } from '../Button/Button';\nimport { Group } from '../Group/Group';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Provider';\n\nexport type TourTexts = {\n /** Text for back action button */\n back: string;\n /**\n * Text for close button.\n * This button is displayed if tour is not continuous - replacing the `Next` button.\n * It will pause the flow of the tour and close the tooltip\n */\n close: string;\n /**\n * Aria-label and title for close icon button in each step.\n * This button skips and completes the flow entirely\n */\n skip: string;\n /**\n * Text for last action button.\n * This button is displayed when user is on the last step of the tour\n */\n last: string;\n /**\n * Text for next action button.\n * This button is displayed if tour has more than one steps and is continuous\n */\n next: string;\n /** Aria label and title for beacon that will open the tour step */\n open: string;\n};\n\nexport type TourStepProps = {\n /** Content can be any valid react node, for e.g. a `div` */\n children: React.ReactNode;\n /** Define the position of the tour's popup relative to the element is presenting */\n position?: Placement;\n /** The css selector of the html element you want to include in a tour */\n selector: string;\n /**\n * Show beacon for step.\n * A beacon is a styled component which indicates the current element to be presented.\n * For more informations about how to create a beacon, read [Joyride](https://docs.react-joyride.com) docs\n */\n showBeacon?: boolean;\n /** Text displayed above the children/content of the popup */\n title: string;\n};\n\nconst Tooltip = ({\n continuous,\n index,\n isLastStep,\n step,\n backProps,\n primaryProps,\n skipProps,\n tooltipProps,\n size,\n locale,\n disableTourSkipOnEsc,\n}: TooltipRenderProps & { locale: TourTexts; disableTourSkipOnEsc?: boolean }) => {\n const skipButtonRef = React.useRef<HTMLButtonElement>(null);\n\n React.useEffect(() => {\n const onWindowKeyDown = (event: KeyboardEvent): void => {\n if (!disableTourSkipOnEsc) {\n if (event.keyCode === keycode('esc') && skipButtonRef.current !== null) {\n event.preventDefault();\n skipButtonRef.current.click();\n return;\n }\n }\n };\n\n window.addEventListener('keydown', onWindowKeyDown);\n\n return () => {\n window.removeEventListener('keydown', onWindowKeyDown);\n };\n }, []);\n\n return (\n <div {...tooltipProps} className=\"yt-tour__step w-88 relative rounded bg-white p-4\">\n <IconButton\n {...skipProps}\n ref={skipButtonRef}\n appearance=\"discrete\"\n icon=\"close\"\n title={locale.skip}\n aria-label={locale.skip}\n className=\"absolute top-0 right-0 mt-1 mr-1\"\n />\n {step.title && <h5>{step.title}</h5>}\n {step.content}\n <Group className=\"mt-4 justify-end\">\n {index > 0 && (\n <Button {...backProps} appearance=\"discrete\">\n {locale.back}\n </Button>\n )}\n <Button {...primaryProps} appearance=\"primary\">\n {continuous\n ? isLastStep\n ? `${locale.last} (${index + 1}/${size})`\n : `${locale.next} (${index + 1}/${size})`\n : locale.close}\n </Button>\n </Group>\n </div>\n );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const TourStep = (_props: TourStepProps): null => null;\n\nexport type TourProps = {\n /** Controls if [Joyride](https://docs.react-joyride.com) is active */\n autoStart?: boolean;\n /** Children should be one or more `Tour.Step` components */\n children: any;\n /** Are there more than one steps and should you be able to navigate between them using `Next` and `Previous` buttons */\n continuous?: boolean;\n /** Disable closing of tour when click on `Escape` */\n disableCloseOnEsc?: boolean;\n /** Don't close the presenting popup of the tour step when clicking outside it */\n disableOverlayClose?: boolean;\n /** Allows user to interact with the presented components (mouse and touch events) when the popup is visible */\n disableScrolling?: boolean;\n /* When user clicks on the close icon button, which will close the tour and complete the flow */\n onClose?: (step: TourStepProps) => void;\n /* When user completes the entire flow */\n onComplete?: Function;\n /** When step is ready */\n onReady?: (step: TourStepProps) => void;\n /* Allow mouse and touch events through the spotlight */\n spotlightClicks?: boolean;\n /* Stops the injection of custom overflow styles on parent container. Can be used to prevent remaining overflow styles after tour is done. */\n disableScrollParentFix?: boolean;\n /** The scroll distance from the element scrollTop value. */\n scrollOffset?: number;\n};\n\nexport const Tour = (props: TourProps) => {\n const {\n texts: { tour },\n } = useLocalization();\n\n const {\n autoStart: run,\n onComplete,\n onClose,\n onReady,\n spotlightClicks,\n disableCloseOnEsc: disableTourSkipOnEsc,\n disableScrollParentFix = false,\n scrollOffset,\n ...rest\n } = props;\n\n const steps = React.useMemo(() => {\n return React.Children.map(props.children, child => {\n const step: Step = {\n disableBeacon: !child.props.showBeacon,\n target: child.props.selector,\n placement: child.props.position,\n title: child.props.title,\n content: child.props.children,\n };\n return step;\n });\n }, [props.children]);\n\n const getStep = React.useCallback(\n (selector: string | HTMLElement) => props.children.find((child: any) => child.props.selector === selector)?.props,\n [props.children]\n );\n\n function callback(state: CallBackProps) {\n if (state.action === ACTIONS.SKIP && state.lifecycle === LIFECYCLE.COMPLETE) {\n if (onClose) {\n onClose(getStep(state.step.target));\n }\n }\n\n if (state.type === EVENTS.TOUR_END) {\n if (onComplete) {\n onComplete();\n }\n }\n\n if (state.lifecycle === LIFECYCLE.READY) {\n if (onReady) {\n onReady(getStep(state.step.target));\n }\n }\n }\n\n return (\n <Joyride\n {...rest}\n run={run}\n steps={steps}\n showProgress\n floaterProps={{\n disableAnimation: true,\n }}\n tooltipComponent={tooltipProps => (\n <Tooltip {...tooltipProps} locale={tour} disableTourSkipOnEsc={disableTourSkipOnEsc} />\n )}\n locale={tour}\n spotlightPadding={8}\n spotlightClicks={spotlightClicks}\n disableScrollParentFix={disableScrollParentFix}\n callback={callback}\n scrollOffset={scrollOffset}\n styles={{\n /** style beacon */\n options: {\n // tailwind.theme.colors.blue.light\n primaryColor: '#6ba4ff',\n },\n }}\n disableCloseOnEsc\n />\n );\n};\n\nTour.Step = TourStep;\n"],"names":["Tooltip","continuous","index","isLastStep","step","backProps","primaryProps","skipProps","tooltipProps","size","locale","disableTourSkipOnEsc","skipButtonRef","React","onWindowKeyDown","event","keyCode","keycode","current","preventDefault","click","window","addEventListener","removeEventListener","className","IconButton","ref","appearance","icon","title","skip","content","Group","Button","back","last","next","close","TourStep","_props","Tour","props","useLocalization","tour","texts","run","autoStart","onComplete","onClose","onReady","spotlightClicks","disableCloseOnEsc","disableScrollParentFix","scrollOffset","rest","steps","map","children","child","disableBeacon","showBeacon","target","selector","placement","position","getStep","find","callback","state","action","ACTIONS","SKIP","lifecycle","LIFECYCLE","COMPLETE","type","EVENTS","TOUR_END","READY","Joyride","showProgress","floaterProps","disableAnimation","tooltipComponent","spotlightPadding","styles","options","primaryColor","Step"],"mappings":"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"}