@sats-group/ui-lib 85.1.0 → 85.1.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/package.json +1 -1
- package/react/modal/modal.js +1 -1
- package/react/modal/modal.js.map +2 -2
- package/react/modal/modal.scss +14 -4
package/package.json
CHANGED
package/react/modal/modal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";var M=Object.defineProperty,k=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var u=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var _=(s,l,a)=>l in s?M(s,l,{enumerable:!0,configurable:!0,writable:!0,value:a}):s[l]=a,n=(s,l)=>{for(var a in l||(l={}))C.call(l,a)&&_(s,a,l[a]);if(u)for(var a of u(l))I.call(l,a)&&_(s,a,l[a]);return s},f=(s,l)=>k(s,B(l));import p from"classnames";import*as o from"react";import*as P from"react-dom";import e from"../button";import c from"../icons/18/close";import w from"../link-button";import A from"./tab-trapper";import m from"../text";import{ActionTypes as y,backgrounds as
|
|
1
|
+
"use client";var M=Object.defineProperty,k=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var u=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var _=(s,l,a)=>l in s?M(s,l,{enumerable:!0,configurable:!0,writable:!0,value:a}):s[l]=a,n=(s,l)=>{for(var a in l||(l={}))C.call(l,a)&&_(s,a,l[a]);if(u)for(var a of u(l))I.call(l,a)&&_(s,a,l[a]);return s},f=(s,l)=>k(s,B(l));import p from"classnames";import*as o from"react";import*as P from"react-dom";import e from"../button";import c from"../icons/18/close";import w from"../link-button";import A from"./tab-trapper";import m from"../text";import{ActionTypes as y,backgrounds as N}from"./modal.types";const h=({actions:s,ariaLabel:l,background:a=N.primary,children:T,closeLabel:v,explanation:r,id:d,onClick:g=()=>{},title:t})=>{const[x,b]=o.useState(!1);return o.useEffect(()=>b(!0)),x?P.createPortal(o.createElement("dialog",{"aria-label":l,className:p("modal",{[`modal--${a}`]:a}),id:d,popover:"auto"},o.createElement(A,{isActive:!0,className:"modal__inner"},o.createElement("div",{className:p("modal__close-action",{"modal__close-action--always-shown":s&&s.length})},o.createElement(e,{leadingIcon:o.createElement(c,null),popoverTarget:d,size:e.sizes.small,text:v,variant:e.variants.secondary,iconOnly:!0})),t||r?o.createElement("div",{className:"modal__nav"},o.createElement("div",{className:"modal__texts"},t?o.createElement(m,{className:"modal__title",size:m.sizes.headline2,theme:m.themes.emphasis},t):null,r?o.createElement("div",{className:p("modal__explanation",{[`modal__explanation--${a}`]:a})},o.createElement(m,{size:m.sizes.small},r)):null)):null,o.createElement("div",{className:"modal__children"},o.createElement("div",null,T)),s&&s.length?o.createElement("div",{className:"modal__actions"},s.map(i=>i.type===y.LinkButton?o.createElement(w,n({},i.action)):i.type===y.Button?o.createElement(e,f(n({},i.action),{onClick:z=>g(i.buttonId,z)})):null)):o.createElement("div",{className:"modal__close-action-mobile"},o.createElement(e,{leadingIcon:o.createElement(c,null),popoverTarget:d,text:v,variant:e.variants.secondary})))),document.body):null};h.backgrounds=N;var j=h;export{j as default};
|
|
2
2
|
//# sourceMappingURL=modal.js.map
|
package/react/modal/modal.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../react/modal/modal.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport classNames from 'classnames';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport Button from '../button';\nimport Close from '../icons/18/close';\nimport LinkButton from '../link-button';\nimport TabTrapper from './tab-trapper';\nimport Text from '../text';\n\nimport { ActionTypes, type Modal as Props, backgrounds } from './modal.types';\n\nconst Modal: React.FC<React.PropsWithChildren<Props>> & {\n backgrounds: typeof backgrounds;\n} = ({\n actions,\n ariaLabel,\n background = backgrounds.primary,\n children,\n closeLabel,\n explanation,\n id,\n onClick = () => {},\n title,\n}) => {\n const [isMounted, setIsMounted] = React.useState(false);\n\n React.useEffect(() => setIsMounted(true));\n\n return isMounted\n ? ReactDOM.createPortal(\n <dialog\n aria-label={ariaLabel}\n className={classNames('modal', {\n [`modal--${background}`]: background,\n })}\n id={id}\n popover=\"auto\"\n >\n <TabTrapper isActive={true}>\n <div\n className={classNames('modal__close-action', {\n 'modal__close-action--always-shown': actions && actions.length,\n })}\n >\n <Button\n leadingIcon={<Close />}\n popoverTarget={id}\n size={Button.sizes.small}\n text={closeLabel}\n variant={Button.variants.secondary}\n iconOnly\n />\n </div>\n {title || explanation ? (\n <div className=\"modal__nav\">\n <div className=\"modal__texts\">\n {title ? (\n <Text\n className=\"modal__title\"\n size={Text.sizes.headline2}\n theme={Text.themes.emphasis}\n >\n {title}\n </Text>\n ) : null}\n {explanation ? (\n <div\n className={classNames('modal__explanation', {\n [`modal__explanation--${background}`]: background,\n })}\n >\n <Text size={Text.sizes.small}>{explanation}</Text>\n </div>\n ) : null}\n </div>\n </div>\n ) : null}\n <div className=\"modal__children\">\n <div>{children}</div>\n </div>\n {actions && actions.length ? (\n <div className=\"modal__actions\">\n {actions.map(action =>\n action.type === ActionTypes.LinkButton ? (\n <LinkButton {...action.action} />\n ) : action.type === ActionTypes.Button ? (\n <Button\n {...action.action}\n onClick={e => onClick(action.buttonId, e)}\n />\n ) : null,\n )}\n </div>\n ) : (\n <div className=\"modal__close-action-mobile\">\n <Button\n leadingIcon={<Close />}\n popoverTarget={id}\n text={closeLabel}\n variant={Button.variants.secondary}\n />\n </div>\n )}\n </TabTrapper>\n </dialog>,\n document.body,\n )\n : null;\n};\n\nModal.backgrounds = backgrounds;\n\nexport default Modal;\n"],
|
|
5
|
-
"mappings": "0bAEA,OAAOA,MAAgB,aACvB,UAAYC,MAAW,QACvB,UAAYC,MAAc,YAE1B,OAAOC,MAAY,YACnB,OAAOC,MAAW,oBAClB,OAAOC,MAAgB,iBACvB,OAAOC,MAAgB,gBACvB,OAAOC,MAAU,UAEjB,OAAS,eAAAC,EAAkC,eAAAC,MAAmB,gBAE9D,MAAMC,EAEF,CAAC,CACH,QAAAC,EACA,UAAAC,EACA,WAAAC,EAAaJ,EAAY,QACzB,SAAAK,EACA,WAAAC,EACA,YAAAC,EACA,GAAAC,EACA,QAAAC,EAAU,IAAM,CAAC,EACjB,MAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIpB,EAAM,SAAS,EAAK,EAEtD,OAAAA,EAAM,UAAU,IAAMoB,EAAa,EAAI,CAAC,EAEjCD,EACHlB,EAAS,aACPD,EAAA,cAAC,UACC,aAAYW,EACZ,UAAWZ,EAAW,QAAS,CAC7B,CAAC,UAAUa,CAAU,EAAE,EAAGA,CAC5B,CAAC,EACD,GAAII,EACJ,QAAQ,QAERhB,EAAA,cAACK,EAAA,CAAW,SAAU,
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport classNames from 'classnames';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport Button from '../button';\nimport Close from '../icons/18/close';\nimport LinkButton from '../link-button';\nimport TabTrapper from './tab-trapper';\nimport Text from '../text';\n\nimport { ActionTypes, type Modal as Props, backgrounds } from './modal.types';\n\nconst Modal: React.FC<React.PropsWithChildren<Props>> & {\n backgrounds: typeof backgrounds;\n} = ({\n actions,\n ariaLabel,\n background = backgrounds.primary,\n children,\n closeLabel,\n explanation,\n id,\n onClick = () => {},\n title,\n}) => {\n const [isMounted, setIsMounted] = React.useState(false);\n\n React.useEffect(() => setIsMounted(true));\n\n return isMounted\n ? ReactDOM.createPortal(\n <dialog\n aria-label={ariaLabel}\n className={classNames('modal', {\n [`modal--${background}`]: background,\n })}\n id={id}\n popover=\"auto\"\n >\n <TabTrapper isActive={true} className=\"modal__inner\">\n <div\n className={classNames('modal__close-action', {\n 'modal__close-action--always-shown': actions && actions.length,\n })}\n >\n <Button\n leadingIcon={<Close />}\n popoverTarget={id}\n size={Button.sizes.small}\n text={closeLabel}\n variant={Button.variants.secondary}\n iconOnly\n />\n </div>\n {title || explanation ? (\n <div className=\"modal__nav\">\n <div className=\"modal__texts\">\n {title ? (\n <Text\n className=\"modal__title\"\n size={Text.sizes.headline2}\n theme={Text.themes.emphasis}\n >\n {title}\n </Text>\n ) : null}\n {explanation ? (\n <div\n className={classNames('modal__explanation', {\n [`modal__explanation--${background}`]: background,\n })}\n >\n <Text size={Text.sizes.small}>{explanation}</Text>\n </div>\n ) : null}\n </div>\n </div>\n ) : null}\n <div className=\"modal__children\">\n <div>{children}</div>\n </div>\n {actions && actions.length ? (\n <div className=\"modal__actions\">\n {actions.map(action =>\n action.type === ActionTypes.LinkButton ? (\n <LinkButton {...action.action} />\n ) : action.type === ActionTypes.Button ? (\n <Button\n {...action.action}\n onClick={e => onClick(action.buttonId, e)}\n />\n ) : null,\n )}\n </div>\n ) : (\n <div className=\"modal__close-action-mobile\">\n <Button\n leadingIcon={<Close />}\n popoverTarget={id}\n text={closeLabel}\n variant={Button.variants.secondary}\n />\n </div>\n )}\n </TabTrapper>\n </dialog>,\n document.body,\n )\n : null;\n};\n\nModal.backgrounds = backgrounds;\n\nexport default Modal;\n"],
|
|
5
|
+
"mappings": "0bAEA,OAAOA,MAAgB,aACvB,UAAYC,MAAW,QACvB,UAAYC,MAAc,YAE1B,OAAOC,MAAY,YACnB,OAAOC,MAAW,oBAClB,OAAOC,MAAgB,iBACvB,OAAOC,MAAgB,gBACvB,OAAOC,MAAU,UAEjB,OAAS,eAAAC,EAAkC,eAAAC,MAAmB,gBAE9D,MAAMC,EAEF,CAAC,CACH,QAAAC,EACA,UAAAC,EACA,WAAAC,EAAaJ,EAAY,QACzB,SAAAK,EACA,WAAAC,EACA,YAAAC,EACA,GAAAC,EACA,QAAAC,EAAU,IAAM,CAAC,EACjB,MAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIpB,EAAM,SAAS,EAAK,EAEtD,OAAAA,EAAM,UAAU,IAAMoB,EAAa,EAAI,CAAC,EAEjCD,EACHlB,EAAS,aACPD,EAAA,cAAC,UACC,aAAYW,EACZ,UAAWZ,EAAW,QAAS,CAC7B,CAAC,UAAUa,CAAU,EAAE,EAAGA,CAC5B,CAAC,EACD,GAAII,EACJ,QAAQ,QAERhB,EAAA,cAACK,EAAA,CAAW,SAAU,GAAM,UAAU,gBACpCL,EAAA,cAAC,OACC,UAAWD,EAAW,sBAAuB,CAC3C,oCAAqCW,GAAWA,EAAQ,MAC1D,CAAC,GAEDV,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACG,EAAA,IAAM,EACpB,cAAea,EACf,KAAMd,EAAO,MAAM,MACnB,KAAMY,EACN,QAASZ,EAAO,SAAS,UACzB,SAAQ,GACV,CACF,EACCgB,GAASH,EACRf,EAAA,cAAC,OAAI,UAAU,cACbA,EAAA,cAAC,OAAI,UAAU,gBACZkB,EACClB,EAAA,cAACM,EAAA,CACC,UAAU,eACV,KAAMA,EAAK,MAAM,UACjB,MAAOA,EAAK,OAAO,UAElBY,CACH,EACE,KACHH,EACCf,EAAA,cAAC,OACC,UAAWD,EAAW,qBAAsB,CAC1C,CAAC,uBAAuBa,CAAU,EAAE,EAAGA,CACzC,CAAC,GAEDZ,EAAA,cAACM,EAAA,CAAK,KAAMA,EAAK,MAAM,OAAQS,CAAY,CAC7C,EACE,IACN,CACF,EACE,KACJf,EAAA,cAAC,OAAI,UAAU,mBACbA,EAAA,cAAC,WAAKa,CAAS,CACjB,EACCH,GAAWA,EAAQ,OAClBV,EAAA,cAAC,OAAI,UAAU,kBACZU,EAAQ,IAAIW,GACXA,EAAO,OAASd,EAAY,WAC1BP,EAAA,cAACI,EAAAkB,EAAA,GAAeD,EAAO,OAAQ,EAC7BA,EAAO,OAASd,EAAY,OAC9BP,EAAA,cAACE,EAAAqB,EAAAD,EAAA,GACKD,EAAO,QADZ,CAEC,QAASG,GAAKP,EAAQI,EAAO,SAAUG,CAAC,GAC1C,EACE,IACN,CACF,EAEAxB,EAAA,cAAC,OAAI,UAAU,8BACbA,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACG,EAAA,IAAM,EACpB,cAAea,EACf,KAAMF,EACN,QAASZ,EAAO,SAAS,UAC3B,CACF,CAEJ,CACF,EACA,SAAS,IACX,EACA,IACN,EAEAO,EAAM,YAAcD,EAEpB,IAAOiB,EAAQhB",
|
|
6
6
|
"names": ["classNames", "React", "ReactDOM", "Button", "Close", "LinkButton", "TabTrapper", "Text", "ActionTypes", "backgrounds", "Modal", "actions", "ariaLabel", "background", "children", "closeLabel", "explanation", "id", "onClick", "title", "isMounted", "setIsMounted", "action", "__spreadValues", "__spreadProps", "e", "modal_default"]
|
|
7
7
|
}
|
package/react/modal/modal.scss
CHANGED
|
@@ -11,12 +11,12 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
border: none;
|
|
14
|
-
display:
|
|
15
|
-
height: 100vh;
|
|
16
|
-
height: 100svh;
|
|
17
|
-
overflow: hidden;
|
|
14
|
+
display: hidden;
|
|
18
15
|
padding: 0;
|
|
16
|
+
overflow: hidden;
|
|
19
17
|
width: 100vw;
|
|
18
|
+
height: 100vh;
|
|
19
|
+
height: 100svh;
|
|
20
20
|
padding: 0 spacing.$m;
|
|
21
21
|
|
|
22
22
|
&::backdrop {
|
|
@@ -28,8 +28,18 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
&:popover-open {
|
|
31
|
+
display: block;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&__inner {
|
|
31
35
|
display: flex;
|
|
32
36
|
flex-direction: column;
|
|
37
|
+
height: 100%;
|
|
38
|
+
|
|
39
|
+
@include break {
|
|
40
|
+
max-height: calc(100vh - (spacing.$m * 2));
|
|
41
|
+
max-height: calc(100dvh - (spacing.$m * 2));
|
|
42
|
+
}
|
|
33
43
|
}
|
|
34
44
|
|
|
35
45
|
&--primary {
|