@geotab/zenith 3.2.1 → 3.3.0-beta.0

package/dist/dataGrid/withFlexibleColumns/components/columnSettingsSidePanel.js

@@ -9,6 +9,7 @@ const react_1 = require("react");
 const mobileSheet_1 = require("../../../mobileSheet/mobileSheet");
 const button_1 = require("../../../button/button");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
+const footerButtons_1 = require("../../../footerButtons/footerButtons");
 const ColumnSettingsSidePanelComp = ({
   triggerRef,
   isOpen,
@@ -43,10 +44,13 @@ const ColumnSettingsSidePanelComp = ({
     }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, {
       children: children
     }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, {
-      children: (0, jsx_runtime_1.jsx)(button_1.Button, {
-        onClick: onReset,
-        type: "tertiary",
-        children: "Reset"
+      borderless: true,
+      children: (0, jsx_runtime_1.jsx)(footerButtons_1.FooterButtons, {
+        children: (0, jsx_runtime_1.jsx)(button_1.Button, {
+          onClick: onReset,
+          type: "tertiary",
+          children: "Reset"
+        })
       })
     })]
   });

package/dist/divider/divider.d.ts

@@ -1,7 +1,7 @@
-import { FC, PropsWithChildren } from "react";
-import { IZenGridItem } from "../commonHelpers/zenComponent";
+import React from "react";
 import "./divider.less";
-interface IDividerProps extends IZenGridItem, PropsWithChildren {
+export interface IDivider {
+    className?: string;
+    spacing?: number;
 }
-export declare const Divider: FC<IDividerProps>;
-export {};
+export declare const Divider: React.FC<IDivider>;

package/dist/divider/divider.js

@@ -2,6 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Divider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// TODO: rename to form divider?
-const Divider = ({ className }) => (0, jsx_runtime_1.jsx)("div", { className: `zen-divider ${className || ""}` });
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const Divider = ({ className, spacing }) => {
+    const classes = (0, classNames_1.classNames)(["zen-divider", className !== null && className !== void 0 ? className : ""]);
+    const style = spacing ? { marginTop: spacing, marginBottom: spacing } : undefined;
+    return (0, jsx_runtime_1.jsx)("hr", { className: classes, style: style, role: "separator" });
+};
 exports.Divider = Divider;

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

@@ -9,9 +9,9 @@ const dateRangeInner_1 = require("../../../dateRangeInner/dateRangeInner");
 const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
 const getRangeOption_1 = require("./getRangeOption");
-const dateRange_1 = require("../../../dateRange/dateRange");
 const userFormatContext_1 = require("../../../utils/userFormat/userFormatContext");
 const normalizeDates_1 = require("./normalizeDates");
+const dateRangeRaw_1 = require("../../../dateRangeRaw/dateRangeRaw");
 const DateRangeInnerMemo = (0, react_1.memo)(dateRangeInner_1.DateRangeInner);
 const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSidePanelView, sidePanelTitle, state, defaultState, onChange, checkError, sidePanelMaxGroupedItemsLength = 5 }) => {
     const { options: optionsArg, withCalendar, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, lockStartDate, lockEndDate, classNamePopup } = props;
@@ -88,7 +88,7 @@ const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSidePanel
     const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(DateRangeInnerMemo, { id: `${id}-daterange`, options: options, onOptionSelect: handleDateRangeSelection, onCalendarSelect: hasCustomOption ? handleCustomDate : undefined, selection: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range: range, timeSelect: timeSelect, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter }) }), [id, options, handleDateRangeSelection, hasCustomOption, handleCustomDate, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter]);
     const popup = (0, react_1.useMemo)(() => {
         const commonProps = Object.assign(Object.assign({}, props), { hasApplyButton: useSidePanelView ? false : props.hasApplyButton || hasApplyButton, id: id, className: (0, classNames_1.classNames)(["zen-filters-bar-period-picker", useSidePanelView ? "zen-filters-bar-period-picker--full-width" : "", className !== null && className !== void 0 ? className : ""]), classNamePopup: (0, classNames_1.classNames)(["zen-filters-bar-period-picker__popup", useSidePanelView ? "zen-filters-bar-period-picker__popup--full-width" : "", classNamePopup || ""]), classNameWrapper: (0, classNames_1.classNames)([useSidePanelView ? "zen-filters-bar-period-picker-wrapper" : ""]), options: optionsArg });
-        return props.allowUnsetValue ? (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: true })) : (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: false }));
+        return props.allowUnsetValue ? (0, jsx_runtime_1.jsx)(dateRangeRaw_1.DateRangeRaw, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: true })) : (0, jsx_runtime_1.jsx)(dateRangeRaw_1.DateRangeRaw, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: false }));
     }, [props, useSidePanelView, id, className, classNamePopup, optionsArg, state, onChange, defaultState, hasApplyButton]);
     if (!options.length && !hasCustomOption) {
         return "";

package/dist/footerButtons/footerButtons.d.ts

@@ -5,6 +5,10 @@ import { IButton } from "../button/button";
 import "./footerButtons.less";
 export interface IFooterButtons extends IZenComponentProps {
     children: ReactElement<IButton> | (ReactElement<IButton> | null | undefined)[];
+    /**
+    * @deprecated
+    * @param stacked - will be removed in the next major release
+    */
     stacked?: boolean;
     isSticky?: boolean;
 }

package/dist/footerButtons/footerButtons.js

@@ -35,30 +35,28 @@ const getChildren = (children) => {
     }
     return (react_1.default.Children.count(children) === 1 ? [children] : react_1.default.Children.toArray(children).filter((child) => react_1.default.isValidElement(child)));
 };
-const FooterButtons = ({ className, children, stacked = true, isSticky = false }) => {
+const FooterButtons = ({ className, children, isSticky = false }) => {
     const footerButtonsId = (0, useUniqueId_1.useUniqueId)();
     const driveComponentClassName = (0, useDriveClassName_1.useDriveClassName)("zen-footer-buttons");
+    const maxLength = 3;
     const childrenArray = (0, react_1.useMemo)(() => {
         const childrenArr = getChildren(children);
         if (!childrenArr) {
             return [];
         }
         const clonedElements = [];
-        const maxLength = stacked ? 3 : 2;
         childrenArr.forEach((child, ind) => {
             const clone = (0, react_1.cloneElement)(child, {
                 key: child.props.id || `footerButtonsItem_${footerButtonsId}_${ind}`,
-                className: `${child.props.className || ""} zen-footer-buttons__item ${ind === 0 && childrenArr.length > 2 && stacked ? "zen-footer-buttons__item--separate" : ""}`
+                className: `${child.props.className || ""} zen-footer-buttons__item`
             });
             ind < maxLength && clonedElements.push(clone);
         });
         return clonedElements;
-    }, [children, footerButtonsId, stacked]);
+    }, [children, footerButtonsId]);
     const containerClassNames = (0, classNames_1.classNames)([
         "zen-footer-buttons",
-        stacked ? "zen-footer-buttons--stacked" : "",
         isSticky && driveComponentClassName ? "zen-footer-buttons--sticky" : "",
-        childrenArray.length > 1 && stacked ? "zen-footer-buttons--indented" : "",
         driveComponentClassName || "",
         className || ""
     ]);

package/dist/groupsFilterRaw/groupsFilterRaw.js

@@ -808,6 +808,7 @@ const GroupsFilterRaw = props => {
     onCloseClick: onOptionsToggle,
     preventFirstFocus: true,
     onReadyForFocus: handleReadyForFocus,
+    className: "zen-groups-filter-menu__mobile-sheet",
     children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, {
       children: translate("Filter by group")
     }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, {