@ark-ui/solid
Version:
A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.
237 lines (217 loc) • 7.26 kB
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/popover/popover-anchor.tsx
import { mergeProps } from "@zag-js/solid";
// src/components/popover/use-popover-context.ts
var [PopoverProvider, usePopoverContext] = createContext({
hookName: "usePopoverContext",
providerName: "<PopoverProvider />"
});
// src/components/popover/popover-anchor.tsx
var PopoverAnchor = (props) => {
const api = usePopoverContext();
const mergedProps = mergeProps(() => api().getAnchorProps(), props);
return <ark.div {...mergedProps} />;
};
// src/components/popover/popover-arrow.tsx
import { mergeProps as mergeProps2 } from "@zag-js/solid";
var PopoverArrow = (props) => {
const popover2 = usePopoverContext();
const mergedProps = mergeProps2(() => popover2().getArrowProps(), props);
return <ark.div {...mergedProps} />;
};
// src/components/popover/popover-arrow-tip.tsx
import { mergeProps as mergeProps3 } from "@zag-js/solid";
var PopoverArrowTip = (props) => {
const popover2 = usePopoverContext();
const mergedProps = mergeProps3(() => popover2().getArrowTipProps(), props);
return <ark.div {...mergedProps} />;
};
// src/components/popover/popover-close-trigger.tsx
import { mergeProps as mergeProps4 } from "@zag-js/solid";
var PopoverCloseTrigger = (props) => {
const api = usePopoverContext();
const mergedProps = mergeProps4(() => api().getCloseTriggerProps(), props);
return <ark.button {...mergedProps} />;
};
// src/components/popover/popover-content.tsx
import { mergeProps as mergeProps5 } from "@zag-js/solid";
import { Show } from "solid-js";
var PopoverContent = (props) => {
const api = usePopoverContext();
const presenceApi = usePresenceContext();
const mergedProps = mergeProps5(
() => api().getContentProps(),
() => presenceApi().presenceProps,
props
);
return <Show when={!presenceApi().unmounted}>
<ark.div {...mergedProps} ref={composeRefs(presenceApi().ref, props.ref)} />
</Show>;
};
// src/components/popover/popover-context.tsx
var PopoverContext = (props) => props.children(usePopoverContext());
// src/components/popover/popover-description.tsx
import { mergeProps as mergeProps6 } from "@zag-js/solid";
var PopoverDescription = (props) => {
const api = usePopoverContext();
const mergedProps = mergeProps6(() => api().getDescriptionProps(), props);
return <ark.div {...mergedProps} />;
};
// src/components/popover/popover-indicator.tsx
import { mergeProps as mergeProps7 } from "@zag-js/solid";
var PopoverIndicator = (props) => {
const popover2 = usePopoverContext();
const mergedProps = mergeProps7(() => popover2().getIndicatorProps(), props);
return <ark.div {...mergedProps} />;
};
// src/components/popover/popover-positioner.tsx
import { mergeProps as mergeProps8 } from "@zag-js/solid";
import { Show as Show2 } from "solid-js";
var PopoverPositioner = (props) => {
const api = usePopoverContext();
const presenceApi = usePresenceContext();
const mergedProps = mergeProps8(() => api().getPositionerProps(), props);
return <Show2 when={!presenceApi().unmounted}>
<ark.div {...mergedProps} />
</Show2>;
};
// src/components/popover/popover-root.tsx
import { mergeProps as mergeProps9 } from "@zag-js/solid";
// src/components/popover/use-popover.ts
import * as popover from "@zag-js/popover";
import { normalizeProps, useMachine } from "@zag-js/solid";
import { createMemo, createUniqueId } from "solid-js";
var usePopover = (props) => {
const id = createUniqueId();
const locale = useLocaleContext();
const environment = useEnvironmentContext();
const machineProps = createMemo(() => ({
id,
dir: locale().dir,
getRootNode: environment().getRootNode,
...runIfFn(props)
}));
const service = useMachine(popover.machine, machineProps);
return createMemo(() => popover.connect(service, normalizeProps));
};
// src/components/popover/popover-root.tsx
var PopoverRoot = (props) => {
const [presenceProps, popoverProps] = splitPresenceProps(props);
const [usePopoverProps, localProps] = createSplitProps()(popoverProps, [
"autoFocus",
"closeOnEscape",
"closeOnInteractOutside",
"defaultOpen",
"id",
"ids",
"initialFocusEl",
"modal",
"onEscapeKeyDown",
"onFocusOutside",
"onInteractOutside",
"onOpenChange",
"onPointerDownOutside",
"onRequestDismiss",
"open",
"persistentElements",
"portalled",
"positioning"
]);
const api = usePopover(usePopoverProps);
const apiPresence = usePresence(mergeProps9(presenceProps, () => ({ present: api().open })));
return <PopoverProvider value={api}>
<PresenceProvider value={apiPresence}>{localProps.children}</PresenceProvider>
</PopoverProvider>;
};
// src/components/popover/popover-root-provider.tsx
import { mergeProps as mergeProps10 } from "@zag-js/solid";
var PopoverRootProvider = (props) => {
const [presenceProps, popoverProps] = splitPresenceProps(props);
const presence = usePresence(mergeProps10(presenceProps, () => ({ present: popoverProps.value().open })));
return <PopoverProvider value={popoverProps.value}>
<PresenceProvider value={presence}>{popoverProps.children}</PresenceProvider>
</PopoverProvider>;
};
// src/components/popover/popover-title.tsx
import { mergeProps as mergeProps11 } from "@zag-js/solid";
var PopoverTitle = (props) => {
const api = usePopoverContext();
const mergedProps = mergeProps11(() => api().getTitleProps(), props);
return <ark.div {...mergedProps} />;
};
// src/components/popover/popover-trigger.tsx
import { mergeProps as mergeProps12 } from "@zag-js/solid";
var PopoverTrigger = (props) => {
const api = usePopoverContext();
const presenceApi = usePresenceContext();
const mergedProps = mergeProps12(
() => api().getTriggerProps(),
() => ({ "aria-controls": presenceApi().unmounted && null }),
props
);
return <ark.button {...mergedProps} />;
};
// src/components/popover/popover.ts
var popover_exports = {};
__export(popover_exports, {
Anchor: () => PopoverAnchor,
Arrow: () => PopoverArrow,
ArrowTip: () => PopoverArrowTip,
CloseTrigger: () => PopoverCloseTrigger,
Content: () => PopoverContent,
Context: () => PopoverContext,
Description: () => PopoverDescription,
Indicator: () => PopoverIndicator,
Positioner: () => PopoverPositioner,
Root: () => PopoverRoot,
RootProvider: () => PopoverRootProvider,
Title: () => PopoverTitle,
Trigger: () => PopoverTrigger
});
export {
usePopoverContext,
PopoverAnchor,
PopoverArrow,
PopoverArrowTip,
PopoverCloseTrigger,
PopoverContent,
PopoverContext,
PopoverDescription,
PopoverIndicator,
PopoverPositioner,
usePopover,
PopoverRoot,
PopoverRootProvider,
PopoverTitle,
PopoverTrigger,
popover_exports
};