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

package/README.md

@@ -49,11 +49,10 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ### 3.6.0
 
-Enhanced accessibility, improved component documentation, and new mobile features. Plus several component fixes and server-side rendering support exploration.
+Enhanced accessibility, improved component documentation, several component fixes and new mobile features.
 
 Change log:
 
-- Add server-side rendering support exploration for Zenith
 - Create mobile version of new `Filters` component
 - Add defensive checks for Invalid Date objects in `DateRange` component
 - Integrate `Banner` into `Layout`

package/dist/commonHelpers/hooks/useClientReady.js

@@ -4,7 +4,7 @@ exports.useClientReady = void 0;
 const react_1 = require("react");
 const isDomEnv_1 = require("../isDomEnv");
 const useClientReady = () => {
-    const [isClientReady, setIsClientReady] = (0, react_1.useState)(false);
+    const [isClientReady, setIsClientReady] = (0, react_1.useState)(true);
     (0, react_1.useEffect)(() => {
         if ((0, isDomEnv_1.isDomEnv)()) {
             setIsClientReady(true);

package/dist/dateRangeRaw/dateRangeRaw.js

@@ -284,7 +284,7 @@ const DateRangeRaw = props => {
   const isCustomDateOption = (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID;
   const [isOpen, setIsOpen] = (0, react_1.useState)(false);
   const prevIsOpenRef = (0, react_1.useRef)(false);
-  const datesValidation = (0, react_1.useCallback)(val => (0, getRangeOption_1.isValidDateFn)(allowUnsetValue)(val), [allowUnsetValue]);
+  const datesValidation = (0, react_1.useMemo)(() => (0, getRangeOption_1.isValidDateFn)(allowUnsetValue), [allowUnsetValue]);
   const isDatesValid = (0, react_1.useRef)(datesValidation(value));
   const [customDate, setCustomDate] = (0, react_1.useState)((0, normalizeDates_1.normalizeDates)((0, getRangeOption_1.isDateValid)(value === null || value === void 0 ? void 0 : value.from) ? value.from.toISOString() : undefined, (0, getRangeOption_1.isDateValid)(value === null || value === void 0 ? void 0 : value.to) ? value.to.toISOString() : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
   const isDefaultState = !defaultValue && !selectedRange || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label !== dateRangeInner_1.CUSTOM_CALENDAR_ID || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label === dateRangeInner_1.CUSTOM_CALENDAR_ID && customDate.from && customDate.to && new Date(customDate.from).toISOString() === defaultValue.from.toISOString() && new Date(customDate.to).toISOString() === defaultValue.to.toISOString();

package/dist/filtersBar/components/filtersBarPeriodPicker/filtersBarPeriodPicker.js

@@ -21,7 +21,7 @@ const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSidePanel
     const [selectedRange, setSelectedRange] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, state));
     const filterBarLabelledId = (0, react_1.useId)();
     const [prevSelection, setPrevSelection] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, state));
-    const datesValidation = (0, react_1.useCallback)(val => (0, getRangeOption_1.isValidDateFn)(props.allowUnsetValue || false)(val), [props.allowUnsetValue]);
+    const datesValidation = (0, react_1.useMemo)(() => (0, getRangeOption_1.isValidDateFn)(props.allowUnsetValue || false), [props.allowUnsetValue]);
     const isDatesValid = (0, react_1.useRef)(datesValidation(state));
     const getCustomRange = (0, react_1.useCallback)(() => ({ from: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from) || new Date(), to: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to) || new Date() }), [prevSelection]);
     const options = (0, react_1.useMemo)(() => (0, getRangeOption_1.getRangeOptionsArray)(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime, withCalendar || false, prevSelection && prevSelection.label === dateRangeInner_1.CUSTOM_CALENDAR_ID, prevSelection ? getCustomRange : undefined), [optionsArg, translate, toLocalDateTime, weekStartsOnSunday, toReverseOffsetDateTime, withCalendar, prevSelection, getCustomRange]);

package/dist/groupsFilterRaw/groupsFilterRaw.js

@@ -303,13 +303,8 @@ 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({
@@ -559,6 +554,7 @@ const GroupsFilterRaw = props => {
     return [];
   }), [dataLoader, errorHandler]);
   const loadData = (0, react_1.useCallback)(() => {
+    isDataLoadedRef.current = true;
     dispatchUiState({
       type: uiStateActionType_1.UiStateActionType.SetLoadWithError,
       payload: {
@@ -587,12 +583,32 @@ 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) {
@@ -833,12 +849,6 @@ 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) {
-      loadData();
-    }
-  }, [uiState.isOpen, isEmptyMap, uiState.isLoading, uiState.hasError, loadData]);
   const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, {
     label: translate("Organization groups filter"),
     triggerRef: triggerRef,

package/dist/index.css

@@ -7758,7 +7758,7 @@
   text-transform: none;
 }
 .zen-text-input.zen-text-input--mobile {
-  padding: 13px 12px;
+  padding: 11px 12px 12px;
   font-family: var(--main-font);
   font-size: 14px;
   font-style: normal;

package/esm/commonHelpers/hooks/useClientReady.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { isDomEnv } from "../isDomEnv";
 export const useClientReady = () => {
-    const [isClientReady, setIsClientReady] = useState(false);
+    const [isClientReady, setIsClientReady] = useState(true);
     useEffect(() => {
         if (isDomEnv()) {
             setIsClientReady(true);

package/esm/dateRangeRaw/dateRangeRaw.js

@@ -276,7 +276,7 @@ export const DateRangeRaw = props => {
   const isCustomDateOption = (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === CUSTOM_CALENDAR_ID;
   const [isOpen, setIsOpen] = useState(false);
   const prevIsOpenRef = useRef(false);
-  const datesValidation = useCallback(val => isValidDateFn(allowUnsetValue)(val), [allowUnsetValue]);
+  const datesValidation = useMemo(() => isValidDateFn(allowUnsetValue), [allowUnsetValue]);
   const isDatesValid = useRef(datesValidation(value));
   const [customDate, setCustomDate] = useState(normalizeDates(isDateValid(value === null || value === void 0 ? void 0 : value.from) ? value.from.toISOString() : undefined, isDateValid(value === null || value === void 0 ? void 0 : value.to) ? value.to.toISOString() : undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
   const isDefaultState = !defaultValue && !selectedRange || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label !== CUSTOM_CALENDAR_ID || defaultValue && selectedRange && defaultValue.label === selectedRange.label && defaultValue.label === CUSTOM_CALENDAR_ID && customDate.from && customDate.to && new Date(customDate.from).toISOString() === defaultValue.from.toISOString() && new Date(customDate.to).toISOString() === defaultValue.to.toISOString();

package/esm/filtersBar/components/filtersBarPeriodPicker/filtersBarPeriodPicker.js

@@ -18,7 +18,7 @@ export const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSi
     const [selectedRange, setSelectedRange] = useState(getSelectedRangeFromValue(optionsMap, state));
     const filterBarLabelledId = useId();
     const [prevSelection, setPrevSelection] = useState(getSelectedRangeFromValue(optionsMap, state));
-    const datesValidation = useCallback(val => isValidDateFn(props.allowUnsetValue || false)(val), [props.allowUnsetValue]);
+    const datesValidation = useMemo(() => isValidDateFn(props.allowUnsetValue || false), [props.allowUnsetValue]);
     const isDatesValid = useRef(datesValidation(state));
     const getCustomRange = useCallback(() => ({ from: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from) || new Date(), to: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to) || new Date() }), [prevSelection]);
     const options = useMemo(() => getRangeOptionsArray(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime, withCalendar || false, prevSelection && prevSelection.label === CUSTOM_CALENDAR_ID, prevSelection ? getCustomRange : undefined), [optionsArg, translate, toLocalDateTime, weekStartsOnSunday, toReverseOffsetDateTime, withCalendar, prevSelection, getCustomRange]);

package/esm/groupsFilterRaw/groupsFilterRaw.js

@@ -295,13 +295,8 @@ 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({
@@ -551,6 +546,7 @@ export const GroupsFilterRaw = props => {
     return [];
   }), [dataLoader, errorHandler]);
   const loadData = useCallback(() => {
+    isDataLoadedRef.current = true;
     dispatchUiState({
       type: UiStateActionType.SetLoadWithError,
       payload: {
@@ -579,12 +575,32 @@ 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) {
@@ -825,12 +841,6 @@ 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) {
-      loadData();
-    }
-  }, [uiState.isOpen, isEmptyMap, uiState.isLoading, uiState.hasError, loadData]);
   const memoizedMobileView = useMemo(() => _jsxs(MobileSheet, {
     label: translate("Organization groups filter"),
     triggerRef: triggerRef,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.6.0-beta.4",
+    "version": "3.6.0-beta.6",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",
@@ -98,12 +98,6 @@
         "react": "^19.2.0",
         "react-dom": "^19.2.0"
     },
-    "overrides": {
-        "ajv": "^8.18.0",
-        "minimatch": "^10.2.2",
-        "glob": "^13.0.6",
-        "rimraf": "^6.1.3"
-    },
     "files": [
         "./dist/",
         "./esm"