feat: add support for default open for disclosure type components

frameworks/react/src/components/collapsible/use-collapsible.ts

@@ -10,7 +10,8 @@ export interface UseCollapsibleProps
   extends Optional<Omit<collapsible.Context, 'dir' | 'getRootNode' | 'open.controlled'>, 'id'>,
     RenderStrategyProps {
   /**
-   * The initial open state of the collpasible.
+   * The initial open state of the collapsible when it is first rendered.
+   * Use when you do not need to control its open state.
    */
   defaultOpen?: collapsible.Context['open']
 }
@@ -30,7 +31,7 @@ export const useCollapsible = (props: UseCollapsibleProps = {}): UseCollapsibleR
     id: useId(),
     getRootNode: useEnvironmentContext(),
     ...props,
-    open: props.defaultOpen ?? props.open,
+    open: props.open ?? props.defaultOpen,
     'open.controlled': props.open !== undefined,
   }
 

frameworks/react/src/components/color-picker/color-picker-root.tsx

@@ -22,6 +22,7 @@ export const ColorPickerRoot = forwardRef<HTMLDivElement, ColorPickerRootProps>(
     colorPickerProps,
     [
       'closeOnSelect',
+      'defaultOpen',
       'defaultValue',
       'disabled',
       'format',

frameworks/react/src/components/color-picker/use-color-picker.ts

@@ -10,6 +10,11 @@ export interface UseColorPickerProps
     Omit<colorPicker.Context, 'value' | 'open.controlled' | 'dir' | 'getRootNode'>,
     'id'
   > {
+  /**
+   * The initial open state of the color picker when it is first rendered.
+   * Use when you do not need to control its open state.
+   */
+  defaultOpen?: colorPicker.Context['open']
   /**
    * The initial value of the color picker.
    */
@@ -28,6 +33,7 @@ export const useColorPicker = (props: UseColorPickerProps): UseColorPickerReturn
     getRootNode: useEnvironmentContext(),
     ...props,
     value: props.defaultValue ? colorPicker.parse(props.defaultValue) : undefined,
+    open: props.open ?? props.defaultOpen,
     'open.controlled': props.open !== undefined,
   }
 

frameworks/react/src/components/combobox/combobox-root.tsx

@@ -25,6 +25,7 @@ const ComboboxImpl = <T extends CollectionItem>(
     'allowCustomValue',
     'autoFocus',
     'closeOnSelect',
+    'defaultOpen',
     'defaultValue',
     'disabled',
     'dismissable',

frameworks/react/src/components/combobox/use-combobox.ts

@@ -13,6 +13,11 @@ export interface UseComboboxProps<T extends CollectionItem>
       Omit<combobox.Context<T>, 'dir' | 'getRootNode' | 'collection' | 'open.controlled'>,
       'id'
     > {
+  /**
+   * The initial open state of the combobox when it is first rendered.
+   * Use when you do not need to control its open state.
+   */
+  defaultOpen?: combobox.Context['open']
   /**
    * the initial value of the combobox
    */
@@ -43,6 +48,7 @@ export const useCombobox = <T extends CollectionItem>(
     collection,
     ...comboboxProps,
     value: props.defaultValue,
+    open: props.open ?? props.defaultOpen,
     'open.controlled': props.open !== undefined,
   }
 

frameworks/react/src/components/date-picker/date-picker-root.tsx

@@ -20,6 +20,7 @@ export const DatePickerRoot = forwardRef<HTMLDivElement, DatePickerRootProps>((p
   const [presenceProps, datePickerProps] = splitPresenceProps(props)
   const [useDatePickerProps, localProps] = createSplitProps<UseDatePickerProps>()(datePickerProps, [
     'closeOnSelect',
+    'defaultOpen',
     'defaultValue',
     'disabled',
     'fixedWeeks',

frameworks/react/src/components/date-picker/use-date-picker.ts

@@ -13,6 +13,11 @@ export interface UseDatePickerProps
     >,
     'id'
   > {
+  /**
+   * The initial open state of the date picker when it is first rendered.
+   * Use when you do not need to control its open state.
+   */
+  defaultOpen?: datePicker.Context['open']
   /**
    * The initial value of the date picker
    */
@@ -46,6 +51,7 @@ export const useDatePicker = (props: UseDatePickerProps = {}): UseDatePickerRetu
     value: props.defaultValue ? datePicker.parse(props.defaultValue) : undefined,
     max: props.max ? datePicker.parse(props.max) : undefined,
     min: props.min ? datePicker.parse(props.min) : undefined,
+    open: props.open ?? props.defaultOpen,
     'open.controlled': props.open !== undefined,
   }
 

frameworks/react/src/components/dialog/use-dialog.ts

@@ -7,7 +7,8 @@ import { useEvent } from '../../utils/use-event'
 
 export interface UseDialogProps extends Omit<Optional<dialog.Context, 'id'>, 'open.controlled'> {
   /**
-   * The initial open state of the dialog.
+   * The initial open state of the dialog when it is first rendered.
+   * Use when you do not need to control its open state.
    */
   defaultOpen?: dialog.Context['open']
 }
@@ -19,7 +20,7 @@ export const useDialog = (props: UseDialogProps = {}): UseDialogReturn => {
     id: useId(),
     getRootNode: useEnvironmentContext(),
     ...props,
-    open: props.defaultOpen ?? props.open,
+    open: props.open ?? props.defaultOpen,
     'open.controlled': props.open !== undefined,
   }
 

frameworks/react/src/components/hover-card/use-hover-card.ts

@@ -8,7 +8,8 @@ import { useEvent } from '../../utils/use-event'
 export interface UseHoverCardProps
   extends Omit<Optional<hoverCard.Context, 'id'>, 'open.controlled'> {
   /**
-   * The initial open state of the hover card.
+   * The initial open state of the hover card when it is first rendered.
+   * Use when you do not need to control its open state.
    */
   defaultOpen?: hoverCard.Context['open']
 }
@@ -20,7 +21,7 @@ export const useHoverCard = (props: UseHoverCardProps = {}): UseHoverCardReturn
     id: useId(),
     getRootNode: useEnvironmentContext(),
     ...props,
-    open: props.defaultOpen ?? props.open,
+    open: props.open ?? props.defaultOpen,
     'open.controlled': props.open !== undefined,
   }
 

frameworks/react/src/components/menu/menu-root.tsx

@@ -23,6 +23,7 @@ export const MenuRoot = (props: MenuRootProps) => {
     'anchorPoint',
     'aria-label',
     'closeOnSelect',
+    'defaultOpen',
     'highlightedValue',
     'id',
     'ids',

frameworks/react/src/components/menu/use-menu.ts

@@ -6,7 +6,13 @@ import type { Optional } from '../../types'
 import { useEvent } from '../../utils/use-event'
 
 export interface UseMenuProps
-  extends Optional<Omit<menu.Context, 'open.controlled' | 'dir' | 'getRootNode'>, 'id'> {}
+  extends Optional<Omit<menu.Context, 'open.controlled' | 'dir' | 'getRootNode'>, 'id'> {
+  /**
+   * The initial open state of the menu when it is first rendered.
+   * Use when you do not need to control its open state.
+   */
+  defaultOpen?: menu.Context['open']
+}
 export interface UseMenuReturn {
   machine: menu.Service
   api: menu.Api<PropTypes>
@@ -19,6 +25,7 @@ export const useMenu = (props: UseMenuProps = {}): UseMenuReturn => {
     ...props,
     onOpenChange: useEvent(props.onOpenChange),
     onSelect: useEvent(props.onSelect),
+    open: props.open ?? props.defaultOpen,
     'open.controlled': props.open !== undefined,
   }
 

frameworks/react/src/components/popover/use-popover.ts

@@ -7,7 +7,8 @@ import { useEvent } from '../../utils/use-event'
 
 export interface UsePopoverProps extends Omit<Optional<popover.Context, 'id'>, 'open.controlled'> {
   /**
-   * The initial open state of the popover.
+   * The initial open state of the popover when it is first rendered.
+   * Use when you do not need to control its open state.
    */
   defaultOpen?: popover.Context['open']
 }
@@ -19,7 +20,7 @@ export const usePopover = (props: UsePopoverProps = {}): UsePopoverReturn => {
     id: useId(),
     getRootNode: useEnvironmentContext(),
     ...props,
-    open: props.defaultOpen ?? props.open,
+    open: props.open ?? props.defaultOpen,
     'open.controlled': props.open !== undefined,
   }
 

frameworks/react/src/components/select/select-root.tsx

@@ -23,6 +23,7 @@ const SelectImpl = <T extends CollectionItem>(
   const [presenceProps, selectProps] = splitPresenceProps(props)
   const [useSelectProps, localProps] = createSplitProps<UseSelectProps<T>>()(selectProps, [
     'closeOnSelect',
+    'defaultOpen',
     'defaultValue',
     'disabled',
     'form',

frameworks/react/src/components/select/use-select.ts

@@ -13,6 +13,11 @@ export interface UseSelectProps<T extends CollectionItem>
       Omit<select.Context<T>, 'collection' | 'dir' | 'getRootNode' | 'open.controlled'>,
       'id'
     > {
+  /**
+   * The initial open state of the select when it is first rendered.
+   * Use when you do not need to control its open state.
+   */
+  defaultOpen?: select.Context['open']
   /**
    * The initial value of the select.
    */
@@ -43,6 +48,7 @@ export const useSelect = <T extends CollectionItem>(
     collection,
     ...rest,
     value: props.defaultValue,
+    open: props.open ?? props.defaultOpen,
     'open.controlled': props.open !== undefined,
   }
 

frameworks/react/src/components/tooltip/use-tooltip.ts

@@ -7,9 +7,10 @@ import { useEvent } from '../../utils/use-event'
 
 export interface UseTooltipProps extends Omit<Optional<tooltip.Context, 'id'>, 'open.controlled'> {
   /**
-   * The initial open state of the tooltip.
+   * The initial open state of the tooltip when it is first rendered.
+   * Use when you do not need to control its open state.
    */
-  defaultOpen?: boolean
+  defaultOpen?: tooltip.Context['open']
 }
 
 export interface UseTooltipReturn extends tooltip.Api<PropTypes> {}
@@ -19,7 +20,7 @@ export const useTooltip = (props: UseTooltipProps): UseTooltipReturn => {
     id: useId(),
     getRootNode: useEnvironmentContext(),
     ...props,
-    open: props.defaultOpen ?? props.open,
+    open: props.open ?? props.defaultOpen,
     'open.controlled': props.open !== undefined,
   }
 

frameworks/vue/src/components/collapsible/collapsible-root.vue

@@ -10,7 +10,10 @@ import { ark, type PolymorphicProps } from '../factory'
 import { useCollapsible } from './use-collapsible'
 import { CollapsibleProvider } from './use-collapsible-context'
 
-const props = withDefaults(defineProps<CollapsibleRootProps>(), { open: undefined })
+const props = withDefaults(defineProps<CollapsibleRootProps>(), {
+  defaultOpen: undefined,
+  open: undefined,
+})
 const emits = defineEmits<CollapsibleRootEmits>()
 
 const collapsible = useCollapsible(props, emits)

frameworks/vue/src/components/collapsible/collapsible.types.ts

@@ -1,6 +1,11 @@
 import type * as collapsible from '@zag-js/collapsible'
 
 export interface RootProps {
+  /**
+   * The initial open state of the collapsible when it is first rendered.
+   * Use when you do not need to control its open state.
+   */
+  defaultOpen?: boolean
   /**
    * Whether the collapsible is disabled
    */

frameworks/vue/src/components/collapsible/use-collapsible.ts

@@ -10,7 +10,11 @@ import type { RootEmits } from './collapsible.types'
 export interface UseCollapsibleProps
   extends RenderStrategyProps,
     Optional<Omit<collapsible.Context, 'dir' | 'getRootNode' | 'open.controlled'>, 'id'> {
-  defaultOpen?: boolean
+  /**
+   * The initial open state of the collapsible when it is first rendered.
+   * Use when you do not need to control its open state.
+   */
+  defaultOpen?: collapsible.Context['open']
 }
 
 interface Collapsible extends collapsible.Api<PropTypes> {
@@ -34,8 +38,9 @@ export const useCollapsible = (
     collapsible.machine({
       ...context.value,
       id: context.value.id ?? useId().value,
-      getRootNode: env?.value.getRootNode,
+      open: props.open ?? props.defaultOpen,
       'open.controlled': props.open !== undefined,
+      getRootNode: env?.value.getRootNode,
       onExitComplete: () => emits('exitComplete'),
       onOpenChange: (details) => {
         emits('openChange', details)

frameworks/vue/src/components/color-picker/color-picker-root.vue

@@ -13,7 +13,10 @@ import { ColorPickerProvider } from './use-color-picker-context'
 import { RenderStrategyPropsProvider } from '../../utils'
 import { computed } from 'vue'
 
-const props = withDefaults(defineProps<ColorPickerRootProps>(), { open: undefined })
+const props = withDefaults(defineProps<ColorPickerRootProps>(), {
+  defaultOpen: undefined,
+  open: undefined,
+})
 const emits = defineEmits<ColorPickerRootEmits>()
 
 const colorPicker = useColorPicker(props, emits)

frameworks/vue/src/components/color-picker/color-picker.types.ts

@@ -9,6 +9,11 @@ export interface RootProps {
    * The direction of the color picker
    */
   dir?: 'ltr' | 'rtl'
+  /**
+   * The initial open state of the color picker when it is first rendered.
+   * Use when you do not need to control its open state.
+   */
+  defaultOpen?: boolean
   /**
    * Whether the color picker is disabled
    */

frameworks/vue/src/components/color-picker/use-color-picker.ts

@@ -12,6 +12,10 @@ export interface UseColorPickerProps
     'id'
   > {
   modelValue?: string
+  /**
+   * The initial open state of the color picker.
+   */
+  defaultOpen?: colorPicker.Context['open']
 }
 export interface UseColorPickerReturn extends ComputedRef<colorPicker.Api<PropTypes>> {}
 
@@ -26,6 +30,7 @@ export const useColorPicker = (
     return {
       ...rest,
       value: modelValue ? colorPicker.parse(modelValue) : undefined,
+      open: props.open ?? props.defaultOpen,
       'open.controlled': props.open !== undefined,
     }
   })

frameworks/vue/src/components/combobox/combobox-root.vue

@@ -15,8 +15,9 @@ import { useCombobox } from './use-combobox'
 import { ComboboxProvider } from './use-combobox-context'
 
 const props = withDefaults(defineProps<ComboboxRootProps>(), {
-  open: undefined,
   closeOnSelect: true,
+  defaultOpen: undefined,
+  open: undefined,
 })
 const emits = defineEmits<ComboboxRootEmits>()
 

frameworks/vue/src/components/combobox/combobox.types.ts

@@ -14,6 +14,11 @@ export interface RootProps<T extends CollectionItem = CollectionItem> {
    * Whether to close the combobox when an item is selected.
    */
   closeOnSelect?: boolean
+  /**
+   * The initial open state of the combobox when it is first rendered.
+   * Use when you do not need to control its open state.
+   */
+  defaultOpen?: boolean
   /**
    * Whether the combobox is disabled
    */

frameworks/vue/src/components/combobox/use-combobox.ts

@@ -14,7 +14,11 @@ export interface UseComboboxProps<T extends CollectionItem>
       'id'
     > {
   modelValue?: combobox.Context<T>['value']
-  defaultOpen?: boolean
+  /**
+   * The initial open state of the combobox when it is first rendered.
+   * Use when you do not need to control its open state.
+   */
+  defaultOpen?: combobox.Context['open']
 }
 
 export interface UseComboboxReturn<T extends CollectionItem>
@@ -39,8 +43,9 @@ export const useCombobox = <T extends CollectionItem>(
     combobox.machine({
       ...context.value,
       id: context.value.id ?? useId().value,
-      getRootNode: env?.value.getRootNode,
+      open: props.open ?? props.defaultOpen,
       'open.controlled': props.open !== undefined,
+      getRootNode: env?.value.getRootNode,
       onFocusOutside: (details) => emit('focusOutside', details),
       onHighlightChange: (details) => emit('highlightChange', details),
       onInputValueChange: (details) => emit('inputValueChange', details),

frameworks/vue/src/components/date-picker/date-picker-root.vue

@@ -15,8 +15,9 @@ import { useDatePicker } from './use-date-picker'
 import { DatePickerProvider } from './use-date-picker-context'
 
 const props = withDefaults(defineProps<DatePickerRootProps>(), {
-  open: undefined,
   closeOnSelect: true,
+  defaultOpen: undefined,
+  open: undefined,
 })
 const emits = defineEmits<DatePickerRootEmits>()