UNPKG

@ark-ui/solid

Version:

A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.

370 lines (339 loc) 12.3 kB
import { useFieldContext } from "./7HLG62OR.jsx"; import { PresenceProvider, splitPresenceProps, usePresence, usePresenceContext } from "./2P5Y3YCK.jsx"; import { composeRefs } from "./PT2CJE3O.jsx"; import { createSplitProps } from "./6WEDGJKQ.jsx"; import { ark } from "./UFYZ7HLU.jsx"; import { useEnvironmentContext } from "./CGW54HAQ.jsx"; import { useLocaleContext } from "./JFOWNFC7.jsx"; import { runIfFn } from "./KGOB2IMX.jsx"; import { createContext } from "./UZJJWJQM.jsx"; import { __export } from "./7IUG3E2V.jsx"; // src/components/select/select-clear-trigger.tsx import { mergeProps } from "@zag-js/solid"; // src/components/select/use-select-context.ts var [SelectProvider, useSelectContext] = createContext({ hookName: "useSelectContext", providerName: "<SelectProvider />" }); // src/components/select/select-clear-trigger.tsx var SelectClearTrigger = (props) => { const select2 = useSelectContext(); const mergedProps = mergeProps(() => select2().getClearTriggerProps(), props); return <ark.button {...mergedProps} />; }; // src/components/select/select-content.tsx import { mergeProps as mergeProps2 } from "@zag-js/solid"; import { Show } from "solid-js"; var SelectContent = (props) => { const select2 = useSelectContext(); const presenceApi = usePresenceContext(); const mergedProps = mergeProps2( () => select2().getContentProps(), () => presenceApi().presenceProps, props ); return <Show when={!presenceApi().unmounted}> <ark.div {...mergedProps} ref={composeRefs(presenceApi().ref, props.ref)} /> </Show>; }; // src/components/select/select-context.tsx var SelectContext = (props) => props.children(useSelectContext()); // src/components/select/select-control.tsx import { mergeProps as mergeProps3 } from "@zag-js/solid"; var SelectControl = (props) => { const select2 = useSelectContext(); const mergedProps = mergeProps3(() => select2().getControlProps(), props); return <ark.div {...mergedProps} />; }; // src/components/select/select-hidden-select.tsx import { mergeProps as mergeProps4 } from "@zag-js/solid"; import { Index, Show as Show2, createMemo } from "solid-js"; var SelectHiddenSelect = (props) => { const select2 = useSelectContext(); const mergedProps = mergeProps4(() => select2().getHiddenSelectProps(), props); const isValueEmpty = createMemo(() => select2().value.length === 0); const field = useFieldContext(); return <ark.select aria-describedby={field?.().ariaDescribedby} {...mergedProps}> <Show2 when={isValueEmpty()}> <option value="" /> </Show2> <Index each={select2().collection.items}> {(item) => <option value={select2().collection.getItemValue(item()) ?? ""} disabled={select2().collection.getItemDisabled(item())} > {select2().collection.stringifyItem(item())} </option>} </Index> </ark.select>; }; // src/components/select/select-indicator.tsx import { mergeProps as mergeProps5 } from "@zag-js/solid"; var SelectIndicator = (props) => { const select2 = useSelectContext(); const mergedProps = mergeProps5(() => select2().getIndicatorProps(), props); return <ark.div {...mergedProps} />; }; // src/components/select/select-item.tsx import { mergeProps as mergeProps6 } from "@zag-js/solid"; import { createMemo as createMemo2 } from "solid-js"; // src/components/select/use-select-item-context.ts var [SelectItemProvider, useSelectItemContext] = createContext({ hookName: "useSelectItemContext", providerName: "<SelectItemProvider />" }); // src/components/select/use-select-item-props-context.ts var [SelectItemPropsProvider, useSelectItemPropsContext] = createContext({ hookName: "useSelectItemPropsContext", providerName: "<SelectItemPropsProvider />" }); // src/components/select/select-item.tsx var SelectItem = (props) => { const [itemProps, localProps] = createSplitProps()(props, ["item", "persistFocus"]); const select2 = useSelectContext(); const mergedProps = mergeProps6(() => select2().getItemProps(itemProps), localProps); const itemState = createMemo2(() => select2().getItemState(itemProps)); return <SelectItemPropsProvider value={itemProps}> <SelectItemProvider value={itemState}> <ark.div {...mergedProps} /> </SelectItemProvider> </SelectItemPropsProvider>; }; // src/components/select/select-item-context.tsx var SelectItemContext = (props) => props.children(useSelectItemContext()); // src/components/select/select-item-group.tsx import { mergeProps as mergeProps7 } from "@zag-js/solid"; import { createUniqueId } from "solid-js"; // src/components/select/use-select-item-group-props-context.ts var [SelectItemGroupPropsProvider, useSelectItemGroupPropsContext] = createContext({ hookName: "useSelectItemGroupPropsContext", providerName: "<SelectItemGroupPropsProvider />" }); // src/components/select/select-item-group.tsx var SelectItemGroup = (props) => { const [_itemGroupProps, localProps] = createSplitProps()(props, ["id"]); const select2 = useSelectContext(); const itemGroupProps = mergeProps7({ id: createUniqueId() }, _itemGroupProps); const mergedProps = mergeProps7(() => select2().getItemGroupProps(itemGroupProps), localProps); return <SelectItemGroupPropsProvider value={itemGroupProps}> <ark.div {...mergedProps} /> </SelectItemGroupPropsProvider>; }; // src/components/select/select-item-group-label.tsx import { mergeProps as mergeProps8 } from "@zag-js/solid"; var SelectItemGroupLabel = (props) => { const select2 = useSelectContext(); const itemGroupProps = useSelectItemGroupPropsContext(); const mergedProps = mergeProps8(() => select2().getItemGroupLabelProps({ htmlFor: itemGroupProps.id }), props); return <ark.div {...mergedProps} />; }; // src/components/select/select-item-indicator.tsx import { mergeProps as mergeProps9 } from "@zag-js/solid"; var SelectItemIndicator = (props) => { const select2 = useSelectContext(); const itemProps = useSelectItemPropsContext(); const mergedProps = mergeProps9(() => select2().getItemIndicatorProps(itemProps), props); return <ark.div {...mergedProps} />; }; // src/components/select/select-item-text.tsx import { mergeProps as mergeProps10 } from "@zag-js/solid"; var SelectItemText = (props) => { const select2 = useSelectContext(); const itemProps = useSelectItemPropsContext(); const mergedProps = mergeProps10(() => select2().getItemTextProps(itemProps), props); return <ark.span {...mergedProps} />; }; // src/components/select/select-label.tsx import { mergeProps as mergeProps11 } from "@zag-js/solid"; var SelectLabel = (props) => { const select2 = useSelectContext(); const mergedProps = mergeProps11(() => select2().getLabelProps(), props); return <ark.label {...mergedProps} />; }; // src/components/select/select-list.tsx import { mergeProps as mergeProps12 } from "@zag-js/solid"; var SelectList = (props) => { const select2 = useSelectContext(); const mergedProps = mergeProps12(() => select2().getListProps(), props); return <ark.div {...mergedProps} />; }; // src/components/select/select-positioner.tsx import { mergeProps as mergeProps13 } from "@zag-js/solid"; import { Show as Show3 } from "solid-js"; var SelectPositioner = (props) => { const select2 = useSelectContext(); const presenceApi = usePresenceContext(); const mergedProps = mergeProps13(() => select2().getPositionerProps(), props); return <Show3 when={!presenceApi().unmounted}> <ark.div {...mergedProps} /> </Show3>; }; // src/components/select/select-root.tsx import { mergeProps as mergeProps14 } from "@zag-js/solid"; // src/components/select/use-select.ts import * as select from "@zag-js/select"; import { normalizeProps, useMachine } from "@zag-js/solid"; import { createMemo as createMemo3, createUniqueId as createUniqueId2 } from "solid-js"; var useSelect = (props) => { const id = createUniqueId2(); const locale = useLocaleContext(); const environment = useEnvironmentContext(); const field = useFieldContext(); const machineProps = createMemo3(() => ({ id, ids: { label: field?.().ids.label, hiddenSelect: field?.().ids.control }, disabled: field?.().disabled, readOnly: field?.().readOnly, invalid: field?.().invalid, required: field?.().required, dir: locale().dir, getRootNode: environment().getRootNode, ...runIfFn(props) })); const service = useMachine(select.machine, machineProps); return createMemo3(() => select.connect(service, normalizeProps)); }; // src/components/select/select-root.tsx var SelectRoot = (props) => { const [presenceProps, selectProps] = splitPresenceProps(props); const [useSelectProps, localProps] = createSplitProps()(selectProps, [ "closeOnSelect", "collection", "composite", "defaultHighlightedValue", "defaultOpen", "defaultValue", "deselectable", "disabled", "form", "highlightedValue", "id", "ids", "invalid", "loopFocus", "multiple", "name", "onFocusOutside", "onHighlightChange", "onInteractOutside", "onOpenChange", "onPointerDownOutside", "onSelect", "onValueChange", "open", "positioning", "readOnly", "required", "scrollToIndexFn", "value" ]); const select2 = useSelect(useSelectProps); const presenceApi = usePresence(mergeProps14(() => ({ present: select2().open }), presenceProps)); const mergedProps = mergeProps14(() => select2().getRootProps(), localProps); return <SelectProvider value={select2}> <PresenceProvider value={presenceApi}> <ark.div {...mergedProps} /> </PresenceProvider> </SelectProvider>; }; // src/components/select/select-root-provider.tsx import { mergeProps as mergeProps15 } from "@zag-js/solid"; var SelectRootProvider = (props) => { const [presenceProps, selectProps] = splitPresenceProps(props); const [{ value: select2 }, localProps] = createSplitProps()(selectProps, ["value"]); const presence = usePresence(mergeProps15(() => ({ present: select2().open }), presenceProps)); const mergedProps = mergeProps15(() => select2().getRootProps(), localProps); return <SelectProvider value={select2}> <PresenceProvider value={presence}> <ark.div {...mergedProps} /> </PresenceProvider> </SelectProvider>; }; // src/components/select/select-trigger.tsx import { mergeProps as mergeProps16 } from "@zag-js/solid"; var SelectTrigger = (props) => { const select2 = useSelectContext(); const mergedProps = mergeProps16(() => select2().getTriggerProps(), props); return <ark.button {...mergedProps} />; }; // src/components/select/select-value-text.tsx import { mergeProps as mergeProps17 } from "@zag-js/solid"; var SelectValueText = (props) => { const select2 = useSelectContext(); const mergedProps = mergeProps17(() => select2().getValueTextProps(), props); return <ark.span {...mergedProps}>{select2().valueAsString || props.placeholder}</ark.span>; }; // src/components/select/select.ts var select_exports = {}; __export(select_exports, { ClearTrigger: () => SelectClearTrigger, Content: () => SelectContent, Context: () => SelectContext, Control: () => SelectControl, HiddenSelect: () => SelectHiddenSelect, Indicator: () => SelectIndicator, Item: () => SelectItem, ItemContext: () => SelectItemContext, ItemGroup: () => SelectItemGroup, ItemGroupLabel: () => SelectItemGroupLabel, ItemIndicator: () => SelectItemIndicator, ItemText: () => SelectItemText, Label: () => SelectLabel, List: () => SelectList, Positioner: () => SelectPositioner, Root: () => SelectRoot, RootProvider: () => SelectRootProvider, Trigger: () => SelectTrigger, ValueText: () => SelectValueText }); export { useSelectContext, SelectClearTrigger, SelectContent, SelectContext, SelectControl, SelectHiddenSelect, SelectIndicator, useSelectItemContext, SelectItem, SelectItemContext, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectPositioner, useSelect, SelectRoot, SelectRootProvider, SelectTrigger, SelectValueText, select_exports };