@geotab/zenith 3.10.0-beta.6 → 3.10.0

package/README.md

@@ -55,7 +55,7 @@ Zenith library provides components defined in Zenith Design System. It includes
 - `Nav` empty state support
 - Allow multiple columns to be disabled in `ColumnsList`
 - Flip icons for Arabic (RTL) language
-- `Dropdown` select-all button shows active state when all items are selected
+- Fix `ColumnsList` keyboard focus skipping disabled items
 - Add `ariaLabel` prop to `CardButton` for accessible name override
 - Fix `GroupsFilter` dropdown scrolling into blank space
 - Fix `Dropdown` ARIA pattern — non-search dropdowns now use `menu` role instead of `dialog`
@@ -68,6 +68,10 @@ Zenith library provides components defined in Zenith Design System. It includes
 - Convert selection and toggle inputs (`Checkbox`, `Radio`, `Toggle`) to rem units
 - Convert text, search, and file inputs to rem units
 - Convert utility and standalone components to rem units
+- Convert feedback and notification components (`Alert`, `Banner`, `EmptyState`, `Notification`, `Toast`) to rem units
+- Convert dropdown and select components (`Dropdown`, `Select`, `Combobox`) to rem units
+- Add `IconPinFilled` icon
+- Updated translations support
 
 ### 3.9.2
 

package/dist/index.css

@@ -14078,14 +14078,14 @@ html:lang(ar) .zen-list-item__secondary {
 .zen-list-item--clickable {
   cursor: pointer;
 }
-.zen-list-item--vertical .zen-list-item__identifier,
-.zen-list-item--wrap .zen-list-item__identifier {
+.zen-list--vertical .zen-list-item .zen-list-item__identifier {
   flex-direction: column;
   align-items: initial;
   row-gap: 4px;
 }
-.zen-list-item--wrap .zen-list-item__secondary {
+.zen-list--vertical .zen-list-item .zen-list-item__secondary {
   white-space: normal;
+  text-overflow: clip;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;

package/dist/list/list.d.ts

@@ -10,6 +10,7 @@ type IListBase = {
     isLoading?: boolean;
     waitingItems?: number;
     onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>) => void;
+    vertical?: boolean;
 } & IZenComponentProps;
 type IListStandard = IListBase & {
     type?: Omit<TListType, "data">;

package/dist/list/list.js

@@ -13,7 +13,7 @@ const useLazyLoading_1 = require("./hooks/useLazyLoading");
 const getLoadingItems_1 = require("./utils/getLoadingItems");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const List = (props) => {
-    const { type, children, onChangeOrder, checked, onCheck, onListEnd, onKeyDown, isLoading, waitingItems, className } = props;
+    const { type, children, onChangeOrder, checked, onCheck, onListEnd, onKeyDown, isLoading, waitingItems, vertical, className } = props;
     const isTall = type === "data" && "variant" in props ? props.variant === "tall" : undefined;
     const listId = (0, react_1.useId)();
     const listRef = (0, react_1.useRef)(null);
@@ -56,6 +56,6 @@ const List = (props) => {
         const defaultWaitingItems = type === "data" ? 50 : 10;
         return (0, getLoadingItems_1.getLoadingItems)(type || "standard", waitingItems || defaultWaitingItems, listId, isDrive, isMobile, isTall);
     }, [isDrive, isTall, isLoading, isMobile, listId, type, waitingItems]);
-    return ((0, jsx_runtime_1.jsx)(viewportProvider_1.ViewportProvider, { isInViewport: isInViewport, children: (0, jsx_runtime_1.jsxs)("ul", { className: (0, classNames_1.classNames)(["zen-list", className || ""]), onKeyDown: onKeyDown, ref: listRef, children: [childrenArray, loadingChildren] }) }));
+    return ((0, jsx_runtime_1.jsx)(viewportProvider_1.ViewportProvider, { isInViewport: isInViewport, children: (0, jsx_runtime_1.jsxs)("ul", { className: (0, classNames_1.classNames)(["zen-list", vertical ? "zen-list--vertical" : "", className || ""]), onKeyDown: onKeyDown, ref: listRef, children: [childrenArray, loadingChildren] }) }));
 };
 exports.List = List;

package/dist/list/listItem/listItem.d.ts

@@ -13,7 +13,5 @@ export interface IListItem extends IZenComponentProps {
     link?: string;
     target?: React.HTMLAttributeAnchorTarget;
     onDragStart?: (e: React.PointerEvent<HTMLElement>) => void;
-    wrap?: boolean;
-    vertical?: boolean;
 }
-export declare const ListItem: ({ id, className, image, name, secondary, status, actions, onClick, link, target, onDragStart, wrap, vertical }: IListItem) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItem: ({ id, className, image, name, secondary, status, actions, onClick, link, target, onDragStart }: IListItem) => import("react/jsx-runtime").JSX.Element;

package/dist/list/listItem/listItem.js

@@ -87,9 +87,7 @@ const ListItem = ({
   onClick,
   link,
   target,
-  onDragStart,
-  wrap,
-  vertical
+  onDragStart
 }) => {
   const isMobile = (0, useMobile_1.useMobile)();
   const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-list-item");
@@ -179,7 +177,7 @@ const ListItem = ({
   const clickableClassName = (0, react_1.useMemo)(() => onClick || link ? "zen-list-item--clickable" : "", [link, onClick]);
   return (0, jsx_runtime_1.jsxs)("li", {
     id: id,
-    className: (0, classNames_1.classNames)(["zen-list-item", mobileClassName || driveClassName || "", clickableClassName, wrap ? "zen-list-item--wrap" : "", vertical ? "zen-list-item--vertical" : "", className || ""]),
+    className: (0, classNames_1.classNames)(["zen-list-item", mobileClassName || driveClassName || "", clickableClassName, className || ""]),
     onClick: handleClick,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ref: itemRef,

package/esm/list/list.d.ts

@@ -10,6 +10,7 @@ type IListBase = {
     isLoading?: boolean;
     waitingItems?: number;
     onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>) => void;
+    vertical?: boolean;
 } & IZenComponentProps;
 type IListStandard = IListBase & {
     type?: Omit<TListType, "data">;

package/esm/list/list.js

@@ -10,7 +10,7 @@ import { useLazyLoading } from "./hooks/useLazyLoading";
 import { getLoadingItems } from "./utils/getLoadingItems";
 import { classNames } from "../commonHelpers/classNames/classNames";
 export const List = (props) => {
-    const { type, children, onChangeOrder, checked, onCheck, onListEnd, onKeyDown, isLoading, waitingItems, className } = props;
+    const { type, children, onChangeOrder, checked, onCheck, onListEnd, onKeyDown, isLoading, waitingItems, vertical, className } = props;
     const isTall = type === "data" && "variant" in props ? props.variant === "tall" : undefined;
     const listId = useId();
     const listRef = useRef(null);
@@ -53,5 +53,5 @@ export const List = (props) => {
         const defaultWaitingItems = type === "data" ? 50 : 10;
         return getLoadingItems(type || "standard", waitingItems || defaultWaitingItems, listId, isDrive, isMobile, isTall);
     }, [isDrive, isTall, isLoading, isMobile, listId, type, waitingItems]);
-    return (_jsx(ViewportProvider, { isInViewport: isInViewport, children: _jsxs("ul", { className: classNames(["zen-list", className || ""]), onKeyDown: onKeyDown, ref: listRef, children: [childrenArray, loadingChildren] }) }));
+    return (_jsx(ViewportProvider, { isInViewport: isInViewport, children: _jsxs("ul", { className: classNames(["zen-list", vertical ? "zen-list--vertical" : "", className || ""]), onKeyDown: onKeyDown, ref: listRef, children: [childrenArray, loadingChildren] }) }));
 };

package/esm/list/listItem/listItem.d.ts

@@ -13,7 +13,5 @@ export interface IListItem extends IZenComponentProps {
     link?: string;
     target?: React.HTMLAttributeAnchorTarget;
     onDragStart?: (e: React.PointerEvent<HTMLElement>) => void;
-    wrap?: boolean;
-    vertical?: boolean;
 }
-export declare const ListItem: ({ id, className, image, name, secondary, status, actions, onClick, link, target, onDragStart, wrap, vertical }: IListItem) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItem: ({ id, className, image, name, secondary, status, actions, onClick, link, target, onDragStart }: IListItem) => import("react/jsx-runtime").JSX.Element;

package/esm/list/listItem/listItem.js

@@ -79,9 +79,7 @@ export const ListItem = ({
   onClick,
   link,
   target,
-  onDragStart,
-  wrap,
-  vertical
+  onDragStart
 }) => {
   const isMobile = useMobile();
   const driveClassName = useDriveClassName("zen-list-item");
@@ -171,7 +169,7 @@ export const ListItem = ({
   const clickableClassName = useMemo(() => onClick || link ? "zen-list-item--clickable" : "", [link, onClick]);
   return _jsxs("li", {
     id: id,
-    className: classNames(["zen-list-item", mobileClassName || driveClassName || "", clickableClassName, wrap ? "zen-list-item--wrap" : "", vertical ? "zen-list-item--vertical" : "", className || ""]),
+    className: classNames(["zen-list-item", mobileClassName || driveClassName || "", clickableClassName, className || ""]),
     onClick: handleClick,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ref: itemRef,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.10.0-beta.6",
+    "version": "3.10.0",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",
@@ -118,5 +118,8 @@
             "last 1 firefox version",
             "last 1 safari version"
         ]
+    },
+    "publishConfig": {
+        "access": "public"
     }
 }