UNPKG

@ark-ui/solid

Version:

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

174 lines (160 loc) 5.66 kB
import { createSplitProps } from "./6WEDGJKQ.jsx"; import { ark } from "./UFYZ7HLU.jsx"; import { useEnvironmentContext } from "./E2L62MKC.jsx"; import { createContext } from "./TVCIHLER.jsx"; import { runIfFn } from "./KGOB2IMX.jsx"; import { __export } from "./7IUG3E2V.jsx"; // src/components/fieldset/use-fieldset-context.ts var [FieldsetProvider, useFieldsetContext] = createContext({ hookName: "useFieldsetContext", providerName: "<FieldsetProvider />", strict: false }); // src/components/fieldset/fieldset-context.tsx var FieldsetContext = (props) => props.children(useFieldsetContext()); // src/components/fieldset/fieldset-error-text.tsx import { mergeProps } from "@zag-js/solid"; import { Show } from "solid-js"; var FieldsetErrorText = (props) => { const fieldset = useFieldsetContext(); const mergedProps = mergeProps(() => fieldset().getErrorTextProps(), props); return <Show when={fieldset().invalid}> <ark.span {...mergedProps} /> </Show>; }; // src/components/fieldset/fieldset-helper-text.tsx import { mergeProps as mergeProps2 } from "@zag-js/solid"; var FieldsetHelperText = (props) => { const fieldset = useFieldsetContext(); const mergedProps = mergeProps2(() => fieldset().getHelperTextProps(), props); return <ark.span {...mergedProps} />; }; // src/components/fieldset/fieldset-legend.tsx import { mergeProps as mergeProps3 } from "@zag-js/solid"; var FieldsetLegend = (props) => { const fieldset = useFieldsetContext(); const mergedProps = mergeProps3(() => fieldset().getLegendProps(), props); return <ark.legend {...mergedProps} />; }; // src/components/fieldset/fieldset-root.tsx import { mergeProps as mergeProps5 } from "@zag-js/solid"; // src/components/fieldset/use-fieldset.ts import { dataAttr } from "@zag-js/dom-query"; import { createEffect, createMemo, createSignal, createUniqueId, mergeProps as mergeProps4, onCleanup } from "solid-js"; // src/components/fieldset/fieldset.anatomy.ts import { createAnatomy } from "@zag-js/anatomy"; var fieldsetAnatomy = createAnatomy("fieldset").parts("root", "errorText", "helperText", "legend"); var parts = fieldsetAnatomy.build(); // src/components/fieldset/use-fieldset.ts var useFieldset = (props) => { const env = useEnvironmentContext(); const mergedProps = mergeProps4({ disabled: false, invalid: false }, runIfFn(props)); let rootRef; const id = mergedProps.id ?? createUniqueId(); const errorTextId = `fieldset::${id}::error-text`; const helperTextId = `fieldset::${id}::helper-text`; const [hasErrorText, setHasErrorText] = createSignal(false); const [hasHelperText, setHasHelperText] = createSignal(false); createEffect(() => { const rootNode = rootRef; if (!rootNode) return; const checkTextElements = () => { const docOrShadowRoot = env().getRootNode(); setHasErrorText(!!docOrShadowRoot.getElementById(errorTextId)); setHasHelperText(!!docOrShadowRoot.getElementById(helperTextId)); }; checkTextElements(); const win = env().getWindow(); const observer = new win.MutationObserver(checkTextElements); observer.observe(rootNode, { childList: true, subtree: true }); onCleanup(() => observer.disconnect()); }); const labelIds = []; if (hasErrorText() && mergedProps.invalid) labelIds.push(errorTextId); if (hasHelperText()) labelIds.push(helperTextId); const getRootProps = () => ({ ...parts.root.attrs, disabled: mergedProps.disabled, "data-disabled": dataAttr(mergedProps.disabled), "data-invalid": dataAttr(mergedProps.invalid), "aria-describedby": labelIds.join(" ") || void 0 }); const getLegendProps = () => ({ ...parts.legend.attrs, "data-disabled": dataAttr(mergedProps.disabled), "data-invalid": dataAttr(mergedProps.invalid) }); const getHelperTextProps = () => ({ id: helperTextId, ...parts.helperText.attrs }); const getErrorTextProps = () => ({ id: errorTextId, ...parts.errorText.attrs, "aria-live": "polite" }); return createMemo(() => ({ refs: { rootRef }, disabled: mergedProps.disabled, invalid: mergedProps.invalid, getRootProps, getLegendProps, getHelperTextProps, getErrorTextProps })); }; // src/components/fieldset/fieldset-root.tsx var FieldsetRoot = (props) => { const [useFieldsetProps, localProps] = createSplitProps()(props, ["id", "disabled", "invalid"]); const fieldset = useFieldset(useFieldsetProps); const mergedProps = mergeProps5(() => fieldset().getRootProps(), localProps); return <FieldsetProvider value={fieldset}> <ark.fieldset {...mergedProps} /> </FieldsetProvider>; }; FieldsetRoot.displayName = "FieldsetRoot"; // src/components/fieldset/fieldset-root-provider.tsx import { mergeProps as mergeProps6 } from "@zag-js/solid"; var FieldsetRootProvider = (props) => { const [{ value: fieldset }, localProps] = createSplitProps()(props, ["value"]); const mergedProps = mergeProps6(() => fieldset().getRootProps(), localProps); return <FieldsetProvider value={fieldset}> <ark.fieldset {...mergedProps} /> </FieldsetProvider>; }; // src/components/fieldset/fieldset.tsx var fieldset_exports = {}; __export(fieldset_exports, { Context: () => FieldsetContext, ErrorText: () => FieldsetErrorText, HelperText: () => FieldsetHelperText, Legend: () => FieldsetLegend, Root: () => FieldsetRoot, RootProvider: () => FieldsetRootProvider }); export { useFieldsetContext, FieldsetContext, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, fieldsetAnatomy, useFieldset, FieldsetRoot, FieldsetRootProvider, fieldset_exports };