@mirohq/design-system-dropdown-menu 3.5.26 → 4.0.1

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { AnchorHTMLAttributes } from 'react';
+import react__default, { AnchorHTMLAttributes, ComponentPropsWithRef } from 'react';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
 import { StrictComponentProps } from '@mirohq/design-system-stitches';
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
@@ -10,6 +10,7 @@ import { CSSProperties } from '@stitches/react';
 import { ExtractValidKeys } from '@mirohq/design-system-types';
 import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
 import * as _mirohq_design_system_components_primitive from '@mirohq/design-system-components/primitive';
+import { HotkeyProps as HotkeyProps$1 } from '@mirohq/design-system-base-hotkey';
 
 declare const StyledCheckboxItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<RadixDropdownMenu.DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
@@ -521,11 +522,14 @@ interface CheckboxItemProps extends Omit<StyledCheckboxItemProps, 'onChange'> {
     onSelect?: (event: Event) => void;
     /**
      * Closes the dropdown when the user selects an item.
+     * @default false
      */
     closeOnSelect?: boolean;
     /**
-     * Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item.
-     * Use this when the content is complex, or you have non-textual content inside.
+     * Optional text used for typeahead purposes. By default the typeahead
+     * behavior will use the .textContent of the item.
+     * Use this when the content is complex, or you have non-textual content
+     * inside.
      */
     textValue?: string;
 }
@@ -1059,7 +1063,8 @@ declare namespace types {
 
 interface ContentProps extends StyledContentProps {
     /**
-     * Whether keyboard navigation should loop around
+     * Whether keyboard navigation should loop around.
+     * @default false
      */
     loop?: boolean;
     /**
@@ -1093,35 +1098,42 @@ interface ContentProps extends StyledContentProps {
      * The preferred side of the trigger to render against when open. Will be
      * reversed when collisions occur and avoidCollisions is enabled. This prop is
      * ignored within submenus.
+     * @default 'bottom'
      */
     side?: Side;
     /**
-     * The distance in pixels from the trigger
+     * The distance in pixels from the trigger.
+     * @default CONTENT_OFFSET
      */
     sideOffset?: number;
     /**
      * The preferred alignment against the trigger. May change when collisions
      * occur. This prop is ignored within submenus.
+     * @default 'center'
      */
     align?: Align;
     /**
-     * An offset in pixels from the "start" or "end" alignment options
+     * An offset in pixels from the "start" or "end" alignment options.
+     * @default 0
      */
     alignOffset?: number;
     /**
      * When true, overrides the side and align preferences to prevent collisions
      * with window edges.
+     * @default true
      */
     avoidCollisions?: boolean;
     /**
      * The distance in pixels from window edges where collision detection should
      * occur.
+     * @default 0
      */
     collisionPadding?: number;
     /**
      * The sticky behavior on the align axis. "partial" will keep the content in
      * the boundary as long as the trigger is at least partially in the boundary
      * whilst "always" will keep the content in the boundary regardless.
+     * @default 'partial'
      */
     sticky?: StickyBehavior;
     /**
@@ -1138,10 +1150,12 @@ interface ContentProps extends StyledContentProps {
     collisionBoundary?: Element | null;
     /**
      * Whether to hide the content when the trigger becomes fully occluded.
+     * @default false
      */
     hideWhenDetached?: boolean;
     /**
-     * The spacing around container
+     * The spacing around container.
+     * @default 'medium'
      */
     containerSpacing?: ContainerSpacing;
     /**
@@ -1155,6 +1169,7 @@ interface ContentProps extends StyledContentProps {
      * When set to "auto," a scrollbar is added if the content exceeds its
      * boundaries. If no maxHeight is defined, it will be automatically adjusted
      * to fit the remaining space between the trigger and the boundary edge.
+     * @default 'visible'
      */
     overflow?: Overflow;
 }
@@ -1657,15 +1672,20 @@ declare type StyledItemProps = StrictComponentProps<typeof StyledItem>;
 
 interface ItemProps extends StyledItemProps {
     /**
-     * When true, prevents the user from interacting with the item
+     * When true, prevents the user from interacting with the item.
+     * @default false
      */
     disabled?: boolean;
     /**
-     * Event handler called when the user selects an item (via mouse of keyboard). Calling event.preventDefault in this handler will prevent the dropdown menu from closing when selecting that item
+     * Event handler called when the user selects an item (via mouse of keyboard).
+     * Calling event.preventDefault in this handler will prevent the dropdown menu
+     * from closing when selecting that item.
      */
     onSelect?: (event: Event) => void;
     /**
-     * Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside
+     * Optional text used for typeahead purposes. By default the typeahead
+     * behavior will use the .textContent of the item. Use this when the content
+     * is complex, or you have non-textual content inside.
      */
     textValue?: string;
 }
@@ -2677,19 +2697,23 @@ interface RadioItemProps extends StyledRadioItemProps {
     value: string;
     /**
      * When true, prevents the user from interacting with the item.
+     * @default false
      */
     disabled?: boolean;
     /**
-     * Event handler called when the user selects an item (via mouse of keyboard).
+     * Event handler called when the user selects an item (via mouse or keyboard).
      */
     onSelect?: (event: Event) => void;
     /**
      * Closes the dropdown when the user selects an item.
+     * @default false
      */
     closeOnSelect?: boolean;
     /**
-     * Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item.
-     * Use this when the content is complex, or you have non-textual content inside.
+     * Optional text used for typeahead purposes. By default the typeahead
+     * behavior will use the .textContent of the item.
+     * Use this when the content is complex, or you have non-textual content
+     * inside.
      */
     textValue?: string;
 }
@@ -3700,11 +3724,14 @@ interface SwitchItemProps extends Omit<StyledSwitchItemProps, 'onChange'> {
     onSelect?: (event: Event) => void;
     /**
      * Closes the dropdown when the user selects an item.
+     * @default false
      */
     closeOnSelect?: boolean;
     /**
-     * Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item.
-     * Use this when the content is complex, or you have non-textual content inside.
+     * Optional text used for typeahead purposes. By default the typeahead
+     * behavior will use the .textContent of the item.
+     * Use this when the content is complex, or you have non-textual content
+     * inside.
      */
     textValue?: string;
 }
@@ -4702,7 +4729,8 @@ declare type StyledSubTriggerProps = StrictComponentProps<typeof StyledSubTrigge
 
 interface SubTriggerProps extends StyledSubTriggerProps {
     /**
-     * Prevents the user from interacting with the switch
+     * Prevents the user from interacting with the switch.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -5245,10 +5273,12 @@ interface SubContentProps extends StyledSubContentProps {
     forceMount?: true;
     /**
      * The distance in pixels from the trigger.
+     * @default SIDE_OFFSET
      */
     sideOffset?: number;
     /**
      * An offset in pixels from the "start" or "end" alignment options.
+     * @default -CONTENT_GUTTER
      */
     alignOffset?: number;
     /**
@@ -5260,6 +5290,7 @@ interface SubContentProps extends StyledSubContentProps {
     /**
      *The distance in pixels from the boundary edges where collision detection
      *should occur. Accepts a number (same for all sides).
+     * @default 0
      */
     collisionPadding?: number;
     /**
@@ -5272,12 +5303,12 @@ interface SubContentProps extends StyledSubContentProps {
      * The sticky behavior on the align axis. "partial" will keep the content in
      * the boundary as long as the trigger is at least partially in the boundary
      * whilst "always" will keep the content in the boundary regardless.
-     * @default partial
+     * @default 'partial'
      */
     sticky?: StickyBehavior;
     /**
      * Whether to hide the content when the trigger becomes fully occluded.
-     * @default false
+     * @default true
      */
     hideWhenDetached?: boolean;
     /**
@@ -5291,6 +5322,7 @@ interface SubContentProps extends StyledSubContentProps {
      * When set to "auto," a scrollbar is added if the content exceeds its
      * boundaries. If no maxHeight is defined, it will be automatically adjusted
      * to fit the remaining space between the trigger and the boundary edge.
+     * @default 'visible'
      */
     overflow?: Overflow;
 }
@@ -6313,7 +6345,7 @@ declare const ItemDescription: react.ForwardRefExoticComponent<Omit<Omit<_mirohq
     };
 }>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
 
-declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const StyledIconSlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"div">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -6801,7 +6833,7 @@ declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<Omit<Omit<
     _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
-}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react__default.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"div">>, {}, {}>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -7289,9 +7321,7 @@ declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<Omit<Omit<
     _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
-}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLDivElement>, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
-
-declare const HotkeySlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<(props: Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"div">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"div">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -7779,7 +7809,13 @@ declare const HotkeySlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
     _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
-}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>) => JSX.Element, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"div">>, {}, {}>, {}, {}>;
+declare type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>;
+
+declare type IconSlotProps = {
+    children: react__default.ReactNode;
+} & StyledIconSlotProps;
+declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -8267,7 +8303,7 @@ declare const HotkeySlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
     _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
-}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<(props: Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"div">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react__default.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -8755,7 +8791,15 @@ declare const HotkeySlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
     _hover: (css: _stitches_react_types_css_util.CSSProperties) => {
         '&:hover, &[data-hovered]': _stitches_react_types_css_util.CSSProperties;
     };
-}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>) => JSX.Element, {}, {}>;
+}>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLDivElement>, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
+
+declare type HotkeyProps = Omit<HotkeyProps$1, 'variant'> & {
+    /**
+     * The content.
+     */
+    children: string;
+};
+declare const Hotkey: react__default.ForwardRefExoticComponent<Omit<HotkeyProps, "ref"> & react__default.RefAttributes<HTMLSpanElement>>;
 
 declare const StyledIllustrationSlot: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"div">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
@@ -10230,11 +10274,13 @@ interface DropdownMenuProps {
     /**
      * The open state of the dropdown menu when it is initially rendered. Use when
      * you do not need to control its open state.
+     * @default false
      */
     defaultOpen?: boolean;
     /**
      * The reading direction of submenus when applicable. If omitted, assumes LTR
      * (left-to-right) reading mode.
+     * @default 'ltr'
      */
     direction?: 'ltr' | 'rtl';
     /**
@@ -10253,6 +10299,7 @@ interface DropdownMenuProps {
      * Defines whether the interaction with outside elements will be disabled and
      * only menu content will be visible to screen readers. This prop is ignored
      * within submenus.
+     * @default false
      */
     interactOutside?: boolean;
     /**
@@ -10264,7 +10311,7 @@ declare const DropdownMenu: react__default.FC<DropdownMenuProps> & Partials;
 interface Partials {
     CheckboxItem: typeof CheckboxItem;
     Content: typeof Content;
-    HotkeySlot: typeof HotkeySlot;
+    Hotkey: typeof Hotkey;
     IconSlot: typeof IconSlot;
     IllustrationSlot: typeof IllustrationSlot;
     Item: typeof Item;
@@ -10281,4 +10328,4 @@ interface Partials {
     Trigger: typeof Trigger;
 }
 
-export { DropdownMenu, CheckboxItemProps as DropdownMenuCheckboxItemProps, ContentProps as DropdownMenuContentProps, ItemProps as DropdownMenuItemProps, LinkItemProps as DropdownMenuLinkItemProps, PortalProps as DropdownMenuPortalProps, DropdownMenuProps, RadioGroupProps as DropdownMenuRadioGroupProps, RadioItemProps as DropdownMenuRadioItemProps, SeparatorProps as DropdownMenuSeparatorProps, SubContentProps as DropdownMenuSubContentProps, SubProps as DropdownMenuSubProps, SubTriggerProps as DropdownMenuSubTriggerProps, SwitchItemProps as DropdownMenuSwitchItemProps, TriggerProps as DropdownMenuTriggerProps, types as DropdownMenuTypes };
+export { DropdownMenu, CheckboxItemProps as DropdownMenuCheckboxItemProps, ContentProps as DropdownMenuContentProps, IconSlotProps as DropdownMenuIconSlotProps, ItemProps as DropdownMenuItemProps, LinkItemProps as DropdownMenuLinkItemProps, PortalProps as DropdownMenuPortalProps, DropdownMenuProps, RadioGroupProps as DropdownMenuRadioGroupProps, RadioItemProps as DropdownMenuRadioItemProps, SeparatorProps as DropdownMenuSeparatorProps, SubContentProps as DropdownMenuSubContentProps, SubProps as DropdownMenuSubProps, SubTriggerProps as DropdownMenuSubTriggerProps, SwitchItemProps as DropdownMenuSwitchItemProps, TriggerProps as DropdownMenuTriggerProps, types as DropdownMenuTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-dropdown-menu",
-  "version": "3.5.26",
+  "version": "4.0.1",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -29,13 +29,14 @@
   "dependencies": {
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@react-aria/utils": "^3.13.0",
+    "@mirohq/design-system-base-hotkey": "^0.1.0",
     "@mirohq/design-system-base-icon": "^0.1.20",
+    "@mirohq/design-system-base-switch": "^0.1.19",
     "@mirohq/design-system-primitive": "^1.1.1",
+    "@mirohq/design-system-scroll-area": "^0.2.0",
     "@mirohq/design-system-stitches": "^2.6.0",
-    "@mirohq/design-system-base-switch": "^0.1.19",
-    "@mirohq/design-system-scroll-area": "^0.1.21",
-    "@mirohq/design-system-types": "^0.6.2",
     "@mirohq/design-system-styles": "^1.1.19",
+    "@mirohq/design-system-types": "^0.6.2",
     "@mirohq/design-system-use-layout-effect": "^0.2.1",
     "@mirohq/design-system-utils": "^0.14.3"
   },