@sats-group/ui-lib 86.2.0 → 86.2.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 +3 -3
package/package.json
CHANGED
package/react/modal/modal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";var
|
|
1
|
+
"use client";var C=Object.defineProperty,P=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var y=Object.getOwnPropertySymbols;var D=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var h=(o,a,l)=>a in o?C(o,a,{enumerable:!0,configurable:!0,writable:!0,value:l}):o[a]=l,p=(o,a)=>{for(var l in a||(a={}))D.call(a,l)&&h(o,l,a[l]);if(y)for(var l of y(a))E.call(a,l)&&h(o,l,a[l]);return o},u=(o,a)=>P(o,B(a));import v from"classnames";import*as e from"react";import*as H from"react-dom";import i from"../button";import N from"../icons/18/close";import L from"../link-button";import w from"./tab-trapper";import r from"../text";import{ActionTypes as T,backgrounds as g}from"./modal.types";const _=({actions:o,ariaLabel:a,background:l=g.primary,children:M,closeLabel:c,explanation:n,id:t,onClick:k=()=>{},ref:b,title:d})=>{const[x,z]=e.useState(!1),m=e.useRef(null);e.useImperativeHandle(b,()=>m.current);const I=()=>{m.current&&m.current.hidePopover()};return e.useEffect(()=>z(!0)),x?H.createPortal(e.createElement("dialog",{"aria-label":a,className:v("modal",{[`modal--${l}`]:l}),id:t,popover:"auto",ref:m},e.createElement("div",{className:"modal__click-trapper",onClick:I}),e.createElement(w,{isActive:!0,className:"modal__inner"},e.createElement("div",{className:v("modal__close-action",{"modal__close-action--always-shown":o&&o.length})},e.createElement(i,{leadingIcon:e.createElement(N,null),popoverTarget:t,size:i.sizes.small,text:c,variant:i.variants.secondary,iconOnly:!0})),d||n?e.createElement("div",{className:"modal__nav"},e.createElement("div",{className:"modal__texts"},d?e.createElement(r,{className:"modal__title",size:r.sizes.headline2,theme:r.themes.emphasis},d):null,n?e.createElement("div",{className:v("modal__explanation",{[`modal__explanation--${l}`]:l})},e.createElement(r,{size:r.sizes.small},n)):null)):null,e.createElement("div",{className:"modal__children"},e.createElement("div",null,M)),o&&o.length?e.createElement("div",{className:"modal__actions"},o.map((s,f)=>s.type===T.LinkButton?e.createElement(L,u(p({},s.action),{key:`${s.action.href}${f}`})):s.type===T.Button?e.createElement(i,u(p({},s.action),{onClick:$=>k(s.buttonId,$),key:`${s.buttonId}${f}`})):null)):e.createElement("div",{className:"modal__close-action-mobile"},e.createElement(i,{leadingIcon:e.createElement(N,null),popoverTarget:t,text:c,variant:i.variants.secondary})))),document.body):null};_.displayName="Modal",_.backgrounds=g;var J=_;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 ref,\n title,\n}) => {\n const [isMounted, setIsMounted] = React.useState(false);\n const innerRef = React.useRef<HTMLDialogElement>(null);\n\n React.useImperativeHandle<HTMLDialogElement | null, HTMLDialogElement | null>(\n ref,\n () => innerRef.current,\n );\n\n const hide = () => {\n if (innerRef.current) {\n innerRef.current.hidePopover();\n }\n };\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 ref={innerRef}\n >\n <div className=\"modal__click-trapper\" onClick={hide} />\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
|
|
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,IAAAC,EACA,MAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIrB,EAAM,SAAS,EAAK,EAChDsB,EAAWtB,EAAM,OAA0B,IAAI,EAErDA,EAAM,oBACJkB,EACA,IAAMI,EAAS,OACjB,EAEA,MAAMC,EAAO,IAAM,CACbD,EAAS,SACXA,EAAS,QAAQ,YAAY,CAEjC,EAEA,OAAAtB,EAAM,UAAU,IAAMqB,EAAa,EAAI,CAAC,EAEjCD,EACHnB,EAAS,aACPD,EAAA,cAAC,UACC,aAAYW,EACZ,UAAWZ,EAAW,QAAS,CAC7B,CAAC,UAAUa,CAAU,EAAE,EAAGA,CAC5B,CAAC,EACD,GAAII,EACJ,QAAQ,OACR,IAAKM,GAELtB,EAAA,cAAC,OAAI,UAAU,uBAAuB,QAASuB,EAAM,EACrDvB,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,EACCiB,GAASJ,EACRf,EAAA,cAAC,OAAI,UAAU,cACbA,EAAA,cAAC,OAAI,UAAU,gBACZmB,EACCnB,EAAA,cAACM,EAAA,CACC,UAAU,eACV,KAAMA,EAAK,MAAM,UACjB,MAAOA,EAAK,OAAO,UAElBa,CACH,EACE,KACHJ,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,
|
|
6
|
-
"names": ["classNames", "React", "ReactDOM", "Button", "Close", "LinkButton", "TabTrapper", "Text", "ActionTypes", "backgrounds", "Modal", "actions", "ariaLabel", "background", "children", "closeLabel", "explanation", "id", "onClick", "ref", "title", "isMounted", "setIsMounted", "innerRef", "hide", "action", "
|
|
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 ref,\n title,\n}) => {\n const [isMounted, setIsMounted] = React.useState(false);\n const innerRef = React.useRef<HTMLDialogElement>(null);\n\n React.useImperativeHandle<HTMLDialogElement | null, HTMLDialogElement | null>(\n ref,\n () => innerRef.current,\n );\n\n const hide = () => {\n if (innerRef.current) {\n innerRef.current.hidePopover();\n }\n };\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 ref={innerRef}\n >\n <div className=\"modal__click-trapper\" onClick={hide} />\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, index) =>\n action.type === ActionTypes.LinkButton ? (\n <LinkButton\n {...action.action}\n key={`${action.action.href}${index}`}\n />\n ) : action.type === ActionTypes.Button ? (\n <Button\n {...action.action}\n onClick={e => onClick(action.buttonId, e)}\n key={`${action.buttonId}${index}`}\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.displayName = 'Modal';\nModal.backgrounds = backgrounds;\n\nexport default Modal;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["classNames", "React", "ReactDOM", "Button", "Close", "LinkButton", "TabTrapper", "Text", "ActionTypes", "backgrounds", "Modal", "actions", "ariaLabel", "background", "children", "closeLabel", "explanation", "id", "onClick", "ref", "title", "isMounted", "setIsMounted", "innerRef", "hide", "action", "index", "__spreadProps", "__spreadValues", "e", "modal_default"]
|
|
7
7
|
}
|