@geotab/zenith 1.22.2-beta.0 → 1.22.2

package/README.md

@@ -40,6 +40,13 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 1.22.2
+
+ * Add component `List`
+ * Reset 'site-wide` in `GroupsFilter` on reset
+ * `DateInput` associates id with html element
+ * Fix the `Dropdown` width constraint
+
 ### 1.22.1
 
  * Add Korean translation

package/dist/card/card.d.ts

@@ -1,7 +1,6 @@
-import { FC, FunctionComponent, ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import { IAbsoluteSize, TContainerSize } from "../cardContainer/cardContainer";
 import { TCardStatus } from "./components/status";
-import { TIconType } from "./components/title";
 import { IActions } from "./components/actions";
 import { IContent } from "./components/content";
 import "./card.less";
@@ -9,21 +8,15 @@ import { TAlignment } from "../absolute/absolute";
 import { TooltipSize } from "../tooltip/tooltip";
 import { IZenComponentProps, IZenGridItem } from "../commonHelpers/zenComponent";
 import { ICardButton } from "./components/cardButton/cardButton";
-import { IIcon } from "../icons/icon";
 export declare const DEFAULT_CARD_SIZE: TContainerSize;
 export interface ICard extends IZenComponentProps, IZenGridItem {
     size?: TContainerSize | IAbsoluteSize;
     status?: TCardStatus;
     title: string;
-    icon?: FunctionComponent<IIcon>;
-    iconType?: TIconType;
-    secondary?: string;
     tooltip?: ReactNode;
     titleIconClasses?: string;
     link?: string;
     date?: string;
-    isFavorite?: boolean;
-    onFavoriteChange?: (isFavorite: boolean) => void;
     cardContentClasses?: string;
     tooltipAlignment?: TAlignment;
     tooltipSize?: TooltipSize;

package/dist/card/card.js

@@ -31,6 +31,7 @@ const react_1 = __importStar(require("react"));
 const cardContainer_1 = require("../cardContainer/cardContainer");
 const deviceType_1 = require("../commonHelpers/hooks/deviceType");
 const useDeviceType_1 = require("../commonHelpers/hooks/useDeviceType");
+const titleLink_1 = require("./components/titleLink");
 const status_1 = require("./components/status");
 const title_1 = require("./components/title");
 const actions_1 = require("./components/actions");
@@ -41,6 +42,7 @@ const isAbsoluteSize_1 = require("../cardContainer/helpers/isAbsoluteSize");
 const getContainerSize_1 = require("../cardContainer/helpers/getContainerSize");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const menu_1 = require("../menu/menu");
+const textIconButton_1 = require("../textIconButton/textIconButton");
 const svgIconSize_1 = require("../svgIcon/svgIconSize");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const cardButton_1 = require("./components/cardButton/cardButton");
@@ -49,18 +51,17 @@ const useDrive_1 = require("../utils/theme/useDrive");
 const getDefaultFullWidthValue_1 = require("./helpers/getDefaultFullWidthValue");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const iconDotVertical_1 = require("../icons/iconDotVertical");
-const button_1 = require("../button/button");
-const favoriteButton_1 = require("../favoriteButton/favoriteButton");
 exports.DEFAULT_CARD_SIZE = "S";
 // eslint-disable-next-line @typescript-eslint/naming-convention, react/prop-types
 const Card = (props) => {
-    const { size, children, title, icon, iconType, secondary, status, date, tooltip, className = "", link, cardContentClasses = "", tooltipAlignment, tooltipSize, fullWidth, scrollableContent = true, autoHeight = false, fullHeight = false } = props;
+    const { size, children, title, status, titleIconClasses, date, tooltip, className = "", link, cardContentClasses = "", tooltipAlignment, tooltipSize, fullWidth, scrollableContent = true, autoHeight = false, fullHeight = false } = props;
     const { translate } = (0, useLanguage_1.useLanguage)();
     const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Mobile);
     const [cardSize, setCardSize] = (0, react_1.useState)((0, isAbsoluteSize_1.isAbsoluteSize)(size) ? (0, getContainerSize_1.getContainerSize)(size.width) : (size || exports.DEFAULT_CARD_SIZE));
     const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
     const containerRef = (0, react_1.useRef)(null);
     const headerRef = (0, react_1.useRef)(null);
+    const footerRef = (0, react_1.useRef)(null);
     const titleId = (0, react_1.useId)();
     const isDrive = (0, useDrive_1.useDrive)();
     const dateDriveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-card__date");
@@ -69,53 +70,33 @@ const Card = (props) => {
     const { isAutoHeight, isScrollable, isFullWidth, isFullHeight } = (0, useCardSizeState_1.useCardSizeState)(deviceType, scrollableContent, fullWidthValue, fullHeight, autoHeight, size || "S");
     (0, useDeviceType_1.useDeviceType)(setDeviceType);
     (0, useCardSize_1.useCardSize)(setCardSize, containerRef, (0, isAbsoluteSize_1.isAbsoluteSize)(size) ? (0, getContainerSize_1.getContainerSize)(size.width) : (size || "S"));
-    const { actions, content } = (0, react_1.useMemo)(() => {
-        if (!children) {
-            return { actions: [], content: [] };
+    const actions = [];
+    const content = [];
+    react_1.default.Children.forEach(children, (el) => {
+        if (!el) {
+            return;
         }
-        if (Array.isArray(children)) {
-            const acts = [];
-            const cnt = [];
-            react_1.default.Children.forEach(children, (el) => {
-                if (!el) {
-                    return;
-                }
-                if (el.type === exports.Card.Actions) {
-                    const actionChildren = el.props.children;
-                    if (!actionChildren) {
-                        return;
-                    }
-                    if (Array.isArray(actionChildren)) {
-                        acts.push(...actionChildren.filter((child) => (child === null || child === void 0 ? void 0 : child.type) === exports.Card.Button));
-                        return;
-                    }
-                    if (typeof actionChildren === "object" && actionChildren.type === exports.Card.Button) {
-                        acts.push(actionChildren);
-                    }
-                }
-                if (el.type === exports.Card.Content) {
-                    cnt.push(el);
-                }
-            });
-            return { actions: acts, content: cnt };
-        }
-        return { actions: [], content: [children] };
-    }, [children]);
-    const maxNumberOfActions = (0, getMaxNumberOfActions_1.getMaxNumberOfActions)(cardSize);
-    const { headerActions, menuActions } = (0, react_1.useMemo)(() => {
-        const hActions = [];
-        const mActions = [];
-        for (let i = 0; i < actions.length; i++) {
-            if (actions[i].props.inContextMenu || hActions.length >= maxNumberOfActions || isMobile) {
-                mActions.push(actions[i]);
+        if (el.type === exports.Card.Actions) {
+            const actionChildren = el.props.children;
+            if (!actionChildren) {
+                return;
+            }
+            if (Array.isArray(actionChildren)) {
+                actions.push(...actionChildren.filter((child) => (child === null || child === void 0 ? void 0 : child.type) === exports.Card.Button));
+                return;
             }
-            else {
-                hActions.push(actions[i]);
+            if (typeof actionChildren === "object" && actionChildren.type === exports.Card.Button) {
+                actions.push(actionChildren);
             }
         }
-        return { headerActions: hActions, menuActions: mActions };
-    }, [actions, isMobile, maxNumberOfActions]);
-    const menuTrigger = (0, jsx_runtime_1.jsx)(button_1.Button, { className: (0, classNames_1.classNames)(["zen-card__menu-trigger", menuTriggerDriveClasses || ""]), type: "tertiary-black", "aria-label": translate("Actions"), htmlType: "button", children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, { size: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large }) });
+        if (el.type === exports.Card.Content) {
+            content.push(el);
+        }
+    });
+    const maxNumberOfActions = (0, getMaxNumberOfActions_1.getMaxNumberOfActions)(cardSize);
+    const headerActions = isMobile ? [] : actions.slice(0, maxNumberOfActions);
+    const menuActions = isMobile ? actions : actions.slice(maxNumberOfActions);
+    const menuTrigger = (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: (0, classNames_1.classNames)(["zen-card__menu-trigger", menuTriggerDriveClasses || ""]), iconPosition: textIconButton_1.ButtonIconPosition.Start, type: "tertiary-black", iconSize: isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large, icon: iconDotVertical_1.IconDotVertical, "aria-label": translate("Actions"), htmlType: "button" });
     (0, react_1.useEffect)(() => {
         if (containerRef.current) {
             containerRef.current.setAttribute("role", "region");
@@ -128,13 +109,8 @@ const Card = (props) => {
         cardContentClasses
     ]), [cardContentClasses, isScrollable]);
     const dateClassName = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-card__date", (isMobile && !isDrive) ? "zen-card__date--mobile" : "", dateDriveClasses !== null && dateDriveClasses !== void 0 ? dateDriveClasses : ""]), [isMobile, isDrive, dateDriveClasses]);
-    const favoriteButton = (0, react_1.useMemo)(() => {
-        if (props.onFavoriteChange === undefined) {
-            return null;
-        }
-        return (0, jsx_runtime_1.jsx)(favoriteButton_1.FavoriteButton, { isFavorite: props.isFavorite || false, onChange: props.onFavoriteChange, className: "zen-card__favorite-button" });
-    }, [props.isFavorite, props.onFavoriteChange]);
-    return (0, jsx_runtime_1.jsxs)(cardContainer_1.CardContainer, { isMobile: isMobile, fullWidth: isFullWidth, fullHeight: isFullHeight, autoHeight: isAutoHeight, scrollable: isScrollable, ref: containerRef, size: size || "S", className: (0, classNames_1.classNames)(["zen-card", className]), children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header", ref: headerRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header-primary", children: [(0, jsx_runtime_1.jsx)(title_1.Title, { id: titleId, link: link, isMobile: isMobile, title: title, icon: icon, iconType: iconType }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header-right", children: [!!headerActions.length && headerActions, date ? (0, jsx_runtime_1.jsx)("span", { className: dateClassName, children: date }) : null, favoriteButton, status && (0, jsx_runtime_1.jsx)(status_1.Status, { title: title, status: status, isMobile: isMobile, tooltip: tooltip, tooltipAlignment: tooltipAlignment, tooltipSize: tooltipSize }), !!menuActions.length && (0, jsx_runtime_1.jsx)(menu_1.Menu, { trigger: menuTrigger, title: title, children: menuActions.map(action => (0, react_1.createElement)(menu_1.Menu.Item, Object.assign({ key: action.props.id }, action.props))) })] })] }), secondary ? (0, jsx_runtime_1.jsx)("div", { className: "zen-card__secondary", children: secondary }) : null] }), (0, jsx_runtime_1.jsx)("div", { className: cardContentClassName, children: content })] });
+    return (0, jsx_runtime_1.jsxs)(cardContainer_1.CardContainer, { isMobile: isMobile, fullWidth: isFullWidth, fullHeight: isFullHeight, autoHeight: isAutoHeight, scrollable: isScrollable, ref: containerRef, size: size || "S", className: (0, classNames_1.classNames)(["zen-card", className]), children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header", ref: headerRef, children: [(0, jsx_runtime_1.jsx)(title_1.Title, { id: titleId, link: link, isMobile: isMobile, title: title }), status && (0, jsx_runtime_1.jsx)(status_1.Status, { title: title, status: status, isMobile: isMobile, tooltip: tooltip, tooltipAlignment: tooltipAlignment, tooltipSize: tooltipSize }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header-right", children: [!!headerActions.length && headerActions, (0, jsx_runtime_1.jsx)("span", { className: dateClassName, children: date }), !!menuActions.length && (0, jsx_runtime_1.jsx)(menu_1.Menu, { trigger: menuTrigger, title: title, children: menuActions.map(action => (0, react_1.createElement)(menu_1.Menu.Item, Object.assign({ key: action.props.id }, action.props))) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: cardContentClassName, children: content }), (link && isMobile) ?
+                (0, jsx_runtime_1.jsx)("div", { className: "zen-card__footer", ref: footerRef, children: (0, jsx_runtime_1.jsx)(titleLink_1.TitleLink, { id: titleId, link: link, titleIconClasses: titleIconClasses, ariaLabel: title }) }) : ""] });
 };
 exports.Card = Card;
 exports.TRANSLATIONS = [

package/dist/card/components/cardButton/cardButton.d.ts

@@ -8,6 +8,5 @@ export interface ICardButton extends IZenIdComponentProps {
     link?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     disabled?: boolean;
-    inContextMenu?: boolean;
 }
 export declare const CardButton: FC<ICardButton>;

package/dist/card/components/title.d.ts

@@ -1,15 +1,11 @@
-import { FC, FunctionComponent } from "react";
+import { FC } from "react";
 import "./title.less";
-import { IIcon } from "../../icons/icon";
-export type TIconType = "info" | "warning" | "error" | "success" | "default";
 interface ITitle {
     isMobile: boolean;
     title: string;
     id: string;
     className?: string;
     link?: string;
-    icon?: FunctionComponent<IIcon>;
-    iconType?: TIconType;
 }
 export declare const Title: FC<ITitle>;
 export {};

package/dist/card/components/title.js

@@ -2,19 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Title = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const titleLink_1 = require("./titleLink");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
 const useDrive_1 = require("../../utils/theme/useDrive");
-const iconChevronRightSmall_1 = require("../../icons/iconChevronRightSmall");
-const Title = ({ isMobile, link, title, id, icon, iconType, className = "" }) => {
+const Title = ({ isMobile, link, title, id, className = "" }) => {
     const driveClassNames = (0, useDriveClassName_1.useDriveClassName)("zen-title__text");
     const isDrive = (0, useDrive_1.useDrive)();
-    const iconClassName = iconType ? `zen-card-title__icon--${iconType}` : "";
-    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-card-title", children: [icon
-                ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-card-title__icon", iconClassName]), children: (0, react_1.createElement)(icon, { size: "large" }) })
-                : null, link
-                ? (0, jsx_runtime_1.jsxs)("a", { id: id, className: (0, classNames_1.classNames)(["zen-card-title__link"]), href: link, children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-card-title__link-text"]), children: title }), (0, jsx_runtime_1.jsx)("div", { className: "zen-card-title__link-chevron", children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, { size: "large", className: "zen-card-title__chevron-icon" }) })] })
-                : (0, jsx_runtime_1.jsx)("span", { id: id, className: (0, classNames_1.classNames)(["zen-card-title__text", (isMobile && !isDrive) ? "zen-card-title__text--mobile" : "", driveClassNames !== null && driveClassNames !== void 0 ? driveClassNames : "", className]), children: title })] });
+    return (link && !isMobile) ?
+        (0, jsx_runtime_1.jsx)(titleLink_1.TitleLink, { id: id, link: link, children: title }) :
+        (0, jsx_runtime_1.jsx)("span", { id: id, className: (0, classNames_1.classNames)(["zen-title__text", (isMobile && !isDrive) ? "zen-title__text--mobile" : "", driveClassNames !== null && driveClassNames !== void 0 ? driveClassNames : "", className]), children: title });
 };
 exports.Title = Title;

package/dist/commonStyles/common.less

@@ -22,6 +22,7 @@
     --border-radius-default: 4px;
     --padding-top-bottom: 8px;
     --padding-left-right: 8px;
+    --mobile: 640px;
 }
 
 .zen-visually-hidden {

package/dist/dateInput/dateInput.js

@@ -87,7 +87,7 @@ const DateInput = ({ className, classNamePopup, defaultValue, value, onChange, i
         }
         prevIsOpenRef.current = isOpen;
     }, [isOpen]);
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { htmlType: "button", icon: iconCalendar_1.IconCalendar, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: cssClass, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: getButtonLabel() }), isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error })] });
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { id: id || undefined, htmlType: "button", icon: iconCalendar_1.IconCalendar, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: cssClass, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: getButtonLabel() }), isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error })] });
 };
 exports.DateInput = DateInput;
 exports.TRANSLATIONS = [

package/dist/dropdown/dropdown.js

@@ -345,7 +345,8 @@ const Dropdown = ({ className, classNamePopup, getData, errorHandler, dataItems,
     // eslint-disable-next-line complexity
     const getPopupContent = (0, react_1.useMemo)(() => {
         var _a, _b, _c;
-        let currentWidth = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+        const triggerRefWidth = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+        let currentWidth = triggerRefWidth ? Math.round(triggerRefWidth) : undefined;
         if (currentWidth && currentWidth > 420) {
             currentWidth = 420;
         }

package/dist/groupsFilter/groupsFilter.js

@@ -55,6 +55,7 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
     const handleCancel = () => {
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: false });
         dispatchState({ type: stateActionType_1.StateActionType.SetState, payload: state.frozenState });
+        dispatchState({ type: stateActionType_1.StateActionType.SideWide, payload: state.frozenSideWideState });
         handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
     };
     const handleApply = () => {

package/dist/groupsFilter/stateReducer/stateReducer.js

@@ -92,7 +92,7 @@ function stateReducer(state, action) {
             return Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) });
         }
         case stateActionType_1.StateActionType.ResetSelection:
-            return Object.assign(Object.assign({}, state), { selectedIds: [], advancedFilterState: (0, groupsHelper_1.getDefaultFilterState)(), relation: groupsHelper_1.DEFAULT_RELATION_OPERATOR });
+            return Object.assign(Object.assign({}, state), { selectedIds: [], advancedFilterState: (0, groupsHelper_1.getDefaultFilterState)(), relation: groupsHelper_1.DEFAULT_RELATION_OPERATOR, sideWideState: false });
         case stateActionType_1.StateActionType.SelectAllChildren: {
             const currentEl = state.groupsMap[payload];
             const newSelected = new Set(state.selectedIds);