@loomhq/lens 12.8.0 → 12.9.0

package/dist/esm/index.js

@@ -3493,6 +3493,29 @@ var getDownshiftEnvironment = (container) => {
   return window;
 };
 
+// src/utilities/text.ts
+var getTextFromNode = (node) => {
+  if (typeof node === "string") {
+    return node;
+  }
+  if (typeof node === "number" || typeof node === "boolean" || typeof node === "bigint") {
+    return node.toString();
+  }
+  if (node === null || node === void 0) {
+    return "";
+  }
+  if (isIterable(node)) {
+    return Array.from(node).map(getTextFromNode).join("");
+  }
+  if (typeof node === "object" && "props" in node && node.props && node.props.children !== void 0) {
+    return getTextFromNode(node.props.children);
+  }
+  return "";
+};
+var isIterable = (node) => {
+  return typeof node[Symbol.iterator] === "function";
+};
+
 // src/components/icon/available-icons/chevron-down.tsx
 import * as React20 from "react";
 function SvgChevronDown() {
@@ -3593,19 +3616,24 @@ var MenuItem = (_a) => {
     isSelected,
     icon,
     hasDivider,
-    children
+    children,
+    menuItemRole
   } = _b, props = __objRest(_b, [
     "isDisabled",
     "isHighlighted",
     "isSelected",
     "icon",
     "hasDivider",
-    "children"
+    "children",
+    "menuItemRole"
   ]);
   const checkColumn = isSelected ? "auto" : "";
   const iconColumn = icon ? "auto" : "";
   const columns = `${iconColumn} 1fr ${checkColumn}`;
   const color = isDisabled ? "disabledContent" : void 0;
+  const updatedProps = menuItemRole ? __spreadProps(__spreadValues({}, props), {
+    role: menuItemRole
+  }) : props;
   return /* @__PURE__ */ React22.createElement(
     MenuItemWrapper,
     __spreadValues({
@@ -3629,6 +3657,7 @@ var Menu = (_a) => {
     maxWidth,
     maxHeight,
     children,
+    role,
     downshiftMenuProps = () => null,
     search
   } = _b, props = __objRest(_b, [
@@ -3638,9 +3667,13 @@ var Menu = (_a) => {
     "maxWidth",
     "maxHeight",
     "children",
+    "role",
     "downshiftMenuProps",
     "search"
   ]);
+  const updatedDownshiftMenuProps = role ? __spreadProps(__spreadValues({}, downshiftMenuProps()), {
+    role
+  }) : __spreadValues({}, downshiftMenuProps());
   return /* @__PURE__ */ React22.createElement(
     MenuContainer,
     __spreadValues(__spreadValues({
@@ -3809,11 +3842,13 @@ var getHeaderAccessibilityProps = ({
   selectedItem,
   getInputProps,
   getToggleButtonProps,
-  ariaMenuName
+  ariaMenuName,
+  isOpen
 }) => {
   const valueLabel = selectedItem ? `selected value is ${selectedItem.title}` : "no value selected";
   const toggleLabel = getToggleButtonProps == null ? void 0 : getToggleButtonProps()["aria-label"];
   return {
+    "aria-expanded": isOpen,
     // Ensures all options within the list of selections can be narrated by a screen reader
     "aria-activedescendant": getInputProps()["aria-activedescendant"],
     // The existing aria-label includes whether or not the menu is open or closed, and we add the valueLabel to make a screen reader narrate what is selected
@@ -3830,7 +3865,8 @@ var SelectHeader = ({
   options,
   getInputProps,
   ariaMenuName,
-  hasError
+  hasError,
+  isOpen
 }) => {
   const icon = getIcon({ options, selectedItem, selectedOptionValue });
   const hasIcon = Boolean(icon);
@@ -3844,7 +3880,8 @@ var SelectHeader = ({
       selectedItem,
       getInputProps,
       getToggleButtonProps,
-      ariaMenuName
+      ariaMenuName,
+      isOpen
     })), {
       hasValue: inputValue || selectedOptionValue,
       disabled: isDisabled,
@@ -3878,14 +3915,16 @@ var CustomHeader = ({
   getInputProps,
   ariaMenuName,
   hasError,
-  errorMessage
+  errorMessage,
+  isOpen
 }) => {
   const buttonProps = () => {
     return __spreadValues(__spreadValues({}, getToggleButtonProps()), getHeaderAccessibilityProps({
       selectedItem,
       getInputProps,
       getToggleButtonProps,
-      ariaMenuName
+      ariaMenuName,
+      isOpen
     }));
   };
   const getSelectedItem = () => {
@@ -4092,13 +4131,13 @@ var Select = (_a) => {
         if (search.searchType === "startsWith") {
           filteredGroups = options.map((group) => __spreadProps(__spreadValues({}, group), {
             items: group.items.filter(
-              (item) => item.title.toString().toLowerCase().startsWith(searchValue.toLowerCase())
+              (item) => getTextFromNode(item.title).toLowerCase().startsWith(searchValue.toLowerCase())
             )
           }));
         } else {
           filteredGroups = options.map((group) => __spreadProps(__spreadValues({}, group), {
             items: group.items.filter(
-              (item) => item.title.toString().toLowerCase().includes(searchValue.toLowerCase())
+              (item) => getTextFromNode(item.title).toLowerCase().includes(searchValue.toLowerCase())
             )
           }));
         }
@@ -4111,11 +4150,11 @@ var Select = (_a) => {
       }
       if (search.searchType === "startsWith") {
         return options.filter(
-          (option) => option.title.toString().toLowerCase().startsWith(searchValue.toLowerCase())
+          (option) => getTextFromNode(option.title).toLowerCase().startsWith(searchValue.toLowerCase())
         );
       }
       return options.filter(
-        (option) => option.title.toString().toLowerCase().includes(searchValue.toLowerCase())
+        (option) => getTextFromNode(option.title).toLowerCase().includes(searchValue.toLowerCase())
       );
     }
     return options;
@@ -4145,7 +4184,8 @@ var Select = (_a) => {
           getInputProps,
           ariaMenuName,
           hasError,
-          errorMessage
+          errorMessage,
+          isOpen
         }
       ) : /* @__PURE__ */ React25.createElement(
         SelectHeader,
@@ -4159,7 +4199,8 @@ var Select = (_a) => {
           isDisabled,
           getInputProps,
           ariaMenuName,
-          hasError
+          hasError,
+          isOpen
         }
       )), downshiftIsOpen && isOpen && renderLayer(
         /* @__PURE__ */ React25.createElement(
@@ -4900,6 +4941,7 @@ var TypeaheadInputField = styled24.input`
   transition: 0.3s box-shadow;
   padding-top: 0;
   padding-bottom: 0;
+  id: ${(props) => props.id};
   padding-left: ${(props) => props.hasIcon ? u(5.5) : "var(--lns-formFieldHorizontalPadding)"};
   padding-right: ${(props) => props.hasAddOn ? u(5.5) : "var(--lns-formFieldHorizontalPadding)"};
   border-radius: var(--lns-formFieldRadius);
@@ -4986,7 +5028,8 @@ var TypeaheadHeader = ({
   hasLoader,
   inputValue,
   handleInputValueChange,
-  inputRef
+  inputRef,
+  id
 }) => {
   const icon = getIcon2({ options, selectedItem, selectedOptionValue });
   const hasIcon = Boolean(icon);
@@ -5006,6 +5049,8 @@ var TypeaheadHeader = ({
     getInputProps,
     ariaMenuName
   })), getInputProps({
+    id,
+    "aria-labelledby": void 0,
     disabled: isDisabled,
     onFocus: handleClickAndFocus,
     onClick: handleClickAndFocus,
@@ -5153,7 +5198,8 @@ var Typeahead = forwardRef3(
       isLoading,
       loadingMessage,
       emptyResultsMessage,
-      errorMessage
+      errorMessage,
+      id
     } = _b, props = __objRest(_b, [
       "container",
       "onOptionChange",
@@ -5173,7 +5219,8 @@ var Typeahead = forwardRef3(
       "isLoading",
       "loadingMessage",
       "emptyResultsMessage",
-      "errorMessage"
+      "errorMessage",
+      "id"
     ]);
     const environment = getDownshiftEnvironment(container);
     const internalInputRef = useRef2(null);
@@ -5281,7 +5328,8 @@ var Typeahead = forwardRef3(
               setDownshiftIsOpen(true);
             },
             hasLoader: isLoading,
-            hasError: Boolean(errorMessage)
+            hasError: Boolean(errorMessage),
+            id
           }
         )), downshiftIsOpen && isOpen && renderLayer(
           /* @__PURE__ */ React31.createElement(
@@ -5359,7 +5407,9 @@ var Dropdown = (_a) => {
     onOuterClick,
     triggerOffset = 0,
     onOpenChange,
-    search
+    search,
+    role,
+    menuItemRole
   } = _b, props = __objRest(_b, [
     "ariaMenuName",
     "menuPosition",
@@ -5375,7 +5425,9 @@ var Dropdown = (_a) => {
     "onOuterClick",
     "triggerOffset",
     "onOpenChange",
-    "search"
+    "search",
+    "role",
+    "menuItemRole"
   ]);
   const environment = getDownshiftEnvironment(container);
   const [downshiftIsOpen, setDownshiftIsOpen] = useState3(false);
@@ -5407,17 +5459,11 @@ var Dropdown = (_a) => {
     if (search) {
       if (search.searchType === "startsWith") {
         return options.filter(
-          (option) => {
-            var _a2;
-            return (_a2 = option.title) == null ? void 0 : _a2.toString().toLowerCase().startsWith(searchValue.toLowerCase());
-          }
+          (option) => getTextFromNode(option.title).toLowerCase().startsWith(searchValue.toLowerCase())
         );
       }
       return options.filter(
-        (option) => {
-          var _a2;
-          return (_a2 = option.title) == null ? void 0 : _a2.toString().toLowerCase().includes(searchValue.toLowerCase());
-        }
+        (option) => getTextFromNode(option.title).toLowerCase().includes(searchValue.toLowerCase())
       );
     }
     return options;
@@ -5452,7 +5498,7 @@ var Dropdown = (_a) => {
         ariaMenuName,
         getInputProps,
         isOpen: isOpen2
-      }))) : /* @__PURE__ */ React32.createElement(TriggerSection, __spreadValues({}, getToggleButtonProps({})), trigger)),
+      }))) : /* @__PURE__ */ React32.createElement(TriggerSection, __spreadValues({}, getToggleButtonProps({ tabIndex: 0 })), trigger)),
       isOpen2 && renderLayer(
         /* @__PURE__ */ React32.createElement(
           "div",
@@ -5467,6 +5513,7 @@ var Dropdown = (_a) => {
               maxWidth: menuMaxWidth,
               maxHeight: menuMaxHeight,
               downshiftMenuProps: getMenuProps,
+              role,
               search: search && /* @__PURE__ */ React32.createElement(
                 search_bar_default,
                 {
@@ -5489,6 +5536,7 @@ var Dropdown = (_a) => {
                   icon: item.icon,
                   hasDivider: item.hasDivider,
                   getItemProps,
+                  menuItemRole,
                   index
                 }, getItemProps({
                   key: index,
@@ -6707,16 +6755,16 @@ var CombinedLogoSvg = (_a) => {
       ), /* @__PURE__ */ React43.createElement(
         "path",
         {
-          "fill-rule": "evenodd",
-          "clip-rule": "evenodd",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
           d: "M70.3743 15.1855C71.6352 15.1855 72.7252 15.459 73.6442 16.0059C74.5709 16.5527 75.2848 17.3237 75.7861 18.3187C76.2874 19.3061 76.5381 20.4568 76.5381 21.7708C76.5381 23.0773 76.2874 24.2242 75.7861 25.2116C75.2848 26.199 74.5709 26.9661 73.6442 27.513C72.7252 28.0599 71.6352 28.3333 70.3743 28.3333C69.1135 28.3333 68.0197 28.0599 67.0931 27.513C66.174 26.9661 65.4639 26.199 64.9626 25.2116C64.4613 24.2242 64.2106 23.0773 64.2106 21.7708C64.2106 20.4568 64.4613 19.3061 64.9626 18.3187C65.4639 17.3237 66.174 16.5527 67.0931 16.0059C68.0197 15.459 69.1135 15.1855 70.3743 15.1855ZM70.3743 17.7376C69.7287 17.7376 69.1895 17.9161 68.7565 18.2731C68.3312 18.6225 68.0084 19.101 67.7881 19.7087C67.5754 20.3087 67.4691 20.9923 67.4691 21.7594C67.4691 22.519 67.5754 23.2026 67.7881 23.8102C68.0084 24.4179 68.3312 24.9002 68.7565 25.2572C69.1895 25.6066 69.7287 25.7812 70.3743 25.7812C71.02 25.7812 71.5592 25.6066 71.9922 25.2572C72.4251 24.9002 72.7479 24.4179 72.9606 23.8102C73.1733 23.2026 73.2796 22.519 73.2796 21.7594C73.2796 20.9999 73.1733 20.3163 72.9606 19.7087C72.7479 19.101 72.4251 18.6225 71.9922 18.2731C71.5592 17.9161 71.02 17.7376 70.3743 17.7376Z",
           fill: wordmarkColor
         }
       ), /* @__PURE__ */ React43.createElement(
         "path",
         {
-          "fill-rule": "evenodd",
-          "clip-rule": "evenodd",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
           d: "M84.6387 15.1855C85.8995 15.1855 86.9895 15.459 87.9085 16.0059C88.8352 16.5527 89.5491 17.3237 90.0505 18.3187C90.5518 19.3061 90.8024 20.4568 90.8024 21.7708C90.8024 23.0773 90.5518 24.2242 90.0505 25.2116C89.5491 26.199 88.8352 26.9661 87.9085 27.513C86.9895 28.0599 85.8995 28.3333 84.6387 28.3333C83.3778 28.3333 82.2841 28.0599 81.3574 27.513C80.4384 26.9661 79.7282 26.199 79.2269 25.2116C78.7256 24.2242 78.4749 23.0773 78.4749 21.7708C78.4749 20.4568 78.7256 19.3061 79.2269 18.3187C79.7282 17.3237 80.4384 16.5527 81.3574 16.0059C82.2841 15.459 83.3778 15.1855 84.6387 15.1855ZM84.6387 17.7376C83.9931 17.7376 83.4538 17.9161 83.0208 18.2731C82.5955 18.6225 82.2727 19.101 82.0524 19.7087C81.8397 20.3087 81.7334 20.9923 81.7334 21.7594C81.7334 22.519 81.8397 23.2026 82.0524 23.8102C82.2727 24.4179 82.5955 24.9002 83.0208 25.2572C83.4538 25.6066 83.9931 25.7812 84.6387 25.7812C85.2843 25.7812 85.8236 25.6066 86.2565 25.2572C86.6895 24.9002 87.0123 24.4179 87.2249 23.8102C87.4376 23.2026 87.5439 22.519 87.5439 21.7594C87.5439 20.9999 87.4376 20.3163 87.2249 19.7087C87.0123 19.101 86.6895 18.6225 86.2565 18.2731C85.8236 17.9161 85.2843 17.7376 84.6387 17.7376Z",
           fill: wordmarkColor
         }
@@ -7172,7 +7220,7 @@ var list_default = List;
 
 // src/components/tabs/tabs.tsx
 import styled36 from "@emotion/styled";
-import React46 from "react";
+import React46, { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef4, useId } from "react";
 var TabsContext = React46.createContext({});
 var negativeScrollOffset = (scrollOffset) => `calc(-1 * ${getSizeValue(scrollOffset)})`;
 var Wrapper = styled36.div`
@@ -7369,7 +7417,7 @@ var Tab = (_a) => {
     children
   );
 };
-var Tabs = (_a) => {
+var TabsDeprecated = (_a) => {
   var _b = _a, {
     children,
     scrollOffset,
@@ -7406,6 +7454,166 @@ var Tabs = (_a) => {
   }
   return /* @__PURE__ */ React46.createElement(TabsContext.Provider, { value: { isPilledDesign } }, tabsContent);
 };
+var ConditionalTooltip = ({
+  tooltipProps,
+  children,
+  tooltipId
+}) => {
+  if (tooltipProps) {
+    return /* @__PURE__ */ React46.createElement(tooltip_default, __spreadProps(__spreadValues({}, tooltipProps), { tooltipId, tabIndex: -1 }), children);
+  }
+  return children;
+};
+var TabNew = React46.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      tabContent,
+      tooltipProps,
+      isActive,
+      htmlTag = "button",
+      icon,
+      isDisabled = false,
+      onKeyDown,
+      onClick
+    } = _b, props = __objRest(_b, [
+      "tabContent",
+      "tooltipProps",
+      "isActive",
+      "htmlTag",
+      "icon",
+      "isDisabled",
+      "onKeyDown",
+      "onClick"
+    ]);
+    const { isPilledDesign } = React46.useContext(TabsContext);
+    const tooltipId = useId();
+    const componentProps = __spreadValues({
+      as: htmlTag,
+      isActive,
+      icon,
+      role: "tab",
+      "aria-selected": isActive,
+      disabled: isDisabled,
+      tabIndex: isActive ? 0 : -1,
+      "aria-describedby": tooltipProps ? tooltipId : void 0,
+      onKeyDown,
+      onClick,
+      ref
+    }, props);
+    return /* @__PURE__ */ React46.createElement(ConditionalTooltip, { tooltipProps, tooltipId }, isPilledDesign ? /* @__PURE__ */ React46.createElement(TabWrapperPilled, __spreadValues({}, componentProps), icon ? /* @__PURE__ */ React46.createElement(container_default, { htmlTag: "span", paddingRight: tabContent && "small" }, /* @__PURE__ */ React46.createElement(icon_default, { icon, color: "currentColor" })) : null, tabContent) : /* @__PURE__ */ React46.createElement(TabWrapper, __spreadValues({}, componentProps), icon ? /* @__PURE__ */ React46.createElement(container_default, { htmlTag: "span", paddingRight: tabContent && "small" }, /* @__PURE__ */ React46.createElement(icon_default, { icon, color: "currentColor" })) : null, tabContent));
+  }
+);
+TabNew.displayName = "TabNew";
+var TabsNew = (_a) => {
+  var _b = _a, {
+    tabs,
+    scrollOffset,
+    hasFullTabs,
+    isPilledDesign,
+    hasBottomBorder = false
+  } = _b, props = __objRest(_b, [
+    "tabs",
+    "scrollOffset",
+    "hasFullTabs",
+    "isPilledDesign",
+    "hasBottomBorder"
+  ]);
+  const tabRefs = useRef4({});
+  const handleKeyDown = useCallback4(
+    (event, currentTabIndex) => {
+      var _a2;
+      let newIndex = currentTabIndex;
+      switch (event.key) {
+        case "ArrowLeft":
+          event.preventDefault();
+          newIndex = currentTabIndex > 0 ? currentTabIndex - 1 : tabs.length - 1;
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          newIndex = currentTabIndex < tabs.length - 1 ? currentTabIndex + 1 : 0;
+          break;
+        case "Home":
+          event.preventDefault();
+          newIndex = 0;
+          break;
+        case "End":
+          event.preventDefault();
+          newIndex = tabs.length - 1;
+          break;
+        default:
+          return;
+      }
+      (_a2 = tabRefs.current[newIndex]) == null ? void 0 : _a2.focus();
+    },
+    [tabs.length]
+  );
+  const setTabRef = useCallback4(
+    (tabIndex) => (ref) => {
+      tabRefs.current[tabIndex] = ref;
+    },
+    []
+  );
+  const tabsToRender = useMemo4(
+    () => tabs.map((tabProps, index) => /* @__PURE__ */ React46.createElement(
+      TabNew,
+      __spreadValues({
+        key: index,
+        ref: setTabRef(index),
+        onKeyDown: (e) => handleKeyDown(e, index)
+      }, tabProps)
+    )),
+    [tabs, handleKeyDown, setTabRef]
+  );
+  const tabsContent = useMemo4(
+    () => isPilledDesign ? /* @__PURE__ */ React46.createElement(
+      TabsNavPilled,
+      __spreadValues({
+        hasFullTabs,
+        scrollOffset,
+        role: "tablist"
+      }, props),
+      tabsToRender
+    ) : /* @__PURE__ */ React46.createElement(
+      TabsNav,
+      __spreadValues({
+        hasFullTabs,
+        scrollOffset,
+        hasBottomBorder,
+        role: "tablist"
+      }, props),
+      tabsToRender
+    ),
+    [
+      tabsToRender,
+      hasFullTabs,
+      scrollOffset,
+      hasBottomBorder,
+      isPilledDesign,
+      props
+    ]
+  );
+  const wrappedContent = /* @__PURE__ */ React46.createElement(TabsContext.Provider, { value: { isPilledDesign } }, tabsContent);
+  if (scrollOffset) {
+    return /* @__PURE__ */ React46.createElement(Wrapper, { scrollOffset }, wrappedContent);
+  }
+  return wrappedContent;
+};
+var Tabs = (_a) => {
+  var _b = _a, { children, tabs } = _b, props = __objRest(_b, ["children", "tabs"]);
+  if (children && tabs) {
+    console.warn(
+      "Both children and tabs props are provided. Please use only one of them."
+    );
+  }
+  if (!children && !tabs) {
+    console.error("Either children or tabs must be provided.");
+    return null;
+  }
+  if (children) {
+    return /* @__PURE__ */ React46.createElement(TabsDeprecated, __spreadValues({}, props), children);
+  }
+  return /* @__PURE__ */ React46.createElement(TabsNew, __spreadValues({ tabs }, props));
+};
 var tabs_default = Tabs;
 
 // src/components/pill/pill.tsx