@geotab/zenith 3.5.0-beta.1 → 3.5.1-beta.0

package/esm/nav/navFooter/navEditFooter/navEditFooter.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import "./navEditFooter.less";
+import { IZenComponentProps } from "../../../commonHelpers/zenComponent";
+/**
+ * @beta This component is not fully ready yet and may change in future releases.
+ */
+export interface INavEditFooter extends IZenComponentProps {
+    handleSaveClick: () => void;
+    handleCancelClick: () => void;
+}
+export declare const NavEditFooter: React.FC<INavEditFooter>;

package/esm/nav/navFooter/navEditFooter/navEditFooter.js

@@ -0,0 +1,101 @@
+import { injectString } from "../../../utils/localization/translationsDictionary";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../../button/button";
+import { classNames } from "../../../commonHelpers/classNames/classNames";
+import { useLanguage } from "../../../utils/localization/useLanguage";
+import { useNavContext } from "../../context/nav.context";
+import { useCallback } from "react";
+import { useMobile } from "../../../commonHelpers/hooks/useMobile";
+injectString("cs", "Save", "Ulo\u017Eit");
+injectString("da-DK", "Save", "Spare");
+injectString("de", "Save", "Speichern");
+injectString("en", "Save", "Save");
+injectString("es", "Save", "Guardar");
+injectString("fi-FI", "Save", "S\xE4\xE4st\xE4\xE4");
+injectString("fr", "Save", "Enregistrer");
+injectString("fr-FR", "Save", "Enregistrer");
+injectString("hu-HU", "Save", "Ment\xE9s");
+injectString("id", "Save", "Simpan");
+injectString("it", "Save", "Salvare");
+injectString("ja", "Save", "\u4FDD\u5B58");
+injectString("ko-KR", "Save", "\uC800\uC7A5");
+injectString("ms", "Save", "Simpan");
+injectString("nb-NO", "Save", "Lagre");
+injectString("nl", "Save", "Opslaan");
+injectString("pl", "Save", "Zapisz");
+injectString("pt-BR", "Save", "Salvar");
+injectString("pt-PT", "Save", "Guardar");
+injectString("sk-SK", "Save", "Ulo\u017Ei\u0165");
+injectString("sv", "Save", "Spara");
+injectString("th", "Save", "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01");
+injectString("tr", "Save", "Kaydet");
+injectString("zh-Hans", "Save", "\u4FDD\u5B58");
+injectString("zh-TW", "Save", "\u5132\u5B58");
+injectString("ro-RO", "Save", "Salva\u021Bi");
+injectString("cs", "Cancel", "Zru\u0161it");
+injectString("da-DK", "Cancel", "Annuller");
+injectString("de", "Cancel", "Abbrechen");
+injectString("en", "Cancel", "Cancel");
+injectString("es", "Cancel", "Cancelar");
+injectString("fi-FI", "Cancel", "Peruuta");
+injectString("fr", "Cancel", "Annuler");
+injectString("fr-FR", "Cancel", "Annuler");
+injectString("hu-HU", "Cancel", "M\xE9gse");
+injectString("id", "Cancel", "Batalkan");
+injectString("it", "Cancel", "Annullare");
+injectString("ja", "Cancel", "\u30AD\u30E3\u30F3\u30BB\u30EB");
+injectString("ko-KR", "Cancel", "\uCDE8\uC18C");
+injectString("ms", "Cancel", "Batal");
+injectString("nb-NO", "Cancel", "Avbryt");
+injectString("nl", "Cancel", "Annuleren");
+injectString("pl", "Cancel", "Anuluj");
+injectString("pt-BR", "Cancel", "Cancelar");
+injectString("pt-PT", "Cancel", "Cancelar");
+injectString("sk-SK", "Cancel", "Zru\u0161.");
+injectString("sv", "Cancel", "Avbryt");
+injectString("th", "Cancel", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01");
+injectString("tr", "Cancel", "\u0130ptal");
+injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
+injectString("zh-TW", "Cancel", "\u53D6\u6D88");
+injectString("ro-RO", "Cancel", "Anula\u021Bi");
+export const NavEditFooter = ({
+  className,
+  handleSaveClick,
+  handleCancelClick
+}) => {
+  const {
+    onEditStateToggle
+  } = useNavContext();
+  const isMobile = useMobile();
+  const {
+    translate
+  } = useLanguage();
+  const onSaveClick = useCallback(() => {
+    onEditStateToggle === null || onEditStateToggle === void 0 ? void 0 : onEditStateToggle(false);
+    handleSaveClick();
+  }, [onEditStateToggle, handleSaveClick]);
+  const onCancelClick = useCallback(() => {
+    onEditStateToggle === null || onEditStateToggle === void 0 ? void 0 : onEditStateToggle(false);
+    handleCancelClick();
+  }, [onEditStateToggle, handleCancelClick]);
+  const navEditFooterClassNames = classNames(["zen-nav-edit-footer", isMobile ? "zen-nav-edit-footer--mobile" : "", className !== null && className !== void 0 ? className : ""]);
+  // needed to change buttons order between mobile and desktop modes
+  const saveButtonClassNames = classNames(["zen-nav-edit-footer__button", isMobile ? "zen-nav-edit-footer__button--with-margin" : ""]);
+  const saveButton = _jsx(Button, {
+    onClick: onSaveClick,
+    className: saveButtonClassNames,
+    type: "primary",
+    children: translate("Save")
+  });
+  const cancelButton = _jsx(Button, {
+    onClick: onCancelClick,
+    className: "zen-nav-edit-footer__button",
+    type: "secondary",
+    children: translate("Cancel")
+  });
+  return _jsxs("div", {
+    className: navEditFooterClassNames,
+    children: [isMobile ? saveButton : cancelButton, isMobile ? cancelButton : saveButton]
+  });
+};
+NavEditFooter.displayName = "NavEditFooter";

package/esm/nav/navFooter/navFooter.d.ts

@@ -3,11 +3,6 @@ import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 import { FC } from "react";
 export interface INavFooter extends IZenComponentProps {
 }
-export interface INavFooterBottom extends IZenComponentProps {
-}
-export interface INavFooterEditButton extends IZenComponentProps {
-    onClick?: () => void;
-}
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
@@ -16,6 +11,6 @@ export declare const NavFooter: FC<INavFooter> & {
         ({ children }: import("./navFooterAction/navFooterAction").INavFooterActionProps): import("react/jsx-runtime").JSX.Element | null;
         displayName: string;
     };
-    Bottom: FC<INavFooterBottom>;
-    EditButton: FC<INavFooterEditButton>;
+    Bottom: FC<IZenComponentProps>;
+    EditButton: FC<IZenComponentProps>;
 };

package/esm/nav/navFooter/navFooter.js

@@ -65,14 +65,14 @@ const NavFooterBottom = ({
 };
 NavFooterBottom.displayName = "NavFooterBottom";
 const NavFooterEditButton = ({
-  className,
-  onClick
+  className
 }) => {
   const {
     translate
   } = useLanguage();
   const {
-    collapsed
+    collapsed,
+    onEditStateToggle
   } = useNavContext();
   const isMobile = useMobile();
   return _jsx(NavItem, {
@@ -80,7 +80,7 @@ const NavFooterEditButton = ({
     title: translate("Edit Navigation"),
     collapsed: !isMobile,
     primaryIcon: IconEdit,
-    onClick: () => onClick && onClick(),
+    onClick: () => onEditStateToggle === null || onEditStateToggle === void 0 ? void 0 : onEditStateToggle(true),
     menuAlignment: "right-bottom",
     tooltipAlignment: collapsed ? "right" : "top"
   }, "edit-button");

package/esm/nav/navItem/navActionItem.d.ts

@@ -0,0 +1,14 @@
+import { FC, MouseEvent, ReactNode } from "react";
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+import { IIcon } from "../../icons/icon";
+import "./navItem.less";
+export interface INavActionItem extends IZenComponentProps {
+    title: string;
+    id?: string;
+    icon?: FC<IIcon>;
+    startNode?: ReactNode;
+    endButtonIcon?: FC<IIcon>;
+    endButtonTitle?: string;
+    onEndButtonClick?: (e: MouseEvent) => void;
+}
+export declare const NavActionItem: FC<INavActionItem>;

package/esm/nav/navItem/navActionItem.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+export const NavActionItem = ({ title, id, icon, className, startNode, endButtonIcon, endButtonTitle, onEndButtonClick }) => {
+    const PrimaryIconComponent = typeof icon === "function" ? icon : null;
+    const EndButtonIconComponent = typeof endButtonIcon === "function" ? endButtonIcon : null;
+    const itemClasses = classNames(["zen-nav-item", className || ""]);
+    return (_jsxs("div", { className: itemClasses, id: id, children: [_jsx("div", { className: "zen-nav-item__main", children: _jsxs("div", { className: "zen-nav-item__content-left", children: [startNode ? _jsx("span", { className: "zen-nav-item__icon", children: startNode }) : null, PrimaryIconComponent ? _jsx(PrimaryIconComponent, { size: "huge" }) : null, _jsx("span", { className: "zen-nav-item__title", children: _jsx("span", { className: "zen-nav-item__title-text", children: title }) })] }) }), EndButtonIconComponent && endButtonTitle && onEndButtonClick
+                ? _jsx("button", { type: "button", className: "zen-nav-item__action", "aria-label": endButtonTitle, title: endButtonTitle, onClick: onEndButtonClick, children: _jsx(EndButtonIconComponent, { size: "huge" }) })
+                : null] }));
+};
+NavActionItem.displayName = "NavActionItem";

package/package.json

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

package/dist/list/utils/findListElement.d.ts

@@ -1 +0,0 @@
-export declare const findListElement: (element: HTMLElement) => HTMLElement | null;

package/dist/list/utils/findListElement.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.findListElement = void 0;
-const findListElement = (element) => {
-    if (element.classList.contains("zen-list-item")) {
-        return element;
-    }
-    if (element.parentElement) {
-        return (0, exports.findListElement)(element.parentElement);
-    }
-    return null;
-};
-exports.findListElement = findListElement;

package/esm/list/utils/findListElement.d.ts

@@ -1 +0,0 @@
-export declare const findListElement: (element: HTMLElement) => HTMLElement | null;

package/esm/list/utils/findListElement.js

@@ -1,9 +0,0 @@
-export const findListElement = (element) => {
-    if (element.classList.contains("zen-list-item")) {
-        return element;
-    }
-    if (element.parentElement) {
-        return findListElement(element.parentElement);
-    }
-    return null;
-};