@kobalte/core/dist/chunk/OU5X5OOT.jsx

Unstyled components and primitives for building accessible web apps and design systems with SolidJS.

import {
  ComboboxBase,
  ComboboxContent,
  ComboboxControl,
  ComboboxHiddenSelect,
  ComboboxIcon,
  ComboboxInput,
  ComboboxListbox,
  ComboboxPortal,
  useComboboxContext
} from "./E4PLEADY.jsx";
import {
  ListboxItem,
  ListboxItemDescription,
  ListboxItemIndicator,
  ListboxItemLabel,
  ListboxSection
} from "./2I3Q5YLM.jsx";
import {
  PopperArrow
} from "./2CTBMVJ4.jsx";
import {
  ButtonRoot
} from "./UKTBL2JL.jsx";
import {
  FormControlLabel
} from "./FOXVCQFV.jsx";
import {
  FormControlErrorMessage
} from "./ZZYKR3VO.jsx";
import {
  FormControlDescription,
  useFormControlContext
} from "./XUUROM4M.jsx";
import {
  __export
} from "./5WXHJDCZ.jsx";

// src/combobox/index.tsx
var combobox_exports = {};
__export(combobox_exports, {
  Arrow: () => PopperArrow,
  Combobox: () => Combobox,
  Content: () => ComboboxContent,
  Control: () => ComboboxControl,
  Description: () => FormControlDescription,
  ErrorMessage: () => FormControlErrorMessage,
  HiddenSelect: () => ComboboxHiddenSelect,
  Icon: () => ComboboxIcon,
  Input: () => ComboboxInput,
  Item: () => ListboxItem,
  ItemDescription: () => ListboxItemDescription,
  ItemIndicator: () => ListboxItemIndicator,
  ItemLabel: () => ListboxItemLabel,
  Label: () => FormControlLabel,
  Listbox: () => ComboboxListbox,
  Portal: () => ComboboxPortal,
  Root: () => ComboboxRoot,
  Section: () => ListboxSection,
  Trigger: () => ComboboxTrigger,
  useComboboxContext: () => useComboboxContext
});

// src/combobox/combobox-root.tsx
import {
  createMemo,
  splitProps
} from "solid-js";
function ComboboxRoot(props) {
  const [local, others] = splitProps(
    props,
    ["value", "defaultValue", "onChange", "multiple"]
  );
  const value = createMemo(() => {
    if (local.value != null) {
      return local.multiple ? local.value : [local.value];
    }
    return local.value;
  });
  const defaultValue = createMemo(() => {
    if (local.defaultValue != null) {
      return local.multiple ? local.defaultValue : [local.defaultValue];
    }
    return local.defaultValue;
  });
  const onChange = (value2) => {
    if (local.multiple) {
      local.onChange?.(value2 ?? []);
    } else {
      local.onChange?.(value2[0] ?? null);
    }
  };
  return <ComboboxBase
    value={value()}
    defaultValue={defaultValue()}
    onChange={onChange}
    selectionMode={local.multiple ? "multiple" : "single"}
    {...others}
  />;
}

// src/combobox/combobox-trigger.tsx
import {
  callHandler,
  mergeDefaultProps,
  mergeRefs
} from "@kobalte/utils";
import {
  splitProps as splitProps2
} from "solid-js";
function ComboboxTrigger(props) {
  const formControlContext = useFormControlContext();
  const context = useComboboxContext();
  const mergedProps = mergeDefaultProps(
    {
      id: context.generateId("trigger")
    },
    props
  );
  const [local, others] = splitProps2(mergedProps, [
    "ref",
    "disabled",
    "onPointerDown",
    "onClick",
    "aria-labelledby"
  ]);
  const isDisabled = () => {
    return local.disabled || context.isDisabled() || formControlContext.isDisabled() || formControlContext.isReadOnly();
  };
  const onPointerDown = (e) => {
    callHandler(e, local.onPointerDown);
    e.currentTarget.dataset.pointerType = e.pointerType;
    if (!isDisabled() && e.pointerType !== "touch" && e.button === 0) {
      e.preventDefault();
      context.toggle(false, "manual");
    }
  };
  const onClick = (e) => {
    callHandler(e, local.onClick);
    if (!isDisabled()) {
      if (e.currentTarget.dataset.pointerType === "touch") {
        context.toggle(false, "manual");
      }
      context.inputRef()?.focus();
    }
  };
  const ariaLabelledBy = () => {
    return formControlContext.getAriaLabelledBy(
      others.id,
      context.triggerAriaLabel(),
      local["aria-labelledby"]
    );
  };
  return <ButtonRoot
    ref={mergeRefs(context.setTriggerRef, local.ref)}
    disabled={isDisabled()}
    tabIndex={-1}
    aria-haspopup="listbox"
    aria-expanded={context.isOpen()}
    aria-controls={context.isOpen() ? context.listboxId() : void 0}
    aria-label={context.triggerAriaLabel()}
    aria-labelledby={ariaLabelledBy()}
    onPointerDown={onPointerDown}
    onClick={onClick}
    {...context.dataset()}
    {...others}
  />;
}

// src/combobox/index.tsx
var Combobox = Object.assign(ComboboxRoot, {
  Arrow: PopperArrow,
  Content: ComboboxContent,
  Control: ComboboxControl,
  Description: FormControlDescription,
  ErrorMessage: FormControlErrorMessage,
  HiddenSelect: ComboboxHiddenSelect,
  Icon: ComboboxIcon,
  Input: ComboboxInput,
  Item: ListboxItem,
  ItemDescription: ListboxItemDescription,
  ItemIndicator: ListboxItemIndicator,
  ItemLabel: ListboxItemLabel,
  Label: FormControlLabel,
  Listbox: ComboboxListbox,
  Portal: ComboboxPortal,
  Section: ListboxSection,
  Trigger: ComboboxTrigger
});

export {
  ComboboxRoot,
  ComboboxTrigger,
  Combobox,
  combobox_exports
};