@luscii-healthtech/web-ui 0.9.3 → 0.10.2

package/dist/components/List/List.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ListProps, ListItemProps, OnAssetLoadErrorPayload } from "./List.types";
 export { ListProps, ListItemProps, OnAssetLoadErrorPayload };
-export declare const List: ({ title, headerButton, headerTransparent, items, onAssetLoadError, }: ListProps) => JSX.Element;
+export declare const List: ({ title, headerButton, headerTransparent, items, onAssetLoadError, onDragEnd, }: ListProps) => JSX.Element;
 export default List;

package/dist/components/List/List.types.d.ts

@@ -19,6 +19,7 @@ export interface ListItemProps {
      * The header is an optional <li> on top that contains the title and accessories (buttons)
      */
     roundTop?: boolean;
+    isDraggable?: boolean;
 }
 export declare type OnAssetLoadErrorPayload = Pick<ListItemProps, "itemId" | "subtitle" | "title" | "icon">;
 export declare type ListProps = {
@@ -27,4 +28,8 @@ export declare type ListProps = {
     headerTransparent?: boolean;
     items: ListItemProps[];
     onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
+    onDragEnd?: (itemId: string | number, newIndex: number) => void;
 };
+export interface Dragula {
+    destroy?: () => void;
+}

package/dist/components/PaginationMenu/PaginationMenu.types.d.ts

@@ -23,7 +23,7 @@ export interface PaginationMenuLargeProps {
     resultCount?: number;
 }
 export declare type OnPaginationChange = (pageNumber: number, pageSize?: PageSize) => void;
-export declare type PageSize = 50 | 100 | 150 | 200;
+export declare type PageSize = 25 | 50 | 75 | 100;
 export interface Localization {
     display: string;
     page: string;

package/dist/components/Tabbar/Tabbar.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import { TabItemDetails } from "./TabbarItem";
-interface TabbarProps {
+export interface TabbarProps {
     tabs?: TabItemDetails[];
     selectedIndex?: number;
-    onSelect?: (index: number) => void;
+    onSelect?: (params: {
+        index: number;
+        selectedTab: TabItemDetails;
+    }) => void;
     className?: string;
 }
+export { TabItemDetails };
 export declare const Tabbar: ({ tabs, selectedIndex, onSelect, className, }: TabbarProps) => JSX.Element;
 export default Tabbar;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Acknowledgement, ACKNOWLEDGEMENT_TYPE_OPTIONS, } from "./components/Acknowledgement/Acknowledgement";
 export { default as Avatar } from "./components/Avatar/Avatar";
 export { default as Badge } from "./components/Badge/Badge";
-export { BaseButtonProps as NonPrimaryButtonProps, ButtonWithPendingStateProps as PrimaryButtonProps, ButtonDefinition } from "./components/ButtonV2/ButtonProps.type";
+export { BaseButtonProps as NonPrimaryButtonProps, ButtonWithPendingStateProps as PrimaryButtonProps, ButtonDefinition, } from "./components/ButtonV2/ButtonProps.type";
 export { PrimaryButton } from "./components/ButtonV2/PrimaryButton";
 export { SecondaryButton } from "./components/ButtonV2/SecondaryButton";
 export { TertiaryButton } from "./components/ButtonV2/TertiaryButton";
@@ -40,7 +40,7 @@ export { SettingsMenuButton, SettingsMenuButtonProps, } from "./components/Setti
 export { Spinner } from "./components/Spinner/Spinner";
 export { Steps } from "./components/Steps/Steps";
 export { default as Switcher } from "./components/Switcher/Switcher";
-export { default as Tabbar } from "./components/Tabbar/Tabbar";
+export { default as Tabbar, TabbarProps, TabItemDetails, } from "./components/Tabbar/Tabbar";
 export { default as TabLinks } from "./components/TabLinks/TabLinks";
 export { default as Tag } from "./components/Tag/Tag";
 export { default as TagGroup } from "./components/Tag/TagGroup";

package/dist/web-ui.cjs.development.js

@@ -17,6 +17,7 @@ require('react-datepicker/dist/react-datepicker.css');
 var ClipboardJS = _interopDefault(require('clipboard'));
 var ReactSelect = require('react-select');
 var ReactSelect__default = _interopDefault(ReactSelect);
+var dragula = _interopDefault(require('react-dragula'));
 var debounce = _interopDefault(require('lodash.debounce'));
 var ReactQuill = _interopDefault(require('react-quill'));
 require('react-quill/dist/quill.snow.css');
@@ -2312,7 +2313,7 @@ var CustomSelect = /*#__PURE__*/React__default.forwardRef(function (props, _ref)
   }));
 });
 
-var PAGE_SIZES = [50, 100, 150, 200];
+var PAGE_SIZES = [25, 50, 75, 100];
 var PAGE_SIZE_OPTIONS = /*#__PURE__*/PAGE_SIZES.map(function (pageSize) {
   return {
     label: pageSize.toString(),
@@ -2599,6 +2600,24 @@ var EmptyIcon = function EmptyIcon(props) {
   }));
 };
 
+var DragIcon = function DragIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    className: props.className,
+    onClick: props.onClick,
+    role: props.onClick ? "button" : undefined,
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 4C7.44772 4 7 4.44772 7 5V7C7 7.55228 7.44772 8 8 8H10C10.5523 8 11 7.55228 11 7V5C11 4.44772 10.5523 4 10 4H8ZM14 4C13.4477 4 13 4.44772 13 5V7C13 7.55228 13.4477 8 14 8H16C16.5523 8 17 7.55228 17 7V5C17 4.44772 16.5523 4 16 4H14ZM7 11C7 10.4477 7.44772 10 8 10H10C10.5523 10 11 10.4477 11 11V13C11 13.5523 10.5523 14 10 14H8C7.44772 14 7 13.5523 7 13V11ZM14 10C13.4477 10 13 10.4477 13 11V13C13 13.5523 13.4477 14 14 14H16C16.5523 14 17 13.5523 17 13V11C17 10.4477 16.5523 10 16 10H14ZM7 17C7 16.4477 7.44772 16 8 16H10C10.5523 16 11 16.4477 11 17V19C11 19.5523 10.5523 20 10 20H8C7.44772 20 7 19.5523 7 19V17ZM14 16C13.4477 16 13 16.4477 13 17V19C13 19.5523 13.4477 20 14 20H16C16.5523 20 17 19.5523 17 19V17C17 16.4477 16.5523 16 16 16H14Z",
+    fill: "currentColor"
+  }));
+};
+
 var _excluded$9 = ["icon", "subtitle", "title", "accessories", "tooltipId", "onAssetLoadError", "roundTop"];
 var ListItem = function ListItem(_ref) {
   var icon = _ref.icon,
@@ -2641,9 +2660,12 @@ var ListItem = function ListItem(_ref) {
       "hover:bg-blue-50 transition-colors ease-in-out duration-300": restProps.handleItemClick
     }),
     onClick: restProps.handleItemClick,
+    "data-id": restProps.itemId,
     "data-tip": restProps.itemId,
     "data-for": tooltipId
-  }, icon && typeof icon === "function" && /*#__PURE__*/React__default.createElement(icon, {
+  }, restProps.isDraggable && /*#__PURE__*/React__default.createElement(DragIcon, {
+    className: "text-slate-300"
+  }), icon && typeof icon === "function" && /*#__PURE__*/React__default.createElement(icon, {
     className: "w-6 h-6"
   }), !loadIconError && icon && typeof icon === "string" && /*#__PURE__*/React__default.createElement("img", {
     src: icon,
@@ -2668,8 +2690,60 @@ var List = function List(_ref) {
       headerButton = _ref.headerButton,
       headerTransparent = _ref.headerTransparent,
       items = _ref.items,
-      onAssetLoadError = _ref.onAssetLoadError;
+      onAssetLoadError = _ref.onAssetLoadError,
+      onDragEnd = _ref.onDragEnd;
+  var listRef = React.useRef(null);
+  var dragulaRef = React.useRef(null);
   var hasHeader = !!(title || headerButton);
+  React.useEffect(function () {
+    var _dragulaRef$current;
+
+    (_dragulaRef$current = dragulaRef.current) == null ? void 0 : _dragulaRef$current.destroy == null ? void 0 : _dragulaRef$current.destroy();
+
+    if (onDragEnd && items.length) {
+      dragulaRef.current = setupDragging();
+    }
+
+    return function () {
+      var _dragulaRef$current2;
+
+      (_dragulaRef$current2 = dragulaRef.current) == null ? void 0 : _dragulaRef$current2.destroy == null ? void 0 : _dragulaRef$current2.destroy();
+    };
+  }, [items]);
+
+  var handleDragEnd = function handleDragEnd(element) {
+    var draggedItemId = element.dataset["id"];
+
+    if (listRef.current && draggedItemId) {
+      var itemIdsWithOldOrder = items.map(function (item) {
+        return item.itemId.toString();
+      });
+      var itemIdsWithNewOrder = Array.from(listRef.current.children).map(function (child) {
+        return child.dataset["id"];
+      }).filter(function (itemId) {
+        return !!itemId;
+      });
+      var oldIndexOfDraggedItemId = itemIdsWithOldOrder.indexOf(draggedItemId);
+      var newIndexOfDraggedItemId = itemIdsWithNewOrder.indexOf(draggedItemId);
+
+      if (oldIndexOfDraggedItemId !== newIndexOfDraggedItemId) {
+        onDragEnd == null ? void 0 : onDragEnd(draggedItemId, newIndexOfDraggedItemId);
+      }
+    }
+  };
+
+  var setupDragging = function setupDragging() {
+    if (onDragEnd) {
+      var dragulaInstance = dragula([listRef.current], {
+        revertOnSpill: true
+      });
+      dragulaInstance.on("dragend", handleDragEnd);
+      return dragulaInstance;
+    }
+
+    return null;
+  };
+
   return /*#__PURE__*/React__default.createElement("div", {
     "data-test-id": "list-component"
   }, (title || headerButton) && /*#__PURE__*/React__default.createElement("div", {
@@ -2687,12 +2761,14 @@ var List = function List(_ref) {
   }), !!headerButton && /*#__PURE__*/React__default.createElement("div", {
     className: "space-x-3"
   }, /*#__PURE__*/React__default.createElement(headerButton.buttonType, headerButton.buttonProps))), /*#__PURE__*/React__default.createElement("ul", {
-    className: classNames("list-none")
+    className: classNames("list-none"),
+    ref: listRef
   }, items.map(function (item) {
     return /*#__PURE__*/React__default.createElement(ListItem, Object.assign({}, item, {
       roundTop: !hasHeader || hasHeader && headerTransparent,
       key: item.itemId,
-      onAssetLoadError: onAssetLoadError
+      onAssetLoadError: onAssetLoadError,
+      isDraggable: !!onDragEnd
     }));
   })));
 };
@@ -3944,35 +4020,32 @@ var TabbarItem = function TabbarItem(_ref) {
 };
 
 var Tabbar = function Tabbar(_ref) {
-  var tabs = _ref.tabs,
+  var _ref$tabs = _ref.tabs,
+      tabs = _ref$tabs === void 0 ? [] : _ref$tabs,
       selectedIndex = _ref.selectedIndex,
       onSelect = _ref.onSelect,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className;
 
-  var _useState = React.useState(tabs),
-      innerTabs = _useState[0],
-      setInnerTabs = _useState[1];
-
-  var _useState2 = React.useState(selectedIndex),
-      innerSelectedIndex = _useState2[0],
-      setInnerSelectedIndex = _useState2[1];
+  var _useState = React.useState(selectedIndex),
+      innerSelectedIndex = _useState[0],
+      setInnerSelectedIndex = _useState[1];
 
   React.useEffect(function () {
-    setInnerTabs(tabs);
-  }, [tabs]);
-  React.useEffect(function () {
-    setInnerSelectedIndex(innerSelectedIndex);
-  }, [innerSelectedIndex]);
+    setInnerSelectedIndex(selectedIndex);
+  }, [selectedIndex]);
 
   function handleOnTabSelect(index) {
     setInnerSelectedIndex(index);
-    onSelect == null ? void 0 : onSelect(index);
+    onSelect == null ? void 0 : onSelect({
+      index: index,
+      selectedTab: tabs[index]
+    });
   }
 
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-row w-full bg-white rounded-xl " + className
-  }, innerTabs == null ? void 0 : innerTabs.map(function (tabItemProps, index) {
+    className: "flex flex-row w-full bg-white rounded-xl p-2 " + className
+  }, tabs == null ? void 0 : tabs.map(function (tabItemProps, index) {
     var _tabItemProps$dataTes;
 
     var itemProps = _extends({
@@ -4478,24 +4551,6 @@ var DownArrowIcon = function DownArrowIcon(props) {
   }));
 };
 
-var DragIcon = function DragIcon(props) {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    className: props.className,
-    onClick: props.onClick,
-    role: props.onClick ? "button" : undefined,
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M8 4C7.44772 4 7 4.44772 7 5V7C7 7.55228 7.44772 8 8 8H10C10.5523 8 11 7.55228 11 7V5C11 4.44772 10.5523 4 10 4H8ZM14 4C13.4477 4 13 4.44772 13 5V7C13 7.55228 13.4477 8 14 8H16C16.5523 8 17 7.55228 17 7V5C17 4.44772 16.5523 4 16 4H14ZM7 11C7 10.4477 7.44772 10 8 10H10C10.5523 10 11 10.4477 11 11V13C11 13.5523 10.5523 14 10 14H8C7.44772 14 7 13.5523 7 13V11ZM14 10C13.4477 10 13 10.4477 13 11V13C13 13.5523 13.4477 14 14 14H16C16.5523 14 17 13.5523 17 13V11C17 10.4477 16.5523 10 16 10H14ZM7 17C7 16.4477 7.44772 16 8 16H10C10.5523 16 11 16.4477 11 17V19C11 19.5523 10.5523 20 10 20H8C7.44772 20 7 19.5523 7 19V17ZM14 16C13.4477 16 13 16.4477 13 17V19C13 19.5523 13.4477 20 14 20H16C16.5523 20 17 19.5523 17 19V17C17 16.4477 16.5523 16 16 16H14Z",
-    fill: "currentColor"
-  }));
-};
-
 var EmptyStateDashboardIcon = function EmptyStateDashboardIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "450",