@economic/taco 1.1.5-alpha.1 → 1.1.8
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/LogOut.d.ts +3 -0
- package/dist/components/Icon/components/Menu.d.ts +3 -0
- package/dist/components/Icon/components/Profile.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/components/Card/Card.js +12 -14
- package/dist/esm/components/Card/Card.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +18 -15
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.js +25 -23
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Datepicker/Datepicker.js +52 -48
- package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +58 -39
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Field/Field.js +12 -10
- package/dist/esm/components/Field/Field.js.map +1 -1
- package/dist/esm/components/Form/Form.js +8 -6
- package/dist/esm/components/Form/Form.js.map +1 -1
- package/dist/esm/components/Group/Group.js +8 -6
- package/dist/esm/components/Group/Group.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +35 -27
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/HoverCard/HoverCard.js +9 -8
- package/dist/esm/components/HoverCard/HoverCard.js.map +1 -1
- package/dist/esm/components/Icon/Icon.js +8 -7
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/Icon/components/LogOut.js +20 -0
- package/dist/esm/components/Icon/components/LogOut.js.map +1 -0
- package/dist/esm/components/Icon/components/Menu.js +18 -0
- package/dist/esm/components/Icon/components/Menu.js.map +1 -0
- package/dist/esm/components/Icon/components/Profile.js +20 -0
- package/dist/esm/components/Icon/components/Profile.js.map +1 -0
- package/dist/esm/components/Icon/components/index.js +6 -0
- package/dist/esm/components/Icon/components/index.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js +11 -9
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/esm/components/Input/Input.js +25 -25
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Listbox/Listbox.js +25 -24
- package/dist/esm/components/Listbox/Listbox.js.map +1 -1
- package/dist/esm/components/Menu/Menu.js +34 -16
- package/dist/esm/components/Menu/Menu.js.map +1 -1
- package/dist/esm/components/Navigation/Navigation.js +44 -35
- package/dist/esm/components/Navigation/Navigation.js.map +1 -1
- package/dist/esm/components/Pagination/Pagination.js +56 -39
- package/dist/esm/components/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +34 -29
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/Progress/Progress.js +15 -11
- package/dist/esm/components/Progress/Progress.js.map +1 -1
- package/dist/esm/components/Provider/Provider.js +18 -13
- package/dist/esm/components/Provider/Provider.js.map +1 -1
- package/dist/esm/components/RadioGroup/RadioGroup.js +57 -45
- package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +11 -11
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/components/Select/Select.js +31 -30
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Spinner/Spinner.js +19 -12
- package/dist/esm/components/Spinner/Spinner.js.map +1 -1
- package/dist/esm/components/Switch/Switch.js +10 -9
- package/dist/esm/components/Switch/Switch.js.map +1 -1
- package/dist/esm/components/Tabs/Tabs.js +27 -25
- package/dist/esm/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/components/Textarea/Textarea.js +9 -11
- package/dist/esm/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/components/Toast/Toaster.js +118 -88
- package/dist/esm/components/Toast/Toaster.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +8 -7
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/components/Tour/Tour.js +50 -44
- package/dist/esm/components/Tour/Tour.js.map +1 -1
- package/dist/esm/components/Treeview/Treeview.js +36 -26
- package/dist/esm/components/Treeview/Treeview.js.map +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js +1 -1
- package/dist/esm/components/VisuallyHidden/VisuallyHidden.js.map +1 -1
- package/dist/esm/index.js +0 -1
- package/dist/esm/index.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 -1
- package/dist/taco.cjs.development.js +913 -724
- 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 +4 -5
- package/tailwind.config.js +0 -5
- package/types.json +5 -2
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\r\n\r\nimport { Orientation } from '../../types';\r\nimport './Tabs.css';\r\n\r\nexport type TabsProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /**\r\n * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\r\n */\r\n id?: string;\r\n /**\r\n * Set which tab is selected on mount.\r\n * This has to be one of the existing ids provided for tabs\r\n */\r\n defaultId?: string;\r\n /**\r\n * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\r\n * followed by one or an array of `Tabs.Content`.\r\n * *Note* that there can also be tabs that are rendered conditionally.\r\n */\r\n children: React.ReactNode;\r\n /**\r\n * Define orientation of tabs.\r\n * @defaultValue horizontal\r\n */\r\n orientation?: Orientation;\r\n /**\r\n * Callback that is called when tab is changed.\r\n */\r\n onChange?: (id: string) => void;\r\n};\r\n\r\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\r\n /**\r\n * A unique value that associates the trigger with a content.\r\n */\r\n id: string;\r\n /**\r\n * When true, prevents the user from interacting with the tab.\r\n */\r\n disabled?: boolean;\r\n};\r\n\r\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /**\r\n * A unique value that associates the content with a trigger.\r\n */\r\n id: string;\r\n};\r\n\r\nexport type ForwardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\r\n /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\r\n List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\r\n /** Tab trigger component rendered in a `Tabs.List` component */\r\n Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\r\n /** Tab content component rendered in a `Tabs` group component */\r\n Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\r\n};\r\n\r\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\r\n const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\r\n const className = cn(\r\n 'yt-tabs',\r\n `yt-tabs--${orientation}`,\r\n {\r\n 'flex w-full': orientation === 'vertical',\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <TabsPrimitive.Root\r\n {...otherProps}\r\n className={className}\r\n data-taco=\"tabs\"\r\n defaultValue={defaultId}\r\n dir=\"ltr\"\r\n onValueChange={onChange}\r\n orientation={orientation}\r\n ref={ref}\r\n value={id}\r\n >\r\n {children}\r\n </TabsPrimitive.Root>\r\n );\r\n}) as ForwardedTabsWithStatics;\r\n\r\nconst TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\r\n const className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);\r\n\r\n return <TabsPrimitive.List {...props} className={className} ref={ref} />;\r\n});\r\n\r\nconst TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, ref: React.Ref<HTMLButtonElement>) {\r\n const { id, disabled, ...otherProps } = props;\r\n const className = cn(\r\n 'yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4',\r\n disabled\r\n ? 'cursor-not-allowed !text-grey-darker'\r\n : 'cursor-pointer rounded-t hover:border-grey-dark aria-selected:border-blue aria-selected:text-black aria-selected:hover:border-blue-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue',\r\n props.className\r\n );\r\n\r\n return (\r\n <TabsPrimitive.Trigger\r\n {...otherProps}\r\n className={className}\r\n disabled={disabled}\r\n ref={ref}\r\n style={{\r\n transition: 'border 0.2s ease-in',\r\n }}\r\n value={id}\r\n />\r\n );\r\n});\r\n\r\nconst TabContent = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\r\n const { id, ...otherProps } = props;\r\n const className = cn('yt-tab__panel outline-none', props.className);\r\n\r\n return <TabsPrimitive.Content {...otherProps} className={className} ref={ref} value={id} />;\r\n});\r\n\r\nTabs.List = TabList;\r\nTabs.Trigger = TabTrigger;\r\nTabs.Content = TabContent;\r\n"],"names":["Tabs","React","props","ref","id","defaultId","children","onChange","orientation","otherProps","className","cn","TabsPrimitive","defaultValue","dir","onValueChange","value","TabList","Tab","TabTrigger","disabled","style","transition","TabContent","List","Trigger","Content"],"mappings":"
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\r\n\r\nimport { Orientation } from '../../types';\r\nimport './Tabs.css';\r\n\r\nexport type TabsProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /**\r\n * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\r\n */\r\n id?: string;\r\n /**\r\n * Set which tab is selected on mount.\r\n * This has to be one of the existing ids provided for tabs\r\n */\r\n defaultId?: string;\r\n /**\r\n * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\r\n * followed by one or an array of `Tabs.Content`.\r\n * *Note* that there can also be tabs that are rendered conditionally.\r\n */\r\n children: React.ReactNode;\r\n /**\r\n * Define orientation of tabs.\r\n * @defaultValue horizontal\r\n */\r\n orientation?: Orientation;\r\n /**\r\n * Callback that is called when tab is changed.\r\n */\r\n onChange?: (id: string) => void;\r\n};\r\n\r\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\r\n /**\r\n * A unique value that associates the trigger with a content.\r\n */\r\n id: string;\r\n /**\r\n * When true, prevents the user from interacting with the tab.\r\n */\r\n disabled?: boolean;\r\n};\r\n\r\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /**\r\n * A unique value that associates the content with a trigger.\r\n */\r\n id: string;\r\n};\r\n\r\nexport type ForwardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\r\n /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\r\n List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\r\n /** Tab trigger component rendered in a `Tabs.List` component */\r\n Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\r\n /** Tab content component rendered in a `Tabs` group component */\r\n Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\r\n};\r\n\r\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\r\n const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\r\n const className = cn(\r\n 'yt-tabs',\r\n `yt-tabs--${orientation}`,\r\n {\r\n 'flex w-full': orientation === 'vertical',\r\n },\r\n props.className\r\n );\r\n\r\n return (\r\n <TabsPrimitive.Root\r\n {...otherProps}\r\n className={className}\r\n data-taco=\"tabs\"\r\n defaultValue={defaultId}\r\n dir=\"ltr\"\r\n onValueChange={onChange}\r\n orientation={orientation}\r\n ref={ref}\r\n value={id}\r\n >\r\n {children}\r\n </TabsPrimitive.Root>\r\n );\r\n}) as ForwardedTabsWithStatics;\r\n\r\nconst TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\r\n const className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);\r\n\r\n return <TabsPrimitive.List {...props} className={className} ref={ref} />;\r\n});\r\n\r\nconst TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, ref: React.Ref<HTMLButtonElement>) {\r\n const { id, disabled, ...otherProps } = props;\r\n const className = cn(\r\n 'yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4',\r\n disabled\r\n ? 'cursor-not-allowed !text-grey-darker'\r\n : 'cursor-pointer rounded-t hover:border-grey-dark aria-selected:border-blue aria-selected:text-black aria-selected:hover:border-blue-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue',\r\n props.className\r\n );\r\n\r\n return (\r\n <TabsPrimitive.Trigger\r\n {...otherProps}\r\n className={className}\r\n disabled={disabled}\r\n ref={ref}\r\n style={{\r\n transition: 'border 0.2s ease-in',\r\n }}\r\n value={id}\r\n />\r\n );\r\n});\r\n\r\nconst TabContent = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\r\n const { id, ...otherProps } = props;\r\n const className = cn('yt-tab__panel outline-none', props.className);\r\n\r\n return <TabsPrimitive.Content {...otherProps} className={className} ref={ref} value={id} />;\r\n});\r\n\r\nTabs.List = TabList;\r\nTabs.Trigger = TabTrigger;\r\nTabs.Content = TabContent;\r\n"],"names":["Tabs","React","props","ref","id","defaultId","children","onChange","orientation","otherProps","className","cn","TabsPrimitive","defaultValue","dir","onValueChange","value","TabList","Tab","TabTrigger","disabled","style","transition","TabContent","List","Trigger","Content"],"mappings":";;;;;;;;IA+DaA,IAAI,gBAAGC,UAAA,CAAiB,SAASD,IAAT,CAAcE,KAAd,EAAgCC,GAAhC;EACjC,IAAQC,EAAR,GAAyFF,KAAzF,CAAQE,EAAR;MAAYC,SAAZ,GAAyFH,KAAzF,CAAYG,SAAZ;MAAuBC,QAAvB,GAAyFJ,KAAzF,CAAuBI,QAAvB;MAAiCC,QAAjC,GAAyFL,KAAzF,CAAiCK,QAAjC;2BAAyFL,KAAzF,CAA2CM,WAA3C;MAA2CA,WAA3C,mCAAyD,YAAzD;MAA0EC,UAA1E,iCAAyFP,KAAzF;;EACA,IAAMQ,SAAS,GAAGC,EAAE,CAChB,SADgB,gBAEJH,WAFI,EAGhB;IACI,eAAeA,WAAW,KAAK;GAJnB,EAMhBN,KAAK,CAACQ,SANU,CAApB;EASA,OACIT,aAAA,CAACW,IAAD,oBACQH;IACJC,SAAS,EAAEA;iBACD;IACVG,YAAY,EAAER;IACdS,GAAG,EAAC;IACJC,aAAa,EAAER;IACfC,WAAW,EAAEA;IACbL,GAAG,EAAEA;IACLa,KAAK,EAAEZ;IATX,EAWKE,QAXL,CADJ;AAeH,CA1BmB;AA4BpB,IAAMW,OAAO,gBAAGhB,UAAA,CAAiB,SAASiB,GAAT,CAAahB,KAAb,EAAkCC,GAAlC;EAC7B,IAAMO,SAAS,GAAGC,EAAE,CAAC,gEAAD,EAAmET,KAAK,CAACQ,SAAzE,CAApB;EAEA,OAAOT,aAAA,CAACW,IAAD,oBAAwBV;IAAOQ,SAAS,EAAEA;IAAWP,GAAG,EAAEA;IAA1D,CAAP;AACH,CAJe,CAAhB;AAMA,IAAMgB,UAAU,gBAAGlB,UAAA,CAAiB,SAASiB,GAAT,CAAahB,KAAb,EAAqCC,GAArC;EAChC,IAAQC,EAAR,GAAwCF,KAAxC,CAAQE,EAAR;MAAYgB,QAAZ,GAAwClB,KAAxC,CAAYkB,QAAZ;MAAyBX,UAAzB,iCAAwCP,KAAxC;;EACA,IAAMQ,SAAS,GAAGC,EAAE,CAChB,qFADgB,EAEhBS,QAAQ,GACF,sCADE,GAEF,+NAJU,EAKhBlB,KAAK,CAACQ,SALU,CAApB;EAQA,OACIT,aAAA,CAACW,OAAD,oBACQH;IACJC,SAAS,EAAEA;IACXU,QAAQ,EAAEA;IACVjB,GAAG,EAAEA;IACLkB,KAAK,EAAE;MACHC,UAAU,EAAE;;IAEhBN,KAAK,EAAEZ;IARX,CADJ;AAYH,CAtBkB,CAAnB;AAwBA,IAAMmB,UAAU,gBAAGtB,UAAA,CAAiB,SAASiB,GAAT,CAAahB,KAAb,EAAqCC,GAArC;EAChC,IAAQC,EAAR,GAA8BF,KAA9B,CAAQE,EAAR;MAAeK,UAAf,iCAA8BP,KAA9B;;EACA,IAAMQ,SAAS,GAAGC,EAAE,CAAC,4BAAD,EAA+BT,KAAK,CAACQ,SAArC,CAApB;EAEA,OAAOT,aAAA,CAACW,OAAD,oBAA2BH;IAAYC,SAAS,EAAEA;IAAWP,GAAG,EAAEA;IAAKa,KAAK,EAAEZ;IAA9E,CAAP;AACH,CALkB,CAAnB;AAOAJ,IAAI,CAACwB,IAAL,GAAYP,OAAZ;AACAjB,IAAI,CAACyB,OAAL,GAAeN,UAAf;AACAnB,IAAI,CAAC0B,OAAL,GAAeH,UAAf;;;;"}
|
@@ -1,23 +1,21 @@
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
1
2
|
import { forwardRef, createElement } from 'react';
|
2
3
|
import cn from 'classnames';
|
3
4
|
import { getInputClasses } from '../Input/util.js';
|
4
5
|
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
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
|
6
|
+
var _excluded = ["defaultValue", "highlighted", "invalid", "onKeyDown"];
|
7
|
+
var Textarea = /*#__PURE__*/forwardRef(function Textarea(props, ref) {
|
8
|
+
var onKeyDown = props.onKeyDown,
|
9
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
10
|
+
|
11
|
+
var 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
|
14
12
|
// if it has scroll height then the browser reverts to native scrolling behaviour only
|
15
13
|
// so we manually override it to ensure _our_ desired behaviour remains intact
|
16
14
|
|
17
|
-
|
15
|
+
var handleKeyDown = function handleKeyDown(event) {
|
18
16
|
if (event.key === 'Home' || event.key === 'End') {
|
19
17
|
event.preventDefault();
|
20
|
-
|
18
|
+
var position = event.key === 'End' ? event.currentTarget.value.length : 0;
|
21
19
|
event.currentTarget.setSelectionRange(position, position);
|
22
20
|
event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
|
23
21
|
}
|
@@ -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","
|
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":";;;;;;IAaaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;MACUC,SAA/C,GAA4EF,KAA5E,CAA+CE,SAA/C;MAA6DC,UAA7D,iCAA4EH,KAA5E;;EACA,IAAMI,UAAU,GAAGC,EAAE,CAACC,eAAe,CAACN,KAAD,CAAhB,EAAyB,wCAAzB,EAAmEA,KAAK,CAACO,SAAzE,CAArB;;;;EAKA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;IAClB,IAAIA,KAAK,CAACC,GAAN,KAAc,MAAd,IAAwBD,KAAK,CAACC,GAAN,KAAc,KAA1C,EAAiD;MAC7CD,KAAK,CAACE,cAAN;MACA,IAAMC,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,OAAOV,aAAA,WAAA,oBAAcI;IAAYI,SAAS,EAAEH;iBAAsB;IAAWF,SAAS,EAAEM;IAAeP,GAAG,EAAEA;IAArG,CAAP;AACH,CArBuB;;;;"}
|
@@ -1,51 +1,65 @@
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
1
2
|
import { useState, useCallback, useEffect, createElement, useContext, createContext } from 'react';
|
2
3
|
import { v4 } from 'uuid';
|
3
4
|
import { AnimatePresence, motion } from 'framer-motion';
|
4
5
|
import { Toast } from './Toast.js';
|
5
6
|
|
6
|
-
|
7
|
-
|
7
|
+
var _excluded = ["children"];
|
8
|
+
var DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;
|
9
|
+
var ToastContext = /*#__PURE__*/createContext({});
|
8
10
|
|
9
|
-
|
10
|
-
|
11
|
-
|
11
|
+
var insertToastWithoutDuplicates = function insertToastWithoutDuplicates(currentToasts, id, content, options, close) {
|
12
|
+
var nextToasts = [].concat(currentToasts);
|
13
|
+
var existingToastIndex = currentToasts.findIndex(function (toast) {
|
14
|
+
return JSON.stringify(toast.content) === JSON.stringify(content);
|
15
|
+
});
|
12
16
|
|
13
17
|
if (existingToastIndex > -1) {
|
14
18
|
nextToasts[existingToastIndex].lastDuplicateId = id;
|
15
19
|
nextToasts[existingToastIndex].lastUpdated = Date.now();
|
16
20
|
} else {
|
17
21
|
nextToasts.push({
|
18
|
-
id,
|
22
|
+
id: id,
|
19
23
|
content: typeof content === 'function' ? content(close) : content,
|
20
|
-
options
|
24
|
+
options: options
|
21
25
|
});
|
22
26
|
}
|
23
27
|
|
24
28
|
return nextToasts;
|
25
29
|
};
|
26
30
|
|
27
|
-
|
28
|
-
children,
|
29
|
-
|
30
|
-
}) => {
|
31
|
-
const [toasts, setToasts] = useState([]);
|
31
|
+
var ToastProvider = function ToastProvider(_ref) {
|
32
|
+
var children = _ref.children,
|
33
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
32
34
|
|
33
|
-
|
34
|
-
|
35
|
+
var _React$useState = useState([]),
|
36
|
+
toasts = _React$useState[0],
|
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
|
+
});
|
35
45
|
}; // memoize (useCallback) this function,
|
36
46
|
// it is the value of the context provider and we don't want it to trigger state tree re-renders on provider children
|
37
47
|
|
38
48
|
|
39
|
-
|
40
|
-
|
49
|
+
var toaster = useCallback(function (content, options) {
|
50
|
+
var id = v4();
|
41
51
|
|
42
|
-
|
52
|
+
var close = function close() {
|
53
|
+
return handleClose(id);
|
54
|
+
};
|
43
55
|
|
44
|
-
setToasts(
|
56
|
+
setToasts(function (currentToasts) {
|
57
|
+
return insertToastWithoutDuplicates(currentToasts, id, content, options, close);
|
58
|
+
});
|
45
59
|
|
46
|
-
|
47
|
-
setToasts(currentToasts
|
48
|
-
|
60
|
+
var update = function update(content, options) {
|
61
|
+
setToasts(function (currentToasts) {
|
62
|
+
var nextToasts = currentToasts.filter(function (toast) {
|
49
63
|
if (toast.lastDuplicateId) {
|
50
64
|
return toast.lastDuplicateId !== id;
|
51
65
|
}
|
@@ -56,70 +70,80 @@ const ToastProvider = ({
|
|
56
70
|
});
|
57
71
|
};
|
58
72
|
|
59
|
-
|
60
|
-
update(content, {
|
61
|
-
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT
|
62
|
-
|
73
|
+
var success = function success(content, options) {
|
74
|
+
update(content, _extends({
|
75
|
+
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT
|
76
|
+
}, options, {
|
63
77
|
type: 'success'
|
64
|
-
});
|
78
|
+
}));
|
65
79
|
};
|
66
80
|
|
67
|
-
|
68
|
-
update(content, {
|
81
|
+
var error = function error(content, options) {
|
82
|
+
update(content, _extends({}, options, {
|
69
83
|
type: 'error'
|
70
|
-
});
|
84
|
+
}));
|
71
85
|
};
|
72
86
|
|
73
|
-
|
74
|
-
update(content, {
|
87
|
+
var warning = function warning(content, options) {
|
88
|
+
update(content, _extends({}, options, {
|
75
89
|
type: 'warning'
|
76
|
-
});
|
90
|
+
}));
|
77
91
|
};
|
78
92
|
|
79
|
-
|
80
|
-
update(content, {
|
93
|
+
var information = function information(content, options) {
|
94
|
+
update(content, _extends({}, options, {
|
81
95
|
type: 'information'
|
82
|
-
});
|
96
|
+
}));
|
83
97
|
};
|
84
98
|
|
85
|
-
|
86
|
-
update(content, {
|
99
|
+
var loading = function loading(content, options) {
|
100
|
+
update(content, _extends({}, options, {
|
87
101
|
type: 'loading'
|
88
|
-
});
|
102
|
+
}));
|
89
103
|
};
|
90
104
|
|
91
105
|
return {
|
92
|
-
success,
|
93
|
-
error,
|
94
|
-
warning,
|
95
|
-
information,
|
96
|
-
loading,
|
97
|
-
close
|
106
|
+
success: success,
|
107
|
+
error: error,
|
108
|
+
warning: warning,
|
109
|
+
information: information,
|
110
|
+
loading: loading,
|
111
|
+
close: close
|
98
112
|
};
|
99
113
|
}, []); // no need to rebind these every render, do them once in an effect
|
100
114
|
|
101
|
-
useEffect(()
|
102
|
-
toaster.success = (content, options)
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
115
|
+
useEffect(function () {
|
116
|
+
toaster.success = function (content, options) {
|
117
|
+
return toaster(content, _extends({
|
118
|
+
autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT
|
119
|
+
}, options, {
|
120
|
+
type: 'success'
|
121
|
+
}));
|
122
|
+
};
|
107
123
|
|
108
|
-
toaster.error = (content, options)
|
109
|
-
|
110
|
-
|
124
|
+
toaster.error = function (content, options) {
|
125
|
+
return toaster(content, _extends({}, options, {
|
126
|
+
type: 'error'
|
127
|
+
}));
|
128
|
+
};
|
111
129
|
|
112
|
-
toaster.warning = (content, options)
|
113
|
-
|
114
|
-
|
130
|
+
toaster.warning = function (content, options) {
|
131
|
+
return toaster(content, _extends({}, options, {
|
132
|
+
type: 'warning'
|
133
|
+
}));
|
134
|
+
};
|
115
135
|
|
116
|
-
toaster.information = (content, options)
|
117
|
-
|
118
|
-
|
136
|
+
toaster.information = function (content, options) {
|
137
|
+
return toaster(content, _extends({}, options, {
|
138
|
+
type: 'information'
|
139
|
+
}));
|
140
|
+
};
|
119
141
|
|
120
|
-
toaster.loading = (content, options)
|
121
|
-
|
122
|
-
|
142
|
+
toaster.loading = function (content, options) {
|
143
|
+
return toaster(content, _extends({}, options, {
|
144
|
+
type: 'loading'
|
145
|
+
}));
|
146
|
+
};
|
123
147
|
}, []);
|
124
148
|
return createElement(ToastContext.Provider, Object.assign({}, props, {
|
125
149
|
value: toaster
|
@@ -129,35 +153,41 @@ const ToastProvider = ({
|
|
129
153
|
role: "log"
|
130
154
|
}, createElement(AnimatePresence, {
|
131
155
|
initial: false
|
132
|
-
}, toasts.map(
|
133
|
-
|
134
|
-
|
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,
|
156
|
+
}, toasts.map(function (toast) {
|
157
|
+
return createElement(motion.div, {
|
158
|
+
key: toast.id,
|
152
159
|
transition: {
|
153
|
-
|
160
|
+
type: 'spring',
|
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);
|
154
184
|
}
|
155
|
-
}
|
156
|
-
}
|
157
|
-
|
158
|
-
|
185
|
+
})));
|
186
|
+
}))));
|
187
|
+
};
|
188
|
+
var useToast = function useToast() {
|
189
|
+
return useContext(ToastContext);
|
159
190
|
};
|
160
|
-
const useToast = () => useContext(ToastContext);
|
161
191
|
|
162
192
|
export { ToastProvider, useToast };
|
163
193
|
//# 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,13 +1,14 @@
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
1
2
|
import { forwardRef, createElement } from 'react';
|
2
3
|
import { Root, Trigger, Content, Arrow } from '@radix-ui/react-tooltip';
|
3
4
|
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
5
|
+
var _excluded = ["title", "children", "placement"];
|
6
|
+
var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
|
7
|
+
var title = props.title,
|
8
|
+
children = props.children,
|
9
|
+
placement = props.placement,
|
10
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
11
|
+
|
11
12
|
return createElement(Root, {
|
12
13
|
delayDuration: 50
|
13
14
|
}, 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":";;;;;IAeaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACpC,IAAQC,KAAR,GAAsDF,KAAtD,CAAQE,KAAR;MAAeC,QAAf,GAAsDH,KAAtD,CAAeG,QAAf;MAAyBC,SAAzB,GAAsDJ,KAAtD,CAAyBI,SAAzB;MAAuCC,UAAvC,iCAAsDL,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,3 +1,4 @@
|
|
1
|
+
import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
1
2
|
import { useMemo, Children, useCallback, createElement, useRef, useEffect } from 'react';
|
2
3
|
import { IconButton } from '../IconButton/IconButton.js';
|
3
4
|
import { Button } from '../Button/Button.js';
|
@@ -6,22 +7,23 @@ import keycode from 'keycode';
|
|
6
7
|
import { Group } from '../Group/Group.js';
|
7
8
|
import Joyride, { ACTIONS, LIFECYCLE, EVENTS } from 'react-joyride';
|
8
9
|
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
10
|
+
var _excluded = ["autoStart", "onComplete", "onClose", "onReady", "spotlightClicks", "disableCloseOnEsc", "disableScrollParentFix"];
|
11
|
+
|
12
|
+
var Tooltip = function Tooltip(_ref) {
|
13
|
+
var continuous = _ref.continuous,
|
14
|
+
index = _ref.index,
|
15
|
+
isLastStep = _ref.isLastStep,
|
16
|
+
step = _ref.step,
|
17
|
+
backProps = _ref.backProps,
|
18
|
+
primaryProps = _ref.primaryProps,
|
19
|
+
skipProps = _ref.skipProps,
|
20
|
+
tooltipProps = _ref.tooltipProps,
|
21
|
+
size = _ref.size,
|
22
|
+
locale = _ref.locale,
|
23
|
+
disableTourSkipOnEsc = _ref.disableTourSkipOnEsc;
|
24
|
+
var skipButtonRef = useRef(null);
|
25
|
+
useEffect(function () {
|
26
|
+
var onWindowKeyDown = function onWindowKeyDown(event) {
|
25
27
|
if (!disableTourSkipOnEsc) {
|
26
28
|
if (event.keyCode === keycode('esc') && skipButtonRef.current !== null) {
|
27
29
|
event.preventDefault();
|
@@ -32,7 +34,7 @@ const Tooltip = ({
|
|
32
34
|
};
|
33
35
|
|
34
36
|
window.addEventListener('keydown', onWindowKeyDown);
|
35
|
-
return ()
|
37
|
+
return function () {
|
36
38
|
window.removeEventListener('keydown', onWindowKeyDown);
|
37
39
|
};
|
38
40
|
}, []);
|
@@ -51,30 +53,30 @@ const Tooltip = ({
|
|
51
53
|
appearance: "discrete"
|
52
54
|
}), locale.back), createElement(Button, Object.assign({}, primaryProps, {
|
53
55
|
appearance: "primary"
|
54
|
-
}), continuous ? isLastStep ?
|
56
|
+
}), continuous ? isLastStep ? locale.last + " (" + (index + 1) + "/" + size + ")" : locale.next + " (" + (index + 1) + "/" + size + ")" : locale.close)));
|
55
57
|
}; // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
56
58
|
|
57
59
|
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
return Children.map(props.children, child
|
77
|
-
|
60
|
+
var TourStep = function TourStep(_props) {
|
61
|
+
return null;
|
62
|
+
};
|
63
|
+
var Tour = function Tour(props) {
|
64
|
+
var _useLocalization = useLocalization(),
|
65
|
+
tour = _useLocalization.texts.tour;
|
66
|
+
|
67
|
+
var run = props.autoStart,
|
68
|
+
onComplete = props.onComplete,
|
69
|
+
onClose = props.onClose,
|
70
|
+
onReady = props.onReady,
|
71
|
+
spotlightClicks = props.spotlightClicks,
|
72
|
+
disableTourSkipOnEsc = props.disableCloseOnEsc,
|
73
|
+
_props$disableScrollP = props.disableScrollParentFix,
|
74
|
+
disableScrollParentFix = _props$disableScrollP === void 0 ? false : _props$disableScrollP,
|
75
|
+
rest = _objectWithoutPropertiesLoose(props, _excluded);
|
76
|
+
|
77
|
+
var steps = useMemo(function () {
|
78
|
+
return Children.map(props.children, function (child) {
|
79
|
+
var step = {
|
78
80
|
disableBeacon: !child.props.showBeacon,
|
79
81
|
target: child.props.selector,
|
80
82
|
placement: child.props.position,
|
@@ -84,10 +86,12 @@ const Tour = props => {
|
|
84
86
|
return step;
|
85
87
|
});
|
86
88
|
}, [props.children]);
|
87
|
-
|
89
|
+
var getStep = useCallback(function (selector) {
|
88
90
|
var _props$children$find;
|
89
91
|
|
90
|
-
return (_props$children$find = props.children.find(
|
92
|
+
return (_props$children$find = props.children.find(function (child) {
|
93
|
+
return child.props.selector === selector;
|
94
|
+
})) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
|
91
95
|
}, [props.children]);
|
92
96
|
|
93
97
|
function callback(state) {
|
@@ -117,10 +121,12 @@ const Tour = props => {
|
|
117
121
|
floaterProps: {
|
118
122
|
disableAnimation: true
|
119
123
|
},
|
120
|
-
tooltipComponent:
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
+
tooltipComponent: function tooltipComponent(tooltipProps) {
|
125
|
+
return createElement(Tooltip, Object.assign({}, tooltipProps, {
|
126
|
+
locale: tour,
|
127
|
+
disableTourSkipOnEsc: disableTourSkipOnEsc
|
128
|
+
}));
|
129
|
+
},
|
124
130
|
locale: tour,
|
125
131
|
spotlightPadding: 8,
|
126
132
|
spotlightClicks: spotlightClicks,
|