@wistia/ui 0.10.2-beta.6ea9f134.e1e41c3 → 0.10.2

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.10.2-beta.6ea9f134.e1e41c3
+ * @license @wistia/ui v0.10.2
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -57,7 +57,6 @@ __export(index_exports, {
   CollapsibleContent: () => CollapsibleContent,
   CollapsibleTrigger: () => CollapsibleTrigger,
   ColorSchemeWrapper: () => ColorSchemeWrapper,
-  Combobox: () => Combobox2,
   DataCard: () => DataCard,
   DataCardTrend: () => DataCardTrend,
   DataCards: () => DataCards,
@@ -13700,245 +13699,6 @@ 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,
@@ -13959,7 +13719,6 @@ var Combobox2 = ({
   CollapsibleContent,
   CollapsibleTrigger,
   ColorSchemeWrapper,
-  Combobox,
   DataCard,
   DataCardTrend,
   DataCards,