@kobalte/core/dist/chunk/LDLLAXSV.js

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

import { ComboboxContent, ComboboxControl, ComboboxHiddenSelect, ComboboxIcon, ComboboxInput, ComboboxListbox, ComboboxPortal, useComboboxContext, ComboboxBase } from './DYCE77BF.js';
import { ListboxItem, ListboxItemDescription, ListboxItemIndicator, ListboxItemLabel, ListboxSection } from './MJSKFKQK.js';
import { PopperArrow } from './LMWVDFW6.js';
import { ButtonRoot } from './7OVKXYPU.js';
import { FormControlLabel } from './7ZHN3PYD.js';
import { FormControlErrorMessage } from './ICNSTULC.js';
import { FormControlDescription, useFormControlContext } from './YKGT7A57.js';
import { __export } from './5ZKAE4VZ.js';
import { createComponent, mergeProps, memo } from 'solid-js/web';
import { splitProps, createMemo } from 'solid-js';
import { mergeDefaultProps, mergeRefs, callHandler } from '@kobalte/utils';

// 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
});
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 createComponent(ComboboxBase, mergeProps({
    get value() {
      return value();
    },
    get defaultValue() {
      return defaultValue();
    },
    onChange,
    get selectionMode() {
      return local.multiple ? "multiple" : "single";
    }
  }, others));
}
function ComboboxTrigger(props) {
  const formControlContext = useFormControlContext();
  const context = useComboboxContext();
  const mergedProps = mergeDefaultProps({
    id: context.generateId("trigger")
  }, props);
  const [local, others] = splitProps(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 createComponent(ButtonRoot, mergeProps({
    ref(r$) {
      const _ref$ = mergeRefs(context.setTriggerRef, local.ref);
      typeof _ref$ === "function" && _ref$(r$);
    },
    get disabled() {
      return isDisabled();
    },
    tabIndex: -1,
    "aria-haspopup": "listbox",
    get ["aria-expanded"]() {
      return context.isOpen();
    },
    get ["aria-controls"]() {
      return memo(() => !!context.isOpen())() ? context.listboxId() : void 0;
    },
    get ["aria-label"]() {
      return context.triggerAriaLabel();
    },
    get ["aria-labelledby"]() {
      return ariaLabelledBy();
    },
    onPointerDown,
    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 { Combobox, ComboboxRoot, ComboboxTrigger, combobox_exports };