@jobber/components 6.98.2 → 6.99.0

package/dist/Menu/Menu.d.ts

@@ -1,78 +1,29 @@
-import type { CSSProperties, ReactElement } from "react";
+import type { ReactElement } from "react";
 import React from "react";
-import type { IconColorNames, IconNames } from "@jobber/design";
-export interface MenuProps {
-    /**
-     * Custom menu activator. If this is not provided a default [… More] will be used.
-     */
-    readonly activator?: ReactElement;
-    /**
-     * Collection of action items.
-     */
-    readonly items: SectionProps[];
-    /**
-     * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
-     * **last resort**. Using this may result in unexpected side effects.
-     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
-     */
-    readonly UNSAFE_className?: {
-        menu?: string;
-        header?: string;
-        action?: string;
-    };
-    /**
-     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
-     * **last resort**. Using this may result in unexpected side effects.
-     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
-     */
-    readonly UNSAFE_style?: {
-        menu?: CSSProperties;
-        header?: CSSProperties;
-        action?: CSSProperties;
-    };
-}
-export interface SectionProps {
-    /**
-     * Defines the section header to further explain the group of actions.
-     */
-    header?: string;
-    /**
-     * List of actions.
-     */
-    actions: ActionProps[];
-}
-export declare function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }: MenuProps): React.JSX.Element;
-export interface ActionProps {
-    /**
-     * Action label
-     */
-    readonly label: string;
-    /**
-     * Parent Section Label
-     */
-    readonly sectionLabel?: string;
-    /**
-     * Visual cue for the action label
-     */
-    readonly icon?: IconNames;
-    /**
-     * Color for the icon. Defaults to "icon".
-     */
-    readonly iconColor?: IconColorNames;
-    /**
-     * Visual style for the action button
-     */
-    readonly destructive?: boolean;
-    /**
-     * Inline style overrides for the action button
-     */
-    readonly UNSAFE_style?: CSSProperties;
-    /**
-     * Style class overrides for the action button
-     */
-    readonly UNSAFE_className?: string;
-    /**
-     * Callback when an action gets clicked
-     */
-    onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
+import type { MenuComposableProps, MenuContentComposableProps, MenuHeaderComposableProps, MenuItemComposableProps, MenuItemIconComposableProps, MenuLegacyProps, MenuSectionComposableProps, MenuSeparatorComposableProps, MenuTriggerComposableProps } from "./Menu.types";
+export declare function Menu(props: MenuLegacyProps): ReactElement;
+export declare function Menu(props: MenuComposableProps): ReactElement;
+export declare namespace Menu {
+    var Section: typeof MenuSectionComposable;
+    var Header: typeof MenuHeaderComposable;
+    var Item: React.ForwardRefExoticComponent<MenuItemComposableProps & React.RefAttributes<object>>;
+    var Trigger: React.ForwardRefExoticComponent<MenuTriggerComposableProps & React.RefAttributes<HTMLDivElement>>;
+    var Content: typeof MenuContentComposable;
+    var Separator: typeof MenuSeparatorComposable;
+    var ItemIcon: typeof MenuItemIconComposable;
+    var ItemLabel: typeof MenuItemLabelComposable;
+    var HeaderLabel: typeof MenuHeaderLabel;
 }
+export declare function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }: MenuLegacyProps): React.JSX.Element;
+declare function MenuContentComposable({ children, UNSAFE_style, UNSAFE_className, }: MenuContentComposableProps): React.JSX.Element;
+declare function MenuSeparatorComposable({ UNSAFE_style, UNSAFE_className, }: MenuSeparatorComposableProps): React.JSX.Element;
+declare function MenuSectionComposable({ children, UNSAFE_style, UNSAFE_className, ariaLabel, }: MenuSectionComposableProps): React.JSX.Element;
+declare function MenuHeaderComposable(props: MenuHeaderComposableProps): React.JSX.Element;
+declare function MenuItemIconComposable(props: MenuItemIconComposableProps): React.JSX.Element;
+declare function MenuItemLabelComposable(props: {
+    readonly children: string;
+}): React.JSX.Element;
+declare function MenuHeaderLabel(props: {
+    readonly children: React.ReactNode;
+}): React.JSX.Element;
+export {};

package/dist/Menu/Menu.types.d.ts

@@ -0,0 +1,183 @@
+import type { IconColorNames, IconNames } from "@jobber/design";
+import type React from "react";
+import type { CSSProperties, ReactElement, ReactNode } from "react";
+import type { IconProps } from "../Icon";
+export interface MenuLegacyProps extends MenuBaseProps {
+    /**
+     * Custom menu activator. If this is not provided a default [… More] will be used.
+     */
+    readonly activator?: ReactElement;
+    /**
+     * Collection of action items.
+     */
+    readonly items: SectionProps[];
+}
+interface MenuBaseProps {
+    /**
+     * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        menu?: string;
+        header?: string;
+        action?: string;
+    };
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        menu?: CSSProperties;
+        header?: CSSProperties;
+        action?: CSSProperties;
+    };
+}
+export interface MenuComposableProps extends MenuBaseProps {
+    /**
+     * Composable children-based API.
+     * The first child must be the Menu.Trigger
+     * The second child must be the Menu.Content
+     */
+    readonly children: ReactNode;
+    /**
+     * Used to make the menu a Controlled Component.
+     */
+    readonly open?: boolean;
+    /**
+     * This sets the default open state of the menu.
+     * By default the menu is closed.
+     * For use when the component is being used as an Uncontrolled Component.
+     */
+    readonly defaultOpen?: boolean;
+    /**
+     * Callback when the menu is opened or closed
+     */
+    readonly onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * Backwards-compatible props for the items-based Menu API.
+ * Existing imports of `MenuProps` will continue to refer to the legacy shape.
+ */
+export type MenuProps = MenuLegacyProps;
+export interface SectionProps {
+    /**
+     * Defines the section header to further explain the group of actions.
+     */
+    header?: string;
+    /**
+     * List of actions.
+     */
+    actions: ActionProps[];
+}
+export interface SectionHeaderProps {
+    readonly text: string;
+    readonly UNSAFE_style?: CSSProperties;
+    readonly UNSAFE_className?: string;
+}
+export interface ActionProps {
+    /**
+     * Action label
+     */
+    readonly label: string;
+    /**
+     * Parent Section Label
+     */
+    readonly sectionLabel?: string;
+    /**
+     * Visual cue for the action label
+     */
+    readonly icon?: IconNames;
+    /**
+     * Color for the icon. Defaults to "icon".
+     */
+    readonly iconColor?: IconColorNames;
+    /**
+     * Visual style for the action button
+     */
+    readonly destructive?: boolean;
+    /**
+     * Inline style overrides for the action button
+     */
+    readonly UNSAFE_style?: CSSProperties;
+    /**
+     * Style class overrides for the action button
+     */
+    readonly UNSAFE_className?: string;
+    /**
+     * Callback when an action gets clicked
+     */
+    onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
+}
+interface UnsafeProps {
+    readonly UNSAFE_style?: CSSProperties;
+    readonly UNSAFE_className?: string;
+}
+export interface MenuSectionComposableProps extends UnsafeProps {
+    /**
+     * Section content
+     * If no Menu.Header is provided, ariaLabel must be provided to identify the section to assistive technologies
+     */
+    readonly children: ReactNode;
+    /**
+     * Accessible label for the section
+     */
+    readonly ariaLabel?: string;
+}
+export interface MenuHeaderComposableProps extends UnsafeProps {
+    readonly children: ReactNode;
+}
+export interface MenuItemComposableProps extends UnsafeProps {
+    /**
+     * Apply destructive styling to the item label and icon.
+     */
+    readonly destructive?: boolean;
+    /**
+     * Item content.
+     */
+    readonly children: ReactNode;
+    readonly onClick?: (event?: React.MouseEvent) => void;
+    /**
+     * String representation of the item's content.
+     * Required for typeahead functionality.
+     */
+    readonly textValue: string;
+    /**
+     * Href for the item. When provided, renders as a link item.
+     */
+    readonly href?: string;
+    /**
+     * Target window for the link.
+     */
+    readonly target?: string;
+    /**
+     * Rel attribute for the link.
+     */
+    readonly rel?: string;
+}
+export interface MenuItemIconComposableProps extends IconProps {
+}
+export interface MenuContentComposableProps extends UnsafeProps {
+    readonly children: ReactNode;
+}
+export interface MenuTriggerComposableProps {
+    /**
+     * Accessible name for the trigger.
+     */
+    readonly ariaLabel?: string;
+    /**
+     * Trigger content.
+     * This MUST be an interactive element, such as Button. Note that any onClick is ignored.
+     * If you want to access the open event, use the onOpenChange on the Menu component.
+     * If it does not have an interactive role, or a focus style it will have issues.
+     */
+    readonly children: ReactNode;
+}
+export interface MenuSeparatorComposableProps extends UnsafeProps {
+}
+export type AnimationState = "unmounted" | "hidden" | "visible";
+export interface MenuMobileUnderlayProps {
+    readonly animation: AnimationState;
+}
+export {};

package/dist/Menu/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const SMALL_SCREEN_BREAKPOINT = 490;
+export declare const MENU_OFFSET = 6;
+export declare const MENU_MAX_HEIGHT_PERCENTAGE = 72;
+export declare const Y_TRANSLATION_DESKTOP = 10;
+export declare const Y_TRANSLATION_MOBILE = 150;
+export declare const MENU_ANIMATION_CONFIG: {
+    duration: number;
+    type: string;
+};
+export declare const OVERLAY_ANIMATION_CONFIG: {
+    duration: number;
+    type: string;
+};

package/dist/Menu/index.cjs

@@ -8,6 +8,8 @@ require('@jobber/hooks');
 require('../floating-ui.react-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
+require('../Tree-cjs.js');
+require('../clsx-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../tslib.es6-cjs.js');

package/dist/Menu/index.d.ts

@@ -1 +1,2 @@
-export { Menu, type SectionProps, type ActionProps, type MenuProps, } from "./Menu";
+export { Menu } from "./Menu";
+export type { SectionProps, ActionProps, MenuProps } from "./Menu.types";

package/dist/Menu/index.mjs

@@ -6,6 +6,8 @@ import '@jobber/hooks';
 import '../floating-ui.react-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
+import '../Tree-es.js';
+import '../clsx-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../tslib.es6-es.js';