@atom-learning/components 1.7.1 → 1.7.2
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
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [1.7.2](https://github.com/Atom-Learning/components/compare/v1.7.1...v1.7.2) (2022-04-13)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* showing toast on top of modal overlay ([2413824](https://github.com/Atom-Learning/components/commit/2413824f3220e6888373e048c925b7454b2fbe77))
|
|
7
|
+
|
|
1
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Close as
|
|
1
|
+
import{Close as p}from"@atom-learning/icons";import{Overlay as u,Content as b,Close as x}from"@radix-ui/react-dialog";import{createElement as t,Fragment as g}from"react";import{keyframes as n,styled as i}from"../../stitches.js";import{ActionIcon as h}from"../action-icon/ActionIcon.js";import{Icon as w}from"../icon/Icon.js";import{fadeIn as $,fadeOut as v}from"../../utilities/style/keyframe-animations.js";const o="translate3d(-50%, -50%, 0)",s="translate3d(-50%, 50vh, 0)",r="modal_overlay",y=n({"0%":{transform:s},"100%":{transform:o}}),C=n({"0%":{transform:o},"100%":{transform:s}}),O=i(u,{backgroundColor:"$alpha600",inset:0,position:"fixed","@allowMotion":{'&[data-state="open"]':{animation:`${$} 250ms ease-out`},'&[data-state="closed"]':{animation:`${v} 550ms ease-out`}}}),D=i(b,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",p:"$5",position:"fixed",top:"50%",transform:o,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${y} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${C} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),S=({size:l="sm",children:m,closeDialogText:d="Close dialog",showCloseButton:c=!0,...f})=>t(g,null,t(O,{id:r}),t(D,{size:l,"aria-label":"Dialog",onPointerDownOutside:e=>{const a=e.target;(a==null?void 0:a.id)!==r&&e.preventDefault()},...f},c&&t(h,{as:x,css:{position:"absolute",right:"$4",top:"$4"},label:d,size:"lg",theme:"neutral"},t(w,{is:p})),m));export{S as DialogContent};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Error as g,Close as $}from"@atom-learning/icons";import{memo as h,createElement as o}from"react";import{toast as y}from"react-hot-toast";import{keyframes as i,styled as
|
|
1
|
+
import{Error as g,Close as $}from"@atom-learning/icons";import{memo as h,createElement as o}from"react";import{toast as y}from"react-hot-toast";import{keyframes as i,styled as e}from"../../stitches.js";import{ActionIcon as v}from"../action-icon/ActionIcon.js";import{Icon as a}from"../icon/Icon.js";import{Loader as w}from"../loader/Loader.js";import{Text as x}from"../text/Text.js";const n=400,T=i({"0%":{transform:"translate3d(0,-100%,0)",opacity:0},"100%":{transform:"translate3d(0,0,0)",opacity:1}}),k=i({"0%":{transform:"translate3d(0,0,0)",opacity:1},"100%":{transform:"translate3d(0,-100%,0)",opacity:0}}),C=e("div",{position:"absolute",width:"100%",variants:{visible:{true:{"@allowMotion":{animation:`${T} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}},false:{opacity:0,"@allowMotion":{animation:`${k} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}}}}}),I=e("div",{pointerEvents:"auto",alignItems:"center",borderRadius:"$0",boxShadow:"$1",boxSizing:"border-box",color:"white",display:"flex",minHeight:"$5",pl:"$4",position:"relative",pr:"$6",py:"$4",transition:"background-color 50ms ease-out",width:"100%","@sm":{width:n},"@allowMotion":{transition:"background-color 50ms ease-out, transform 150ms ease-out"},variants:{status:{blank:{bg:"$primary"},error:{bg:"$danger"},loading:{bg:"$primary"},success:{bg:"$success"}}}}),z=h(({ariaLive:l,height:m,id:t,message:c,role:d,type:r="blank",visible:f,calculateOffset:p,updateHeight:u})=>{const b=p(t,{reverseOrder:!0,margin:8});return o(C,{visible:f},o(I,{ref:s=>{s&&m===void 0&&u(t,s.getBoundingClientRect().height)},status:r,role:d,"aria-live":l,style:{transform:`translateY(${b}px)`}},r==="error"&&o(a,{size:"sm",css:{mr:"$3",flex:"0 0 auto"},is:g}),o(x,{css:{color:"inherit"}},c),r==="loading"?o(w,{css:{flex:"0 0 auto",ml:"auto"}}):o(v,{css:{position:"absolute",top:"$2",right:"$2",color:"white","&:hover,&:focus":{color:"white",opacity:.5}},label:"Close alert",onClick:()=>y.dismiss(t)},o(a,{is:$}))))});export{n as TOAST_WIDTH,z as Toast};
|