@economic/taco 1.7.0 → 1.8.1

package/dist/esm/components/Toast/Toast.js

@@ -73,7 +73,7 @@ const Toast = ({
     className: "flex-grow"
   }, content), React__default.createElement(IconButton, {
     appearance: "discrete",
-    className: "text-grey-darkest -mr-2 cursor-pointer !px-0",
+    className: "text-grey-darkest -mr-2 cursor-pointer self-start !px-0",
     icon: "close",
     "aria-label": texts.toasts.dismiss,
     onClick: handleClose

package/dist/esm/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { motion, useAnimation } from 'framer-motion';\nimport useTimer from '../../utils/hooks/useTimer';\nimport { getBadgeIcon } from './util';\nimport { State } from '../../types';\nimport { useLocalization } from '../Provider/Provider';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type ToastsTexts = {\n    /** Aria-label for the close icon button of toast */\n    dismiss: string;\n};\n\nexport type ToastType = Omit<State, 'default'> | 'loading';\nexport type ToastOptions = {\n    /** Provide time in milliseconds after which the toast should autoclose */\n    autoClose?: number;\n    /**\n     * State will change the icon displayed in toast and other characteristics,\n     * for e.g. `loading` state will display a progress animation.\n     * Default value is `default`\n     */\n    type?: ToastType;\n};\nexport type ToastContent = Omit<React.ReactNode, 'null' | 'undefined'>;\nexport type ToastProps = {\n    /** Provide a unique id for toast */\n    id: string;\n    /**\n     * Content can be any valid react node, for e.g. a `div`, or a simple text.\n     */\n    content: ToastContent;\n    /** Additional options to define your toast */\n    options: ToastOptions;\n    /**\n     * Handler called when toast closes.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    onClose: () => void;\n    lastUpdated?: number;\n    lastDuplicateId?: string;\n};\n\nexport const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }: ToastProps): JSX.Element => {\n    const { texts } = useLocalization();\n    const { autoClose, type = 'default' } = options;\n    const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow', {\n        'border border-grey': type === 'default' || type === 'loading' || !type,\n        'border border-grey-darker': type === 'success',\n        'border border-blue': type === 'information',\n        'border border-yellow-dark': type === 'warning',\n        'border border-red': type === 'error',\n    });\n    const timer = useTimer(autoClose, handleClose);\n    const controls = useAnimation();\n\n    if (!content) {\n        console.warn(\n            `Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${\n                content === '' ? 'empty string' : content\n            }.`\n        );\n    }\n\n    React.useEffect(() => {\n        if (autoClose) {\n            timer.start();\n        }\n    }, [autoClose]);\n\n    const triggerUpdateAnimation = async () => {\n        await controls.start({ scale: 1.05 });\n        await controls.start({ scale: 1 });\n    };\n\n    React.useEffect(() => {\n        if (lastUpdated) {\n            triggerUpdateAnimation();\n\n            if (timer.running) {\n                timer.start();\n            }\n        }\n    }, [lastUpdated]);\n\n    return (\n        <motion.div\n            {...props}\n            animate={controls}\n            className={className}\n            data-taco=\"toast\"\n            onMouseEnter={timer.pause}\n            onMouseLeave={timer.resume}>\n            {getBadgeIcon(type)}\n            <div className=\"flex-grow\">{content}</div>\n            <IconButton\n                appearance=\"discrete\"\n                className=\"text-grey-darkest -mr-2 cursor-pointer !px-0\"\n                icon=\"close\"\n                aria-label={texts.toasts.dismiss}\n                onClick={handleClose}\n            />\n        </motion.div>\n    );\n};\n"],"names":["Toast","content","lastUpdated","onClose","handleClose","options","props","texts","useLocalization","autoClose","type","className","cn","timer","useTimer","controls","useAnimation","console","warn","React","useEffect","start","triggerUpdateAnimation","scale","running","motion","div","animate","onMouseEnter","pause","onMouseLeave","resume","getBadgeIcon","IconButton","appearance","icon","toasts","dismiss","onClick"],"mappings":";;;;;;;;MA4CaA,KAAK,GAAG,CAAC;EAAEC,OAAF;EAAWC,WAAX;EAAwBC,OAAO,EAAEC,WAAjC;EAA8CC,OAA9C;EAAuD,GAAGC;AAA1D,CAAD;EACjB,MAAM;IAAEC;MAAUC,eAAe,EAAjC;EACA,MAAM;IAAEC,SAAF;IAAaC,IAAI,GAAG;MAAcL,OAAxC;EACA,MAAMM,SAAS,GAAGC,EAAE,CAAC,6EAAD,EAAgF;IAChG,sBAAsBF,IAAI,KAAK,SAAT,IAAsBA,IAAI,KAAK,SAA/B,IAA4C,CAACA,IAD6B;IAEhG,6BAA6BA,IAAI,KAAK,SAF0D;IAGhG,sBAAsBA,IAAI,KAAK,aAHiE;IAIhG,6BAA6BA,IAAI,KAAK,SAJ0D;IAKhG,qBAAqBA,IAAI,KAAK;GALd,CAApB;EAOA,MAAMG,KAAK,GAAGC,QAAQ,CAACL,SAAD,EAAYL,WAAZ,CAAtB;EACA,MAAMW,QAAQ,GAAGC,YAAY,EAA7B;;EAEA,IAAI,CAACf,OAAL,EAAc;IACVgB,OAAO,CAACC,IAAR,uHAEQjB,OAAO,KAAK,EAAZ,GAAiB,cAAjB,GAAkCA,UAF1C;;;EAOJkB,cAAK,CAACC,SAAN,CAAgB;IACZ,IAAIX,SAAJ,EAAe;MACXI,KAAK,CAACQ,KAAN;;GAFR,EAIG,CAACZ,SAAD,CAJH;;EAMA,MAAMa,sBAAsB;IAAA;6BAClBP,QAAQ,CAACM,KAAT,CAAe;QAAEE,KAAK,EAAE;OAAxB;+BACAR,QAAQ,CAACM,KAAT,CAAe;UAAEE,KAAK,EAAE;SAAxB;;KAFkB;MAAA;;GAA5B;;EAKAJ,cAAK,CAACC,SAAN,CAAgB;IACZ,IAAIlB,WAAJ,EAAiB;MACboB,sBAAsB;;MAEtB,IAAIT,KAAK,CAACW,OAAV,EAAmB;QACfX,KAAK,CAACQ,KAAN;;;GALZ,EAQG,CAACnB,WAAD,CARH;EAUA,OACIiB,4BAAA,CAACM,MAAM,CAACC,GAAR,oBACQpB;IACJqB,OAAO,EAAEZ;IACTJ,SAAS,EAAEA;iBACD;IACViB,YAAY,EAAEf,KAAK,CAACgB;IACpBC,YAAY,EAAEjB,KAAK,CAACkB;IANxB,EAOKC,YAAY,CAACtB,IAAD,CAPjB,EAQIS,4BAAA,MAAA;IAAKR,SAAS,EAAC;GAAf,EAA4BV,OAA5B,CARJ,EASIkB,4BAAA,CAACc,UAAD;IACIC,UAAU,EAAC;IACXvB,SAAS,EAAC;IACVwB,IAAI,EAAC;kBACO5B,KAAK,CAAC6B,MAAN,CAAaC;IACzBC,OAAO,EAAElC;GALb,CATJ,CADJ;AAmBH;;;;"}
+{"version":3,"file":"Toast.js","sources":["../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { motion, useAnimation } from 'framer-motion';\nimport useTimer from '../../utils/hooks/useTimer';\nimport { getBadgeIcon } from './util';\nimport { State } from '../../types';\nimport { useLocalization } from '../Provider/Provider';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type ToastsTexts = {\n    /** Aria-label for the close icon button of toast */\n    dismiss: string;\n};\n\nexport type ToastType = Omit<State, 'default'> | 'loading';\nexport type ToastOptions = {\n    /** Provide time in milliseconds after which the toast should autoclose */\n    autoClose?: number;\n    /**\n     * State will change the icon displayed in toast and other characteristics,\n     * for e.g. `loading` state will display a progress animation.\n     * Default value is `default`\n     */\n    type?: ToastType;\n};\nexport type ToastContent = Omit<React.ReactNode, 'null' | 'undefined'>;\nexport type ToastProps = {\n    /** Provide a unique id for toast */\n    id: string;\n    /**\n     * Content can be any valid react node, for e.g. a `div`, or a simple text.\n     */\n    content: ToastContent;\n    /** Additional options to define your toast */\n    options: ToastOptions;\n    /**\n     * Handler called when toast closes.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    onClose: () => void;\n    lastUpdated?: number;\n    lastDuplicateId?: string;\n};\n\nexport const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }: ToastProps): JSX.Element => {\n    const { texts } = useLocalization();\n    const { autoClose, type = 'default' } = options;\n    const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow', {\n        'border border-grey': type === 'default' || type === 'loading' || !type,\n        'border border-grey-darker': type === 'success',\n        'border border-blue': type === 'information',\n        'border border-yellow-dark': type === 'warning',\n        'border border-red': type === 'error',\n    });\n    const timer = useTimer(autoClose, handleClose);\n    const controls = useAnimation();\n\n    if (!content) {\n        console.warn(\n            `Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${\n                content === '' ? 'empty string' : content\n            }.`\n        );\n    }\n\n    React.useEffect(() => {\n        if (autoClose) {\n            timer.start();\n        }\n    }, [autoClose]);\n\n    const triggerUpdateAnimation = async () => {\n        await controls.start({ scale: 1.05 });\n        await controls.start({ scale: 1 });\n    };\n\n    React.useEffect(() => {\n        if (lastUpdated) {\n            triggerUpdateAnimation();\n\n            if (timer.running) {\n                timer.start();\n            }\n        }\n    }, [lastUpdated]);\n\n    return (\n        <motion.div\n            {...props}\n            animate={controls}\n            className={className}\n            data-taco=\"toast\"\n            onMouseEnter={timer.pause}\n            onMouseLeave={timer.resume}>\n            {getBadgeIcon(type)}\n            <div className=\"flex-grow\">{content}</div>\n            <IconButton\n                appearance=\"discrete\"\n                className=\"text-grey-darkest -mr-2 cursor-pointer self-start !px-0\"\n                icon=\"close\"\n                aria-label={texts.toasts.dismiss}\n                onClick={handleClose}\n            />\n        </motion.div>\n    );\n};\n"],"names":["Toast","content","lastUpdated","onClose","handleClose","options","props","texts","useLocalization","autoClose","type","className","cn","timer","useTimer","controls","useAnimation","console","warn","React","useEffect","start","triggerUpdateAnimation","scale","running","motion","div","animate","onMouseEnter","pause","onMouseLeave","resume","getBadgeIcon","IconButton","appearance","icon","toasts","dismiss","onClick"],"mappings":";;;;;;;;MA4CaA,KAAK,GAAG,CAAC;EAAEC,OAAF;EAAWC,WAAX;EAAwBC,OAAO,EAAEC,WAAjC;EAA8CC,OAA9C;EAAuD,GAAGC;AAA1D,CAAD;EACjB,MAAM;IAAEC;MAAUC,eAAe,EAAjC;EACA,MAAM;IAAEC,SAAF;IAAaC,IAAI,GAAG;MAAcL,OAAxC;EACA,MAAMM,SAAS,GAAGC,EAAE,CAAC,6EAAD,EAAgF;IAChG,sBAAsBF,IAAI,KAAK,SAAT,IAAsBA,IAAI,KAAK,SAA/B,IAA4C,CAACA,IAD6B;IAEhG,6BAA6BA,IAAI,KAAK,SAF0D;IAGhG,sBAAsBA,IAAI,KAAK,aAHiE;IAIhG,6BAA6BA,IAAI,KAAK,SAJ0D;IAKhG,qBAAqBA,IAAI,KAAK;GALd,CAApB;EAOA,MAAMG,KAAK,GAAGC,QAAQ,CAACL,SAAD,EAAYL,WAAZ,CAAtB;EACA,MAAMW,QAAQ,GAAGC,YAAY,EAA7B;;EAEA,IAAI,CAACf,OAAL,EAAc;IACVgB,OAAO,CAACC,IAAR,uHAEQjB,OAAO,KAAK,EAAZ,GAAiB,cAAjB,GAAkCA,UAF1C;;;EAOJkB,cAAK,CAACC,SAAN,CAAgB;IACZ,IAAIX,SAAJ,EAAe;MACXI,KAAK,CAACQ,KAAN;;GAFR,EAIG,CAACZ,SAAD,CAJH;;EAMA,MAAMa,sBAAsB;IAAA;6BAClBP,QAAQ,CAACM,KAAT,CAAe;QAAEE,KAAK,EAAE;OAAxB;+BACAR,QAAQ,CAACM,KAAT,CAAe;UAAEE,KAAK,EAAE;SAAxB;;KAFkB;MAAA;;GAA5B;;EAKAJ,cAAK,CAACC,SAAN,CAAgB;IACZ,IAAIlB,WAAJ,EAAiB;MACboB,sBAAsB;;MAEtB,IAAIT,KAAK,CAACW,OAAV,EAAmB;QACfX,KAAK,CAACQ,KAAN;;;GALZ,EAQG,CAACnB,WAAD,CARH;EAUA,OACIiB,4BAAA,CAACM,MAAM,CAACC,GAAR,oBACQpB;IACJqB,OAAO,EAAEZ;IACTJ,SAAS,EAAEA;iBACD;IACViB,YAAY,EAAEf,KAAK,CAACgB;IACpBC,YAAY,EAAEjB,KAAK,CAACkB;IANxB,EAOKC,YAAY,CAACtB,IAAD,CAPjB,EAQIS,4BAAA,MAAA;IAAKR,SAAS,EAAC;GAAf,EAA4BV,OAA5B,CARJ,EASIkB,4BAAA,CAACc,UAAD;IACIC,UAAU,EAAC;IACXvB,SAAS,EAAC;IACVwB,IAAI,EAAC;kBACO5B,KAAK,CAAC6B,MAAN,CAAaC;IACzBC,OAAO,EAAElC;GALb,CATJ,CADJ;AAmBH;;;;"}

package/dist/esm/components/Toast/util.js

@@ -4,13 +4,13 @@ import { Icon } from '../Icon/Icon.js';
 import { Spinner } from '../Spinner/Spinner.js';
 
 const getBadgeIcon = type => {
-  const css = 'rounded-full flex-shrink-0 mr-2';
+  const css = 'rounded-full flex-shrink-0 mr-2 mt-1 self-start';
 
   switch (type) {
     case 'success':
       return React__default.createElement(Icon, {
         name: "tick",
-        className: cn(css, 'yt-green-solid')
+        className: cn(css, 'yt-green-solid ')
       });
 
     case 'warning':

package/dist/esm/components/Toast/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../src/components/Toast/util.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon } from '../Icon/Icon';\nimport { Spinner } from '../Spinner/Spinner';\nimport { ToastType } from './Toast';\n\nexport const getBadgeIcon = (type: ToastType): JSX.Element | null => {\n    const css = 'rounded-full flex-shrink-0 mr-2';\n\n    switch (type) {\n        case 'success':\n            return <Icon name=\"tick\" className={cn(css, 'yt-green-solid')} />;\n\n        case 'warning':\n            return <Icon name=\"warning\" className={cn(css, 'yt-yellow-solid')} />;\n\n        case 'error':\n            return <Icon name=\"warning\" className={cn(css, 'yt-red-solid')} />;\n\n        case 'information':\n            return <Icon name=\"info\" className={cn(css, 'yt-blue-solid')} />;\n\n        case 'loading':\n            return <Spinner delay={0} className={cn(css, 'h-6 w-6')} />;\n\n        default:\n            return null;\n    }\n};\n"],"names":["getBadgeIcon","type","css","React","Icon","name","className","cn","Spinner","delay"],"mappings":";;;;;MAMaA,YAAY,GAAIC,IAAD;EACxB,MAAMC,GAAG,GAAG,iCAAZ;;EAEA,QAAQD,IAAR;IACI,KAAK,SAAL;MACI,OAAOE,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAOC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,gBAAN;OAA/B,CAAP;;IAEJ,KAAK,SAAL;MACI,OAAOC,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAUC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,iBAAN;OAAlC,CAAP;;IAEJ,KAAK,OAAL;MACI,OAAOC,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAUC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,cAAN;OAAlC,CAAP;;IAEJ,KAAK,aAAL;MACI,OAAOC,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAOC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,eAAN;OAA/B,CAAP;;IAEJ,KAAK,SAAL;MACI,OAAOC,4BAAA,CAACK,OAAD;QAASC,KAAK,EAAE;QAAGH,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,SAAN;OAAhC,CAAP;;IAEJ;MACI,OAAO,IAAP;;AAEX;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../src/components/Toast/util.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon } from '../Icon/Icon';\nimport { Spinner } from '../Spinner/Spinner';\nimport { ToastType } from './Toast';\n\nexport const getBadgeIcon = (type: ToastType): JSX.Element | null => {\n    const css = 'rounded-full flex-shrink-0 mr-2 mt-1 self-start';\n\n    switch (type) {\n        case 'success':\n            return <Icon name=\"tick\" className={cn(css, 'yt-green-solid ')} />;\n\n        case 'warning':\n            return <Icon name=\"warning\" className={cn(css, 'yt-yellow-solid')} />;\n\n        case 'error':\n            return <Icon name=\"warning\" className={cn(css, 'yt-red-solid')} />;\n\n        case 'information':\n            return <Icon name=\"info\" className={cn(css, 'yt-blue-solid')} />;\n\n        case 'loading':\n            return <Spinner delay={0} className={cn(css, 'h-6 w-6')} />;\n\n        default:\n            return null;\n    }\n};\n"],"names":["getBadgeIcon","type","css","React","Icon","name","className","cn","Spinner","delay"],"mappings":";;;;;MAMaA,YAAY,GAAIC,IAAD;EACxB,MAAMC,GAAG,GAAG,iDAAZ;;EAEA,QAAQD,IAAR;IACI,KAAK,SAAL;MACI,OAAOE,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAOC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,iBAAN;OAA/B,CAAP;;IAEJ,KAAK,SAAL;MACI,OAAOC,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAUC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,iBAAN;OAAlC,CAAP;;IAEJ,KAAK,OAAL;MACI,OAAOC,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAUC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,cAAN;OAAlC,CAAP;;IAEJ,KAAK,aAAL;MACI,OAAOC,4BAAA,CAACC,IAAD;QAAMC,IAAI,EAAC;QAAOC,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,eAAN;OAA/B,CAAP;;IAEJ,KAAK,SAAL;MACI,OAAOC,4BAAA,CAACK,OAAD;QAASC,KAAK,EAAE;QAAGH,SAAS,EAAEC,EAAE,CAACL,GAAD,EAAM,SAAN;OAAhC,CAAP;;IAEJ;MACI,OAAO,IAAP;;AAEX;;;;"}

package/dist/taco.cjs.development.js

@@ -3697,13 +3697,13 @@ const Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props,
 });
 
 const getBadgeIcon = type => {
-  const css = 'rounded-full flex-shrink-0 mr-2';
+  const css = 'rounded-full flex-shrink-0 mr-2 mt-1 self-start';
 
   switch (type) {
     case 'success':
       return React__default.createElement(Icon, {
         name: "tick",
-        className: cn(css, 'yt-green-solid')
+        className: cn(css, 'yt-green-solid ')
       });
 
     case 'warning':
@@ -3802,7 +3802,7 @@ const Toast = ({
     className: "flex-grow"
   }, content), React__default.createElement(IconButton, {
     appearance: "discrete",
-    className: "text-grey-darkest -mr-2 cursor-pointer !px-0",
+    className: "text-grey-darkest -mr-2 cursor-pointer self-start !px-0",
     icon: "close",
     "aria-label": texts.toasts.dismiss,
     onClick: handleClose