@loomhq/lens 12.13.0 → 12.14.0

package/dist/cjs/index.js

@@ -122,6 +122,7 @@ __export(index_exports, {
   IllustrationUpgrade: () => upgrade_default,
   IllustrationUploadDragAndDrop: () => upload_drag_and_drop_default,
   IllustrationUseCases: () => use_cases_default,
+  IllustrationUser: () => user_default,
   IllustrationWellness: () => wellness_default,
   IllutrationFoldersEmptyStateMobile: () => folders_empty_state_mobile_default,
   Indicator: () => indicator_default,
@@ -289,6 +290,7 @@ var highlightHoverAlpha = 0.3;
 var highlightActiveAlpha = 0.45;
 var hslaBaseColors = {
   red: { h: 4, s: 64, l: 48, a: 1 },
+  redDark: { h: 4, s: 56, l: 23, a: 1 },
   blurpleLight: { h: 214.3, s: 91.3, l: 95.5, a: 1 },
   blurpleMedium: { h: 216.5, s: 92, l: 90.2, a: 1 },
   blurple: { h: 215.4, s: 80, l: 47.65, a: 1 },
@@ -298,7 +300,9 @@ var hslaBaseColors = {
   blueLight: { h: 216.5, s: 92, l: 90.2, a: 1 },
   blue: { h: 215.4, s: 80, l: 47.65, a: 1 },
   blueDark: { h: 216.3, s: 69.2, l: 23, a: 1 },
+  magentaLight: { h: 323, s: 92, l: 90, a: 1 },
   magenta: { h: 323, s: 42, l: 48, a: 1 },
+  magentaDark: { h: 324, s: 37, l: 23, a: 1 },
   orangeLight: { h: 4, s: 100, l: 91.2, a: 1 },
   orange: { h: 11, s: 100, l: 62.2, a: 1 },
   orangeDark: { h: 10.9, s: 100, l: 42.2, a: 1 },
@@ -5432,7 +5436,8 @@ var TypeaheadHeader = ({
   inputValue,
   handleInputValueChange,
   inputRef,
-  id
+  id,
+  onKeyDown
 }) => {
   const icon = getIcon2({ options, selectedItem, selectedOptionValue });
   const hasIcon = Boolean(icon);
@@ -5442,16 +5447,7 @@ var TypeaheadHeader = ({
       onInputFocus();
     }
   };
-  const inputProps = __spreadValues(__spreadValues({
-    role: "combobox",
-    "aria-autocomplete": "list",
-    "aria-haspopup": "listbox",
-    "aria-expanded": isOpen
-  }, getHeaderAccessibilityProps2({
-    selectedItem,
-    getInputProps,
-    ariaMenuName
-  })), getInputProps({
+  const baseInputProps = getInputProps({
     id,
     "aria-labelledby": void 0,
     disabled: isDisabled,
@@ -5462,7 +5458,23 @@ var TypeaheadHeader = ({
       handleInputValueChange("");
     },
     onChange: (e) => handleInputValueChange(e.target.value)
-  }));
+  });
+  const inputProps = __spreadProps(__spreadValues(__spreadValues({
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-haspopup": "listbox",
+    "aria-expanded": isOpen
+  }, getHeaderAccessibilityProps2({
+    selectedItem,
+    getInputProps,
+    ariaMenuName
+  })), baseInputProps), {
+    onKeyDown: (e) => {
+      var _a;
+      onKeyDown == null ? void 0 : onKeyDown(e);
+      (_a = baseInputProps.onKeyDown) == null ? void 0 : _a.call(baseInputProps, e);
+    }
+  });
   const showPlaceholder = !inputValue && !selectedOptionValue;
   return /* @__PURE__ */ import_react32.default.createElement(TypeaheadHeaderWrapper, { onClick: handleClickAndFocus, disabled: isDisabled }, hasIcon && /* @__PURE__ */ import_react32.default.createElement(IconSection3, null, typeof icon === "string" ? /* @__PURE__ */ import_react32.default.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ import_react32.default.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ import_react32.default.createElement(TypeaheadImage, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ import_react32.default.createElement(icon_default, { icon, color })), /* @__PURE__ */ import_react32.default.createElement(
     TypeaheadInputField,
@@ -5499,7 +5511,7 @@ var didSelectedOptionValueChange = (selectedOptionValue, prevSelectedItem) => {
   const didChange = (selectedOptionValue || null) != (prevSelectedItem == null ? void 0 : prevSelectedItem.value);
   return didChange;
 };
-var renderOption2 = (item, index, selectedItem, selectedOptionValue, highlightedIndex, getItemProps) => {
+var renderOption2 = (item, index, selectedItem, selectedOptionValue, highlightedIndex, getItemProps, keyboardMove, setKeyboardMove) => {
   const isSelected = !selectedItem && item.value === selectedOptionValue || selectedItem && selectedItem.value === item.value;
   return /* @__PURE__ */ import_react32.default.createElement(
     MenuItem,
@@ -5513,11 +5525,17 @@ var renderOption2 = (item, index, selectedItem, selectedOptionValue, highlighted
       index,
       item,
       disabled: item.isDisabled,
-      "aria-selected": isSelected
+      "aria-selected": isSelected,
+      onMouseMove: () => {
+        if (keyboardMove) {
+          setKeyboardMove(false);
+        }
+      }
     })), {
       isDisabled: item.isDisabled,
       hasDivider: item.hasDivider,
       isHighlighted: highlightedIndex === index,
+      keyboardMove: keyboardMove && highlightedIndex === index,
       isSelected
     }),
     item.title
@@ -5530,6 +5548,8 @@ var TypeaheadMenu = (_a) => {
     selectedOptionValue,
     highlightedIndex,
     getItemProps,
+    keyboardMove,
+    setKeyboardMove,
     isLoading,
     loadingMessage,
     emptyResultsMessage,
@@ -5540,6 +5560,8 @@ var TypeaheadMenu = (_a) => {
     "selectedOptionValue",
     "highlightedIndex",
     "getItemProps",
+    "keyboardMove",
+    "setKeyboardMove",
     "isLoading",
     "loadingMessage",
     "emptyResultsMessage",
@@ -5561,7 +5583,9 @@ var TypeaheadMenu = (_a) => {
         selectedItem,
         selectedOptionValue,
         highlightedIndex,
-        getItemProps
+        getItemProps,
+        keyboardMove,
+        setKeyboardMove
       )
     ));
   }
@@ -5584,7 +5608,9 @@ var TypeaheadMenu = (_a) => {
         selectedItem,
         selectedOptionValue,
         highlightedIndex,
-        getItemProps
+        getItemProps,
+        keyboardMove,
+        setKeyboardMove
       );
     })));
   }));
@@ -5647,6 +5673,7 @@ var Typeahead = (0, import_react32.forwardRef)(
     );
     const [inputValue, setInputValue] = (0, import_react32.useState)("");
     const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react32.useState)(false);
+    const [keyboardMove, setKeyboardMove] = (0, import_react32.useState)(false);
     const [prevSelectedItem, setPrevSelectedItem] = (0, import_react32.useState)(
       getSelectedOption2(selectedOptionValue, options)
     );
@@ -5712,6 +5739,22 @@ var Typeahead = (0, import_react32.forwardRef)(
       }
       return changes;
     };
+    const onKeyDown = (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+        case "ArrowUp":
+        case "ArrowLeft":
+        case "ArrowRight":
+        case "Enter":
+        case " ":
+        case "Tab":
+        case "Escape":
+          setKeyboardMove(true);
+          break;
+        default:
+          break;
+      }
+    };
     return /* @__PURE__ */ import_react32.default.createElement(TypeaheadWrapper, __spreadValues({}, props), /* @__PURE__ */ import_react32.default.createElement(import_downshift3.default, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
       getItemProps,
       getInputProps,
@@ -5741,7 +5784,8 @@ var Typeahead = (0, import_react32.forwardRef)(
             },
             hasLoader: isLoading,
             hasError: Boolean(errorMessage),
-            id
+            id,
+            onKeyDown
           }
         )), downshiftIsOpen && isOpen && renderLayer(
           /* @__PURE__ */ import_react32.default.createElement(
@@ -5761,11 +5805,13 @@ var Typeahead = (0, import_react32.forwardRef)(
                 hasAvailableOptions,
                 highlightedIndex,
                 getItemProps,
+                keyboardMove,
+                setKeyboardMove,
                 isLoading,
                 loadingMessage,
                 emptyResultsMessage,
                 position: menuPosition,
-                downshiftMenuProps: getMenuProps,
+                downshiftMenuProps: () => getMenuProps({ onKeyDown }),
                 maxWidth: menuMaxWidth,
                 maxHeight: menuMaxHeight,
                 minWidth: menuMinWidth
@@ -10222,4 +10268,109 @@ function IllustrationChromeNotificationsEmptyState(props) {
   );
 }
 var chrome_notifications_empty_state_default = IllustrationChromeNotificationsEmptyState;
+
+// src/illustrations/user.tsx
+var React104 = __toESM(require("react"));
+function IllustrationUser(props) {
+  return /* @__PURE__ */ React104.createElement(
+    "svg",
+    __spreadValues({
+      viewBox: "0 0 82 74",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props),
+    /* @__PURE__ */ React104.createElement(
+      "path",
+      {
+        d: "M17.0029 71.3532C17.0314 71.1862 17.0436 71.007 17.0396 70.8156C17.0355 70.6242 17.0192 70.4409 16.9866 70.2739C16.7911 69.2598 16.0784 68.6448 15.0847 68.4982C14.9136 68.4738 14.7385 68.4615 14.5552 68.4656C14.3719 68.4697 14.1805 68.486 14.0054 68.5186C13.0198 68.6978 12.3234 69.329 12.1523 70.3431C12.1238 70.5142 12.1116 70.6975 12.1116 70.8889C12.1116 71.0803 12.1319 71.2554 12.1645 71.4265C12.36 72.4325 13.0727 73.0474 14.0665 73.1981C14.2416 73.2266 14.4249 73.2388 14.6204 73.2348C14.8159 73.2307 14.9828 73.2144 15.1498 73.1859C16.1395 73.0108 16.8359 72.3754 17.0029 71.3572V71.3532Z",
+        fill: "#FCA700"
+      }
+    ),
+    /* @__PURE__ */ React104.createElement(
+      "path",
+      {
+        d: "M16.7179 51.0672C16.7708 50.7374 16.7993 50.3871 16.7912 50.0165C16.783 49.6459 16.7505 49.2875 16.6853 48.9535C16.3025 46.9782 14.9096 45.7727 12.975 45.4876C12.6452 45.4387 12.299 45.4143 11.9406 45.4224C11.5822 45.4306 11.2075 45.4632 10.8654 45.5243C8.93898 45.8745 7.58276 47.1086 7.25287 49.0838C7.19585 49.4178 7.17141 49.7721 7.17548 50.1468C7.17956 50.5215 7.21621 50.8677 7.28138 51.1935C7.66421 53.1566 9.05301 54.358 10.9916 54.6553C11.3337 54.7083 11.6962 54.7327 12.0709 54.7286C12.4293 54.7246 12.7755 54.692 13.1054 54.6349C15.0358 54.2928 16.3961 53.0507 16.722 51.0672H16.7179Z",
+        fill: "#FCA700"
+      }
+    ),
+    /* @__PURE__ */ React104.createElement(
+      "path",
+      {
+        d: "M44.6972 26.4353C44.9497 24.8918 45.0719 23.2505 45.0474 21.5196C45.023 19.7642 44.856 18.1066 44.5546 16.5508C42.7586 7.29353 36.234 1.66094 27.1722 0.316945C25.6246 0.088872 24.0077 -0.0210918 22.3257 0.00334457C20.5703 0.0277809 18.8883 0.190689 17.2877 0.479853C8.26255 2.11302 1.90502 7.90851 0.361458 17.1577C0.100804 18.7216 -0.0213771 20.3833 0.0030593 22.1386C0.0274957 23.8695 0.194476 25.5068 0.491785 27.0422C2.27564 36.2343 8.79608 41.8628 17.8783 43.2516C19.487 43.496 21.169 43.6141 22.9244 43.5897C24.6064 43.5652 26.2233 43.4145 27.7628 43.1417C36.7961 41.5452 43.1699 35.7252 44.6972 26.4353Z",
+        fill: "#FCA700"
+      }
+    ),
+    /* @__PURE__ */ React104.createElement(
+      "path",
+      {
+        d: "M30.3244 15.6953C30.3325 16.2981 30.2918 16.8723 30.2022 17.4099C29.6687 20.6518 27.445 22.68 24.2927 23.238C23.7592 23.3317 23.2175 23.3846 22.6066 23.3928C21.9957 23.4009 21.4092 23.3602 20.8472 23.2746C17.6786 22.7941 15.406 20.831 14.7829 17.6217C14.677 17.0841 14.62 16.5139 14.6118 15.9112C14.6037 15.2962 14.6485 14.7178 14.7381 14.1721C15.2757 10.9424 17.4953 8.92235 20.6435 8.35217C21.2015 8.25035 21.788 8.19334 22.3989 8.18519C22.9853 8.17705 23.5514 8.2137 24.089 8.29516C27.2495 8.76759 29.5261 10.7306 30.1533 13.9603C30.2552 14.5061 30.3162 15.0844 30.3244 15.6953Z",
+        fill: "#1868DB"
+      }
+    ),
+    /* @__PURE__ */ React104.createElement(
+      "path",
+      {
+        d: "M22.6349 24.692C30.5885 24.5535 35.7932 28.3814 35.6066 38.6635L35.6351 40.2661C33.3381 41.6508 30.6908 42.6201 27.7584 43.1374C26.2189 43.4102 24.6021 43.5609 22.92 43.5854C21.1647 43.6098 19.4826 43.4917 17.8739 43.2473C15.137 42.8319 12.6405 42.0214 10.429 40.8526L10.4005 39.1013C10.2213 28.8258 15.1696 24.8223 22.6349 24.692Z",
+        fill: "#1868DB"
+      }
+    ),
+    /* @__PURE__ */ React104.createElement(
+      "path",
+      {
+        d: "M81.494 40.9954C81.7466 39.4518 81.8687 37.8105 81.8443 36.0796C81.8199 34.3243 81.6529 32.6667 81.3515 31.1109C79.5554 21.8536 73.0309 16.221 63.9691 14.877C62.4215 14.6489 60.8046 14.539 59.1226 14.5634C57.3672 14.5878 55.6852 14.7508 54.0846 15.0399C45.0594 16.6731 38.7019 22.4686 37.1583 31.7177C36.8977 33.2817 36.7755 34.9433 36.7999 36.6987C36.8244 38.4296 36.9914 40.0668 37.2887 41.6022C39.0725 50.7944 45.593 56.4229 54.6751 57.8117C56.2839 58.0561 57.9659 58.1742 59.7212 58.1497C61.4033 58.1253 63.0202 57.9746 64.5596 57.7017C73.593 56.1052 79.9668 50.2853 81.494 40.9954Z",
+        fill: "#FCA700"
+      }
+    ),
+    /* @__PURE__ */ React104.createElement(
+      "path",
+      {
+        d: "M67.1213 30.2554C67.1295 30.8581 67.0887 31.4324 66.9991 31.97C66.4656 35.2119 64.2419 37.2401 61.0896 37.7981C60.5561 37.8917 59.99 37.9447 59.4035 37.9528C58.7926 37.961 58.2061 37.9202 57.6441 37.8347C54.4755 37.3541 52.2029 35.3911 51.5798 32.1818C51.4739 31.6442 51.4169 31.074 51.4087 30.4712C51.4006 29.8562 51.4454 29.2779 51.535 28.7322C52.0726 25.5025 54.2922 23.4824 57.4405 22.9122C57.9984 22.8104 58.5849 22.7534 59.1958 22.7453C59.7823 22.7371 60.3484 22.7738 60.886 22.8552C64.0464 23.3277 66.3231 25.2907 66.9503 28.5204C67.0521 29.0661 67.1132 29.6445 67.1213 30.2554Z",
+        fill: "#1868DB"
+      }
+    ),
+    /* @__PURE__ */ React104.createElement(
+      "path",
+      {
+        d: "M59.4327 39.256C67.3862 39.1176 72.591 42.9454 72.4043 53.2275L72.4328 54.8301C70.1358 56.2149 67.4885 57.1842 64.5562 57.7014C63.0167 57.9743 61.3998 58.125 59.7178 58.1494C57.9624 58.1738 56.2804 58.0557 54.6716 57.8114C51.9348 57.3959 49.4382 56.5855 47.2267 55.4166L47.1982 53.6653C47.019 43.3898 51.9674 39.3863 59.4327 39.256Z",
+        fill: "#1868DB"
+      }
+    ),
+    /* @__PURE__ */ React104.createElement(
+      "path",
+      {
+        d: "M45.4672 59.8806C45.622 58.948 45.6912 57.9624 45.679 56.9157C45.6627 55.8568 45.5609 54.8589 45.3817 53.9181C44.2983 48.3344 40.3641 44.9418 34.9026 44.1273C33.9699 43.9888 32.9924 43.9237 31.9783 43.94C30.9642 43.9562 29.9053 44.054 28.9401 44.2291C23.4989 45.2147 19.6665 48.7091 18.7338 54.2888C18.575 55.2296 18.5017 56.2314 18.518 57.2944C18.5343 58.337 18.632 59.3267 18.8112 60.2512C19.8864 65.7942 23.8166 69.1868 29.2944 70.0258C30.2637 70.1724 31.2778 70.2457 32.3367 70.2294C33.3508 70.2172 34.3242 70.1235 35.2528 69.9606C40.7021 68.9994 44.5427 65.4887 45.4672 59.8847V59.8806Z",
+        fill: "#FCA700"
+      }
+    ),
+    /* @__PURE__ */ React104.createElement(
+      "path",
+      {
+        d: "M36.7999 53.401C36.8039 53.7675 36.7795 54.1096 36.7265 54.4354V54.4314C36.4048 56.3863 35.0649 57.6122 33.1629 57.9461C32.8371 58.0031 32.4991 58.0357 32.1447 58.0398C31.7741 58.0479 31.4198 58.0235 31.0817 57.9706C29.1716 57.6814 27.7991 56.4962 27.4244 54.5617C27.3633 54.2399 27.3267 53.8938 27.3226 53.5313C27.3185 53.1647 27.3471 52.8145 27.4 52.4846C27.7217 50.5378 29.0617 49.316 30.9596 48.9739C31.2935 48.9128 31.6641 48.8762 32.0185 48.8721C32.3728 48.868 32.7108 48.8884 33.0367 48.9373C34.9427 49.2223 36.3152 50.4075 36.694 52.3543C36.7591 52.6842 36.7958 53.0303 36.7999 53.401Z",
+        fill: "#1868DB"
+      }
+    ),
+    /* @__PURE__ */ React104.createElement(
+      "path",
+      {
+        d: "M32.161 58.83C36.9587 58.7485 40.0987 61.0537 39.9847 67.2564L40.001 68.2258C38.6163 69.0607 37.0198 69.6431 35.2522 69.9567C34.3236 70.1196 33.3502 70.2132 32.3361 70.2255C31.2772 70.2417 30.2631 70.1684 29.2938 70.0218C27.6443 69.7693 26.1374 69.2806 24.8057 68.576L24.7853 67.5212C24.6753 61.3225 27.6606 58.9073 32.161 58.83Z",
+        fill: "#1868DB"
+      }
+    ),
+    /* @__PURE__ */ React104.createElement(
+      "path",
+      {
+        d: "M44.697 26.435C44.9495 24.8915 45.0716 23.2502 45.0472 21.5192C45.035 20.5825 44.978 19.6784 44.8843 18.8027C40.8401 21.7147 38.0991 26.0726 37.1583 31.7214C36.8977 33.2854 36.7755 34.947 36.7999 36.7024C36.8122 37.631 36.8692 38.531 36.9628 39.4067C41.0193 36.4947 43.7643 32.1165 44.697 26.435Z",
+        fill: "#AE2A19"
+      }
+    ),
+    /* @__PURE__ */ React104.createElement(
+      "path",
+      {
+        d: "M45.4588 54.3661C45.4343 54.2154 45.4099 54.0647 45.3814 53.9181C44.5342 49.5481 41.9358 46.5261 38.2256 45.0273C39.6714 49.0227 42.1639 52.1628 45.4547 54.3661H45.4588Z",
+        fill: "#AE2A19"
+      }
+    )
+  );
+}
+var user_default = IllustrationUser;
 //# sourceMappingURL=index.js.map