@x15ventures/x15-ui-library 3.11.4

package/dist/esm/components/design/chip/chip.css

@@ -0,0 +1,188 @@
+/* Popovers */
+.chip {
+  display: flex;
+  flex-direction: row;
+  column-gap: 5px;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  font-weight: normal;
+  border: var(--chipBorder, 2px solid);
+  width: max-content;
+}
+.chip small {
+  display: block;
+  line-height: var(--chipFontAdjust, 1em);
+  height: 1em;
+}
+.chip.chip_yellow {
+  background: var(--chipYellow, #fc0);
+  color: var(--chipBlack, #222);
+  border-color: var(--chipYellow, #fc0);
+}
+.chip.chip_yellow.chip_soft {
+  background: var(--chipYellowSoftBg, #FEF9C3);
+  color: var(--chipYellowSoftTxt, #92400E);
+  border-color: var(--chipYellowSoftBorder, #92400E);
+}
+.chip.chip_orange {
+  background: var(--chipOrange, #ff7300);
+  color: var(--chipBlack, #222);
+  border-color: var(--chipOrange, #ff7300);
+}
+.chip.chip_orange.chip_soft {
+  background: var(--chipOrangeSoftBg, #FFEDD5);
+  color: var(--chipOrangeSoftTxt, #C2410C);
+  border-color: var(--chipOrangeSoftBorder, #C2410C);
+}
+.chip.chip_red {
+  background: var(--chipRed, #e00);
+  color: var(--chipWhite, #fff);
+  border-color: var(--chipRed, #e00);
+}
+.chip.chip_red.chip_outline {
+  color: var(--chipRed, #e00);
+}
+.chip.chip_red.chip_soft {
+  background: var(--chipRedSoftBg, #FEE2E2);
+  color: var(--chipRedSoftTxt, #B91C1C);
+  border-color: var(--chipRedSoftBorder, #B91C1C);
+}
+.chip.chip_purple {
+  background: var(--chipPurple, #b3d);
+  color: var(--chipWhite, #fff);
+  border-color: var(--chipPurple, #b3d);
+}
+.chip.chip_purple.chip_outline {
+  color: var(--chipPurple, #b3d);
+}
+.chip.chip_purple.chip_soft {
+  background: var(--chipPurpleSoftBg, #F3E8FF);
+  color: var(--chipPurpleSoftTxt, #6B21A8);
+  border-color: var(--chipPurpleSoftBorder, #6B21A8);
+}
+.chip.chip_blue {
+  background: var(--chipBlue, #69f);
+  color: var(--chipBlack, #222);
+  border-color: var(--chipBlue, #69f);
+}
+.chip.chip_blue.chip_soft {
+  background: var(--chipBlueSoftBg, #DBEAFE);
+  color: var(--chipBlueSoftTxt, #1E40AF);
+  border-color: var(--chipBlueSoftBorder, #1E40AF);
+}
+.chip.chip_green {
+  background: var(--chipGreen, #3a6);
+  color: var(--chipBlack, #222);
+  border-color: var(--chipGreen, #3a6);
+}
+.chip.chip_green.chip_soft {
+  background: var(--chipGreenSoftBg, #D1FAE5);
+  color: var(--chipGreenSoftTxt, #166534);
+  border-color: var(--chipGreenSoftBorder, #166534);
+}
+.chip.chip_black {
+  background: var(--chipBlack, #222);
+  color: var(--chipWhite, #fff);
+  border-color: var(--chipBlack, #222);
+}
+.chip.chip_black.chip_outline {
+  color: var(--chipBlack, #222);
+}
+.chip.chip_white {
+  background: var(--chipWhite, #fff);
+  color: var(--chipBlack, #222);
+  border-color: var(--chipWhite, #fff);
+}
+.chip.chip_white.chip_outline {
+  background: var(--chipBlack, #222);
+  color: var(--chipWhite, #fff);
+}
+.chip.chip_darkgrey {
+  background: var(--chipDarkgrey, #555);
+  color: var(--chipWhite, #fff);
+  border-color: var(--chipDarkgrey, #555);
+}
+.chip.chip_darkgrey.chip_outline {
+  color: var(--chipDarkgrey, #555);
+}
+.chip.chip_darkgrey.chip_soft {
+  background: var(--chipDarkgreySoftBg, #F3F4F6);
+  color: var(--chipDarkgreySoftTxt, #374151);
+  border-color: var(--chipDarkgreySoftBorder, #374151);
+}
+.chip.chip_lightgrey {
+  background: var(--chipLightgrey, #ccc);
+  color: var(--chipBlack, #222);
+  border-color: var(--chipWhite, #fff);
+}
+.chip.chip_lightgrey.chip_outlineInverse {
+  color: var(--chipWhite, #fff);
+}
+.chip.chip_lightgrey.chip_soft {
+  background: var(--chipLightgreySoftBg, #F9FAFB);
+  color: var(--chipLightgreySoftTxt, #6B7280);
+  border-color: var(--chipLightgreySoftBorder, #6B7280);
+}
+.chip.chip_xs small {
+  font-size: 11px;
+}
+.chip.chip_xs {
+  padding: 12px;
+  height: 16px;
+  border-radius: 12px;
+}
+.chip.chip_xs.chip_square {
+  border-radius: var(--chipSquareBorderRadius, 5px);
+}
+.chip.chip_s small {
+  font-size: 13px;
+}
+.chip.chip_s {
+  padding: 12px;
+  height: 20px;
+  border-radius: 12px;
+}
+.chip.chip_s.chip_square {
+  border-radius: var(--chipSquareBorderRadius, 5px);
+}
+.chip.chip_m small {
+  font-size: 15px;
+}
+.chip.chip_m {
+  padding: 0 10px;
+  height: 30px;
+  border-radius: 15px;
+}
+.chip.chip_m.chip_square {
+  border-radius: var(--chipSquareBorderRadius, 5px);
+}
+.chip.chip_l small {
+  font-size: 18px;
+}
+.chip.chip_l {
+  padding: 0 15px;
+  height: 40px;
+  border-radius: 20px;
+}
+.chip.chip_l.chip_square {
+  border-radius: var(--chipSquareBorderRadius, 5px);
+}
+.chip.chip_xl small {
+  font-size: 22px;
+}
+.chip.chip_xl {
+  padding: 0 15px;
+  height: 50px;
+  border-radius: 25px;
+}
+.chip.chip_xl.chip_square {
+  border-radius: var(--chipSquareBorderRadius, 5px);
+}
+.chip.chip_outline {
+  background: var(--chipWhite, #fff);
+}
+.chip.chip_outlineInverse {
+  background: var(--chipBlack, #222);
+  color: var(--chipWhite, #fff);
+}

package/dist/esm/components/design/container/Container.js

@@ -0,0 +1,46 @@
+import React from 'react';
+export const Container = ({
+  isParentInlineElement = false,
+  customCssClass = '',
+  topSection,
+  middleSection,
+  bottomSection
+}) => {
+  const getSectionClassName = alignmentSettings => {
+    return `${alignmentSettings.horizontal || 'left'}Align ${alignmentSettings.vertical || 'top'}Align`;
+  };
+  const OuterContainerElement = isParentInlineElement ? 'span' : 'section';
+  const InnerContainerElement = isParentInlineElement ? 'span' : 'div';
+  const ContainerContentPiece = ({
+    content,
+    alignment,
+    customCssClass
+  }) => {
+    const className = alignment ? getSectionClassName(alignment) : '';
+    return /*#__PURE__*/React.createElement(InnerContainerElement, {
+      className: `x15Container_contentPiece ${customCssClass || ''} ${className}`
+    }, content);
+  };
+  const ContainerSection = ({
+    sectionName,
+    section
+  }) => {
+    return /*#__PURE__*/React.createElement(InnerContainerElement, {
+      className: `x15Container_${sectionName} flexRow ${section.customCssClass || ''}`
+    }, section.left && ContainerContentPiece(section.left), section.middle && ContainerContentPiece(section.middle), section.right && ContainerContentPiece(section.right));
+  };
+  return /*#__PURE__*/React.createElement(OuterContainerElement, {
+    className: `x15Container ${customCssClass}`
+  }, topSection && /*#__PURE__*/React.createElement(ContainerSection, {
+    sectionName: "topSection",
+    section: topSection
+  }), middleSection && /*#__PURE__*/React.createElement(ContainerSection, {
+    sectionName: "middleSection",
+    section: middleSection
+  }), bottomSection && /*#__PURE__*/React.createElement(ContainerSection, {
+    sectionName: "bottomSection",
+    section: bottomSection
+  }));
+};
+export default Container;
+//# sourceMappingURL=Container.js.map

package/dist/esm/components/design/container/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","names":["React","Container","isParentInlineElement","customCssClass","topSection","middleSection","bottomSection","getSectionClassName","alignmentSettings","horizontal","vertical","OuterContainerElement","InnerContainerElement","ContainerContentPiece","content","alignment","className","createElement","ContainerSection","sectionName","section","left","middle","right"],"sources":["../../../../../src/components/design/container/Container.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\n\nexport interface ContainerSectionAlignment {\n  horizontal?: 'left' | 'center' | 'right';\n  vertical?: 'top' | 'middle' | 'bottom';\n}\n\nexport type ContainerSectionContent = {\n  content: string | ReactNode;\n  customCssClass?: string;\n  alignment?: ContainerSectionAlignment;\n}\n\nexport type ContainerSection = {\n  left?: ContainerSectionContent;\n  middle?: ContainerSectionContent;\n  right?: ContainerSectionContent;\n  customCssClass?: string;\n}\n\nexport interface ContainerProps {\n  isParentInlineElement?: boolean;\n  customCssClass?: string;\n  topSection?: ContainerSection;\n  middleSection?: ContainerSection;\n  bottomSection?: ContainerSection;\n}\n\nexport const Container: FC<ContainerProps> = (\n  {\n    isParentInlineElement = false,\n    customCssClass = '',\n    topSection,\n    middleSection,\n    bottomSection\n  }\n) => {\n  const getSectionClassName = (alignmentSettings: ContainerSectionAlignment) => {\n    return `${ alignmentSettings.horizontal || 'left' }Align ${ alignmentSettings.vertical || 'top' }Align`;\n  };\n\n  const OuterContainerElement = isParentInlineElement ? 'span' : 'section';\n  const InnerContainerElement = isParentInlineElement ? 'span' : 'div';\n\n\n  const ContainerContentPiece: FC<ContainerSectionContent> = (\n    {\n      content,\n      alignment,\n      customCssClass\n    }\n  ) => {\n    const className = alignment ? getSectionClassName(alignment) : '';\n    return (\n      <InnerContainerElement className={ `x15Container_contentPiece ${ customCssClass || '' } ${ className }` }>\n        { content }\n      </InnerContainerElement>\n    );\n  };\n  \n  const ContainerSection: FC<{ sectionName: string, section: ContainerSection }> = ({ sectionName, section }) => {\n    return (\n      <InnerContainerElement className={ `x15Container_${ sectionName } flexRow ${ section.customCssClass || '' }` }>\n        {\n          section.left && ContainerContentPiece(section.left)\n        }\n        {\n          section.middle && ContainerContentPiece(section.middle)\n        }\n        {\n          section.right && ContainerContentPiece(section.right)\n        }\n      </InnerContainerElement>\n    );\n  };\n\n  return (\n    <OuterContainerElement className={ `x15Container ${ customCssClass }` }>\n      {\n        topSection && (\n          <ContainerSection sectionName=\"topSection\" section={ topSection } />\n        )\n      }\n      {\n        middleSection && (\n          <ContainerSection sectionName=\"middleSection\" section={ middleSection } />\n        )\n      }\n      {\n        bottomSection && (\n          <ContainerSection sectionName=\"bottomSection\" section={ bottomSection } />\n        )\n      }\n    </OuterContainerElement>\n  );\n};\n\nexport default Container;"],"mappings":"AAAA,OAAOA,KAAK,MAAyB,OAAO;AA4B5C,OAAO,MAAMC,SAA6B,GAAGA,CAC3C;EACEC,qBAAqB,GAAG,KAAK;EAC7BC,cAAc,GAAG,EAAE;EACnBC,UAAU;EACVC,aAAa;EACbC;AACF,CAAC,KACE;EACH,MAAMC,mBAAmB,GAAIC,iBAA4C,IAAK;IAC5E,OAAO,GAAIA,iBAAiB,CAACC,UAAU,IAAI,MAAM,SAAWD,iBAAiB,CAACE,QAAQ,IAAI,KAAK,OAAQ;EACzG,CAAC;EAED,MAAMC,qBAAqB,GAAGT,qBAAqB,GAAG,MAAM,GAAG,SAAS;EACxE,MAAMU,qBAAqB,GAAGV,qBAAqB,GAAG,MAAM,GAAG,KAAK;EAGpE,MAAMW,qBAAkD,GAAGA,CACzD;IACEC,OAAO;IACPC,SAAS;IACTZ;EACF,CAAC,KACE;IACH,MAAMa,SAAS,GAAGD,SAAS,GAAGR,mBAAmB,CAACQ,SAAS,CAAC,GAAG,EAAE;IACjE,oBACEf,KAAA,CAAAiB,aAAA,CAACL,qBAAqB;MAACI,SAAS,EAAG,6BAA8Bb,cAAc,IAAI,EAAE,IAAMa,SAAS;IAAK,GACrGF,OACmB,CAAC;EAE5B,CAAC;EAED,MAAMI,gBAAwE,GAAGA,CAAC;IAAEC,WAAW;IAAEC;EAAQ,CAAC,KAAK;IAC7G,oBACEpB,KAAA,CAAAiB,aAAA,CAACL,qBAAqB;MAACI,SAAS,EAAG,gBAAiBG,WAAW,YAAcC,OAAO,CAACjB,cAAc,IAAI,EAAE;IAAK,GAE1GiB,OAAO,CAACC,IAAI,IAAIR,qBAAqB,CAACO,OAAO,CAACC,IAAI,CAAC,EAGnDD,OAAO,CAACE,MAAM,IAAIT,qBAAqB,CAACO,OAAO,CAACE,MAAM,CAAC,EAGvDF,OAAO,CAACG,KAAK,IAAIV,qBAAqB,CAACO,OAAO,CAACG,KAAK,CAEjC,CAAC;EAE5B,CAAC;EAED,oBACEvB,KAAA,CAAAiB,aAAA,CAACN,qBAAqB;IAACK,SAAS,EAAG,gBAAiBb,cAAc;EAAK,GAEnEC,UAAU,iBACRJ,KAAA,CAAAiB,aAAA,CAACC,gBAAgB;IAACC,WAAW,EAAC,YAAY;IAACC,OAAO,EAAGhB;EAAY,CAAE,CACpE,EAGDC,aAAa,iBACXL,KAAA,CAAAiB,aAAA,CAACC,gBAAgB;IAACC,WAAW,EAAC,eAAe;IAACC,OAAO,EAAGf;EAAe,CAAE,CAC1E,EAGDC,aAAa,iBACXN,KAAA,CAAAiB,aAAA,CAACC,gBAAgB;IAACC,WAAW,EAAC,eAAe;IAACC,OAAO,EAAGd;EAAe,CAAE,CAGxD,CAAC;AAE5B,CAAC;AAED,eAAeL,SAAS","ignoreList":[]}

package/dist/esm/components/design/copyText/CopyText.js

@@ -0,0 +1,37 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+import { Icon } from '../icons/basicIcon/Icon';
+import './copyText.css';
+export const CopyText = ({
+  text
+}) => {
+  const [copied, setCopied] = useState(false);
+  const textareaRef = useRef(null);
+  const handleCopy = async () => {
+    if (textareaRef.current) {
+      textareaRef.current.select(); // Highlight the text
+    }
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "copyText"
+  }, /*#__PURE__*/React.createElement("textarea", {
+    ref: textareaRef,
+    value: text,
+    rows: 1,
+    onClick: handleCopy,
+    className: "textArea"
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "copyButton",
+    onClick: handleCopy
+  }, copied ? /*#__PURE__*/React.createElement(Icon, {
+    icon: "checkmark2"
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    icon: "files-empty"
+  })));
+};
+//# sourceMappingURL=CopyText.js.map

package/dist/esm/components/design/copyText/CopyText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyText.js","names":["React","useRef","useState","Icon","CopyText","text","copied","setCopied","textareaRef","handleCopy","current","select","navigator","clipboard","writeText","setTimeout","createElement","className","ref","value","rows","onClick","type","icon"],"sources":["../../../../../src/components/design/copyText/CopyText.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useState } from 'react';\nimport { Icon } from '../icons/basicIcon/Icon';\n\nimport './copyText.scss';\n\nexport const CopyText = ({ text } : { text: string}) => {\n  const [copied, setCopied] = useState(false);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  const handleCopy = async () => {\n    if (textareaRef.current) {\n      textareaRef.current.select(); // Highlight the text\n    }\n    await navigator.clipboard.writeText(text);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds\n  };\n\n  return (\n    <div className=\"copyText\">\n      <textarea\n        ref={ textareaRef }\n        value={ text }\n        rows={ 1 }\n        onClick={ handleCopy }\n        className=\"textArea\"\n      />\n      <button type=\"button\" className=\"copyButton\" onClick={ handleCopy }>\n        { copied ? <Icon icon=\"checkmark2\" /> : <Icon icon=\"files-empty\" /> }\n      </button>\n    </div>\n  );\n};\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,KAAK,IAAIC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC/C,SAASC,IAAI,QAAQ,yBAAyB;AAE9C,OAAO,iBAAiB;AAExB,OAAO,MAAMC,QAAQ,GAAGA,CAAC;EAAEC;AAAuB,CAAC,KAAK;EACtD,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGL,QAAQ,CAAC,KAAK,CAAC;EAC3C,MAAMM,WAAW,GAAGP,MAAM,CAAsB,IAAI,CAAC;EAErD,MAAMQ,UAAU,GAAG,MAAAA,CAAA,KAAY;IAC7B,IAAID,WAAW,CAACE,OAAO,EAAE;MACvBF,WAAW,CAACE,OAAO,CAACC,MAAM,CAAC,CAAC,CAAC,CAAC;IAChC;IACA,MAAMC,SAAS,CAACC,SAAS,CAACC,SAAS,CAACT,IAAI,CAAC;IACzCE,SAAS,CAAC,IAAI,CAAC;IACfQ,UAAU,CAAC,MAAMR,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;EAC5C,CAAC;EAED,oBACEP,KAAA,CAAAgB,aAAA;IAAKC,SAAS,EAAC;EAAU,gBACvBjB,KAAA,CAAAgB,aAAA;IACEE,GAAG,EAAGV,WAAa;IACnBW,KAAK,EAAGd,IAAM;IACde,IAAI,EAAG,CAAG;IACVC,OAAO,EAAGZ,UAAY;IACtBQ,SAAS,EAAC;EAAU,CACrB,CAAC,eACFjB,KAAA,CAAAgB,aAAA;IAAQM,IAAI,EAAC,QAAQ;IAACL,SAAS,EAAC,YAAY;IAACI,OAAO,EAAGZ;EAAY,GAC/DH,MAAM,gBAAGN,KAAA,CAAAgB,aAAA,CAACb,IAAI;IAACoB,IAAI,EAAC;EAAY,CAAE,CAAC,gBAAGvB,KAAA,CAAAgB,aAAA,CAACb,IAAI;IAACoB,IAAI,EAAC;EAAa,CAAE,CAC5D,CACL,CAAC;AAEV,CAAC","ignoreList":[]}

package/dist/esm/components/design/copyText/copyText.css

@@ -0,0 +1,19 @@
+.copyText {
+  display: flex;
+  flex-direction: row;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.copyText .textArea {
+  resize: none;
+  width: 100%;
+  flex-basis: 0%;
+  flex-grow: 1;
+  flex-shrink: 1;
+  user-select: none;
+  font-size: medium;
+  font-family: monospace;
+  padding: 10px;
+  border-radius: 5px 0 0 5px;
+  background-color: rgb(243, 243, 243);
+}

package/dist/esm/components/design/dialog/Dialog.js

@@ -0,0 +1,118 @@
+/* eslint-disable jsxA11y/no-noninteractive-tabindex */
+'use client';
+
+import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import { xmarkLarge } from '@x15ventures/x15-ui-library-icons/iconDefinitions/index';
+import { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';
+import { EllipsisTooltip } from '../tooltip';
+import { useDialogOverlay } from '../../../hooks/DialogOverlay';
+import { useFocusTrap } from '../../../hooks/FocusTrap';
+import './dialog.css';
+export const Dialog = ({
+  id,
+  size = 'm',
+  position = 'center',
+  animation = 'none',
+  scrollBehaviour = 'contentOnly',
+  onClose = () => {},
+  open = false,
+  overlay,
+  header,
+  footer,
+  children,
+  screenReaderInstruction = `The following content is in a dialog. 
+      You can press the Tab key to navigate through the elements, and press Escape to close the dialog.`,
+  customCssClasses,
+  showFocusOutline = false
+}) => {
+  const [isOpen, setIsOpen] = useState(open);
+  const dialogElement = useRef(null);
+  const dialogHeaderElement = useRef(null);
+  const TOGGLE_TEXT = 'Open and close dialog';
+  const dialogCloseButton = useRef(null);
+  const {
+    createOverlay,
+    removeOverlay
+  } = useDialogOverlay(overlay || {});
+  useFocusTrap(dialogElement, () => HandleClose());
+  const dialogCssClass = useMemo(() => {
+    return `dialog 
+    ${isOpen || open ? 'isOpen' : ''}
+    dialogSize_${size}
+    dialogPosition_${position}
+    dialogAnimation_${animation}
+    dialogScrollBehaviour_${scrollBehaviour}
+    ${size === 'dynamic' ? 'dialogSize_dynamic' : ''}
+    ${customCssClasses?.dialog || ''}
+    ${showFocusOutline ? 'showFocusOutline' : ''}`;
+  }, [open, isOpen, size, position, animation, scrollBehaviour, customCssClasses, showFocusOutline]);
+  const HandleClose = useCallback(() => {
+    setIsOpen(false);
+    removeOverlay();
+    onClose();
+  }, [onClose, removeOverlay]);
+  const HandleOpen = useCallback(() => {
+    const dialogOverlay = createOverlay();
+    dialogOverlay.showOverlay();
+  }, [createOverlay]);
+  useEffect(() => {
+    if (open || isOpen) {
+      if (dialogHeaderElement.current) {
+        dialogHeaderElement.current.focus();
+      }
+      HandleOpen();
+    } else {
+      HandleClose();
+    }
+  }, [customCssClasses, createOverlay, open, isOpen, HandleOpen, HandleClose, dialogHeaderElement]);
+  const DialogCloseButton = () => /*#__PURE__*/React.createElement("button", {
+    ref: dialogCloseButton,
+    className: "dialogClose",
+    title: TOGGLE_TEXT,
+    type: "button",
+    onClick: () => HandleClose()
+  }, /*#__PURE__*/React.createElement(SvgIcon, {
+    svgDefinition: xmarkLarge
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Close dialog"));
+  return /*#__PURE__*/React.createElement("div", {
+    className: dialogCssClass,
+    role: "dialog",
+    "aria-labelledby": `dialogHeader_${id}`,
+    tabIndex: 0,
+    "aria-describedby": `dialogSRInstruction_${id}`,
+    "aria-modal": "true",
+    ref: dialogElement
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dialogFullScroller"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: dialogHeaderElement,
+    id: `dialogHeader_${id}`,
+    className: `dialogHeader ${customCssClasses?.header || ''}`,
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement("span", {
+    id: `dialogSRInstruction_${id}`,
+    className: "sr-only"
+  }, screenReaderInstruction), /*#__PURE__*/React.createElement("div", {
+    className: "dialogHeaderTextWrapper"
+  }, /*#__PURE__*/React.createElement(EllipsisTooltip, {
+    lineClamp: 2,
+    tooltipProps: {
+      customCssClass: 'shiftDown large dialogEllipsisTooltip'
+    }
+  }, typeof header === 'string' ? /*#__PURE__*/React.createElement("span", {
+    className: "dialogHeaderText"
+  }, header) : header)), /*#__PURE__*/React.createElement(DialogCloseButton, null)), /*#__PURE__*/React.createElement("div", {
+    className: "dialogContentAndFooterScroller"
+  }, /*#__PURE__*/React.createElement("section", {
+    className: `dialogContent ${customCssClasses?.content || ''}`,
+    tabIndex: 0
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: `dialogFooter ${customCssClasses?.footer || ''}`,
+    tabIndex: 0
+  }, typeof footer === 'string' ? /*#__PURE__*/React.createElement("span", {
+    className: "dialogFooterText"
+  }, footer) : footer))));
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/esm/components/design/dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":["React","useCallback","useEffect","useRef","useState","useMemo","xmarkLarge","SvgIcon","EllipsisTooltip","useDialogOverlay","useFocusTrap","Dialog","id","size","position","animation","scrollBehaviour","onClose","open","overlay","header","footer","children","screenReaderInstruction","customCssClasses","showFocusOutline","isOpen","setIsOpen","dialogElement","dialogHeaderElement","TOGGLE_TEXT","dialogCloseButton","createOverlay","removeOverlay","HandleClose","dialogCssClass","dialog","HandleOpen","dialogOverlay","showOverlay","current","focus","DialogCloseButton","createElement","ref","className","title","type","onClick","svgDefinition","role","tabIndex","lineClamp","tooltipProps","customCssClass","content"],"sources":["../../../../../src/components/design/dialog/Dialog.tsx"],"sourcesContent":["/* eslint-disable jsxA11y/no-noninteractive-tabindex */\n'use client';\n\nimport React, { ReactNode, useCallback, useEffect, useRef, useState, useMemo } from 'react';\nimport { xmarkLarge } from '@x15ventures/x15-ui-library-icons/iconDefinitions/index';\nimport { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';\nimport { EllipsisTooltip } from '../tooltip';\nimport { GenericFunction } from '../../../interfaces';\nimport { useDialogOverlay } from '../../../hooks/DialogOverlay';\nimport { useFocusTrap } from '../../../hooks/FocusTrap';\n\nimport './dialog.scss';\n\nexport interface DialogInterface {\n  id: string;\n  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'dynamic';\n  position?: 'left' | 'right' | 'top' | 'bottom' | 'center' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright';\n  animation?: 'none' | 'grow' | 'reveal';\n  scrollBehaviour?: 'contentOnly' | 'contentAndFooter' | 'all';\n  onClose: GenericFunction;\n  open?: boolean;\n  overlay?: {\n    parentNode?: HTMLElement;\n    customCssClass?: string;\n  };\n  header: string | ReactNode;\n  footer?: string | ReactNode;\n  children: ReactNode;\n  screenReaderInstruction?: string;\n  showFocusOutline?: boolean;\n  customCssClasses?: {\n    dialog?: string;\n    content?: string;\n    header?: string;\n    footer?: string;\n  };\n}\n\nexport const Dialog: React.FC<DialogInterface> = ({\n  id,\n  size = 'm',\n  position = 'center',\n  animation = 'none',\n  scrollBehaviour = 'contentOnly',\n  onClose = () => {},\n  open = false,\n  overlay,\n  header,\n  footer,\n  children,\n  screenReaderInstruction = `The following content is in a dialog. \n      You can press the Tab key to navigate through the elements, and press Escape to close the dialog.`,\n  customCssClasses,\n  showFocusOutline = false,\n}) => {\n  const [isOpen, setIsOpen] = useState<boolean>(open);\n  const dialogElement = useRef<HTMLDivElement>(null);\n  const dialogHeaderElement = useRef<HTMLDivElement>(null);\n\n  const TOGGLE_TEXT = 'Open and close dialog';\n  const dialogCloseButton = useRef(null);\n\n  const { createOverlay, removeOverlay } = useDialogOverlay(overlay || {});\n  useFocusTrap(dialogElement, () => HandleClose());\n\n  const dialogCssClass = useMemo(() => {\n    return `dialog \n    ${ isOpen || open ? 'isOpen' : '' }\n    dialogSize_${ size }\n    dialogPosition_${ position }\n    dialogAnimation_${ animation }\n    dialogScrollBehaviour_${ scrollBehaviour }\n    ${ size === 'dynamic' ? 'dialogSize_dynamic' : '' }\n    ${ customCssClasses?.dialog || '' }\n    ${ showFocusOutline ? 'showFocusOutline' : '' }`;\n  }, [open, isOpen, size, position, animation, scrollBehaviour, customCssClasses, showFocusOutline]);\n\n  const HandleClose = useCallback(() => {\n    setIsOpen(false);\n    removeOverlay();\n    onClose();\n  }, [onClose, removeOverlay]);\n\n  const HandleOpen = useCallback(() => {\n    const dialogOverlay = createOverlay();\n    dialogOverlay.showOverlay();\n  }, [createOverlay]);\n\n  useEffect(() => {\n    if (open || isOpen) {\n      if (dialogHeaderElement.current) {\n        dialogHeaderElement.current.focus();\n      }\n      HandleOpen();\n    } else {\n      HandleClose();\n    }\n  }, [customCssClasses, createOverlay, open, isOpen, HandleOpen, HandleClose, dialogHeaderElement]);\n\n  const DialogCloseButton: React.FC = () => (\n    <button\n      ref={ dialogCloseButton }\n      className=\"dialogClose\"\n      title={ TOGGLE_TEXT }\n      type=\"button\"\n      onClick={ () => HandleClose() }\n    >\n      <SvgIcon svgDefinition={ xmarkLarge } />\n      <span className=\"sr-only\">Close dialog</span>\n    </button>\n  );\n\n  return (\n    <div\n      className={ dialogCssClass }\n      role=\"dialog\"\n      aria-labelledby={ `dialogHeader_${ id }` }\n      tabIndex={ 0 }\n      aria-describedby={ `dialogSRInstruction_${ id }` }\n      aria-modal=\"true\"\n      ref={ dialogElement }\n    >\n      <div className=\"dialogFullScroller\">\n        <div\n          ref={ dialogHeaderElement }\n          id={ `dialogHeader_${ id }` }\n          className={ `dialogHeader ${ customCssClasses?.header || '' }` }\n          tabIndex={ 0 }\n        >\n          <span id={ `dialogSRInstruction_${ id }` } className=\"sr-only\">\n            { screenReaderInstruction }\n          </span>\n          <div className=\"dialogHeaderTextWrapper\">\n            <EllipsisTooltip \n              lineClamp={ 2 } \n              tooltipProps={ { \n                customCssClass: 'shiftDown large dialogEllipsisTooltip'\n              } }\n            >\n              { typeof header === 'string' ? <span className=\"dialogHeaderText\">{ header }</span> : header }\n            </EllipsisTooltip>\n          </div>\n          <DialogCloseButton />\n        </div>\n\n        <div className=\"dialogContentAndFooterScroller\">\n          <section className={ `dialogContent ${ customCssClasses?.content || '' }` } tabIndex={ 0 }>\n            { children }\n          </section>\n\n          <div className={ `dialogFooter ${ customCssClasses?.footer || '' }` } tabIndex={ 0 }>\n            { typeof footer === 'string' ? <span className=\"dialogFooterText\">{ footer }</span> : footer }\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}