@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
JSX
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
};