@cambly/syntax-core 4.0.0 → 4.2.0

package/dist/index.js

@@ -185,6 +185,7 @@ function Box(props) {
     display,
     smDisplay,
     lgDisplay,
+    flexShrink,
     flexWrap,
     gap: gap2,
     justifyContent,
@@ -236,6 +237,7 @@ function Box(props) {
     "display",
     "smDisplay",
     "lgDisplay",
+    "flexShrink",
     "flexWrap",
     "gap",
     "justifyContent",
@@ -337,6 +339,7 @@ function Box(props) {
       rounding && rounding !== "none" && Box_module_default[`rounding${rounding}`]
     ),
     style: __spreadValues({
+      flexShrink,
       height,
       maxHeight,
       maxWidth,
@@ -640,11 +643,98 @@ var IconButton = ({
 var IconButton_default = IconButton;
 
 // src/Checkbox/Checkbox.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_classnames7 = __toESM(require_classnames());
 
+// src/useFocusVisible.tsx
+var import_react = require("react");
+var hasSetupGlobalListeners = false;
+var currentModality = null;
+var changeHandlers = /* @__PURE__ */ new Set();
+var hasEventBeforeFocus = false;
+var isMac = typeof window !== "undefined" && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false;
+function isValidKey(e) {
+  return !(e.metaKey || !isMac && e.altKey || e.ctrlKey);
+}
+function triggerChangeHandlers(modality, e) {
+  changeHandlers.forEach((handler) => {
+    handler(modality, e);
+  });
+}
+function handleKeyboardEvent(e) {
+  hasEventBeforeFocus = true;
+  if (isValidKey(e)) {
+    currentModality = "keyboard";
+    triggerChangeHandlers("keyboard", e);
+  }
+}
+function handlePointerEvent(e) {
+  currentModality = "pointer";
+  if (e.type === "mousedown" || e.type === "pointerdown") {
+    hasEventBeforeFocus = true;
+    triggerChangeHandlers("pointer", e);
+  }
+}
+function handleFocusEvent(e) {
+  if (e.target === window || e.target === document) {
+    return;
+  }
+  if (!hasEventBeforeFocus) {
+    currentModality = "keyboard";
+    triggerChangeHandlers("keyboard", e);
+  }
+  hasEventBeforeFocus = false;
+}
+function handleWindowBlur() {
+  hasEventBeforeFocus = false;
+}
+function isFocusVisible() {
+  return currentModality !== "pointer";
+}
+function setupGlobalFocusEvents() {
+  if (typeof window === "undefined" || hasSetupGlobalListeners) {
+    return;
+  }
+  const { focus } = HTMLElement.prototype;
+  HTMLElement.prototype.focus = function focusElement(...args) {
+    hasEventBeforeFocus = true;
+    focus.apply(this, args);
+  };
+  document.addEventListener("keydown", handleKeyboardEvent, true);
+  document.addEventListener("keyup", handleKeyboardEvent, true);
+  window.addEventListener("focus", handleFocusEvent, true);
+  window.addEventListener("blur", handleWindowBlur, false);
+  if (typeof PointerEvent !== "undefined") {
+    document.addEventListener("pointerdown", handlePointerEvent, true);
+    document.addEventListener("pointermove", handlePointerEvent, true);
+    document.addEventListener("pointerup", handlePointerEvent, true);
+  } else {
+    document.addEventListener("mousedown", handlePointerEvent, true);
+    document.addEventListener("mousemove", handlePointerEvent, true);
+    document.addEventListener("mouseup", handlePointerEvent, true);
+  }
+  hasSetupGlobalListeners = true;
+}
+function useFocusVisible() {
+  setupGlobalFocusEvents();
+  const [isFocusVisibleState, setFocusVisible] = (0, import_react.useState)(isFocusVisible());
+  (0, import_react.useEffect)(() => {
+    const handler = () => {
+      setFocusVisible(isFocusVisible());
+    };
+    changeHandlers.add(handler);
+    return () => {
+      changeHandlers.delete(handler);
+    };
+  }, []);
+  return { isFocusVisible: isFocusVisibleState };
+}
+
 // css-module:./Checkbox.module.css#css-module
-var Checkbox_module_default = { "mainContainer": "_mainContainer_p0un4_1", "checkboxContainer": "_checkboxContainer_p0un4_8", "inputOverlay": "_inputOverlay_p0un4_13", "focusedCheckbox": "_focusedCheckbox_p0un4_21", "checkbox": "_checkbox_p0un4_8", "uncheckedBox": "_uncheckedBox_p0un4_35", "uncheckedBorder": "_uncheckedBorder_p0un4_39", "uncheckedErrorBorder": "_uncheckedErrorBorder_p0un4_43", "checkedBox": "_checkedBox_p0un4_47", "checkedNonError": "_checkedNonError_p0un4_51", "checkedError": "_checkedError_p0un4_55", "sm": "_sm_p0un4_59", "md": "_md_p0un4_65" };
+var Checkbox_module_default = { "mainContainer": "_mainContainer_1jq7b_1", "checkboxContainer": "_checkboxContainer_1jq7b_8", "inputOverlay": "_inputOverlay_1jq7b_13", "checkbox": "_checkbox_1jq7b_8", "uncheckedBox": "_uncheckedBox_1jq7b_30", "uncheckedBorder": "_uncheckedBorder_1jq7b_34", "uncheckedErrorBorder": "_uncheckedErrorBorder_1jq7b_38", "checkedBox": "_checkedBox_1jq7b_42", "checkedNonError": "_checkedNonError_1jq7b_46", "checkedError": "_checkedError_1jq7b_50", "sm": "_sm_1jq7b_54", "md": "_md_1jq7b_60" };
+
+// css-module:../Focus.module.css#css-module
+var Focus_module_default = { "accessibilityOutlineFocus": "_accessibilityOutlineFocus_1h8bq_1" };
 
 // src/Checkbox/Checkbox.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -664,17 +754,18 @@ var Checkbox = ({
   error = false,
   onChange
 }) => {
-  const [isFocused, setIsFocused] = (0, import_react.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react2.useState)(false);
+  const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const checkboxStyling = (0, import_classnames7.default)(Checkbox_module_default.checkbox, Checkbox_module_default[size]);
   const uncheckedStyling = (0, import_classnames7.default)(checkboxStyling, Checkbox_module_default.uncheckedBox, {
     [Checkbox_module_default.uncheckedBorder]: !error,
     [Checkbox_module_default.uncheckedErrorBorder]: error,
-    [Checkbox_module_default.focusedCheckbox]: isFocused
+    [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2
   });
   const checkedStyling = (0, import_classnames7.default)(checkboxStyling, Checkbox_module_default.checkedBox, {
     [Checkbox_module_default.checkedNonError]: !error,
     [Checkbox_module_default.checkedError]: error,
-    [Checkbox_module_default.focusedCheckbox]: isFocused
+    [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2
   });
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: (0, import_classnames7.default)(Checkbox_module_default.mainContainer), children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: Checkbox_module_default.checkboxContainer, children: [
@@ -729,91 +820,7 @@ var import_react3 = require("react");
 var import_classnames8 = __toESM(require_classnames());
 
 // css-module:./RadioButton.module.css#css-module
-var RadioButton_module_default = { "radioBaseContainer": "_radioBaseContainer_x6och_1", "smBase": "_smBase_x6och_8", "mdBase": "_mdBase_x6och_13", "radioStyleOverride": "_radioStyleOverride_x6och_18", "smOverride": "_smOverride_x6och_23", "mdOverride": "_mdOverride_x6och_28", "background": "_background_x6och_33", "sm": "_sm_x6och_8", "md": "_md_x6och_13", "neutralBorder": "_neutralBorder_x6och_50", "smCheckedBorder": "_smCheckedBorder_x6och_54", "mdCheckedBorder": "_mdCheckedBorder_x6och_58", "errorBorderColor": "_errorBorderColor_x6och_62", "borderColor": "_borderColor_x6och_66", "focusedRadioButton": "_focusedRadioButton_x6och_70" };
-
-// src/useFocusVisible.tsx
-var import_react2 = require("react");
-var hasSetupGlobalListeners = false;
-var currentModality = null;
-var changeHandlers = /* @__PURE__ */ new Set();
-var hasEventBeforeFocus = false;
-var isMac = typeof window !== "undefined" && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false;
-function isValidKey(e) {
-  return !(e.metaKey || !isMac && e.altKey || e.ctrlKey);
-}
-function triggerChangeHandlers(modality, e) {
-  changeHandlers.forEach((handler) => {
-    handler(modality, e);
-  });
-}
-function handleKeyboardEvent(e) {
-  hasEventBeforeFocus = true;
-  if (isValidKey(e)) {
-    currentModality = "keyboard";
-    triggerChangeHandlers("keyboard", e);
-  }
-}
-function handlePointerEvent(e) {
-  currentModality = "pointer";
-  if (e.type === "mousedown" || e.type === "pointerdown") {
-    hasEventBeforeFocus = true;
-    triggerChangeHandlers("pointer", e);
-  }
-}
-function handleFocusEvent(e) {
-  if (e.target === window || e.target === document) {
-    return;
-  }
-  if (!hasEventBeforeFocus) {
-    currentModality = "keyboard";
-    triggerChangeHandlers("keyboard", e);
-  }
-  hasEventBeforeFocus = false;
-}
-function handleWindowBlur() {
-  hasEventBeforeFocus = false;
-}
-function isFocusVisible() {
-  return currentModality !== "pointer";
-}
-function setupGlobalFocusEvents() {
-  if (typeof window === "undefined" || hasSetupGlobalListeners) {
-    return;
-  }
-  const { focus } = HTMLElement.prototype;
-  HTMLElement.prototype.focus = function focusElement(...args) {
-    hasEventBeforeFocus = true;
-    focus.apply(this, args);
-  };
-  document.addEventListener("keydown", handleKeyboardEvent, true);
-  document.addEventListener("keyup", handleKeyboardEvent, true);
-  window.addEventListener("focus", handleFocusEvent, true);
-  window.addEventListener("blur", handleWindowBlur, false);
-  if (typeof PointerEvent !== "undefined") {
-    document.addEventListener("pointerdown", handlePointerEvent, true);
-    document.addEventListener("pointermove", handlePointerEvent, true);
-    document.addEventListener("pointerup", handlePointerEvent, true);
-  } else {
-    document.addEventListener("mousedown", handlePointerEvent, true);
-    document.addEventListener("mousemove", handlePointerEvent, true);
-    document.addEventListener("mouseup", handlePointerEvent, true);
-  }
-  hasSetupGlobalListeners = true;
-}
-function useFocusVisible() {
-  setupGlobalFocusEvents();
-  const [isFocusVisibleState, setFocusVisible] = (0, import_react2.useState)(isFocusVisible());
-  (0, import_react2.useEffect)(() => {
-    const handler = () => {
-      setFocusVisible(isFocusVisible());
-    };
-    changeHandlers.add(handler);
-    return () => {
-      changeHandlers.delete(handler);
-    };
-  }, []);
-  return { isFocusVisible: isFocusVisibleState };
-}
+var RadioButton_module_default = { "radioBaseContainer": "_radioBaseContainer_144ms_1", "smBase": "_smBase_144ms_8", "mdBase": "_mdBase_144ms_13", "radioStyleOverride": "_radioStyleOverride_144ms_18", "smOverride": "_smOverride_144ms_23", "mdOverride": "_mdOverride_144ms_28", "background": "_background_144ms_33", "sm": "_sm_144ms_8", "md": "_md_144ms_13", "neutralBorder": "_neutralBorder_144ms_50", "smCheckedBorder": "_smCheckedBorder_144ms_54", "mdCheckedBorder": "_mdCheckedBorder_144ms_58", "errorBorderColor": "_errorBorderColor_144ms_62", "borderColor": "_borderColor_144ms_66" };
 
 // src/RadioButton/RadioButton.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -832,7 +839,7 @@ var RadioButton = ({
   const sharedStyles = (0, import_classnames8.default)(RadioButton_module_default.background, RadioButton_module_default[size], {
     [RadioButton_module_default.errorBorderColor]: error,
     [RadioButton_module_default.borderColor]: !error,
-    [RadioButton_module_default.focusedRadioButton]: isFocused && isFocusVisible2
+    [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2
   });
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "label",
@@ -895,7 +902,7 @@ var ColorBaseDestructive700 = "#d32a4b";
 var ColorBaseGray800 = "#353535";
 
 // css-module:./SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_1y5p4_1", "opacityOverlay": "_opacityOverlay_1y5p4_7", "outerTextContainer": "_outerTextContainer_1y5p4_11", "selectWrapper": "_selectWrapper_1y5p4_16", "selectBox": "_selectBox_1y5p4_21", "unselected": "_unselected_1y5p4_40", "selected": "_selected_1y5p4_44", "arrowIcon": "_arrowIcon_1y5p4_48", "sm": "_sm_1y5p4_62", "md": "_md_1y5p4_67", "lg": "_lg_1y5p4_72", "selectError": "_selectError_1y5p4_77" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_1e7f9_1", "opacityOverlay": "_opacityOverlay_1e7f9_7", "outerTextContainer": "_outerTextContainer_1e7f9_11", "selectWrapper": "_selectWrapper_1e7f9_16", "selectBox": "_selectBox_1e7f9_21", "seletBoxMouseFocusStyling": "_seletBoxMouseFocusStyling_1e7f9_35", "unselected": "_unselected_1e7f9_40", "selected": "_selected_1e7f9_44", "arrowIcon": "_arrowIcon_1e7f9_48", "sm": "_sm_1e7f9_62", "md": "_md_1e7f9_67", "lg": "_lg_1e7f9_72", "selectError": "_selectError_1e7f9_77" };
 
 // src/SelectList/SelectOption.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
@@ -933,6 +940,8 @@ var SelectList = ({
   size = "md"
 }) => {
   const id = (0, import_react4.useId)();
+  const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
+  const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
@@ -951,10 +960,16 @@ var SelectList = ({
               className: (0, import_classnames9.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
+                [SelectList_module_default.selectError]: errorText,
+                [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2,
+                // for focus keyboard
+                [SelectList_module_default.seletBoxMouseFocusStyling]: isFocused && !isFocusVisible2
+                // for focus mouse
               }),
               onChange,
               value: placeholderText && !selectedValue ? placeholderText : selectedValue,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
               children: [
                 placeholderText && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { disabled: true, value: placeholderText, children: placeholderText }),
                 children