@wistia/ui 0.8.26 → 0.8.27-beta.64fad0dc.0eabff0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.26
+ * @license @wistia/ui v0.8.27-beta.64fad0dc.0eabff0
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -57,6 +57,7 @@ __export(index_exports, {
   CollapsibleContent: () => CollapsibleContent,
   CollapsibleTrigger: () => CollapsibleTrigger,
   ColorSchemeWrapper: () => ColorSchemeWrapper,
+  Combobox: () => Combobox2,
   DataCard: () => DataCard,
   DataCardTrend: () => DataCardTrend,
   DataCards: () => DataCards,
@@ -8500,6 +8501,11 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
 var import_react30 = require("react");
+var isClickableElement = (element) => {
+  if (!element) return false;
+  const el = element;
+  return el.closest("button") !== null || el.closest("a") !== null || el.closest("input") !== null || el.closest("select") !== null || el.closest("textarea") !== null || el.closest("label") !== null || el.closest("[data-wui-faux-input]") !== null;
+};
 var ClickRegion = ({ children, targetRef }) => {
   (0, import_react30.useEffect)(() => {
     if (targetRef.current && targetRef.current.tagName === "A") {
@@ -8512,7 +8518,10 @@ var ClickRegion = ({ children, targetRef }) => {
   const handleClick = (0, import_react30.useCallback)(
     (event) => {
       const node = targetRef.current;
-      if (event.target instanceof HTMLAnchorElement && !event.target.hasAttribute("data-click-region-target-link") || event.target instanceof HTMLButtonElement && !event.target.hasAttribute("data-click-region-target-button")) {
+      if (event.target === node) {
+        return;
+      }
+      if (isClickableElement(event.target) && event.target !== node) {
         event.stopPropagation();
         return;
       }
@@ -10766,11 +10775,8 @@ MenuItem.displayName = "MenuItem";
 // src/components/Menu/MenuRadioGroup.tsx
 var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
 var import_jsx_runtime238 = require("react/jsx-runtime");
-var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(MenuLabel, { children: label }),
-    children
-  ] });
+var MenuRadioGroup = ({ children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children });
 };
 MenuRadioGroup.displayName = "MenuRadioGroup";
 
@@ -13272,6 +13278,283 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime274.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Combobox/Combobox.tsx
+var Ariakit = __toESM(require("@ariakit/react"));
+var import_react73 = require("react");
+var import_match_sorter = require("match-sorter");
+var import_styled_components95 = __toESM(require("styled-components"));
+var import_jsx_runtime275 = require("react/jsx-runtime");
+var ComboboxWapper = import_styled_components95.default.div`
+  ${inputCssVariables};
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+  padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
+  background-color: var(--wui-input-color-bg);
+  border: none;
+  outline: 1px solid var(--wui-input-color-border);
+  outline-offset: -1px;
+  border-radius: var(--wui-input-border-radius);
+  font-size: var(--wui-input-font-size);
+  line-height: var(--wui-input-line-height);
+  font-weight: var(--wui-input-font-weight);
+  color: var(--wui-input-color-text);
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--wui-space-01);
+
+  > * {
+    width: min-content !important;
+  }
+
+  &:focus-within {
+    outline: 2px solid var(--wui-input-color-border-focus);
+    outline-offset: -2px;
+  }
+
+  input {
+    outline: 0 none;
+    border: 0 none;
+
+    &::placeholder {
+      color: var(--wui-input-placeholder);
+      opacity: 1;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+
+    &[aria-invalid='true'] {
+      outline-color: var(--wui-input-color-border-error);
+    }
+
+    &:disabled {
+      outline-color: var(--wui-color-border-disabled);
+      background-color: var(--wui-color-bg-surface-disabled);
+    }
+  }
+`;
+var ComboboxInput = (0, import_styled_components95.default)(Ariakit.Combobox)`
+  appearance: none;
+  padding: 0;
+  width: 100%;
+  border: 0 none;
+  flex: 1;
+
+  &::placeholder {
+    color: rgb(0 0 0 / 0.6);
+  }
+
+  &:hover {
+    background-color: hsl(204 20% 99%);
+  }
+
+  &[data-focus-visible] {
+    outline-style: solid;
+  }
+
+  &[data-active-item] {
+    outline-width: 2px;
+  }
+
+  &:where(.dark, .dark *) {
+    background-color: hsl(204 4% 8%);
+    color: white;
+    box-shadow:
+      inset 0 0 0 1px rgba(255 255 255 / 0.15),
+      inset 0 -1px 0 0 rgba(255 255 255 / 0.05),
+      inset 0 2px 5px 0 rgba(0 0 0 / 0.15);
+  }
+
+  &:where(.dark, .dark *)::placeholder {
+    color: rgb(255 255 255 / 46%);
+  }
+
+  &:hover:where(.dark, .dark *) {
+    background-color: hsl(204 4% 6%);
+  }
+`;
+var ComboboxPopover = (0, import_styled_components95.default)(Ariakit.Popover)`
+  position: relative;
+  z-index: 50;
+  display: flex;
+  max-height: min(var(--popover-available-height, 300px), 300px);
+  flex-direction: column;
+  overflow: auto;
+  overscroll-behavior: contain;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: hsl(204 20% 88%);
+  background-color: white;
+  padding: 0.5rem;
+  color: black;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  &:where(.dark, .dark *) {
+    border-color: hsl(204 4% 24%);
+    background-color: hsl(204 4% 16%);
+    color: white;
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 0.25),
+      0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+
+  &[aria-busy='true'] {
+    --item-opacity: 0.5;
+  }
+`;
+var ComboboxItem2 = (0, import_styled_components95.default)(Ariakit.ComboboxItem)`
+  display: flex;
+  cursor: default;
+  scroll-margin: 0.5rem;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  outline: none !important;
+  opacity: var(--item-opacity, 1);
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
+  &:hover {
+    background-color: hsl(204 100% 80% / 0.4);
+  }
+
+  &[data-active-item] {
+    background-color: hsl(204 100% 40%);
+    color: white;
+  }
+
+  &:active,
+  &[data-active] {
+    padding-top: 9px;
+    padding-bottom: 7px;
+  }
+
+  &:hover:where(.dark, .dark *) {
+    background-color: hsl(204 100% 40% / 0.25);
+  }
+
+  &:where(.dark, .dark *)[data-active-item] {
+    background-color: hsl(204 100% 40%);
+  }
+`;
+var NoResults = import_styled_components95.default.div`
+  gap: 0.5rem;
+  padding: 0.5rem;
+`;
+var POPOVER_WIDTH_OFFSET = 20;
+var extractOptions = (children) => {
+  const options = {};
+  import_react73.Children.forEach(children, (child) => {
+    if ((0, import_react73.isValidElement)(child) && "value" in child.props && "children" in child.props) {
+      options[child.props.value] = child.props.children ?? child.props.value;
+    }
+  });
+  return options;
+};
+var Combobox2 = ({
+  placeholder,
+  value = [],
+  onChange,
+  searchValue,
+  onSearchValueChange,
+  children,
+  fullWidth = true
+}) => {
+  const [isPending, startTransition] = (0, import_react73.useTransition)();
+  const [wrapperWidth, setWrapperWidth] = (0, import_react73.useState)("auto");
+  const comboboxWrapperRef = (0, import_react73.useRef)(null);
+  const options = (0, import_react73.useMemo)(() => extractOptions(children), [children]);
+  (0, import_react73.useEffect)(() => {
+    const comboboxWrapper = comboboxWrapperRef.current;
+    if (comboboxWrapper) {
+      const updateWidthVariable = () => {
+        const { width } = comboboxWrapper.getBoundingClientRect();
+        setWrapperWidth(`${width - POPOVER_WIDTH_OFFSET}px`);
+      };
+      updateWidthVariable();
+      window.addEventListener("resize", updateWidthVariable);
+      return () => {
+        window.removeEventListener("resize", updateWidthVariable);
+      };
+    }
+    return () => null;
+  }, []);
+  const handleRemoveValue = (valueToRemove) => {
+    onChange(value.filter((val) => val !== valueToRemove));
+  };
+  const matches = (0, import_react73.useMemo)(() => {
+    return (0, import_match_sorter.matchSorter)(Object.keys(options), searchValue);
+  }, [options, searchValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime275.jsxs)(
+    Ariakit.ComboboxProvider,
+    {
+      selectedValue: value,
+      setSelectedValue: onChange,
+      setValue: (nextValue) => {
+        startTransition(() => {
+          onSearchValueChange(nextValue);
+        });
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime275.jsxs)(
+          ComboboxWapper,
+          {
+            ref: comboboxWrapperRef,
+            $fullWidth: fullWidth,
+            children: [
+              value.map((selectedValue) => /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(
+                Tag,
+                {
+                  href: "https://example.com",
+                  label: selectedValue,
+                  onClickRemove: () => handleRemoveValue(selectedValue),
+                  onClickRemoveLabel: `Remove ${selectedValue}`
+                },
+                selectedValue
+              )),
+              /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(ComboboxInput, { placeholder })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime275.jsxs)(
+          ComboboxPopover,
+          {
+            "aria-busy": isPending,
+            gutter: 8,
+            sameWidth: false,
+            style: {
+              width: wrapperWidth
+            },
+            children: [
+              matches.map((match) => /* @__PURE__ */ (0, import_jsx_runtime275.jsxs)(
+                ComboboxItem2,
+                {
+                  className: "combobox-item",
+                  focusOnHover: true,
+                  value: match,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(Ariakit.ComboboxItemCheck, {}),
+                    options[match]
+                  ]
+                },
+                match
+              )),
+              !matches.length && /* @__PURE__ */ (0, import_jsx_runtime275.jsx)(NoResults, { children: "No results found" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -13292,6 +13575,7 @@ WistiaLogo.displayName = "WistiaLogo";
   CollapsibleContent,
   CollapsibleTrigger,
   ColorSchemeWrapper,
+  Combobox,
   DataCard,
   DataCardTrend,
   DataCards,