@economic/taco 1.1.10-alpha.0 → 1.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Icon/components/Numbers.d.ts +3 -0
- package/dist/components/Icon/components/index.d.ts +1 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Menu/Menu.d.ts +2 -2
- package/dist/components/Menu/components/Item.d.ts +1 -1
- package/dist/components/Menu/components/Link.d.ts +1 -1
- package/dist/esm/_virtual/_rollupPluginBabelHelpers.js +1 -18
- package/dist/esm/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/dist/esm/components/Button/Button.js +12 -13
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/Calendar/Calendar.js +56 -71
- package/dist/esm/components/Calendar/Calendar.js.map +1 -1
- package/dist/esm/components/Card/Card.js +13 -14
- package/dist/esm/components/Card/Card.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +15 -18
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.js +23 -25
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Datepicker/Datepicker.js +48 -52
- package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +39 -58
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Field/Field.js +10 -12
- package/dist/esm/components/Field/Field.js.map +1 -1
- package/dist/esm/components/Form/Form.js +6 -8
- package/dist/esm/components/Form/Form.js.map +1 -1
- package/dist/esm/components/Group/Group.js +6 -8
- package/dist/esm/components/Group/Group.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +27 -35
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/HoverCard/HoverCard.js +8 -9
- package/dist/esm/components/HoverCard/HoverCard.js.map +1 -1
- package/dist/esm/components/Icon/Icon.js +7 -8
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/Icon/components/Numbers.js +18 -0
- package/dist/esm/components/Icon/components/Numbers.js.map +1 -0
- package/dist/esm/components/Icon/components/index.js +2 -0
- package/dist/esm/components/Icon/components/index.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js +9 -11
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/esm/components/Input/Input.js +25 -25
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Listbox/Listbox.js +24 -25
- package/dist/esm/components/Listbox/Listbox.js.map +1 -1
- package/dist/esm/components/Menu/Menu.js +16 -34
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Navigation/Navigation.js +35 -44
- package/dist/esm/components/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +39 -56
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +29 -34
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/Progress/Progress.js +11 -15
- package/dist/esm/components/Progress/Progress.js.map +1 -1
- package/dist/esm/components/Provider/Provider.js +13 -18
- package/dist/esm/components/Provider/Provider.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.js +45 -57
- package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +10 -13
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/components/Select/Select.js +30 -31
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Spinner/Spinner.js +12 -19
- package/dist/esm/components/Spinner/Spinner.js.map +1 -1
- package/dist/esm/components/Switch/Switch.js +9 -10
- package/dist/esm/components/Switch/Switch.js.map +1 -1
- package/dist/esm/components/Textarea/Textarea.js +11 -9
- package/dist/esm/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/components/Toast/Toaster.js +88 -118
- package/dist/esm/components/Toast/Toaster.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +7 -8
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/Tour/Tour.js +45 -51
- package/dist/esm/components/Tour/Tour.js.map +1 -1
- package/dist/esm/components/Treeview/Treeview.js +26 -36
- package/dist/esm/components/Treeview/Treeview.js.map +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js.map +1 -1
- package/dist/esm/index.js +0 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/hooks/useDropTarget.js +7 -10
- package/dist/esm/utils/hooks/useDropTarget.js.map +1 -1
- package/dist/esm/utils/hooks/useProxiedRef.js +3 -3
- package/dist/esm/utils/hooks/useProxiedRef.js.map +1 -1
- package/dist/index.d.ts +0 -2
- package/dist/taco.cjs.development.js +796 -958
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/dist/utils/tailwind.d.ts +1 -1
- package/package.json +131 -130
- package/tailwind.config.js +0 -9
- package/types.json +3 -2
@@ -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
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
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
|
-
|
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
|
-
|
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';\r\nimport cn from 'classnames';\r\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\r\n\r\ntype SwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\r\n /** Label for the switch */\r\n label?: React.ReactNode;\r\n /* Whether user input is required */\r\n required?: boolean;\r\n};\r\n\r\ninterface UncontrolledSwitchProps extends SwitchBaseProps {\r\n checked?: never;\r\n onChange?: never;\r\n /* The default checked state (uncontrolled) */\r\n defaultChecked?: boolean;\r\n}\r\n\r\ninterface ControlledSwitchProps extends SwitchBaseProps {\r\n defaultChecked?: never;\r\n /* The current checked state (controlled) */\r\n checked: boolean;\r\n /* Handler called when the checked state changes */\r\n onChange: (checked: boolean) => void;\r\n}\r\n\r\nexport type SwitchProps = UncontrolledSwitchProps | ControlledSwitchProps;\r\n\r\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLButtonElement>) {\r\n const { label, onChange, ...otherProps } = props;\r\n\r\n const className = cn(\r\n 'group h-5 w-9 flex rounded-full inline-flex',\r\n {\r\n 'mr-2': !!label,\r\n 'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus':\r\n !props.disabled,\r\n 'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled,\r\n },\r\n props.className\r\n );\r\n\r\n const element = (\r\n <PrimitiveSwitch.Root {...otherProps} className={className} onCheckedChange={onChange} ref={ref}>\r\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\" />\r\n </PrimitiveSwitch.Root>\r\n );\r\n\r\n if (label) {\r\n const labelClassName = cn('flex items-center cursor-pointer', {\r\n 'cursor-not-allowed text-grey-dark': props.disabled,\r\n });\r\n\r\n return (\r\n <label className={labelClassName}>\r\n {element}\r\n {label}\r\n </label>\r\n );\r\n }\r\n\r\n return element;\r\n});\r\n"],"names":["Switch","React","props","ref","label","onChange","otherProps","className","cn","disabled","element","PrimitiveSwitch","onCheckedChange","labelClassName"],"mappings":"
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\r\n\r\ntype SwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\r\n /** Label for the switch */\r\n label?: React.ReactNode;\r\n /* Whether user input is required */\r\n required?: boolean;\r\n};\r\n\r\ninterface UncontrolledSwitchProps extends SwitchBaseProps {\r\n checked?: never;\r\n onChange?: never;\r\n /* The default checked state (uncontrolled) */\r\n defaultChecked?: boolean;\r\n}\r\n\r\ninterface ControlledSwitchProps extends SwitchBaseProps {\r\n defaultChecked?: never;\r\n /* The current checked state (controlled) */\r\n checked: boolean;\r\n /* Handler called when the checked state changes */\r\n onChange: (checked: boolean) => void;\r\n}\r\n\r\nexport type SwitchProps = UncontrolledSwitchProps | ControlledSwitchProps;\r\n\r\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLButtonElement>) {\r\n const { label, onChange, ...otherProps } = props;\r\n\r\n const className = cn(\r\n 'group h-5 w-9 flex rounded-full inline-flex',\r\n {\r\n 'mr-2': !!label,\r\n 'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus':\r\n !props.disabled,\r\n 'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled,\r\n },\r\n props.className\r\n );\r\n\r\n const element = (\r\n <PrimitiveSwitch.Root {...otherProps} className={className} onCheckedChange={onChange} ref={ref}>\r\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\" />\r\n </PrimitiveSwitch.Root>\r\n );\r\n\r\n if (label) {\r\n const labelClassName = cn('flex items-center cursor-pointer', {\r\n 'cursor-not-allowed text-grey-dark': props.disabled,\r\n });\r\n\r\n return (\r\n <label className={labelClassName}>\r\n {element}\r\n {label}\r\n </label>\r\n );\r\n }\r\n\r\n return element;\r\n});\r\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,21 +1,23 @@
|
|
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 { getInputClasses } from '../Input/util.js';
|
5
4
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
5
|
+
const Textarea = /*#__PURE__*/forwardRef(function Textarea(props, ref) {
|
6
|
+
const {
|
7
|
+
defaultValue: _,
|
8
|
+
highlighted,
|
9
|
+
invalid,
|
10
|
+
onKeyDown,
|
11
|
+
...otherProps
|
12
|
+
} = props;
|
13
|
+
const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className); // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll
|
12
14
|
// if it has scroll height then the browser reverts to native scrolling behaviour only
|
13
15
|
// so we manually override it to ensure _our_ desired behaviour remains intact
|
14
16
|
|
15
|
-
|
17
|
+
const handleKeyDown = event => {
|
16
18
|
if (event.key === 'Home' || event.key === 'End') {
|
17
19
|
event.preventDefault();
|
18
|
-
|
20
|
+
const position = event.key === 'End' ? event.currentTarget.value.length : 0;
|
19
21
|
event.currentTarget.setSelectionRange(position, position);
|
20
22
|
event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
|
21
23
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { getInputClasses } from '../Input/util';\r\n\r\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\r\n /** Draws attention to the textarea by changing its style and making it visually prominent */\r\n highlighted?: boolean;\r\n /* Whether the input is in an invalid state */\r\n invalid?: boolean;\r\n /** Value of the textarea */\r\n value?: string;\r\n};\r\n\r\nexport const Textarea = React.forwardRef(function Textarea(props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) {\r\n const { defaultValue: _, highlighted, invalid, onKeyDown, ...otherProps } = props;\r\n const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);\r\n\r\n // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll\r\n // if it has scroll height then the browser reverts to native scrolling behaviour only\r\n // so we manually override it to ensure _our_ desired behaviour remains intact\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\r\n if (event.key === 'Home' || event.key === 'End') {\r\n event.preventDefault();\r\n const position = event.key === 'End' ? event.currentTarget.value.length : 0;\r\n event.currentTarget.setSelectionRange(position, position);\r\n event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;\r\n }\r\n\r\n if (onKeyDown) {\r\n onKeyDown(event);\r\n }\r\n };\r\n\r\n return <textarea {...otherProps} className={classNames} data-taco=\"textarea\" onKeyDown={handleKeyDown} ref={ref} />;\r\n});\r\n"],"names":["Textarea","React","props","ref","onKeyDown","otherProps","classNames","cn","getInputClasses","className","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","scrollTop","scrollHeight"],"mappings":"
|
1
|
+
{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { getInputClasses } from '../Input/util';\r\n\r\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\r\n /** Draws attention to the textarea by changing its style and making it visually prominent */\r\n highlighted?: boolean;\r\n /* Whether the input is in an invalid state */\r\n invalid?: boolean;\r\n /** Value of the textarea */\r\n value?: string;\r\n};\r\n\r\nexport const Textarea = React.forwardRef(function Textarea(props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) {\r\n const { defaultValue: _, highlighted, invalid, onKeyDown, ...otherProps } = props;\r\n const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);\r\n\r\n // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll\r\n // if it has scroll height then the browser reverts to native scrolling behaviour only\r\n // so we manually override it to ensure _our_ desired behaviour remains intact\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\r\n if (event.key === 'Home' || event.key === 'End') {\r\n event.preventDefault();\r\n const position = event.key === 'End' ? event.currentTarget.value.length : 0;\r\n event.currentTarget.setSelectionRange(position, position);\r\n event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;\r\n }\r\n\r\n if (onKeyDown) {\r\n onKeyDown(event);\r\n }\r\n };\r\n\r\n return <textarea {...otherProps} className={classNames} data-taco=\"textarea\" onKeyDown={handleKeyDown} ref={ref} />;\r\n});\r\n"],"names":["Textarea","React","props","ref","defaultValue","_","highlighted","invalid","onKeyDown","otherProps","classNames","cn","getInputClasses","className","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","scrollTop","scrollHeight"],"mappings":";;;;MAaaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;EACrC,MAAM;IAAEC,YAAY,EAAEC,CAAhB;IAAmBC,WAAnB;IAAgCC,OAAhC;IAAyCC,SAAzC;IAAoD,GAAGC;MAAeP,KAA5E;EACA,MAAMQ,UAAU,GAAGC,EAAE,CAACC,eAAe,CAACV,KAAD,CAAhB,EAAyB,wCAAzB,EAAmEA,KAAK,CAACW,SAAzE,CAArB;;;;EAKA,MAAMC,aAAa,GAAIC,KAAD;IAClB,IAAIA,KAAK,CAACC,GAAN,KAAc,MAAd,IAAwBD,KAAK,CAACC,GAAN,KAAc,KAA1C,EAAiD;MAC7CD,KAAK,CAACE,cAAN;MACA,MAAMC,QAAQ,GAAGH,KAAK,CAACC,GAAN,KAAc,KAAd,GAAsBD,KAAK,CAACI,aAAN,CAAoBC,KAApB,CAA0BC,MAAhD,GAAyD,CAA1E;MACAN,KAAK,CAACI,aAAN,CAAoBG,iBAApB,CAAsCJ,QAAtC,EAAgDA,QAAhD;MACAH,KAAK,CAACI,aAAN,CAAoBI,SAApB,GAAgCR,KAAK,CAACC,GAAN,KAAc,KAAd,GAAsBD,KAAK,CAACI,aAAN,CAAoBK,YAA1C,GAAyD,CAAzF;;;IAGJ,IAAIhB,SAAJ,EAAe;MACXA,SAAS,CAACO,KAAD,CAAT;;GATR;;EAaA,OAAOd,aAAA,WAAA,oBAAcQ;IAAYI,SAAS,EAAEH;iBAAsB;IAAWF,SAAS,EAAEM;IAAeX,GAAG,EAAEA;IAArG,CAAP;AACH,CArBuB;;;;"}
|
@@ -1,65 +1,51 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { useState, useCallback, useEffect, createElement, useContext, createContext } from 'react';
|
3
2
|
import { v4 } from 'uuid';
|
4
3
|
import { AnimatePresence, motion } from 'framer-motion';
|
5
4
|
import { Toast } from './Toast.js';
|
6
5
|
|
7
|
-
|
8
|
-
|
9
|
-
var ToastContext = /*#__PURE__*/createContext({});
|
6
|
+
const DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;
|
7
|
+
const ToastContext = /*#__PURE__*/createContext({});
|
10
8
|
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
return JSON.stringify(toast.content) === JSON.stringify(content);
|
15
|
-
});
|
9
|
+
const insertToastWithoutDuplicates = (currentToasts, id, content, options, close) => {
|
10
|
+
const nextToasts = [...currentToasts];
|
11
|
+
const existingToastIndex = currentToasts.findIndex(toast => JSON.stringify(toast.content) === JSON.stringify(content));
|
16
12
|
|
17
13
|
if (existingToastIndex > -1) {
|
18
14
|
nextToasts[existingToastIndex].lastDuplicateId = id;
|
19
15
|
nextToasts[existingToastIndex].lastUpdated = Date.now();
|
20
16
|
} else {
|
21
17
|
nextToasts.push({
|
22
|
-
id
|
18
|
+
id,
|
23
19
|
content: typeof content === 'function' ? content(close) : content,
|
24
|
-
options
|
20
|
+
options
|
25
21
|
});
|
26
22
|
}
|
27
23
|
|
28
24
|
return nextToasts;
|
29
25
|
};
|
30
26
|
|
31
|
-
|
32
|
-
|
33
|
-
|
27
|
+
const ToastProvider = ({
|
28
|
+
children,
|
29
|
+
...props
|
30
|
+
}) => {
|
31
|
+
const [toasts, setToasts] = useState([]);
|
34
32
|
|
35
|
-
|
36
|
-
|
37
|
-
setToasts = _React$useState[1];
|
38
|
-
|
39
|
-
var handleClose = function handleClose(id) {
|
40
|
-
setToasts(function (currentToasts) {
|
41
|
-
return currentToasts.filter(function (toast) {
|
42
|
-
return toast.id !== id;
|
43
|
-
});
|
44
|
-
});
|
33
|
+
const handleClose = id => {
|
34
|
+
setToasts(currentToasts => currentToasts.filter(toast => toast.id !== id));
|
45
35
|
}; // memoize (useCallback) this function,
|
46
36
|
// it is the value of the context provider and we don't want it to trigger state tree re-renders on provider children
|
47
37
|
|
48
38
|
|
49
|
-
|
50
|
-
|
39
|
+
const toaster = useCallback((content, options) => {
|
40
|
+
const id = v4();
|
51
41
|
|
52
|
-
|
53
|
-
return handleClose(id);
|
54
|
-
};
|
42
|
+
const close = () => handleClose(id);
|
55
43
|
|
56
|
-
setToasts(
|
57
|
-
return insertToastWithoutDuplicates(currentToasts, id, content, options, close);
|
58
|
-
});
|
44
|
+
setToasts(currentToasts => insertToastWithoutDuplicates(currentToasts, id, content, options, close));
|
59
45
|
|
60
|
-
|
61
|
-
setToasts(
|
62
|
-
|
46
|
+
const update = (content, options) => {
|
47
|
+
setToasts(currentToasts => {
|
48
|
+
const nextToasts = currentToasts.filter(toast => {
|
63
49
|
if (toast.lastDuplicateId) {
|
64
50
|
return toast.lastDuplicateId !== id;
|
65
51
|
}
|
@@ -70,80 +56,70 @@ var ToastProvider = function ToastProvider(_ref) {
|
|
70
56
|
});
|
71
57
|
};
|
72
58
|
|
73
|
-
|
74
|
-
update(content,
|
75
|
-
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT
|
76
|
-
|
59
|
+
const success = (content, options) => {
|
60
|
+
update(content, {
|
61
|
+
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
|
62
|
+
...options,
|
77
63
|
type: 'success'
|
78
|
-
})
|
64
|
+
});
|
79
65
|
};
|
80
66
|
|
81
|
-
|
82
|
-
update(content,
|
67
|
+
const error = (content, options) => {
|
68
|
+
update(content, { ...options,
|
83
69
|
type: 'error'
|
84
|
-
})
|
70
|
+
});
|
85
71
|
};
|
86
72
|
|
87
|
-
|
88
|
-
update(content,
|
73
|
+
const warning = (content, options) => {
|
74
|
+
update(content, { ...options,
|
89
75
|
type: 'warning'
|
90
|
-
})
|
76
|
+
});
|
91
77
|
};
|
92
78
|
|
93
|
-
|
94
|
-
update(content,
|
79
|
+
const information = (content, options) => {
|
80
|
+
update(content, { ...options,
|
95
81
|
type: 'information'
|
96
|
-
})
|
82
|
+
});
|
97
83
|
};
|
98
84
|
|
99
|
-
|
100
|
-
update(content,
|
85
|
+
const loading = (content, options) => {
|
86
|
+
update(content, { ...options,
|
101
87
|
type: 'loading'
|
102
|
-
})
|
88
|
+
});
|
103
89
|
};
|
104
90
|
|
105
91
|
return {
|
106
|
-
success
|
107
|
-
error
|
108
|
-
warning
|
109
|
-
information
|
110
|
-
loading
|
111
|
-
close
|
92
|
+
success,
|
93
|
+
error,
|
94
|
+
warning,
|
95
|
+
information,
|
96
|
+
loading,
|
97
|
+
close
|
112
98
|
};
|
113
99
|
}, []); // no need to rebind these every render, do them once in an effect
|
114
100
|
|
115
|
-
useEffect(
|
116
|
-
toaster.success =
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
}));
|
122
|
-
};
|
101
|
+
useEffect(() => {
|
102
|
+
toaster.success = (content, options) => toaster(content, {
|
103
|
+
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
|
104
|
+
...options,
|
105
|
+
type: 'success'
|
106
|
+
});
|
123
107
|
|
124
|
-
toaster.error =
|
125
|
-
|
126
|
-
|
127
|
-
}));
|
128
|
-
};
|
108
|
+
toaster.error = (content, options) => toaster(content, { ...options,
|
109
|
+
type: 'error'
|
110
|
+
});
|
129
111
|
|
130
|
-
toaster.warning =
|
131
|
-
|
132
|
-
|
133
|
-
}));
|
134
|
-
};
|
112
|
+
toaster.warning = (content, options) => toaster(content, { ...options,
|
113
|
+
type: 'warning'
|
114
|
+
});
|
135
115
|
|
136
|
-
toaster.information =
|
137
|
-
|
138
|
-
|
139
|
-
}));
|
140
|
-
};
|
116
|
+
toaster.information = (content, options) => toaster(content, { ...options,
|
117
|
+
type: 'information'
|
118
|
+
});
|
141
119
|
|
142
|
-
toaster.loading =
|
143
|
-
|
144
|
-
|
145
|
-
}));
|
146
|
-
};
|
120
|
+
toaster.loading = (content, options) => toaster(content, { ...options,
|
121
|
+
type: 'loading'
|
122
|
+
});
|
147
123
|
}, []);
|
148
124
|
return createElement(ToastContext.Provider, Object.assign({}, props, {
|
149
125
|
value: toaster
|
@@ -153,41 +129,35 @@ var ToastProvider = function ToastProvider(_ref) {
|
|
153
129
|
role: "log"
|
154
130
|
}, createElement(AnimatePresence, {
|
155
131
|
initial: false
|
156
|
-
}, toasts.map(
|
157
|
-
|
158
|
-
|
132
|
+
}, toasts.map(toast => createElement(motion.div, {
|
133
|
+
key: toast.id,
|
134
|
+
transition: {
|
135
|
+
type: 'spring',
|
136
|
+
damping: 20,
|
137
|
+
stiffness: 300
|
138
|
+
},
|
139
|
+
initial: {
|
140
|
+
opacity: 0,
|
141
|
+
y: 10,
|
142
|
+
scale: 0.5
|
143
|
+
},
|
144
|
+
animate: {
|
145
|
+
opacity: 1,
|
146
|
+
y: 0,
|
147
|
+
scale: 1
|
148
|
+
},
|
149
|
+
exit: {
|
150
|
+
opacity: 0,
|
151
|
+
scale: 0.5,
|
159
152
|
transition: {
|
160
|
-
|
161
|
-
damping: 20,
|
162
|
-
stiffness: 300
|
163
|
-
},
|
164
|
-
initial: {
|
165
|
-
opacity: 0,
|
166
|
-
y: 10,
|
167
|
-
scale: 0.5
|
168
|
-
},
|
169
|
-
animate: {
|
170
|
-
opacity: 1,
|
171
|
-
y: 0,
|
172
|
-
scale: 1
|
173
|
-
},
|
174
|
-
exit: {
|
175
|
-
opacity: 0,
|
176
|
-
scale: 0.5,
|
177
|
-
transition: {
|
178
|
-
duration: 0.2
|
179
|
-
}
|
180
|
-
}
|
181
|
-
}, createElement(Toast, Object.assign({}, toast, {
|
182
|
-
onClose: function onClose() {
|
183
|
-
return handleClose(toast.id);
|
153
|
+
duration: 0.2
|
184
154
|
}
|
185
|
-
}
|
186
|
-
}
|
187
|
-
|
188
|
-
|
189
|
-
return useContext(ToastContext);
|
155
|
+
}
|
156
|
+
}, createElement(Toast, Object.assign({}, toast, {
|
157
|
+
onClose: () => handleClose(toast.id)
|
158
|
+
})))))));
|
190
159
|
};
|
160
|
+
const useToast = () => useContext(ToastContext);
|
191
161
|
|
192
162
|
export { ToastProvider, useToast };
|
193
163
|
//# sourceMappingURL=Toaster.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Toaster.js","sources":["../../../../src/components/Toast/Toaster.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { v4 as uuid } from 'uuid';\r\nimport { AnimatePresence, motion } from 'framer-motion';\r\nimport { ToastOptions, Toast, ToastProps } from './Toast';\r\nimport './Toast.css';\r\n\r\nconst DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;\r\n\r\ntype ToastCreator<T> = (content: React.ReactNode | ((close: () => void) => React.ReactNode), options?: ToastOptions) => T;\r\n\r\nexport interface Toaster<T> extends ToastCreator<T> {\r\n success: ToastCreator<T>;\r\n error: ToastCreator<T>;\r\n warning: ToastCreator<T>;\r\n information: ToastCreator<T>;\r\n loading: ToastCreator<T>;\r\n}\r\n\r\nexport interface ToastReference {\r\n /** Show a success toast */\r\n success: ToastCreator<void>;\r\n /** Show an error toast */\r\n error: ToastCreator<void>;\r\n /** Show a warning toast */\r\n warning: ToastCreator<void>;\r\n /** Show an information toast */\r\n information: ToastCreator<void>;\r\n /** Show a loading toast */\r\n loading: ToastCreator<void>;\r\n /**\r\n * Close an existing toast.\r\n * The toast function returns a reference to the active toast,\r\n * allowing you to programmatically close it when needed\r\n */\r\n close: () => void;\r\n}\r\n\r\nconst ToastContext = React.createContext<Toaster<ToastReference>>({} as Toaster<ToastReference>);\r\n\r\nexport interface ToastProviderProps {\r\n children: React.ReactNode;\r\n}\r\n\r\ntype InternalToast = Omit<ToastProps, 'onClose'>;\r\n\r\nconst insertToastWithoutDuplicates = (\r\n currentToasts: InternalToast[],\r\n id: string,\r\n content: React.ReactNode,\r\n options: ToastOptions,\r\n close: () => void\r\n): InternalToast[] => {\r\n const nextToasts = [...currentToasts];\r\n const existingToastIndex = currentToasts.findIndex(toast => JSON.stringify(toast.content) === JSON.stringify(content));\r\n\r\n if (existingToastIndex > -1) {\r\n nextToasts[existingToastIndex].lastDuplicateId = id;\r\n nextToasts[existingToastIndex].lastUpdated = Date.now();\r\n } else {\r\n nextToasts.push({\r\n id,\r\n content: typeof content === 'function' ? content(close) : content,\r\n options,\r\n });\r\n }\r\n\r\n return nextToasts;\r\n};\r\n\r\nexport const ToastProvider = ({ children, ...props }: ToastProviderProps): JSX.Element => {\r\n const [toasts, setToasts] = React.useState<InternalToast[]>([]);\r\n\r\n const handleClose = (id: string): void => {\r\n setToasts(currentToasts => currentToasts.filter(toast => toast.id !== id));\r\n };\r\n\r\n // memoize (useCallback) this function,\r\n // it is the value of the context provider and we don't want it to trigger state tree re-renders on provider children\r\n const toaster = React.useCallback((content: React.ReactNode, options: ToastOptions): ToastReference => {\r\n const id = uuid();\r\n const close = (): void => handleClose(id);\r\n\r\n setToasts(currentToasts => insertToastWithoutDuplicates(currentToasts, id, content, options, close));\r\n\r\n const update = (content: React.ReactNode, options: ToastOptions): void => {\r\n setToasts(currentToasts => {\r\n const nextToasts = currentToasts.filter(toast => {\r\n if (toast.lastDuplicateId) {\r\n return toast.lastDuplicateId !== id;\r\n }\r\n\r\n return toast.id !== id;\r\n });\r\n return insertToastWithoutDuplicates(nextToasts, uuid(), content, options, close);\r\n });\r\n };\r\n\r\n const success = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): void => {\r\n update(content, { autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT, ...options, type: 'success' });\r\n };\r\n const error = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): void => {\r\n update(content, { ...options, type: 'error' });\r\n };\r\n const warning = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): void => {\r\n update(content, { ...options, type: 'warning' });\r\n };\r\n const information = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): void => {\r\n update(content, { ...options, type: 'information' });\r\n };\r\n const loading = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): void => {\r\n update(content, { ...options, type: 'loading' });\r\n };\r\n\r\n return {\r\n success,\r\n error,\r\n warning,\r\n information,\r\n loading,\r\n close,\r\n };\r\n }, []) as Toaster<ToastReference>;\r\n\r\n // no need to rebind these every render, do them once in an effect\r\n React.useEffect(() => {\r\n toaster.success = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): ToastReference =>\r\n toaster(content, { autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT, ...options, type: 'success' });\r\n toaster.error = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): ToastReference =>\r\n toaster(content, { ...options, type: 'error' });\r\n toaster.warning = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): ToastReference =>\r\n toaster(content, { ...options, type: 'warning' });\r\n toaster.information = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): ToastReference =>\r\n toaster(content, { ...options, type: 'information' });\r\n toaster.loading = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): ToastReference =>\r\n toaster(content, { ...options, type: 'loading' });\r\n }, []);\r\n\r\n return (\r\n <ToastContext.Provider {...props} value={toaster}>\r\n {children}\r\n <div\r\n id=\"yt-toast__container\"\r\n className=\"pointer-events-all absolute bottom-0 right-0 !left-auto z-[1000] mb-4 mr-4 flex max-w-md flex-col items-end justify-end\"\r\n role=\"log\"\r\n >\r\n <AnimatePresence initial={false}>\r\n {toasts.map((toast: ToastProps) => (\r\n <motion.div\r\n key={toast.id}\r\n transition={{\r\n type: 'spring',\r\n damping: 20,\r\n stiffness: 300,\r\n }}\r\n initial={{ opacity: 0, y: 10, scale: 0.5 }}\r\n animate={{ opacity: 1, y: 0, scale: 1 }}\r\n exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }}\r\n >\r\n <Toast {...toast} onClose={() => handleClose(toast.id)} />\r\n </motion.div>\r\n ))}\r\n </AnimatePresence>\r\n </div>\r\n </ToastContext.Provider>\r\n );\r\n};\r\n\r\nexport const useToast = (): Toaster<ToastReference> => React.useContext(ToastContext);\r\n"],"names":["DEFAULT_AUTO_CLOSE_TIMEOUT","ToastContext","React","insertToastWithoutDuplicates","currentToasts","id","content","options","close","nextToasts","existingToastIndex","findIndex","toast","JSON","stringify","lastDuplicateId","lastUpdated","Date","now","push","ToastProvider","children","props","toasts","setToasts","handleClose","filter","toaster","uuid","update","success","autoClose","type","error","warning","information","loading","Provider","value","className","role","AnimatePresence","initial","map","motion","div","key","transition","damping","stiffness","opacity","y","scale","animate","exit","duration","Toast","onClose","useToast"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Toaster.js","sources":["../../../../src/components/Toast/Toaster.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { v4 as uuid } from 'uuid';\r\nimport { AnimatePresence, motion } from 'framer-motion';\r\nimport { ToastOptions, Toast, ToastProps } from './Toast';\r\nimport './Toast.css';\r\n\r\nconst DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;\r\n\r\ntype ToastCreator<T> = (content: React.ReactNode | ((close: () => void) => React.ReactNode), options?: ToastOptions) => T;\r\n\r\nexport interface Toaster<T> extends ToastCreator<T> {\r\n success: ToastCreator<T>;\r\n error: ToastCreator<T>;\r\n warning: ToastCreator<T>;\r\n information: ToastCreator<T>;\r\n loading: ToastCreator<T>;\r\n}\r\n\r\nexport interface ToastReference {\r\n /** Show a success toast */\r\n success: ToastCreator<void>;\r\n /** Show an error toast */\r\n error: ToastCreator<void>;\r\n /** Show a warning toast */\r\n warning: ToastCreator<void>;\r\n /** Show an information toast */\r\n information: ToastCreator<void>;\r\n /** Show a loading toast */\r\n loading: ToastCreator<void>;\r\n /**\r\n * Close an existing toast.\r\n * The toast function returns a reference to the active toast,\r\n * allowing you to programmatically close it when needed\r\n */\r\n close: () => void;\r\n}\r\n\r\nconst ToastContext = React.createContext<Toaster<ToastReference>>({} as Toaster<ToastReference>);\r\n\r\nexport interface ToastProviderProps {\r\n children: React.ReactNode;\r\n}\r\n\r\ntype InternalToast = Omit<ToastProps, 'onClose'>;\r\n\r\nconst insertToastWithoutDuplicates = (\r\n currentToasts: InternalToast[],\r\n id: string,\r\n content: React.ReactNode,\r\n options: ToastOptions,\r\n close: () => void\r\n): InternalToast[] => {\r\n const nextToasts = [...currentToasts];\r\n const existingToastIndex = currentToasts.findIndex(toast => JSON.stringify(toast.content) === JSON.stringify(content));\r\n\r\n if (existingToastIndex > -1) {\r\n nextToasts[existingToastIndex].lastDuplicateId = id;\r\n nextToasts[existingToastIndex].lastUpdated = Date.now();\r\n } else {\r\n nextToasts.push({\r\n id,\r\n content: typeof content === 'function' ? content(close) : content,\r\n options,\r\n });\r\n }\r\n\r\n return nextToasts;\r\n};\r\n\r\nexport const ToastProvider = ({ children, ...props }: ToastProviderProps): JSX.Element => {\r\n const [toasts, setToasts] = React.useState<InternalToast[]>([]);\r\n\r\n const handleClose = (id: string): void => {\r\n setToasts(currentToasts => currentToasts.filter(toast => toast.id !== id));\r\n };\r\n\r\n // memoize (useCallback) this function,\r\n // it is the value of the context provider and we don't want it to trigger state tree re-renders on provider children\r\n const toaster = React.useCallback((content: React.ReactNode, options: ToastOptions): ToastReference => {\r\n const id = uuid();\r\n const close = (): void => handleClose(id);\r\n\r\n setToasts(currentToasts => insertToastWithoutDuplicates(currentToasts, id, content, options, close));\r\n\r\n const update = (content: React.ReactNode, options: ToastOptions): void => {\r\n setToasts(currentToasts => {\r\n const nextToasts = currentToasts.filter(toast => {\r\n if (toast.lastDuplicateId) {\r\n return toast.lastDuplicateId !== id;\r\n }\r\n\r\n return toast.id !== id;\r\n });\r\n return insertToastWithoutDuplicates(nextToasts, uuid(), content, options, close);\r\n });\r\n };\r\n\r\n const success = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): void => {\r\n update(content, { autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT, ...options, type: 'success' });\r\n };\r\n const error = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): void => {\r\n update(content, { ...options, type: 'error' });\r\n };\r\n const warning = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): void => {\r\n update(content, { ...options, type: 'warning' });\r\n };\r\n const information = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): void => {\r\n update(content, { ...options, type: 'information' });\r\n };\r\n const loading = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): void => {\r\n update(content, { ...options, type: 'loading' });\r\n };\r\n\r\n return {\r\n success,\r\n error,\r\n warning,\r\n information,\r\n loading,\r\n close,\r\n };\r\n }, []) as Toaster<ToastReference>;\r\n\r\n // no need to rebind these every render, do them once in an effect\r\n React.useEffect(() => {\r\n toaster.success = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): ToastReference =>\r\n toaster(content, { autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT, ...options, type: 'success' });\r\n toaster.error = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): ToastReference =>\r\n toaster(content, { ...options, type: 'error' });\r\n toaster.warning = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): ToastReference =>\r\n toaster(content, { ...options, type: 'warning' });\r\n toaster.information = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): ToastReference =>\r\n toaster(content, { ...options, type: 'information' });\r\n toaster.loading = (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>): ToastReference =>\r\n toaster(content, { ...options, type: 'loading' });\r\n }, []);\r\n\r\n return (\r\n <ToastContext.Provider {...props} value={toaster}>\r\n {children}\r\n <div\r\n id=\"yt-toast__container\"\r\n className=\"pointer-events-all absolute bottom-0 right-0 !left-auto z-[1000] mb-4 mr-4 flex max-w-md flex-col items-end justify-end\"\r\n role=\"log\"\r\n >\r\n <AnimatePresence initial={false}>\r\n {toasts.map((toast: ToastProps) => (\r\n <motion.div\r\n key={toast.id}\r\n transition={{\r\n type: 'spring',\r\n damping: 20,\r\n stiffness: 300,\r\n }}\r\n initial={{ opacity: 0, y: 10, scale: 0.5 }}\r\n animate={{ opacity: 1, y: 0, scale: 1 }}\r\n exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }}\r\n >\r\n <Toast {...toast} onClose={() => handleClose(toast.id)} />\r\n </motion.div>\r\n ))}\r\n </AnimatePresence>\r\n </div>\r\n </ToastContext.Provider>\r\n );\r\n};\r\n\r\nexport const useToast = (): Toaster<ToastReference> => React.useContext(ToastContext);\r\n"],"names":["DEFAULT_AUTO_CLOSE_TIMEOUT","ToastContext","React","insertToastWithoutDuplicates","currentToasts","id","content","options","close","nextToasts","existingToastIndex","findIndex","toast","JSON","stringify","lastDuplicateId","lastUpdated","Date","now","push","ToastProvider","children","props","toasts","setToasts","handleClose","filter","toaster","uuid","update","success","autoClose","type","error","warning","information","loading","Provider","value","className","role","AnimatePresence","initial","map","motion","div","key","transition","damping","stiffness","opacity","y","scale","animate","exit","duration","Toast","onClose","useToast"],"mappings":"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"}
|
@@ -1,14 +1,13 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { forwardRef, createElement } from 'react';
|
3
2
|
import { Root, Trigger, Content, Arrow } from '@radix-ui/react-tooltip';
|
4
3
|
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
4
|
+
const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
|
5
|
+
const {
|
6
|
+
title,
|
7
|
+
children,
|
8
|
+
placement,
|
9
|
+
...otherProps
|
10
|
+
} = props;
|
12
11
|
return createElement(Root, {
|
13
12
|
delayDuration: 50
|
14
13
|
}, createElement(Trigger, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\r\n\r\nexport type TooltipProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\r\n children: React.ReactElement | any;\r\n /** Text displayed in the tooltip */\r\n title: string;\r\n /**\r\n * Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\r\n * @defaultValue bottom\r\n */\r\n placement?: 'top' | 'right' | 'bottom' | 'left';\r\n};\r\n\r\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\r\n const { title, children, placement, ...otherProps } = props;\r\n\r\n return (\r\n <TooltipPrimitive.Root delayDuration={50}>\r\n <TooltipPrimitive.Trigger asChild ref={ref as any}>\r\n {children}\r\n </TooltipPrimitive.Trigger>\r\n <TooltipPrimitive.Content {...otherProps} asChild side={placement} sideOffset={3}>\r\n <div\r\n className=\"wcag-purple max-w-[theme(spacing.56)] animate-[fade-in_150ms] rounded-sm px-2 py-1 text-xs font-bold opacity-90\"\r\n data-taco=\"tooltip\"\r\n style={{\r\n transformOrigin: 'var(--radix-tooltip-content-transform-origin)',\r\n }}\r\n >\r\n <TooltipPrimitive.Arrow className=\"fill-purple stroke-purple\" />\r\n {title}\r\n </div>\r\n </TooltipPrimitive.Content>\r\n </TooltipPrimitive.Root>\r\n );\r\n});\r\n"],"names":["Tooltip","React","props","ref","title","children","placement","otherProps","TooltipPrimitive","delayDuration","asChild","side","sideOffset","className","style","transformOrigin"],"mappings":"
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\r\n\r\nexport type TooltipProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\r\n children: React.ReactElement | any;\r\n /** Text displayed in the tooltip */\r\n title: string;\r\n /**\r\n * Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\r\n * @defaultValue bottom\r\n */\r\n placement?: 'top' | 'right' | 'bottom' | 'left';\r\n};\r\n\r\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\r\n const { title, children, placement, ...otherProps } = props;\r\n\r\n return (\r\n <TooltipPrimitive.Root delayDuration={50}>\r\n <TooltipPrimitive.Trigger asChild ref={ref as any}>\r\n {children}\r\n </TooltipPrimitive.Trigger>\r\n <TooltipPrimitive.Content {...otherProps} asChild side={placement} sideOffset={3}>\r\n <div\r\n className=\"wcag-purple max-w-[theme(spacing.56)] animate-[fade-in_150ms] rounded-sm px-2 py-1 text-xs font-bold opacity-90\"\r\n data-taco=\"tooltip\"\r\n style={{\r\n transformOrigin: 'var(--radix-tooltip-content-transform-origin)',\r\n }}\r\n >\r\n <TooltipPrimitive.Arrow className=\"fill-purple stroke-purple\" />\r\n {title}\r\n </div>\r\n </TooltipPrimitive.Content>\r\n </TooltipPrimitive.Root>\r\n );\r\n});\r\n"],"names":["Tooltip","React","props","ref","title","children","placement","otherProps","TooltipPrimitive","delayDuration","asChild","side","sideOffset","className","style","transformOrigin"],"mappings":";;;MAeaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACpC,MAAM;IAAEC,KAAF;IAASC,QAAT;IAAmBC,SAAnB;IAA8B,GAAGC;MAAeL,KAAtD;EAEA,OACID,aAAA,CAACO,IAAD;IAAuBC,aAAa,EAAE;GAAtC,EACIR,aAAA,CAACO,OAAD;IAA0BE,OAAO;IAACP,GAAG,EAAEA;GAAvC,EACKE,QADL,CADJ,EAIIJ,aAAA,CAACO,OAAD,oBAA8BD;IAAYG,OAAO;IAACC,IAAI,EAAEL;IAAWM,UAAU,EAAE;IAA/E,EACIX,aAAA,MAAA;IACIY,SAAS,EAAC;iBACA;IACVC,KAAK,EAAE;MACHC,eAAe,EAAE;;GAJzB,EAOId,aAAA,CAACO,KAAD;IAAwBK,SAAS,EAAC;GAAlC,CAPJ,EAQKT,KARL,CADJ,CAJJ,CADJ;AAmBH,CAtBsB;;;;"}
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
1
|
import { useMemo, Children, useCallback, createElement, useRef, useEffect } from 'react';
|
3
2
|
import { IconButton } from '../IconButton/IconButton.js';
|
4
3
|
import { Button } from '../Button/Button.js';
|
@@ -7,23 +6,22 @@ import keycode from 'keycode';
|
|
7
6
|
import { Group } from '../Group/Group.js';
|
8
7
|
import Joyride, { ACTIONS, LIFECYCLE, EVENTS } from 'react-joyride';
|
9
8
|
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
var onWindowKeyDown = function onWindowKeyDown(event) {
|
9
|
+
const Tooltip = ({
|
10
|
+
continuous,
|
11
|
+
index,
|
12
|
+
isLastStep,
|
13
|
+
step,
|
14
|
+
backProps,
|
15
|
+
primaryProps,
|
16
|
+
skipProps,
|
17
|
+
tooltipProps,
|
18
|
+
size,
|
19
|
+
locale,
|
20
|
+
disableTourSkipOnEsc
|
21
|
+
}) => {
|
22
|
+
const skipButtonRef = useRef(null);
|
23
|
+
useEffect(() => {
|
24
|
+
const onWindowKeyDown = event => {
|
27
25
|
if (!disableTourSkipOnEsc) {
|
28
26
|
if (event.keyCode === keycode('esc') && skipButtonRef.current !== null) {
|
29
27
|
event.preventDefault();
|
@@ -34,7 +32,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
34
32
|
};
|
35
33
|
|
36
34
|
window.addEventListener('keydown', onWindowKeyDown);
|
37
|
-
return
|
35
|
+
return () => {
|
38
36
|
window.removeEventListener('keydown', onWindowKeyDown);
|
39
37
|
};
|
40
38
|
}, []);
|
@@ -53,31 +51,31 @@ var Tooltip = function Tooltip(_ref) {
|
|
53
51
|
appearance: "discrete"
|
54
52
|
}), locale.back), createElement(Button, Object.assign({}, primaryProps, {
|
55
53
|
appearance: "primary"
|
56
|
-
}), continuous ? isLastStep ? locale.last
|
54
|
+
}), continuous ? isLastStep ? `${locale.last} (${index + 1}/${size})` : `${locale.next} (${index + 1}/${size})` : locale.close)));
|
57
55
|
}; // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
58
56
|
|
59
57
|
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
return Children.map(props.children,
|
80
|
-
|
58
|
+
const TourStep = _props => null;
|
59
|
+
const Tour = props => {
|
60
|
+
const {
|
61
|
+
texts: {
|
62
|
+
tour
|
63
|
+
}
|
64
|
+
} = useLocalization();
|
65
|
+
const {
|
66
|
+
autoStart: run,
|
67
|
+
onComplete,
|
68
|
+
onClose,
|
69
|
+
onReady,
|
70
|
+
spotlightClicks,
|
71
|
+
disableCloseOnEsc: disableTourSkipOnEsc,
|
72
|
+
disableScrollParentFix = false,
|
73
|
+
scrollOffset,
|
74
|
+
...rest
|
75
|
+
} = props;
|
76
|
+
const steps = useMemo(() => {
|
77
|
+
return Children.map(props.children, child => {
|
78
|
+
const step = {
|
81
79
|
disableBeacon: !child.props.showBeacon,
|
82
80
|
target: child.props.selector,
|
83
81
|
placement: child.props.position,
|
@@ -87,12 +85,10 @@ var Tour = function Tour(props) {
|
|
87
85
|
return step;
|
88
86
|
});
|
89
87
|
}, [props.children]);
|
90
|
-
|
88
|
+
const getStep = useCallback(selector => {
|
91
89
|
var _props$children$find;
|
92
90
|
|
93
|
-
return (_props$children$find = props.children.find(
|
94
|
-
return child.props.selector === selector;
|
95
|
-
})) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
|
91
|
+
return (_props$children$find = props.children.find(child => child.props.selector === selector)) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
|
96
92
|
}, [props.children]);
|
97
93
|
|
98
94
|
function callback(state) {
|
@@ -122,12 +118,10 @@ var Tour = function Tour(props) {
|
|
122
118
|
floaterProps: {
|
123
119
|
disableAnimation: true
|
124
120
|
},
|
125
|
-
tooltipComponent:
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
}));
|
130
|
-
},
|
121
|
+
tooltipComponent: tooltipProps => createElement(Tooltip, Object.assign({}, tooltipProps, {
|
122
|
+
locale: tour,
|
123
|
+
disableTourSkipOnEsc: disableTourSkipOnEsc
|
124
|
+
})),
|
131
125
|
locale: tour,
|
132
126
|
spotlightPadding: 8,
|
133
127
|
spotlightClicks: spotlightClicks,
|