@gen-epix/ui-core-components 4.0.0 → 4.0.1

package/dist/components/NestedMenu/index.js

@@ -0,0 +1,240 @@
+import { useCallback as e, useImperativeHandle as t, useRef as n, useState as r } from "react";
+import { Box as i, ClickAwayListener as a, Tooltip as o, useTheme as s } from "@mui/material";
+import { useTranslation as c } from "react-i18next";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import d from "@mui/material/MenuItem";
+import { styled as f } from "@mui/material/styles";
+import p from "@mui/material/Typography";
+import m from "@mui/material/Button";
+import h from "@mui/icons-material/ExpandMore";
+import g from "@mui/material/Menu";
+import _ from "@mui/icons-material/ChevronRight";
+//#region src/components/NestedMenu/IconMenuItem.tsx
+var v = f(d)({
+	display: "flex",
+	justifyContent: "space-between",
+	paddingLeft: "4px",
+	paddingRight: "4px"
+}), y = f(p)({
+	paddingLeft: "8px",
+	paddingRight: "8px",
+	textAlign: "left"
+}), b = f(i)({ display: "flex" }), x = ({ checked: e, className: t, label: n, leftIcon: r, MenuItemProps: i, ref: a, rightIcon: o, ...s }) => /* @__PURE__ */ u(v, {
+	...i,
+	className: t,
+	ref: a,
+	...s,
+	"aria-checked": e,
+	role: e ? "menuitemcheckbox" : "menuitem",
+	children: [/* @__PURE__ */ u(b, { children: [r, /* @__PURE__ */ l(y, { children: n })] }), o]
+}), S = {
+	anchor: {
+		horizontal: "right",
+		vertical: "top"
+	},
+	transform: {
+		horizontal: "left",
+		vertical: "top"
+	}
+}, C = {
+	anchor: {
+		horizontal: "left",
+		vertical: "top"
+	},
+	transform: {
+		horizontal: "right",
+		vertical: "top"
+	}
+}, w = ({ ref: a, ...o }) => {
+	let s = n(null), c = n(null), d = n(null), [f, p] = r(null), [m, h] = r(!1), [v, y] = r(S), { callback: b, checked: w, children: T, className: E, ContainerProps: D = {}, label: O, leftIcon: k = null, MenuProps: A, parentMenuOpen: j, rightIcon: M = /* @__PURE__ */ l(_, {}), tabIndex: N, ...P } = o;
+	t(a, () => s.current);
+	let F = e((e) => {
+		s.current = e, p(e);
+	}, []), I = e(() => {
+		b && b();
+	}, [b]), L = e((e) => {
+		h(!0), D.onMouseEnter && D.onMouseEnter(e);
+	}, [D]), R = e((e) => {
+		h(!1), D.onMouseLeave && D.onMouseLeave(e);
+	}, [D]), z = e(() => {
+		h(!1);
+	}, []), B = e(() => {
+		let e = c.current?.ownerDocument.activeElement ?? null;
+		if (d.current?.children) {
+			for (let t of d.current.children) if (t === e) return !0;
+		}
+		return !1;
+	}, []), V = e((e) => {
+		e.target === c.current && h(!0), D.onFocus && D.onFocus(e);
+	}, [D]), H = e(() => {
+		setTimeout(() => {
+			B() || h(!1);
+		});
+	}, [B]), U = e((e) => {
+		if (e.key === "Escape") return;
+		B() && e.stopPropagation();
+		let t = c.current?.ownerDocument.activeElement;
+		e.key === "Enter" && e.target === c.current && b && b(), e.key === "ArrowLeft" && B() && c.current?.focus(), e.key === "ArrowRight" && e.target === c.current && e.target === t && (d.current?.children[0])?.focus();
+	}, [b, B]), W = m && j, G = e((e) => {
+		let t = s.current;
+		if (e === null || t === null) return;
+		let n = d.current?.clientWidth ?? 0, { width: r, x: i } = t.getBoundingClientRect(), a = document.body.clientWidth;
+		y(i + r + n > a ? C : S);
+	}, []), K;
+	return o.disabled || (K = N ?? -1), /* @__PURE__ */ u(i, {
+		...D,
+		onBlur: H,
+		onFocus: V,
+		onKeyDown: U,
+		onMouseEnter: L,
+		onMouseLeave: R,
+		ref: c,
+		tabIndex: K,
+		children: [/* @__PURE__ */ l(x, {
+			checked: w,
+			className: E,
+			label: O,
+			leftIcon: k,
+			MenuItemProps: P,
+			onClick: I,
+			ref: F,
+			rightIcon: M
+		}), /* @__PURE__ */ l(g, {
+			anchorEl: f,
+			anchorOrigin: v.anchor,
+			autoFocus: !1,
+			disableAutoFocus: !0,
+			disableEnforceFocus: !0,
+			onClose: z,
+			open: W,
+			ref: G,
+			sx: { pointerEvents: "none" },
+			transformOrigin: v.transform,
+			...A,
+			children: /* @__PURE__ */ l(i, {
+				ref: d,
+				sx: { pointerEvents: "auto" },
+				children: T
+			})
+		})]
+	});
+}, T = ({ handleClose: e, isOpen: t, menuItemsData: n }) => n.map((n) => {
+	let { active: r, autoCloseDisabled: i, callback: a, checked: s, disabled: c, divider: u, items: d, label: f, leftIcon: p, rightIcon: m, sx: h, tooltip: g } = n;
+	if (!c && d && d.length > 0) return /* @__PURE__ */ l(o, {
+		arrow: !0,
+		placement: "right",
+		title: void 0,
+		children: /* @__PURE__ */ l(w, {
+			callback: a,
+			checked: s,
+			disabled: c,
+			label: f,
+			leftIcon: p,
+			parentMenuOpen: t,
+			rightIcon: m,
+			sx: {
+				...h || {},
+				"& p": { fontWeight: r ? 700 : void 0 }
+			},
+			children: T({
+				handleClose: e,
+				isOpen: t,
+				menuItemsData: d
+			})
+		}, f)
+	}, f);
+	let _ = /* @__PURE__ */ l(x, {
+		checked: s,
+		disabled: c,
+		divider: u,
+		label: f,
+		leftIcon: p,
+		onClick: () => {
+			i || e(), a && a();
+		},
+		rightIcon: m,
+		sx: {
+			...h || {},
+			"& p": { fontWeight: r ? 700 : void 0 }
+		}
+	}, f);
+	return c ? _ : /* @__PURE__ */ l(o, {
+		arrow: !0,
+		placement: "right",
+		title: g ?? f,
+		children: _
+	}, f);
+}), E = ({ ref: t, ...n }) => {
+	let [d, f] = r(null), p = !!d, { t: _ } = c(), v = s(), { ButtonProps: y, ContainerProps: b, menuItemsData: x, MenuProps: S, onClick: C, showTopLevelTooltip: w, ...E } = n, D = e((e) => {
+		f(e.currentTarget), C && C(e);
+	}, [C]), O = e(() => {
+		f(null);
+	}, []), k = e(() => {
+		O();
+	}, [O]), A = e(() => {
+		O();
+	}, [O]), j = T({
+		handleClose: O,
+		isOpen: p,
+		menuItemsData: x?.items ?? []
+	}), M = /* @__PURE__ */ l(m, {
+		endIcon: /* @__PURE__ */ l(h, {}),
+		onClick: D,
+		...y,
+		"aria-expanded": p ? "true" : "false",
+		sx: {
+			...y.sx ?? {},
+			"& .MuiButton-endIcon": {
+				display: "inline-block",
+				position: "absolute",
+				right: "8px",
+				top: "2px"
+			},
+			display: "inline-block",
+			height: "24px",
+			lineHeight: "16px",
+			overflow: "hidden",
+			paddingRight: "24px",
+			position: "relative",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
+			width: "100%"
+		},
+		children: x?.label ?? _`Menu`
+	});
+	return /* @__PURE__ */ l(a, {
+		onClickAway: k,
+		children: /* @__PURE__ */ u(i, {
+			ref: t,
+			sx: { maxWidth: "100%" },
+			...b,
+			...E,
+			children: [
+				(y.disabled || !w) && M,
+				!y.disabled && w && /* @__PURE__ */ l(o, {
+					arrow: !0,
+					placement: "right",
+					slotProps: { tooltip: { sx: { marginLeft: `${v.spacing(0)} !important` } } },
+					title: x?.tooltip ?? x?.label ?? _`Menu`,
+					children: M
+				}),
+				/* @__PURE__ */ l(g, {
+					anchorEl: d,
+					hideBackdrop: !0,
+					onClose: A,
+					open: p,
+					slotProps: {
+						paper: { style: { pointerEvents: "auto" } },
+						root: { style: { pointerEvents: "none" } }
+					},
+					...S,
+					children: j
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { x as IconMenuItem, E as NestedDropdown, w as NestedMenuItem, T as nestedMenuItemsFromObject };
+
+//# sourceMappingURL=index.js.map

package/dist/components/NestedMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/NestedMenu/IconMenuItem.tsx","../../../src/components/NestedMenu/NestedMenuItem.tsx","../../../src/components/NestedMenu/nestedMenuItemsFromObject.tsx","../../../src/components/NestedMenu/NestedDropdown.tsx"],"sourcesContent":["import type { MenuItemProps } from '@mui/material/MenuItem';\nimport MenuItem from '@mui/material/MenuItem';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport { Box } from '@mui/material';\nimport type { SxProps } from '@mui/material';\nimport type {\n  MouseEvent,\n  ReactNode,\n  Ref,\n} from 'react';\n\nconst StyledMenuItem = styled(MenuItem)({\n  display: 'flex',\n  justifyContent: 'space-between',\n  paddingLeft: '4px',\n  paddingRight: '4px',\n});\n\nconst StyledTypography = styled(Typography)({\n  paddingLeft: '8px',\n  paddingRight: '8px',\n  textAlign: 'left',\n});\n\nconst FlexBox = styled(Box)({\n  display: 'flex',\n});\n\ntype IconMenuItemProps = {\n  readonly checked?: 'false' | 'mixed' | 'true';\n  readonly className?: string;\n  readonly disabled?: boolean;\n  readonly divider?: boolean;\n  readonly label?: string;\n  readonly leftIcon?: ReactNode;\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  readonly MenuItemProps?: MenuItemProps;\n  readonly onClick?: (event: MouseEvent<HTMLElement>) => void;\n  readonly ref?: Ref<HTMLLIElement>;\n  readonly rightIcon?: ReactNode;\n  readonly sx?: SxProps;\n};\n\nexport const IconMenuItem = ({ checked, className, label, leftIcon, MenuItemProps, ref, rightIcon, ...props }: IconMenuItemProps) => {\n  return (\n    <StyledMenuItem\n      {...MenuItemProps}\n      className={className}\n      ref={ref}\n      {...props}\n      aria-checked={checked}\n      role={checked ? 'menuitemcheckbox' : 'menuitem'}\n    >\n      <FlexBox>\n        {leftIcon}\n        <StyledTypography>\n          {label}\n        </StyledTypography>\n      </FlexBox>\n      {rightIcon}\n    </StyledMenuItem>\n  );\n};\n","import type { MenuProps } from '@mui/material/Menu';\nimport Menu from '@mui/material/Menu';\nimport type { MenuItemProps } from '@mui/material/MenuItem';\nimport ChevronRightIcon from '@mui/icons-material/ChevronRight';\nimport type {\n  ElementType,\n  FocusEvent,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  Ref,\n} from 'react';\nimport {\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport type { PopoverOrigin } from '@mui/material';\nimport { Box } from '@mui/material';\n\nimport { IconMenuItem } from './IconMenuItem';\n\ntype Origins = {\n  anchor: PopoverOrigin;\n  transform: PopoverOrigin;\n};\n\nconst rightOrigins: Origins = {\n  anchor: {\n    horizontal: 'right',\n    vertical: 'top',\n  },\n  transform: {\n    horizontal: 'left',\n    vertical: 'top',\n  },\n};\n\nconst leftOrigins: Origins = {\n  anchor: {\n    horizontal: 'left',\n    vertical: 'top',\n  },\n  transform: {\n    horizontal: 'right',\n    vertical: 'top',\n  },\n};\n\nexport type NestedMenuItemProps = {\n  readonly active?: boolean;\n  readonly button?: true;\n  readonly callback?: () => void;\n  readonly checked?: 'false' | 'mixed' | 'true';\n  readonly children?: ReactNode;\n  readonly className?: string;\n  readonly component?: ElementType;\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  readonly ContainerProps?: HTMLAttributes<HTMLElement>;\n  readonly disabled?: boolean;\n  readonly label?: string;\n  readonly leftIcon?: ReactNode;\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  readonly MenuProps?: Partial<Omit<MenuProps, 'children'>>;\n  readonly parentMenuOpen: boolean;\n  readonly ref?: Ref<HTMLLIElement>;\n  readonly rightIcon?: ReactNode;\n  readonly tabIndex?: number;\n} & Omit<MenuItemProps, 'button'>;\n\nexport const NestedMenuItem = ({ ref, ...props }: NestedMenuItemProps) => {\n  const menuItemRef = useRef<HTMLLIElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const menuContainerRef = useRef<HTMLDivElement>(null);\n  const [anchorEl, setAnchorEl] = useState<HTMLLIElement | null>(null);\n  const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);\n  const [origins, setOrigins] = useState<Origins>(rightOrigins);\n\n  const {\n    callback,\n    checked,\n    children,\n    className,\n    ContainerProps = {},\n    label,\n    leftIcon = null,\n    MenuProps,\n    parentMenuOpen,\n    rightIcon = <ChevronRightIcon />,\n    tabIndex: tabIndexProp,\n    ...MenuItemProps\n  } = props;\n\n  useImperativeHandle(ref, () => menuItemRef.current);\n\n  const setMenuItemNode = useCallback((node: HTMLLIElement | null): void => {\n    menuItemRef.current = node;\n    setAnchorEl(node);\n  }, []);\n\n  const onIconMenuItemClick = useCallback((): void => {\n    if (callback) {\n      callback();\n    }\n  }, [callback]);\n\n  const onMouseEnter = useCallback((e: MouseEvent<HTMLElement>): void => {\n    setIsSubMenuOpen(true);\n\n    if (ContainerProps.onMouseEnter) {\n      ContainerProps.onMouseEnter(e);\n    }\n  }, [ContainerProps]);\n\n  const onMouseLeave = useCallback((e: MouseEvent<HTMLElement>): void => {\n    setIsSubMenuOpen(false);\n\n    if (ContainerProps.onMouseLeave) {\n      ContainerProps.onMouseLeave(e);\n    }\n  }, [ContainerProps]);\n\n  const onMenuClose = useCallback((): void => {\n    setIsSubMenuOpen(false);\n  }, []);\n\n  // Check if any immediate children are active\n  const isSubmenuFocused = useCallback(() => {\n    const isActive = containerRef.current?.ownerDocument.activeElement ?? null;\n\n    if (menuContainerRef.current?.children) {\n      for (const child of menuContainerRef.current.children) {\n        if (child === isActive) {\n          return true;\n        }\n      }\n    }\n\n    return false;\n  }, []);\n\n  const onFocus = useCallback((e: FocusEvent<HTMLElement>) => {\n    if (e.target === containerRef.current) {\n      setIsSubMenuOpen(true);\n    }\n\n    if (ContainerProps.onFocus) {\n      ContainerProps.onFocus(e);\n    }\n  }, [ContainerProps]);\n\n  const onBlur = useCallback(() => {\n    setTimeout(() => {\n      if (!isSubmenuFocused()) {\n        setIsSubMenuOpen(false);\n      }\n    });\n  }, [isSubmenuFocused]);\n\n  const onKeyDown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      return;\n    }\n\n    if (isSubmenuFocused()) {\n      e.stopPropagation();\n    }\n\n    const isActive = containerRef.current?.ownerDocument.activeElement;\n\n    // if pressing enter key, run callback\n    if (e.key === 'Enter' && e.target === containerRef.current && callback) {\n      callback();\n    }\n\n    if (e.key === 'ArrowLeft' && isSubmenuFocused()) {\n      containerRef.current?.focus();\n    }\n\n    if (e.key === 'ArrowRight' && e.target === containerRef.current && e.target === isActive) {\n      const firstChild = menuContainerRef.current?.children[0] as HTMLDivElement;\n      firstChild?.focus();\n    }\n  }, [callback, isSubmenuFocused]);\n\n  const open = isSubMenuOpen && parentMenuOpen;\n\n  const menuRef = useCallback((node: HTMLElement | null) => {\n    const menuItem = menuItemRef.current;\n\n    if (node === null || menuItem === null) {\n      return;\n    }\n\n    const subMenuWidth = menuContainerRef.current?.clientWidth ?? 0;\n    const { width, x } = menuItem.getBoundingClientRect();\n    const bodyWidth = document.body.clientWidth;\n\n    setOrigins(x + width + subMenuWidth > bodyWidth ? leftOrigins : rightOrigins);\n  }, []);\n\n  // Root element must have a `tabIndex` attribute for keyboard navigation\n  let tabIndex;\n  if (!props.disabled) {\n    tabIndex = tabIndexProp ?? -1;\n  }\n\n  return (\n    <Box\n      {...ContainerProps}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      ref={containerRef}\n      tabIndex={tabIndex}\n    >\n\n      <IconMenuItem\n        checked={checked}\n        className={className}\n        label={label}\n        leftIcon={leftIcon}\n        MenuItemProps={MenuItemProps}\n        onClick={onIconMenuItemClick}\n        ref={setMenuItemNode}\n        rightIcon={rightIcon}\n      />\n      <Menu\n        // from capturing events for clicks and hovers\n\n        anchorEl={anchorEl}\n        anchorOrigin={origins.anchor}\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={false}\n        disableAutoFocus\n        disableEnforceFocus\n        onClose={onMenuClose}\n        open={open}\n        ref={menuRef}\n        // Set pointer events to 'none' to prevent the invisible Popover div\n        sx={{\n          pointerEvents: 'none',\n        }}\n        transformOrigin={origins.transform}\n        {...MenuProps}\n      >\n        <Box\n          ref={menuContainerRef}\n          sx={{ pointerEvents: 'auto' }}\n        >\n          {children}\n        </Box>\n      </Menu>\n\n    </Box>\n  );\n};\n","import { Tooltip } from '@mui/material';\n\nimport type { MenuItemData } from '../../models/nestedMenu';\n\nimport { IconMenuItem } from './IconMenuItem';\nimport { NestedMenuItem } from './NestedMenuItem';\n\nexport interface NestedMenuItemsFromObjectProps {\n  handleClose: () => void;\n  isOpen: boolean;\n  menuItemsData: MenuItemData[];\n}\n\n/**\n * Create a JSX element with nested elements creating a nested menu.\n * Every menu item should have a uid provided\n */\nexport const nestedMenuItemsFromObject = ({\n  handleClose,\n  isOpen,\n  menuItemsData: items,\n}: NestedMenuItemsFromObjectProps) => {\n  return items.map((item) => {\n    const { active, autoCloseDisabled, callback, checked, disabled, divider, items: menuItemsData, label, leftIcon, rightIcon, sx, tooltip } = item;\n    if (!disabled && menuItemsData && menuItemsData.length > 0) {\n      return (\n        <Tooltip\n          arrow\n          key={label}\n          placement={'right'}\n          title={undefined}\n        >\n          <NestedMenuItem\n            callback={callback}\n            checked={checked}\n            disabled={disabled}\n            key={label}\n            label={label}\n            leftIcon={leftIcon}\n            parentMenuOpen={isOpen}\n            rightIcon={rightIcon}\n            sx={{\n              ...(sx || {}),\n              '& p': {\n                fontWeight: active ? 700 : undefined,\n              },\n            }}\n          >\n            {/* Call this function to nest more items */}\n            {nestedMenuItemsFromObject({\n              handleClose,\n              isOpen,\n              menuItemsData,\n            })}\n          </NestedMenuItem>\n        </Tooltip>\n      );\n    }\n\n    const iconMenuItem = (\n      <IconMenuItem\n        checked={checked}\n        disabled={disabled}\n        divider={divider}\n        key={label}\n        label={label}\n        leftIcon={leftIcon}\n        // eslint-disable-next-line @eslint-react/kit/jsx-no-bind\n        onClick={() => {\n          if (!autoCloseDisabled) {\n            handleClose();\n          }\n          if (callback) {\n            callback();\n          }\n        }}\n        rightIcon={rightIcon}\n        sx={{\n          ...(sx || {}),\n          '& p': {\n            fontWeight: active ? 700 : undefined,\n          },\n        }}\n      />\n    );\n    if (disabled) {\n      return iconMenuItem;\n    }\n\n    // No children elements, return MenuItem\n    return (\n      <Tooltip\n        arrow\n        key={label}\n        placement={'right'}\n        title={tooltip ?? label}\n      >\n        {iconMenuItem}\n      </Tooltip>\n    );\n  });\n};\n","import type { ButtonProps } from '@mui/material/Button';\nimport Button from '@mui/material/Button';\nimport type { MenuProps } from '@mui/material/Menu';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\nimport Menu from '@mui/material/Menu';\nimport type {\n  MouseEvent,\n  ReactNode,\n  Ref,\n} from 'react';\nimport {\n  useCallback,\n  useState,\n} from 'react';\nimport type { BoxProps } from '@mui/material';\nimport {\n  Box,\n  ClickAwayListener,\n  Tooltip,\n  useTheme,\n} from '@mui/material';\nimport { useTranslation } from 'react-i18next';\n\nimport type { MenuItemData } from '../../models/nestedMenu';\n\nimport { nestedMenuItemsFromObject } from './nestedMenuItemsFromObject';\n\ninterface NestedDropdownProps {\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  readonly ButtonProps?: Partial<ButtonProps>;\n  readonly children?: ReactNode;\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  readonly ContainerProps?: Partial<BoxProps>;\n  readonly menuItemsData?: MenuItemData;\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  readonly MenuProps?: Partial<MenuProps>;\n  readonly onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n  readonly ref?: Ref<HTMLDivElement>;\n  readonly showTopLevelTooltip?: boolean;\n}\n\nexport const NestedDropdown = ({ ref, ...props }: NestedDropdownProps) => {\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);\n  const open = Boolean(anchorEl);\n  const { t } = useTranslation();\n  const theme = useTheme();\n\n  const { ButtonProps, ContainerProps, menuItemsData: data, MenuProps, onClick, showTopLevelTooltip, ...rest } = props;\n\n  const onButtonClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n    if (onClick) {\n      onClick(event);\n    }\n  }, [onClick]);\n  const handleClose = useCallback(() => {\n    setAnchorEl(null);\n  }, []);\n  const onClickAway = useCallback(() => {\n    handleClose();\n  }, [handleClose]);\n  const onMenuClose = useCallback(() => {\n    handleClose();\n  }, [handleClose]);\n\n  const menuItems = nestedMenuItemsFromObject({\n    handleClose,\n    isOpen: open,\n    menuItemsData: data?.items ?? [],\n  });\n\n  const buttonElement = (\n    <Button\n      endIcon={<ExpandMoreIcon />}\n      onClick={onButtonClick}\n      {...ButtonProps}\n      aria-expanded={open ? 'true' : 'false'}\n      sx={{\n        ...(ButtonProps.sx ?? {}),\n        '& .MuiButton-endIcon': {\n          display: 'inline-block',\n          position: 'absolute',\n          right: '8px',\n          top: '2px',\n        },\n        display: 'inline-block',\n        height: '24px',\n        lineHeight: '16px',\n        overflow: 'hidden',\n        paddingRight: '24px',\n        position: 'relative',\n        textOverflow: 'ellipsis',\n        whiteSpace: 'nowrap',\n        width: '100%',\n      }}\n    >\n      {data?.label ?? t`Menu`}\n    </Button>\n  );\n\n  return (\n    <ClickAwayListener onClickAway={onClickAway}>\n      <Box\n        ref={ref}\n        sx={{\n          maxWidth: '100%',\n        }}\n        {...ContainerProps}\n        {...rest}\n      >\n        {(ButtonProps.disabled || !showTopLevelTooltip) && buttonElement}\n        {(!ButtonProps.disabled && showTopLevelTooltip) && (\n          <Tooltip\n            arrow\n            placement={'right'}\n            slotProps={{\n              tooltip: {\n                sx: {\n                  marginLeft: `${theme.spacing(0)} !important`,\n                },\n              },\n            }}\n            title={data?.tooltip ?? data?.label ?? t`Menu`}\n          >\n            {buttonElement}\n          </Tooltip>\n        )}\n        <Menu\n          anchorEl={anchorEl}\n          hideBackdrop\n          onClose={onMenuClose}\n          open={open}\n          slotProps={{\n            paper: { style: { pointerEvents: 'auto' } },\n            root: { style: { pointerEvents: 'none' } },\n          }}\n          {...MenuProps}\n        >\n          {menuItems}\n        </Menu>\n      </Box>\n    </ClickAwayListener>\n\n  );\n};\n"],"mappings":"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"}

package/dist/components/NestedMenu/nestedMenuItemsFromObject.d.ts

@@ -0,0 +1,11 @@
+import { MenuItemData } from '../../models/nestedMenu';
+export interface NestedMenuItemsFromObjectProps {
+    handleClose: () => void;
+    isOpen: boolean;
+    menuItemsData: MenuItemData[];
+}
+/**
+ * Create a JSX element with nested elements creating a nested menu.
+ * Every menu item should have a uid provided
+ */
+export declare const nestedMenuItemsFromObject: ({ handleClose, isOpen, menuItemsData: items, }: NestedMenuItemsFromObjectProps) => import("react").JSX.Element[];

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,11 @@
+import { CircularProgressProps } from '@mui/material';
+import { ReactElement } from 'react';
+export type SpinnerProps = {
+    readonly color?: 'inherit' | 'primary' | 'secondary';
+    readonly inline?: boolean;
+    readonly label?: string;
+    readonly size?: CircularProgressProps['size'];
+    readonly takingLongerLabel?: string;
+    readonly takingLongerTimeoutMs?: number;
+};
+export declare const Spinner: ({ color, inline, label, size, takingLongerLabel, takingLongerTimeoutMs }: SpinnerProps) => ReactElement;

package/dist/components/Spinner/index.d.ts

@@ -0,0 +1 @@
+export * from './Spinner';

package/dist/components/Spinner/index.js

@@ -0,0 +1,63 @@
+import { useUiCoreComponentsConfigContext as e } from "../../context/uiCoreComponentsConfigContext/index.js";
+import { useEffect as t, useState as n } from "react";
+import { Box as r, CircularProgress as i, Typography as a } from "@mui/material";
+import { useTranslation as o } from "react-i18next";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { visuallyHidden as l } from "@mui/utils";
+//#region src/components/Spinner/Spinner.tsx
+var u = ({ color: u = "primary", inline: d, label: f, size: p, takingLongerLabel: m, takingLongerTimeoutMs: h }) => {
+	let [g, _] = n(!1), { t: v } = o(), y = e();
+	return t(() => {
+		let e = setTimeout(() => {
+			_(!0);
+		}, h ?? y.spinner.defaultTakingLongerTimeoutMs);
+		return () => {
+			clearTimeout(e);
+		};
+	}, [h, y.spinner.defaultTakingLongerTimeoutMs]), /* @__PURE__ */ c(r, {
+		"aria-busy": "true",
+		role: "status",
+		sx: {
+			alignItems: "center",
+			bottom: d ? "auto" : 0,
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center",
+			left: d ? "auto" : 0,
+			position: d ? "relative" : "absolute",
+			right: d ? "auto" : 0,
+			top: d ? "auto" : 0,
+			width: d ? "100%" : "auto"
+		},
+		children: [
+			/* @__PURE__ */ s(r, {
+				sx: { margin: 1 },
+				children: /* @__PURE__ */ s(i, {
+					color: u,
+					size: p ?? y.spinner.defaultCircularProgressSize
+				})
+			}),
+			/* @__PURE__ */ s(r, {
+				sx: {
+					...f ? void 0 : l,
+					margin: 1
+				},
+				children: /* @__PURE__ */ s(a, {
+					"aria-live": "polite",
+					children: f ?? v`Loading`
+				})
+			}),
+			g && /* @__PURE__ */ s(r, {
+				sx: { margin: 1 },
+				children: /* @__PURE__ */ s(a, {
+					"aria-live": "polite",
+					children: m || v`This is taking longer than expected. We are still trying.`
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { u as Spinner };
+
+//# sourceMappingURL=index.js.map

package/dist/components/Spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import type { CircularProgressProps } from '@mui/material';\nimport {\n  Box,\n  CircularProgress,\n  Typography,\n} from '@mui/material';\nimport type { ReactElement } from 'react';\nimport {\n  useEffect,\n  useState,\n} from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { visuallyHidden } from '@mui/utils';\n\nimport { useUiCoreComponentsConfigContext } from '../../context/uiCoreComponentsConfigContext';\n\n\nexport type SpinnerProps = {\n  readonly color?: 'inherit' | 'primary' | 'secondary';\n  readonly inline?: boolean;\n  readonly label?: string;\n  readonly size?: CircularProgressProps['size'];\n  readonly takingLongerLabel?: string;\n  readonly takingLongerTimeoutMs?: number;\n};\n\nexport const Spinner = ({ color = 'primary', inline, label, size, takingLongerLabel, takingLongerTimeoutMs }: SpinnerProps): ReactElement => {\n  const [isTakingLonger, setIsTakingLonger] = useState(false);\n  const { t } = useTranslation();\n\n  const uiCoreComponentsConfig = useUiCoreComponentsConfigContext();\n\n  useEffect(() => {\n    const handle = setTimeout(() => {\n      setIsTakingLonger(true);\n    }, takingLongerTimeoutMs ?? uiCoreComponentsConfig.spinner.defaultTakingLongerTimeoutMs);\n    return () => {\n      clearTimeout(handle);\n    };\n  }, [takingLongerTimeoutMs, uiCoreComponentsConfig.spinner.defaultTakingLongerTimeoutMs]);\n\n  return (\n    <Box\n      aria-busy={'true'}\n      role={'status'}\n      sx={{\n        alignItems: 'center',\n        bottom: inline ? 'auto' : 0,\n        display: 'flex',\n        flexDirection: 'column',\n        justifyContent: 'center',\n        left: inline ? 'auto' : 0,\n        position: inline ? 'relative' : 'absolute',\n        right: inline ? 'auto' : 0,\n        top: inline ? 'auto' : 0,\n        width: inline ? '100%' : 'auto',\n      }}\n    >\n      <Box\n        sx={{\n          margin: 1,\n        }}\n      >\n        <CircularProgress\n          color={color}\n          size={size ?? uiCoreComponentsConfig.spinner.defaultCircularProgressSize}\n        />\n      </Box>\n      <Box\n        sx={{\n          ...(!label ? visuallyHidden : undefined),\n          margin: 1,\n        }}\n      >\n        <Typography\n          aria-live={'polite'}\n        >\n          {label ?? t`Loading`}\n        </Typography>\n      </Box>\n      {isTakingLonger && (\n        <Box\n          sx={{\n            margin: 1,\n          }}\n        >\n          <Typography\n            aria-live={'polite'}\n          >\n            {takingLongerLabel || t`This is taking longer than expected. We are still trying.`}\n          </Typography>\n        </Box>\n      )}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;AA0BA,IAAa,KAAW,EAAE,WAAQ,WAAW,WAAQ,UAAO,SAAM,sBAAmB,+BAAwD;CAC3I,IAAM,CAAC,GAAgB,KAAqB,EAAS,EAAK,GACpD,EAAE,SAAM,EAAe,GAEvB,IAAyB,EAAiC;CAWhE,OATA,QAAgB;EACd,IAAM,IAAS,iBAAiB;GAC9B,EAAkB,EAAI;EACxB,GAAG,KAAyB,EAAuB,QAAQ,4BAA4B;EACvF,aAAa;GACX,aAAa,CAAM;EACrB;CACF,GAAG,CAAC,GAAuB,EAAuB,QAAQ,4BAA4B,CAAC,GAGrF,kBAAC,GAAD;EACE,aAAW;EACX,MAAM;EACN,IAAI;GACF,YAAY;GACZ,QAAQ,IAAS,SAAS;GAC1B,SAAS;GACT,eAAe;GACf,gBAAgB;GAChB,MAAM,IAAS,SAAS;GACxB,UAAU,IAAS,aAAa;GAChC,OAAO,IAAS,SAAS;GACzB,KAAK,IAAS,SAAS;GACvB,OAAO,IAAS,SAAS;EAC3B;EAdF,UAAA;GAgBE,kBAAC,GAAD;IACE,IAAI,EACF,QAAQ,EACV;IAEA,UAAA,kBAAC,GAAD;KACS;KACP,MAAM,KAAQ,EAAuB,QAAQ;IAC9C,CAAA;GACE,CAAA;GACL,kBAAC,GAAD;IACE,IAAI;KACF,GAAK,IAAyB,KAAA,IAAjB;KACb,QAAQ;IACV;IAEA,UAAA,kBAAC,GAAD;KACE,aAAW;KAEV,UAAA,KAAS,CAAC;IACD,CAAA;GACT,CAAA;GACJ,KACC,kBAAC,GAAD;IACE,IAAI,EACF,QAAQ,EACV;IAEA,UAAA,kBAAC,GAAD;KACE,aAAW;KAEV,UAAA,KAAqB,CAAC;IACb,CAAA;GACT,CAAA;EAEJ;;AAET"}

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,17 @@
+import { BoxProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { STEPPER_DIRECTION } from './stepperModel';
+export type Step = {
+    content?: ReactNode;
+    index?: string;
+    key: string;
+    label: string;
+    optional?: boolean;
+};
+export type StepperProps = {
+    readonly activeStep: string;
+    readonly direction?: STEPPER_DIRECTION;
+    readonly hideCompletedIndicator?: boolean;
+    readonly steps: Step[];
+} & BoxProps;
+export declare const Stepper: ({ activeStep, direction, hideCompletedIndicator, steps, ...boxProps }: StepperProps) => import("react").JSX.Element;

package/dist/components/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Stepper';
+export * from './stepperModel';