@luscii-healthtech/web-ui 33.2.0 → 35.0.0

package/dist/index.d.ts

@@ -41,12 +41,10 @@ export { Table, type TableProps } from "./components/Table/Table";
 export { prepareClientSidePagination } from "./components/Table/Table.utils";
 export { type TableFieldConfig, type TableFieldContent, type TableFieldText, type TableFieldAction, } from "./components/Table/Table.types";
 export { LoadingIndicator, type LoadingIndicatorProps, } from "./components/LoadingIndicator/LoadingIndicator";
-export { default as Menu } from "./components/Menu/Menu";
 export { List, ListItem, type ListProps, type ListItemProps, type DraggableListProps, type SortableListProps, type SortableListItemProps, type OnAssetLoadErrorPayload, getDndListItemProps, } from "./components/List";
 export { CheckboxList, type CheckboxListProps, } from "./components/CheckboxList/CheckboxList";
 export { CheckboxListModal, type CheckboxListModalProps, } from "./components/CheckBoxListModal/CheckboxListModal";
 export { NavLayout, type Props as NavLayoutProps, } from "./components/NavMenu/NavLayout";
-export { NavMenu } from "./components/NavMenu/NavMenu";
 export { NotificationBanner, type NotificationBannerColor, type NotificationBannerLinkProps, } from "./components/NotificationBanner/NotificationBanner";
 export { Page, CRUDPage, type CRUDPageProps } from "./components/Page";
 export { PaginationMenu } from "./components/PaginationMenu/PaginationMenu";

package/dist/index.development.js

@@ -3122,21 +3122,21 @@ var img$1 = "data:image/svg+xml,%3csvg width='8' height='14' viewBox='0 0 8 14'
 var css_248z$8 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-dropdown {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n  position: relative;\n  outline: none;\n  border-radius: 4px;\n}\n.cweb-dropdown:focus {\n  outline: 4px solid rgba(0, 159, 227, 0.3);\n}\n.cweb-dropdown > .dropdown-header {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  align-self: stretch;\n  height: 44px;\n  border-radius: 4px;\n  transition: all 0.4s ease;\n}\n.cweb-dropdown > .dropdown-header > .dropdown-header-icon {\n  opacity: 0.5;\n  transition: opacity 0.3s ease-in-out;\n}\n.cweb-dropdown > .dropdown-header:hover > .dropdown-header-icon {\n  opacity: 1;\n}\n.cweb-dropdown > .dropdown-list {\n  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.56);\n  display: none;\n  position: absolute;\n  top: 100%;\n  z-index: 1;\n  width: 100%;\n  max-height: 360px;\n  overflow-y: auto;\n  align-self: stretch;\n  margin-top: 8px;\n  padding: 0;\n  background-color: #ffffff;\n  list-style: none;\n  border: 1px solid #d1d5db;\n  border-radius: 4px;\n}\n.cweb-dropdown > .dropdown-list > .dropdown-list-item {\n  cursor: pointer;\n}\n.cweb-dropdown > .dropdown-list > .dropdown-list-item-group > .dropdown-list-item {\n  cursor: pointer;\n}\n.cweb-dropdown.is-open > .dropdown-list {\n  display: block;\n  margin-bottom: 32px;\n}\n.cweb-dropdown.is-open > .dropdown-list.wider {\n  width: 200%;\n}";
 styleInject(css_248z$8);
 
-var __defProp$4 = Object.defineProperty;
+var __defProp$3 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
 var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
 var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
 var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
     if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
+      __defNormalProp$3(a, prop, b[prop]);
   if (__getOwnPropSymbols$2)
     for (var prop of __getOwnPropSymbols$2(b)) {
       if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
@@ -3153,8 +3153,8 @@ var __objRest$1 = (source, exclude) => {
     }
   return target;
 };
-var __publicField$2 = (obj, key, value) => {
-  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 const ITEM_QUERY_FIELD_NAMES = {
@@ -3203,12 +3203,12 @@ const getTotalItemCount = (items) => {
 class Dropdown extends React.PureComponent {
   constructor(props) {
     super(props);
-    __publicField$2(this, "handleClickOutside", (event) => {
+    __publicField$1(this, "handleClickOutside", (event) => {
       if (this.rootRef && !this.rootRef.contains(event.target)) {
         this.closeDropdown();
       }
     });
-    __publicField$2(this, "handleKeyDown", (event) => {
+    __publicField$1(this, "handleKeyDown", (event) => {
       const { items, isDropdownOpen, highlightIndex } = this.state;
       if (event.keyCode === keyCodes.ENTER) {
         event.preventDefault();
@@ -3246,7 +3246,7 @@ class Dropdown extends React.PureComponent {
         this.rootRef.blur();
       }
     });
-    __publicField$2(this, "findItem", (items, fieldName, fieldValue) => {
+    __publicField$1(this, "findItem", (items, fieldName, fieldValue) => {
       let selectedItem;
       for (let i = 0; i < items.length; i++) {
         const item = items[i];
@@ -3267,7 +3267,7 @@ class Dropdown extends React.PureComponent {
       }
       return selectedItem;
     });
-    __publicField$2(this, "openDropdown", () => {
+    __publicField$1(this, "openDropdown", () => {
       this.setState((prevState) => {
         return {
           isDropdownOpen: true,
@@ -3275,27 +3275,27 @@ class Dropdown extends React.PureComponent {
         };
       });
     });
-    __publicField$2(this, "closeDropdown", () => {
+    __publicField$1(this, "closeDropdown", () => {
       this.setState({
         isDropdownOpen: false,
         highlightIndex: null
       });
     });
-    __publicField$2(this, "setSelectedItem", (item) => {
+    __publicField$1(this, "setSelectedItem", (item) => {
       this.setState({
         selectedItem: item
       });
     });
-    __publicField$2(this, "findSelectedItem", (selectedIndex) => {
+    __publicField$1(this, "findSelectedItem", (selectedIndex) => {
       return this.rootRef.querySelectorAll(".dropdown-list-item")[selectedIndex];
     });
-    __publicField$2(this, "scrollToHighlightedItem", (selectedIndex) => {
+    __publicField$1(this, "scrollToHighlightedItem", (selectedIndex) => {
       const selectedItem = this.findSelectedItem(selectedIndex);
       if (this.dropdownListRef.scrollTo) {
         this.dropdownListRef.scrollTo(0, selectedItem.offsetTop);
       }
     });
-    __publicField$2(this, "increaseHighlightIndexIfPossible", () => {
+    __publicField$1(this, "increaseHighlightIndexIfPossible", () => {
       this.setState((prevState) => {
         const newHighlightIndex = prevState.highlightIndex < prevState.totalItemCount - 1 ? prevState.highlightIndex + 1 : prevState.highlightIndex;
         if (newHighlightIndex !== prevState.highlightIndex) {
@@ -3306,7 +3306,7 @@ class Dropdown extends React.PureComponent {
         };
       });
     });
-    __publicField$2(this, "decreaseHighlightIndexIfPossible", () => {
+    __publicField$1(this, "decreaseHighlightIndexIfPossible", () => {
       this.setState((prevState) => {
         const newHighlightIndex = prevState.highlightIndex > 0 ? prevState.highlightIndex - 1 : prevState.highlightIndex;
         if (newHighlightIndex !== prevState.highlightIndex) {
@@ -3317,13 +3317,13 @@ class Dropdown extends React.PureComponent {
         };
       });
     });
-    __publicField$2(this, "selectItem", (item) => {
+    __publicField$1(this, "selectItem", (item) => {
       const { onItemSelect } = this.props;
       this.closeDropdown();
       this.setSelectedItem(item);
       onItemSelect(item);
     });
-    __publicField$2(this, "renderIndividualItem", (item) => {
+    __publicField$1(this, "renderIndividualItem", (item) => {
       const { highlightIndex } = this.state;
       const isItemSelected = item.highlightIndex === highlightIndex;
       const itemClassName = classNames__default.default("dropdown-list-item ui-p-3", {
@@ -3359,7 +3359,7 @@ class Dropdown extends React.PureComponent {
         )
       );
     });
-    __publicField$2(this, "renderGroupedItems", (item) => {
+    __publicField$1(this, "renderGroupedItems", (item) => {
       return /* @__PURE__ */ React__namespace.default.createElement("div", { className: "dropdown-list-item-group", key: item.groupKey }, item.title && /* @__PURE__ */ React__namespace.default.createElement("div", { className: "ui-bg-main-background ui-p-3", tabIndex: "-1" }, /* @__PURE__ */ React__namespace.default.createElement(
         Text,
         {
@@ -3372,7 +3372,7 @@ class Dropdown extends React.PureComponent {
         }
       )), item.subItems.map((subItem) => this.renderIndividualItem(subItem)));
     });
-    __publicField$2(this, "renderItems", () => {
+    __publicField$1(this, "renderItems", () => {
       const { items } = this.state;
       return /* @__PURE__ */ React__namespace.default.createElement(
         "div",
@@ -4259,72 +4259,6 @@ function Table(_a) {
   );
 }
 
-var __defProp$3 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => {
-  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class Menu extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    __publicField$1(this, "handleClickOutside", (event) => {
-      if (this.rootRef && !this.rootRef.contains(event.target)) {
-        this.closeMenu();
-      }
-    });
-    __publicField$1(this, "handleIconClick", (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      this.openMenu();
-    });
-    __publicField$1(this, "openMenu", () => {
-      this.setState({
-        isOpen: true
-      });
-    });
-    __publicField$1(this, "closeMenu", () => {
-      this.setState({
-        isOpen: false
-      });
-    });
-    this.state = {
-      isOpen: false
-    };
-  }
-  componentDidMount() {
-    document.addEventListener("mousedown", this.handleClickOutside);
-  }
-  componentWillUnmount() {
-    document.removeEventListener("mousedown", this.handleClickOutside);
-  }
-  render() {
-    const { children, className } = this.props;
-    const { isOpen } = this.state;
-    const containerClassName = classNames__default.default("cweb-menu", className, {
-      "is-open": isOpen
-    });
-    return /* @__PURE__ */ React__namespace.default.createElement(
-      "div",
-      {
-        className: containerClassName,
-        ref: (element) => this.rootRef = element
-      },
-      isOpen ? /* @__PURE__ */ React__namespace.default.createElement("div", { className: "ui-min-w-[300px] ui-rounded ui-border ui-border-slate-300 ui-p-6 ui-shadow-md" }, children) : /* @__PURE__ */ React__namespace.default.createElement(
-        Button,
-        {
-          role: "tertiary",
-          onClick: this.handleIconClick,
-          className: "chart-button"
-        }
-      )
-    );
-  }
-}
-__publicField$1(Menu, "propTypes", {
-  children: PropTypes__default.default.node.isRequired
-});
-
 var CheckboxState;
 (function(CheckboxState2) {
   CheckboxState2["CHECKED"] = "checked";
@@ -4615,147 +4549,6 @@ const NavLayout = (props) => {
   );
 };
 
-const NavMenuFooter = ({ text, subtext, visible = true }) => {
-  if (!visible) {
-    return null;
-  }
-  return React__namespace.default.createElement(
-    "div",
-    { className: "-ui-mx-1 ui-border-t ui-border-slate-600 ui-bg-nav-menu" },
-    React__namespace.default.createElement(
-      FlexRow,
-      { backgroundColor: "transparent", hasPadding: true, alignItems: "center", spacing: "none" },
-      React__namespace.default.createElement(
-        FlexColumn,
-        { backgroundColor: "transparent", spacing: "none" },
-        React__namespace.default.createElement(Text, { text, title: text, color: "white", className: "ui-max-w-50 ui-break-normal" }),
-        subtext && React__namespace.default.createElement(Text, { text: subtext, type: "sm", color: "white", truncate: true, className: "ui-max-w-50", title: subtext })
-      )
-    )
-  );
-};
-
-const NavMenuItem = (props) => {
-  var _a, _b;
-  const [currentImg, setCurrentImg] = React.useState(props.isSelected ? props.imgOnHover : props.img);
-  const classes = classNames__default.default([
-    "ui-h-11",
-    "ui-flex",
-    "ui-flex-row",
-    "ui-items-center",
-    "ui-w-auto",
-    "ui-px-4",
-    "ui-mb-1",
-    "ui-rounded",
-    "hover:ui-bg-gray-600",
-    "ui-transition",
-    "ui-ease-in",
-    "ui-duration-150",
-    "lg:last:ui-pb-2",
-    "focus:ui-outline-primary",
-    "ui-group"
-  ], {
-    "ui-bg-nav-menu": !props.isSelected,
-    "ui-bg-gray-600": props.isSelected
-  });
-  const handleOnMouseOver = () => {
-    if (!props.isSelected) {
-      setCurrentImg(props.imgOnHover);
-    }
-  };
-  const handleOnMouseOut = () => {
-    if (!props.isSelected) {
-      setCurrentImg(props.img);
-    }
-  };
-  return React__namespace.createElement(
-    "a",
-    { href: (_b = (_a = props.href) !== null && _a !== void 0 ? _a : props.linkTo) !== null && _b !== void 0 ? _b : "#", "data-test-id": props.dataTestId, className: classes, onMouseOver: handleOnMouseOver, onMouseOut: handleOnMouseOut, onClick: handleMenuClick },
-    React__namespace.createElement("img", { src: currentImg, className: "ui-ml-0 ui-mr-4" }),
-    React__namespace.createElement(Text, { type: "strong", text: props.title, hoverInGroup: true, color: "slate-200", hoverColor: "white" })
-  );
-  function handleMenuClick(event) {
-    var _a2;
-    if (event.metaKey || event.ctrlKey) {
-      return;
-    }
-    event.preventDefault();
-    (_a2 = props.trackEvent) === null || _a2 === void 0 ? void 0 : _a2.call(props);
-    if (props.isExternal) {
-      window.open(props.href, "_blank");
-    } else if (props.href) {
-      window.location.assign(props.href);
-    } else if (props.linkTo) {
-      router.navigate(props.linkTo);
-    }
-  }
-};
-
-const NavMenuHeader = (props) => {
-  const { text, visible = true, onClick, belowHeader } = props;
-  if (!visible) {
-    return React__namespace.default.createElement("div", { "data-test-id": "separator", className: "ui-mb-1 ui-border-b ui-border-slate-600" });
-  }
-  const onClickHandler = () => onClick === null || onClick === void 0 ? void 0 : onClick();
-  return React__namespace.default.createElement(
-    React__namespace.default.Fragment,
-    null,
-    React__namespace.default.createElement(
-      "div",
-      { onClick: onClickHandler, className: classNames__default.default({
-        "ui-cursor-pointer": onClick
-      }), role: "link" },
-      React__namespace.default.createElement(Text, { text, type: "xl-strong", color: "white", className: "ui-max-w-55 ui-break-normal ui-pl-4 ui-pt-6", clampLines: true }),
-      belowHeader && React__namespace.default.createElement("div", { className: "ui-pl-4 ui-pt-1" }, belowHeader)
-    ),
-    React__namespace.default.createElement("div", { "data-test-id": "separator", className: "ui-mb-1 ui-mt-5 ui-border-b ui-border-slate-600" })
-  );
-};
-
-const NavMenuContent = ({ roleItems, publicItems, authenticationItems, isUserAuthenticated, navMenuHeaderProps: organizationNameWidgetProps, navMenuFooterProps: loggedInUserWidgetProps }) => {
-  return React__namespace.default.createElement(
-    "div",
-    { className: classNames__default.default("ui-flex ui-w-60 ui-flex-col ui-bg-nav-menu ui-px-1 ui-pb-1 ui-shadow-lg lg:ui-relative lg:ui-h-full") },
-    React__namespace.default.createElement(NavMenuHeader, Object.assign({}, organizationNameWidgetProps)),
-    !isUserAuthenticated && React__namespace.default.createElement(NavMenuItem, Object.assign({}, authenticationItems.login, { key: authenticationItems.login.title })),
-    roleItems.map((item) => React__namespace.default.createElement(NavMenuItem, Object.assign({}, item, { key: item.title || item.dataTestId }))),
-    React__namespace.default.createElement(Divider, { dark: true }),
-    React__namespace.default.createElement("div", { className: "ui-mt-1" }, publicItems.map((item) => React__namespace.default.createElement(NavMenuItem, Object.assign({}, item, { key: item.title || item.dataTestId })))),
-    React__namespace.default.createElement(
-      "div",
-      { className: "ui-mt-auto" },
-      isUserAuthenticated && React__namespace.default.createElement(NavMenuItem, Object.assign({}, authenticationItems.logout, { key: authenticationItems.logout.title })),
-      React__namespace.default.createElement(NavMenuFooter, Object.assign({}, loggedInUserWidgetProps))
-    )
-  );
-};
-
-function NavMenu(props) {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const handleToggleOpen = () => {
-    setIsOpen(!isOpen);
-  };
-  return React__namespace.default.createElement(
-    React__namespace.default.Fragment,
-    null,
-    React__namespace.default.createElement(
-      "div",
-      { className: "ui-hidden ui-h-screen lg:ui-flex" },
-      React__namespace.default.createElement(NavMenuContent, Object.assign({}, props))
-    ),
-    React__namespace.default.createElement(
-      "div",
-      { className: "ui-relative ui-flex ui-w-screen ui-items-center ui-bg-nav-header ui-p-2 ui-shadow-lg lg:ui-hidden" },
-      React__namespace.default.createElement(Button, { hasIcon: true, role: "secondaryDark", iconName: isOpen ? "close" : "hamburger", onClick: handleToggleOpen })
-    ),
-    isOpen && React__namespace.default.createElement(
-      "div",
-      { className: "ui-absolute ui-z-20" },
-      React__namespace.default.createElement(NavMenuContent, Object.assign({}, props))
-    )
-  );
-}
-
 var css_248z$6 = ".cweb-page {\n  width: 100%;\n  max-width: 1140px;\n  margin: 32px auto 0 auto;\n}\n.cweb-page .cweb-page-breadcrumbs {\n  margin-bottom: 16px;\n}\n.cweb-page .page-spinner {\n  margin-left: 8px;\n  margin-bottom: 4px;\n}\n.cweb-page .page-spinner img {\n  width: 21px;\n}\n.cweb-page .cweb-page-header {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  flex-grow: 0;\n}\n.cweb-page .cweb-page-header .cweb-page-title {\n  display: inline;\n}\n.cweb-page .cweb-page-header.accessory-right {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n.cweb-page .cweb-page-header.accessory-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n@media screen and (max-width: 426px) {\n  .cweb-page .cweb-page-header.accessory-bottom {\n    max-width: 75vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom img {\n    max-width: 10vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom button p {\n    font-size: 4vw;\n  }\n}\n.cweb-page .cweb-page-header.accessory-bottom .cweb-page-title {\n  margin-bottom: 8px;\n  display: inline;\n}";
 styleInject(css_248z$6);
 
@@ -7058,14 +6851,12 @@ exports.LockIcon = LockIcon;
 exports.LogInIcon = LogInIcon;
 exports.LogOutIcon = LogOutIcon;
 exports.MediaPicker = MediaPicker;
-exports.Menu = Menu;
 exports.MessageWithArrowIcon = MessageWithArrowIcon;
 exports.MessagesIcon = MessageWithArrowIcon;
 exports.Modal = Modal;
 exports.MoreIcon = MoreIcon;
 exports.MouseIcon = MouseIcon;
 exports.NavLayout = NavLayout;
-exports.NavMenu = NavMenu;
 exports.NoteIcon = NoteIcon;
 exports.NotesIcon = NoteIcon;
 exports.NotificationBanner = NotificationBanner;