@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 +43 -0
- package/dist/Menu.d.ts.map +1 -0
- package/dist/MenuBase.d.ts +11 -0
- package/dist/MenuBase.d.ts.map +1 -0
- package/dist/MenuDivider.d.ts +11 -0
- package/dist/MenuDivider.d.ts.map +1 -0
- package/dist/MenuItem.d.ts +48 -0
- package/dist/MenuItem.d.ts.map +1 -0
- package/dist/MenuItemList.d.ts +7 -0
- package/dist/MenuItemList.d.ts.map +1 -0
- package/dist/MenuSearch.d.ts +13 -0
- package/dist/MenuSearch.d.ts.map +1 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.es.js +452 -0
- package/dist/index.es.js.map +1 -0
- package/dist/index.js +452 -0
- package/dist/index.js.map +1 -0
- package/dist/style.css +222 -0
- package/dist/utils.d.ts +7 -0
- package/dist/utils.d.ts.map +1 -0
- package/package.json +5 -5
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"}
|
package/dist/index.d.ts
ADDED
@@ -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"}
|
package/dist/index.es.js
ADDED
@@ -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
|