@ark-ui/solid 2.1.1 → 2.2.0

package/CHANGELOG.md

@@ -6,6 +6,50 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [2.2.0] - 2024-02-27
+
+### Added
+
+- Added `Collapsible` component.
+
+### Changed
+
+- Enhanced the performance of the Ark `factory` by utilizing `memo` to avoid unnecessary re-renders.
+- Integrated `Collapsible` into `Accordion`, allowing the `Accordion` component to utilize `Collapsible` for animating the opening and closing of content.d
+
+```css
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+[data-scope='accordion'][data-part='item-content'][data-state='open'] {
+  animation: slideDown 250ms;
+}
+
+[data-scope='accordion'][data-part='item-content'][data-state='closed'] {
+  animation: slideUp 200ms;
+}
+```
+
+### Fixed
+
+- Fixed a bug where the disabled `Tooltip` would flash upon hovering and clicking the trigger.
+- Fixed an issue where a disclosure components could not be initially set to an open state without being controlled.
+
 ## [2.1.1] - 2024-02-16
 
 ### Fixed

package/cjs/index.js

@@ -10,6 +10,7 @@ var anatomy = require('@ark-ui/anatomy');
 var carousel$1 = require('@zag-js/carousel');
 var checkbox$1 = require('@zag-js/checkbox');
 var clipboard$1 = require('@zag-js/clipboard');
+var collapsible$1 = require('@zag-js/collapsible');
 var colorPicker$1 = require('@zag-js/color-picker');
 var combobox$1 = require('@zag-js/combobox');
 var datePicker$1 = require('@zag-js/date-picker');
@@ -60,6 +61,7 @@ var avatar__namespace = /*#__PURE__*/_interopNamespaceDefault(avatar$1);
 var carousel__namespace = /*#__PURE__*/_interopNamespaceDefault(carousel$1);
 var checkbox__namespace = /*#__PURE__*/_interopNamespaceDefault(checkbox$1);
 var clipboard__namespace = /*#__PURE__*/_interopNamespaceDefault(clipboard$1);
+var collapsible__namespace = /*#__PURE__*/_interopNamespaceDefault(collapsible$1);
 var colorPicker__namespace = /*#__PURE__*/_interopNamespaceDefault(colorPicker$1);
 var combobox__namespace = /*#__PURE__*/_interopNamespaceDefault(combobox$1);
 var datePicker__namespace = /*#__PURE__*/_interopNamespaceDefault(datePicker$1);
@@ -145,15 +147,19 @@ function jsxFactory() {
 }
 const ark = jsxFactory();
 
-function splitPresenceProps(props) {
-  return createSplitProps()(props, ['lazyMount', 'onExitComplete', 'present', 'unmountOnExit']);
-}
+const splitPresenceProps = props => createSplitProps()(props, ['lazyMount', 'onExitComplete', 'present', 'unmountOnExit']);
+
+const [RenderStrategyProvider, useRenderStrategyContext] = createContext({
+  hookName: 'useRenderStrategyContext',
+  providerName: '<RenderStrategyProvider />'
+});
+const splitRenderStrategyProps = props => createSplitProps()(props, ['lazyMount', 'unmountOnExit']);
 
 const usePresence = props => {
-  const [localProps, machineProps] = solidJs.splitProps(props, ['lazyMount', 'unmountOnExit']);
+  const [renderStrategyProps, context] = splitRenderStrategyProps(props);
   const [wasEverPresent, setWasEverPresent] = solidJs.createSignal(false);
-  const [state, send] = solid.useMachine(presence__namespace.machine(machineProps), {
-    context: machineProps
+  const [state, send] = solid.useMachine(presence__namespace.machine(context), {
+    context
   });
   const api = solidJs.createMemo(() => presence__namespace.connect(state, send, solid.normalizeProps));
   solidJs.createEffect(() => {
@@ -161,12 +167,12 @@ const usePresence = props => {
     if (isPresent) setWasEverPresent(true);
   });
   return solidJs.createMemo(() => ({
-    isUnmounted: !api().isPresent && !wasEverPresent() && localProps.lazyMount || localProps.unmountOnExit && !api().isPresent && wasEverPresent(),
+    isUnmounted: !api().isPresent && !wasEverPresent() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().isPresent && wasEverPresent(),
     isPresent: api().isPresent,
     presenceProps: {
       ref: api().setNode,
       hidden: !api().isPresent,
-      'data-state': machineProps.present ? 'open' : 'closed'
+      'data-state': context.present ? 'open' : 'closed'
     }
   }));
 };
@@ -193,11 +199,6 @@ const [PresenceProvider, usePresenceContext] = createContext({
   providerName: '<PresenceProvider />'
 });
 
-const [PresencePropsProvider, usePresencePropsContext] = createContext({
-  hookName: 'usePresencePropsContext',
-  providerName: '<PresencePropsProvider />'
-});
-
 const isFunction = value => typeof value === 'function';
 const runIfFn = (valueOrFn, ...args) => isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
 
@@ -209,8 +210,8 @@ const [AccordionItemProvider, useAccordionItemContext] = createContext({
 const AccordionItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled']);
   const api = useAccordionContext();
-  const presenceProps = usePresencePropsContext();
-  const presenceApi = usePresence(solid.mergeProps(presenceProps, () => ({
+  const renderStrategyProps = useRenderStrategyContext();
+  const presenceApi = usePresence(solid.mergeProps(renderStrategyProps, () => ({
     present: api().getItemState(itemProps).isOpen
   })));
   const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
@@ -303,15 +304,15 @@ const useAccordion = props => {
 };
 
 const AccordionRoot = props => {
-  const [presenceProps, accordionProps] = splitPresenceProps(props);
+  const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
   const [useAccordionProps, localProps] = createSplitProps()(accordionProps, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
   const api = useAccordion(useAccordionProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(AccordionProvider, {
     value: api,
     get children() {
-      return web.createComponent(PresencePropsProvider, {
-        value: presenceProps,
+      return web.createComponent(RenderStrategyProvider, {
+        value: renderStrategyProps,
         get children() {
           return web.createComponent(ark.div, mergedProps);
         }
@@ -630,6 +631,75 @@ var clipboard = /*#__PURE__*/Object.freeze({
   Trigger: ClipboardTrigger
 });
 
+const [CollapsibleProvider, useCollapsibleContext] = createContext({
+  hookName: 'useCollapsibleContext',
+  providerName: '<CollapsibleProvider />'
+});
+
+const CollapsibleContent = props => {
+  const api = useCollapsibleContext();
+  const mergedProps = solid.mergeProps(() => api().contentProps, props);
+  return web.createComponent(solidJs.Show, {
+    get when() {
+      return !api().isUnmounted;
+    },
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const useCollapsible = props => {
+  const getRootNode = useEnvironmentContext();
+  const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, collapsibleProps);
+  const [state, send] = solid.useMachine(collapsible__namespace.machine(context), {
+    context
+  });
+  const [wasVisible, setWasVisible] = solidJs.createSignal(false);
+  solidJs.createEffect(() => {
+    const isPresent = api().isVisible;
+    if (isPresent) setWasVisible(true);
+  });
+  const api = solidJs.createMemo(() => collapsible__namespace.connect(state, send, solid.normalizeProps));
+  return solidJs.createMemo(() => ({
+    ...api(),
+    isUnmounted: !api().isVisible && !wasVisible() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().isVisible && wasVisible()
+  }));
+};
+
+const CollapsibleRoot = props => {
+  const [params, localProps] = createSplitProps()(props, ['dir', 'disabled', 'getRootNode', 'id', 'ids', 'lazyMount', 'onExitComplete', 'onOpenChange', 'open', 'unmountOnExit']);
+  const api = useCollapsible(params);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  return web.createComponent(CollapsibleProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+const CollapsibleTrigger = props => {
+  const api = useCollapsibleContext();
+  const mergedProps = () => solid.mergeProps(api().triggerProps, props);
+  return web.createComponent(ark.button, web.mergeProps(mergedProps, {
+    get children() {
+      return props.children;
+    }
+  }));
+};
+
+var collapsible = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Content: CollapsibleContent,
+  Root: CollapsibleRoot,
+  Trigger: CollapsibleTrigger
+});
+
 const [ColorPickerAreaProvider, useColorPickerAreaContext] = createContext({
   hookName: 'useColorPickerAreaContext',
   providerName: '<ColorPickerAreaProvider />'
@@ -782,8 +852,7 @@ const useColorPicker = props => {
   const context = solid.mergeProps(() => ({
     id: solidJs.createUniqueId(),
     getRootNode,
-    value: local.value ? colorPicker__namespace.parse(local.value) : undefined,
-    'open.controlled': props.open !== undefined
+    value: local.value ? colorPicker__namespace.parse(local.value) : undefined
   }), rest);
   const [state, send] = solid.useMachine(colorPicker__namespace.machine(context), {
     context
@@ -1219,8 +1288,7 @@ const useDatePicker = props => {
     id: solidJs.createUniqueId(),
     getRootNode,
     focusedValue: local.focusedValue ? datePicker__namespace.parse(local.focusedValue) : undefined,
-    value: local.value ? datePicker__namespace.parse(local.value) : undefined,
-    'open.controlled': props.open !== undefined
+    value: local.value ? datePicker__namespace.parse(local.value) : undefined
   }), rest);
   const [state, send] = solid.useMachine(datePicker__namespace.machine(context), {
     context
@@ -1446,8 +1514,8 @@ const [DialogProvider, useDialogContext] = createContext({
 
 const DialogBackdrop = props => {
   const api = useDialogContext();
-  const presenceProps = usePresencePropsContext();
-  const presenceApi = usePresence(solid.mergeProps(presenceProps, () => ({
+  const renderStrategyProps = useRenderStrategyContext();
+  const presenceApi = usePresence(solid.mergeProps(renderStrategyProps, () => ({
     present: api().isOpen
   })));
   const mergedProps = solid.mergeProps(() => api().backdropProps, () => presenceApi().presenceProps, props);
@@ -1505,8 +1573,7 @@ const useDialog = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode,
-    'open.controlled': props.open !== undefined
+    getRootNode
   }, props);
   const [state, send] = solid.useMachine(dialog__namespace.machine(context), {
     context
@@ -1516,6 +1583,7 @@ const useDialog = props => {
 
 const DialogRoot = props => {
   const [presenceProps, dialogProps] = splitPresenceProps(props);
+  const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
   const [useDialogProps, localProps] = createSplitProps()(dialogProps, ['aria-label', 'closeOnEscapeKeyDown', 'closeOnInteractOutside', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
   const api = useDialog(useDialogProps);
   const apiPresence = usePresence(solid.mergeProps(presenceProps, () => ({
@@ -1525,8 +1593,8 @@ const DialogRoot = props => {
   return web.createComponent(DialogProvider, {
     value: api,
     get children() {
-      return web.createComponent(PresencePropsProvider, {
-        value: presenceProps,
+      return web.createComponent(RenderStrategyProvider, {
+        value: renderStrategyProps,
         get children() {
           return web.createComponent(PresenceProvider, {
             value: apiPresence,
@@ -1867,8 +1935,7 @@ const useHoverCard = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode,
-    'open.controlled': props.open !== undefined
+    getRootNode
   }, props);
   const [state, send] = solid.useMachine(hoverCard__namespace.machine(context), {
     context
@@ -2051,8 +2118,7 @@ const useMenu = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode,
-    'open.controlled': props.open !== undefined
+    getRootNode
   }, props);
   const [state, send, machine] = solid.useMachine(menu__namespace.machine(context), {
     context
@@ -2427,8 +2493,7 @@ const usePopover = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode,
-    'open.controlled': props.open !== undefined
+    getRootNode
   }, props);
   const [state, send] = solid.useMachine(popover__namespace.machine(context), {
     context
@@ -3000,8 +3065,7 @@ const useSelect = props => {
   const context = () => solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode,
-    collection: collection(),
-    'open.controlled': props.open !== undefined
+    collection: collection()
   }, rest);
   const [state, send] = solid.useMachine(select__namespace.machine(context()), {
     context
@@ -3203,7 +3267,7 @@ const useSplitter = props => {
 };
 
 const SplitterRoot = props => {
-  const [splitterParams, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'ids', 'onSizeChange', 'onSizeChangeEnd', 'onSizeChangeStart', 'orientation', 'size']);
+  const [splitterParams, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'ids', 'onSizeChange', 'onSizeChangeEnd', 'orientation', 'size']);
   const api = useSplitter(splitterParams);
   const getChildren = () => runIfFn(localProps.children, api);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
@@ -3299,8 +3363,8 @@ const [TabsProvider, useTabsContext] = createContext({
 const TabContent = props => {
   const [contentProps, localProps] = createSplitProps()(props, ['value']);
   const api = useTabsContext();
-  const presenceProps = usePresencePropsContext();
-  const presenceApi = usePresence(solid.mergeProps(presenceProps, () => ({
+  const renderStrategyProps = useRenderStrategyContext();
+  const presenceApi = usePresence(solid.mergeProps(renderStrategyProps, () => ({
     present: api().value === contentProps.value
   })));
   const mergedProps = solid.mergeProps(() => api().getContentProps(contentProps), () => presenceApi().presenceProps, localProps);
@@ -3351,15 +3415,15 @@ const useTabs = props => {
 };
 
 const TabsRoot = props => {
-  const [presenceProps, tabsProps] = splitPresenceProps(props);
+  const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
   const [tabsParams, restProps] = createSplitProps()(tabsProps, ['activationMode', 'dir', 'getRootNode', 'id', 'ids', 'loop', 'onFocusChange', 'onValueChange', 'orientation', 'translations', 'value']);
   const api = useTabs(tabsParams);
   const mergedProps = solid.mergeProps(() => api().rootProps, restProps);
   return web.createComponent(TabsProvider, {
     value: api,
     get children() {
-      return web.createComponent(PresencePropsProvider, {
-        value: presenceProps,
+      return web.createComponent(RenderStrategyProvider, {
+        value: renderStrategyProps,
         get children() {
           return web.createComponent(ark.div, mergedProps);
         }
@@ -3683,8 +3747,7 @@ const useTooltip = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode,
-    'open.controlled': props.open !== undefined
+    getRootNode
   }, props);
   const [state, send] = solid.useMachine(tooltip__namespace.machine(context), {
     context
@@ -3787,9 +3850,7 @@ const TreeViewBranchControl = props => {
 const TreeViewBranchIndicator = props => {
   const api = useTreeViewContext();
   const branchProps = useTreeViewBranchContext();
-  const mergedProps = solid.mergeProps(() => api().getBranchProps(branchProps),
-  // TODO use api.getBranchIndicatorProps() when available
-  anatomy.treeViewAnatomy.build().branchIndicator.attrs, props);
+  const mergedProps = solid.mergeProps(() => api().getBranchIndicatorProps(branchProps), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -3941,6 +4002,10 @@ exports.ClipboardInput = ClipboardInput;
 exports.ClipboardLabel = ClipboardLabel;
 exports.ClipboardRoot = ClipboardRoot;
 exports.ClipboardTrigger = ClipboardTrigger;
+exports.Collapsible = collapsible;
+exports.CollapsibleContent = CollapsibleContent;
+exports.CollapsibleRoot = CollapsibleRoot;
+exports.CollapsibleTrigger = CollapsibleTrigger;
 exports.ColorPicker = colorPicker;
 exports.ColorPickerArea = ColorPickerArea;
 exports.ColorPickerAreaBackground = ColorPickerAreaBackground;
@@ -4090,7 +4155,6 @@ exports.PopoverRoot = PopoverRoot;
 exports.PopoverTitle = PopoverTitle;
 exports.PopoverTrigger = PopoverTrigger;
 exports.Presence = Presence;
-exports.PresencePropsProvider = PresencePropsProvider;
 exports.PresenceProvider = PresenceProvider;
 exports.Progress = progress;
 exports.ProgressCircle = ProgressCircle;
@@ -4210,6 +4274,7 @@ exports.useAvatarContext = useAvatarContext;
 exports.useCarouselContext = useCarouselContext;
 exports.useCheckboxContext = useCheckboxContext;
 exports.useClipboardContext = useClipboardContext;
+exports.useCollapsibleContext = useCollapsibleContext;
 exports.useColorPickerAreaContext = useColorPickerAreaContext;
 exports.useColorPickerChannelSliderContext = useColorPickerChannelSliderContext;
 exports.useColorPickerContext = useColorPickerContext;
@@ -4231,7 +4296,6 @@ exports.usePinInputContext = usePinInputContext;
 exports.usePopoverContext = usePopoverContext;
 exports.usePresence = usePresence;
 exports.usePresenceContext = usePresenceContext;
-exports.usePresencePropsContext = usePresencePropsContext;
 exports.useProgressContext = useProgressContext;
 exports.useRadioGroupContext = useRadioGroupContext;
 exports.useRadioGroupItemContext = useRadioGroupItemContext;