se-design 1.0.96 → 1.0.97

package/dist/index12.js

@@ -1,9 +1,9 @@
 import e from "react";
 import { Button as d } from "./index4.js";
-import { Icon as w } from "./index6.js";
+import { Icon as N } from "./index6.js";
 import "./index77.js";
-import { useModalA11y as P } from "./index215.js";
-import { useFocusTrapPortalRegistry as k, FocusTrapPortalContext as j } from "./index216.js";
+import { useModalA11y as k } from "./index215.js";
+import { useFocusTrapPortalRegistry as P, FocusTrapPortalContext as j } from "./index216.js";
 /* empty css         */
 function r() {
   return r = Object.assign ? Object.assign.bind() : function(n) {
@@ -33,17 +33,17 @@ const _ = (n) => {
   } = n, {
     register: x,
     portalContainerRefs: h
-  } = k(), {
+  } = P(), {
     containerRef: y,
     titleId: E,
-    dialogProps: C
-  } = P({
+    dialogProps: w
+  } = k({
     isOpen: i,
     onDismiss: l,
     ariaLabel: a ?? t,
     ariaLabelledBy: o,
     portalContainerRefs: h
-  }), N = typeof s == "string";
+  }), C = typeof s == "string";
   return /* @__PURE__ */ e.createElement(j.Provider, {
     value: x
   }, /* @__PURE__ */ e.createElement("div", {
@@ -51,7 +51,7 @@ const _ = (n) => {
     "aria-hidden": i ? void 0 : !0
   }, /* @__PURE__ */ e.createElement("div", r({
     ref: y
-  }, C, {
+  }, w, {
     className: "modal-content relative flex flex-col gap-3 bg-[var(--color-white)] rounded-xl shadow-lg p-7",
     style: {
       width: f,
@@ -62,13 +62,13 @@ const _ = (n) => {
     className: "flex items-start justify-between gap-3"
   }, t && /* @__PURE__ */ e.createElement("h2", {
     id: E,
-    className: "text-lg font-semibold text-[var(--color-gray-900)]"
-  }, t), u && /* @__PURE__ */ e.createElement(w, {
+    className: "text-lg font-semibold text-[var(--color-gray-900)] break-words min-w-0"
+  }, t), u && /* @__PURE__ */ e.createElement(N, {
     name: "close",
     onClick: l,
     ariaLabel: "Close dialog",
     className: "cursor-pointer shrink-0 ml-auto"
-  })), N ? /* @__PURE__ */ e.createElement("p", {
+  })), C ? /* @__PURE__ */ e.createElement("p", {
     className: "leading-normal text-[var(--color-gray-700)]"
   }, s) : s, /* @__PURE__ */ e.createElement("div", {
     className: "flex flex-wrap items-center justify-end gap-4 pt-3"

package/dist/index12.js.map

@@ -1 +1 @@
-{"version":3,"file":"index12.js","sources":["../src/components/Modal/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Button } from 'src/components/Button';\nimport { ButtonProps } from 'src/components/Button';\nimport { Icon } from '../Icon';\nimport { useModalA11y } from 'src/utils/a11y';\nimport { FocusTrapPortalContext, useFocusTrapPortalRegistry } from 'src/utils/a11y/FocusTrapPortalContext';\nimport './style.scss';\n\nexport interface ModalProps {\n  title?: string;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  content: string | React.ReactNode;\n  successButtonProps?: ButtonProps;\n  cancelButtonProps?: ButtonProps;\n  cancelAction?: () => void;\n  successAction?: () => void;\n  showCloseIcon?: boolean;\n  isOpen: boolean;\n  width?: string;\n  height?: string;\n  automationId?: string;\n  customModalClassName?: string;\n}\n\nexport const Modal: FC<ModalProps> = (props) => {\n  const {\n    title,\n    ariaLabel,\n    ariaLabelledBy,\n    content = '',\n    showCloseIcon = false,\n    successButtonProps,\n    cancelButtonProps,\n    cancelAction,\n    successAction,\n    isOpen,\n    width = '500px',\n    height = 'auto',\n    automationId = '',\n    customModalClassName = ''\n  } = props;\n\n  const { register, portalContainerRefs } = useFocusTrapPortalRegistry();\n\n  const { containerRef, titleId, dialogProps } = useModalA11y({\n    isOpen,\n    onDismiss: cancelAction,\n    ariaLabel: ariaLabel ?? title,\n    ariaLabelledBy,\n    portalContainerRefs,\n  });\n\n  const isContentString = typeof content === 'string';\n\n  return (\n    <FocusTrapPortalContext.Provider value={register}>\n      <div\n        className={`${customModalClassName} se-design-modal fixed inset-0 flex items-start justify-center z-[2001] backdrop-brightness-50 backdrop-blur-sm ${isOpen ? 'visible' : 'invisible pointer-events-none'\n          }`}\n        aria-hidden={isOpen ? undefined : true}\n      >\n        <div\n          ref={containerRef}\n          {...dialogProps}\n          className=\"modal-content relative flex flex-col gap-3 bg-[var(--color-white)] rounded-xl shadow-lg p-7\"\n          style={{ width, height }}\n          data-automation-id={automationId}\n        >\n          <div className=\"flex items-start justify-between gap-3\">\n            {title && <h2 id={titleId} className=\"text-lg font-semibold text-[var(--color-gray-900)]\">{title}</h2>}\n            {showCloseIcon && (\n              <Icon name=\"close\" onClick={cancelAction} ariaLabel=\"Close dialog\" className=\"cursor-pointer shrink-0 ml-auto\" />\n            )}\n          </div>\n          {isContentString ? <p className=\"leading-normal text-[var(--color-gray-700)]\">{content}</p> : content}\n          <div className=\"flex flex-wrap items-center justify-end gap-4 pt-3\">\n            {cancelButtonProps?.label && <Button {...cancelButtonProps} onClick={cancelAction} />}\n            {successButtonProps?.label && <Button {...successButtonProps} onClick={successAction} />}\n          </div>\n        </div>\n      </div>\n    </FocusTrapPortalContext.Provider>\n  );\n};\n"],"names":["Modal","props","title","ariaLabel","ariaLabelledBy","content","showCloseIcon","successButtonProps","cancelButtonProps","cancelAction","successAction","isOpen","width","height","automationId","customModalClassName","register","portalContainerRefs","useFocusTrapPortalRegistry","containerRef","titleId","dialogProps","useModalA11y","onDismiss","isContentString","React","createElement","FocusTrapPortalContext","Provider","value","className","undefined","_extends","ref","style","id","Icon","name","onClick","label","Button"],"mappings":";;;;;;;;;;;;;;;;AAyBO,MAAMA,IAAyBC,CAAAA,MAAU;AAC9C,QAAM;AAAA,IACJC,OAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,SAAAA,IAAU;AAAA,IACVC,eAAAA,IAAgB;AAAA,IAChBC,oBAAAA;AAAAA,IACAC,mBAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,QAAAA;AAAAA,IACAC,OAAAA,IAAQ;AAAA,IACRC,QAAAA,IAAS;AAAA,IACTC,cAAAA,IAAe;AAAA,IACfC,sBAAAA,IAAuB;AAAA,EAAA,IACrBd,GAEE;AAAA,IAAEe,UAAAA;AAAAA,IAAUC,qBAAAA;AAAAA,EAAAA,IAAwBC,EAAAA,GAEpC;AAAA,IAAEC,cAAAA;AAAAA,IAAcC,SAAAA;AAAAA,IAASC,aAAAA;AAAAA,EAAAA,IAAgBC,EAAa;AAAA,IAC1DX,QAAAA;AAAAA,IACAY,WAAWd;AAAAA,IACXN,WAAWA,KAAaD;AAAAA,IACxBE,gBAAAA;AAAAA,IACAa,qBAAAA;AAAAA,EAAAA,CACD,GAEKO,IAAkB,OAAOnB,KAAY;AAE3C,SACEoB,gBAAAA,EAAAC,cAACC,EAAuBC,UAAQ;AAAA,IAACC,OAAOb;AAAAA,EAAAA,GACtCS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEI,WAAW,GAAGf,CAAoB,mHAAmHJ,IAAS,YAAY,+BAA+B;AAAA,IAEzM,eAAaA,IAASoB,SAAY;AAAA,EAAA,GAElCN,gBAAAA,EAAAC,cAAA,OAAAM,EAAA;AAAA,IACEC,KAAKd;AAAAA,EAAAA,GACDE,GAAW;AAAA,IACfS,WAAU;AAAA,IACVI,OAAO;AAAA,MAAEtB,OAAAA;AAAAA,MAAOC,QAAAA;AAAAA,IAAAA;AAAAA,IAChB,sBAAoBC;AAAAA,EAAAA,CAAa,GAEjCW,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKI,WAAU;AAAA,EAAA,GACZ5B,KAASuB,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIS,IAAIf;AAAAA,IAASU,WAAU;AAAA,EAAA,GAAsD5B,CAAU,GACpGI,KACCmB,gBAAAA,EAAAC,cAACU,GAAI;AAAA,IAACC,MAAK;AAAA,IAAQC,SAAS7B;AAAAA,IAAcN,WAAU;AAAA,IAAe2B,WAAU;AAAA,EAAA,CAAmC,CAE/G,GACJN,IAAkBC,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IAAGI,WAAU;AAAA,EAAA,GAA+CzB,CAAW,IAAIA,GAC9FoB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKI,WAAU;AAAA,EAAA,GACZtB,GAAmB+B,SAASd,gBAAAA,EAAAC,cAACc,GAAMR,EAAA,CAAA,GAAKxB,GAAiB;AAAA,IAAE8B,SAAS7B;AAAAA,EAAAA,CAAa,CAAE,GACnFF,GAAoBgC,SAASd,gBAAAA,EAAAC,cAACc,GAAMR,MAAKzB,GAAkB;AAAA,IAAE+B,SAAS5B;AAAAA,EAAAA,CAAc,CAAE,CACpF,CACF,CACF,CAC0B;AAErC;"}
+{"version":3,"file":"index12.js","sources":["../src/components/Modal/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Button } from 'src/components/Button';\nimport { ButtonProps } from 'src/components/Button';\nimport { Icon } from '../Icon';\nimport { useModalA11y } from 'src/utils/a11y';\nimport { FocusTrapPortalContext, useFocusTrapPortalRegistry } from 'src/utils/a11y/FocusTrapPortalContext';\nimport './style.scss';\n\nexport interface ModalProps {\n  title?: string;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  content: string | React.ReactNode;\n  successButtonProps?: ButtonProps;\n  cancelButtonProps?: ButtonProps;\n  cancelAction?: () => void;\n  successAction?: () => void;\n  showCloseIcon?: boolean;\n  isOpen: boolean;\n  width?: string;\n  height?: string;\n  automationId?: string;\n  customModalClassName?: string;\n}\n\nexport const Modal: FC<ModalProps> = (props) => {\n  const {\n    title,\n    ariaLabel,\n    ariaLabelledBy,\n    content = '',\n    showCloseIcon = false,\n    successButtonProps,\n    cancelButtonProps,\n    cancelAction,\n    successAction,\n    isOpen,\n    width = '500px',\n    height = 'auto',\n    automationId = '',\n    customModalClassName = ''\n  } = props;\n\n  const { register, portalContainerRefs } = useFocusTrapPortalRegistry();\n\n  const { containerRef, titleId, dialogProps } = useModalA11y({\n    isOpen,\n    onDismiss: cancelAction,\n    ariaLabel: ariaLabel ?? title,\n    ariaLabelledBy,\n    portalContainerRefs,\n  });\n\n  const isContentString = typeof content === 'string';\n\n  return (\n    <FocusTrapPortalContext.Provider value={register}>\n      <div\n        className={`${customModalClassName} se-design-modal fixed inset-0 flex items-start justify-center z-[2001] backdrop-brightness-50 backdrop-blur-sm ${isOpen ? 'visible' : 'invisible pointer-events-none'\n          }`}\n        aria-hidden={isOpen ? undefined : true}\n      >\n        <div\n          ref={containerRef}\n          {...dialogProps}\n          className=\"modal-content relative flex flex-col gap-3 bg-[var(--color-white)] rounded-xl shadow-lg p-7\"\n          style={{ width, height }}\n          data-automation-id={automationId}\n        >\n          <div className=\"flex items-start justify-between gap-3\">\n            {title && <h2 id={titleId} className=\"text-lg font-semibold text-[var(--color-gray-900)] break-words min-w-0\">{title}</h2>}\n            {showCloseIcon && (\n              <Icon name=\"close\" onClick={cancelAction} ariaLabel=\"Close dialog\" className=\"cursor-pointer shrink-0 ml-auto\" />\n            )}\n          </div>\n          {isContentString ? <p className=\"leading-normal text-[var(--color-gray-700)]\">{content}</p> : content}\n          <div className=\"flex flex-wrap items-center justify-end gap-4 pt-3\">\n            {cancelButtonProps?.label && <Button {...cancelButtonProps} onClick={cancelAction} />}\n            {successButtonProps?.label && <Button {...successButtonProps} onClick={successAction} />}\n          </div>\n        </div>\n      </div>\n    </FocusTrapPortalContext.Provider>\n  );\n};\n"],"names":["Modal","props","title","ariaLabel","ariaLabelledBy","content","showCloseIcon","successButtonProps","cancelButtonProps","cancelAction","successAction","isOpen","width","height","automationId","customModalClassName","register","portalContainerRefs","useFocusTrapPortalRegistry","containerRef","titleId","dialogProps","useModalA11y","onDismiss","isContentString","React","createElement","FocusTrapPortalContext","Provider","value","className","undefined","_extends","ref","style","id","Icon","name","onClick","label","Button"],"mappings":";;;;;;;;;;;;;;;;AAyBO,MAAMA,IAAyBC,CAAAA,MAAU;AAC9C,QAAM;AAAA,IACJC,OAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,SAAAA,IAAU;AAAA,IACVC,eAAAA,IAAgB;AAAA,IAChBC,oBAAAA;AAAAA,IACAC,mBAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,QAAAA;AAAAA,IACAC,OAAAA,IAAQ;AAAA,IACRC,QAAAA,IAAS;AAAA,IACTC,cAAAA,IAAe;AAAA,IACfC,sBAAAA,IAAuB;AAAA,EAAA,IACrBd,GAEE;AAAA,IAAEe,UAAAA;AAAAA,IAAUC,qBAAAA;AAAAA,EAAAA,IAAwBC,EAAAA,GAEpC;AAAA,IAAEC,cAAAA;AAAAA,IAAcC,SAAAA;AAAAA,IAASC,aAAAA;AAAAA,EAAAA,IAAgBC,EAAa;AAAA,IAC1DX,QAAAA;AAAAA,IACAY,WAAWd;AAAAA,IACXN,WAAWA,KAAaD;AAAAA,IACxBE,gBAAAA;AAAAA,IACAa,qBAAAA;AAAAA,EAAAA,CACD,GAEKO,IAAkB,OAAOnB,KAAY;AAE3C,SACEoB,gBAAAA,EAAAC,cAACC,EAAuBC,UAAQ;AAAA,IAACC,OAAOb;AAAAA,EAAAA,GACtCS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEI,WAAW,GAAGf,CAAoB,mHAAmHJ,IAAS,YAAY,+BAA+B;AAAA,IAEzM,eAAaA,IAASoB,SAAY;AAAA,EAAA,GAElCN,gBAAAA,EAAAC,cAAA,OAAAM,EAAA;AAAA,IACEC,KAAKd;AAAAA,EAAAA,GACDE,GAAW;AAAA,IACfS,WAAU;AAAA,IACVI,OAAO;AAAA,MAAEtB,OAAAA;AAAAA,MAAOC,QAAAA;AAAAA,IAAAA;AAAAA,IAChB,sBAAoBC;AAAAA,EAAAA,CAAa,GAEjCW,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKI,WAAU;AAAA,EAAA,GACZ5B,KAASuB,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIS,IAAIf;AAAAA,IAASU,WAAU;AAAA,EAAA,GAA0E5B,CAAU,GACxHI,KACCmB,gBAAAA,EAAAC,cAACU,GAAI;AAAA,IAACC,MAAK;AAAA,IAAQC,SAAS7B;AAAAA,IAAcN,WAAU;AAAA,IAAe2B,WAAU;AAAA,EAAA,CAAmC,CAE/G,GACJN,IAAkBC,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IAAGI,WAAU;AAAA,EAAA,GAA+CzB,CAAW,IAAIA,GAC9FoB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKI,WAAU;AAAA,EAAA,GACZtB,GAAmB+B,SAASd,gBAAAA,EAAAC,cAACc,GAAMR,EAAA,CAAA,GAAKxB,GAAiB;AAAA,IAAE8B,SAAS7B;AAAAA,EAAAA,CAAa,CAAE,GACnFF,GAAoBgC,SAASd,gBAAAA,EAAAC,cAACc,GAAMR,MAAKzB,GAAkB;AAAA,IAAE+B,SAAS5B;AAAAA,EAAAA,CAAc,CAAE,CACpF,CACF,CACF,CAC0B;AAErC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "se-design",
-  "version": "1.0.96",
+  "version": "1.0.97",
   "type": "module",
   "module": "dist/index.js",
   "exports": {