@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.
Files changed (59) hide show
  1. package/index.cjs.js +1266 -142
  2. package/index.esm.js +1266 -145
  3. package/migrations/v3-0-0/menulist-rename-to-menucontent.js +105 -0
  4. package/migrations.json +5 -0
  5. package/package.json +6 -6
  6. package/src/components/Menu/MenuContent/MenuContent.d.ts +96 -0
  7. package/src/components/Menu/MenuDivider/MenuDivider.d.ts +5 -5
  8. package/src/components/Menu/MenuItem/MenuItem.d.ts +57 -10
  9. package/src/components/Menu/MoreMenu/MoreMenu.d.ts +7 -7
  10. package/src/components/Popover/MenuTree.d.ts +130 -0
  11. package/src/components/Popover/Popover.d.ts +8 -0
  12. package/src/components/Popover/PopoverContent.d.ts +13 -8
  13. package/src/components/Popover/PopoverNestedClearance.d.ts +56 -0
  14. package/src/components/Popover/PopoverSizing.d.ts +54 -2
  15. package/src/components/Popover/PopoverTypes.d.ts +21 -0
  16. package/src/components/Popover/hoverScrollGuard.d.ts +85 -0
  17. package/src/components/Popover/isElementVisible.d.ts +15 -0
  18. package/src/components/Popover/useHoverScrollGuard.d.ts +54 -0
  19. package/src/components/Popover/usePopover.d.ts +1 -1
  20. package/src/components/Sidebar/Sidebar.d.ts +3 -3
  21. package/src/hooks/getScrollbarWidth.d.ts +13 -0
  22. package/src/hooks/persistence/usePersistedState.d.ts +6 -0
  23. package/src/index.d.ts +4 -2
  24. package/translation.cjs.js +0 -1
  25. package/translation.esm.js +0 -1
  26. package/translation10.cjs.js +0 -1
  27. package/translation10.esm.js +0 -1
  28. package/translation11.cjs.js +0 -1
  29. package/translation11.esm.js +0 -1
  30. package/translation12.cjs.js +0 -1
  31. package/translation12.esm.js +0 -1
  32. package/translation13.cjs.js +0 -1
  33. package/translation13.esm.js +0 -1
  34. package/translation14.cjs.js +0 -1
  35. package/translation14.esm.js +0 -1
  36. package/translation15.cjs.js +0 -1
  37. package/translation15.esm.js +0 -1
  38. package/translation16.cjs.js +0 -1
  39. package/translation16.esm.js +0 -1
  40. package/translation17.cjs.js +0 -1
  41. package/translation17.esm.js +0 -1
  42. package/translation2.cjs.js +0 -1
  43. package/translation2.esm.js +0 -1
  44. package/translation3.cjs.js +0 -1
  45. package/translation3.esm.js +0 -1
  46. package/translation4.cjs.js +0 -1
  47. package/translation4.esm.js +0 -1
  48. package/translation5.cjs.js +0 -1
  49. package/translation5.esm.js +0 -1
  50. package/translation6.cjs.js +0 -1
  51. package/translation6.esm.js +0 -1
  52. package/translation7.cjs.js +0 -1
  53. package/translation7.esm.js +0 -1
  54. package/translation8.cjs.js +0 -1
  55. package/translation8.esm.js +0 -1
  56. package/translation9.cjs.js +0 -1
  57. package/translation9.esm.js +0 -1
  58. package/src/components/Menu/MenuList/MenuList.d.ts +0 -83
  59. /package/src/components/Menu/{MenuList/MenuList.variants.d.ts → MenuContent/MenuContent.variants.d.ts} +0 -0
@@ -3,7 +3,6 @@
3
3
  var translation = {
4
4
  "breadcrumb.backButton": "indietro",
5
5
  "breadcrumb.expandButton": "espandi",
6
- "cardHeader.closeButton": "Chiudi",
7
6
  "moreMenu.buttonLabel": "Mostra di più"
8
7
  };
9
8
 
@@ -1,7 +1,6 @@
1
1
  var translation = {
2
2
  "breadcrumb.backButton": "indietro",
3
3
  "breadcrumb.expandButton": "espandi",
4
- "cardHeader.closeButton": "Chiudi",
5
4
  "moreMenu.buttonLabel": "Mostra di più"
6
5
  };
7
6
 
@@ -3,7 +3,6 @@
3
3
  var translation = {
4
4
  "breadcrumb.backButton": "tilbake",
5
5
  "breadcrumb.expandButton": "utvid",
6
- "cardHeader.closeButton": "Lukk",
7
6
  "moreMenu.buttonLabel": "Vis mer"
8
7
  };
9
8
 
@@ -1,7 +1,6 @@
1
1
  var translation = {
2
2
  "breadcrumb.backButton": "tilbake",
3
3
  "breadcrumb.expandButton": "utvid",
4
- "cardHeader.closeButton": "Lukk",
5
4
  "moreMenu.buttonLabel": "Vis mer"
6
5
  };
7
6
 
@@ -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;