@ark-ui/solid
Version:
A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.
81 lines (74 loc) • 2.41 kB
JSX
import {
composeRefs
} from "./PT2CJE3O.jsx";
import {
splitRenderStrategyProps
} from "./NEBB7COJ.jsx";
import {
createSplitProps
} from "./6WEDGJKQ.jsx";
import {
ark
} from "./UFYZ7HLU.jsx";
import {
createContext
} from "./TVCIHLER.jsx";
import {
runIfFn
} from "./KGOB2IMX.jsx";
// src/components/presence/presence.tsx
import { mergeProps } from "@zag-js/solid";
import { Show } from "solid-js";
// src/components/presence/split-presence-props.ts
var splitPresenceProps = (props) => createSplitProps()(props, [
"immediate",
"lazyMount",
"onExitComplete",
"present",
"skipAnimationOnMount",
"unmountOnExit"
]);
// src/components/presence/use-presence.ts
import * as presence from "@zag-js/presence";
import { normalizeProps, useMachine } from "@zag-js/solid";
import { createEffect, createMemo, createSignal } from "solid-js";
var usePresence = (props) => {
const [renderStrategyProps, localProps] = splitRenderStrategyProps(runIfFn(props));
const [wasEverPresent, setWasEverPresent] = createSignal(false);
const service = useMachine(presence.machine, props);
const api = createMemo(() => presence.connect(service, normalizeProps));
createEffect(() => {
const present = api().present;
if (present) setWasEverPresent(true);
});
return createMemo(() => ({
unmounted: !api().present && !wasEverPresent() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().present && wasEverPresent(),
present: api().present,
ref: api().setNode,
presenceProps: {
hidden: !api().present,
"data-state": api().skip && localProps.skipAnimationOnMount ? void 0 : localProps.present ? "open" : "closed"
}
}));
};
// src/components/presence/presence.tsx
var Presence = (props) => {
const [presenceProps, localProps] = splitPresenceProps(props);
const api = usePresence(presenceProps);
const mergedProps = mergeProps(() => api().presenceProps, localProps);
return <Show when={!api().unmounted}>
<ark.div {...mergedProps} ref={composeRefs(api().ref, props.ref)} data-scope="presence" data-part="root" />
</Show>;
};
// src/components/presence/use-presence-context.ts
var [PresenceProvider, usePresenceContext] = createContext({
hookName: "usePresenceContext",
providerName: "<PresenceProvider />"
});
export {
splitPresenceProps,
usePresence,
Presence,
PresenceProvider,
usePresenceContext
};