@launchpad-ui/menu 0.4.4 → 0.4.7
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.map +1 -1
- package/dist/MenuBase.d.ts.map +1 -1
- package/dist/MenuItemList.d.ts +1 -1
- package/dist/index.es.js +18 -16
- package/dist/index.es.js.map +3 -3
- package/dist/index.js +12 -25
- package/dist/index.js.map +4 -4
- package/package.json +8 -10
package/dist/Menu.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../src/Menu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../src/Menu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AA4BzD,aAAK,mBAAmB,CAAC,CAAC,IAAI;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,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,QAAQ,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,aAAK,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,mBAAmB,CAAC,CAAC,CAAC,CAAC;AAEnE,QAAA,MAAM,IAAI,iEAwHT,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,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAC1C,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"}
|
package/dist/MenuBase.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"MenuBase.d.ts","sourceRoot":"","sources":["../src/MenuBase.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,OAAO,mBAAmB,CAAC;AAE3B,aAAK,aAAa,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAAG;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,QAAQ,
|
1
|
+
{"version":3,"file":"MenuBase.d.ts","sourceRoot":"","sources":["../src/MenuBase.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,OAAO,mBAAmB,CAAC;AAE3B,aAAK,aAAa,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAAG;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,QAAQ,qMAUb,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
package/dist/MenuItemList.d.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import './styles/Menu.css';
|
3
3
|
declare type MenuItemListProps = Omit<React.ComponentPropsWithRef<'div'>, 'className'>;
|
4
|
-
declare const MenuItemList: import("react").ForwardRefExoticComponent<Pick<MenuItemListProps, "key" | "id" | "color" | "translate" | "hidden" | "
|
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
5
|
export { MenuItemList };
|
6
6
|
export type { MenuItemListProps };
|
7
7
|
//# sourceMappingURL=MenuItemList.d.ts.map
|
package/dist/index.es.js
CHANGED
@@ -1,17 +1,11 @@
|
|
1
|
-
// ../../scripts/react-shim.js
|
2
|
-
import * as React from "react";
|
3
|
-
|
4
1
|
// src/MenuBase.tsx
|
5
|
-
import cx from "
|
2
|
+
import { cx } from "classix";
|
6
3
|
import { forwardRef } from "react";
|
7
4
|
import "./styles/Menu.css";
|
8
5
|
import { jsx } from "react/jsx-runtime";
|
9
6
|
var MenuBase = forwardRef(
|
10
7
|
({ children, size, isVirtual, ...props }, ref) => {
|
11
|
-
const classes = cx("Menu", {
|
12
|
-
"Menu--isVirtual": isVirtual,
|
13
|
-
[`MenuSize--${size}`]: size
|
14
|
-
});
|
8
|
+
const classes = cx("Menu", isVirtual && "Menu--isVirtual", size && `MenuSize--${size}`);
|
15
9
|
return /* @__PURE__ */ jsx("div", {
|
16
10
|
...props,
|
17
11
|
role: "menu",
|
@@ -44,7 +38,7 @@ import { IconSize } from "@launchpad-ui/icons";
|
|
44
38
|
import { Tooltip } from "@launchpad-ui/tooltip";
|
45
39
|
import { Slot } from "@radix-ui/react-slot";
|
46
40
|
import { FocusRing } from "@react-aria/focus";
|
47
|
-
import cx2 from "
|
41
|
+
import { cx as cx2 } from "classix";
|
48
42
|
import { Link } from "react-router-dom";
|
49
43
|
import "./styles/Menu.css";
|
50
44
|
import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
|
@@ -80,9 +74,9 @@ var MenuItem = ({
|
|
80
74
|
className: cx2(
|
81
75
|
"Menu-item",
|
82
76
|
className,
|
83
|
-
|
84
|
-
|
85
|
-
|
77
|
+
isHighlighted && "is-highlighted",
|
78
|
+
nested && "Menu-item--nested",
|
79
|
+
groupHeader && "Menu-item--header"
|
86
80
|
),
|
87
81
|
role,
|
88
82
|
onKeyDown,
|
@@ -171,10 +165,18 @@ MenuSearch.displayName = "MenuSearch";
|
|
171
165
|
|
172
166
|
// src/Menu.tsx
|
173
167
|
import { useFocusManager } from "@react-aria/focus";
|
174
|
-
import cx3 from "
|
175
|
-
import {
|
168
|
+
import { cx as cx3 } from "classix";
|
169
|
+
import {
|
170
|
+
Children,
|
171
|
+
cloneElement,
|
172
|
+
useCallback,
|
173
|
+
useEffect,
|
174
|
+
useId,
|
175
|
+
useMemo,
|
176
|
+
useRef,
|
177
|
+
useState
|
178
|
+
} from "react";
|
176
179
|
import { useVirtual } from "react-virtual";
|
177
|
-
import { v4 } from "uuid";
|
178
180
|
|
179
181
|
// src/utils.ts
|
180
182
|
var createItemId = (index, id) => `${id}-item-${index}`;
|
@@ -315,7 +317,7 @@ var ItemVirtualizer = (props) => {
|
|
315
317
|
focusManager,
|
316
318
|
onSelect
|
317
319
|
} = props;
|
318
|
-
const menuId = useRef(`menu-ctrl-${
|
320
|
+
const menuId = useRef(`menu-ctrl-${useId()}`);
|
319
321
|
const focusedItemIndex = useRef(null);
|
320
322
|
const parentRef = useRef(null);
|
321
323
|
const searchRef = useRef();
|
package/dist/index.es.js.map
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
|
-
"sources": ["
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { MenuSize } from './types';\n\nimport cx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport './styles/Menu.css';\n\ntype MenuBaseProps = React.ComponentPropsWithRef<'div'> & {\n isVirtual?: boolean;\n size?: MenuSize;\n};\n\nconst MenuBase = forwardRef<HTMLDivElement, MenuBaseProps>(\n ({ children, size, isVirtual, ...props }, ref) => {\n const classes = cx('Menu', {\n 'Menu--isVirtual': isVirtual,\n [`MenuSize--${size}`]: size,\n });\n\n return (\n <div {...props} role=\"menu\" className={classes} ref={ref}>\n {children}\n </div>\n );\n }\n);\n\nMenuBase.displayName = 'MenuBase';\n\nexport { MenuBase };\nexport type { MenuBaseProps };\n", "import type { SeparatorProps } from '@react-aria/separator';\n\nimport { useSeparator } from '@react-aria/separator';\n\nimport './styles/Menu.css';\n\ntype MenuDividerProps = SeparatorProps & {\n innerRef?: React.RefObject<HTMLDivElement>;\n};\n\nconst MenuDivider = ({ elementType = 'div', orientation, innerRef }: MenuDividerProps) => {\n const { separatorProps } = useSeparator({\n orientation,\n elementType,\n });\n\n return <div {...separatorProps} ref={innerRef} className=\"Menu-divider\" />;\n};\n\nexport { MenuDivider };\nexport type { MenuDividerProps };\n", "import type { Icon } from '@launchpad-ui/icons';\nimport type { PopoverPlacement } from '@launchpad-ui/popover';\n\nimport { IconSize } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { Slot } from '@radix-ui/react-slot';\nimport { FocusRing } from '@react-aria/focus';\nimport cx from 'clsx';\nimport { Link } from 'react-router-dom';\n\nimport './styles/Menu.css';\n\n// Merge two types and get rid of overlapping definitions\ntype Merge<T, U> = Omit<T, keyof U> & U;\n\ntype PropsWithComponent<P, T extends React.ElementType> = P & { component?: T };\n\ntype PolymorphicPropsWithRef<P, T extends React.ElementType> = Merge<\n T extends keyof JSX.IntrinsicElements\n ? React.PropsWithRef<JSX.IntrinsicElements[T]>\n : React.ComponentPropsWithRef<T>,\n PropsWithComponent<P, T>\n>;\n\ntype MenuItemOwnProps = {\n isHighlighted?: boolean;\n icon?: typeof Icon | null;\n disabled?: boolean;\n nested?: boolean;\n groupHeader?: boolean;\n tooltip?: string | React.ReactElement;\n tooltipOptions?: typeof Tooltip;\n tooltipPlacement?: PopoverPlacement;\n asChild?: boolean;\n};\n\nconst defaultElement = 'button';\n\ntype MenuItemProps<\n P,\n T extends React.ElementType = typeof defaultElement\n> = PolymorphicPropsWithRef<\n | (MenuItemOwnProps & {\n item: P; // Infer the type if it is included\n })\n | (MenuItemOwnProps & {\n item?: undefined;\n }),\n T\n>;\n\nconst MenuItem = <P, T extends React.ElementType = typeof defaultElement>({\n ...props\n}: MenuItemProps<P, T>) => {\n const {\n // TODO: remove component prop once we migrate over to asChild format\n component,\n children,\n isHighlighted,\n icon: Icon,\n nested,\n groupHeader,\n item,\n disabled,\n className,\n tooltip,\n role = 'menuitem',\n tooltipPlacement,\n onKeyDown,\n tooltipOptions,\n asChild,\n ...rest\n } = props;\n\n const Component: React.ElementType = component || (asChild ? Slot : defaultElement);\n\n const renderedItem = (\n <FocusRing focusRingClass=\"has-focus\">\n <Component\n {...rest}\n disabled={disabled}\n aria-disabled={disabled ? disabled : undefined}\n className={cx(\n 'Menu-item',\n className,\n { 'is-highlighted': isHighlighted },\n { 'Menu-item--nested': nested },\n { 'Menu-item--header': groupHeader }\n )}\n role={role}\n onKeyDown={onKeyDown}\n >\n {asChild ? (\n children\n ) : (\n <>\n {Icon && (\n <span className=\"Menu-item-icon\">\n <Icon size={IconSize.SMALL} />\n </span>\n )}\n {children}\n </>\n )}\n </Component>\n </FocusRing>\n );\n\n if (tooltip) {\n return (\n <Tooltip\n content={tooltip}\n rootElementStyle={{ display: 'block' }}\n allowBoundaryElementOverflow\n placement={tooltipPlacement ? tooltipPlacement : 'bottom'}\n {...(tooltipOptions || {})}\n >\n {renderedItem}\n </Tooltip>\n );\n }\n\n return renderedItem;\n};\n\ntype MenuItemLinkOwnProps = {\n disabled?: boolean;\n useHistory?: boolean;\n newTab?: boolean;\n};\n\ntype MenuItemLinkProps<P, T extends React.ElementType = typeof Link> =\n | Merge<Omit<MenuItemProps<P, T>, 'component' | 'item'>, MenuItemLinkOwnProps> &\n (\n | {\n item?: undefined;\n }\n | {\n item: P;\n }\n );\n\n// By default, this is a Link component whenever useHistory is\n// explicitly not false\n// TODO: deprecate this component\nconst MenuItemLink = <P, T extends React.ElementType = typeof Link>({\n to,\n disabled = false,\n useHistory = true,\n newTab = false,\n children,\n ...props\n}: MenuItemLinkProps<P, T>) => {\n const finalProps = {\n ...props,\n disabled,\n component: useHistory ? Link : ('a' as const),\n [useHistory ? 'to' : 'href']: disabled ? '' : to,\n rel: newTab ? 'noopener noreferrer' : undefined,\n target: newTab ? '_blank' : undefined,\n };\n\n // Ideally if this item is disabled, it should be a button rather\n // than a link https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md\n\n return <MenuItem {...finalProps}>{children}</MenuItem>;\n};\n\nexport { MenuItem, MenuItemLink };\nexport type { MenuItemProps, MenuItemLinkProps };\n", "import { forwardRef } from 'react';\n\nimport './styles/Menu.css';\n\ntype MenuItemListProps = Omit<React.ComponentPropsWithRef<'div'>, 'className'>;\n\nconst MenuItemList = forwardRef<HTMLDivElement, MenuItemListProps>(({ children, ...rest }, ref) => (\n <div {...rest} ref={ref} data-test-id=\"menu-item-list\" className=\"Menu-item-list\">\n {children}\n </div>\n));\n\nMenuItemList.displayName = 'MenuItemList';\n\nexport { MenuItemList };\nexport type { MenuItemListProps };\n", "import type { ChangeEvent } from 'react';\n\nimport { TextField } from '@launchpad-ui/form';\nimport { forwardRef } from 'react';\n\nimport './styles/Menu.css';\n\ntype MenuSearchProps = {\n ariaLabel?: string;\n value?: string;\n placeholder?: string;\n onChange?(event: ChangeEvent<HTMLInputElement>): void;\n};\n\nconst MenuSearch = forwardRef<HTMLInputElement, MenuSearchProps>((props, ref) => {\n const { ariaLabel, placeholder, ...finalProps } = props;\n\n return (\n <div className=\"Menu-search\">\n <TextField\n {...finalProps}\n ref={ref}\n className=\"Menu-search-input\"\n tiny\n type=\"search\"\n autoComplete=\"off\"\n placeholder={placeholder}\n aria-label={ariaLabel || 'Search'}\n />\n </div>\n );\n});\n\nMenuSearch.displayName = 'MenuSearch';\n\nexport { MenuSearch };\nexport type { MenuSearchProps };\n", "import type { MenuItemProps } from './MenuItem';\nimport type { MenuSize } from './types';\nimport type { FocusManager } from '@react-aria/focus';\nimport type { KeyboardEvent, ReactElement } from 'react';\n\nimport { useFocusManager } from '@react-aria/focus';\nimport cx from 'clsx';\nimport { Children, cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { v4 } from 'uuid';\n\nimport { MenuBase } from './MenuBase';\nimport { MenuDivider } from './MenuDivider';\nimport { MenuItem, MenuItemLink } from './MenuItem';\nimport { MenuItemList } from './MenuItemList';\nimport { MenuSearch } from './MenuSearch';\nimport {\n chainEventHandlers,\n createItemId,\n getNodeForIndex,\n handleKeyboardInteractions,\n} from './utils';\n\ntype ControlledMenuProps<T> = {\n children: React.ReactNode;\n onSelect?: (item: T) => void;\n /**\n * Menus items are rendered using react-virtual for\n * additional rendering performance.\n */\n enableVirtualization?: boolean;\n /**\n * Class name to be applied to all MenuItem and MenuItemLink components\n * in the menu.\n */\n menuItemClassName?: string;\n /**\n * Sets the width of the menu. This is especially useful when using virtual items\n * since the width cannot be automatically set by the widest element.\n */\n size?: MenuSize;\n /**\n * Sets the number out of elements rendered outside of the view window\n * when using virtualization\n */\n overscan?: number;\n /**\n * Sets the height for each menu item when using virtualization.\n *\n */\n itemHeight?: number;\n};\n\ntype MenuProps<T extends number | string> = ControlledMenuProps<T>;\n\nconst Menu = <T extends number | string>(props: MenuProps<T>) => {\n const {\n children,\n menuItemClassName,\n onSelect,\n enableVirtualization,\n itemHeight,\n size,\n overscan = 1,\n } = props;\n\n const focusManager = useFocusManager();\n\n const handleArrowDown = useCallback(() => {\n focusManager.focusNext({ wrap: true });\n }, [focusManager]);\n\n const handleArrowUp = useCallback(() => {\n focusManager.focusPrevious({ wrap: true });\n }, [focusManager]);\n\n const reduceItems = useMemo(() => {\n const childrenProps = Children.toArray(children);\n if (enableVirtualization) {\n // the virtualized menu has its own handlers and props\n let searchElem = null;\n let elements: ReactElement[] = [];\n (childrenProps as ReactElement[]).forEach((child: ReactElement) => {\n switch (child.type) {\n case MenuSearch:\n searchElem = child;\n break;\n case MenuItem:\n case MenuItemLink:\n case MenuDivider:\n elements = elements.concat(child);\n break;\n default:\n break;\n }\n });\n return { items: elements, searchElement: searchElem };\n }\n\n return (childrenProps as ReactElement[]).reduce(\n (\n { items, searchElement }: { items: ReactElement[]; searchElement: null | ReactElement },\n child\n ) => {\n switch (child.type) {\n case MenuSearch:\n return {\n items,\n searchElement: cloneElement(child, {\n onKeyDown: (e: KeyboardEvent) =>\n handleKeyboardInteractions(e, {\n handleDown: handleArrowDown,\n handleUp: handleArrowUp,\n }),\n }),\n };\n case MenuItem:\n case MenuItemLink:\n return {\n items: items.concat(\n child.props.disabled\n ? cloneElement(child, {\n onClick: () => undefined,\n onKeyDown: () => undefined,\n tabIndex: -1,\n disabled: true,\n })\n : cloneElement(child, {\n className: cx(child.props.className, menuItemClassName),\n item: child.props.item ?? items.length,\n // set focus on the first menu item if there is no search input, and set in the tab order\n onClick: chainEventHandlers(child.props.onClick, () => {\n onSelect?.(child.props.item ?? items.length);\n }),\n onKeyDown: (e: KeyboardEvent) =>\n handleKeyboardInteractions(e, {\n handleDown: handleArrowDown,\n handleUp: handleArrowUp,\n }),\n })\n ),\n searchElement,\n };\n case MenuDivider:\n return { items: items.concat(child), searchElement };\n default:\n return { items, searchElement };\n }\n },\n { items: [], searchElement: null }\n );\n }, [children, enableVirtualization, menuItemClassName, handleArrowDown, handleArrowUp, onSelect]);\n\n if (enableVirtualization) {\n return (\n <MenuBase isVirtual size={size}>\n <ItemVirtualizer<T>\n items={Children.toArray(reduceItems.items) as ReactElement[]}\n searchElement={reduceItems.searchElement}\n overscan={overscan}\n menuItemClassName={menuItemClassName}\n onSelect={onSelect}\n itemHeight={itemHeight}\n focusManager={focusManager}\n />\n </MenuBase>\n );\n }\n\n return (\n <MenuBase size={size}>\n {reduceItems.searchElement}\n <MenuItemList role=\"presentation\">{reduceItems.items}</MenuItemList>\n </MenuBase>\n );\n};\n\ntype ItemVirtualizerProps<T> = Omit<ControlledMenuProps<T>, 'children'> & {\n items: ReactElement[] | null;\n searchElement?: React.ReactElement | null;\n focusManager: FocusManager;\n};\n\nconst ItemVirtualizer = <T extends number | string>(props: ItemVirtualizerProps<T>) => {\n const {\n overscan,\n searchElement,\n itemHeight = 33,\n menuItemClassName,\n items: items,\n focusManager,\n onSelect,\n } = props;\n\n const menuId = useRef(`menu-ctrl-${v4()}`);\n\n const focusedItemIndex = useRef<number | null>(null);\n const parentRef = useRef<HTMLDivElement | null>(null);\n const searchRef = useRef<HTMLInputElement>();\n\n const [nextFocusValue, setNextFocusValue] = useState<number | null>(null);\n\n const hasSearch = !!searchElement;\n\n const lastVirtualItemIndex = items ? items.length - 1 : 0;\n\n const rowVirtualizer = useVirtual({\n size: items !== null ? items.length : 0,\n parentRef,\n estimateSize: useCallback(() => itemHeight, [itemHeight]),\n overscan,\n });\n\n const focusSearchBar = useCallback(() => {\n rowVirtualizer.scrollToIndex(0);\n searchRef.current?.focus?.();\n }, [rowVirtualizer]);\n\n /**\n * Scrolls to the menu item with the index provided and\n * then manually focuses it using a side effect in useEffect\n */\n const focusMenuItem = useCallback(\n (index: number) => {\n rowVirtualizer.scrollToIndex(index);\n setNextFocusValue(index);\n },\n [rowVirtualizer]\n );\n\n const handleKeyboardFocusInteraction = useCallback(\n (direction: 'next' | 'previous') => {\n if (focusedItemIndex.current === null || focusedItemIndex.current === undefined) {\n return;\n }\n const nextIndex =\n direction === 'next' ? focusedItemIndex.current + 1 : focusedItemIndex.current - 1;\n const shouldWrap =\n (direction === 'next' && focusedItemIndex.current === lastVirtualItemIndex) ||\n (direction === 'previous' && focusedItemIndex.current === 0);\n if (shouldWrap) {\n // we are at the end of the list so we will\n // scroll back to the beginning of the list\n if (hasSearch) {\n focusSearchBar();\n } else {\n // if at end, wrap to beginning, else focus last item\n focusMenuItem(direction === 'next' ? 0 : lastVirtualItemIndex);\n }\n return;\n }\n switch (direction) {\n case 'next':\n rowVirtualizer.scrollToIndex(nextIndex);\n focusManager.focusNext();\n break;\n case 'previous':\n rowVirtualizer.scrollToIndex(nextIndex);\n focusManager.focusPrevious();\n break;\n default:\n break;\n }\n },\n [focusManager, focusMenuItem, focusSearchBar, hasSearch, lastVirtualItemIndex, rowVirtualizer]\n );\n\n const getItemProps = useCallback(\n (itemElem: ReactElement, index: number) => {\n const childProps = itemElem.props as MenuItemProps<T>;\n switch (itemElem.type) {\n case MenuItem:\n case MenuItemLink:\n return {\n className: cx(childProps.className, menuItemClassName),\n // set focus on the first menu item if there is no search input, and set in the tab order\n onKeyDown: childProps.disabled\n ? () => undefined\n : (e: KeyboardEvent) =>\n handleKeyboardFocusKeydown(e, {\n handleFocusBackward: handleKeyboardFocusInteraction,\n handleFocusForward: handleKeyboardFocusInteraction,\n }),\n onFocus: chainEventHandlers(childProps.onFocus, () => {\n focusedItemIndex.current = index;\n }),\n id: createItemId(index, menuId.current),\n onBlur: chainEventHandlers(childProps.onBlur, () => {\n focusedItemIndex.current = null;\n }),\n onClick: childProps.disabled\n ? () => undefined\n : chainEventHandlers(childProps.onClick, () => {\n onSelect?.(childProps.item as T);\n }),\n } as MenuItemProps<T>;\n default:\n return {};\n }\n },\n [handleKeyboardFocusInteraction, menuItemClassName, onSelect]\n );\n\n useEffect(() => {\n if (nextFocusValue !== null) {\n requestAnimationFrame(() => {\n const element = getNodeForIndex(nextFocusValue, menuId.current);\n element?.focus();\n });\n setNextFocusValue(null);\n }\n }, [nextFocusValue]);\n\n /**\n * Calls handleFocusForward when the user is attempting to focus forward using\n * tab or arrow keys. Calls handleFocusBackward when the users wants to move backward.\n */\n const handleKeyboardFocusKeydown = (\n e: KeyboardEvent,\n callbacks: Record<\n 'handleFocusForward' | 'handleFocusBackward',\n (direction: 'next' | 'previous') => void\n >\n ) => {\n const keyOps = ['Tab', 'ArrowUp', 'ArrowDown'];\n if (keyOps.includes(e.key)) {\n e.preventDefault();\n e.stopPropagation();\n if ((e.key === 'Tab' && e.shiftKey) || e.key === 'ArrowUp') {\n callbacks.handleFocusBackward?.('previous');\n } else if (e.key === 'ArrowDown' || e.key === 'Tab') {\n callbacks.handleFocusForward?.('next');\n }\n }\n };\n\n const renderSearch = useMemo(\n () =>\n searchElement\n ? cloneElement(searchElement, {\n onKeyDown: (e: KeyboardEvent) =>\n handleKeyboardFocusKeydown(e, {\n handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),\n handleFocusForward: () => focusMenuItem(0),\n }),\n ref: searchRef,\n })\n : null,\n [searchElement, lastVirtualItemIndex, focusMenuItem]\n );\n\n const renderItems = useMemo(\n () =>\n rowVirtualizer.virtualItems.map((virtualRow) => {\n if (!items) {\n return null;\n }\n const elem = items[virtualRow.index];\n return (\n <div\n key={virtualRow.index}\n ref={\n elem.type !== MenuItem || elem.type !== MenuItemLink\n ? virtualRow.measureRef\n : undefined\n }\n role=\"presentation\"\n className={cx('VirtualMenu-item')}\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n >\n {cloneElement(elem, getItemProps(elem, virtualRow.index))}\n </div>\n );\n }),\n [rowVirtualizer.virtualItems, items, getItemProps]\n );\n\n return (\n <>\n {renderSearch}\n <MenuItemList ref={parentRef} role=\"presentation\">\n <div\n role=\"presentation\"\n className=\"VirtualMenu-item-list\"\n style={{\n height: `${rowVirtualizer.totalSize}px`,\n }}\n >\n {renderItems}\n </div>\n </MenuItemList>\n </>\n );\n};\n\nexport { Menu, ItemVirtualizer };\nexport type { MenuProps, ItemVirtualizerProps };\n", "import type { EventHandler, KeyboardEvent, SyntheticEvent } from 'react';\n\nconst createItemId = (index: number, id: string) => `${id}-item-${index}`;\n\nconst getNodeForIndex = (index: number | null, menuId: string) =>\n index === null ? index : document.getElementById(createItemId(index, menuId));\n\nconst handleKeyboardInteractions = (\n event: React.KeyboardEvent,\n keyHandlers: Partial<\n Record<'handleUp' | 'handleDown' | 'handleEnter', (e: KeyboardEvent) => void>\n >\n) => {\n const ops = {\n ArrowUp: keyHandlers.handleUp,\n ArrowDown: keyHandlers.handleDown,\n Enter: keyHandlers.handleEnter,\n } as Record<string, (e: KeyboardEvent) => void | undefined>;\n\n if (ops[event.key]) {\n event.preventDefault();\n ops[event.key]?.call(globalThis, event);\n }\n};\n\nconst chainEventHandlers =\n (...handlers: Array<EventHandler<SyntheticEvent> | undefined>) =>\n (event: SyntheticEvent) => {\n handlers.forEach((h) => typeof h === 'function' && h(event));\n };\n\nexport { createItemId, getNodeForIndex, handleKeyboardInteractions, chainEventHandlers };\n", "enum MenuSize {\n SMALL = 'sm',\n MEDIUM = 'md',\n LARGE = 'lg',\n EXTRA_LARGE = 'xl',\n}\n\nexport { MenuSize };\n"],
|
5
|
-
"mappings": ";
|
3
|
+
"sources": ["../src/MenuBase.tsx", "../src/MenuDivider.tsx", "../src/MenuItem.tsx", "../src/MenuItemList.tsx", "../src/MenuSearch.tsx", "../src/Menu.tsx", "../src/utils.ts", "../src/types.ts"],
|
4
|
+
"sourcesContent": ["import type { MenuSize } from './types';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport './styles/Menu.css';\n\ntype MenuBaseProps = React.ComponentPropsWithRef<'div'> & {\n isVirtual?: boolean;\n size?: MenuSize;\n};\n\nconst MenuBase = forwardRef<HTMLDivElement, MenuBaseProps>(\n ({ children, size, isVirtual, ...props }, ref) => {\n const classes = cx('Menu', isVirtual && 'Menu--isVirtual', size && `MenuSize--${size}`);\n\n return (\n <div {...props} role=\"menu\" className={classes} ref={ref}>\n {children}\n </div>\n );\n }\n);\n\nMenuBase.displayName = 'MenuBase';\n\nexport { MenuBase };\nexport type { MenuBaseProps };\n", "import type { SeparatorProps } from '@react-aria/separator';\n\nimport { useSeparator } from '@react-aria/separator';\n\nimport './styles/Menu.css';\n\ntype MenuDividerProps = SeparatorProps & {\n innerRef?: React.RefObject<HTMLDivElement>;\n};\n\nconst MenuDivider = ({ elementType = 'div', orientation, innerRef }: MenuDividerProps) => {\n const { separatorProps } = useSeparator({\n orientation,\n elementType,\n });\n\n return <div {...separatorProps} ref={innerRef} className=\"Menu-divider\" />;\n};\n\nexport { MenuDivider };\nexport type { MenuDividerProps };\n", "import type { Icon } from '@launchpad-ui/icons';\nimport type { PopoverPlacement } from '@launchpad-ui/popover';\n\nimport { IconSize } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { Slot } from '@radix-ui/react-slot';\nimport { FocusRing } from '@react-aria/focus';\nimport { cx } from 'classix';\nimport { Link } from 'react-router-dom';\n\nimport './styles/Menu.css';\n\n// Merge two types and get rid of overlapping definitions\ntype Merge<T, U> = Omit<T, keyof U> & U;\n\ntype PropsWithComponent<P, T extends React.ElementType> = P & { component?: T };\n\ntype PolymorphicPropsWithRef<P, T extends React.ElementType> = Merge<\n T extends keyof JSX.IntrinsicElements\n ? React.PropsWithRef<JSX.IntrinsicElements[T]>\n : React.ComponentPropsWithRef<T>,\n PropsWithComponent<P, T>\n>;\n\ntype MenuItemOwnProps = {\n isHighlighted?: boolean;\n icon?: typeof Icon | null;\n disabled?: boolean;\n nested?: boolean;\n groupHeader?: boolean;\n tooltip?: string | React.ReactElement;\n tooltipOptions?: typeof Tooltip;\n tooltipPlacement?: PopoverPlacement;\n asChild?: boolean;\n};\n\nconst defaultElement = 'button';\n\ntype MenuItemProps<\n P,\n T extends React.ElementType = typeof defaultElement\n> = PolymorphicPropsWithRef<\n | (MenuItemOwnProps & {\n item: P; // Infer the type if it is included\n })\n | (MenuItemOwnProps & {\n item?: undefined;\n }),\n T\n>;\n\nconst MenuItem = <P, T extends React.ElementType = typeof defaultElement>({\n ...props\n}: MenuItemProps<P, T>) => {\n const {\n // TODO: remove component prop once we migrate over to asChild format\n component,\n children,\n isHighlighted,\n icon: Icon,\n nested,\n groupHeader,\n item,\n disabled,\n className,\n tooltip,\n role = 'menuitem',\n tooltipPlacement,\n onKeyDown,\n tooltipOptions,\n asChild,\n ...rest\n } = props;\n\n const Component: React.ElementType = component || (asChild ? Slot : defaultElement);\n\n const renderedItem = (\n <FocusRing focusRingClass=\"has-focus\">\n <Component\n {...rest}\n disabled={disabled}\n aria-disabled={disabled ? disabled : undefined}\n className={cx(\n 'Menu-item',\n className,\n isHighlighted && 'is-highlighted',\n nested && 'Menu-item--nested',\n groupHeader && 'Menu-item--header'\n )}\n role={role}\n onKeyDown={onKeyDown}\n >\n {asChild ? (\n children\n ) : (\n <>\n {Icon && (\n <span className=\"Menu-item-icon\">\n <Icon size={IconSize.SMALL} />\n </span>\n )}\n {children}\n </>\n )}\n </Component>\n </FocusRing>\n );\n\n if (tooltip) {\n return (\n <Tooltip\n content={tooltip}\n rootElementStyle={{ display: 'block' }}\n allowBoundaryElementOverflow\n placement={tooltipPlacement ? tooltipPlacement : 'bottom'}\n {...(tooltipOptions || {})}\n >\n {renderedItem}\n </Tooltip>\n );\n }\n\n return renderedItem;\n};\n\ntype MenuItemLinkOwnProps = {\n disabled?: boolean;\n useHistory?: boolean;\n newTab?: boolean;\n};\n\ntype MenuItemLinkProps<P, T extends React.ElementType = typeof Link> =\n | Merge<Omit<MenuItemProps<P, T>, 'component' | 'item'>, MenuItemLinkOwnProps> &\n (\n | {\n item?: undefined;\n }\n | {\n item: P;\n }\n );\n\n// By default, this is a Link component whenever useHistory is\n// explicitly not false\n// TODO: deprecate this component\nconst MenuItemLink = <P, T extends React.ElementType = typeof Link>({\n to,\n disabled = false,\n useHistory = true,\n newTab = false,\n children,\n ...props\n}: MenuItemLinkProps<P, T>) => {\n const finalProps = {\n ...props,\n disabled,\n component: useHistory ? Link : ('a' as const),\n [useHistory ? 'to' : 'href']: disabled ? '' : to,\n rel: newTab ? 'noopener noreferrer' : undefined,\n target: newTab ? '_blank' : undefined,\n };\n\n // Ideally if this item is disabled, it should be a button rather\n // than a link https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md\n\n return <MenuItem {...finalProps}>{children}</MenuItem>;\n};\n\nexport { MenuItem, MenuItemLink };\nexport type { MenuItemProps, MenuItemLinkProps };\n", "import { forwardRef } from 'react';\n\nimport './styles/Menu.css';\n\ntype MenuItemListProps = Omit<React.ComponentPropsWithRef<'div'>, 'className'>;\n\nconst MenuItemList = forwardRef<HTMLDivElement, MenuItemListProps>(({ children, ...rest }, ref) => (\n <div {...rest} ref={ref} data-test-id=\"menu-item-list\" className=\"Menu-item-list\">\n {children}\n </div>\n));\n\nMenuItemList.displayName = 'MenuItemList';\n\nexport { MenuItemList };\nexport type { MenuItemListProps };\n", "import type { ChangeEvent } from 'react';\n\nimport { TextField } from '@launchpad-ui/form';\nimport { forwardRef } from 'react';\n\nimport './styles/Menu.css';\n\ntype MenuSearchProps = {\n ariaLabel?: string;\n value?: string;\n placeholder?: string;\n onChange?(event: ChangeEvent<HTMLInputElement>): void;\n};\n\nconst MenuSearch = forwardRef<HTMLInputElement, MenuSearchProps>((props, ref) => {\n const { ariaLabel, placeholder, ...finalProps } = props;\n\n return (\n <div className=\"Menu-search\">\n <TextField\n {...finalProps}\n ref={ref}\n className=\"Menu-search-input\"\n tiny\n type=\"search\"\n autoComplete=\"off\"\n placeholder={placeholder}\n aria-label={ariaLabel || 'Search'}\n />\n </div>\n );\n});\n\nMenuSearch.displayName = 'MenuSearch';\n\nexport { MenuSearch };\nexport type { MenuSearchProps };\n", "import type { MenuItemProps } from './MenuItem';\nimport type { MenuSize } from './types';\nimport type { FocusManager } from '@react-aria/focus';\nimport type { KeyboardEvent, ReactElement } from 'react';\n\nimport { useFocusManager } from '@react-aria/focus';\nimport { cx } from 'classix';\nimport {\n Children,\n cloneElement,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useVirtual } from 'react-virtual';\n\nimport { MenuBase } from './MenuBase';\nimport { MenuDivider } from './MenuDivider';\nimport { MenuItem, MenuItemLink } from './MenuItem';\nimport { MenuItemList } from './MenuItemList';\nimport { MenuSearch } from './MenuSearch';\nimport {\n chainEventHandlers,\n createItemId,\n getNodeForIndex,\n handleKeyboardInteractions,\n} from './utils';\n\ntype ControlledMenuProps<T> = {\n children: React.ReactNode;\n onSelect?: (item: T) => void;\n /**\n * Menus items are rendered using react-virtual for\n * additional rendering performance.\n */\n enableVirtualization?: boolean;\n /**\n * Class name to be applied to all MenuItem and MenuItemLink components\n * in the menu.\n */\n menuItemClassName?: string;\n /**\n * Sets the width of the menu. This is especially useful when using virtual items\n * since the width cannot be automatically set by the widest element.\n */\n size?: MenuSize;\n /**\n * Sets the number out of elements rendered outside of the view window\n * when using virtualization\n */\n overscan?: number;\n /**\n * Sets the height for each menu item when using virtualization.\n *\n */\n itemHeight?: number;\n};\n\ntype MenuProps<T extends number | string> = ControlledMenuProps<T>;\n\nconst Menu = <T extends number | string>(props: MenuProps<T>) => {\n const {\n children,\n menuItemClassName,\n onSelect,\n enableVirtualization,\n itemHeight,\n size,\n overscan = 1,\n } = props;\n\n const focusManager = useFocusManager();\n\n const handleArrowDown = useCallback(() => {\n focusManager.focusNext({ wrap: true });\n }, [focusManager]);\n\n const handleArrowUp = useCallback(() => {\n focusManager.focusPrevious({ wrap: true });\n }, [focusManager]);\n\n const reduceItems = useMemo(() => {\n const childrenProps = Children.toArray(children);\n if (enableVirtualization) {\n // the virtualized menu has its own handlers and props\n let searchElem = null;\n let elements: ReactElement[] = [];\n (childrenProps as ReactElement[]).forEach((child: ReactElement) => {\n switch (child.type) {\n case MenuSearch:\n searchElem = child;\n break;\n case MenuItem:\n case MenuItemLink:\n case MenuDivider:\n elements = elements.concat(child);\n break;\n default:\n break;\n }\n });\n return { items: elements, searchElement: searchElem };\n }\n\n return (childrenProps as ReactElement[]).reduce(\n (\n { items, searchElement }: { items: ReactElement[]; searchElement: null | ReactElement },\n child\n ) => {\n switch (child.type) {\n case MenuSearch:\n return {\n items,\n searchElement: cloneElement(child, {\n onKeyDown: (e: KeyboardEvent) =>\n handleKeyboardInteractions(e, {\n handleDown: handleArrowDown,\n handleUp: handleArrowUp,\n }),\n }),\n };\n case MenuItem:\n case MenuItemLink:\n return {\n items: items.concat(\n child.props.disabled\n ? cloneElement(child, {\n onClick: () => undefined,\n onKeyDown: () => undefined,\n tabIndex: -1,\n disabled: true,\n })\n : cloneElement(child, {\n className: cx(child.props.className, menuItemClassName),\n item: child.props.item ?? items.length,\n // set focus on the first menu item if there is no search input, and set in the tab order\n onClick: chainEventHandlers(child.props.onClick, () => {\n onSelect?.(child.props.item ?? items.length);\n }),\n onKeyDown: (e: KeyboardEvent) =>\n handleKeyboardInteractions(e, {\n handleDown: handleArrowDown,\n handleUp: handleArrowUp,\n }),\n })\n ),\n searchElement,\n };\n case MenuDivider:\n return { items: items.concat(child), searchElement };\n default:\n return { items, searchElement };\n }\n },\n { items: [], searchElement: null }\n );\n }, [children, enableVirtualization, menuItemClassName, handleArrowDown, handleArrowUp, onSelect]);\n\n if (enableVirtualization) {\n return (\n <MenuBase isVirtual size={size}>\n <ItemVirtualizer<T>\n items={Children.toArray(reduceItems.items) as ReactElement[]}\n searchElement={reduceItems.searchElement}\n overscan={overscan}\n menuItemClassName={menuItemClassName}\n onSelect={onSelect}\n itemHeight={itemHeight}\n focusManager={focusManager}\n />\n </MenuBase>\n );\n }\n\n return (\n <MenuBase size={size}>\n {reduceItems.searchElement}\n <MenuItemList role=\"presentation\">{reduceItems.items}</MenuItemList>\n </MenuBase>\n );\n};\n\ntype ItemVirtualizerProps<T> = Omit<ControlledMenuProps<T>, 'children'> & {\n items: ReactElement[] | null;\n searchElement?: React.ReactElement | null;\n focusManager: FocusManager;\n};\n\nconst ItemVirtualizer = <T extends number | string>(props: ItemVirtualizerProps<T>) => {\n const {\n overscan,\n searchElement,\n itemHeight = 33,\n menuItemClassName,\n items: items,\n focusManager,\n onSelect,\n } = props;\n\n const menuId = useRef(`menu-ctrl-${useId()}`);\n\n const focusedItemIndex = useRef<number | null>(null);\n const parentRef = useRef<HTMLDivElement | null>(null);\n const searchRef = useRef<HTMLInputElement>();\n\n const [nextFocusValue, setNextFocusValue] = useState<number | null>(null);\n\n const hasSearch = !!searchElement;\n\n const lastVirtualItemIndex = items ? items.length - 1 : 0;\n\n const rowVirtualizer = useVirtual({\n size: items !== null ? items.length : 0,\n parentRef,\n estimateSize: useCallback(() => itemHeight, [itemHeight]),\n overscan,\n });\n\n const focusSearchBar = useCallback(() => {\n rowVirtualizer.scrollToIndex(0);\n searchRef.current?.focus?.();\n }, [rowVirtualizer]);\n\n /**\n * Scrolls to the menu item with the index provided and\n * then manually focuses it using a side effect in useEffect\n */\n const focusMenuItem = useCallback(\n (index: number) => {\n rowVirtualizer.scrollToIndex(index);\n setNextFocusValue(index);\n },\n [rowVirtualizer]\n );\n\n const handleKeyboardFocusInteraction = useCallback(\n (direction: 'next' | 'previous') => {\n if (focusedItemIndex.current === null || focusedItemIndex.current === undefined) {\n return;\n }\n const nextIndex =\n direction === 'next' ? focusedItemIndex.current + 1 : focusedItemIndex.current - 1;\n const shouldWrap =\n (direction === 'next' && focusedItemIndex.current === lastVirtualItemIndex) ||\n (direction === 'previous' && focusedItemIndex.current === 0);\n if (shouldWrap) {\n // we are at the end of the list so we will\n // scroll back to the beginning of the list\n if (hasSearch) {\n focusSearchBar();\n } else {\n // if at end, wrap to beginning, else focus last item\n focusMenuItem(direction === 'next' ? 0 : lastVirtualItemIndex);\n }\n return;\n }\n switch (direction) {\n case 'next':\n rowVirtualizer.scrollToIndex(nextIndex);\n focusManager.focusNext();\n break;\n case 'previous':\n rowVirtualizer.scrollToIndex(nextIndex);\n focusManager.focusPrevious();\n break;\n default:\n break;\n }\n },\n [focusManager, focusMenuItem, focusSearchBar, hasSearch, lastVirtualItemIndex, rowVirtualizer]\n );\n\n const getItemProps = useCallback(\n (itemElem: ReactElement, index: number) => {\n const childProps = itemElem.props as MenuItemProps<T>;\n switch (itemElem.type) {\n case MenuItem:\n case MenuItemLink:\n return {\n className: cx(childProps.className, menuItemClassName),\n // set focus on the first menu item if there is no search input, and set in the tab order\n onKeyDown: childProps.disabled\n ? () => undefined\n : (e: KeyboardEvent) =>\n handleKeyboardFocusKeydown(e, {\n handleFocusBackward: handleKeyboardFocusInteraction,\n handleFocusForward: handleKeyboardFocusInteraction,\n }),\n onFocus: chainEventHandlers(childProps.onFocus, () => {\n focusedItemIndex.current = index;\n }),\n id: createItemId(index, menuId.current),\n onBlur: chainEventHandlers(childProps.onBlur, () => {\n focusedItemIndex.current = null;\n }),\n onClick: childProps.disabled\n ? () => undefined\n : chainEventHandlers(childProps.onClick, () => {\n onSelect?.(childProps.item as T);\n }),\n } as MenuItemProps<T>;\n default:\n return {};\n }\n },\n [handleKeyboardFocusInteraction, menuItemClassName, onSelect]\n );\n\n useEffect(() => {\n if (nextFocusValue !== null) {\n requestAnimationFrame(() => {\n const element = getNodeForIndex(nextFocusValue, menuId.current);\n element?.focus();\n });\n setNextFocusValue(null);\n }\n }, [nextFocusValue]);\n\n /**\n * Calls handleFocusForward when the user is attempting to focus forward using\n * tab or arrow keys. Calls handleFocusBackward when the users wants to move backward.\n */\n const handleKeyboardFocusKeydown = (\n e: KeyboardEvent,\n callbacks: Record<\n 'handleFocusForward' | 'handleFocusBackward',\n (direction: 'next' | 'previous') => void\n >\n ) => {\n const keyOps = ['Tab', 'ArrowUp', 'ArrowDown'];\n if (keyOps.includes(e.key)) {\n e.preventDefault();\n e.stopPropagation();\n if ((e.key === 'Tab' && e.shiftKey) || e.key === 'ArrowUp') {\n callbacks.handleFocusBackward?.('previous');\n } else if (e.key === 'ArrowDown' || e.key === 'Tab') {\n callbacks.handleFocusForward?.('next');\n }\n }\n };\n\n const renderSearch = useMemo(\n () =>\n searchElement\n ? cloneElement(searchElement, {\n onKeyDown: (e: KeyboardEvent) =>\n handleKeyboardFocusKeydown(e, {\n handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),\n handleFocusForward: () => focusMenuItem(0),\n }),\n ref: searchRef,\n })\n : null,\n [searchElement, lastVirtualItemIndex, focusMenuItem]\n );\n\n const renderItems = useMemo(\n () =>\n rowVirtualizer.virtualItems.map((virtualRow) => {\n if (!items) {\n return null;\n }\n const elem = items[virtualRow.index];\n return (\n <div\n key={virtualRow.index}\n ref={\n elem.type !== MenuItem || elem.type !== MenuItemLink\n ? virtualRow.measureRef\n : undefined\n }\n role=\"presentation\"\n className={cx('VirtualMenu-item')}\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n >\n {cloneElement(elem, getItemProps(elem, virtualRow.index))}\n </div>\n );\n }),\n [rowVirtualizer.virtualItems, items, getItemProps]\n );\n\n return (\n <>\n {renderSearch}\n <MenuItemList ref={parentRef} role=\"presentation\">\n <div\n role=\"presentation\"\n className=\"VirtualMenu-item-list\"\n style={{\n height: `${rowVirtualizer.totalSize}px`,\n }}\n >\n {renderItems}\n </div>\n </MenuItemList>\n </>\n );\n};\n\nexport { Menu, ItemVirtualizer };\nexport type { MenuProps, ItemVirtualizerProps };\n", "import type { EventHandler, KeyboardEvent, SyntheticEvent } from 'react';\n\nconst createItemId = (index: number, id: string) => `${id}-item-${index}`;\n\nconst getNodeForIndex = (index: number | null, menuId: string) =>\n index === null ? index : document.getElementById(createItemId(index, menuId));\n\nconst handleKeyboardInteractions = (\n event: React.KeyboardEvent,\n keyHandlers: Partial<\n Record<'handleUp' | 'handleDown' | 'handleEnter', (e: KeyboardEvent) => void>\n >\n) => {\n const ops = {\n ArrowUp: keyHandlers.handleUp,\n ArrowDown: keyHandlers.handleDown,\n Enter: keyHandlers.handleEnter,\n } as Record<string, (e: KeyboardEvent) => void | undefined>;\n\n if (ops[event.key]) {\n event.preventDefault();\n ops[event.key]?.call(globalThis, event);\n }\n};\n\nconst chainEventHandlers =\n (...handlers: Array<EventHandler<SyntheticEvent> | undefined>) =>\n (event: SyntheticEvent) => {\n handlers.forEach((h) => typeof h === 'function' && h(event));\n };\n\nexport { createItemId, getNodeForIndex, handleKeyboardInteractions, chainEventHandlers };\n", "enum MenuSize {\n SMALL = 'sm',\n MEDIUM = 'md',\n LARGE = 'lg',\n EXTRA_LARGE = 'xl',\n}\n\nexport { MenuSize };\n"],
|
5
|
+
"mappings": ";AAEA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAE3B,OAAO;AAYD;AALN,IAAM,WAAW;AAAA,EACf,CAAC,EAAE,UAAU,MAAM,cAAc,MAAM,GAAG,QAAQ;AAChD,UAAM,UAAU,GAAG,QAAQ,aAAa,mBAAmB,QAAQ,aAAa,MAAM;AAEtF,WACE,oBAAC;AAAA,MAAK,GAAG;AAAA,MAAO,MAAK;AAAA,MAAO,WAAW;AAAA,MAAS;AAAA,MAC7C;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;;;ACtBvB,SAAS,oBAAoB;AAE7B,OAAO;AAYE,gBAAAA,YAAA;AANT,IAAM,cAAc,CAAC,EAAE,cAAc,OAAO,aAAa,SAAS,MAAwB;AACxF,QAAM,EAAE,eAAe,IAAI,aAAa;AAAA,IACtC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,gBAAAA,KAAC;AAAA,IAAK,GAAG;AAAA,IAAgB,KAAK;AAAA,IAAU,WAAU;AAAA,GAAe;AAC1E;;;ACdA,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,MAAAC,WAAU;AACnB,SAAS,YAAY;AAErB,OAAO;AAqFG,mBAGM,OAAAC,MAHN;AA3DV,IAAM,iBAAiB;AAevB,IAAM,WAAW,CAAyD;AAAA,KACrE;AACL,MAA2B;AACzB,QAAM;AAAA,IAEJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,EACL,IAAI;AAEJ,QAAM,YAA+B,cAAc,UAAU,OAAO;AAEpE,QAAM,eACJ,gBAAAA,KAAC;AAAA,IAAU,gBAAe;AAAA,IACxB,0BAAAA,KAAC;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,iBAAe,WAAW,WAAW;AAAA,MACrC,WAAWD;AAAA,QACT;AAAA,QACA;AAAA,QACA,iBAAiB;AAAA,QACjB,UAAU;AAAA,QACV,eAAe;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MAEC,oBACC,WAEA;AAAA,QACG;AAAA,kBACC,gBAAAC,KAAC;AAAA,YAAK,WAAU;AAAA,YACd,0BAAAA,KAAC;AAAA,cAAK,MAAM,SAAS;AAAA,aAAO;AAAA,WAC9B;AAAA,UAED;AAAA;AAAA,OACH;AAAA,KAEJ;AAAA,GACF;AAGF,MAAI,SAAS;AACX,WACE,gBAAAA,KAAC;AAAA,MACC,SAAS;AAAA,MACT,kBAAkB,EAAE,SAAS,QAAQ;AAAA,MACrC,8BAA4B;AAAA,MAC5B,WAAW,mBAAmB,mBAAmB;AAAA,MAChD,GAAI,kBAAkB,CAAC;AAAA,MAEvB;AAAA,KACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAsBA,IAAM,eAAe,CAA+C;AAAA,EAClE;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,SAAS;AAAA,EACT;AAAA,KACG;AACL,MAA+B;AAC7B,QAAM,aAAa;AAAA,IACjB,GAAG;AAAA,IACH;AAAA,IACA,WAAW,aAAa,OAAQ;AAAA,IAChC,CAAC,aAAa,OAAO,SAAS,WAAW,KAAK;AAAA,IAC9C,KAAK,SAAS,wBAAwB;AAAA,IACtC,QAAQ,SAAS,WAAW;AAAA,EAC9B;AAKA,SAAO,gBAAAA,KAAC;AAAA,IAAU,GAAG;AAAA,IAAa;AAAA,GAAS;AAC7C;;;ACtKA,SAAS,cAAAC,mBAAkB;AAE3B,OAAO;AAKL,gBAAAC,YAAA;AADF,IAAM,eAAeD,YAA8C,CAAC,EAAE,aAAa,KAAK,GAAG,QACzF,gBAAAC,KAAC;AAAA,EAAK,GAAG;AAAA,EAAM;AAAA,EAAU,gBAAa;AAAA,EAAiB,WAAU;AAAA,EAC9D;AAAA,CACH,CACD;AAED,aAAa,cAAc;;;ACV3B,SAAS,iBAAiB;AAC1B,SAAS,cAAAC,mBAAkB;AAE3B,OAAO;AAcD,gBAAAC,YAAA;AALN,IAAM,aAAaD,YAA8C,CAAC,OAAO,QAAQ;AAC/E,QAAM,EAAE,WAAW,gBAAgB,WAAW,IAAI;AAElD,SACE,gBAAAC,KAAC;AAAA,IAAI,WAAU;AAAA,IACb,0BAAAA,KAAC;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAU;AAAA,MACV,MAAI;AAAA,MACJ,MAAK;AAAA,MACL,cAAa;AAAA,MACb;AAAA,MACA,cAAY,aAAa;AAAA,KAC3B;AAAA,GACF;AAEJ,CAAC;AAED,WAAW,cAAc;;;AC5BzB,SAAS,uBAAuB;AAChC,SAAS,MAAAC,WAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;;;ACf3B,IAAM,eAAe,CAAC,OAAe,OAAe,GAAG,WAAW;AAElE,IAAM,kBAAkB,CAAC,OAAsB,WAC7C,UAAU,OAAO,QAAQ,SAAS,eAAe,aAAa,OAAO,MAAM,CAAC;AAE9E,IAAM,6BAA6B,CACjC,OACA,gBAGG;AACH,QAAM,MAAM;AAAA,IACV,SAAS,YAAY;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB,OAAO,YAAY;AAAA,EACrB;AAEA,MAAI,IAAI,MAAM,MAAM;AAClB,UAAM,eAAe;AACrB,QAAI,MAAM,MAAM,KAAK,YAAY,KAAK;AAAA,EACxC;AACF;AAEA,IAAM,qBACJ,IAAI,aACJ,CAAC,UAA0B;AACzB,WAAS,QAAQ,CAAC,MAAM,OAAO,MAAM,cAAc,EAAE,KAAK,CAAC;AAC7D;;;ADuIM,SAgOJ,YAAAC,WAhOI,OAAAC,MAcJ,QAAAC,aAdI;AArGR,IAAM,OAAO,CAA4B,UAAwB;AAC/D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,EACb,IAAI;AAEJ,QAAM,eAAe,gBAAgB;AAErC,QAAM,kBAAkB,YAAY,MAAM;AACxC,iBAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAAA,EACvC,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,gBAAgB,YAAY,MAAM;AACtC,iBAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAAA,EAC3C,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,gBAAgB,SAAS,QAAQ,QAAQ;AAC/C,QAAI,sBAAsB;AAExB,UAAI,aAAa;AACjB,UAAI,WAA2B,CAAC;AAChC,MAAC,cAAiC,QAAQ,CAAC,UAAwB;AACjE,gBAAQ,MAAM;AAAA,eACP;AACH,yBAAa;AACb;AAAA,eACG;AAAA,eACA;AAAA,eACA;AACH,uBAAW,SAAS,OAAO,KAAK;AAChC;AAAA;AAEA;AAAA;AAAA,MAEN,CAAC;AACD,aAAO,EAAE,OAAO,UAAU,eAAe,WAAW;AAAA,IACtD;AAEA,WAAQ,cAAiC;AAAA,MACvC,CACE,EAAE,OAAO,cAAc,GACvB,UACG;AACH,gBAAQ,MAAM;AAAA,eACP;AACH,mBAAO;AAAA,cACL;AAAA,cACA,eAAe,aAAa,OAAO;AAAA,gBACjC,WAAW,CAAC,MACV,2BAA2B,GAAG;AAAA,kBAC5B,YAAY;AAAA,kBACZ,UAAU;AAAA,gBACZ,CAAC;AAAA,cACL,CAAC;AAAA,YACH;AAAA,eACG;AAAA,eACA;AACH,mBAAO;AAAA,cACL,OAAO,MAAM;AAAA,gBACX,MAAM,MAAM,WACR,aAAa,OAAO;AAAA,kBAClB,SAAS,MAAM;AAAA,kBACf,WAAW,MAAM;AAAA,kBACjB,UAAU;AAAA,kBACV,UAAU;AAAA,gBACZ,CAAC,IACD,aAAa,OAAO;AAAA,kBAClB,WAAWC,IAAG,MAAM,MAAM,WAAW,iBAAiB;AAAA,kBACtD,MAAM,MAAM,MAAM,QAAQ,MAAM;AAAA,kBAEhC,SAAS,mBAAmB,MAAM,MAAM,SAAS,MAAM;AACrD,+BAAW,MAAM,MAAM,QAAQ,MAAM,MAAM;AAAA,kBAC7C,CAAC;AAAA,kBACD,WAAW,CAAC,MACV,2BAA2B,GAAG;AAAA,oBAC5B,YAAY;AAAA,oBACZ,UAAU;AAAA,kBACZ,CAAC;AAAA,gBACL,CAAC;AAAA,cACP;AAAA,cACA;AAAA,YACF;AAAA,eACG;AACH,mBAAO,EAAE,OAAO,MAAM,OAAO,KAAK,GAAG,cAAc;AAAA;AAEnD,mBAAO,EAAE,OAAO,cAAc;AAAA;AAAA,MAEpC;AAAA,MACA,EAAE,OAAO,CAAC,GAAG,eAAe,KAAK;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,UAAU,sBAAsB,mBAAmB,iBAAiB,eAAe,QAAQ,CAAC;AAEhG,MAAI,sBAAsB;AACxB,WACE,gBAAAF,KAAC;AAAA,MAAS,WAAS;AAAA,MAAC;AAAA,MAClB,0BAAAA,KAAC;AAAA,QACC,OAAO,SAAS,QAAQ,YAAY,KAAK;AAAA,QACzC,eAAe,YAAY;AAAA,QAC3B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,OACF;AAAA,KACF;AAAA,EAEJ;AAEA,SACE,gBAAAC,MAAC;AAAA,IAAS;AAAA,IACP;AAAA,kBAAY;AAAA,MACb,gBAAAD,KAAC;AAAA,QAAa,MAAK;AAAA,QAAgB,sBAAY;AAAA,OAAM;AAAA;AAAA,GACvD;AAEJ;AAQA,IAAM,kBAAkB,CAA4B,UAAmC;AACrF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,OAAO,aAAa,MAAM,GAAG;AAE5C,QAAM,mBAAmB,OAAsB,IAAI;AACnD,QAAM,YAAY,OAA8B,IAAI;AACpD,QAAM,YAAY,OAAyB;AAE3C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB,IAAI;AAExE,QAAM,YAAY,CAAC,CAAC;AAEpB,QAAM,uBAAuB,QAAQ,MAAM,SAAS,IAAI;AAExD,QAAM,iBAAiB,WAAW;AAAA,IAChC,MAAM,UAAU,OAAO,MAAM,SAAS;AAAA,IACtC;AAAA,IACA,cAAc,YAAY,MAAM,YAAY,CAAC,UAAU,CAAC;AAAA,IACxD;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,YAAY,MAAM;AACvC,mBAAe,cAAc,CAAC;AAC9B,cAAU,SAAS,QAAQ;AAAA,EAC7B,GAAG,CAAC,cAAc,CAAC;AAMnB,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAAkB;AACjB,qBAAe,cAAc,KAAK;AAClC,wBAAkB,KAAK;AAAA,IACzB;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,iCAAiC;AAAA,IACrC,CAAC,cAAmC;AAClC,UAAI,iBAAiB,YAAY,QAAQ,iBAAiB,YAAY,QAAW;AAC/E;AAAA,MACF;AACA,YAAM,YACJ,cAAc,SAAS,iBAAiB,UAAU,IAAI,iBAAiB,UAAU;AACnF,YAAM,aACH,cAAc,UAAU,iBAAiB,YAAY,wBACrD,cAAc,cAAc,iBAAiB,YAAY;AAC5D,UAAI,YAAY;AAGd,YAAI,WAAW;AACb,yBAAe;AAAA,QACjB,OAAO;AAEL,wBAAc,cAAc,SAAS,IAAI,oBAAoB;AAAA,QAC/D;AACA;AAAA,MACF;AACA,cAAQ;AAAA,aACD;AACH,yBAAe,cAAc,SAAS;AACtC,uBAAa,UAAU;AACvB;AAAA,aACG;AACH,yBAAe,cAAc,SAAS;AACtC,uBAAa,cAAc;AAC3B;AAAA;AAEA;AAAA;AAAA,IAEN;AAAA,IACA,CAAC,cAAc,eAAe,gBAAgB,WAAW,sBAAsB,cAAc;AAAA,EAC/F;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,UAAwB,UAAkB;AACzC,YAAM,aAAa,SAAS;AAC5B,cAAQ,SAAS;AAAA,aACV;AAAA,aACA;AACH,iBAAO;AAAA,YACL,WAAWE,IAAG,WAAW,WAAW,iBAAiB;AAAA,YAErD,WAAW,WAAW,WAClB,MAAM,SACN,CAAC,MACC,2BAA2B,GAAG;AAAA,cAC5B,qBAAqB;AAAA,cACrB,oBAAoB;AAAA,YACtB,CAAC;AAAA,YACP,SAAS,mBAAmB,WAAW,SAAS,MAAM;AACpD,+BAAiB,UAAU;AAAA,YAC7B,CAAC;AAAA,YACD,IAAI,aAAa,OAAO,OAAO,OAAO;AAAA,YACtC,QAAQ,mBAAmB,WAAW,QAAQ,MAAM;AAClD,+BAAiB,UAAU;AAAA,YAC7B,CAAC;AAAA,YACD,SAAS,WAAW,WAChB,MAAM,SACN,mBAAmB,WAAW,SAAS,MAAM;AAC3C,yBAAW,WAAW,IAAS;AAAA,YACjC,CAAC;AAAA,UACP;AAAA;AAEA,iBAAO,CAAC;AAAA;AAAA,IAEd;AAAA,IACA,CAAC,gCAAgC,mBAAmB,QAAQ;AAAA,EAC9D;AAEA,YAAU,MAAM;AACd,QAAI,mBAAmB,MAAM;AAC3B,4BAAsB,MAAM;AAC1B,cAAM,UAAU,gBAAgB,gBAAgB,OAAO,OAAO;AAC9D,iBAAS,MAAM;AAAA,MACjB,CAAC;AACD,wBAAkB,IAAI;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAMnB,QAAM,6BAA6B,CACjC,GACA,cAIG;AACH,UAAM,SAAS,CAAC,OAAO,WAAW,WAAW;AAC7C,QAAI,OAAO,SAAS,EAAE,GAAG,GAAG;AAC1B,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,UAAK,EAAE,QAAQ,SAAS,EAAE,YAAa,EAAE,QAAQ,WAAW;AAC1D,kBAAU,sBAAsB,UAAU;AAAA,MAC5C,WAAW,EAAE,QAAQ,eAAe,EAAE,QAAQ,OAAO;AACnD,kBAAU,qBAAqB,MAAM;AAAA,MACvC;AAAA,IACF;AAAA,EACF;AAEA,QAAM,eAAe;AAAA,IACnB,MACE,gBACI,aAAa,eAAe;AAAA,MAC1B,WAAW,CAAC,MACV,2BAA2B,GAAG;AAAA,QAC5B,qBAAqB,MAAM,cAAc,oBAAoB;AAAA,QAC7D,oBAAoB,MAAM,cAAc,CAAC;AAAA,MAC3C,CAAC;AAAA,MACH,KAAK;AAAA,IACP,CAAC,IACD;AAAA,IACN,CAAC,eAAe,sBAAsB,aAAa;AAAA,EACrD;AAEA,QAAM,cAAc;AAAA,IAClB,MACE,eAAe,aAAa,IAAI,CAAC,eAAe;AAC9C,UAAI,CAAC,OAAO;AACV,eAAO;AAAA,MACT;AACA,YAAM,OAAO,MAAM,WAAW;AAC9B,aACE,gBAAAF,KAAC;AAAA,QAEC,KACE,KAAK,SAAS,YAAY,KAAK,SAAS,eACpC,WAAW,aACX;AAAA,QAEN,MAAK;AAAA,QACL,WAAWE,IAAG,kBAAkB;AAAA,QAChC,OAAO;AAAA,UACL,WAAW,cAAc,WAAW;AAAA,QACtC;AAAA,QAEC,uBAAa,MAAM,aAAa,MAAM,WAAW,KAAK,CAAC;AAAA,SAZnD,WAAW,KAalB;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,eAAe,cAAc,OAAO,YAAY;AAAA,EACnD;AAEA,SACE,gBAAAD,MAAAF,WAAA;AAAA,IACG;AAAA;AAAA,MACD,gBAAAC,KAAC;AAAA,QAAa,KAAK;AAAA,QAAW,MAAK;AAAA,QACjC,0BAAAA,KAAC;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,OAAO;AAAA,YACL,QAAQ,GAAG,eAAe;AAAA,UAC5B;AAAA,UAEC;AAAA,SACH;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;;;AEnZA,IAAK,WAAL,kBAAKG,cAAL;AACE,EAAAA,UAAA,WAAQ;AACR,EAAAA,UAAA,YAAS;AACT,EAAAA,UAAA,WAAQ;AACR,EAAAA,UAAA,iBAAc;AAJX,SAAAA;AAAA,GAAA;",
|
6
6
|
"names": ["jsx", "cx", "jsx", "forwardRef", "jsx", "forwardRef", "jsx", "cx", "Fragment", "jsx", "jsxs", "cx", "MenuSize"]
|
7
7
|
}
|
package/dist/index.js
CHANGED
@@ -1,9 +1,7 @@
|
|
1
1
|
"use strict";
|
2
|
-
var __create = Object.create;
|
3
2
|
var __defProp = Object.defineProperty;
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
7
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
8
6
|
var __export = (target, all) => {
|
9
7
|
for (var name in all)
|
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
17
15
|
}
|
18
16
|
return to;
|
19
17
|
};
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
21
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
22
|
-
mod
|
23
|
-
));
|
24
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
25
19
|
|
26
20
|
// src/index.ts
|
@@ -37,20 +31,14 @@ __export(src_exports, {
|
|
37
31
|
});
|
38
32
|
module.exports = __toCommonJS(src_exports);
|
39
33
|
|
40
|
-
// ../../scripts/react-shim.js
|
41
|
-
var React = __toESM(require("react"));
|
42
|
-
|
43
34
|
// src/MenuBase.tsx
|
44
|
-
var
|
35
|
+
var import_classix = require("classix");
|
45
36
|
var import_react = require("react");
|
46
37
|
var import_Menu = require("./styles/Menu.css");
|
47
38
|
var import_jsx_runtime = require("react/jsx-runtime");
|
48
39
|
var MenuBase = (0, import_react.forwardRef)(
|
49
40
|
({ children, size, isVirtual, ...props }, ref) => {
|
50
|
-
const classes = (0,
|
51
|
-
"Menu--isVirtual": isVirtual,
|
52
|
-
[`MenuSize--${size}`]: size
|
53
|
-
});
|
41
|
+
const classes = (0, import_classix.cx)("Menu", isVirtual && "Menu--isVirtual", size && `MenuSize--${size}`);
|
54
42
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
55
43
|
...props,
|
56
44
|
role: "menu",
|
@@ -83,7 +71,7 @@ var import_icons = require("@launchpad-ui/icons");
|
|
83
71
|
var import_tooltip = require("@launchpad-ui/tooltip");
|
84
72
|
var import_react_slot = require("@radix-ui/react-slot");
|
85
73
|
var import_focus = require("@react-aria/focus");
|
86
|
-
var
|
74
|
+
var import_classix2 = require("classix");
|
87
75
|
var import_react_router_dom = require("react-router-dom");
|
88
76
|
var import_Menu3 = require("./styles/Menu.css");
|
89
77
|
var import_jsx_runtime = require("react/jsx-runtime");
|
@@ -116,12 +104,12 @@ var MenuItem = ({
|
|
116
104
|
...rest,
|
117
105
|
disabled,
|
118
106
|
"aria-disabled": disabled ? disabled : void 0,
|
119
|
-
className: (0,
|
107
|
+
className: (0, import_classix2.cx)(
|
120
108
|
"Menu-item",
|
121
109
|
className,
|
122
|
-
|
123
|
-
|
124
|
-
|
110
|
+
isHighlighted && "is-highlighted",
|
111
|
+
nested && "Menu-item--nested",
|
112
|
+
groupHeader && "Menu-item--header"
|
125
113
|
),
|
126
114
|
role,
|
127
115
|
onKeyDown,
|
@@ -210,10 +198,9 @@ MenuSearch.displayName = "MenuSearch";
|
|
210
198
|
|
211
199
|
// src/Menu.tsx
|
212
200
|
var import_focus2 = require("@react-aria/focus");
|
213
|
-
var
|
201
|
+
var import_classix3 = require("classix");
|
214
202
|
var import_react4 = require("react");
|
215
203
|
var import_react_virtual = require("react-virtual");
|
216
|
-
var import_uuid = require("uuid");
|
217
204
|
|
218
205
|
// src/utils.ts
|
219
206
|
var createItemId = (index, id) => `${id}-item-${index}`;
|
@@ -296,7 +283,7 @@ var Menu = (props) => {
|
|
296
283
|
tabIndex: -1,
|
297
284
|
disabled: true
|
298
285
|
}) : (0, import_react4.cloneElement)(child, {
|
299
|
-
className: (0,
|
286
|
+
className: (0, import_classix3.cx)(child.props.className, menuItemClassName),
|
300
287
|
item: child.props.item ?? items.length,
|
301
288
|
onClick: chainEventHandlers(child.props.onClick, () => {
|
302
289
|
onSelect?.(child.props.item ?? items.length);
|
@@ -354,7 +341,7 @@ var ItemVirtualizer = (props) => {
|
|
354
341
|
focusManager,
|
355
342
|
onSelect
|
356
343
|
} = props;
|
357
|
-
const menuId = (0, import_react4.useRef)(`menu-ctrl-${(0,
|
344
|
+
const menuId = (0, import_react4.useRef)(`menu-ctrl-${(0, import_react4.useId)()}`);
|
358
345
|
const focusedItemIndex = (0, import_react4.useRef)(null);
|
359
346
|
const parentRef = (0, import_react4.useRef)(null);
|
360
347
|
const searchRef = (0, import_react4.useRef)();
|
@@ -415,7 +402,7 @@ var ItemVirtualizer = (props) => {
|
|
415
402
|
case MenuItem:
|
416
403
|
case MenuItemLink:
|
417
404
|
return {
|
418
|
-
className: (0,
|
405
|
+
className: (0, import_classix3.cx)(childProps.className, menuItemClassName),
|
419
406
|
onKeyDown: childProps.disabled ? () => void 0 : (e) => handleKeyboardFocusKeydown(e, {
|
420
407
|
handleFocusBackward: handleKeyboardFocusInteraction,
|
421
408
|
handleFocusForward: handleKeyboardFocusInteraction
|
@@ -477,7 +464,7 @@ var ItemVirtualizer = (props) => {
|
|
477
464
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
478
465
|
ref: elem.type !== MenuItem || elem.type !== MenuItemLink ? virtualRow.measureRef : void 0,
|
479
466
|
role: "presentation",
|
480
|
-
className: (0,
|
467
|
+
className: (0, import_classix3.cx)("VirtualMenu-item"),
|
481
468
|
style: {
|
482
469
|
transform: `translateY(${virtualRow.start}px)`
|
483
470
|
},
|
package/dist/index.js.map
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
|
-
"sources": ["../src/index.ts", "
|
4
|
-
"sourcesContent": ["export type { MenuBaseProps } from './MenuBase';\nexport type { MenuDividerProps } from './MenuDivider';\nexport type { MenuItemProps, MenuItemLinkProps } from './MenuItem';\nexport type { MenuItemListProps } from './MenuItemList';\nexport type { MenuSearchProps } from './MenuSearch';\nexport type { MenuProps } from './Menu';\n/* c8 ignore start */\nexport { MenuBase } from './MenuBase';\n/* c8 ignore stop */\nexport { MenuDivider } from './MenuDivider';\nexport { MenuItem, MenuItemLink } from './MenuItem';\n/* c8 ignore start */\nexport { MenuItemList } from './MenuItemList';\n/* c8 ignore stop */\nexport { MenuSearch } from './MenuSearch';\nexport { Menu } from './Menu';\nexport { MenuSize } from './types';\n", "import * as React from 'react';\nexport { React };\n", "import type { MenuSize } from './types';\n\nimport cx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport './styles/Menu.css';\n\ntype MenuBaseProps = React.ComponentPropsWithRef<'div'> & {\n isVirtual?: boolean;\n size?: MenuSize;\n};\n\nconst MenuBase = forwardRef<HTMLDivElement, MenuBaseProps>(\n ({ children, size, isVirtual, ...props }, ref) => {\n const classes = cx('Menu', {\n 'Menu--isVirtual': isVirtual,\n [`MenuSize--${size}`]: size,\n });\n\n return (\n <div {...props} role=\"menu\" className={classes} ref={ref}>\n {children}\n </div>\n );\n }\n);\n\nMenuBase.displayName = 'MenuBase';\n\nexport { MenuBase };\nexport type { MenuBaseProps };\n", "import type { SeparatorProps } from '@react-aria/separator';\n\nimport { useSeparator } from '@react-aria/separator';\n\nimport './styles/Menu.css';\n\ntype MenuDividerProps = SeparatorProps & {\n innerRef?: React.RefObject<HTMLDivElement>;\n};\n\nconst MenuDivider = ({ elementType = 'div', orientation, innerRef }: MenuDividerProps) => {\n const { separatorProps } = useSeparator({\n orientation,\n elementType,\n });\n\n return <div {...separatorProps} ref={innerRef} className=\"Menu-divider\" />;\n};\n\nexport { MenuDivider };\nexport type { MenuDividerProps };\n", "import type { Icon } from '@launchpad-ui/icons';\nimport type { PopoverPlacement } from '@launchpad-ui/popover';\n\nimport { IconSize } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { Slot } from '@radix-ui/react-slot';\nimport { FocusRing } from '@react-aria/focus';\nimport cx from 'clsx';\nimport { Link } from 'react-router-dom';\n\nimport './styles/Menu.css';\n\n// Merge two types and get rid of overlapping definitions\ntype Merge<T, U> = Omit<T, keyof U> & U;\n\ntype PropsWithComponent<P, T extends React.ElementType> = P & { component?: T };\n\ntype PolymorphicPropsWithRef<P, T extends React.ElementType> = Merge<\n T extends keyof JSX.IntrinsicElements\n ? React.PropsWithRef<JSX.IntrinsicElements[T]>\n : React.ComponentPropsWithRef<T>,\n PropsWithComponent<P, T>\n>;\n\ntype MenuItemOwnProps = {\n isHighlighted?: boolean;\n icon?: typeof Icon | null;\n disabled?: boolean;\n nested?: boolean;\n groupHeader?: boolean;\n tooltip?: string | React.ReactElement;\n tooltipOptions?: typeof Tooltip;\n tooltipPlacement?: PopoverPlacement;\n asChild?: boolean;\n};\n\nconst defaultElement = 'button';\n\ntype MenuItemProps<\n P,\n T extends React.ElementType = typeof defaultElement\n> = PolymorphicPropsWithRef<\n | (MenuItemOwnProps & {\n item: P; // Infer the type if it is included\n })\n | (MenuItemOwnProps & {\n item?: undefined;\n }),\n T\n>;\n\nconst MenuItem = <P, T extends React.ElementType = typeof defaultElement>({\n ...props\n}: MenuItemProps<P, T>) => {\n const {\n // TODO: remove component prop once we migrate over to asChild format\n component,\n children,\n isHighlighted,\n icon: Icon,\n nested,\n groupHeader,\n item,\n disabled,\n className,\n tooltip,\n role = 'menuitem',\n tooltipPlacement,\n onKeyDown,\n tooltipOptions,\n asChild,\n ...rest\n } = props;\n\n const Component: React.ElementType = component || (asChild ? Slot : defaultElement);\n\n const renderedItem = (\n <FocusRing focusRingClass=\"has-focus\">\n <Component\n {...rest}\n disabled={disabled}\n aria-disabled={disabled ? disabled : undefined}\n className={cx(\n 'Menu-item',\n className,\n { 'is-highlighted': isHighlighted },\n { 'Menu-item--nested': nested },\n { 'Menu-item--header': groupHeader }\n )}\n role={role}\n onKeyDown={onKeyDown}\n >\n {asChild ? (\n children\n ) : (\n <>\n {Icon && (\n <span className=\"Menu-item-icon\">\n <Icon size={IconSize.SMALL} />\n </span>\n )}\n {children}\n </>\n )}\n </Component>\n </FocusRing>\n );\n\n if (tooltip) {\n return (\n <Tooltip\n content={tooltip}\n rootElementStyle={{ display: 'block' }}\n allowBoundaryElementOverflow\n placement={tooltipPlacement ? tooltipPlacement : 'bottom'}\n {...(tooltipOptions || {})}\n >\n {renderedItem}\n </Tooltip>\n );\n }\n\n return renderedItem;\n};\n\ntype MenuItemLinkOwnProps = {\n disabled?: boolean;\n useHistory?: boolean;\n newTab?: boolean;\n};\n\ntype MenuItemLinkProps<P, T extends React.ElementType = typeof Link> =\n | Merge<Omit<MenuItemProps<P, T>, 'component' | 'item'>, MenuItemLinkOwnProps> &\n (\n | {\n item?: undefined;\n }\n | {\n item: P;\n }\n );\n\n// By default, this is a Link component whenever useHistory is\n// explicitly not false\n// TODO: deprecate this component\nconst MenuItemLink = <P, T extends React.ElementType = typeof Link>({\n to,\n disabled = false,\n useHistory = true,\n newTab = false,\n children,\n ...props\n}: MenuItemLinkProps<P, T>) => {\n const finalProps = {\n ...props,\n disabled,\n component: useHistory ? Link : ('a' as const),\n [useHistory ? 'to' : 'href']: disabled ? '' : to,\n rel: newTab ? 'noopener noreferrer' : undefined,\n target: newTab ? '_blank' : undefined,\n };\n\n // Ideally if this item is disabled, it should be a button rather\n // than a link https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md\n\n return <MenuItem {...finalProps}>{children}</MenuItem>;\n};\n\nexport { MenuItem, MenuItemLink };\nexport type { MenuItemProps, MenuItemLinkProps };\n", "import { forwardRef } from 'react';\n\nimport './styles/Menu.css';\n\ntype MenuItemListProps = Omit<React.ComponentPropsWithRef<'div'>, 'className'>;\n\nconst MenuItemList = forwardRef<HTMLDivElement, MenuItemListProps>(({ children, ...rest }, ref) => (\n <div {...rest} ref={ref} data-test-id=\"menu-item-list\" className=\"Menu-item-list\">\n {children}\n </div>\n));\n\nMenuItemList.displayName = 'MenuItemList';\n\nexport { MenuItemList };\nexport type { MenuItemListProps };\n", "import type { ChangeEvent } from 'react';\n\nimport { TextField } from '@launchpad-ui/form';\nimport { forwardRef } from 'react';\n\nimport './styles/Menu.css';\n\ntype MenuSearchProps = {\n ariaLabel?: string;\n value?: string;\n placeholder?: string;\n onChange?(event: ChangeEvent<HTMLInputElement>): void;\n};\n\nconst MenuSearch = forwardRef<HTMLInputElement, MenuSearchProps>((props, ref) => {\n const { ariaLabel, placeholder, ...finalProps } = props;\n\n return (\n <div className=\"Menu-search\">\n <TextField\n {...finalProps}\n ref={ref}\n className=\"Menu-search-input\"\n tiny\n type=\"search\"\n autoComplete=\"off\"\n placeholder={placeholder}\n aria-label={ariaLabel || 'Search'}\n />\n </div>\n );\n});\n\nMenuSearch.displayName = 'MenuSearch';\n\nexport { MenuSearch };\nexport type { MenuSearchProps };\n", "import type { MenuItemProps } from './MenuItem';\nimport type { MenuSize } from './types';\nimport type { FocusManager } from '@react-aria/focus';\nimport type { KeyboardEvent, ReactElement } from 'react';\n\nimport { useFocusManager } from '@react-aria/focus';\nimport cx from 'clsx';\nimport { Children, cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { v4 } from 'uuid';\n\nimport { MenuBase } from './MenuBase';\nimport { MenuDivider } from './MenuDivider';\nimport { MenuItem, MenuItemLink } from './MenuItem';\nimport { MenuItemList } from './MenuItemList';\nimport { MenuSearch } from './MenuSearch';\nimport {\n chainEventHandlers,\n createItemId,\n getNodeForIndex,\n handleKeyboardInteractions,\n} from './utils';\n\ntype ControlledMenuProps<T> = {\n children: React.ReactNode;\n onSelect?: (item: T) => void;\n /**\n * Menus items are rendered using react-virtual for\n * additional rendering performance.\n */\n enableVirtualization?: boolean;\n /**\n * Class name to be applied to all MenuItem and MenuItemLink components\n * in the menu.\n */\n menuItemClassName?: string;\n /**\n * Sets the width of the menu. This is especially useful when using virtual items\n * since the width cannot be automatically set by the widest element.\n */\n size?: MenuSize;\n /**\n * Sets the number out of elements rendered outside of the view window\n * when using virtualization\n */\n overscan?: number;\n /**\n * Sets the height for each menu item when using virtualization.\n *\n */\n itemHeight?: number;\n};\n\ntype MenuProps<T extends number | string> = ControlledMenuProps<T>;\n\nconst Menu = <T extends number | string>(props: MenuProps<T>) => {\n const {\n children,\n menuItemClassName,\n onSelect,\n enableVirtualization,\n itemHeight,\n size,\n overscan = 1,\n } = props;\n\n const focusManager = useFocusManager();\n\n const handleArrowDown = useCallback(() => {\n focusManager.focusNext({ wrap: true });\n }, [focusManager]);\n\n const handleArrowUp = useCallback(() => {\n focusManager.focusPrevious({ wrap: true });\n }, [focusManager]);\n\n const reduceItems = useMemo(() => {\n const childrenProps = Children.toArray(children);\n if (enableVirtualization) {\n // the virtualized menu has its own handlers and props\n let searchElem = null;\n let elements: ReactElement[] = [];\n (childrenProps as ReactElement[]).forEach((child: ReactElement) => {\n switch (child.type) {\n case MenuSearch:\n searchElem = child;\n break;\n case MenuItem:\n case MenuItemLink:\n case MenuDivider:\n elements = elements.concat(child);\n break;\n default:\n break;\n }\n });\n return { items: elements, searchElement: searchElem };\n }\n\n return (childrenProps as ReactElement[]).reduce(\n (\n { items, searchElement }: { items: ReactElement[]; searchElement: null | ReactElement },\n child\n ) => {\n switch (child.type) {\n case MenuSearch:\n return {\n items,\n searchElement: cloneElement(child, {\n onKeyDown: (e: KeyboardEvent) =>\n handleKeyboardInteractions(e, {\n handleDown: handleArrowDown,\n handleUp: handleArrowUp,\n }),\n }),\n };\n case MenuItem:\n case MenuItemLink:\n return {\n items: items.concat(\n child.props.disabled\n ? cloneElement(child, {\n onClick: () => undefined,\n onKeyDown: () => undefined,\n tabIndex: -1,\n disabled: true,\n })\n : cloneElement(child, {\n className: cx(child.props.className, menuItemClassName),\n item: child.props.item ?? items.length,\n // set focus on the first menu item if there is no search input, and set in the tab order\n onClick: chainEventHandlers(child.props.onClick, () => {\n onSelect?.(child.props.item ?? items.length);\n }),\n onKeyDown: (e: KeyboardEvent) =>\n handleKeyboardInteractions(e, {\n handleDown: handleArrowDown,\n handleUp: handleArrowUp,\n }),\n })\n ),\n searchElement,\n };\n case MenuDivider:\n return { items: items.concat(child), searchElement };\n default:\n return { items, searchElement };\n }\n },\n { items: [], searchElement: null }\n );\n }, [children, enableVirtualization, menuItemClassName, handleArrowDown, handleArrowUp, onSelect]);\n\n if (enableVirtualization) {\n return (\n <MenuBase isVirtual size={size}>\n <ItemVirtualizer<T>\n items={Children.toArray(reduceItems.items) as ReactElement[]}\n searchElement={reduceItems.searchElement}\n overscan={overscan}\n menuItemClassName={menuItemClassName}\n onSelect={onSelect}\n itemHeight={itemHeight}\n focusManager={focusManager}\n />\n </MenuBase>\n );\n }\n\n return (\n <MenuBase size={size}>\n {reduceItems.searchElement}\n <MenuItemList role=\"presentation\">{reduceItems.items}</MenuItemList>\n </MenuBase>\n );\n};\n\ntype ItemVirtualizerProps<T> = Omit<ControlledMenuProps<T>, 'children'> & {\n items: ReactElement[] | null;\n searchElement?: React.ReactElement | null;\n focusManager: FocusManager;\n};\n\nconst ItemVirtualizer = <T extends number | string>(props: ItemVirtualizerProps<T>) => {\n const {\n overscan,\n searchElement,\n itemHeight = 33,\n menuItemClassName,\n items: items,\n focusManager,\n onSelect,\n } = props;\n\n const menuId = useRef(`menu-ctrl-${v4()}`);\n\n const focusedItemIndex = useRef<number | null>(null);\n const parentRef = useRef<HTMLDivElement | null>(null);\n const searchRef = useRef<HTMLInputElement>();\n\n const [nextFocusValue, setNextFocusValue] = useState<number | null>(null);\n\n const hasSearch = !!searchElement;\n\n const lastVirtualItemIndex = items ? items.length - 1 : 0;\n\n const rowVirtualizer = useVirtual({\n size: items !== null ? items.length : 0,\n parentRef,\n estimateSize: useCallback(() => itemHeight, [itemHeight]),\n overscan,\n });\n\n const focusSearchBar = useCallback(() => {\n rowVirtualizer.scrollToIndex(0);\n searchRef.current?.focus?.();\n }, [rowVirtualizer]);\n\n /**\n * Scrolls to the menu item with the index provided and\n * then manually focuses it using a side effect in useEffect\n */\n const focusMenuItem = useCallback(\n (index: number) => {\n rowVirtualizer.scrollToIndex(index);\n setNextFocusValue(index);\n },\n [rowVirtualizer]\n );\n\n const handleKeyboardFocusInteraction = useCallback(\n (direction: 'next' | 'previous') => {\n if (focusedItemIndex.current === null || focusedItemIndex.current === undefined) {\n return;\n }\n const nextIndex =\n direction === 'next' ? focusedItemIndex.current + 1 : focusedItemIndex.current - 1;\n const shouldWrap =\n (direction === 'next' && focusedItemIndex.current === lastVirtualItemIndex) ||\n (direction === 'previous' && focusedItemIndex.current === 0);\n if (shouldWrap) {\n // we are at the end of the list so we will\n // scroll back to the beginning of the list\n if (hasSearch) {\n focusSearchBar();\n } else {\n // if at end, wrap to beginning, else focus last item\n focusMenuItem(direction === 'next' ? 0 : lastVirtualItemIndex);\n }\n return;\n }\n switch (direction) {\n case 'next':\n rowVirtualizer.scrollToIndex(nextIndex);\n focusManager.focusNext();\n break;\n case 'previous':\n rowVirtualizer.scrollToIndex(nextIndex);\n focusManager.focusPrevious();\n break;\n default:\n break;\n }\n },\n [focusManager, focusMenuItem, focusSearchBar, hasSearch, lastVirtualItemIndex, rowVirtualizer]\n );\n\n const getItemProps = useCallback(\n (itemElem: ReactElement, index: number) => {\n const childProps = itemElem.props as MenuItemProps<T>;\n switch (itemElem.type) {\n case MenuItem:\n case MenuItemLink:\n return {\n className: cx(childProps.className, menuItemClassName),\n // set focus on the first menu item if there is no search input, and set in the tab order\n onKeyDown: childProps.disabled\n ? () => undefined\n : (e: KeyboardEvent) =>\n handleKeyboardFocusKeydown(e, {\n handleFocusBackward: handleKeyboardFocusInteraction,\n handleFocusForward: handleKeyboardFocusInteraction,\n }),\n onFocus: chainEventHandlers(childProps.onFocus, () => {\n focusedItemIndex.current = index;\n }),\n id: createItemId(index, menuId.current),\n onBlur: chainEventHandlers(childProps.onBlur, () => {\n focusedItemIndex.current = null;\n }),\n onClick: childProps.disabled\n ? () => undefined\n : chainEventHandlers(childProps.onClick, () => {\n onSelect?.(childProps.item as T);\n }),\n } as MenuItemProps<T>;\n default:\n return {};\n }\n },\n [handleKeyboardFocusInteraction, menuItemClassName, onSelect]\n );\n\n useEffect(() => {\n if (nextFocusValue !== null) {\n requestAnimationFrame(() => {\n const element = getNodeForIndex(nextFocusValue, menuId.current);\n element?.focus();\n });\n setNextFocusValue(null);\n }\n }, [nextFocusValue]);\n\n /**\n * Calls handleFocusForward when the user is attempting to focus forward using\n * tab or arrow keys. Calls handleFocusBackward when the users wants to move backward.\n */\n const handleKeyboardFocusKeydown = (\n e: KeyboardEvent,\n callbacks: Record<\n 'handleFocusForward' | 'handleFocusBackward',\n (direction: 'next' | 'previous') => void\n >\n ) => {\n const keyOps = ['Tab', 'ArrowUp', 'ArrowDown'];\n if (keyOps.includes(e.key)) {\n e.preventDefault();\n e.stopPropagation();\n if ((e.key === 'Tab' && e.shiftKey) || e.key === 'ArrowUp') {\n callbacks.handleFocusBackward?.('previous');\n } else if (e.key === 'ArrowDown' || e.key === 'Tab') {\n callbacks.handleFocusForward?.('next');\n }\n }\n };\n\n const renderSearch = useMemo(\n () =>\n searchElement\n ? cloneElement(searchElement, {\n onKeyDown: (e: KeyboardEvent) =>\n handleKeyboardFocusKeydown(e, {\n handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),\n handleFocusForward: () => focusMenuItem(0),\n }),\n ref: searchRef,\n })\n : null,\n [searchElement, lastVirtualItemIndex, focusMenuItem]\n );\n\n const renderItems = useMemo(\n () =>\n rowVirtualizer.virtualItems.map((virtualRow) => {\n if (!items) {\n return null;\n }\n const elem = items[virtualRow.index];\n return (\n <div\n key={virtualRow.index}\n ref={\n elem.type !== MenuItem || elem.type !== MenuItemLink\n ? virtualRow.measureRef\n : undefined\n }\n role=\"presentation\"\n className={cx('VirtualMenu-item')}\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n >\n {cloneElement(elem, getItemProps(elem, virtualRow.index))}\n </div>\n );\n }),\n [rowVirtualizer.virtualItems, items, getItemProps]\n );\n\n return (\n <>\n {renderSearch}\n <MenuItemList ref={parentRef} role=\"presentation\">\n <div\n role=\"presentation\"\n className=\"VirtualMenu-item-list\"\n style={{\n height: `${rowVirtualizer.totalSize}px`,\n }}\n >\n {renderItems}\n </div>\n </MenuItemList>\n </>\n );\n};\n\nexport { Menu, ItemVirtualizer };\nexport type { MenuProps, ItemVirtualizerProps };\n", "import type { EventHandler, KeyboardEvent, SyntheticEvent } from 'react';\n\nconst createItemId = (index: number, id: string) => `${id}-item-${index}`;\n\nconst getNodeForIndex = (index: number | null, menuId: string) =>\n index === null ? index : document.getElementById(createItemId(index, menuId));\n\nconst handleKeyboardInteractions = (\n event: React.KeyboardEvent,\n keyHandlers: Partial<\n Record<'handleUp' | 'handleDown' | 'handleEnter', (e: KeyboardEvent) => void>\n >\n) => {\n const ops = {\n ArrowUp: keyHandlers.handleUp,\n ArrowDown: keyHandlers.handleDown,\n Enter: keyHandlers.handleEnter,\n } as Record<string, (e: KeyboardEvent) => void | undefined>;\n\n if (ops[event.key]) {\n event.preventDefault();\n ops[event.key]?.call(globalThis, event);\n }\n};\n\nconst chainEventHandlers =\n (...handlers: Array<EventHandler<SyntheticEvent> | undefined>) =>\n (event: SyntheticEvent) => {\n handlers.forEach((h) => typeof h === 'function' && h(event));\n };\n\nexport { createItemId, getNodeForIndex, handleKeyboardInteractions, chainEventHandlers };\n", "enum MenuSize {\n SMALL = 'sm',\n MEDIUM = 'md',\n LARGE = 'lg',\n EXTRA_LARGE = 'xl',\n}\n\nexport { MenuSize };\n"],
|
5
|
-
"mappings": "
|
6
|
-
"names": ["
|
3
|
+
"sources": ["../src/index.ts", "../src/MenuBase.tsx", "../src/MenuDivider.tsx", "../src/MenuItem.tsx", "../src/MenuItemList.tsx", "../src/MenuSearch.tsx", "../src/Menu.tsx", "../src/utils.ts", "../src/types.ts"],
|
4
|
+
"sourcesContent": ["export type { MenuBaseProps } from './MenuBase';\nexport type { MenuDividerProps } from './MenuDivider';\nexport type { MenuItemProps, MenuItemLinkProps } from './MenuItem';\nexport type { MenuItemListProps } from './MenuItemList';\nexport type { MenuSearchProps } from './MenuSearch';\nexport type { MenuProps } from './Menu';\n/* c8 ignore start */\nexport { MenuBase } from './MenuBase';\n/* c8 ignore stop */\nexport { MenuDivider } from './MenuDivider';\nexport { MenuItem, MenuItemLink } from './MenuItem';\n/* c8 ignore start */\nexport { MenuItemList } from './MenuItemList';\n/* c8 ignore stop */\nexport { MenuSearch } from './MenuSearch';\nexport { Menu } from './Menu';\nexport { MenuSize } from './types';\n", "import type { MenuSize } from './types';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport './styles/Menu.css';\n\ntype MenuBaseProps = React.ComponentPropsWithRef<'div'> & {\n isVirtual?: boolean;\n size?: MenuSize;\n};\n\nconst MenuBase = forwardRef<HTMLDivElement, MenuBaseProps>(\n ({ children, size, isVirtual, ...props }, ref) => {\n const classes = cx('Menu', isVirtual && 'Menu--isVirtual', size && `MenuSize--${size}`);\n\n return (\n <div {...props} role=\"menu\" className={classes} ref={ref}>\n {children}\n </div>\n );\n }\n);\n\nMenuBase.displayName = 'MenuBase';\n\nexport { MenuBase };\nexport type { MenuBaseProps };\n", "import type { SeparatorProps } from '@react-aria/separator';\n\nimport { useSeparator } from '@react-aria/separator';\n\nimport './styles/Menu.css';\n\ntype MenuDividerProps = SeparatorProps & {\n innerRef?: React.RefObject<HTMLDivElement>;\n};\n\nconst MenuDivider = ({ elementType = 'div', orientation, innerRef }: MenuDividerProps) => {\n const { separatorProps } = useSeparator({\n orientation,\n elementType,\n });\n\n return <div {...separatorProps} ref={innerRef} className=\"Menu-divider\" />;\n};\n\nexport { MenuDivider };\nexport type { MenuDividerProps };\n", "import type { Icon } from '@launchpad-ui/icons';\nimport type { PopoverPlacement } from '@launchpad-ui/popover';\n\nimport { IconSize } from '@launchpad-ui/icons';\nimport { Tooltip } from '@launchpad-ui/tooltip';\nimport { Slot } from '@radix-ui/react-slot';\nimport { FocusRing } from '@react-aria/focus';\nimport { cx } from 'classix';\nimport { Link } from 'react-router-dom';\n\nimport './styles/Menu.css';\n\n// Merge two types and get rid of overlapping definitions\ntype Merge<T, U> = Omit<T, keyof U> & U;\n\ntype PropsWithComponent<P, T extends React.ElementType> = P & { component?: T };\n\ntype PolymorphicPropsWithRef<P, T extends React.ElementType> = Merge<\n T extends keyof JSX.IntrinsicElements\n ? React.PropsWithRef<JSX.IntrinsicElements[T]>\n : React.ComponentPropsWithRef<T>,\n PropsWithComponent<P, T>\n>;\n\ntype MenuItemOwnProps = {\n isHighlighted?: boolean;\n icon?: typeof Icon | null;\n disabled?: boolean;\n nested?: boolean;\n groupHeader?: boolean;\n tooltip?: string | React.ReactElement;\n tooltipOptions?: typeof Tooltip;\n tooltipPlacement?: PopoverPlacement;\n asChild?: boolean;\n};\n\nconst defaultElement = 'button';\n\ntype MenuItemProps<\n P,\n T extends React.ElementType = typeof defaultElement\n> = PolymorphicPropsWithRef<\n | (MenuItemOwnProps & {\n item: P; // Infer the type if it is included\n })\n | (MenuItemOwnProps & {\n item?: undefined;\n }),\n T\n>;\n\nconst MenuItem = <P, T extends React.ElementType = typeof defaultElement>({\n ...props\n}: MenuItemProps<P, T>) => {\n const {\n // TODO: remove component prop once we migrate over to asChild format\n component,\n children,\n isHighlighted,\n icon: Icon,\n nested,\n groupHeader,\n item,\n disabled,\n className,\n tooltip,\n role = 'menuitem',\n tooltipPlacement,\n onKeyDown,\n tooltipOptions,\n asChild,\n ...rest\n } = props;\n\n const Component: React.ElementType = component || (asChild ? Slot : defaultElement);\n\n const renderedItem = (\n <FocusRing focusRingClass=\"has-focus\">\n <Component\n {...rest}\n disabled={disabled}\n aria-disabled={disabled ? disabled : undefined}\n className={cx(\n 'Menu-item',\n className,\n isHighlighted && 'is-highlighted',\n nested && 'Menu-item--nested',\n groupHeader && 'Menu-item--header'\n )}\n role={role}\n onKeyDown={onKeyDown}\n >\n {asChild ? (\n children\n ) : (\n <>\n {Icon && (\n <span className=\"Menu-item-icon\">\n <Icon size={IconSize.SMALL} />\n </span>\n )}\n {children}\n </>\n )}\n </Component>\n </FocusRing>\n );\n\n if (tooltip) {\n return (\n <Tooltip\n content={tooltip}\n rootElementStyle={{ display: 'block' }}\n allowBoundaryElementOverflow\n placement={tooltipPlacement ? tooltipPlacement : 'bottom'}\n {...(tooltipOptions || {})}\n >\n {renderedItem}\n </Tooltip>\n );\n }\n\n return renderedItem;\n};\n\ntype MenuItemLinkOwnProps = {\n disabled?: boolean;\n useHistory?: boolean;\n newTab?: boolean;\n};\n\ntype MenuItemLinkProps<P, T extends React.ElementType = typeof Link> =\n | Merge<Omit<MenuItemProps<P, T>, 'component' | 'item'>, MenuItemLinkOwnProps> &\n (\n | {\n item?: undefined;\n }\n | {\n item: P;\n }\n );\n\n// By default, this is a Link component whenever useHistory is\n// explicitly not false\n// TODO: deprecate this component\nconst MenuItemLink = <P, T extends React.ElementType = typeof Link>({\n to,\n disabled = false,\n useHistory = true,\n newTab = false,\n children,\n ...props\n}: MenuItemLinkProps<P, T>) => {\n const finalProps = {\n ...props,\n disabled,\n component: useHistory ? Link : ('a' as const),\n [useHistory ? 'to' : 'href']: disabled ? '' : to,\n rel: newTab ? 'noopener noreferrer' : undefined,\n target: newTab ? '_blank' : undefined,\n };\n\n // Ideally if this item is disabled, it should be a button rather\n // than a link https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md\n\n return <MenuItem {...finalProps}>{children}</MenuItem>;\n};\n\nexport { MenuItem, MenuItemLink };\nexport type { MenuItemProps, MenuItemLinkProps };\n", "import { forwardRef } from 'react';\n\nimport './styles/Menu.css';\n\ntype MenuItemListProps = Omit<React.ComponentPropsWithRef<'div'>, 'className'>;\n\nconst MenuItemList = forwardRef<HTMLDivElement, MenuItemListProps>(({ children, ...rest }, ref) => (\n <div {...rest} ref={ref} data-test-id=\"menu-item-list\" className=\"Menu-item-list\">\n {children}\n </div>\n));\n\nMenuItemList.displayName = 'MenuItemList';\n\nexport { MenuItemList };\nexport type { MenuItemListProps };\n", "import type { ChangeEvent } from 'react';\n\nimport { TextField } from '@launchpad-ui/form';\nimport { forwardRef } from 'react';\n\nimport './styles/Menu.css';\n\ntype MenuSearchProps = {\n ariaLabel?: string;\n value?: string;\n placeholder?: string;\n onChange?(event: ChangeEvent<HTMLInputElement>): void;\n};\n\nconst MenuSearch = forwardRef<HTMLInputElement, MenuSearchProps>((props, ref) => {\n const { ariaLabel, placeholder, ...finalProps } = props;\n\n return (\n <div className=\"Menu-search\">\n <TextField\n {...finalProps}\n ref={ref}\n className=\"Menu-search-input\"\n tiny\n type=\"search\"\n autoComplete=\"off\"\n placeholder={placeholder}\n aria-label={ariaLabel || 'Search'}\n />\n </div>\n );\n});\n\nMenuSearch.displayName = 'MenuSearch';\n\nexport { MenuSearch };\nexport type { MenuSearchProps };\n", "import type { MenuItemProps } from './MenuItem';\nimport type { MenuSize } from './types';\nimport type { FocusManager } from '@react-aria/focus';\nimport type { KeyboardEvent, ReactElement } from 'react';\n\nimport { useFocusManager } from '@react-aria/focus';\nimport { cx } from 'classix';\nimport {\n Children,\n cloneElement,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useVirtual } from 'react-virtual';\n\nimport { MenuBase } from './MenuBase';\nimport { MenuDivider } from './MenuDivider';\nimport { MenuItem, MenuItemLink } from './MenuItem';\nimport { MenuItemList } from './MenuItemList';\nimport { MenuSearch } from './MenuSearch';\nimport {\n chainEventHandlers,\n createItemId,\n getNodeForIndex,\n handleKeyboardInteractions,\n} from './utils';\n\ntype ControlledMenuProps<T> = {\n children: React.ReactNode;\n onSelect?: (item: T) => void;\n /**\n * Menus items are rendered using react-virtual for\n * additional rendering performance.\n */\n enableVirtualization?: boolean;\n /**\n * Class name to be applied to all MenuItem and MenuItemLink components\n * in the menu.\n */\n menuItemClassName?: string;\n /**\n * Sets the width of the menu. This is especially useful when using virtual items\n * since the width cannot be automatically set by the widest element.\n */\n size?: MenuSize;\n /**\n * Sets the number out of elements rendered outside of the view window\n * when using virtualization\n */\n overscan?: number;\n /**\n * Sets the height for each menu item when using virtualization.\n *\n */\n itemHeight?: number;\n};\n\ntype MenuProps<T extends number | string> = ControlledMenuProps<T>;\n\nconst Menu = <T extends number | string>(props: MenuProps<T>) => {\n const {\n children,\n menuItemClassName,\n onSelect,\n enableVirtualization,\n itemHeight,\n size,\n overscan = 1,\n } = props;\n\n const focusManager = useFocusManager();\n\n const handleArrowDown = useCallback(() => {\n focusManager.focusNext({ wrap: true });\n }, [focusManager]);\n\n const handleArrowUp = useCallback(() => {\n focusManager.focusPrevious({ wrap: true });\n }, [focusManager]);\n\n const reduceItems = useMemo(() => {\n const childrenProps = Children.toArray(children);\n if (enableVirtualization) {\n // the virtualized menu has its own handlers and props\n let searchElem = null;\n let elements: ReactElement[] = [];\n (childrenProps as ReactElement[]).forEach((child: ReactElement) => {\n switch (child.type) {\n case MenuSearch:\n searchElem = child;\n break;\n case MenuItem:\n case MenuItemLink:\n case MenuDivider:\n elements = elements.concat(child);\n break;\n default:\n break;\n }\n });\n return { items: elements, searchElement: searchElem };\n }\n\n return (childrenProps as ReactElement[]).reduce(\n (\n { items, searchElement }: { items: ReactElement[]; searchElement: null | ReactElement },\n child\n ) => {\n switch (child.type) {\n case MenuSearch:\n return {\n items,\n searchElement: cloneElement(child, {\n onKeyDown: (e: KeyboardEvent) =>\n handleKeyboardInteractions(e, {\n handleDown: handleArrowDown,\n handleUp: handleArrowUp,\n }),\n }),\n };\n case MenuItem:\n case MenuItemLink:\n return {\n items: items.concat(\n child.props.disabled\n ? cloneElement(child, {\n onClick: () => undefined,\n onKeyDown: () => undefined,\n tabIndex: -1,\n disabled: true,\n })\n : cloneElement(child, {\n className: cx(child.props.className, menuItemClassName),\n item: child.props.item ?? items.length,\n // set focus on the first menu item if there is no search input, and set in the tab order\n onClick: chainEventHandlers(child.props.onClick, () => {\n onSelect?.(child.props.item ?? items.length);\n }),\n onKeyDown: (e: KeyboardEvent) =>\n handleKeyboardInteractions(e, {\n handleDown: handleArrowDown,\n handleUp: handleArrowUp,\n }),\n })\n ),\n searchElement,\n };\n case MenuDivider:\n return { items: items.concat(child), searchElement };\n default:\n return { items, searchElement };\n }\n },\n { items: [], searchElement: null }\n );\n }, [children, enableVirtualization, menuItemClassName, handleArrowDown, handleArrowUp, onSelect]);\n\n if (enableVirtualization) {\n return (\n <MenuBase isVirtual size={size}>\n <ItemVirtualizer<T>\n items={Children.toArray(reduceItems.items) as ReactElement[]}\n searchElement={reduceItems.searchElement}\n overscan={overscan}\n menuItemClassName={menuItemClassName}\n onSelect={onSelect}\n itemHeight={itemHeight}\n focusManager={focusManager}\n />\n </MenuBase>\n );\n }\n\n return (\n <MenuBase size={size}>\n {reduceItems.searchElement}\n <MenuItemList role=\"presentation\">{reduceItems.items}</MenuItemList>\n </MenuBase>\n );\n};\n\ntype ItemVirtualizerProps<T> = Omit<ControlledMenuProps<T>, 'children'> & {\n items: ReactElement[] | null;\n searchElement?: React.ReactElement | null;\n focusManager: FocusManager;\n};\n\nconst ItemVirtualizer = <T extends number | string>(props: ItemVirtualizerProps<T>) => {\n const {\n overscan,\n searchElement,\n itemHeight = 33,\n menuItemClassName,\n items: items,\n focusManager,\n onSelect,\n } = props;\n\n const menuId = useRef(`menu-ctrl-${useId()}`);\n\n const focusedItemIndex = useRef<number | null>(null);\n const parentRef = useRef<HTMLDivElement | null>(null);\n const searchRef = useRef<HTMLInputElement>();\n\n const [nextFocusValue, setNextFocusValue] = useState<number | null>(null);\n\n const hasSearch = !!searchElement;\n\n const lastVirtualItemIndex = items ? items.length - 1 : 0;\n\n const rowVirtualizer = useVirtual({\n size: items !== null ? items.length : 0,\n parentRef,\n estimateSize: useCallback(() => itemHeight, [itemHeight]),\n overscan,\n });\n\n const focusSearchBar = useCallback(() => {\n rowVirtualizer.scrollToIndex(0);\n searchRef.current?.focus?.();\n }, [rowVirtualizer]);\n\n /**\n * Scrolls to the menu item with the index provided and\n * then manually focuses it using a side effect in useEffect\n */\n const focusMenuItem = useCallback(\n (index: number) => {\n rowVirtualizer.scrollToIndex(index);\n setNextFocusValue(index);\n },\n [rowVirtualizer]\n );\n\n const handleKeyboardFocusInteraction = useCallback(\n (direction: 'next' | 'previous') => {\n if (focusedItemIndex.current === null || focusedItemIndex.current === undefined) {\n return;\n }\n const nextIndex =\n direction === 'next' ? focusedItemIndex.current + 1 : focusedItemIndex.current - 1;\n const shouldWrap =\n (direction === 'next' && focusedItemIndex.current === lastVirtualItemIndex) ||\n (direction === 'previous' && focusedItemIndex.current === 0);\n if (shouldWrap) {\n // we are at the end of the list so we will\n // scroll back to the beginning of the list\n if (hasSearch) {\n focusSearchBar();\n } else {\n // if at end, wrap to beginning, else focus last item\n focusMenuItem(direction === 'next' ? 0 : lastVirtualItemIndex);\n }\n return;\n }\n switch (direction) {\n case 'next':\n rowVirtualizer.scrollToIndex(nextIndex);\n focusManager.focusNext();\n break;\n case 'previous':\n rowVirtualizer.scrollToIndex(nextIndex);\n focusManager.focusPrevious();\n break;\n default:\n break;\n }\n },\n [focusManager, focusMenuItem, focusSearchBar, hasSearch, lastVirtualItemIndex, rowVirtualizer]\n );\n\n const getItemProps = useCallback(\n (itemElem: ReactElement, index: number) => {\n const childProps = itemElem.props as MenuItemProps<T>;\n switch (itemElem.type) {\n case MenuItem:\n case MenuItemLink:\n return {\n className: cx(childProps.className, menuItemClassName),\n // set focus on the first menu item if there is no search input, and set in the tab order\n onKeyDown: childProps.disabled\n ? () => undefined\n : (e: KeyboardEvent) =>\n handleKeyboardFocusKeydown(e, {\n handleFocusBackward: handleKeyboardFocusInteraction,\n handleFocusForward: handleKeyboardFocusInteraction,\n }),\n onFocus: chainEventHandlers(childProps.onFocus, () => {\n focusedItemIndex.current = index;\n }),\n id: createItemId(index, menuId.current),\n onBlur: chainEventHandlers(childProps.onBlur, () => {\n focusedItemIndex.current = null;\n }),\n onClick: childProps.disabled\n ? () => undefined\n : chainEventHandlers(childProps.onClick, () => {\n onSelect?.(childProps.item as T);\n }),\n } as MenuItemProps<T>;\n default:\n return {};\n }\n },\n [handleKeyboardFocusInteraction, menuItemClassName, onSelect]\n );\n\n useEffect(() => {\n if (nextFocusValue !== null) {\n requestAnimationFrame(() => {\n const element = getNodeForIndex(nextFocusValue, menuId.current);\n element?.focus();\n });\n setNextFocusValue(null);\n }\n }, [nextFocusValue]);\n\n /**\n * Calls handleFocusForward when the user is attempting to focus forward using\n * tab or arrow keys. Calls handleFocusBackward when the users wants to move backward.\n */\n const handleKeyboardFocusKeydown = (\n e: KeyboardEvent,\n callbacks: Record<\n 'handleFocusForward' | 'handleFocusBackward',\n (direction: 'next' | 'previous') => void\n >\n ) => {\n const keyOps = ['Tab', 'ArrowUp', 'ArrowDown'];\n if (keyOps.includes(e.key)) {\n e.preventDefault();\n e.stopPropagation();\n if ((e.key === 'Tab' && e.shiftKey) || e.key === 'ArrowUp') {\n callbacks.handleFocusBackward?.('previous');\n } else if (e.key === 'ArrowDown' || e.key === 'Tab') {\n callbacks.handleFocusForward?.('next');\n }\n }\n };\n\n const renderSearch = useMemo(\n () =>\n searchElement\n ? cloneElement(searchElement, {\n onKeyDown: (e: KeyboardEvent) =>\n handleKeyboardFocusKeydown(e, {\n handleFocusBackward: () => focusMenuItem(lastVirtualItemIndex),\n handleFocusForward: () => focusMenuItem(0),\n }),\n ref: searchRef,\n })\n : null,\n [searchElement, lastVirtualItemIndex, focusMenuItem]\n );\n\n const renderItems = useMemo(\n () =>\n rowVirtualizer.virtualItems.map((virtualRow) => {\n if (!items) {\n return null;\n }\n const elem = items[virtualRow.index];\n return (\n <div\n key={virtualRow.index}\n ref={\n elem.type !== MenuItem || elem.type !== MenuItemLink\n ? virtualRow.measureRef\n : undefined\n }\n role=\"presentation\"\n className={cx('VirtualMenu-item')}\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n >\n {cloneElement(elem, getItemProps(elem, virtualRow.index))}\n </div>\n );\n }),\n [rowVirtualizer.virtualItems, items, getItemProps]\n );\n\n return (\n <>\n {renderSearch}\n <MenuItemList ref={parentRef} role=\"presentation\">\n <div\n role=\"presentation\"\n className=\"VirtualMenu-item-list\"\n style={{\n height: `${rowVirtualizer.totalSize}px`,\n }}\n >\n {renderItems}\n </div>\n </MenuItemList>\n </>\n );\n};\n\nexport { Menu, ItemVirtualizer };\nexport type { MenuProps, ItemVirtualizerProps };\n", "import type { EventHandler, KeyboardEvent, SyntheticEvent } from 'react';\n\nconst createItemId = (index: number, id: string) => `${id}-item-${index}`;\n\nconst getNodeForIndex = (index: number | null, menuId: string) =>\n index === null ? index : document.getElementById(createItemId(index, menuId));\n\nconst handleKeyboardInteractions = (\n event: React.KeyboardEvent,\n keyHandlers: Partial<\n Record<'handleUp' | 'handleDown' | 'handleEnter', (e: KeyboardEvent) => void>\n >\n) => {\n const ops = {\n ArrowUp: keyHandlers.handleUp,\n ArrowDown: keyHandlers.handleDown,\n Enter: keyHandlers.handleEnter,\n } as Record<string, (e: KeyboardEvent) => void | undefined>;\n\n if (ops[event.key]) {\n event.preventDefault();\n ops[event.key]?.call(globalThis, event);\n }\n};\n\nconst chainEventHandlers =\n (...handlers: Array<EventHandler<SyntheticEvent> | undefined>) =>\n (event: SyntheticEvent) => {\n handlers.forEach((h) => typeof h === 'function' && h(event));\n };\n\nexport { createItemId, getNodeForIndex, handleKeyboardInteractions, chainEventHandlers };\n", "enum MenuSize {\n SMALL = 'sm',\n MEDIUM = 'md',\n LARGE = 'lg',\n EXTRA_LARGE = 'xl',\n}\n\nexport { MenuSize };\n"],
|
5
|
+
"mappings": "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",
|
6
|
+
"names": ["import_Menu", "import_classix", "import_Menu", "import_react", "import_Menu", "import_react", "import_Menu", "import_focus", "import_classix", "import_react", "MenuSize"]
|
7
7
|
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@launchpad-ui/menu",
|
3
|
-
"version": "0.4.
|
3
|
+
"version": "0.4.7",
|
4
4
|
"status": "beta",
|
5
5
|
"publishConfig": {
|
6
6
|
"access": "public"
|
@@ -26,25 +26,23 @@
|
|
26
26
|
},
|
27
27
|
"source": "src/index.ts",
|
28
28
|
"dependencies": {
|
29
|
-
"@launchpad-ui/form": "~0.3.
|
30
|
-
"@launchpad-ui/icons": "~0.3.
|
31
|
-
"@launchpad-ui/popover": "~0.6.
|
29
|
+
"@launchpad-ui/form": "~0.3.5",
|
30
|
+
"@launchpad-ui/icons": "~0.3.3",
|
31
|
+
"@launchpad-ui/popover": "~0.6.5",
|
32
32
|
"@launchpad-ui/tokens": "~0.1.5",
|
33
|
-
"@launchpad-ui/tooltip": "~0.4.
|
33
|
+
"@launchpad-ui/tooltip": "~0.4.5",
|
34
34
|
"@radix-ui/react-slot": "^1.0.0",
|
35
|
-
"@react-aria/focus": "^3.
|
35
|
+
"@react-aria/focus": "^3.8.0",
|
36
36
|
"@react-aria/separator": "^3.2.0",
|
37
|
-
"
|
37
|
+
"classix": "^2.1.13",
|
38
38
|
"react-router-dom": "^6.3.0",
|
39
|
-
"react-virtual": "^2.10.4"
|
40
|
-
"uuid": "^8.3.2"
|
39
|
+
"react-virtual": "^2.10.4"
|
41
40
|
},
|
42
41
|
"peerDependencies": {
|
43
42
|
"react": "^18.0.0",
|
44
43
|
"react-dom": "^18.0.0"
|
45
44
|
},
|
46
45
|
"devDependencies": {
|
47
|
-
"@types/uuid": "^8.3.4",
|
48
46
|
"react": "^18.2.0",
|
49
47
|
"react-dom": "^18.2.0"
|
50
48
|
},
|