@geotab/zenith 3.6.0-beta.6 → 3.6.0-beta.7

package/README.md

@@ -59,7 +59,6 @@ Change log:
 - Update `Layout` component background
 - Improve y-axis positioning for `Charts`
 - Center content alignment in `TextIconButton` component
-- Enhanced `Nav` component: optional drag-and-drop, mobile menu state handling, action support
 - Add divider support for groupsFilter and pillExpandable
 - Add link support for mobile primary actions
 - Fix `Alert` component issues
@@ -68,6 +67,10 @@ Change log:
 - Accessibility improvements: table actions, aria-sort, checkbox focus and general accessibility fixes across components
 - Documentation updates: enhanced component examples and usage guidelines for `Dropdown`, `Chart`, `Select`
 
+### 3.5.1
+
+Edit mode in the `Nav` component has been added.
+
 ### 3.5.0
 
 Accessibility improvements, new DateInput control in FiltersBar, custom chart legend formatting, and new languages support. Plus several performance and stability fixes.

package/dist/groupsFilterRaw/groupsFilterRaw.js

@@ -303,8 +303,13 @@ const GroupsFilterRaw = props => {
   const prevSearchField = (0, react_1.useRef)("");
   const groupsFilterId = (0, react_1.useId)();
   const popupId = (0, react_1.useId)();
-  const isDataLoadedRef = (0, react_1.useRef)(false);
   const blocksMap = (0, react_1.useMemo)(() => [["builtInGroups", "userGroups"], ["advancedGroups", "builtInGroups", "userGroups"], ["builtInGroups", "userGroups"]], []);
+  const onOptionsToggle = (0, react_1.useCallback)(() => {
+    dispatchUiState({
+      type: uiStateActionType_1.UiStateActionType.ToggleOpen,
+      payload: undefined
+    });
+  }, []);
   const handleSetStep = (0, react_1.useCallback)(newStep => {
     var _a;
     uiState.step !== groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && dispatchUiState({
@@ -553,8 +558,7 @@ const GroupsFilterRaw = props => {
     errorHandler(e);
     return [];
   }), [dataLoader, errorHandler]);
-  const loadData = (0, react_1.useCallback)(() => {
-    isDataLoadedRef.current = true;
+  (0, react_1.useEffect)(() => {
     dispatchUiState({
       type: uiStateActionType_1.UiStateActionType.SetLoadWithError,
       payload: {
@@ -583,32 +587,9 @@ const GroupsFilterRaw = props => {
           isLoading: false
         }
       });
-      isDataLoadedRef.current = false;
       errorHandler(e);
     });
   }, [dataLoader, errorHandler]);
-  (0, react_1.useEffect)(() => {
-    if (isDataLoadedRef.current) {
-      return;
-    }
-    loadData();
-  }, [loadData]);
-  const onOptionsToggle = (0, react_1.useCallback)(() => {
-    const willBeOpen = !uiState.isOpen;
-    dispatchUiState({
-      type: uiStateActionType_1.UiStateActionType.ToggleOpen,
-      payload: undefined
-    });
-    if (willBeOpen && !isDataLoadedRef.current && !uiState.isLoading) {
-      loadData();
-    }
-  }, [uiState.isOpen, uiState.isLoading, loadData]);
-  const isEmptyMap = dataItems.length === 0;
-  (0, react_1.useEffect)(() => {
-    if (isEmptyMap && uiState.isOpen && !uiState.isLoading && !uiState.hasError) {
-      loadData();
-    }
-  }, [uiState.isOpen, isEmptyMap, uiState.isLoading, uiState.hasError, loadData]);
   (0, react_1.useEffect)(() => {
     const step = uiState.step;
     if (step !== groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected) {
@@ -849,6 +830,41 @@ const GroupsFilterRaw = props => {
       children: translate("Clear")
     })]
   }), [handleApply, handleCancel, handleReset, isApplyDisabled, translate]);
+  const isEmptyMap = dataItems.length === 0;
+  (0, react_1.useEffect)(() => {
+    if (isEmptyMap && uiState.isOpen && !uiState.isLoading && !uiState.hasError) {
+      dispatchUiState({
+        type: uiStateActionType_1.UiStateActionType.SetLoadWithError,
+        payload: {
+          hasError: false,
+          isLoading: true
+        }
+      });
+      dataLoader().then(groups => {
+        dispatchState({
+          type: stateActionType_1.StateActionType.CreateGroupsMap,
+          payload: groups
+        });
+        dispatchUiState({
+          type: uiStateActionType_1.UiStateActionType.SetLoadWithError,
+          payload: {
+            hasError: false,
+            isLoading: false
+          }
+        });
+        setDataItems(groups);
+      }).catch(e => {
+        dispatchUiState({
+          type: uiStateActionType_1.UiStateActionType.SetLoadWithError,
+          payload: {
+            hasError: true,
+            isLoading: false
+          }
+        });
+        errorHandler(e);
+      });
+    }
+  }, [uiState.isOpen, isEmptyMap, uiState.isLoading, uiState.hasError, dataLoader, errorHandler]);
   const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, {
     label: translate("Organization groups filter"),
     triggerRef: triggerRef,

package/dist/modal/modal.js

@@ -84,9 +84,9 @@ const dialogHelpers_1 = require("../dialog/dialogHelpers");
 const themeContext_1 = require("../utils/theme/themeContext");
 const modalHelpers_1 = require("./modalHelpers");
 const textIconButton_1 = require("../textIconButton/textIconButton");
-const usePortal_1 = require("../commonHelpers/hooks/usePortal");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
+const react_dom_1 = require("react-dom");
 const Modal = ({
   isOpen,
   children,
@@ -101,8 +101,6 @@ const Modal = ({
 }) => {
   var _a, _b, _c;
   const lastActiveOutsideElement = (0, react_1.useRef)((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
-  // eslint-disable-next-line
-  const modalRoot = ((_b = zen_1.zen === null || zen_1.zen === void 0 ? void 0 : zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen_1.zen === null || zen_1.zen === void 0 ? void 0 : zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
   const [top, setTop] = (0, react_1.useState)(`${zen_1.zen.pageYOffset || 0}px`);
   const {
     dark
@@ -190,11 +188,11 @@ const Modal = ({
       onClick: onOutSideClick
     })]
   }), [darkClass, modalContainerClassName, labeledId, top, onClose, maxWidth, title, className, type, focus, modalContent, onOutSideClick]);
-  const modalPortal = (0, usePortal_1.usePortal)(dialogHTML(labeledId), isOpen ? modalRoot : undefined);
   if (!isOpen || !isClientReady) {
     return null;
   }
-  return modalPortal;
+  const modalRoot = ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
+  return (0, react_dom_1.createPortal)(dialogHTML(labeledId), modalRoot);
 };
 exports.Modal = Modal;
 const dummyOnClose = () => {};
@@ -217,10 +215,10 @@ const DialogContentNew = ({
   const lastActiveOutsideElement = (0, react_1.useRef)((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
   const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
   const iconsByType = (0, react_1.useMemo)(() => ({
-    "error": iconException_1.IconException,
-    "success": iconCheckRadio_1.IconCheckRadio,
-    "warning": iconWarning_1.IconWarning,
-    "info": iconInfoCircle_1.IconInfoCircle
+    error: iconException_1.IconException,
+    success: iconCheckRadio_1.IconCheckRadio,
+    warning: iconWarning_1.IconWarning,
+    info: iconInfoCircle_1.IconInfoCircle
   }), []);
   const subscriptionCondition = (0, react_1.useCallback)(trigger => trigger.current !== null, []);
   (0, useTrapFocus_1.useTrapFocus)(contentRef, undefined, contentRef, subscriptionCondition);

package/esm/groupsFilterRaw/groupsFilterRaw.js

@@ -295,8 +295,13 @@ export const GroupsFilterRaw = props => {
   const prevSearchField = useRef("");
   const groupsFilterId = useId();
   const popupId = useId();
-  const isDataLoadedRef = useRef(false);
   const blocksMap = useMemo(() => [["builtInGroups", "userGroups"], ["advancedGroups", "builtInGroups", "userGroups"], ["builtInGroups", "userGroups"]], []);
+  const onOptionsToggle = useCallback(() => {
+    dispatchUiState({
+      type: UiStateActionType.ToggleOpen,
+      payload: undefined
+    });
+  }, []);
   const handleSetStep = useCallback(newStep => {
     var _a;
     uiState.step !== FilterMenuStep.CurrentlySelected && dispatchUiState({
@@ -545,8 +550,7 @@ export const GroupsFilterRaw = props => {
     errorHandler(e);
     return [];
   }), [dataLoader, errorHandler]);
-  const loadData = useCallback(() => {
-    isDataLoadedRef.current = true;
+  useEffect(() => {
     dispatchUiState({
       type: UiStateActionType.SetLoadWithError,
       payload: {
@@ -575,32 +579,9 @@ export const GroupsFilterRaw = props => {
           isLoading: false
         }
       });
-      isDataLoadedRef.current = false;
       errorHandler(e);
     });
   }, [dataLoader, errorHandler]);
-  useEffect(() => {
-    if (isDataLoadedRef.current) {
-      return;
-    }
-    loadData();
-  }, [loadData]);
-  const onOptionsToggle = useCallback(() => {
-    const willBeOpen = !uiState.isOpen;
-    dispatchUiState({
-      type: UiStateActionType.ToggleOpen,
-      payload: undefined
-    });
-    if (willBeOpen && !isDataLoadedRef.current && !uiState.isLoading) {
-      loadData();
-    }
-  }, [uiState.isOpen, uiState.isLoading, loadData]);
-  const isEmptyMap = dataItems.length === 0;
-  useEffect(() => {
-    if (isEmptyMap && uiState.isOpen && !uiState.isLoading && !uiState.hasError) {
-      loadData();
-    }
-  }, [uiState.isOpen, isEmptyMap, uiState.isLoading, uiState.hasError, loadData]);
   useEffect(() => {
     const step = uiState.step;
     if (step !== FilterMenuStep.CurrentlySelected) {
@@ -841,6 +822,41 @@ export const GroupsFilterRaw = props => {
       children: translate("Clear")
     })]
   }), [handleApply, handleCancel, handleReset, isApplyDisabled, translate]);
+  const isEmptyMap = dataItems.length === 0;
+  useEffect(() => {
+    if (isEmptyMap && uiState.isOpen && !uiState.isLoading && !uiState.hasError) {
+      dispatchUiState({
+        type: UiStateActionType.SetLoadWithError,
+        payload: {
+          hasError: false,
+          isLoading: true
+        }
+      });
+      dataLoader().then(groups => {
+        dispatchState({
+          type: StateActionType.CreateGroupsMap,
+          payload: groups
+        });
+        dispatchUiState({
+          type: UiStateActionType.SetLoadWithError,
+          payload: {
+            hasError: false,
+            isLoading: false
+          }
+        });
+        setDataItems(groups);
+      }).catch(e => {
+        dispatchUiState({
+          type: UiStateActionType.SetLoadWithError,
+          payload: {
+            hasError: true,
+            isLoading: false
+          }
+        });
+        errorHandler(e);
+      });
+    }
+  }, [uiState.isOpen, isEmptyMap, uiState.isLoading, uiState.hasError, dataLoader, errorHandler]);
   const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, {
     label: translate("Organization groups filter"),
     triggerRef: triggerRef,

package/esm/modal/modal.js

@@ -19,9 +19,9 @@ import { isFocusable } from "../dialog/dialogHelpers";
 import { themeContext } from "../utils/theme/themeContext";
 import { getPredefinedFocusableItem } from "./modalHelpers";
 import { TextIconButton } from "../textIconButton/textIconButton";
-import { usePortal } from "../commonHelpers/hooks/usePortal";
 import { useClientReady } from "../commonHelpers/hooks/useClientReady";
 import { zen } from "../utils/zen";
+import { createPortal } from "react-dom";
 injectString("cs", "Close", "Zav\u0159\xEDt");
 injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
@@ -62,8 +62,6 @@ export const Modal = ({
 }) => {
   var _a, _b, _c;
   const lastActiveOutsideElement = useRef((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
-  // eslint-disable-next-line
-  const modalRoot = ((_b = zen === null || zen === void 0 ? void 0 : zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen === null || zen === void 0 ? void 0 : zen.document) === null || _c === void 0 ? void 0 : _c.body);
   const [top, setTop] = useState(`${zen.pageYOffset || 0}px`);
   const {
     dark
@@ -151,11 +149,11 @@ export const Modal = ({
       onClick: onOutSideClick
     })]
   }), [darkClass, modalContainerClassName, labeledId, top, onClose, maxWidth, title, className, type, focus, modalContent, onOutSideClick]);
-  const modalPortal = usePortal(dialogHTML(labeledId), isOpen ? modalRoot : undefined);
   if (!isOpen || !isClientReady) {
     return null;
   }
-  return modalPortal;
+  const modalRoot = ((_b = zen.document) === null || _b === void 0 ? void 0 : _b.fullscreenElement) || ((_c = zen.document) === null || _c === void 0 ? void 0 : _c.body);
+  return createPortal(dialogHTML(labeledId), modalRoot);
 };
 const dummyOnClose = () => {};
 export const DialogContentNew = ({
@@ -177,10 +175,10 @@ export const DialogContentNew = ({
   const lastActiveOutsideElement = useRef((_a = zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
   const iconDriveClassName = useDriveClassName("icon");
   const iconsByType = useMemo(() => ({
-    "error": IconException,
-    "success": IconCheckRadio,
-    "warning": IconWarning,
-    "info": IconInfoCircle
+    error: IconException,
+    success: IconCheckRadio,
+    warning: IconWarning,
+    info: IconInfoCircle
   }), []);
   const subscriptionCondition = useCallback(trigger => trigger.current !== null, []);
   useTrapFocus(contentRef, undefined, contentRef, subscriptionCondition);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.6.0-beta.6",
+    "version": "3.6.0-beta.7",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",