@launchpad-ui/menu 0.6.6-alpha.0 → 0.6.6-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/Menu.d.ts ADDED
@@ -0,0 +1,43 @@
1
+ import type { FocusManager } from '@react-aria/focus';
2
+ import type { ReactElement, ReactNode } from 'react';
3
+ declare type ControlledMenuProps<T> = {
4
+ children: ReactNode;
5
+ onSelect?: (item: T) => void;
6
+ /**
7
+ * Menus items are rendered using react-virtual for
8
+ * additional rendering performance.
9
+ */
10
+ enableVirtualization?: boolean;
11
+ /**
12
+ * Class name to be applied to all MenuItem and MenuItemLink components
13
+ * in the menu.
14
+ */
15
+ menuItemClassName?: string;
16
+ /**
17
+ * Sets the width of the menu. This is especially useful when using virtual items
18
+ * since the width cannot be automatically set by the widest element.
19
+ */
20
+ size?: 'sm' | 'md' | 'lg' | 'xl';
21
+ /**
22
+ * Sets the number out of elements rendered outside of the view window
23
+ * when using virtualization
24
+ */
25
+ overscan?: number;
26
+ /**
27
+ * Sets the height for each menu item when using virtualization.
28
+ *
29
+ */
30
+ itemHeight?: number;
31
+ 'data-test-id'?: string;
32
+ };
33
+ declare type MenuProps<T extends number | string> = ControlledMenuProps<T>;
34
+ declare const Menu: <T extends string | number>(props: MenuProps<T>) => JSX.Element;
35
+ declare type ItemVirtualizerProps<T> = Omit<ControlledMenuProps<T>, 'children'> & {
36
+ items: ReactElement[] | null;
37
+ searchElement?: ReactElement | null;
38
+ focusManager: FocusManager;
39
+ };
40
+ declare const ItemVirtualizer: <T extends string | number>(props: ItemVirtualizerProps<T>) => JSX.Element;
41
+ export { Menu, ItemVirtualizer };
42
+ export type { MenuProps, ItemVirtualizerProps };
43
+ //# sourceMappingURL=Menu.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../src/Menu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA4BpE,aAAK,mBAAmB,CAAC,CAAC,IAAI;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,aAAK,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,mBAAmB,CAAC,CAAC,CAAC,CAAC;AAEnE,QAAA,MAAM,IAAI,iEAyHT,CAAC;AAEF,aAAK,oBAAoB,CAAC,CAAC,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,KAAK,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,YAAY,EAAE,YAAY,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,eAAe,4EAoNpB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC"}
@@ -0,0 +1,11 @@
1
+ import type { MenuProps } from './Menu';
2
+ import type { ComponentPropsWithRef } from 'react';
3
+ import './styles/Menu.css';
4
+ declare type MenuBaseProps = ComponentPropsWithRef<'div'> & {
5
+ isVirtual?: boolean;
6
+ size?: MenuProps<string>['size'];
7
+ };
8
+ declare const MenuBase: import("react").ForwardRefExoticComponent<Pick<MenuBaseProps, "key" | "size" | keyof import("react").HTMLAttributes<HTMLDivElement> | "isVirtual"> & import("react").RefAttributes<HTMLDivElement>>;
9
+ export { MenuBase };
10
+ export type { MenuBaseProps };
11
+ //# sourceMappingURL=MenuBase.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuBase.d.ts","sourceRoot":"","sources":["../src/MenuBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAKnD,OAAO,mBAAmB,CAAC;AAE3B,aAAK,aAAa,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,QAAQ,qMAUb,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
@@ -0,0 +1,11 @@
1
+ import type { SeparatorProps } from '@react-aria/separator';
2
+ import type { RefObject } from 'react';
3
+ import './styles/Menu.css';
4
+ declare type MenuDividerProps = SeparatorProps & {
5
+ innerRef?: RefObject<HTMLDivElement>;
6
+ 'data-test-id'?: string;
7
+ };
8
+ declare const MenuDivider: ({ elementType, orientation, innerRef, "data-test-id": testId, }: MenuDividerProps) => JSX.Element;
9
+ export { MenuDivider };
10
+ export type { MenuDividerProps };
11
+ //# sourceMappingURL=MenuDivider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuDivider.d.ts","sourceRoot":"","sources":["../src/MenuDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,mBAAmB,CAAC;AAE3B,aAAK,gBAAgB,GAAG,cAAc,GAAG;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,WAAW,oEAKd,gBAAgB,gBAOlB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
@@ -0,0 +1,48 @@
1
+ import type { Icon } from '@launchpad-ui/icons';
2
+ import type { PopoverPlacement } from '@launchpad-ui/popover';
3
+ import type { ComponentPropsWithRef, ElementType, PropsWithRef, ReactElement } from 'react';
4
+ import { Tooltip } from '@launchpad-ui/tooltip';
5
+ import { Link } from 'react-router-dom';
6
+ import './styles/Menu.css';
7
+ declare type Merge<T, U> = Omit<T, keyof U> & U;
8
+ declare type PropsWithComponent<P, T extends ElementType> = P & {
9
+ component?: T;
10
+ };
11
+ declare type PolymorphicPropsWithRef<P, T extends ElementType> = Merge<T extends keyof JSX.IntrinsicElements ? PropsWithRef<JSX.IntrinsicElements[T]> : ComponentPropsWithRef<T>, PropsWithComponent<P, T>>;
12
+ declare type MenuItemOwnProps = {
13
+ isHighlighted?: boolean;
14
+ icon?: typeof Icon | null;
15
+ disabled?: boolean;
16
+ nested?: boolean;
17
+ groupHeader?: boolean;
18
+ tooltip?: string | ReactElement;
19
+ tooltipOptions?: typeof Tooltip;
20
+ tooltipPlacement?: PopoverPlacement;
21
+ asChild?: boolean;
22
+ 'data-test-id'?: string;
23
+ };
24
+ declare const defaultElement = "button";
25
+ declare type MenuItemProps<P, T extends ElementType = typeof defaultElement> = PolymorphicPropsWithRef<(MenuItemOwnProps & {
26
+ item: P;
27
+ }) | (MenuItemOwnProps & {
28
+ item?: undefined;
29
+ }), T>;
30
+ declare const MenuItem: <P, T extends ElementType<any> = "button">({ ...props }: MenuItemProps<P, T>) => JSX.Element;
31
+ declare type MenuItemLinkOwnProps = {
32
+ disabled?: boolean;
33
+ useHistory?: boolean;
34
+ newTab?: boolean;
35
+ };
36
+ declare type MenuItemLinkProps<P, T extends ElementType = typeof Link> = Merge<Omit<MenuItemProps<P, T>, 'component' | 'item'>, MenuItemLinkOwnProps> & ({
37
+ item?: undefined;
38
+ } | {
39
+ item: P;
40
+ });
41
+ declare const MenuItemLink: <P, T extends ElementType<any> = import("react").ForwardRefExoticComponent<import("react-router-dom").LinkProps & import("react").RefAttributes<HTMLAnchorElement>>>({ to, disabled, useHistory, newTab, children, ...props }: Omit<Omit<MenuItemProps<P, T>, "item" | "component">, keyof MenuItemLinkOwnProps> & MenuItemLinkOwnProps & ({
42
+ item?: undefined;
43
+ } | {
44
+ item: P;
45
+ })) => JSX.Element;
46
+ export { MenuItem, MenuItemLink };
47
+ export type { MenuItemProps, MenuItemLinkProps };
48
+ //# sourceMappingURL=MenuItem.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../src/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5F,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAIhD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,mBAAmB,CAAC;AAG3B,aAAK,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAExC,aAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,IAAI,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC;AAE1E,aAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,IAAI,KAAK,CAC5D,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GACjC,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,GACtC,qBAAqB,CAAC,CAAC,CAAC,EAC5B,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CACzB,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,cAAc,WAAW,CAAC;AAEhC,aAAK,aAAa,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,GAAG,OAAO,cAAc,IAAI,uBAAuB,CAC1F,CAAC,gBAAgB,GAAG;IAClB,IAAI,EAAE,CAAC,CAAC;CACT,CAAC,GACF,CAAC,gBAAgB,GAAG;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC,EACJ,CAAC,CACF,CAAC;AAEF,QAAA,MAAM,QAAQ,8FA0Eb,CAAC;AAEF,aAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,aAAK,iBAAiB,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,GAAG,OAAO,IAAI,IACzD,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC,EAAE,oBAAoB,CAAC,GAC1E,CACI;IACE,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GACD;IACE,IAAI,EAAE,CAAC,CAAC;CACT,CACJ,CAAC;AAKR,QAAA,MAAM,YAAY;WAVC,SAAS;;;kBA+B3B,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAClC,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,CAAC"}
@@ -0,0 +1,7 @@
1
+ import type { ComponentPropsWithRef } from 'react';
2
+ import './styles/Menu.css';
3
+ declare type MenuItemListProps = Omit<ComponentPropsWithRef<'div'>, 'className'>;
4
+ declare const MenuItemList: import("react").ForwardRefExoticComponent<Pick<MenuItemListProps, "key" | "id" | "color" | "translate" | "hidden" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;
5
+ export { MenuItemList };
6
+ export type { MenuItemListProps };
7
+ //# sourceMappingURL=MenuItemList.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuItemList.d.ts","sourceRoot":"","sources":["../src/MenuItemList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,mBAAmB,CAAC;AAE3B,aAAK,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC;AAEzE,QAAA,MAAM,YAAY,4lJAIhB,CAAC;AAIH,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
@@ -0,0 +1,13 @@
1
+ import type { ChangeEvent } from 'react';
2
+ import './styles/Menu.css';
3
+ declare type MenuSearchProps = {
4
+ ariaLabel?: string;
5
+ value?: string;
6
+ placeholder?: string;
7
+ onChange?(event: ChangeEvent<HTMLInputElement>): void;
8
+ 'data-test-id'?: string;
9
+ };
10
+ declare const MenuSearch: import("react").ForwardRefExoticComponent<MenuSearchProps & import("react").RefAttributes<HTMLInputElement>>;
11
+ export { MenuSearch };
12
+ export type { MenuSearchProps };
13
+ //# sourceMappingURL=MenuSearch.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MenuSearch.d.ts","sourceRoot":"","sources":["../src/MenuSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAKzC,OAAO,mBAAmB,CAAC;AAE3B,aAAK,eAAe,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,UAAU,8GAkBd,CAAC;AAIH,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
@@ -0,0 +1,13 @@
1
+ export type { MenuBaseProps } from './MenuBase';
2
+ export type { MenuDividerProps } from './MenuDivider';
3
+ export type { MenuItemProps, MenuItemLinkProps } from './MenuItem';
4
+ export type { MenuItemListProps } from './MenuItemList';
5
+ export type { MenuSearchProps } from './MenuSearch';
6
+ export type { MenuProps } from './Menu';
7
+ export { MenuBase } from './MenuBase';
8
+ export { MenuDivider } from './MenuDivider';
9
+ export { MenuItem, MenuItemLink } from './MenuItem';
10
+ export { MenuItemList } from './MenuItemList';
11
+ export { MenuSearch } from './MenuSearch';
12
+ export { Menu } from './Menu';
13
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACnE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}
@@ -0,0 +1,452 @@
1
+ import './style.css';
2
+ import { cx } from "classix";
3
+ import { forwardRef, useCallback, useMemo, Children, cloneElement, useRef, useId, useState, useEffect } from "react";
4
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
5
+ import { useSeparator } from "@react-aria/separator";
6
+ import { Tooltip } from "@launchpad-ui/tooltip";
7
+ import { Slot } from "@radix-ui/react-slot";
8
+ import { FocusRing, useFocusManager } from "@react-aria/focus";
9
+ import { Link } from "react-router-dom";
10
+ import { TextField } from "@launchpad-ui/form";
11
+ import { useVirtual } from "react-virtual";
12
+ const Menu$1 = "";
13
+ const MenuBase = forwardRef(({
14
+ children,
15
+ size,
16
+ isVirtual,
17
+ ...props
18
+ }, ref) => {
19
+ const classes = cx("Menu", isVirtual && "Menu--isVirtual", size && `MenuSize--${size}`);
20
+ return /* @__PURE__ */ jsx("div", {
21
+ ...props,
22
+ role: "menu",
23
+ className: classes,
24
+ ref,
25
+ children
26
+ });
27
+ });
28
+ MenuBase.displayName = "MenuBase";
29
+ const MenuDivider = ({
30
+ elementType = "div",
31
+ orientation,
32
+ innerRef,
33
+ "data-test-id": testId = "menu-divider"
34
+ }) => {
35
+ const {
36
+ separatorProps
37
+ } = useSeparator({
38
+ orientation,
39
+ elementType
40
+ });
41
+ return /* @__PURE__ */ jsx("div", {
42
+ ...separatorProps,
43
+ "data-test-id": testId,
44
+ ref: innerRef,
45
+ className: "Menu-divider"
46
+ });
47
+ };
48
+ const defaultElement = "button";
49
+ const MenuItem = ({
50
+ ...props
51
+ }) => {
52
+ const {
53
+ component,
54
+ children,
55
+ isHighlighted,
56
+ icon: Icon,
57
+ nested,
58
+ groupHeader,
59
+ item,
60
+ disabled,
61
+ className,
62
+ tooltip,
63
+ role = "menuitem",
64
+ tooltipPlacement,
65
+ onKeyDown,
66
+ tooltipOptions,
67
+ asChild,
68
+ "data-test-id": testId = "menu-item",
69
+ ...rest
70
+ } = props;
71
+ const Component = component || (asChild ? Slot : defaultElement);
72
+ const renderedItem = /* @__PURE__ */ jsx(FocusRing, {
73
+ focusRingClass: "has-focus",
74
+ children: /* @__PURE__ */ jsx(Component, {
75
+ ...rest,
76
+ disabled,
77
+ "aria-disabled": disabled ? disabled : void 0,
78
+ className: cx("Menu-item", className, isHighlighted && "is-highlighted", nested && "Menu-item--nested", groupHeader && "Menu-item--header"),
79
+ "data-test-id": testId,
80
+ role,
81
+ onKeyDown,
82
+ children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, {
83
+ children: [Icon && /* @__PURE__ */ jsx("span", {
84
+ className: "Menu-item-icon",
85
+ children: /* @__PURE__ */ jsx(Icon, {
86
+ size: "small"
87
+ })
88
+ }), children]
89
+ })
90
+ })
91
+ });
92
+ if (tooltip) {
93
+ return /* @__PURE__ */ jsx(Tooltip, {
94
+ content: tooltip,
95
+ rootElementStyle: {
96
+ display: "block"
97
+ },
98
+ allowBoundaryElementOverflow: true,
99
+ placement: tooltipPlacement ? tooltipPlacement : "bottom",
100
+ ...tooltipOptions || {},
101
+ children: renderedItem
102
+ });
103
+ }
104
+ return renderedItem;
105
+ };
106
+ const MenuItemLink = ({
107
+ to,
108
+ disabled = false,
109
+ useHistory = true,
110
+ newTab = false,
111
+ children,
112
+ ...props
113
+ }) => {
114
+ const finalProps = {
115
+ ...props,
116
+ disabled,
117
+ component: useHistory ? Link : "a",
118
+ [useHistory ? "to" : "href"]: disabled ? "" : to,
119
+ rel: newTab ? "noopener noreferrer" : void 0,
120
+ target: newTab ? "_blank" : void 0
121
+ };
122
+ return /* @__PURE__ */ jsx(MenuItem, {
123
+ ...finalProps,
124
+ children
125
+ });
126
+ };
127
+ const MenuItemList = forwardRef(({
128
+ children,
129
+ ...rest
130
+ }, ref) => /* @__PURE__ */ jsx("div", {
131
+ ...rest,
132
+ ref,
133
+ "data-test-id": "menu-item-list",
134
+ className: "Menu-item-list",
135
+ children
136
+ }));
137
+ MenuItemList.displayName = "MenuItemList";
138
+ const MenuSearch = forwardRef((props, ref) => {
139
+ const {
140
+ ariaLabel,
141
+ placeholder,
142
+ "data-test-id": testId = "menu-search",
143
+ ...finalProps
144
+ } = props;
145
+ return /* @__PURE__ */ jsx("div", {
146
+ className: "Menu-search",
147
+ children: /* @__PURE__ */ jsx(TextField, {
148
+ ...finalProps,
149
+ ref,
150
+ className: "Menu-search-input",
151
+ tiny: true,
152
+ type: "search",
153
+ "data-test-id": testId,
154
+ autoComplete: "off",
155
+ placeholder,
156
+ "aria-label": ariaLabel || "Search"
157
+ })
158
+ });
159
+ });
160
+ MenuSearch.displayName = "MenuSearch";
161
+ const createItemId = (index, id) => `${id}-item-${index}`;
162
+ const getNodeForIndex = (index, menuId) => index === null ? index : document.getElementById(createItemId(index, menuId));
163
+ const handleKeyboardInteractions = (event, keyHandlers) => {
164
+ var _a;
165
+ const ops = {
166
+ ArrowUp: keyHandlers.handleUp,
167
+ ArrowDown: keyHandlers.handleDown,
168
+ Enter: keyHandlers.handleEnter
169
+ };
170
+ if (ops[event.key]) {
171
+ event.preventDefault();
172
+ (_a = ops[event.key]) == null ? void 0 : _a.call(globalThis, event);
173
+ }
174
+ };
175
+ const chainEventHandlers = (...handlers) => (event) => {
176
+ handlers.forEach((h) => typeof h === "function" && h(event));
177
+ };
178
+ const Menu = (props) => {
179
+ const {
180
+ children,
181
+ menuItemClassName,
182
+ onSelect,
183
+ enableVirtualization,
184
+ itemHeight,
185
+ size,
186
+ overscan = 1,
187
+ "data-test-id": testId = "menu"
188
+ } = props;
189
+ const focusManager = useFocusManager();
190
+ const handleArrowDown = useCallback(() => {
191
+ focusManager.focusNext({
192
+ wrap: true
193
+ });
194
+ }, [focusManager]);
195
+ const handleArrowUp = useCallback(() => {
196
+ focusManager.focusPrevious({
197
+ wrap: true
198
+ });
199
+ }, [focusManager]);
200
+ const reduceItems = useMemo(() => {
201
+ const childrenProps = Children.toArray(children);
202
+ if (enableVirtualization) {
203
+ let searchElem = null;
204
+ let elements = [];
205
+ childrenProps.forEach((child) => {
206
+ switch (child.type) {
207
+ case MenuSearch:
208
+ searchElem = child;
209
+ break;
210
+ case MenuItem:
211
+ case MenuItemLink:
212
+ case MenuDivider:
213
+ elements = elements.concat(child);
214
+ break;
215
+ }
216
+ });
217
+ return {
218
+ items: elements,
219
+ searchElement: searchElem
220
+ };
221
+ }
222
+ return childrenProps.reduce(({
223
+ items,
224
+ searchElement
225
+ }, child) => {
226
+ var _a;
227
+ switch (child.type) {
228
+ case MenuSearch:
229
+ return {
230
+ items,
231
+ searchElement: cloneElement(child, {
232
+ onKeyDown: (e) => handleKeyboardInteractions(e, {
233
+ handleDown: handleArrowDown,
234
+ handleUp: handleArrowUp
235
+ })
236
+ })
237
+ };
238
+ case MenuItem:
239
+ case MenuItemLink:
240
+ return {
241
+ items: items.concat(child.props.disabled ? cloneElement(child, {
242
+ onClick: () => void 0,
243
+ onKeyDown: () => void 0,
244
+ tabIndex: -1,
245
+ disabled: true
246
+ }) : cloneElement(child, {
247
+ className: cx(child.props.className, menuItemClassName),
248
+ item: (_a = child.props.item) != null ? _a : items.length,
249
+ onClick: chainEventHandlers(child.props.onClick, () => {
250
+ var _a2;
251
+ onSelect == null ? void 0 : onSelect((_a2 = child.props.item) != null ? _a2 : items.length);
252
+ }),
253
+ onKeyDown: (e) => handleKeyboardInteractions(e, {
254
+ handleDown: handleArrowDown,
255
+ handleUp: handleArrowUp
256
+ })
257
+ })),
258
+ searchElement
259
+ };
260
+ case MenuDivider:
261
+ return {
262
+ items: items.concat(child),
263
+ searchElement
264
+ };
265
+ default:
266
+ return {
267
+ items,
268
+ searchElement
269
+ };
270
+ }
271
+ }, {
272
+ items: [],
273
+ searchElement: null
274
+ });
275
+ }, [children, enableVirtualization, menuItemClassName, handleArrowDown, handleArrowUp, onSelect]);
276
+ if (enableVirtualization) {
277
+ return /* @__PURE__ */ jsx(MenuBase, {
278
+ "data-test-id": testId,
279
+ isVirtual: true,
280
+ size,
281
+ children: /* @__PURE__ */ jsx(ItemVirtualizer, {
282
+ items: Children.toArray(reduceItems.items),
283
+ searchElement: reduceItems.searchElement,
284
+ overscan,
285
+ menuItemClassName,
286
+ onSelect,
287
+ itemHeight,
288
+ focusManager
289
+ })
290
+ });
291
+ }
292
+ return /* @__PURE__ */ jsxs(MenuBase, {
293
+ "data-test-id": testId,
294
+ size,
295
+ children: [reduceItems.searchElement, /* @__PURE__ */ jsx(MenuItemList, {
296
+ role: "presentation",
297
+ children: reduceItems.items
298
+ })]
299
+ });
300
+ };
301
+ const ItemVirtualizer = (props) => {
302
+ const {
303
+ overscan,
304
+ searchElement,
305
+ itemHeight = 33,
306
+ menuItemClassName,
307
+ items,
308
+ focusManager,
309
+ onSelect
310
+ } = props;
311
+ const menuId = useRef(`menu-ctrl-${useId()}`);
312
+ const focusedItemIndex = useRef(null);
313
+ const parentRef = useRef(null);
314
+ const searchRef = useRef();
315
+ const [nextFocusValue, setNextFocusValue] = useState(null);
316
+ const hasSearch = !!searchElement;
317
+ const lastVirtualItemIndex = items ? items.length - 1 : 0;
318
+ const rowVirtualizer = useVirtual({
319
+ size: items !== null ? items.length : 0,
320
+ parentRef,
321
+ estimateSize: useCallback(() => itemHeight, [itemHeight]),
322
+ overscan
323
+ });
324
+ const focusSearchBar = useCallback(() => {
325
+ var _a, _b;
326
+ rowVirtualizer.scrollToIndex(0);
327
+ (_b = (_a = searchRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
328
+ }, [rowVirtualizer]);
329
+ const focusMenuItem = useCallback((index) => {
330
+ rowVirtualizer.scrollToIndex(index);
331
+ setNextFocusValue(index);
332
+ }, [rowVirtualizer]);
333
+ const handleKeyboardFocusInteraction = useCallback((direction) => {
334
+ if (focusedItemIndex.current === null || focusedItemIndex.current === void 0) {
335
+ return;
336
+ }
337
+ const nextIndex = direction === "next" ? focusedItemIndex.current + 1 : focusedItemIndex.current - 1;
338
+ const shouldWrap = direction === "next" && focusedItemIndex.current === lastVirtualItemIndex || direction === "previous" && focusedItemIndex.current === 0;
339
+ if (shouldWrap) {
340
+ if (hasSearch) {
341
+ focusSearchBar();
342
+ } else {
343
+ focusMenuItem(direction === "next" ? 0 : lastVirtualItemIndex);
344
+ }
345
+ return;
346
+ }
347
+ switch (direction) {
348
+ case "next":
349
+ rowVirtualizer.scrollToIndex(nextIndex);
350
+ focusManager.focusNext();
351
+ break;
352
+ case "previous":
353
+ rowVirtualizer.scrollToIndex(nextIndex);
354
+ focusManager.focusPrevious();
355
+ break;
356
+ }
357
+ }, [focusManager, focusMenuItem, focusSearchBar, hasSearch, lastVirtualItemIndex, rowVirtualizer]);
358
+ const getItemProps = useCallback((itemElem, index) => {
359
+ const childProps = itemElem.props;
360
+ switch (itemElem.type) {
361
+ case MenuItem:
362
+ case MenuItemLink:
363
+ return {
364
+ className: cx(childProps.className, menuItemClassName),
365
+ onKeyDown: childProps.disabled ? () => void 0 : (e) => handleKeyboardFocusKeydown(e, {
366
+ handleFocusBackward: handleKeyboardFocusInteraction,
367
+ handleFocusForward: handleKeyboardFocusInteraction
368
+ }),
369
+ onFocus: chainEventHandlers(childProps.onFocus, () => {
370
+ focusedItemIndex.current = index;
371
+ }),
372
+ id: createItemId(index, menuId.current),
373
+ onBlur: chainEventHandlers(childProps.onBlur, () => {
374
+ focusedItemIndex.current = null;
375
+ }),
376
+ onClick: childProps.disabled ? () => void 0 : chainEventHandlers(childProps.onClick, () => {
377
+ onSelect == null ? void 0 : onSelect(childProps.item);
378
+ })
379
+ };
380
+ default:
381
+ return {};
382
+ }
383
+ }, [handleKeyboardFocusInteraction, menuItemClassName, onSelect]);
384
+ useEffect(() => {
385
+ if (nextFocusValue !== null) {
386
+ requestAnimationFrame(() => {
387
+ const element = getNodeForIndex(nextFocusValue, menuId.current);
388
+ element == null ? void 0 : element.focus();
389
+ });
390
+ setNextFocusValue(null);
391
+ }
392
+ }, [nextFocusValue]);
393
+ const handleKeyboardFocusKeydown = (e, callbacks) => {
394
+ var _a, _b;
395
+ const keyOps = ["Tab", "ArrowUp", "ArrowDown"];
396
+ if (keyOps.includes(e.key)) {
397
+ e.preventDefault();
398
+ e.stopPropagation();
399
+ if (e.key === "Tab" && e.shiftKey || e.key === "ArrowUp") {
400
+ (_a = callbacks.handleFocusBackward) == null ? void 0 : _a.call(callbacks, "previous");
401
+ } else if (e.key === "ArrowDown" || e.key === "Tab") {
402
+ (_b = callbacks.handleFocusForward) == null ? void 0 : _b.call(callbacks, "next");
403
+ }
404
+ }
405
+ };
406
+ const renderSearch = useMemo(() => searchElement ? cloneElement(searchElement, {
407
+ onKeyDown: (e) => handleKeyboardFocusKeydown(e, {
408
+ handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),
409
+ handleFocusForward: () => focusMenuItem(0)
410
+ }),
411
+ ref: searchRef
412
+ }) : null, [searchElement, lastVirtualItemIndex, focusMenuItem]);
413
+ const renderItems = useMemo(() => rowVirtualizer.virtualItems.map((virtualRow) => {
414
+ if (!items) {
415
+ return null;
416
+ }
417
+ const elem = items[virtualRow.index];
418
+ return /* @__PURE__ */ jsx("div", {
419
+ ref: elem.type !== MenuItem || elem.type !== MenuItemLink ? virtualRow.measureRef : void 0,
420
+ role: "presentation",
421
+ className: cx("VirtualMenu-item"),
422
+ style: {
423
+ transform: `translateY(${virtualRow.start}px)`
424
+ },
425
+ children: cloneElement(elem, getItemProps(elem, virtualRow.index))
426
+ }, virtualRow.index);
427
+ }), [rowVirtualizer.virtualItems, items, getItemProps]);
428
+ return /* @__PURE__ */ jsxs(Fragment, {
429
+ children: [renderSearch, /* @__PURE__ */ jsx(MenuItemList, {
430
+ ref: parentRef,
431
+ role: "presentation",
432
+ children: /* @__PURE__ */ jsx("div", {
433
+ role: "presentation",
434
+ className: "VirtualMenu-item-list",
435
+ style: {
436
+ height: `${rowVirtualizer.totalSize}px`
437
+ },
438
+ children: renderItems
439
+ })
440
+ })]
441
+ });
442
+ };
443
+ export {
444
+ Menu,
445
+ MenuBase,
446
+ MenuDivider,
447
+ MenuItem,
448
+ MenuItemLink,
449
+ MenuItemList,
450
+ MenuSearch
451
+ };
452
+ //# sourceMappingURL=index.es.js.map