@luscii-healthtech/web-ui 20.2.1 → 20.4.0

package/dist/components/Accordion/Accordion.d.ts

@@ -5,6 +5,11 @@ export interface AccordionProps {
     items: AccordionItemProps[];
     className?: string;
     isCollapsedByDefault?: boolean;
+    /**
+     * A section at the bottom of the accordion that is
+     * always visible, even when the accordion is closed.
+     */
+    footer?: React.ReactNode;
 }
-declare const Accordion: React.VFC<AccordionProps>;
+declare const Accordion: React.FC<AccordionProps>;
 export default Accordion;

package/dist/components/Accordion/AccordionItem.d.ts

@@ -1,9 +1,17 @@
 import React from "react";
 export interface AccordionItemProps {
     id: string | number;
-    title: string;
+    title: React.ReactNode;
     content: React.ReactNode;
     className?: string;
     isCollapsedByDefault?: boolean;
+    /**
+     * Called when the accordion item opens.
+     */
+    onOpened?: () => void;
+    /**
+     * Called when the accordion item closes.
+     */
+    onClosed?: () => void;
 }
-export declare const AccordionItem: React.VFC<AccordionItemProps>;
+export declare const AccordionItem: React.FC<AccordionItemProps>;

package/dist/components/AccordionList/AccordionList.d.ts

@@ -21,18 +21,21 @@ export interface AccordionListProps extends Omit<AccordionProps, "items"> {
     isLoading?: boolean;
     actions?: React.ReactNode;
 }
-export type AccordionListItemProps<T = ListItemProps> = Omit<AccordionItemProps, "content"> & {
+export type AccordionListItemProps<T = ListItemProps> = Omit<AccordionItemProps, "title" | "content"> & {
     listItems: T[];
     draggableListType?: "default";
+    title: string;
 };
-export type DraggableAccordionListItemProps = Omit<AccordionItemProps, "content"> & {
+export type DraggableAccordionListItemProps = Omit<AccordionItemProps, "title" | "content"> & {
     draggableListType: "draggable";
     listItems: DraggableListProps["items"];
+    title: string;
 };
-export type SortableAccordionListItemProps = Omit<AccordionItemProps, "content"> & {
+export type SortableAccordionListItemProps = Omit<AccordionItemProps, "title" | "content"> & {
     draggableListType: "sortable";
     draggableIdentifier: string;
     listItems: SortableListProps["items"];
+    title: string;
 };
 export type AccordionItem = AccordionListItemProps | DraggableAccordionListItemProps | SortableAccordionListItemProps;
 interface StaticComponents {

package/dist/components/VerticalMenu/VerticalMenu.d.ts

@@ -0,0 +1,86 @@
+import React from "react";
+import { Text } from "../Text/Text";
+import { Divider } from "../Divider/Divider";
+type Props = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Renders above the menu items, but below the header.
+     */
+    title?: string | React.ReactNode;
+    /**
+     * Renders above everything else.
+     */
+    header?: React.ReactNode;
+    /**
+     * Renders below everything else.
+     */
+    footer?: React.ReactNode;
+};
+type StaticComponents = {
+    Divider: typeof MenuDivider;
+    Item: typeof MenuItem;
+    ItemLayout: typeof MenuItemLayout;
+    ItemText: typeof MenuItemText;
+    ItemPadding: typeof MenuItemPadding;
+    NotificationBubble: typeof MenuItemNotificationBubble;
+};
+export declare const VerticalMenu: React.FC<Props> & StaticComponents;
+declare function MenuItemText(props: Readonly<React.ComponentPropsWithoutRef<typeof Text>>): React.JSX.Element;
+type GetClassNameFunction = (args?: {
+    /**
+     * Whether the item should display as active.
+     */
+    isActive?: boolean;
+    /**
+     * Your own class name to add to the item.
+     */
+    classNameProp?: string;
+}) => string;
+type MenuItemProps = {
+    render: (props: {
+        /**
+         * Returns the "calculated" className for the item.
+         *
+         * The `VerticalMenu` component will decide which
+         * classes should be applied to a menu item to make
+         * it appear correctly in the menu. By placing the
+         * string of these classes on your own element/component,
+         * you allow the `VerticalMenu` component to style your
+         * element correctly.
+         */
+        getClassName: GetClassNameFunction;
+    }) => React.ReactNode;
+    children?: never;
+    paddingX?: never;
+    paddingY?: never;
+} | {
+    render?: never;
+    children?: React.ReactNode;
+    paddingX?: boolean;
+    paddingY?: boolean;
+};
+declare function MenuItem(props: MenuItemProps): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+type MenuItemLayoutProps = {
+    icon?: React.ReactNode;
+    text?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+} & ({
+    aside?: React.ReactNode;
+    notificationBubbleText?: never;
+} | {
+    aside?: never;
+    notificationBubbleText?: string;
+});
+declare function MenuItemLayout(props: MenuItemLayoutProps): React.JSX.Element;
+declare function MenuItemPadding(props: Readonly<{
+    children?: React.ReactNode;
+    className?: string;
+    paddingX?: boolean;
+    paddingY?: boolean;
+}>): React.JSX.Element;
+declare function MenuItemNotificationBubble(props: Readonly<{
+    children?: React.ReactNode;
+    className?: string;
+}>): React.JSX.Element;
+declare function MenuDivider(props: React.ComponentPropsWithoutRef<typeof Divider>): React.JSX.Element;
+export {};

package/dist/index.d.ts

@@ -3,6 +3,13 @@ export { FlexRow } from "./components/Container/FlexRow";
 export type { FlexContainerProps } from "./components/Container/types/FlexContainerProps.type";
 export { default as Toaster, TOASTER_TYPE_OPTIONS, } from "./components/Toaster/Toaster";
 export { toast } from "./components/Toaster/toast";
+/**
+ * We want a better version for the Accordion component, so we're
+ * only temporarily exporting the current version. The new version
+ * will be called `Accordion`, which will allow us to slowly migrate
+ * to the new version.
+ */
+export { default as AccordionTemporary } from "./components/Accordion/Accordion";
 export { AccordionList, AccordionListItemProps, AccordionListProps, } from "./components/AccordionList/AccordionList";
 export { Modal, ModalProps } from "./components/Modal/Modal";
 export { ModalSize, ModalBaseProps } from "./components/Modal/ModalBase";
@@ -74,6 +81,7 @@ export type { IconProps, IconKey, } from "./components/Icons/types/IconProps.typ
 export * from "./components/Icons";
 export { Divider } from "./components/Divider/Divider";
 export { FullPageModal } from "./components/Modal/FullPageModal";
+export { VerticalMenu } from "./components/VerticalMenu/VerticalMenu";
 export { Card, type Props as CardProps } from "./components/Card/Card";
 export { Dropzone, DropzoneProps } from "./components/Dropzone";
 export { FilterBar, FilterBarUtils } from "./components/FilterBar";

package/dist/index.development.js

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var classNames = require('classnames');
+var isString = require('lodash/isString');
 var lodash = require('lodash');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
@@ -49,6 +50,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var isString__default = /*#__PURE__*/_interopDefault(isString);
 var ReactTooltip__default = /*#__PURE__*/_interopDefault(ReactTooltip);
 var ReactModal__default = /*#__PURE__*/_interopDefault(ReactModal);
 var Glider__default = /*#__PURE__*/_interopDefault(Glider);
@@ -1073,8 +1075,16 @@ Title.defaultProps = {
   type: "base"
 };
 
-const AccordionItem = ({ id, title, content, isCollapsedByDefault = false }) => {
-  const [isCollapsed, toggleIsCollapsed] = React.useReducer((state) => !state, isCollapsedByDefault);
+const AccordionItem = ({ id, title, content, isCollapsedByDefault = false, onClosed, onOpened }) => {
+  const [isCollapsed, toggleIsCollapsed] = React.useReducer((isCol) => {
+    const newStateIsCollapsed = !isCol;
+    if (newStateIsCollapsed) {
+      onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+    } else {
+      onOpened === null || onOpened === void 0 ? void 0 : onOpened();
+    }
+    return newStateIsCollapsed;
+  }, isCollapsedByDefault);
   const Chevron = isCollapsed ? RightArrowIcon : ChevronDownIcon;
   return React__namespace.default.createElement(
     "li",
@@ -1085,18 +1095,23 @@ const AccordionItem = ({ id, title, content, isCollapsedByDefault = false }) =>
         "ui-border-b ui-border-slate-200": !isCollapsed
       }) },
       React__namespace.default.createElement(Chevron, { className: "ui-text-slate-300" }),
-      React__namespace.default.createElement(Title, { text: title, type: "xs" })
+      isString__default.default(title) ? React__namespace.default.createElement(Title, { type: "xs" }, title) : title
     ),
     React__namespace.default.createElement("div", { className: classNames__default.default({ "ui-hidden": isCollapsed }) }, content)
   );
 };
 
-const Accordion = ({ dataTestId, isCollapsedByDefault = false, items, className }) => {
+const Accordion = ({ dataTestId, isCollapsedByDefault = false, items, className, footer }) => {
   var _a;
-  return React__namespace.default.createElement("ul", { "data-test-id": dataTestId, className }, (_a = items.map) === null || _a === void 0 ? void 0 : _a.call(items, (item) => {
-    var _a2;
-    return React__namespace.default.createElement(AccordionItem, Object.assign({}, item, { key: item.id, isCollapsedByDefault: (_a2 = item.isCollapsedByDefault) !== null && _a2 !== void 0 ? _a2 : isCollapsedByDefault }));
-  }));
+  return React__namespace.default.createElement(
+    "ul",
+    { "data-test-id": dataTestId, className },
+    (_a = items.map) === null || _a === void 0 ? void 0 : _a.call(items, (item) => {
+      var _a2;
+      return React__namespace.default.createElement(AccordionItem, Object.assign({}, item, { key: item.id, isCollapsedByDefault: (_a2 = item.isCollapsedByDefault) !== null && _a2 !== void 0 ? _a2 : isCollapsedByDefault }));
+    }),
+    footer && React__namespace.default.createElement("div", { className: "ui-p-4" }, footer)
+  );
 };
 
 var css_248z$j = ".list-skeleton .skeleton-box {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  overflow: hidden;\n  background-color: #cbd5e1;\n  border-radius: 3px;\n}\n.list-skeleton .skeleton-box::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n.list-skeleton .skeleton-box.is-circle {\n  border-radius: 50%;\n}\n.list-skeleton .skeleton-box.is-button {\n  background-color: #e2e8f0;\n  border-radius: 9999px;\n}\n.list-skeleton .skeleton-box.is-button::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(221, 221, 221, 0) 0, rgba(221, 221, 221, 0.2) 20%, rgba(221, 221, 221, 0.5) 60%, rgba(221, 221, 221, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}";
@@ -5394,6 +5409,95 @@ const FullPageModal = ({ children, dataTestId, isOpen = false, onCloseClick, pri
 FullPageModal.Actions = FullPageModalActions;
 FullPageModal.setAppElement = ReactModal__default.default.setAppElement;
 
+const VerticalMenu = (props) => {
+  const { className, title, header, footer } = props, rest = __rest(props, ["className", "title", "header", "footer"]);
+  return React__namespace.default.createElement(
+    "div",
+    Object.assign({ className: classNames__default.default("ui-flex ui-h-full ui-flex-col ui-px-xxs ui-py-m ui-text-slate-800", className) }, rest),
+    React__namespace.default.createElement("div", null, header),
+    React__namespace.default.createElement(Text, { className: "ui-px-m ui-pb-m ui-pt-xs", variant: "lg-strong" }, title),
+    React__namespace.default.createElement("div", null, props.children),
+    React__namespace.default.createElement("div", { className: "ui-mt-auto" }, footer)
+  );
+};
+VerticalMenu.Divider = MenuDivider;
+VerticalMenu.Item = MenuItem;
+VerticalMenu.ItemLayout = MenuItemLayout;
+VerticalMenu.ItemText = MenuItemText;
+VerticalMenu.ItemPadding = MenuItemPadding;
+VerticalMenu.NotificationBubble = MenuItemNotificationBubble;
+function MenuItemText(props) {
+  return React__namespace.default.createElement(Text, Object.assign({ color: "current", variant: "strong" }, props, { className: classNames__default.default("ui-leading-[24px]", props.className) }));
+}
+const getClassName = ({ isActive = false, classNameProp = "" } = {}) => classNames__default.default(
+  // Base
+  "ui-block ui-w-full ui-px-m ui-py-xs ui-radius-xxs",
+  // Transitions
+  "ui-transition-[color,background,transform]",
+  // States
+  "hover:ui-bg-primary-background hover:ui-text-primary focus:ui-text-primary active:ui-scale-[0.98]",
+  {
+    "ui-bg-transparent ui-text-on-surface": !isActive,
+    "ui-bg-gradient-to-r ui-from-blue-800 ui-to-blue-700 ui-text-white hover:ui-text-white focus:ui-text-white": isActive
+  },
+  classNameProp
+);
+function MenuItem(props) {
+  var _a;
+  const { children, paddingX = true, paddingY = true } = props;
+  if (children) {
+    return React__namespace.default.createElement("div", { className: classNames__default.default({
+      "ui-px-m": paddingX,
+      "ui-py-xs": paddingY
+    }) }, children);
+  }
+  return (_a = props.render) === null || _a === void 0 ? void 0 : _a.call(props, { getClassName });
+}
+function MenuItemLayout(props) {
+  const { icon, text, aside, notificationBubbleText, className, children } = props;
+  if (children) {
+    return React__namespace.default.createElement("div", null, children);
+  }
+  return React__namespace.default.createElement(
+    "div",
+    { className: classNames__default.default("ui-flex ui-items-start ui-gap-xxs", className) },
+    icon && React__namespace.default.createElement("span", null, icon),
+    text && React__namespace.default.createElement(MenuItemText, null, text),
+    aside && React__namespace.default.createElement("span", { className: "ui-ml-auto" }, aside),
+    notificationBubbleText && React__namespace.default.createElement(
+      "span",
+      { className: "ui-ml-auto" },
+      React__namespace.default.createElement(MenuItemNotificationBubble, null, notificationBubbleText)
+    )
+  );
+}
+function MenuItemPadding(props) {
+  const { children, className, paddingX = true, paddingY = true } = props;
+  return React__namespace.default.createElement("div", { className: classNames__default.default({
+    "ui-px-m": paddingX,
+    "ui-py-xs": paddingY
+  }, className) }, children);
+}
+function MenuItemNotificationBubble(props) {
+  return React__namespace.default.createElement(
+    "div",
+    { className: classNames__default.default(
+      /**
+       * Spacing `l` is 24px, which is the line height for the
+       * text size here. This makes the bubble a perfect circle when
+       * there is too little text.
+       */
+      "ui-min-w-l",
+      "ui-rounded-full ui-bg-red-500 ui-px-xxs ui-text-center",
+      props.className
+    ) },
+    React__namespace.default.createElement(Text, { color: "white", inline: true, className: "ui-align-text-bottom" }, props.children)
+  );
+}
+function MenuDivider(props) {
+  return React__namespace.default.createElement(Divider, Object.assign({ className: "ui-m-1 ui-my-xxs last:ui-border-b-1" }, props));
+}
+
 const Actions = (props) => {
   const { children, className } = props, rest = __rest(props, ["children", "className"]);
   return React__namespace.default.createElement("div", Object.assign({}, rest, { className: classNames__default.default(
@@ -5807,6 +5911,7 @@ WeekdaysPicker.weekdayNameToIndex = weekdayNameToIndex;
 WeekdaysPicker.indexToWeekdayName = indexToWeekdayName;
 
 exports.AccordionList = AccordionList;
+exports.AccordionTemporary = Accordion;
 exports.AddIcon = AddIcon;
 exports.AlertsIcon = BellIcon;
 exports.Avatar = Avatar;
@@ -5969,6 +6074,7 @@ exports.Toaster = Toaster;
 exports.TrashBinIcon = DeleteIcon;
 exports.UList = UnorderedList;
 exports.UnorderedList = UnorderedList;
+exports.VerticalMenu = VerticalMenu;
 exports.ViewItem = ViewItem;
 exports.WarningIcon = ExclamationMarkIcon;
 exports.WeekdaysPicker = WeekdaysPicker;