@ark-ui/solid
Version:
A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.
259 lines (246 loc) • 10.3 kB
JavaScript
import { splitPresenceProps, usePresence, PresenceProvider, usePresenceContext } from './SIT3D7TL.js';
import { useFieldContext } from './VJ2ZFW6U.js';
import { composeRefs } from './ROP6QZQ7.js';
import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { useEnvironmentContext } from './YO2MCGXO.js';
import { useLocaleContext } from './OKZ64GSY.js';
import { createContext } from './TROPIN4C.js';
import { runIfFn } from './DT73WLR4.js';
import { __export } from './ESLJRKWD.js';
import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import { Show, createUniqueId, createMemo } from 'solid-js';
import * as combobox from '@zag-js/combobox';
export { anatomy } from '@zag-js/combobox';
// src/components/combobox/use-combobox-context.ts
var [ComboboxProvider, useComboboxContext] = createContext({
hookName: "useComboboxContext",
providerName: "<ComboboxProvider />"
});
// src/components/combobox/combobox-clear-trigger.tsx
var ComboboxClearTrigger = (props) => {
const combobox2 = useComboboxContext();
const mergedProps = mergeProps(() => combobox2().getClearTriggerProps(), props);
return createComponent(ark.button, mergedProps);
};
var ComboboxContent = (props) => {
const api = useComboboxContext();
const presenceApi = usePresenceContext();
const mergedProps = mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
return createComponent(Show, {
get when() {
return !presenceApi().unmounted;
},
get children() {
return createComponent(ark.div, mergeProps$1(mergedProps, {
ref(r$) {
var _ref$ = composeRefs(presenceApi().ref, props.ref);
typeof _ref$ === "function" && _ref$(r$);
}
}));
}
});
};
// src/components/combobox/combobox-context.tsx
var ComboboxContext = (props) => props.children(useComboboxContext());
var ComboboxControl = (props) => {
const combobox2 = useComboboxContext();
const mergedProps = mergeProps(() => combobox2().getControlProps(), props);
return createComponent(ark.div, mergedProps);
};
var ComboboxInput = (props) => {
const combobox2 = useComboboxContext();
const mergedProps = mergeProps(() => combobox2().getInputProps(), props);
const field = useFieldContext();
return createComponent(ark.input, mergeProps$1({
get ["aria-describedby"]() {
return field?.().ariaDescribedby;
}
}, mergedProps));
};
// src/components/combobox/use-combobox-item-context.ts
var [ComboboxItemProvider, useComboboxItemContext] = createContext({
hookName: "useComboboxItemContext",
providerName: "<ComboboxItemProvider />"
});
// src/components/combobox/use-combobox-item-props-context.ts
var [ComboboxItemPropsProvider, useComboboxItemPropsContext] = createContext({
hookName: "useComboboxItemPropsContext",
providerName: "<ComboboxItemPropsProvider />"
});
// src/components/combobox/combobox-item.tsx
var ComboboxItem = (props) => {
const [itemProps, localProps] = createSplitProps()(props, ["item", "persistFocus"]);
const api = useComboboxContext();
const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
const itemState = createMemo(() => api().getItemState(itemProps));
return createComponent(ComboboxItemPropsProvider, {
value: itemProps,
get children() {
return createComponent(ComboboxItemProvider, {
value: itemState,
get children() {
return createComponent(ark.div, mergedProps);
}
});
}
});
};
// src/components/combobox/combobox-item-context.tsx
var ComboboxItemContext = (props) => props.children(useComboboxItemContext());
// src/components/combobox/use-combobox-item-group-props-context.ts
var [ComboboxItemGroupPropsProvider, useComboboxItemGroupPropsContext] = createContext({
hookName: "useComboboxItemGroupPropsContext",
providerName: "<ComboboxItemGroupPropsProvider />"
});
// src/components/combobox/combobox-item-group.tsx
var ComboboxItemGroup = (props) => {
const [_itemGroupProps, localProps] = createSplitProps()(props, ["id"]);
const combobox2 = useComboboxContext();
const itemGroupProps = mergeProps({
id: createUniqueId()
}, _itemGroupProps);
const mergedProps = mergeProps(() => combobox2().getItemGroupProps(itemGroupProps), localProps);
return createComponent(ComboboxItemGroupPropsProvider, {
value: itemGroupProps,
get children() {
return createComponent(ark.div, mergedProps);
}
});
};
var ComboboxItemGroupLabel = (props) => {
const combobox2 = useComboboxContext();
const itemGroupProps = useComboboxItemGroupPropsContext();
const mergedProps = mergeProps(() => combobox2().getItemGroupLabelProps({
htmlFor: itemGroupProps.id
}), props);
return createComponent(ark.div, mergedProps);
};
var ComboboxItemIndicator = (props) => {
const combobox2 = useComboboxContext();
const itemProps = useComboboxItemPropsContext();
const mergedProps = mergeProps(() => combobox2().getItemIndicatorProps(itemProps), props);
return createComponent(ark.div, mergedProps);
};
var ComboboxItemText = (props) => {
const api = useComboboxContext();
const itemProps = useComboboxItemPropsContext();
const mergedProps = mergeProps(() => api().getItemTextProps(itemProps), props);
return createComponent(ark.span, mergedProps);
};
var ComboboxLabel = (props) => {
const combobox2 = useComboboxContext();
const mergedProps = mergeProps(() => combobox2().getLabelProps(), props);
return createComponent(ark.label, mergedProps);
};
var ComboboxList = (props) => {
const combobox2 = useComboboxContext();
const mergedProps = mergeProps(() => combobox2().getListProps(), props);
return createComponent(ark.div, mergedProps);
};
var ComboboxPositioner = (props) => {
const api = useComboboxContext();
const presenceApi = usePresenceContext();
const mergedProps = mergeProps(() => api().getPositionerProps(), props);
return createComponent(Show, {
get when() {
return !presenceApi().unmounted;
},
get children() {
return createComponent(ark.div, mergedProps);
}
});
};
var useCombobox = (props) => {
const locale = useLocaleContext();
const environment = useEnvironmentContext();
const id = createUniqueId();
const field = useFieldContext();
const machineProps = createMemo(() => ({
id,
ids: {
label: field?.().ids.label,
input: field?.().ids.control
},
disabled: field?.().disabled,
readOnly: field?.().readOnly,
required: field?.().required,
invalid: field?.().invalid,
dir: locale().dir,
getRootNode: environment().getRootNode,
...runIfFn(props)
}));
const service = useMachine(combobox.machine, machineProps);
return createMemo(() => combobox.connect(service, normalizeProps));
};
// src/components/combobox/combobox-root.tsx
var ComboboxRoot = (props) => {
const [presenceProps, comboboxProps] = splitPresenceProps(props);
const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, ["allowCustomValue", "autoFocus", "closeOnSelect", "collection", "composite", "defaultHighlightedValue", "defaultInputValue", "defaultOpen", "defaultValue", "disabled", "disableLayer", "form", "highlightedValue", "id", "ids", "inputBehavior", "inputValue", "invalid", "loopFocus", "multiple", "name", "navigate", "onFocusOutside", "onHighlightChange", "onInputValueChange", "onInteractOutside", "onOpenChange", "onPointerDownOutside", "onValueChange", "onSelect", "open", "openOnChange", "openOnClick", "openOnKeyPress", "placeholder", "positioning", "readOnly", "required", "scrollToIndexFn", "selectionBehavior", "translations", "value"]);
const api = useCombobox(useComboboxProps);
const apiPresence = usePresence(mergeProps(presenceProps, () => ({
present: api().open
})));
const mergedProps = mergeProps(() => api().getRootProps(), localProps);
return createComponent(ComboboxProvider, {
value: api,
get children() {
return createComponent(PresenceProvider, {
value: apiPresence,
get children() {
return createComponent(ark.div, mergedProps);
}
});
}
});
};
var ComboboxRootProvider = (props) => {
const [presenceProps, comboboxProps] = splitPresenceProps(props);
const [{
value: combobox2
}, localProps] = createSplitProps()(comboboxProps, ["value"]);
const apiPresence = usePresence(mergeProps(presenceProps, () => ({
present: combobox2().open
})));
const mergedProps = mergeProps(() => combobox2().getRootProps(), localProps);
return createComponent(ComboboxProvider, {
value: combobox2,
get children() {
return createComponent(PresenceProvider, {
value: apiPresence,
get children() {
return createComponent(ark.div, mergedProps);
}
});
}
});
};
var ComboboxTrigger = (props) => {
const [triggerProps, localProps] = createSplitProps()(props, ["focusable"]);
const combobox2 = useComboboxContext();
const mergedProps = mergeProps(() => combobox2().getTriggerProps(triggerProps), localProps);
return createComponent(ark.button, mergedProps);
};
// src/components/combobox/combobox.ts
var combobox_exports = {};
__export(combobox_exports, {
ClearTrigger: () => ComboboxClearTrigger,
Content: () => ComboboxContent,
Context: () => ComboboxContext,
Control: () => ComboboxControl,
Input: () => ComboboxInput,
Item: () => ComboboxItem,
ItemContext: () => ComboboxItemContext,
ItemGroup: () => ComboboxItemGroup,
ItemGroupLabel: () => ComboboxItemGroupLabel,
ItemIndicator: () => ComboboxItemIndicator,
ItemText: () => ComboboxItemText,
Label: () => ComboboxLabel,
List: () => ComboboxList,
Positioner: () => ComboboxPositioner,
Root: () => ComboboxRoot,
RootProvider: () => ComboboxRootProvider,
Trigger: () => ComboboxTrigger
});
export { ComboboxClearTrigger, ComboboxContent, ComboboxContext, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemContext, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxList, ComboboxPositioner, ComboboxRoot, ComboboxRootProvider, ComboboxTrigger, combobox_exports, useCombobox, useComboboxContext, useComboboxItemContext };