@atom-learning/components 2.69.0 → 2.69.1
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/CHANGELOG.md +3 -4
- package/dist/components/toast/Toast.js +1 -1
- package/dist/components/toast/Toast.js.map +1 -1
- package/dist/components/toast/ToastProvider.js +1 -1
- package/dist/components/toast/ToastProvider.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
## [2.69.1](https://github.com/Atom-Learning/components/compare/v2.69.0...v2.69.1) (2023-09-25)
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
###
|
|
4
|
+
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
* update Toast to allow for custom UI ([b6e3ebf](https://github.com/Atom-Learning/components/commit/b6e3ebf69271516c96e6156bb46a5d7238c5928a))
|
|
6
|
+
* removed pointer-events auto from ToastWrapper ([7872cd6](https://github.com/Atom-Learning/components/commit/7872cd64dee2aa8da6adcf631463b9faa42a0d77))
|
|
8
7
|
|
|
9
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
10
9
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as s from"react";import{styled as a}from"../../stitches.js";import{Flex as n}from"../flex/Flex.js";import{
|
|
1
|
+
import*as s from"react";import{styled as a}from"../../stitches.js";import{Flex as n}from"../flex/Flex.js";import{ToastCloseButton as i}from"./ToastCloseButton.js";import{ToastIcon as m}from"./ToastIcon.js";import{useToastContext as p}from"./ToastProvider.js";const c={blank:{bg:"$primary"},error:{bg:"$danger"},loading:{bg:"$primary"},success:{bg:"$success"}},r=a(n,{pointerEvents:"auto",borderRadius:"$0",boxShadow:"$1",boxSizing:"border-box",color:"white",minHeight:"$5",position:"relative",px:"$4",py:"$1",transition:"background-color 50ms ease-out","@allowMotion":{transition:"background-color 50ms ease-out, transform 150ms ease-out"},variants:{type:c}}),o=t=>{const{type:e}=p();return s.createElement(r,{align:"center",type:t.type||e,...t})};o.Icon=m,o.Close=i;export{r as StyledToast,o as Toast};
|
|
2
2
|
//# sourceMappingURL=Toast.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport {
|
|
1
|
+
{"version":3,"file":"Toast.js","sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport { ToastCloseButton } from './ToastCloseButton'\nimport { ToastIcon } from './ToastIcon'\nimport { useToastContext } from './ToastProvider'\n\nconst toastVariants = {\n blank: { bg: '$primary' },\n error: { bg: '$danger' },\n loading: { bg: '$primary' },\n success: { bg: '$success' }\n} as const\n\nexport const StyledToast = styled(Flex, {\n pointerEvents: 'auto',\n borderRadius: '$0',\n boxShadow: '$1',\n boxSizing: 'border-box',\n color: 'white',\n minHeight: '$5',\n position: 'relative',\n px: '$4',\n py: '$1',\n transition: 'background-color 50ms ease-out',\n '@allowMotion': {\n transition: 'background-color 50ms ease-out, transform 150ms ease-out'\n },\n variants: {\n type: toastVariants\n }\n})\n\ntype ToastProps = Omit<React.ComponentProps<typeof StyledToast>, 'type'> & {\n type?: keyof typeof toastVariants\n}\n\nexport const Toast = (props: ToastProps): JSX.Element => {\n const { type } = useToastContext()\n return <StyledToast align=\"center\" type={props.type || type} {...props} />\n}\n\nToast.Icon = ToastIcon\nToast.Close = ToastCloseButton\n"],"names":["toastVariants","StyledToast","styled","Flex","Toast","props","type","useToastContext","React","ToastIcon","ToastCloseButton"],"mappings":"mQASA,MAAMA,EAAgB,CACpB,MAAO,CAAE,GAAI,UAAW,EACxB,MAAO,CAAE,GAAI,SAAU,EACvB,QAAS,CAAE,GAAI,UAAW,EAC1B,QAAS,CAAE,GAAI,UAAW,CAC5B,EAEaC,EAAcC,EAAOC,EAAM,CACtC,cAAe,OACf,aAAc,KACd,UAAW,KACX,UAAW,aACX,MAAO,QACP,UAAW,KACX,SAAU,WACV,GAAI,KACJ,GAAI,KACJ,WAAY,iCACZ,eAAgB,CACd,WAAY,0DACd,EACA,SAAU,CACR,KAAMH,CACR,CACF,CAAC,EAMYI,EAASC,GAAmC,CACvD,KAAM,CAAE,KAAAC,CAAK,EAAIC,EACjB,EAAA,OAAOC,EAAA,cAACP,EAAY,CAAA,MAAM,SAAS,KAAMI,EAAM,MAAQC,EAAO,GAAGD,CAAAA,CAAO,CAC1E,EAEAD,EAAM,KAAOK,EACbL,EAAM,MAAQM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{useToaster as h}from"react-hot-toast";import{default as j}from"react-hot-toast";import{styled as
|
|
1
|
+
import{Error as n}from"@atom-learning/icons";import*as e from"react";import{useToaster as h}from"react-hot-toast";import{default as j}from"react-hot-toast";import{styled as s,keyframes as l}from"../../stitches.js";import{MAX_Z_INDEX as g}from"../../constants/zIndices.js";import{Spacer as T}from"../spacer/Spacer.js";import{Text as w}from"../text/Text.js";import{Toast as a}from"./Toast.js";const C="$2",P=400,M=s("div",{position:"fixed",zIndex:g,inset:C,pointerEvents:"none","@sm":{top:"$3"}}),$=l({"0%":{transform:"translateY(-100%)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}}),I=l({"0%":{transform:"translateY(0)",opacity:1},"100%":{transform:"translateY(-100%)",opacity:0}}),z=s("div",{position:"absolute",width:"100%",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"$0",boxSizing:"border-box",minHeight:"$5",variants:{visible:{true:{"@allowMotion":{animation:`${$} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}},false:{opacity:0,"@allowMotion":{animation:`${I} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}}}}}),m=e.createContext(null),c=({children:o,css:u})=>{const{toasts:d,handlers:p}=h(),{startPause:f,endPause:v,calculateOffset:E,updateHeight:y}=p;return e.createElement(e.Fragment,null,e.createElement(M,{onMouseEnter:f,onMouseLeave:v,css:u},d.map(t=>{const{message:r}=t,b=E(t.id,{reverseOrder:!0,margin:8}),x=i=>{i&&t.height===void 0&&y(t.id,i.getBoundingClientRect().height)};return e.createElement(z,{key:t.id,ref:x,visible:t.visible,role:t.role,"aria-live":t.ariaLive,css:{top:b}},e.createElement(m.Provider,{value:t},typeof r=="function"?r(t):e.isValidElement(r)?r:e.createElement(a,{css:{width:P}},t.type==="error"&&e.createElement(a.Icon,{is:n}),e.createElement(w,null,r),e.createElement(T,null),e.createElement(a.Close,null))))})),o)},Y=()=>{const o=e.useContext(m);if(!o)throw new n("useToastContext must be used within a ToastProvider");return o};c.displayName="ToastProvider";export{c as ToastProvider,j as toast,Y as useToastContext};
|
|
2
2
|
//# sourceMappingURL=ToastProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastProvider.js","sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { keyframes, styled
|
|
1
|
+
{"version":3,"file":"ToastProvider.js","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 { CSS, keyframes, styled } from '~/stitches'\nexport { default as toast } from 'react-hot-toast'\nimport type { Toast as ToastType } from 'react-hot-toast/dist/core/types'\n\nimport { MAX_Z_INDEX } from '~/constants/zIndices'\n\nimport { Flex } from '../flex'\nimport { Spacer } from '../spacer'\nimport { Text } from '../text'\nimport { Toast } from './Toast'\n\nconst DEFAULT_OFFSET = '$2'\nconst TOAST_WIDTH = 400\n\nconst ToastProviderBase = styled('div', {\n position: 'fixed',\n zIndex: MAX_Z_INDEX,\n inset: DEFAULT_OFFSET,\n pointerEvents: 'none',\n '@sm': {\n top: '$3'\n }\n})\n\nconst slideIn = keyframes({\n '0%': { transform: 'translateY(-100%)', opacity: 0 },\n '100%': { transform: `translateY(0)`, opacity: 1 }\n})\n\nconst slideOut = keyframes({\n '0%': { transform: `translateY(0)`, opacity: 1 },\n '100%': { transform: `translateY(-100%)`, opacity: 0 }\n})\n\nconst ToastWrapper = styled('div', {\n position: 'absolute',\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '$0',\n boxSizing: 'border-box',\n minHeight: '$5',\n variants: {\n visible: {\n true: {\n '@allowMotion': {\n animation: `${slideIn} 250ms cubic-bezier(0.22, 1, 0.36, 1)`\n }\n },\n false: {\n opacity: 0,\n '@allowMotion': {\n animation: `${slideOut} 250ms cubic-bezier(0.22, 1, 0.36, 1)`\n }\n }\n }\n }\n})\n\nconst ToastContext = React.createContext<Pick<\n ToastType,\n 'type' | 'id' | 'message'\n> | null>(null)\n\nexport const ToastProvider: React.FC<{ css?: CSS }> = ({ children, css }) => {\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 css={css}\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 css={{ top: offset }}\n >\n <ToastContext.Provider value={toast}>\n {typeof children === 'function' ? (\n children(toast)\n ) : React.isValidElement(children) ? (\n children\n ) : (\n <Toast css={{ width: TOAST_WIDTH }}>\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\nexport const useToastContext = () => {\n const context = React.useContext(ToastContext)\n\n if (!context) {\n throw new Error('useToastContext must be used within a ToastProvider')\n }\n\n return context\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"names":["DEFAULT_OFFSET","TOAST_WIDTH","ToastProviderBase","styled","MAX_Z_INDEX","slideIn","keyframes","slideOut","ToastWrapper","ToastContext","React","ToastProvider","children","css","toasts","handlers","useToaster","startPause","endPause","calculateOffset","updateHeight","toast","offset","ref","el","Toast","Error","Text","Spacer","useToastContext","context"],"mappings":"uYAeA,MAAMA,EAAiB,KACjBC,EAAc,IAEdC,EAAoBC,EAAO,MAAO,CACtC,SAAU,QACV,OAAQC,EACR,MAAOJ,EACP,cAAe,OACf,MAAO,CACL,IAAK,IACP,CACF,CAAC,EAEKK,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAW,oBAAqB,QAAS,CAAE,EACnD,OAAQ,CAAE,UAAW,gBAAiB,QAAS,CAAE,CACnD,CAAC,EAEKC,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAW,gBAAiB,QAAS,CAAE,EAC/C,OAAQ,CAAE,UAAW,oBAAqB,QAAS,CAAE,CACvD,CAAC,EAEKE,EAAeL,EAAO,MAAO,CACjC,SAAU,WACV,MAAO,OACP,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,aAAc,KACd,UAAW,aACX,UAAW,KACX,SAAU,CACR,QAAS,CACP,KAAM,CACJ,eAAgB,CACd,UAAW,GAAGE,wCAChB,CACF,EACA,MAAO,CACL,QAAS,EACT,eAAgB,CACd,UAAW,GAAGE,wCAChB,CACF,CACF,CACF,CACF,CAAC,EAEKE,EAAeC,EAAM,cAGjB,IAAI,EAEDC,EAAyC,CAAC,CAAE,SAAAC,EAAU,IAAAC,CAAI,IAAM,CAC3E,KAAM,CAAE,OAAAC,EAAQ,SAAAC,CAAS,EAAIC,EAAAA,EACvB,CAAE,WAAAC,EAAY,SAAAC,EAAU,gBAAAC,EAAiB,aAAAC,CAAa,EAAIL,EAEhE,OACEL,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACR,EAAA,CACC,aAAce,EACd,aAAcC,EACd,IAAKL,GAEJC,EAAO,IAAKO,GAAU,CACrB,KAAM,CAAE,QAAST,CAAS,EAAIS,EAExBC,EAASH,EAAgBE,EAAM,GAAI,CACvC,aAAc,GACd,OAAQ,CACV,CAAC,EAEKE,EAAOC,GAA8B,CACrCA,GAAMH,EAAM,SAAW,QACzBD,EAAaC,EAAM,GAAIG,EAAG,sBAAsB,EAAE,MAAM,CAE5D,EAEA,OACEd,EAAA,cAACF,EAAA,CACC,IAAKa,EAAM,GACX,IAAKE,EACL,QAASF,EAAM,QACf,KAAMA,EAAM,KACZ,YAAWA,EAAM,SACjB,IAAK,CAAE,IAAKC,CAAO,CAEnBZ,EAAAA,EAAA,cAACD,EAAa,SAAb,CAAsB,MAAOY,CAC3B,EAAA,OAAOT,GAAa,WACnBA,EAASS,CAAK,EACZX,EAAM,eAAeE,CAAQ,EAC/BA,EAEAF,EAAA,cAACe,EAAA,CAAM,IAAK,CAAE,MAAOxB,CAAY,CAAA,EAC9BoB,EAAM,OAAS,SAAWX,EAAA,cAACe,EAAM,KAAN,CAAW,GAAIC,CAAO,CAAA,EAClDhB,EAAA,cAACiB,EAAA,KAAMf,CAAS,EAChBF,EAAA,cAACkB,EAAA,IAAO,EACRlB,EAAA,cAACe,EAAM,MAAN,IAAY,CACf,CAEJ,CACF,CAEJ,CAAC,CACH,EACCb,CACH,CAEJ,EAEaiB,EAAkB,IAAM,CACnC,MAAMC,EAAUpB,EAAM,WAAWD,CAAY,EAE7C,GAAI,CAACqB,EACH,MAAM,IAAIJ,EAAM,qDAAqD,EAGvE,OAAOI,CACT,EAEAnB,EAAc,YAAc"}
|