@cambly/syntax-core 5.8.0 → 5.10.0

package/dist/index.js

@@ -124,6 +124,7 @@ __export(src_exports, {
   Heading: () => Heading_default,
   IconButton: () => IconButton_default,
   MiniActionCard: () => MiniActionCard_default,
+  Modal: () => Modal,
   RadioButton: () => RadioButton_default,
   SelectList: () => SelectList_default,
   Typography: () => Typography_default
@@ -601,11 +602,11 @@ var ButtonGroup = ({
   size = "md",
   children
 }) => {
-  const classnames2 = (0, import_classnames5.default)(ButtonGroup_module_default.buttonGroup, gap[size], {
+  const classnames3 = (0, import_classnames5.default)(ButtonGroup_module_default.buttonGroup, gap[size], {
     [ButtonGroup_module_default.horizontal]: orientation === "horizontal",
     [ButtonGroup_module_default.vertical]: orientation === "vertical"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: classnames2, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: classnames3, children });
 };
 var ButtonGroup_default = ButtonGroup;
 
@@ -616,7 +617,7 @@ var Card = ({
   size = "sm",
   "data-testid": dataTestId
 }) => {
-  const sizeWidth = {
+  const sizeWidth2 = {
     sm: 352,
     lg: 744
   };
@@ -626,7 +627,7 @@ var Card = ({
       rounding: "xl",
       padding: 7,
       smPadding: 9,
-      maxWidth: sizeWidth[size],
+      maxWidth: sizeWidth2[size],
       width: "100%",
       backgroundColor: "white",
       "data-testid": dataTestId,
@@ -769,7 +770,7 @@ function setupGlobalFocusEvents() {
     return;
   }
   const { focus } = HTMLElement.prototype;
-  HTMLElement.prototype.focus = function focusElement(...args) {
+  HTMLElement.prototype.focus = function focusElement2(...args) {
     hasEventBeforeFocus = true;
     focus.apply(this, args);
   };
@@ -904,15 +905,207 @@ var MiniActionCard = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: MiniActionCard_module_default.miniActionCard, children });
 var MiniActionCard_default = MiniActionCard;
 
-// src/RadioButton/RadioButton.tsx
-var import_react6 = require("react");
+// src/Modal/Modal.tsx
 var import_classnames8 = __toESM(require_classnames());
 
+// src/Modal/FocusTrap.tsx
+var import_react6 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function queryFocusableAll(el) {
+  const selector = [
+    "a[href]",
+    "area[href]",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "button:not([disabled])",
+    "iframe",
+    "object",
+    "embed",
+    '[tabindex="-1"]',
+    '[tabindex="0"]',
+    "[contenteditable]",
+    "audio[controls]",
+    "video[controls]",
+    "summary"
+  ].join(",");
+  return el.querySelectorAll(selector);
+}
+var focusElement = (el) => {
+  if (typeof el.focus === "function") {
+    el.focus();
+  }
+};
+function FocusTrap({
+  children
+}) {
+  const elRef = (0, import_react6.useRef)(null);
+  const previouslyFocusedElRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
+    const { current: element } = elRef;
+    const focusFirstChild = () => {
+      const withinIframe = window !== window.parent;
+      if (element && !withinIframe) {
+        focusElement(queryFocusableAll(element)[0]);
+      }
+    };
+    const handleFocus = (event) => {
+      if (!element || event.target instanceof Node && element.contains(event.target)) {
+        return;
+      }
+      if (event.target instanceof Element && event.target.closest('[data-testid="syntax-focus-trap"]') !== null) {
+        return;
+      }
+      event.stopPropagation();
+      event.preventDefault();
+      focusFirstChild();
+    };
+    previouslyFocusedElRef.current = document.activeElement;
+    focusFirstChild();
+    document.addEventListener("focus", handleFocus, true);
+    return function cleanup() {
+      const { current: previouslyFocusedEl } = previouslyFocusedElRef;
+      document.removeEventListener("focus", handleFocus, true);
+      if (previouslyFocusedEl) {
+        focusElement(previouslyFocusedEl);
+      }
+    };
+  }, [elRef, previouslyFocusedElRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
+}
+
+// src/Modal/StopScroll.tsx
+var import_react7 = require("react");
+function StopScroll(props) {
+  (0, import_react7.useEffect)(() => {
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalStyle;
+    };
+  }, []);
+  return props.children;
+}
+
+// src/Modal/Layer.tsx
+var import_react_dom = require("react-dom");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Layer({
+  children,
+  zIndex = 1
+}) {
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      Box_default,
+      {
+        "data-testid": "syntax-layer",
+        position: "fixed",
+        dangerouslySetInlineStyle: {
+          __style: { zIndex, inset: 0 }
+        },
+        children
+      }
+    ),
+    document.body
+  );
+}
+
+// css-module:./Modal.module.css#css-module
+var Modal_module_default = { "backdrop": "_backdrop_30t3h_1", "closeButton": "_closeButton_30t3h_12", "closeButtonWithImage": "_closeButtonWithImage_30t3h_32" };
+
+// src/Modal/Modal.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function XIcon({ color = "#000" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", fill: color, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "path",
+    {
+      fill: "inherit",
+      d: "M11.25.758a.83.83 0 0 0-1.175 0L6 4.825 1.925.75A.83.83 0 1 0 .75 1.925L4.825 6 .75 10.075a.83.83 0 1 0 1.175 1.175L6 7.175l4.075 4.075a.83.83 0 1 0 1.175-1.175L7.175 6l4.075-4.075a.835.835 0 0 0 0-1.167Z"
+    }
+  ) });
+}
+var sizeWidth = {
+  sm: 400,
+  lg: 600
+};
+function Modal({
+  header,
+  children,
+  image,
+  onDismiss,
+  footer,
+  accessibilityCloseLabel = "close modal",
+  size = "sm",
+  zIndex = 1,
+  "data-testid": dataTestId
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Layer, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StopScroll, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FocusTrap, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: Modal_module_default.backdrop,
+      role: "presentation",
+      onClick: (e) => e.target === e.currentTarget && onDismiss(),
+      onKeyDown: (e) => e.key === "Escape" && onDismiss(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        Box_default,
+        {
+          "data-testid": dataTestId,
+          backgroundColor: "white",
+          rounding: "xl",
+          display: "flex",
+          direction: "column",
+          minWidth: 240,
+          maxWidth: sizeWidth[size],
+          width: "100%",
+          dangerouslySetInlineStyle: { __style: { overflow: "hidden" } },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box_default, { position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "button",
+              {
+                "aria-label": accessibilityCloseLabel,
+                type: "button",
+                className: (0, import_classnames8.default)(Modal_module_default.closeButton, {
+                  [Modal_module_default.closeButtonWithImage]: !!image
+                }),
+                onClick: onDismiss,
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(XIcon, { color: image ? "#fff" : "#000" })
+              }
+            ) }),
+            image && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box_default, { maxHeight: 200, children: image }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Box_default, { display: "flex", gap: 3, direction: "column", padding: 9, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading_default, { as: "h1", size: 500, children: header }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box_default, { marginBottom: 4, children }),
+              footer && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                Box_default,
+                {
+                  display: "flex",
+                  direction: "column",
+                  gap: 3,
+                  smDirection: "row",
+                  smJustifyContent: "end",
+                  lgDirection: "row",
+                  lgJustifyContent: "end",
+                  children: footer
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  ) }) }) });
+}
+Modal.displayName = "Modal";
+
+// src/RadioButton/RadioButton.tsx
+var import_react8 = require("react");
+var import_classnames9 = __toESM(require_classnames());
+
 // css-module:./RadioButton.module.css#css-module
 var RadioButton_module_default = { "radioBaseContainer": "_radioBaseContainer_1yyn9_1", "disabled": "_disabled_1yyn9_9", "cursorDisabled": "_cursorDisabled_1yyn9_13", "cursorEnabled": "_cursorEnabled_1yyn9_17", "smBase": "_smBase_1yyn9_21", "mdBase": "_mdBase_1yyn9_25", "radioStyleOverride": "_radioStyleOverride_1yyn9_29", "smOverride": "_smOverride_1yyn9_34", "mdOverride": "_mdOverride_1yyn9_39", "background": "_background_1yyn9_44", "sm": "_sm_1yyn9_21", "md": "_md_1yyn9_25", "neutralBorder": "_neutralBorder_1yyn9_61", "smCheckedBorder": "_smCheckedBorder_1yyn9_65", "mdCheckedBorder": "_mdCheckedBorder_1yyn9_69", "errorBorderColor": "_errorBorderColor_1yyn9_73", "borderColor": "_borderColor_1yyn9_77" };
 
 // src/RadioButton/RadioButton.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var RadioButton = ({
   checked = false,
   "data-testid": dataTestId,
@@ -925,17 +1118,17 @@ var RadioButton = ({
   size = "md",
   value
 }) => {
-  const [isFocused, setIsFocused] = (0, import_react6.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react8.useState)(false);
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
-  const sharedStyles = (0, import_classnames8.default)(RadioButton_module_default.background, RadioButton_module_default[size], {
+  const sharedStyles = (0, import_classnames9.default)(RadioButton_module_default.background, RadioButton_module_default[size], {
     [RadioButton_module_default.errorBorderColor]: error,
     [RadioButton_module_default.borderColor]: !error,
     [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "label",
     {
-      className: (0, import_classnames8.default)(
+      className: (0, import_classnames9.default)(
         RadioButton_module_default.radioBaseContainer,
         RadioButton_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
         {
@@ -945,23 +1138,23 @@ var RadioButton = ({
         }
       ),
       children: [
-        checked ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        checked ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "div",
           {
-            className: (0, import_classnames8.default)(sharedStyles, {
+            className: (0, import_classnames9.default)(sharedStyles, {
               [RadioButton_module_default.mdCheckedBorder]: size === "md",
               [RadioButton_module_default.smCheckedBorder]: size === "sm"
             })
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames8.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: (0, import_classnames9.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "input",
           {
             "data-testid": dataTestId,
             type: "radio",
             id,
             name,
-            className: (0, import_classnames8.default)(
+            className: (0, import_classnames9.default)(
               RadioButton_module_default.radioStyleOverride,
               RadioButton_module_default[`cursor${disabled ? "Disabled" : "Enabled"}`],
               {
@@ -981,7 +1174,7 @@ var RadioButton = ({
             }
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           Typography_default,
           {
             size: size === "md" ? 200 : 100,
@@ -996,8 +1189,8 @@ var RadioButton = ({
 var RadioButton_default = RadioButton;
 
 // src/SelectList/SelectList.tsx
-var import_react7 = require("react");
-var import_classnames9 = __toESM(require_classnames());
+var import_react9 = require("react");
+var import_classnames10 = __toESM(require_classnames());
 
 // ../syntax-design-tokens/dist/js/index.js
 var ColorBaseDestructive700 = "#d32a4b";
@@ -1007,17 +1200,17 @@ var ColorBaseGray800 = "#353535";
 var SelectList_module_default = { "selectContainer": "_selectContainer_1u9cw_1", "opacityOverlay": "_opacityOverlay_1u9cw_7", "outerTextContainer": "_outerTextContainer_1u9cw_11", "selectWrapper": "_selectWrapper_1u9cw_16", "selectBox": "_selectBox_1u9cw_21", "selectMouseFocusStyling": "_selectMouseFocusStyling_1u9cw_35", "unselected": "_unselected_1u9cw_40", "selected": "_selected_1u9cw_44", "arrowIcon": "_arrowIcon_1u9cw_48", "sm": "_sm_1u9cw_62", "md": "_md_1u9cw_67", "lg": "_lg_1u9cw_72", "selectError": "_selectError_1u9cw_77" };
 
 // src/SelectList/SelectOption.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var SelectOption = ({
   "data-testid": dataTestId,
   value,
   label,
   disabled = false
-}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { "data-testid": dataTestId, value, disabled, children: label });
+}) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { "data-testid": dataTestId, value, disabled, children: label });
 var SelectOption_default = SelectOption;
 
 // src/SelectList/SelectList.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var iconSize3 = {
   sm: 20,
   md: 24,
@@ -1031,29 +1224,30 @@ var SelectList = ({
   helperText,
   label,
   onChange,
+  onClick,
   placeholderText,
   selectedValue = "",
   size = "md"
 }) => {
-  const id = (0, import_react7.useId)();
+  const id = (0, import_react9.useId)();
   const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
-  const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  const [isFocused, setIsFocused] = (0, import_react9.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
-      className: (0, import_classnames9.default)(SelectList_module_default.selectContainer, {
+      className: (0, import_classnames10.default)(SelectList_module_default.selectContainer, {
         [SelectList_module_default.opacityOverlay]: disabled
       }),
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("label", { htmlFor: id, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typography_default, { size: 100, color: "gray700", children: label }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: SelectList_module_default.selectWrapper, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { htmlFor: id, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Typography_default, { size: 100, color: "gray700", children: label }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: SelectList_module_default.selectWrapper, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
             "select",
             {
               id,
               "data-testid": dataTestId,
               disabled,
-              className: (0, import_classnames9.default)(SelectList_module_default.selectBox, SelectList_module_default[size], {
+              className: (0, import_classnames10.default)(SelectList_module_default.selectBox, SelectList_module_default[size], {
                 [SelectList_module_default.unselected]: !selectedValue && !errorText,
                 [SelectList_module_default.selected]: selectedValue && !errorText,
                 [SelectList_module_default.selectError]: errorText,
@@ -1063,24 +1257,24 @@ var SelectList = ({
                 // for focus mouse
               }),
               onChange,
-              onClick: (e) => e.stopPropagation(),
+              onClick,
               value: placeholderText && !selectedValue ? placeholderText : selectedValue,
               onFocus: () => setIsFocused(true),
               onBlur: () => setIsFocused(false),
               children: [
-                placeholderText && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { disabled: true, value: placeholderText, children: placeholderText }),
+                placeholderText && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("option", { disabled: true, value: placeholderText, children: placeholderText }),
                 children
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "svg",
             {
               focusable: "false",
               "aria-hidden": "true",
               viewBox: "0 0 24 24",
               width: iconSize3[size],
-              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "path",
                 {
                   fill: errorText ? ColorBaseDestructive700 : ColorBaseGray800,
@@ -1090,7 +1284,7 @@ var SelectList = ({
             }
           ) })
         ] }),
-        (helperText || errorText) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        (helperText || errorText) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Typography_default,
           {
             size: 100,
@@ -1117,6 +1311,7 @@ SelectList.Option = SelectOption_default;
   Heading,
   IconButton,
   MiniActionCard,
+  Modal,
   RadioButton,
   SelectList,
   Typography