@telicent-oss/ds 0.21.1 → 0.23.0

package/dist/ds.js

@@ -55119,9 +55119,9 @@ const DownArrow = ({
   ...iconProps
 }) => {
   const theme = useTheme$1();
-  return /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faAngleDown, css: /* @__PURE__ */ css({
+  return /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faAngleDown, size: "sm", css: /* @__PURE__ */ css({
     color: color2 === "primary" ? theme.palette.primary.main : "inherit"
-  }, process.env.NODE_ENV === "production" ? "" : ";label:DownArrow;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3RlbGljZW50LWRzL3RlbGljZW50LWRzL3NyYy92MS9jb21wb25lbnRzL2RhdGEtZGlzcGxheS9Gb250QXdlc29tZUljb25zL0Rvd25BcnJvd0ljb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCTSIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay90ZWxpY2VudC1kcy90ZWxpY2VudC1kcy9zcmMvdjEvY29tcG9uZW50cy9kYXRhLWRpc3BsYXkvRm9udEF3ZXNvbWVJY29ucy9Eb3duQXJyb3dJY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7XG4gIEZvbnRBd2Vzb21lSWNvbixcbiAgRm9udEF3ZXNvbWVJY29uUHJvcHMsXG59IGZyb20gXCJAZm9ydGF3ZXNvbWUvcmVhY3QtZm9udGF3ZXNvbWVcIjtcbmltcG9ydCB7IGZhQW5nbGVEb3duIH0gZnJvbSBcIkBmb3J0YXdlc29tZS9mcmVlLXNvbGlkLXN2Zy1pY29uc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiQG11aS9tYXRlcmlhbC9zdHlsZXNcIjtcblxudHlwZSBEb3duQXJyb3dJY29uUHJvcHMgPSBPbWl0PEZvbnRBd2Vzb21lSWNvblByb3BzLCBcImljb25cIj4gJiB7XG4gIGNvbG9yPzogXCJwcmltYXJ5XCIgfCBcImluaGVyaXRcIjtcbn07XG5cbmNvbnN0IERvd25BcnJvdzogUmVhY3QuRkM8RG93bkFycm93SWNvblByb3BzPiA9ICh7IGNvbG9yLCAuLi5pY29uUHJvcHMgfSkgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIChcbiAgICA8Rm9udEF3ZXNvbWVJY29uXG4gICAgICBpY29uPXtmYUFuZ2xlRG93bn1cbiAgICAgIGNzcz17e1xuICAgICAgICBjb2xvcjogY29sb3IgPT09IFwicHJpbWFyeVwiID8gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4gOiBcImluaGVyaXRcIixcbiAgICAgIH19XG4gICAgICB7Li4uaWNvblByb3BzfVxuICAgIC8+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBEb3duQXJyb3c7XG4iXX0= */"), ...iconProps });
+  }, process.env.NODE_ENV === "production" ? "" : ";label:DownArrow;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3RlbGljZW50LWRzL3RlbGljZW50LWRzL3NyYy92MS9jb21wb25lbnRzL2RhdGEtZGlzcGxheS9Gb250QXdlc29tZUljb25zL0Rvd25BcnJvd0ljb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1CTSIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay90ZWxpY2VudC1kcy90ZWxpY2VudC1kcy9zcmMvdjEvY29tcG9uZW50cy9kYXRhLWRpc3BsYXkvRm9udEF3ZXNvbWVJY29ucy9Eb3duQXJyb3dJY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7XG4gIEZvbnRBd2Vzb21lSWNvbixcbiAgRm9udEF3ZXNvbWVJY29uUHJvcHMsXG59IGZyb20gXCJAZm9ydGF3ZXNvbWUvcmVhY3QtZm9udGF3ZXNvbWVcIjtcbmltcG9ydCB7IGZhQW5nbGVEb3duIH0gZnJvbSBcIkBmb3J0YXdlc29tZS9mcmVlLXNvbGlkLXN2Zy1pY29uc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiQG11aS9tYXRlcmlhbC9zdHlsZXNcIjtcblxudHlwZSBEb3duQXJyb3dJY29uUHJvcHMgPSBPbWl0PEZvbnRBd2Vzb21lSWNvblByb3BzLCBcImljb25cIj4gJiB7XG4gIGNvbG9yPzogXCJwcmltYXJ5XCIgfCBcImluaGVyaXRcIjtcbn07XG5cbmNvbnN0IERvd25BcnJvdzogUmVhY3QuRkM8RG93bkFycm93SWNvblByb3BzPiA9ICh7IGNvbG9yLCAuLi5pY29uUHJvcHMgfSkgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIChcbiAgICA8Rm9udEF3ZXNvbWVJY29uXG4gICAgICBpY29uPXtmYUFuZ2xlRG93bn1cbiAgICAgIHNpemU9XCJzbVwiXG4gICAgICBjc3M9e3tcbiAgICAgICAgY29sb3I6IGNvbG9yID09PSBcInByaW1hcnlcIiA/IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluIDogXCJpbmhlcml0XCIsXG4gICAgICB9fVxuICAgICAgey4uLmljb25Qcm9wc31cbiAgICAvPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRG93bkFycm93O1xuIl19 */"), ...iconProps });
 };
 const Download = ({
   color: color2,
@@ -57729,6 +57729,90 @@ const UserStatus = ({
     /* @__PURE__ */ jsx$1(Grid, { item: true, xs: 5, children: children2 })
   ] })
 ] });
+const DropdownButtonMenuItem = ({
+  onClick,
+  faIcon,
+  id: id2,
+  icon: icon2,
+  value,
+  selected = false
+}) => {
+  const Icon2 = icon2;
+  const theme = useExtendedTheme();
+  return /* @__PURE__ */ jsxs(MenuItem, { onClick, id: id2, selected, sx: {
+    display: "flex",
+    alignItems: "center",
+    marginX: 1,
+    borderRadius: "4px",
+    border: "1px solid rgba(0, 0, 0, 0)",
+    "&.Mui-selected.Mui-selected": {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)"
+    },
+    "&.Mui-selected.Mui-selected:hover": {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)"
+    },
+    "&:hover": {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)",
+      border: `1px solid ${theme.palette.primary.main}`
+    }
+  }, children: [
+    (Icon2 || faIcon) && /* @__PURE__ */ jsxs(ListItemIcon$1, { children: [
+      Icon2 && /* @__PURE__ */ jsx$1(Icon2, { color: selected ? "primary" : "inherit" }),
+      faIcon && /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faIcon, fontSize: "medium", color: selected ? theme.palette.primary.main : "white" })
+    ] }),
+    /* @__PURE__ */ jsx$1(ListItemText$1, { children: /* @__PURE__ */ jsx$1(Typography, { variant: "h1", sx: {
+      marginTop: 0.5,
+      fontFamily: "Figtree",
+      fontSize: 16,
+      fontWeight: 400,
+      color: `${selected ? theme.palette.primary.main : "primary"}`,
+      display: "flex",
+      alignItems: "center"
+    }, children: value }) })
+  ] });
+};
+const DropdownButton = ({
+  ariaLabel,
+  id: id2,
+  menuItems
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [selectedMenuItem, setSelectedMenuItem] = useState(menuItems.find((menuItem) => menuItem.default) ?? menuItems[0]);
+  const theme = useExtendedTheme();
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /* @__PURE__ */ jsxs(FlexBox, { children: [
+    /* @__PURE__ */ jsxs(IconButton2, { "aria-label": ariaLabel, "aria-controls": open ? id2 : void 0, "aria-haspopup": "true", sx: {
+      border: 0,
+      "&:hover": {
+        backgroundColor: "rgba(255, 255, 255, 0.08)"
+      }
+    }, "aria-expanded": open ? "true" : void 0, onClick: handleClick, color: "primary", children: [
+      selectedMenuItem.icon && /* @__PURE__ */ jsx$1(selectedMenuItem.icon, { color: "primary", className: "mr-2" }),
+      selectedMenuItem.faIcon && /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: selectedMenuItem.faIcon, fontSize: "medium", color: theme.palette.primary.main ?? "white", className: "mr-2" }),
+      /* @__PURE__ */ jsx$1(DownArrow, {})
+    ] }),
+    /* @__PURE__ */ jsx$1(Menu, { id: id2, anchorEl, open, transformOrigin: {
+      vertical: -20,
+      horizontal: "left"
+    }, onClose: handleClose, MenuListProps: {
+      "aria-labelledby": id2
+    }, sx: {
+      "& .MuiPaper-root": {
+        backgroundColor: theme.palette.mode === "dark" ? "#2A2A2A" : "#ffffff"
+      }
+    }, children: menuItems.map((menuItem, index) => /* @__PURE__ */ jsx$1(DropdownButtonMenuItem, { id: `${id2}-item-${index}`, onClick: () => {
+      menuItem.onClick(menuItem.value);
+      setSelectedMenuItem(menuItem);
+      handleClose();
+    }, icon: menuItem == null ? void 0 : menuItem.icon, faIcon: menuItem == null ? void 0 : menuItem.faIcon, value: menuItem.value, selected: menuItem.value === selectedMenuItem.value }, `${id2}-item-${index}`)) })
+  ] });
+};
 const LinearProgress2 = ({
   // isActive,
   // transition = 500,
@@ -57742,19 +57826,19 @@ const LinearProgress2 = ({
   );
 };
 const Skeleton2 = Skeleton$1;
-const PrimaryButton = (buttonProps) => /* @__PURE__ */ jsx$1(Button$1, { variant: "contained", color: "primary", ...buttonProps, children: buttonProps.children });
-const SecondaryButton = (buttonProps) => {
+const PrimaryButton = forwardRef((buttonProps, ref) => /* @__PURE__ */ jsx$1(Button$1, { variant: "contained", ref, color: "primary", ...buttonProps, children: buttonProps.children }));
+const SecondaryButton = forwardRef((buttonProps, ref) => {
   if (buttonProps.disableElevation) {
-    return /* @__PURE__ */ jsx$1(Button$1, { variant: "outlined", color: "primary", ...buttonProps, children: buttonProps.children });
+    return /* @__PURE__ */ jsx$1(Button$1, { variant: "outlined", color: "primary", ...buttonProps, ref, children: buttonProps.children });
   }
-  return /* @__PURE__ */ jsx$1(Button$1, { variant: "outlined", color: "inherit", ...buttonProps, children: buttonProps.children });
-};
-const LinkButton = (buttonProps) => {
+  return /* @__PURE__ */ jsx$1(Button$1, { variant: "outlined", color: "inherit", ...buttonProps, ref, children: buttonProps.children });
+});
+const LinkButton = forwardRef((buttonProps, ref) => {
   const theme = useTheme$1();
   return /* @__PURE__ */ jsxs(Box, { sx: {
     width: "fit-content"
   }, children: [
-    /* @__PURE__ */ jsx$1(Button$1, { variant: "text", color: "primary", ...buttonProps, disableRipple: true, sx: {
+    /* @__PURE__ */ jsx$1(Button$1, { ref, variant: "text", color: "primary", ...buttonProps, disableRipple: true, sx: {
       minWidth: "fit-content",
       padding: 0,
       ":hover": {
@@ -57775,17 +57859,18 @@ const LinkButton = (buttonProps) => {
       transitionTimingFunction: "cubic-bezier(0.39, 0.58, 0.57, 1)"
     } })
   ] });
-};
-const Button2 = ({
-  variant = "primary",
-  color: color2 = "primary",
-  ...buttonProps
-}) => {
-  if (variant === "primary") return /* @__PURE__ */ jsx$1(PrimaryButton, { ...buttonProps });
-  if (variant === "secondary") return /* @__PURE__ */ jsx$1(SecondaryButton, { ...buttonProps });
-  if (variant === "link") return /* @__PURE__ */ jsx$1(LinkButton, { ...buttonProps });
-  return /* @__PURE__ */ jsx$1(Button$1, { variant: "text", color: color2, ...buttonProps, children: buttonProps.children });
-};
+});
+const Button2 = forwardRef((props, ref) => {
+  const {
+    variant = "primary",
+    color: color2 = "primary",
+    ...buttonProps
+  } = props;
+  if (variant === "primary") return /* @__PURE__ */ jsx$1(PrimaryButton, { ...buttonProps, ref });
+  if (variant === "secondary") return /* @__PURE__ */ jsx$1(SecondaryButton, { ...buttonProps, ref });
+  if (variant === "link") return /* @__PURE__ */ jsx$1(LinkButton, { ...buttonProps, ref });
+  return /* @__PURE__ */ jsx$1(Button$1, { variant: "text", color: color2, ...buttonProps, ref, children: buttonProps.children });
+});
 const TextField2 = (props) => /* @__PURE__ */ jsx$1(TextField$1, { ...props });
 const StyledPopper = styled$1("div")({
   position: "relative",
@@ -80695,6 +80780,7 @@ export {
   DownArrow as DownArrowIcon,
   Download as DownloadIcon,
   DragHandleIcon,
+  DropdownButton,
   ENCODE_SEARCH_PARAMS_MODES_Schema,
   FeatureMap,
   Panel as FixedPanel,

package/dist/ds.umd.cjs

@@ -55137,9 +55137,9 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     ...iconProps
   }) => {
     const theme = useTheme$1();
-    return /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faAngleDown, css: /* @__PURE__ */ css({
+    return /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faAngleDown, size: "sm", css: /* @__PURE__ */ css({
       color: color2 === "primary" ? theme.palette.primary.main : "inherit"
-    }, process.env.NODE_ENV === "production" ? "" : ";label:DownArrow;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3RlbGljZW50LWRzL3RlbGljZW50LWRzL3NyYy92MS9jb21wb25lbnRzL2RhdGEtZGlzcGxheS9Gb250QXdlc29tZUljb25zL0Rvd25BcnJvd0ljb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCTSIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay90ZWxpY2VudC1kcy90ZWxpY2VudC1kcy9zcmMvdjEvY29tcG9uZW50cy9kYXRhLWRpc3BsYXkvRm9udEF3ZXNvbWVJY29ucy9Eb3duQXJyb3dJY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7XG4gIEZvbnRBd2Vzb21lSWNvbixcbiAgRm9udEF3ZXNvbWVJY29uUHJvcHMsXG59IGZyb20gXCJAZm9ydGF3ZXNvbWUvcmVhY3QtZm9udGF3ZXNvbWVcIjtcbmltcG9ydCB7IGZhQW5nbGVEb3duIH0gZnJvbSBcIkBmb3J0YXdlc29tZS9mcmVlLXNvbGlkLXN2Zy1pY29uc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiQG11aS9tYXRlcmlhbC9zdHlsZXNcIjtcblxudHlwZSBEb3duQXJyb3dJY29uUHJvcHMgPSBPbWl0PEZvbnRBd2Vzb21lSWNvblByb3BzLCBcImljb25cIj4gJiB7XG4gIGNvbG9yPzogXCJwcmltYXJ5XCIgfCBcImluaGVyaXRcIjtcbn07XG5cbmNvbnN0IERvd25BcnJvdzogUmVhY3QuRkM8RG93bkFycm93SWNvblByb3BzPiA9ICh7IGNvbG9yLCAuLi5pY29uUHJvcHMgfSkgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIChcbiAgICA8Rm9udEF3ZXNvbWVJY29uXG4gICAgICBpY29uPXtmYUFuZ2xlRG93bn1cbiAgICAgIGNzcz17e1xuICAgICAgICBjb2xvcjogY29sb3IgPT09IFwicHJpbWFyeVwiID8gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4gOiBcImluaGVyaXRcIixcbiAgICAgIH19XG4gICAgICB7Li4uaWNvblByb3BzfVxuICAgIC8+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBEb3duQXJyb3c7XG4iXX0= */"), ...iconProps });
+    }, process.env.NODE_ENV === "production" ? "" : ";label:DownArrow;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3RlbGljZW50LWRzL3RlbGljZW50LWRzL3NyYy92MS9jb21wb25lbnRzL2RhdGEtZGlzcGxheS9Gb250QXdlc29tZUljb25zL0Rvd25BcnJvd0ljb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1CTSIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay90ZWxpY2VudC1kcy90ZWxpY2VudC1kcy9zcmMvdjEvY29tcG9uZW50cy9kYXRhLWRpc3BsYXkvRm9udEF3ZXNvbWVJY29ucy9Eb3duQXJyb3dJY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7XG4gIEZvbnRBd2Vzb21lSWNvbixcbiAgRm9udEF3ZXNvbWVJY29uUHJvcHMsXG59IGZyb20gXCJAZm9ydGF3ZXNvbWUvcmVhY3QtZm9udGF3ZXNvbWVcIjtcbmltcG9ydCB7IGZhQW5nbGVEb3duIH0gZnJvbSBcIkBmb3J0YXdlc29tZS9mcmVlLXNvbGlkLXN2Zy1pY29uc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiQG11aS9tYXRlcmlhbC9zdHlsZXNcIjtcblxudHlwZSBEb3duQXJyb3dJY29uUHJvcHMgPSBPbWl0PEZvbnRBd2Vzb21lSWNvblByb3BzLCBcImljb25cIj4gJiB7XG4gIGNvbG9yPzogXCJwcmltYXJ5XCIgfCBcImluaGVyaXRcIjtcbn07XG5cbmNvbnN0IERvd25BcnJvdzogUmVhY3QuRkM8RG93bkFycm93SWNvblByb3BzPiA9ICh7IGNvbG9yLCAuLi5pY29uUHJvcHMgfSkgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIChcbiAgICA8Rm9udEF3ZXNvbWVJY29uXG4gICAgICBpY29uPXtmYUFuZ2xlRG93bn1cbiAgICAgIHNpemU9XCJzbVwiXG4gICAgICBjc3M9e3tcbiAgICAgICAgY29sb3I6IGNvbG9yID09PSBcInByaW1hcnlcIiA/IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluIDogXCJpbmhlcml0XCIsXG4gICAgICB9fVxuICAgICAgey4uLmljb25Qcm9wc31cbiAgICAvPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRG93bkFycm93O1xuIl19 */"), ...iconProps });
   };
   const Download = ({
     color: color2,
@@ -57747,6 +57747,90 @@ Please use another name.` : formatMuiErrorMessage$1(18));
       /* @__PURE__ */ jsx$1(Grid, { item: true, xs: 5, children: children2 })
     ] })
   ] });
+  const DropdownButtonMenuItem = ({
+    onClick,
+    faIcon,
+    id: id2,
+    icon: icon2,
+    value,
+    selected = false
+  }) => {
+    const Icon2 = icon2;
+    const theme = useExtendedTheme();
+    return /* @__PURE__ */ jsxs(MenuItem, { onClick, id: id2, selected, sx: {
+      display: "flex",
+      alignItems: "center",
+      marginX: 1,
+      borderRadius: "4px",
+      border: "1px solid rgba(0, 0, 0, 0)",
+      "&.Mui-selected.Mui-selected": {
+        backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)"
+      },
+      "&.Mui-selected.Mui-selected:hover": {
+        backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)"
+      },
+      "&:hover": {
+        backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)",
+        border: `1px solid ${theme.palette.primary.main}`
+      }
+    }, children: [
+      (Icon2 || faIcon) && /* @__PURE__ */ jsxs(ListItemIcon$1, { children: [
+        Icon2 && /* @__PURE__ */ jsx$1(Icon2, { color: selected ? "primary" : "inherit" }),
+        faIcon && /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faIcon, fontSize: "medium", color: selected ? theme.palette.primary.main : "white" })
+      ] }),
+      /* @__PURE__ */ jsx$1(ListItemText$1, { children: /* @__PURE__ */ jsx$1(Typography, { variant: "h1", sx: {
+        marginTop: 0.5,
+        fontFamily: "Figtree",
+        fontSize: 16,
+        fontWeight: 400,
+        color: `${selected ? theme.palette.primary.main : "primary"}`,
+        display: "flex",
+        alignItems: "center"
+      }, children: value }) })
+    ] });
+  };
+  const DropdownButton = ({
+    ariaLabel,
+    id: id2,
+    menuItems
+  }) => {
+    const [anchorEl, setAnchorEl] = React$2.useState(null);
+    const [selectedMenuItem, setSelectedMenuItem] = React$2.useState(menuItems.find((menuItem) => menuItem.default) ?? menuItems[0]);
+    const theme = useExtendedTheme();
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+      setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+    return /* @__PURE__ */ jsxs(FlexBox, { children: [
+      /* @__PURE__ */ jsxs(IconButton, { "aria-label": ariaLabel, "aria-controls": open ? id2 : void 0, "aria-haspopup": "true", sx: {
+        border: 0,
+        "&:hover": {
+          backgroundColor: "rgba(255, 255, 255, 0.08)"
+        }
+      }, "aria-expanded": open ? "true" : void 0, onClick: handleClick, color: "primary", children: [
+        selectedMenuItem.icon && /* @__PURE__ */ jsx$1(selectedMenuItem.icon, { color: "primary", className: "mr-2" }),
+        selectedMenuItem.faIcon && /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: selectedMenuItem.faIcon, fontSize: "medium", color: theme.palette.primary.main ?? "white", className: "mr-2" }),
+        /* @__PURE__ */ jsx$1(DownArrow, {})
+      ] }),
+      /* @__PURE__ */ jsx$1(Menu, { id: id2, anchorEl, open, transformOrigin: {
+        vertical: -20,
+        horizontal: "left"
+      }, onClose: handleClose, MenuListProps: {
+        "aria-labelledby": id2
+      }, sx: {
+        "& .MuiPaper-root": {
+          backgroundColor: theme.palette.mode === "dark" ? "#2A2A2A" : "#ffffff"
+        }
+      }, children: menuItems.map((menuItem, index) => /* @__PURE__ */ jsx$1(DropdownButtonMenuItem, { id: `${id2}-item-${index}`, onClick: () => {
+        menuItem.onClick(menuItem.value);
+        setSelectedMenuItem(menuItem);
+        handleClose();
+      }, icon: menuItem == null ? void 0 : menuItem.icon, faIcon: menuItem == null ? void 0 : menuItem.faIcon, value: menuItem.value, selected: menuItem.value === selectedMenuItem.value }, `${id2}-item-${index}`)) })
+    ] });
+  };
   const LinearProgress = ({
     // isActive,
     // transition = 500,
@@ -57760,19 +57844,19 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     );
   };
   const Skeleton = Skeleton$1;
-  const PrimaryButton = (buttonProps) => /* @__PURE__ */ jsx$1(Button$1, { variant: "contained", color: "primary", ...buttonProps, children: buttonProps.children });
-  const SecondaryButton = (buttonProps) => {
+  const PrimaryButton = React$2.forwardRef((buttonProps, ref) => /* @__PURE__ */ jsx$1(Button$1, { variant: "contained", ref, color: "primary", ...buttonProps, children: buttonProps.children }));
+  const SecondaryButton = React$2.forwardRef((buttonProps, ref) => {
     if (buttonProps.disableElevation) {
-      return /* @__PURE__ */ jsx$1(Button$1, { variant: "outlined", color: "primary", ...buttonProps, children: buttonProps.children });
+      return /* @__PURE__ */ jsx$1(Button$1, { variant: "outlined", color: "primary", ...buttonProps, ref, children: buttonProps.children });
     }
-    return /* @__PURE__ */ jsx$1(Button$1, { variant: "outlined", color: "inherit", ...buttonProps, children: buttonProps.children });
-  };
-  const LinkButton = (buttonProps) => {
+    return /* @__PURE__ */ jsx$1(Button$1, { variant: "outlined", color: "inherit", ...buttonProps, ref, children: buttonProps.children });
+  });
+  const LinkButton = React$2.forwardRef((buttonProps, ref) => {
     const theme = useTheme$1();
     return /* @__PURE__ */ jsxs(Box, { sx: {
       width: "fit-content"
     }, children: [
-      /* @__PURE__ */ jsx$1(Button$1, { variant: "text", color: "primary", ...buttonProps, disableRipple: true, sx: {
+      /* @__PURE__ */ jsx$1(Button$1, { ref, variant: "text", color: "primary", ...buttonProps, disableRipple: true, sx: {
         minWidth: "fit-content",
         padding: 0,
         ":hover": {
@@ -57793,17 +57877,18 @@ Please use another name.` : formatMuiErrorMessage$1(18));
         transitionTimingFunction: "cubic-bezier(0.39, 0.58, 0.57, 1)"
       } })
     ] });
-  };
-  const Button = ({
-    variant = "primary",
-    color: color2 = "primary",
-    ...buttonProps
-  }) => {
-    if (variant === "primary") return /* @__PURE__ */ jsx$1(PrimaryButton, { ...buttonProps });
-    if (variant === "secondary") return /* @__PURE__ */ jsx$1(SecondaryButton, { ...buttonProps });
-    if (variant === "link") return /* @__PURE__ */ jsx$1(LinkButton, { ...buttonProps });
-    return /* @__PURE__ */ jsx$1(Button$1, { variant: "text", color: color2, ...buttonProps, children: buttonProps.children });
-  };
+  });
+  const Button = React$2.forwardRef((props, ref) => {
+    const {
+      variant = "primary",
+      color: color2 = "primary",
+      ...buttonProps
+    } = props;
+    if (variant === "primary") return /* @__PURE__ */ jsx$1(PrimaryButton, { ...buttonProps, ref });
+    if (variant === "secondary") return /* @__PURE__ */ jsx$1(SecondaryButton, { ...buttonProps, ref });
+    if (variant === "link") return /* @__PURE__ */ jsx$1(LinkButton, { ...buttonProps, ref });
+    return /* @__PURE__ */ jsx$1(Button$1, { variant: "text", color: color2, ...buttonProps, ref, children: buttonProps.children });
+  });
   const TextField = (props) => /* @__PURE__ */ jsx$1(TextField$1, { ...props });
   const StyledPopper = styled$1("div")({
     position: "relative",
@@ -80717,6 +80802,7 @@ uniform ${i3} ${s4} u_${a3};
   exports2.DownArrowIcon = DownArrow;
   exports2.DownloadIcon = Download;
   exports2.DragHandleIcon = DragHandleIcon;
+  exports2.DropdownButton = DropdownButton;
   exports2.ENCODE_SEARCH_PARAMS_MODES_Schema = ENCODE_SEARCH_PARAMS_MODES_Schema;
   exports2.FeatureMap = FeatureMap;
   exports2.FixedPanel = Panel;

package/dist/src/story-coverage.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/v1/components/data-display/DropdownButton/DropdownButton.d.ts

@@ -0,0 +1,20 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import { default as React } from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+export interface DropdownButtonProps {
+    ariaLabel: string;
+    id: string;
+    menuItems: DropDownButtonMenuItemProps[];
+}
+export interface DropDownButtonMenuItemProps {
+    id: string;
+    onClick: (val: string) => void;
+    faIcon?: IconProp;
+    icon?: React.ElementType<SvgIconProps>;
+    value: string;
+    default?: boolean;
+    selected: boolean;
+}
+declare const DropdownButton: React.FC<DropdownButtonProps>;
+export default DropdownButton;

package/dist/src/v1/components/data-display/DropdownButton/DropdownButton.stories.d.ts

@@ -0,0 +1,47 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./DropdownButton').DropdownButtonProps>;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        id: string;
+        ariaLabel: string;
+        menuItems: {
+            id: string;
+            icon: (() => import("@emotion/react/jsx-runtime").JSX.Element) | (() => import("@emotion/react/jsx-runtime").JSX.Element);
+            value: string;
+            default: boolean;
+            onClick: () => void;
+            selected: boolean;
+        }[];
+    };
+    argTypes: {
+        ariaLabel: {
+            control: "text";
+            description: string;
+        };
+        id: {
+            control: "text";
+            description: string;
+        };
+        menuItems: {
+            control: "object";
+            description: string;
+        };
+    };
+    decorators: (Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        ariaLabel: string;
+        id: string;
+        menuItems: import('./DropdownButton').DropDownButtonMenuItemProps[];
+    }>) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DropdownWithFontAwesome: Story;
+export declare const DropdownWithCustomIcons: Story;

package/dist/src/v1/components/data-display/DropdownButton/DropdownButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/v1/components/data-display/DropdownButton/assets/TestIcons.d.ts

@@ -0,0 +1,2 @@
+export declare const TestCatalogIcon: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TestGraphIcon: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/src/v1/components/data-display/index.d.ts

@@ -18,3 +18,4 @@ export { default as UserProfileContent } from './UserProfile/UserProfileContent/
 export { default as TitleAndContent } from './Text/TitleAndContent/TitleAndContent';
 export { default as UserStatus } from './UserProfile/UserProfileContent/UserStatus';
 export type { UserStatusProps } from './UserProfile/UserProfileContent/UserStatus';
+export { default as DropdownButton } from './DropdownButton/DropdownButton';

package/dist/src/v1/components/inputs/Button/Button.d.ts

@@ -47,5 +47,5 @@ export interface ButtonProps extends Omit<MUIButtonProps, "color" | "component"
      */
     variant?: "primary" | "secondary" | "tertiary" | "link" | "text";
 }
-declare const Button: React.FC<ButtonProps>;
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/src/v1/components/inputs/Button/Button.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: import('react').FC<import('./Button').ButtonProps>;
+    component: import('react').ForwardRefExoticComponent<Omit<import('./Button').ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
     parameters: {
         docs: {
             description: {
@@ -16,15 +16,6 @@ declare const meta: {
         onClick: import('@vitest/spy').Mock<(...args: any[]) => any>;
     };
     decorators: (Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
-        color?: ("primary" | "inherit") | undefined;
-        component?: import('@mui/material').ButtonProps["component"];
-        disabled?: boolean | undefined;
-        disableElevation?: boolean | undefined;
-        endIcon?: import('react').ReactNode;
-        fullWidth?: boolean | undefined;
-        size?: import('@mui/material').ButtonProps["size"];
-        startIcon?: import('react').ReactNode;
-        variant?: ("primary" | "secondary" | "tertiary" | "link" | "text") | undefined;
         children?: import('react').ReactNode;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -64,6 +55,7 @@ declare const meta: {
         vocab?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
+        color?: ("primary" | "inherit") | undefined;
         itemProp?: string | undefined;
         itemScope?: boolean | undefined;
         itemType?: string | undefined;
@@ -291,12 +283,15 @@ declare const meta: {
         onTransitionEnd?: import('react').TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLButtonElement> | undefined;
         form?: string | undefined;
-        ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
         key?: import('react').Key | null | undefined;
+        size?: import('@mui/material').ButtonProps["size"];
         type?: "submit" | "reset" | "button" | undefined;
         name?: string | undefined;
+        component?: import('@mui/material').ButtonProps["component"];
         action?: import('react').Ref<import('@mui/material').ButtonBaseActions> | undefined;
+        variant?: ("primary" | "secondary" | "tertiary" | "link" | "text") | undefined;
         centerRipple?: boolean | undefined;
+        disabled?: boolean | undefined;
         disableRipple?: boolean | undefined;
         disableTouchRipple?: boolean | undefined;
         focusRipple?: boolean | undefined;
@@ -311,7 +306,12 @@ declare const meta: {
         formMethod?: string | undefined;
         formNoValidate?: boolean | undefined;
         formTarget?: string | undefined;
+        disableElevation?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+        startIcon?: import('react').ReactNode;
+        endIcon?: import('react').ReactNode;
         disableFocusRipple?: boolean | undefined;
+        ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
     }>) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export default meta;

package/dist/src/v1/components/inputs/Button/LinkButton.d.ts

@@ -2,5 +2,5 @@ import { default as React } from 'react';
 import { ButtonProps as MUIButtonProps } from '@mui/material/Button';
 
 type LinkButtonProps = Omit<MUIButtonProps, "variant" | "color">;
-declare const LinkButton: React.FC<LinkButtonProps>;
+declare const LinkButton: React.ForwardRefExoticComponent<Omit<LinkButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default LinkButton;

package/dist/src/v1/components/inputs/Button/PrimaryButton.d.ts

@@ -2,5 +2,5 @@ import { default as React } from 'react';
 import { ButtonProps } from '@mui/material';
 
 type PrimaryButtonProps = Omit<ButtonProps, "variant" | "color">;
-declare const PrimaryButton: React.FC<PrimaryButtonProps>;
+declare const PrimaryButton: React.ForwardRefExoticComponent<Omit<PrimaryButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default PrimaryButton;

package/dist/src/v1/components/inputs/Button/SecondaryButton.d.ts

@@ -2,5 +2,5 @@ import { default as React } from 'react';
 import { ButtonProps as MUIButtonProps } from '@mui/material/Button';
 
 type SecondaryButtonProps = Omit<MUIButtonProps, "variant" | "color">;
-declare const SecondaryButton: React.FC<SecondaryButtonProps>;
+declare const SecondaryButton: React.ForwardRefExoticComponent<Omit<SecondaryButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default SecondaryButton;

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/telicent-oss/telicent-ds.git"
   },
   "type": "module",
-  "version": "0.21.1",
+  "version": "0.23.0",
   "private": false,
   "dependencies": {
     "@emotion/react": "^11.10.6",
@@ -24,16 +24,17 @@
     "@telicent-oss/ontology-icon-lib": "0.3.0",
     "@telicent-oss/ontologyservice": "0.31.3-TELFE654.0",
     "@telicent-oss/react-lib": "^0.5.0",
+    "@telicent-oss/telicent-frontend-cli": "^1.2.1",
     "classnames": "^2.3.1",
     "d3": "^7.8.2",
     "lodash": "^4.17.21",
     "maplibre-gl": "^3.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router-dom": "^6.23.1",
     "react-error-boundary": "^5.0.0",
     "react-map-gl": "^7.1.6",
     "react-rnd": "^10.4.13",
+    "react-router-dom": "^6.23.1",
     "zod": "^3.21.4"
   },
   "resolutions": {
@@ -65,7 +66,9 @@
     "prebuild": "yarn clean",
     "bump:prerelease": "yarn version --prerelease && git push && git push --tags",
     "bump:pre": "yarn bump:prerelease",
-    "link-to-local-packages": "./scripts/link-to-local-packages.sh"
+    "link-to-local-packages": "./scripts/link-to-local-packages.sh",
+    "postinstall": "[ \"$LOCAL_MACHINE\" = \"false\" ] && echo 'Skipping tefe hook-postinstall' || tefe hook-postinstall",
+    "prepare": "husky install"
   },
   "peerDependencies": {
     "@telicent-oss/ontology-icon-lib": "*",
@@ -98,6 +101,7 @@
     "@storybook/react": "8.4.0",
     "@storybook/react-vite": "8.4.0",
     "@storybook/test": "8.4.0",
+    "@storybook/theming": "^8.6.12",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
@@ -213,4 +217,4 @@
       "WARNING: TSC CHECK NO ERROR": true
     }
   }
-}
+}