@ark-ui/solid 0.10.1 → 0.11.0

package/popover/popover-content.cjs

@@ -5,12 +5,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
+const index = require('../presence/index.cjs');
 const popoverContext = require('./popover-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const PopoverContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = popoverContext.usePopoverContext();
-  const contentProps = solid.mergeProps(() => api().contentProps, props);
-  return web.createComponent(factory.ark.div, contentProps);
+  const mergedProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  }));
 };
 
 exports.PopoverContent = PopoverContent;

package/popover/popover-content.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
-export type PopoverContentProps = HTMLArkProps<'div'>;
+import { type PresenceProps } from '../presence';
+export type PopoverContentProps = HTMLArkProps<'div'> & PresenceProps;
 export declare const PopoverContent: (props: PopoverContentProps) => JSX.Element;

package/popover/popover-content.mjs

@@ -1,12 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { usePopoverContext } from './popover-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const PopoverContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = usePopoverContext();
-  const contentProps = mergeProps(() => api().contentProps, props);
-  return createComponent(ark.div, contentProps);
+  const mergedProps = mergeProps(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
 };
 
 export { PopoverContent };

package/presence/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const presence = require('./presence.cjs');
+const splitPresenceProps = require('./split-presence-props.cjs');
+
+const Presence = Object.assign(presence.Presence, {
+  Root: presence.Presence
+});
+
+exports.splitPresenceProps = splitPresenceProps.splitPresenceProps;
+exports.Presence = Presence;

package/presence/index.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'solid-js';
+import { type PresenceProps } from './presence';
+import { splitPresenceProps } from './split-presence-props';
+declare const Presence: ((props: PresenceProps) => JSX.Element) & {
+    Root: (props: PresenceProps) => JSX.Element;
+};
+export { Presence, splitPresenceProps };
+export type { PresenceProps };

package/presence/index.mjs

@@ -0,0 +1,8 @@
+import { Presence as Presence$1 } from './presence.mjs';
+export { splitPresenceProps } from './split-presence-props.mjs';
+
+const Presence = Object.assign(Presence$1, {
+  Root: Presence$1
+});
+
+export { Presence };

package/presence/presence.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solidJs = require('solid-js');
+const createSplitProps = require('../create-split-props.cjs');
+const usePresence = require('./use-presence.cjs');
+
+const Presence = props => {
+  const [presenceProps, localProps] = createSplitProps.createSplitProps()(props, ['onExitComplete', 'present']);
+  const api = usePresence.usePresence(presenceProps);
+  const [wasEverPresent, setWasEverPresent] = solidJs.createSignal(false);
+  const getChildren = solidJs.children(() => props.children);
+  solidJs.createEffect(() => {
+    const isPresent = api().isPresent;
+    if (isPresent) setWasEverPresent(true);
+    const children = getChildren();
+    if (children instanceof HTMLElement) {
+      api().setNode(children);
+      web.spread(children, {
+        ['data-state']: presenceProps.present ? 'open' : 'closed',
+        hidden: !api().isPresent
+      });
+    }
+  });
+  return web.memo((() => {
+    const _c$ = web.memo(() => !!(!api().isPresent && !wasEverPresent() && localProps.lazyMount || localProps.unmountOnExit && !api().isPresent && wasEverPresent()));
+    return () => _c$() ? null : getChildren();
+  })());
+};
+
+exports.Presence = Presence;

package/presence/presence.d.ts

@@ -0,0 +1,17 @@
+import { JSX, type JSXElement } from 'solid-js';
+import { type UsePresenceProps } from './use-presence';
+export type PresenceProps = UsePresenceProps & {
+    /**
+     * Whether to enable lazy mounting. Defaults to `false`.
+     */
+    lazyMount?: boolean;
+    /**
+     * Whether to unmount on exit. Defaults to `false`.
+     */
+    unmountOnExit?: boolean;
+    /**
+     * The children to render.
+     */
+    children?: JSXElement;
+};
+export declare const Presence: (props: PresenceProps) => JSX.Element;

package/presence/presence.mjs

@@ -0,0 +1,29 @@
+import { spread, memo } from 'solid-js/web';
+import { createSignal, children, createEffect } from 'solid-js';
+import { createSplitProps } from '../create-split-props.mjs';
+import { usePresence } from './use-presence.mjs';
+
+const Presence = props => {
+  const [presenceProps, localProps] = createSplitProps()(props, ['onExitComplete', 'present']);
+  const api = usePresence(presenceProps);
+  const [wasEverPresent, setWasEverPresent] = createSignal(false);
+  const getChildren = children(() => props.children);
+  createEffect(() => {
+    const isPresent = api().isPresent;
+    if (isPresent) setWasEverPresent(true);
+    const children = getChildren();
+    if (children instanceof HTMLElement) {
+      api().setNode(children);
+      spread(children, {
+        ['data-state']: presenceProps.present ? 'open' : 'closed',
+        hidden: !api().isPresent
+      });
+    }
+  });
+  return memo((() => {
+    const _c$ = memo(() => !!(!api().isPresent && !wasEverPresent() && localProps.lazyMount || localProps.unmountOnExit && !api().isPresent && wasEverPresent()));
+    return () => _c$() ? null : getChildren();
+  })());
+};
+
+export { Presence };

package/presence/presence.stories.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+import { Presence } from './presence';
+type PresenceType = typeof Presence;
+declare const meta: Meta<PresenceType>;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const LazyMount: () => JSX.Element;
+export declare const UnmountOnExit: () => JSX.Element;
+export declare const LazyMountAndUnmountOnExit: () => JSX.Element;

package/presence/presence.test.d.ts

@@ -0,0 +1 @@
+export {};

package/presence/split-presence-props.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createSplitProps = require('../create-split-props.cjs');
+
+function splitPresenceProps(props) {
+  return createSplitProps.createSplitProps()(props, [
+    "lazyMount",
+    "onExitComplete",
+    "present",
+    "unmountOnExit"
+  ]);
+}
+
+exports.splitPresenceProps = splitPresenceProps;

package/presence/split-presence-props.d.ts

@@ -0,0 +1,2 @@
+import type { PresenceProps } from './presence';
+export declare function splitPresenceProps<T>(props: T & Omit<PresenceProps, 'children'>): [Pick<T & Omit<PresenceProps, "children">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">, Omit<T & Omit<PresenceProps, "children">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">];

package/presence/split-presence-props.mjs

@@ -0,0 +1,12 @@
+import { createSplitProps } from '../create-split-props.mjs';
+
+function splitPresenceProps(props) {
+  return createSplitProps()(props, [
+    "lazyMount",
+    "onExitComplete",
+    "present",
+    "unmountOnExit"
+  ]);
+}
+
+export { splitPresenceProps };

package/presence/use-presence.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const presence = require('@zag-js/presence');
+const solid = require('@zag-js/solid');
+const solidJs = require('solid-js');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const presence__namespace = /*#__PURE__*/_interopNamespaceDefault(presence);
+
+const usePresence = (props) => {
+  const [state, send] = solid.useMachine(presence__namespace.machine(props), {
+    context: props
+  });
+  return solidJs.createMemo(() => presence__namespace.connect(state, send, solid.normalizeProps));
+};
+
+exports.usePresence = usePresence;

package/presence/use-presence.d.ts

@@ -0,0 +1,5 @@
+import { Accessor } from 'solid-js';
+import * as presence from '@zag-js/presence';
+import type { Optional } from '../types';
+export type UsePresenceProps = Optional<presence.Context, 'present'>;
+export declare const usePresence: (props: UsePresenceProps) => Accessor<presence.Api>;

package/presence/use-presence.mjs

@@ -0,0 +1,12 @@
+import * as presence from '@zag-js/presence';
+import { useMachine, normalizeProps } from '@zag-js/solid';
+import { createMemo } from 'solid-js';
+
+const usePresence = (props) => {
+  const [state, send] = useMachine(presence.machine(props), {
+    context: props
+  });
+  return createMemo(() => presence.connect(state, send, normalizeProps));
+};
+
+export { usePresence };

package/select/select-content.cjs

@@ -5,12 +5,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
+const index = require('../presence/index.cjs');
 const selectContext = require('./select-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const SelectContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = selectContext.useSelectContext();
-  const contentProps = solid.mergeProps(() => api().contentProps, props);
-  return web.createComponent(factory.ark.div, contentProps);
+  const mergedProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  }));
 };
 
 exports.SelectContent = SelectContent;

package/select/select-content.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
-export type SelectContentProps = HTMLArkProps<'div'>;
+import { type PresenceProps } from '../presence';
+export type SelectContentProps = HTMLArkProps<'div'> & PresenceProps;
 export declare const SelectContent: (props: SelectContentProps) => JSX.Element;

package/select/select-content.mjs

@@ -1,12 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useSelectContext } from './select-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const SelectContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useSelectContext();
-  const contentProps = mergeProps(() => api().contentProps, props);
-  return createComponent(ark.div, contentProps);
+  const mergedProps = mergeProps(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
 };
 
 export { SelectContent };

package/tabs/tab-content.cjs

@@ -6,13 +6,21 @@ const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
+const tabPresence = require('./tab-presence.cjs');
 const tabsContext = require('./tabs-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const TabContent = props => {
-  const [tabParams, restProps] = createSplitProps.createSplitProps()(props, ['value']);
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+  const [getContentProps, restProps] = createSplitProps.createSplitProps()(localProps, ['value']);
   const api = tabsContext.useTabsContext();
-  const contentProps = solid.mergeProps(() => api().getContentProps(tabParams), restProps);
-  return web.createComponent(factory.ark.div, contentProps);
+  const contentProps = solid.mergeProps(() => api().getContentProps(getContentProps), restProps);
+  return web.createComponent(tabPresence.TabPresence, web.mergeProps(presenceProps, getContentProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, contentProps);
+    }
+  }));
 };
 
 exports.TabContent = TabContent;

package/tabs/tab-content.d.ts

@@ -1,8 +1,7 @@
 import { JSX } from 'solid-js';
-import { type connect } from '@zag-js/tabs';
+import { type ContentProps } from '@zag-js/tabs';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-type TabContentParams = Parameters<ReturnType<typeof connect>['getContentProps']>[0];
-export type TabContentProps = Assign<HTMLArkProps<'div'>, TabContentParams>;
+import { type TabPresenceProps } from './tab-presence';
+export type TabContentProps = Assign<HTMLArkProps<'div'>, ContentProps> & TabPresenceProps;
 export declare const TabContent: (props: TabContentProps) => JSX.Element;
-export {};

package/tabs/tab-content.mjs

@@ -1,14 +1,22 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
+import { TabPresence } from './tab-presence.mjs';
 import { useTabsContext } from './tabs-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const TabContent = props => {
-  const [tabParams, restProps] = createSplitProps()(props, ['value']);
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const [getContentProps, restProps] = createSplitProps()(localProps, ['value']);
   const api = useTabsContext();
-  const contentProps = mergeProps(() => api().getContentProps(tabParams), restProps);
-  return createComponent(ark.div, contentProps);
+  const contentProps = mergeProps(() => api().getContentProps(getContentProps), restProps);
+  return createComponent(TabPresence, mergeProps$1(presenceProps, getContentProps, {
+    get children() {
+      return createComponent(ark.div, contentProps);
+    }
+  }));
 };
 
 export { TabContent };

package/tabs/tab-presence.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const index = require('../presence/index.cjs');
+const tabsContext = require('./tabs-context.cjs');
+
+const TabPresence = props => {
+  const api = tabsContext.useTabsContext();
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api().value === props.value;
+    }
+  }, props));
+};
+
+exports.TabPresence = TabPresence;

package/tabs/tab-presence.d.ts

@@ -0,0 +1,5 @@
+import { JSX } from 'solid-js';
+import type { ContentProps } from '@zag-js/tabs';
+import { type PresenceProps } from '../presence';
+export type TabPresenceProps = PresenceProps & ContentProps;
+export declare const TabPresence: (props: TabPresenceProps) => JSX.Element;

package/tabs/tab-presence.mjs

@@ -0,0 +1,14 @@
+import { createComponent, mergeProps } from 'solid-js/web';
+import { Presence } from '../presence/index.mjs';
+import { useTabsContext } from './tabs-context.mjs';
+
+const TabPresence = props => {
+  const api = useTabsContext();
+  return createComponent(Presence, mergeProps({
+    get present() {
+      return api().value === props.value;
+    }
+  }, props));
+};
+
+export { TabPresence };

package/tabs/tabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/tags-input/index.d.ts

@@ -1,4 +1,4 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLArkProps } from '..';
 import { Assign } from '../types';
 import { JSX } from 'solid-js';
 import { Tag, type TagProps } from './tag';

package/tooltip/tooltip-content.cjs

@@ -5,12 +5,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
+const index = require('../presence/index.cjs');
 const tooltipContext = require('./tooltip-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const TooltipContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = tooltipContext.useTooltipContext();
-  const contentProps = solid.mergeProps(() => api().contentProps, props);
-  return web.createComponent(factory.ark.div, contentProps);
+  const contentProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, contentProps);
+    }
+  }));
 };
 
 exports.TooltipContent = TooltipContent;

package/tooltip/tooltip-content.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
-export type TooltipContentProps = HTMLArkProps<'div'>;
+import { type PresenceProps } from '../presence';
+export type TooltipContentProps = HTMLArkProps<'div'> & PresenceProps;
 export declare const TooltipContent: (props: TooltipContentProps) => JSX.Element;

package/tooltip/tooltip-content.mjs

@@ -1,12 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useTooltipContext } from './tooltip-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const TooltipContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useTooltipContext();
-  const contentProps = mergeProps(() => api().contentProps, props);
-  return createComponent(ark.div, contentProps);
+  const contentProps = mergeProps(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, contentProps);
+    }
+  }));
 };
 
 export { TooltipContent };

package/tooltip/tooltip-positioner.cjs

@@ -4,21 +4,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
-const solidJs = require('solid-js');
 const factory = require('../factory.cjs');
 const tooltipContext = require('./tooltip-context.cjs');
 
 const TooltipPositioner = props => {
   const api = tooltipContext.useTooltipContext();
   const positionerProps = solid.mergeProps(() => api().positionerProps, props);
-  return web.createComponent(solidJs.Show, {
-    get when() {
-      return api().isOpen;
-    },
-    get children() {
-      return web.createComponent(factory.ark.div, positionerProps);
-    }
-  });
+  return web.createComponent(factory.ark.div, positionerProps);
 };
 
 exports.TooltipPositioner = TooltipPositioner;

package/tooltip/tooltip-positioner.mjs

@@ -1,20 +1,12 @@
 import { createComponent } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
-import { Show } from 'solid-js';
 import { ark } from '../factory.mjs';
 import { useTooltipContext } from './tooltip-context.mjs';
 
 const TooltipPositioner = props => {
   const api = useTooltipContext();
   const positionerProps = mergeProps(() => api().positionerProps, props);
-  return createComponent(Show, {
-    get when() {
-      return api().isOpen;
-    },
-    get children() {
-      return createComponent(ark.div, positionerProps);
-    }
-  });
+  return createComponent(ark.div, positionerProps);
 };
 
 export { TooltipPositioner };