@wistia/ui 0.10.2 → 0.10.3-beta.131d48d0.820ab0d

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.10.2
+ * @license @wistia/ui v0.10.3-beta.131d48d0.820ab0d
  *
  * 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,
@@ -8760,9 +8761,17 @@ var Checkbox = (0, import_react34.forwardRef)(
     const generatedId = (0, import_react34.useId)();
     const computedId = (0, import_type_guards26.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
     const checkboxGroupContext = useCheckboxGroup();
-    const contextName = checkboxGroupContext?.name;
+    const groupName = checkboxGroupContext?.name;
     const contextOnChange = checkboxGroupContext?.onChange;
-    const checkboxName = name ?? contextName;
+    let checkboxName = name;
+    if (groupName) {
+      if ((0, import_type_guards26.isUndefined)(value)) {
+        console.error("Checkbox in CheckboxGroup is missing a value prop.");
+        checkboxName = groupName;
+      } else {
+        checkboxName = `${groupName}[${value}]`;
+      }
+    }
     const handleOnChange = onChange ?? contextOnChange;
     return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(StyledCheckboxWrapper, { disabled, children: [
       /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
@@ -11732,9 +11741,9 @@ var Radio = (0, import_react57.forwardRef)(
     const generatedId = (0, import_react57.useId)();
     const computedId = (0, import_type_guards45.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
     const radioGroupContext = useRadioGroup();
-    const contextName = radioGroupContext?.name;
+    const groupName = radioGroupContext?.name;
     const contextOnChange = radioGroupContext?.onChange;
-    const radioName = name ?? contextName;
+    const radioName = name ?? groupName;
     const handleOnChange = onChange ?? contextOnChange;
     return /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
       StyledRadioWrapper,
@@ -13699,6 +13708,245 @@ var List = ({
   return null;
 };
 List.displayName = "List";
+
+// 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_components96 = __toESM(require("styled-components"));
+var import_jsx_runtime279 = require("react/jsx-runtime");
+var ComboboxWapper = import_styled_components96.default.div`
+  ${inputCss};
+  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_components96.default)(Ariakit.Combobox)`
+  appearance: none;
+  padding: 0;
+  width: 100%;
+  border: 0 none;
+  flex: 1;
+
+  &[data-focus-visible] {
+    outline-style: solid;
+  }
+
+  &[data-active-item] {
+    outline-width: 2px;
+  }
+`;
+var ComboboxPopover = (0, import_styled_components96.default)(Ariakit.Popover)`
+  --wui-combobox-content-border: var(--wui-color-border);
+  --wui-combobox-content-bg: var(--wui-color-bg-surface);
+  --wui-combobox-content-border-radius: var(--wui-border-radius-02);
+  --wui-combobox-option-padding: var(--wui-space-02);
+  --wui-combobox-option-inner-gap: var(--wui-space-03);
+  --wui-combobox-option-bg-hover: var(--wui-color-bg-surface-hover);
+
+  border-radius: var(--wui-border-radius-02);
+  padding: var(--wui-space-04);
+  max-height: var(--wui-popover-max-height, 300px);
+  background-color: var(--wui-color-bg-surface);
+  box-shadow: var(--wui-elevation-01);
+  border: 1px solid var(--wui-color-border);
+  position: relative;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  overscroll-behavior: contain;
+
+  &[aria-busy='true'] {
+    --item-opacity: 0.5;
+  }
+`;
+var ComboboxItem2 = (0, import_styled_components96.default)(Ariakit.ComboboxItem)`
+  ${variantStyleMap2.body3};
+  display: flex;
+  padding: var(--wui-combobox-option-padding);
+  gap: var(--wui-combobox-option-inner-gap);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  border-radius: var(--wui-border-radius-01);
+  align-items: center;
+  cursor: pointer;
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--wui-combobox-option-bg-hover);
+    outline: none;
+  }
+
+  &[aria-disabled='true'] {
+    color: var(--wui-color-text-disabled);
+  }
+
+  &[aria-disabled='true']:hover {
+    background-color: transparent;
+  }
+`;
+var NoResults = import_styled_components96.default.div`
+  gap: var(--wui-space-02);
+`;
+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_runtime279.jsxs)(
+    Ariakit.ComboboxProvider,
+    {
+      selectedValue: value,
+      setSelectedValue: onChange,
+      setValue: (nextValue) => {
+        startTransition(() => {
+          onSearchValueChange(nextValue);
+        });
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
+          ComboboxWapper,
+          {
+            ref: comboboxWrapperRef,
+            $fullWidth: fullWidth,
+            children: [
+              value.map((selectedValue) => /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
+                Tag,
+                {
+                  href: "https://example.com",
+                  label: selectedValue,
+                  onClickRemove: () => handleRemoveValue(selectedValue),
+                  onClickRemoveLabel: `Remove ${selectedValue}`
+                },
+                selectedValue
+              )),
+              /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(ComboboxInput, { placeholder })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
+          ComboboxPopover,
+          {
+            "aria-busy": isPending,
+            gutter: 8,
+            sameWidth: false,
+            style: {
+              width: wrapperWidth
+            },
+            children: [
+              matches.map((match) => /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
+                ComboboxItem2,
+                {
+                  className: "combobox-item",
+                  focusOnHover: true,
+                  value: match,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
+                      Icon,
+                      {
+                        size: "sm",
+                        style: {
+                          opacity: value.includes(match) ? 1 : 0
+                        },
+                        type: "checkmark"
+                      }
+                    ),
+                    options[match]
+                  ]
+                },
+                match
+              )),
+              !matches.length && /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(NoResults, { children: "No results found" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -13719,6 +13967,7 @@ List.displayName = "List";
   CollapsibleContent,
   CollapsibleTrigger,
   ColorSchemeWrapper,
+  Combobox,
   DataCard,
   DataCardTrend,
   DataCards,