@equinor/cpl-top-bar-react 1.0.6 → 2.0.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 (5) hide show
  1. package/dist/index.d.mts +91 -33
  2. package/dist/index.d.ts +91 -33
  3. package/dist/index.js +355 -2899
  4. package/dist/index.mjs +347 -2904
  5. package/package.json +4 -4
package/dist/index.d.mts CHANGED
@@ -17,20 +17,85 @@ interface FeedbackLinkProps {
17
17
  */
18
18
  declare function FeedbackLink({ link, subject, body }: FeedbackLinkProps): react_jsx_runtime.JSX.Element;
19
19
 
20
- type MenuHeaderProps = {
21
- appName: string;
22
- icon: React.ReactNode;
20
+ declare function SideMenuDivider(): react_jsx_runtime.JSX.Element;
21
+
22
+ type SideMenuFooterProps = {
23
+ children: React__default.ReactNode;
23
24
  };
24
- declare function MenuHeader({ appName, icon }: MenuHeaderProps): react_jsx_runtime.JSX.Element;
25
+ declare function SideMenuFooter({ children }: SideMenuFooterProps): react_jsx_runtime.JSX.Element;
25
26
 
26
- type AppUrls = {
27
- [appName: string]: {
28
- dev: string;
29
- test: string;
30
- prod: string;
31
- };
27
+ type SideMenuGroupProps = {
28
+ title: string;
29
+ children: React__default.ReactNode;
30
+ /**
31
+ * Start the group expanded. Compute this from the current route in the consuming app.
32
+ * @default false
33
+ */
34
+ defaultExpanded?: boolean;
35
+ /** Marks this group as containing the active route. Used for scroll-to-active behaviour. */
36
+ active?: boolean;
37
+ };
38
+ declare function SideMenuGroup({ title, children, defaultExpanded, active }: SideMenuGroupProps): react_jsx_runtime.JSX.Element;
39
+
40
+ type SideMenuHeaderProps = {
41
+ title: string;
42
+ icon: React__default.ReactNode;
43
+ };
44
+ declare function SideMenuHeader({ title, icon }: SideMenuHeaderProps): react_jsx_runtime.JSX.Element;
45
+
46
+ type SideMenuItemProps = {
47
+ children: React__default.ReactNode;
48
+ href?: string;
49
+ /** Opens in a new tab and shows an external link icon. Ignores `linkComponent`. */
50
+ external?: boolean;
51
+ /** Marks the item as active (highlighted). Pass `pathname === href` from the consuming app. */
52
+ active?: boolean;
53
+ /** Override the link component for this item. Falls back to the root `SideMenu` `linkComponent`. */
54
+ as?: React__default.ElementType;
55
+ };
56
+ /** A single navigation link. */
57
+ declare function SideMenuItem({ children, href, external, active, as, }: SideMenuItemProps): react_jsx_runtime.JSX.Element;
58
+
59
+ type SideMenuSectionProps = {
60
+ children: React__default.ReactNode;
61
+ /** Optional heading above the section. Accepts a string or ReactNode (e.g. with an icon). */
62
+ label?: React__default.ReactNode;
63
+ /** For one-off CSS overrides. */
64
+ style?: React__default.CSSProperties;
65
+ className?: string;
66
+ };
67
+ /** Groups related items under an optional heading. */
68
+ declare function SideMenuSection({ children, label, style, className }: SideMenuSectionProps): react_jsx_runtime.JSX.Element;
69
+
70
+ type SideMenuProps = {
71
+ isOpen: boolean;
72
+ onToggle: React.Dispatch<React.SetStateAction<boolean>>;
73
+ children: React.ReactNode;
74
+ linkComponent?: React.ElementType;
75
+ /** Override the sidebar width. Defaults to 268px. */
76
+ width?: string;
77
+ /**
78
+ * Scroll the active `SideMenu.Group` into view when the menu opens.
79
+ * Defaults to `false`.
80
+ */
81
+ scrollToActiveGroup?: boolean;
32
82
  };
33
- type MenuItems = MenuItem | MenuItemGroup;
83
+ /**
84
+ * Compound side-navigation component
85
+ *
86
+ * Sub-components: `SideMenu.Header`, `SideMenu.Section`, `SideMenu.Group`,
87
+ * `SideMenu.Item`, `SideMenu.Divider`, `SideMenu.Footer`
88
+ */
89
+ declare function SideMenu({ isOpen, onToggle, children, linkComponent, width, scrollToActiveGroup, }: SideMenuProps): react_jsx_runtime.JSX.Element;
90
+ declare namespace SideMenu {
91
+ var Header: typeof SideMenuHeader;
92
+ var Section: typeof SideMenuSection;
93
+ var Group: typeof SideMenuGroup;
94
+ var Item: typeof SideMenuItem;
95
+ var Divider: typeof SideMenuDivider;
96
+ var Footer: typeof SideMenuFooter;
97
+ }
98
+
34
99
  type MenuItem = {
35
100
  name: string;
36
101
  url?: string;
@@ -38,36 +103,29 @@ type MenuItem = {
38
103
  appName?: string;
39
104
  };
40
105
  type MenuItemGroup = {
41
- title: string;
106
+ /** Renders an accordion group header. When omitted, items are rendered as flat top-level links. */
107
+ title?: string;
42
108
  items: MenuItem[];
43
109
  isExpanded?: boolean;
44
110
  };
45
111
 
46
- type SideMenuProps = {
47
- isOpen: boolean;
48
- onToggle: React__default.Dispatch<React__default.SetStateAction<boolean>>;
49
- mainMenuItems: MenuItems[];
50
- currentEnvironment: string;
51
- appUrls: AppUrls;
52
- titleOtherMenuItems?: string;
53
- otherMenuItems?: MenuItems[];
54
- logoElement?: React__default.ReactNode;
55
- versionInfo?: React__default.ReactNode;
112
+ type RenderMenuItemsOptions = {
56
113
  /**
57
- * supports next/link and react-router-dom, will default to using a regular anchor-element if not provided
114
+ * Resolve the href for a given item. Defaults to `item.url ?? ''`.
115
+ * Use this to inject environment-aware or app-specific URL logic.
58
116
  */
59
- linkComponent?: React__default.ElementType;
117
+ getUrl?: (item: MenuItem) => string;
118
+ /** Current pathname for active state and auto-expanding the active group. */
119
+ pathname?: string;
60
120
  };
61
- declare function SideMenu({ isOpen, onToggle, mainMenuItems, logoElement, versionInfo, currentEnvironment, titleOtherMenuItems, otherMenuItems, appUrls, linkComponent, }: SideMenuProps): react_jsx_runtime.JSX.Element;
62
-
63
121
  /**
64
- * Gets the url by app name and current environment
65
- * @param appName
66
- * @param currentEnvironment needs to match a key in the appUrls
67
- * @param appUrls
68
- * @returns a string url
122
+ * Optional helper that renders a `MenuItemGroup[]` array into `SideMenu.Group` / `SideMenu.Item` nodes.
123
+ * Use this when the standard layout is sufficient — compose sub-components manually for anything custom.
124
+ *
125
+ * Groups with a `title` render as a collapsible `SideMenu.Group`.
126
+ * Groups without a `title` render their items as flat top-level links.
69
127
  */
70
- declare function useAppUrlByNameAndEnvironment(appName: string | undefined, currentEnvironment: string, appUrls: AppUrls): string;
128
+ declare function renderMenuItems(items: MenuItemGroup[], options?: RenderMenuItemsOptions): React__default.ReactNode;
71
129
 
72
130
  interface TopBarProps extends TopbarProps {
73
131
  appName: string;
@@ -101,4 +159,4 @@ interface UserMenuProps {
101
159
  }
102
160
  declare function UserMenu({ user, logout, settingsLink, children }: UserMenuProps): react_jsx_runtime.JSX.Element;
103
161
 
104
- export { type AppUrls, FeedbackLink, MenuHeader, type MenuItem, type MenuItemGroup, type MenuItems, SideMenu, StyledLink, TopBar, UserMenu, useAppUrlByNameAndEnvironment };
162
+ export { FeedbackLink, type MenuItem, type MenuItemGroup, SideMenu, SideMenuDivider, SideMenuFooter, SideMenuGroup, SideMenuHeader, SideMenuItem, SideMenuSection, StyledLink, TopBar, UserMenu, renderMenuItems };
package/dist/index.d.ts CHANGED
@@ -17,20 +17,85 @@ interface FeedbackLinkProps {
17
17
  */
18
18
  declare function FeedbackLink({ link, subject, body }: FeedbackLinkProps): react_jsx_runtime.JSX.Element;
19
19
 
20
- type MenuHeaderProps = {
21
- appName: string;
22
- icon: React.ReactNode;
20
+ declare function SideMenuDivider(): react_jsx_runtime.JSX.Element;
21
+
22
+ type SideMenuFooterProps = {
23
+ children: React__default.ReactNode;
23
24
  };
24
- declare function MenuHeader({ appName, icon }: MenuHeaderProps): react_jsx_runtime.JSX.Element;
25
+ declare function SideMenuFooter({ children }: SideMenuFooterProps): react_jsx_runtime.JSX.Element;
25
26
 
26
- type AppUrls = {
27
- [appName: string]: {
28
- dev: string;
29
- test: string;
30
- prod: string;
31
- };
27
+ type SideMenuGroupProps = {
28
+ title: string;
29
+ children: React__default.ReactNode;
30
+ /**
31
+ * Start the group expanded. Compute this from the current route in the consuming app.
32
+ * @default false
33
+ */
34
+ defaultExpanded?: boolean;
35
+ /** Marks this group as containing the active route. Used for scroll-to-active behaviour. */
36
+ active?: boolean;
37
+ };
38
+ declare function SideMenuGroup({ title, children, defaultExpanded, active }: SideMenuGroupProps): react_jsx_runtime.JSX.Element;
39
+
40
+ type SideMenuHeaderProps = {
41
+ title: string;
42
+ icon: React__default.ReactNode;
43
+ };
44
+ declare function SideMenuHeader({ title, icon }: SideMenuHeaderProps): react_jsx_runtime.JSX.Element;
45
+
46
+ type SideMenuItemProps = {
47
+ children: React__default.ReactNode;
48
+ href?: string;
49
+ /** Opens in a new tab and shows an external link icon. Ignores `linkComponent`. */
50
+ external?: boolean;
51
+ /** Marks the item as active (highlighted). Pass `pathname === href` from the consuming app. */
52
+ active?: boolean;
53
+ /** Override the link component for this item. Falls back to the root `SideMenu` `linkComponent`. */
54
+ as?: React__default.ElementType;
55
+ };
56
+ /** A single navigation link. */
57
+ declare function SideMenuItem({ children, href, external, active, as, }: SideMenuItemProps): react_jsx_runtime.JSX.Element;
58
+
59
+ type SideMenuSectionProps = {
60
+ children: React__default.ReactNode;
61
+ /** Optional heading above the section. Accepts a string or ReactNode (e.g. with an icon). */
62
+ label?: React__default.ReactNode;
63
+ /** For one-off CSS overrides. */
64
+ style?: React__default.CSSProperties;
65
+ className?: string;
66
+ };
67
+ /** Groups related items under an optional heading. */
68
+ declare function SideMenuSection({ children, label, style, className }: SideMenuSectionProps): react_jsx_runtime.JSX.Element;
69
+
70
+ type SideMenuProps = {
71
+ isOpen: boolean;
72
+ onToggle: React.Dispatch<React.SetStateAction<boolean>>;
73
+ children: React.ReactNode;
74
+ linkComponent?: React.ElementType;
75
+ /** Override the sidebar width. Defaults to 268px. */
76
+ width?: string;
77
+ /**
78
+ * Scroll the active `SideMenu.Group` into view when the menu opens.
79
+ * Defaults to `false`.
80
+ */
81
+ scrollToActiveGroup?: boolean;
32
82
  };
33
- type MenuItems = MenuItem | MenuItemGroup;
83
+ /**
84
+ * Compound side-navigation component
85
+ *
86
+ * Sub-components: `SideMenu.Header`, `SideMenu.Section`, `SideMenu.Group`,
87
+ * `SideMenu.Item`, `SideMenu.Divider`, `SideMenu.Footer`
88
+ */
89
+ declare function SideMenu({ isOpen, onToggle, children, linkComponent, width, scrollToActiveGroup, }: SideMenuProps): react_jsx_runtime.JSX.Element;
90
+ declare namespace SideMenu {
91
+ var Header: typeof SideMenuHeader;
92
+ var Section: typeof SideMenuSection;
93
+ var Group: typeof SideMenuGroup;
94
+ var Item: typeof SideMenuItem;
95
+ var Divider: typeof SideMenuDivider;
96
+ var Footer: typeof SideMenuFooter;
97
+ }
98
+
34
99
  type MenuItem = {
35
100
  name: string;
36
101
  url?: string;
@@ -38,36 +103,29 @@ type MenuItem = {
38
103
  appName?: string;
39
104
  };
40
105
  type MenuItemGroup = {
41
- title: string;
106
+ /** Renders an accordion group header. When omitted, items are rendered as flat top-level links. */
107
+ title?: string;
42
108
  items: MenuItem[];
43
109
  isExpanded?: boolean;
44
110
  };
45
111
 
46
- type SideMenuProps = {
47
- isOpen: boolean;
48
- onToggle: React__default.Dispatch<React__default.SetStateAction<boolean>>;
49
- mainMenuItems: MenuItems[];
50
- currentEnvironment: string;
51
- appUrls: AppUrls;
52
- titleOtherMenuItems?: string;
53
- otherMenuItems?: MenuItems[];
54
- logoElement?: React__default.ReactNode;
55
- versionInfo?: React__default.ReactNode;
112
+ type RenderMenuItemsOptions = {
56
113
  /**
57
- * supports next/link and react-router-dom, will default to using a regular anchor-element if not provided
114
+ * Resolve the href for a given item. Defaults to `item.url ?? ''`.
115
+ * Use this to inject environment-aware or app-specific URL logic.
58
116
  */
59
- linkComponent?: React__default.ElementType;
117
+ getUrl?: (item: MenuItem) => string;
118
+ /** Current pathname for active state and auto-expanding the active group. */
119
+ pathname?: string;
60
120
  };
61
- declare function SideMenu({ isOpen, onToggle, mainMenuItems, logoElement, versionInfo, currentEnvironment, titleOtherMenuItems, otherMenuItems, appUrls, linkComponent, }: SideMenuProps): react_jsx_runtime.JSX.Element;
62
-
63
121
  /**
64
- * Gets the url by app name and current environment
65
- * @param appName
66
- * @param currentEnvironment needs to match a key in the appUrls
67
- * @param appUrls
68
- * @returns a string url
122
+ * Optional helper that renders a `MenuItemGroup[]` array into `SideMenu.Group` / `SideMenu.Item` nodes.
123
+ * Use this when the standard layout is sufficient — compose sub-components manually for anything custom.
124
+ *
125
+ * Groups with a `title` render as a collapsible `SideMenu.Group`.
126
+ * Groups without a `title` render their items as flat top-level links.
69
127
  */
70
- declare function useAppUrlByNameAndEnvironment(appName: string | undefined, currentEnvironment: string, appUrls: AppUrls): string;
128
+ declare function renderMenuItems(items: MenuItemGroup[], options?: RenderMenuItemsOptions): React__default.ReactNode;
71
129
 
72
130
  interface TopBarProps extends TopbarProps {
73
131
  appName: string;
@@ -101,4 +159,4 @@ interface UserMenuProps {
101
159
  }
102
160
  declare function UserMenu({ user, logout, settingsLink, children }: UserMenuProps): react_jsx_runtime.JSX.Element;
103
161
 
104
- export { type AppUrls, FeedbackLink, MenuHeader, type MenuItem, type MenuItemGroup, type MenuItems, SideMenu, StyledLink, TopBar, UserMenu, useAppUrlByNameAndEnvironment };
162
+ export { FeedbackLink, type MenuItem, type MenuItemGroup, SideMenu, SideMenuDivider, SideMenuFooter, SideMenuGroup, SideMenuHeader, SideMenuItem, SideMenuSection, StyledLink, TopBar, UserMenu, renderMenuItems };