@cerberus-design/react/build/legacy/components/combobox/index.cjs

The Cerberus Design React component library.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);

// src/components/combobox/index.ts
var combobox_exports = {};
__export(combobox_exports, {
  ComboItemGroup: () => ComboItemGroup,
  ComboItemText: () => ComboItemText,
  ComboItemWithIndicator: () => ComboItemWithIndicator,
  Combobox: () => Combobox2,
  ComboboxClearTrigger: () => ComboboxClearTrigger,
  ComboboxContent: () => ComboboxContent,
  ComboboxControl: () => ComboboxControl,
  ComboboxInput: () => ComboboxInput,
  ComboboxItem: () => ComboboxItem,
  ComboboxItemGroup: () => ComboboxItemGroup,
  ComboboxItemGroupLabel: () => ComboboxItemGroupLabel,
  ComboboxItemIndicator: () => ComboboxItemIndicator,
  ComboboxItemText: () => ComboboxItemText,
  ComboboxLabel: () => ComboboxLabel,
  ComboboxParts: () => ComboboxParts,
  ComboboxPositioner: () => ComboboxPositioner,
  ComboboxRoot: () => ComboboxRoot,
  ComboboxStartIcon: () => ComboboxStartIcon,
  ComboboxTrigger: () => ComboboxTrigger,
  useStatefulCollection: () => useStatefulCollection
});
module.exports = __toCommonJS(combobox_exports);

// src/components/combobox/primitives.tsx
var import_combobox = require("@ark-ui/react/combobox");
var import_factory = require("@ark-ui/react/factory");
var import_recipes = require("styled-system/recipes");

// src/system/primitive-factory.tsx
var import_css = require("styled-system/css");
var import_jsx_runtime = require("react/jsx-runtime");
var CerberusPrimitive = class {
  constructor(recipe) {
    __publicField(this, "recipe");
    /**
     * Creates a Cerberus component with bare features and no recipe.
     * @param Component - The React component to enhance with Cerberus features.
     * Can be a string or a component reference.
     * @returns A new React component that applies Cerberus features to the
     * original component.
     *
     * @example
     * ```ts
     * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)
     * const Button = withNoRecipe('button')
     * ```
     */
    __publicField(this, "withNoRecipe", (Component, options) => {
      const { defaultProps } = options || {};
      const El = Component;
      const CerbComponent = (props) => {
        const { css: customCss, className, ...nativeProps } = props;
        const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(El, { ...defaultProps, ...styles, ...nativeProps });
      };
      if (this.validateComponent(El)) {
        const ElName = typeof El === "string" ? El : El.displayName || El.name;
        CerbComponent.displayName = ElName;
      }
      return CerbComponent;
    });
    /**
     * Creates a Cerberus component with the given recipe.
     * @param Component - The React component to enhance with the recipe.
     * @param options - Options for the recipe.
     * @returns A new React component that applies the recipe to the original
     * component.
     */
    __publicField(this, "withRecipe", (Component, options) => {
      const { defaultProps } = options || {};
      const El = Component;
      const recipe = this.recipe;
      const CerbComponent = (internalProps) => {
        const {
          css: customCss,
          className,
          ...restOfInternalProps
        } = internalProps;
        const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
        const recipeStyles = recipe(variantOptions);
        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          Component,
          {
            ...defaultProps,
            ...nativeProps,
            className: (0, import_css.cx)(className, recipeStyles, (0, import_css.css)(customCss))
          }
        );
      };
      if (this.validateComponent(El)) {
        const ElName = typeof El === "string" ? El : El.displayName || El.name;
        CerbComponent.displayName = ElName;
      }
      return CerbComponent;
    });
    /**
     * Creates a Cerberus component with a slot recipe applied.
     * @param Component - The React component to enhance with Cerberus features.
     * @param recipe - The slot recipe to apply to the component.
     * @returns A new React component that applies Cerberus features and the
     * specified slot recipe to the original component.
     * @example
     * ```typescript
     * const { withSlotRecipe } = createCerberusPrimitive(field)
     * const Field = withSlotRecipe(RawField, field)
     * ```
     */
    __publicField(this, "withSlotRecipe", (Component, slot, options) => {
      const { defaultProps } = options || {};
      const El = Component;
      const recipe = this.recipe;
      const CerbComponent = (internalProps) => {
        const {
          css: customCss,
          className,
          ...restOfInternalProps
        } = internalProps;
        const [variantOptions, nativeProps] = recipe.splitVariantProps(restOfInternalProps);
        const styles = recipe(variantOptions);
        const slotStyles = styles[slot];
        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          Component,
          {
            ...defaultProps,
            ...nativeProps,
            className: (0, import_css.cx)(className, slotStyles, (0, import_css.css)(customCss))
          }
        );
      };
      if (this.validateComponent(El)) {
        const ElName = typeof El === "string" ? El : El.displayName || El.name;
        CerbComponent.displayName = ElName;
      }
      return CerbComponent;
    });
    this.recipe = recipe ?? null;
  }
  hasStyles(styles) {
    if (styles) {
      return {
        className: styles
      };
    }
    return {};
  }
  validateComponent(Component) {
    if (typeof Component !== "function" && typeof Component !== "object") {
      return false;
    }
    return true;
  }
};

// src/system/index.ts
function createCerberusPrimitive(recipe) {
  return new CerberusPrimitive(recipe);
}

// src/components/combobox/primitives.tsx
var { withSlotRecipe } = createCerberusPrimitive(import_recipes.combobox);
var ComboboxRoot = withSlotRecipe(
  import_combobox.Combobox.Root,
  "root"
);
var ComboboxLabel = withSlotRecipe(
  import_combobox.Combobox.Label,
  "label"
);
var ComboboxControl = withSlotRecipe(
  import_combobox.Combobox.Control,
  "control"
);
var ComboboxInput = withSlotRecipe(
  import_combobox.Combobox.Input,
  "input"
);
var ComboboxTrigger = withSlotRecipe(
  import_combobox.Combobox.Trigger,
  "trigger"
);
var ComboboxClearTrigger = withSlotRecipe(
  import_combobox.Combobox.ClearTrigger,
  "clearTrigger"
);
var ComboboxPositioner = withSlotRecipe(
  import_combobox.Combobox.Positioner,
  "positioner"
);
var ComboboxContent = withSlotRecipe(
  import_combobox.Combobox.Content,
  "content"
);
var ComboboxItemGroup = withSlotRecipe(
  import_combobox.Combobox.ItemGroup,
  "itemGroup"
);
var ComboboxItemGroupLabel = withSlotRecipe(
  import_combobox.Combobox.ItemGroupLabel,
  "itemGroupLabel"
);
var ComboboxItem = withSlotRecipe(
  import_combobox.Combobox.Item,
  "item"
);
var ComboboxItemText = withSlotRecipe(
  import_combobox.Combobox.ItemText,
  "itemText"
);
var ComboboxItemIndicator = withSlotRecipe(
  import_combobox.Combobox.ItemIndicator,
  "itemIndicator"
);
var ComboboxStartIcon = withSlotRecipe(
  import_factory.ark.span,
  "startIcon"
);
var ComboItemText = ComboboxItemText;

// src/components/combobox/parts.ts
var ComboboxParts = {
  Root: ComboboxRoot,
  Label: ComboboxLabel,
  Control: ComboboxControl,
  Input: ComboboxInput,
  Trigger: ComboboxTrigger,
  ClearTrigger: ComboboxClearTrigger,
  Positioner: ComboboxPositioner,
  Content: ComboboxContent,
  ItemGroup: ComboboxItemGroup,
  ItemGroupLabel: ComboboxItemGroupLabel,
  Item: ComboboxItem,
  ItemText: ComboboxItemText,
  ItemIndicator: ComboboxItemIndicator
};

// src/context/cerberus.tsx
var import_react = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var CerberusContext = (0, import_react.createContext)(null);
function useCerberusContext() {
  const context = (0, import_react.useContext)(CerberusContext);
  if (!context) {
    throw new Error("useCerberus must be used within a CerberusProvider");
  }
  return context;
}

// src/utils/index.ts
function splitProps(props, ...keyGroups) {
  const result = keyGroups.map(() => ({}));
  const rest = {};
  for (const key in props) {
    let assigned = false;
    for (let i = 0; i < keyGroups.length; i++) {
      if (keyGroups[i].includes(key)) {
        result[i][key] = props[key];
        assigned = true;
        break;
      }
    }
    if (!assigned) {
      rest[key] = props[key];
    }
  }
  return [...result, rest];
}

// src/components/portal/portal.tsx
var import_react2 = require("@ark-ui/react");
var Portal = import_react2.Portal;

// src/components/show/show.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
function Show(props) {
  const { when, children, fallback } = props;
  if (when) {
    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
  }
  if (fallback) {
    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: fallback });
  }
  return null;
}

// src/components/combobox/combobox.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
function Combobox2(props) {
  const [{ startIcon, label, ...elProps }, rootProps] = splitProps(props, [
    "label",
    "children",
    "startIcon",
    "container"
  ]);
  const { icons } = useCerberusContext();
  const { selectArrow: SelectArrow, close: CloseIcon } = icons;
  const hasStartIcon = Boolean(startIcon);
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ComboboxParts.Root, { ...rootProps, children: [
    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: label, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComboboxParts.Label, { children: label }) }),
    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ComboboxParts.Control, { children: [
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: hasStartIcon, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComboboxStartIcon, { children: startIcon }) }),
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
        ComboboxParts.Input,
        {
          ...hasStartIcon && { "data-has": "start-indicator" }
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComboboxParts.ClearTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, {}) }),
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComboboxParts.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectArrow, {}) })
    ] }),
    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Portal, { container: elProps.container, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComboboxParts.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComboboxParts.Content, { size: rootProps.size, children: elProps.children }) }) })
  ] });
}

// src/components/combobox/item.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
function ComboItemWithIndicator(props) {
  const { icons } = useCerberusContext();
  const { selectChecked: CheckedIcon } = icons;
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ComboboxParts.Item, { ...props, children: [
    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComboboxParts.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckedIcon, {}) }),
    props.children
  ] });
}

// src/components/combobox/item-group.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
function ComboItemGroup(props) {
  const { label, children, ...groupProps } = props;
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ComboboxParts.ItemGroup, { ...groupProps, children: [
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ComboboxParts.ItemGroupLabel, { children: label }),
    children
  ] });
}

// src/components/combobox/use-stateful-collection.ts
var import_react3 = require("react");

// src/components/select/primitives.tsx
var import_select = require("@ark-ui/react/select");
var import_recipes2 = require("styled-system/recipes");
var { withSlotRecipe: withSlotRecipe2, withNoRecipe } = createCerberusPrimitive(import_recipes2.select);
var SelectRoot = withSlotRecipe2(import_select.Select.Root, "root");
var SelectLabel = withSlotRecipe2(
  import_select.Select.Label,
  "label"
);
var SelectControl = withNoRecipe(import_select.Select.Control);
var SelectTrigger = withSlotRecipe2(
  import_select.Select.Trigger,
  "trigger"
);
var SelectValueText = withNoRecipe(
  import_select.Select.ValueText
);
var SelectIndicator = withSlotRecipe2(
  import_select.Select.Indicator,
  "indicator"
);
var SelectClearTrigger = withNoRecipe(
  import_select.Select.ClearTrigger
);
var SelectPositioner = withSlotRecipe2(
  import_select.Select.Positioner,
  "positioner"
);
var SelectContent = withSlotRecipe2(
  import_select.Select.Content,
  "content"
);
var SelectItemGroup = withNoRecipe(
  import_select.Select.ItemGroup
);
var SelectItemGroupLabel = withSlotRecipe2(
  import_select.Select.ItemGroupLabel,
  "itemGroupLabel"
);
var SelectItem = withSlotRecipe2(import_select.Select.Item, "item");
var SelectItemText = withNoRecipe(import_select.Select.ItemText);
var SelectItemIndicator = withSlotRecipe2(
  import_select.Select.ItemIndicator,
  "itemIndicator"
);
var SelectHiddenSelect = withNoRecipe(
  import_select.Select.HiddenSelect
);
function createSelectCollection(collection) {
  return (0, import_select.createListCollection)({
    items: collection
  });
}

// src/components/combobox/use-stateful-collection.ts
function useStatefulCollection(initialItems = []) {
  const [items, setItems] = (0, import_react3.useState)(initialItems);
  const [filterValue, setFilterValue] = (0, import_react3.useState)([]);
  const collection = (0, import_react3.useMemo)(() => createSelectCollection(items), [items]);
  const handleInputChange = (0, import_react3.useCallback)(
    (details) => {
      if (details.inputValue === "") {
        return setItems(initialItems);
      }
      setItems(
        (prev) => prev.filter(
          (item) => item.value.includes(details.inputValue.toLowerCase())
        )
      );
      setFilterValue(details.inputValue.split(""));
    },
    [initialItems]
  );
  return (0, import_react3.useMemo)(
    () => ({
      collection,
      filterChars: filterValue,
      handleInputChange
    }),
    [collection, filterValue, handleInputChange]
  );
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ComboItemGroup,
  ComboItemText,
  ComboItemWithIndicator,
  Combobox,
  ComboboxClearTrigger,
  ComboboxContent,
  ComboboxControl,
  ComboboxInput,
  ComboboxItem,
  ComboboxItemGroup,
  ComboboxItemGroupLabel,
  ComboboxItemIndicator,
  ComboboxItemText,
  ComboboxLabel,
  ComboboxParts,
  ComboboxPositioner,
  ComboboxRoot,
  ComboboxStartIcon,
  ComboboxTrigger,
  useStatefulCollection
});
//# sourceMappingURL=index.cjs.map