UNPKG

@ark-ui/solid

Version:

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

74 lines (69 loc) 2.65 kB
import { composeRefs } from './ROP6QZQ7.js'; import { splitRenderStrategyProps } from './GUFIKGZ6.js'; import { createSplitProps } from './ZMHI4GDJ.js'; import { ark } from './EPLBB4QN.js'; import { runIfFn } from './DT73WLR4.js'; import { createContext } from './THN5C4U6.js'; import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web'; import { useMachine, normalizeProps, mergeProps } from '@zag-js/solid'; import { createSignal, createMemo, createEffect, Show } from 'solid-js'; import * as presence from '@zag-js/presence'; // src/components/presence/split-presence-props.ts var splitPresenceProps = (props) => createSplitProps()(props, [ "immediate", "lazyMount", "onExitComplete", "present", "skipAnimationOnMount", "unmountOnExit" ]); 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); }); const setNode = (node) => { if (!node) return; service.send({ type: "NODE.SET", node }); }; return createMemo(() => ({ unmounted: !api().present && !wasEverPresent() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().present && wasEverPresent(), present: api().present, ref: 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 createComponent(Show, { get when() { return !api().unmounted; }, get children() { return createComponent(ark.div, mergeProps$1(mergedProps, { ref(r$) { var _ref$ = composeRefs(api().ref, props.ref); typeof _ref$ === "function" && _ref$(r$); }, "data-scope": "presence", "data-part": "root" })); } }); }; // src/components/presence/use-presence-context.ts var [PresenceProvider, usePresenceContext] = createContext({ hookName: "usePresenceContext", providerName: "<PresenceProvider />" }); export { Presence, PresenceProvider, splitPresenceProps, usePresence, usePresenceContext };