npm - @atom-learning/components - Versions diffs - 6.5.4 → 6.6.0-beta.0 - Mend

@atom-learning/components 6.5.4 → 6.6.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/dist/components/toast/ToastProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '~/styled'\n\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './ToastContext'\n\nexport { default as toast } from 'react-hot-toast'\nexport { useToastContext } from './ToastContext'\n\nconst ToastProviderBase = styled('div', {\n base: ['fixed', 'z-2147483647', 'inset-2', 'pointer-events-none', 'sm:top-3']\n})\n\nconst ToastWrapper = styled('div', {\n base: [\n 'absolute',\n 'w-full',\n 'flex',\n 'justify-center',\n 'items-center',\n 'rounded-sm',\n 'min-h-12',\n '[--slide-opacity-out:0]',\n '[--slide-direction-out-y:-100%]'\n ],\n variants: {\n visible: {\n true: ['motion-safe:animate-slide-direction-in'],\n false: ['opacity-0', 'motion-safe:animate-slide-direction-out']\n }\n }\n})\n\nexport const ToastProvider = ({\n children,\n className\n}: React.PropsWithChildren<{ className?: string }>) => {\n const { toasts, handlers } = useToaster()\n const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n return (\n <>\n <ToastProviderBase\n onMouseEnter={startPause}\n onMouseLeave={endPause}\n className={className}\n >\n {toasts.map((toast) => {\n const { message: children } = toast\n\n const offset = calculateOffset(toast.id, {\n reverseOrder: true,\n margin: 8\n })\n\n const ref = (el: HTMLDivElement \| null) => {\n if (el && toast.height === undefined) {\n updateHeight(toast.id, el.getBoundingClientRect().height)\n }\n }\n\n return (\n <ToastWrapper\n key={toast.id}\n ref={ref}\n visible={toast.visible}\n role={toast.role}\n aria-live={toast.ariaLive}\n style={{ '--offset': `${offset}px` }}\n className=\"top-(--offset)\"\n >\n <ToastContext.Provider value={toast}>\n {typeof children === 'function' ? (\n children(toast)\n ) : React.isValidElement(children) ? (\n children\n ) : (\n <Toast className=\"w-100\">\n {toast.type === 'error' && <Toast.Icon is={Error} />}\n <Text>{children}</Text>\n <Spacer />\n <Toast.Close />\n </Toast>\n )}\n </ToastContext.Provider>\n </ToastWrapper>\n )\n })}\n </ToastProviderBase>\n {children}\n </>\n )\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"mappings":";;;;;;;;;AAcA,IAAM,IAAoB,EAAO,OAAO,EACtC,MAAM;CAAC;CAAS;CAAgB;CAAW;CAAuB;CAAW,EAC9E,CAAC,EAEI,IAAe,EAAO,OAAO;CACjC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,SAAS;EACP,MAAM,CAAC,yCAAyC;EAChD,OAAO,CAAC,aAAa,0CAA0C;EAChE,EACF;CACF,CAAC,EAEW,KAAiB,EAC5B,aACA,mBACqD;CACrD,IAAM,EAAE,WAAQ,gBAAa,GAAY,EACnC,EAAE,eAAY,aAAU,oBAAiB,oBAAiB;AAEhE,QACE,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,GAAD;EACE,cAAc;EACd,cAAc;EACH;EA2CO,EAzCjB,EAAO,KAAK,MAAU;EACrB,IAAM,EAAE,SAAS,MAAa,GAExB,IAAS,EAAgB,EAAM,IAAI;GACvC,cAAc;GACd,QAAQ;GACT,CAAC;AAQF,SACE,kBAAA,cAAC,GAAD;GACE,KAAK,EAAM;GACN,MATI,MAA8B;AACzC,IAAI,KAAM,EAAM,WAAW,KAAA,KACzB,EAAa,EAAM,IAAI,EAAG,uBAAuB,CAAC,OAAO;;GAQzD,SAAS,EAAM;GACf,MAAM,EAAM;GACZ,aAAW,EAAM;GACjB,OAAO,EAAE,YAAY,GAAG,EAAO,KAAK;GACpC,WAAU;GAgBG,EAdb,kBAAA,cAAC,EAAa,UAAd,EAAuB,OAAO,GAaN,EAZrB,OAAO,KAAa,aACnB,EAAS,EAAM,GACb,EAAM,eAAe,EAAS,GAChC,IAEA,kBAAA,cAAC,GAAD,EAAO,WAAU,SAKT,EAJL,EAAM,SAAS,WAAW,kBAAA,cAAC,EAAM,MAAP,EAAY,IAAI,GAAS,CAAA,EACpD,kBAAA,cAAC,GAAA,MAAM,EAAgB,EACvB,kBAAA,cAAC,GAAA,KAAS,EACV,kBAAA,cAAC,EAAM,OAAA,KAAQ,CACT,CAEY,CACX;GAEjB,CACgB,EACnB,EACA;;AAIP,EAAc,cAAc"}
1	+ {"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '~/styled'\n\nimport { Spacer } from '../spacer/Spacer'\nimport { Text } from '../text/Text'\nimport { Toast } from './Toast'\nimport { ToastContext } from './ToastContext'\n\nexport { default as toast } from 'react-hot-toast'\nexport { useToastContext } from './ToastContext'\n\nconst ToastProviderBase = styled('div', {\n base: ['fixed', 'z-2147483647', 'inset-2', 'pointer-events-none', 'sm:top-3']\n})\n\nconst ToastWrapper = styled('div', {\n base: [\n 'absolute',\n 'w-full',\n 'flex',\n 'justify-center',\n 'items-center',\n 'rounded-sm',\n 'box-border',\n 'min-h-12',\n '[--slide-opacity-out:0]',\n '[--slide-direction-out-y:-100%]'\n ],\n variants: {\n visible: {\n true: ['motion-safe:animate-slide-direction-in'],\n false: ['opacity-0', 'motion-safe:animate-slide-direction-out']\n }\n }\n})\n\nexport const ToastProvider = ({\n children,\n className\n}: React.PropsWithChildren<{ className?: string }>) => {\n const { toasts, handlers } = useToaster()\n const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n return (\n <>\n <ToastProviderBase\n onMouseEnter={startPause}\n onMouseLeave={endPause}\n className={className}\n >\n {toasts.map((toast) => {\n const { message: children } = toast\n\n const offset = calculateOffset(toast.id, {\n reverseOrder: true,\n margin: 8\n })\n\n const ref = (el: HTMLDivElement \| null) => {\n if (el && toast.height === undefined) {\n updateHeight(toast.id, el.getBoundingClientRect().height)\n }\n }\n\n return (\n <ToastWrapper\n key={toast.id}\n ref={ref}\n visible={toast.visible}\n role={toast.role}\n aria-live={toast.ariaLive}\n style={{ '--offset': `${offset}px` }}\n className=\"top-(--offset)\"\n >\n <ToastContext.Provider value={toast}>\n {typeof children === 'function' ? (\n children(toast)\n ) : React.isValidElement(children) ? (\n children\n ) : (\n <Toast className=\"w-100\">\n {toast.type === 'error' && <Toast.Icon is={Error} />}\n <Text>{children}</Text>\n <Spacer />\n <Toast.Close />\n </Toast>\n )}\n </ToastContext.Provider>\n </ToastWrapper>\n )\n })}\n </ToastProviderBase>\n {children}\n </>\n )\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"mappings":";;;;;;;;;AAcA,IAAM,IAAoB,EAAO,OAAO,EACtC,MAAM;CAAC;CAAS;CAAgB;CAAW;CAAuB;CAAW,EAC9E,CAAC,EAEI,IAAe,EAAO,OAAO;CACjC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,SAAS;EACP,MAAM,CAAC,yCAAyC;EAChD,OAAO,CAAC,aAAa,0CAA0C;EAChE,EACF;CACF,CAAC,EAEW,KAAiB,EAC5B,aACA,mBACqD;CACrD,IAAM,EAAE,WAAQ,gBAAa,GAAY,EACnC,EAAE,eAAY,aAAU,oBAAiB,oBAAiB;AAEhE,QACE,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,GAAD;EACE,cAAc;EACd,cAAc;EACH;EA2CO,EAzCjB,EAAO,KAAK,MAAU;EACrB,IAAM,EAAE,SAAS,MAAa,GAExB,IAAS,EAAgB,EAAM,IAAI;GACvC,cAAc;GACd,QAAQ;GACT,CAAC;AAQF,SACE,kBAAA,cAAC,GAAD;GACE,KAAK,EAAM;GACN,MATI,MAA8B;AACzC,IAAI,KAAM,EAAM,WAAW,KAAA,KACzB,EAAa,EAAM,IAAI,EAAG,uBAAuB,CAAC,OAAO;;GAQzD,SAAS,EAAM;GACf,MAAM,EAAM;GACZ,aAAW,EAAM;GACjB,OAAO,EAAE,YAAY,GAAG,EAAO,KAAK;GACpC,WAAU;GAgBG,EAdb,kBAAA,cAAC,EAAa,UAAd,EAAuB,OAAO,GAaN,EAZrB,OAAO,KAAa,aACnB,EAAS,EAAM,GACb,EAAM,eAAe,EAAS,GAChC,IAEA,kBAAA,cAAC,GAAD,EAAO,WAAU,SAKT,EAJL,EAAM,SAAS,WAAW,kBAAA,cAAC,EAAM,MAAP,EAAY,IAAI,GAAS,CAAA,EACpD,kBAAA,cAAC,GAAA,MAAM,EAAgB,EACvB,kBAAA,cAAC,GAAA,KAAS,EACV,kBAAA,cAAC,EAAM,OAAA,KAAQ,CACT,CAEY,CACX;GAEjB,CACgB,EACnB,EACA;;AAIP,EAAc,cAAc"}