@trackunit/react-components 2.5.2-alpha-3b19e5fe058.0 → 2.6.2-alpha-770d9994af7.0
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/index.cjs.js +1266 -142
- package/index.esm.js +1266 -145
- package/migrations/v3-0-0/menulist-rename-to-menucontent.js +105 -0
- package/migrations.json +5 -0
- package/package.json +6 -6
- package/src/components/Menu/MenuContent/MenuContent.d.ts +96 -0
- package/src/components/Menu/MenuDivider/MenuDivider.d.ts +5 -5
- package/src/components/Menu/MenuItem/MenuItem.d.ts +57 -10
- package/src/components/Menu/MoreMenu/MoreMenu.d.ts +7 -7
- package/src/components/Popover/MenuTree.d.ts +130 -0
- package/src/components/Popover/Popover.d.ts +8 -0
- package/src/components/Popover/PopoverContent.d.ts +13 -8
- package/src/components/Popover/PopoverNestedClearance.d.ts +56 -0
- package/src/components/Popover/PopoverSizing.d.ts +54 -2
- package/src/components/Popover/PopoverTypes.d.ts +21 -0
- package/src/components/Popover/hoverScrollGuard.d.ts +85 -0
- package/src/components/Popover/isElementVisible.d.ts +15 -0
- package/src/components/Popover/useHoverScrollGuard.d.ts +54 -0
- package/src/components/Popover/usePopover.d.ts +1 -1
- package/src/components/Sidebar/Sidebar.d.ts +3 -3
- package/src/hooks/getScrollbarWidth.d.ts +13 -0
- package/src/hooks/persistence/usePersistedState.d.ts +6 -0
- package/src/index.d.ts +4 -2
- package/translation.cjs.js +0 -1
- package/translation.esm.js +0 -1
- package/translation10.cjs.js +0 -1
- package/translation10.esm.js +0 -1
- package/translation11.cjs.js +0 -1
- package/translation11.esm.js +0 -1
- package/translation12.cjs.js +0 -1
- package/translation12.esm.js +0 -1
- package/translation13.cjs.js +0 -1
- package/translation13.esm.js +0 -1
- package/translation14.cjs.js +0 -1
- package/translation14.esm.js +0 -1
- package/translation15.cjs.js +0 -1
- package/translation15.esm.js +0 -1
- package/translation16.cjs.js +0 -1
- package/translation16.esm.js +0 -1
- package/translation17.cjs.js +0 -1
- package/translation17.esm.js +0 -1
- package/translation2.cjs.js +0 -1
- package/translation2.esm.js +0 -1
- package/translation3.cjs.js +0 -1
- package/translation3.esm.js +0 -1
- package/translation4.cjs.js +0 -1
- package/translation4.esm.js +0 -1
- package/translation5.cjs.js +0 -1
- package/translation5.esm.js +0 -1
- package/translation6.cjs.js +0 -1
- package/translation6.esm.js +0 -1
- package/translation7.cjs.js +0 -1
- package/translation7.esm.js +0 -1
- package/translation8.cjs.js +0 -1
- package/translation8.esm.js +0 -1
- package/translation9.cjs.js +0 -1
- package/translation9.esm.js +0 -1
- package/src/components/Menu/MenuList/MenuList.d.ts +0 -83
- /package/src/components/Menu/{MenuList/MenuList.variants.d.ts → MenuContent/MenuContent.variants.d.ts} +0 -0
package/translation8.cjs.js
CHANGED
package/translation8.esm.js
CHANGED
package/translation9.cjs.js
CHANGED
package/translation9.esm.js
CHANGED
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import { MouseEventHandler, ReactElement, ReactNode } from "react";
|
|
2
|
-
import { CommonProps } from "../../../common/CommonProps";
|
|
3
|
-
import type { Styleable } from "../../../common/Styleable";
|
|
4
|
-
import { Refable } from "../../../common/Refable";
|
|
5
|
-
export interface MenuListProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
|
|
6
|
-
/**
|
|
7
|
-
* List of menu items to be rendered.
|
|
8
|
-
*/
|
|
9
|
-
children: ReactNode;
|
|
10
|
-
/** Click handler - typically used to trigger close action. when propagation is NOT prevented on menuItem */
|
|
11
|
-
onClick?: MouseEventHandler<HTMLDivElement>;
|
|
12
|
-
/**
|
|
13
|
-
* Enable multi-selection in the menu list.
|
|
14
|
-
*
|
|
15
|
-
* @default false
|
|
16
|
-
*/
|
|
17
|
-
isMulti?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* Array of IDs representing the currently selected items.
|
|
20
|
-
*/
|
|
21
|
-
selectedItems?: Array<string>;
|
|
22
|
-
/**
|
|
23
|
-
* Callback triggered when selected items change.
|
|
24
|
-
*/
|
|
25
|
-
onSelectionChange?: (selected: Array<string>) => void;
|
|
26
|
-
}
|
|
27
|
-
/**
|
|
28
|
-
* The MenuList is a popover menu that appears above all other content on the page. The menu offers a list of actions or functions that a user can access by clicking on a trigger.
|
|
29
|
-
*
|
|
30
|
-
* **When to use**
|
|
31
|
-
* - Use the MenuList if you have limited space and need to display overflow actions in a list.
|
|
32
|
-
* - Use the MenuList for actions that are not essential to completing workflows.
|
|
33
|
-
* - Don't use the MenuList to display single or multi-select items within form components. For dropdowns within select components, use SelectDropdown (component not available yet).
|
|
34
|
-
*
|
|
35
|
-
* @example MenuList with action items
|
|
36
|
-
* ```tsx
|
|
37
|
-
* import { MenuList, MenuItem, MoreMenu, Icon } from "@trackunit/react-components";
|
|
38
|
-
*
|
|
39
|
-
* const ActionsMenu = () => (
|
|
40
|
-
* <MoreMenu>
|
|
41
|
-
* {(close) => (
|
|
42
|
-
* <MenuList onClick={close}>
|
|
43
|
-
* <MenuItem id="edit" prefix={<Icon name="PencilSquare" size="small" />}>
|
|
44
|
-
* Edit
|
|
45
|
-
* </MenuItem>
|
|
46
|
-
* <MenuItem id="duplicate" prefix={<Icon name="DocumentDuplicate" size="small" />}>
|
|
47
|
-
* Duplicate
|
|
48
|
-
* </MenuItem>
|
|
49
|
-
* <MenuItem id="delete" prefix={<Icon name="Trash" size="small" />} destructive>
|
|
50
|
-
* Delete
|
|
51
|
-
* </MenuItem>
|
|
52
|
-
* </MenuList>
|
|
53
|
-
* )}
|
|
54
|
-
* </MoreMenu>
|
|
55
|
-
* );
|
|
56
|
-
* ```
|
|
57
|
-
* @example Multi-select MenuList
|
|
58
|
-
* ```tsx
|
|
59
|
-
* import { MenuList, MenuItem, MoreMenu } from "@trackunit/react-components";
|
|
60
|
-
* import { useState } from "react";
|
|
61
|
-
*
|
|
62
|
-
* const FilterMenu = () => {
|
|
63
|
-
* const [selected, setSelected] = useState<string[]>(["active"]);
|
|
64
|
-
*
|
|
65
|
-
* return (
|
|
66
|
-
* <MoreMenu label="Filter by status">
|
|
67
|
-
* <MenuList
|
|
68
|
-
* isMulti
|
|
69
|
-
* selectedItems={selected}
|
|
70
|
-
* onSelectionChange={setSelected}
|
|
71
|
-
* >
|
|
72
|
-
* <MenuItem id="active">Active</MenuItem>
|
|
73
|
-
* <MenuItem id="idle">Idle</MenuItem>
|
|
74
|
-
* <MenuItem id="offline">Offline</MenuItem>
|
|
75
|
-
* </MenuList>
|
|
76
|
-
* </MoreMenu>
|
|
77
|
-
* );
|
|
78
|
-
* };
|
|
79
|
-
* ```
|
|
80
|
-
* @param {MenuListProps} props - The props for the MenuList component
|
|
81
|
-
* @returns {ReactElement} MenuList component
|
|
82
|
-
*/
|
|
83
|
-
export declare const MenuList: ({ "data-testid": dataTestId, className, children, isMulti, selectedItems: controlledSelectedItems, onSelectionChange, style, ref, ...args }: MenuListProps) => ReactElement;
|
|
File without changes
|