@geotab/zenith 3.1.0 → 3.1.1-beta.1

package/dist/gridLayout/utils/updateGridStateFromClassNames.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateGridStateFromClassNames = void 0;
 const constants_1 = require("./constants");
 // eslint-disable-next-line complexity
-const updateGridStateFromClassNames = (gridState, item) => {
+const updateGridStateFromClassNames = (gridState, item, colsState) => {
     const { className } = item.props;
     if (!className) {
         return;
@@ -25,32 +25,32 @@ const updateGridStateFromClassNames = (gridState, item) => {
     const mdStart = Number(tabletStartClassesLast.split(constants_1.TABLET_START_PREFIX)[1]);
     const smStart = Number(mobileStartClassesLast.split(constants_1.MOBILE_START_PREFIX)[1]);
     if (gridColValue && gridColValue > 0) {
-        gridState.gridLg = gridColValue > constants_1.DESKTOP_COLS_NUMBER ? constants_1.DESKTOP_COLS_NUMBER : gridColValue;
-        gridState.gridMd = gridColValue > constants_1.TABLET_COLS_NUMBER ? constants_1.TABLET_COLS_NUMBER : gridColValue;
-        gridState.gridSm = gridColValue > constants_1.MOBILE_COLS_NUMBER ? constants_1.MOBILE_COLS_NUMBER : gridColValue;
+        gridState.gridLg = gridColValue > colsState.desktop ? colsState.desktop : gridColValue;
+        gridState.gridMd = gridColValue > colsState.tablet ? colsState.tablet : gridColValue;
+        gridState.gridSm = gridColValue > colsState.mobile ? colsState.mobile : gridColValue;
     }
     if (lg && lg > 0) {
-        gridState.lg = lg > constants_1.DESKTOP_COLS_NUMBER ? constants_1.DESKTOP_COLS_NUMBER : lg;
+        gridState.lg = lg > colsState.desktop ? colsState.desktop : lg;
     }
     if (md && md > 0) {
-        gridState.md = md > constants_1.TABLET_COLS_NUMBER ? constants_1.TABLET_COLS_NUMBER : md;
+        gridState.md = md > colsState.tablet ? colsState.tablet : md;
     }
     if (sm && sm > 0) {
-        gridState.sm = sm > constants_1.MOBILE_COLS_NUMBER ? constants_1.MOBILE_COLS_NUMBER : sm;
+        gridState.sm = sm > colsState.mobile ? colsState.mobile : sm;
     }
     if (gridColStartValue && gridColStartValue > 0) {
-        gridState.gridLgStart = gridColStartValue > constants_1.DESKTOP_COLS_NUMBER ? constants_1.DESKTOP_COLS_NUMBER : gridColStartValue;
-        gridState.gridMdStart = gridColStartValue > constants_1.TABLET_COLS_NUMBER ? constants_1.TABLET_COLS_NUMBER : gridColStartValue;
-        gridState.gridSmStart = gridColStartValue > constants_1.MOBILE_COLS_NUMBER ? constants_1.MOBILE_COLS_NUMBER : gridColStartValue;
+        gridState.gridLgStart = gridColStartValue > colsState.desktop ? colsState.desktop : gridColStartValue;
+        gridState.gridMdStart = gridColStartValue > colsState.tablet ? colsState.tablet : gridColStartValue;
+        gridState.gridSmStart = gridColStartValue > colsState.mobile ? colsState.mobile : gridColStartValue;
     }
     if (lgStart && lgStart > 0) {
-        gridState.lgStart = lgStart > constants_1.DESKTOP_COLS_NUMBER ? constants_1.DESKTOP_COLS_NUMBER : lgStart;
+        gridState.lgStart = lgStart > colsState.desktop ? colsState.desktop : lgStart;
     }
     if (mdStart && mdStart > 0) {
-        gridState.mdStart = mdStart > constants_1.TABLET_COLS_NUMBER ? constants_1.TABLET_COLS_NUMBER : mdStart;
+        gridState.mdStart = mdStart > colsState.tablet ? colsState.tablet : mdStart;
     }
     if (smStart && smStart > 0) {
-        gridState.smStart = smStart > constants_1.MOBILE_COLS_NUMBER ? constants_1.MOBILE_COLS_NUMBER : smStart;
+        gridState.smStart = smStart > colsState.mobile ? colsState.mobile : smStart;
     }
 };
 exports.updateGridStateFromClassNames = updateGridStateFromClassNames;

package/dist/gridLayout/utils/updateGridStateFromProps.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from "react";
 import { IZenGridItem } from "../../commonHelpers/zenComponent";
-import { IGridItemFullState } from "../hooks/useGridClasses";
-export declare const updateGridStateFromProps: (gridState: IGridItemFullState, item: ReactElement<IZenGridItem>) => void;
+import { IGridColsState, IGridItemFullState } from "../hooks/useGridClasses";
+export declare const updateGridStateFromProps: (gridState: IGridItemFullState, item: ReactElement<IZenGridItem>, colsState: IGridColsState) => void;

package/dist/gridLayout/utils/updateGridStateFromProps.js

@@ -1,19 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateGridStateFromProps = void 0;
-const constants_1 = require("./constants");
 const updateGridPropToState_1 = require("./updateGridPropToState");
 const updateGridStartPropToState_1 = require("./updateGridStartPropToState");
 const setGridProp_1 = require("./setGridProp");
-const updateGridStateFromProps = (gridState, item) => {
+const updateGridStateFromProps = (gridState, item, colsState) => {
     const { gridLg, gridMd, gridSm, gridLgStart, gridMdStart, gridSmStart } = item.props;
     (0, updateGridPropToState_1.updateGridPropToState)(gridState, item);
     (0, updateGridStartPropToState_1.updateGridStartPropToState)(gridState, item);
-    (0, setGridProp_1.setGridProp)(gridState, gridLg, "lg", constants_1.DESKTOP_COLS_NUMBER);
-    (0, setGridProp_1.setGridProp)(gridState, gridMd, "md", constants_1.TABLET_COLS_NUMBER);
-    (0, setGridProp_1.setGridProp)(gridState, gridSm, "sm", constants_1.MOBILE_COLS_NUMBER);
-    (0, setGridProp_1.setGridProp)(gridState, gridLgStart, "lgStart", constants_1.DESKTOP_COLS_NUMBER);
-    (0, setGridProp_1.setGridProp)(gridState, gridMdStart, "mdStart", constants_1.TABLET_COLS_NUMBER);
-    (0, setGridProp_1.setGridProp)(gridState, gridSmStart, "smStart", constants_1.MOBILE_COLS_NUMBER);
+    (0, setGridProp_1.setGridProp)(gridState, gridLg, "lg", colsState.desktop);
+    (0, setGridProp_1.setGridProp)(gridState, gridMd, "md", colsState.tablet);
+    (0, setGridProp_1.setGridProp)(gridState, gridSm, "sm", colsState.mobile);
+    (0, setGridProp_1.setGridProp)(gridState, gridLgStart, "lgStart", colsState.desktop);
+    (0, setGridProp_1.setGridProp)(gridState, gridMdStart, "mdStart", colsState.tablet);
+    (0, setGridProp_1.setGridProp)(gridState, gridSmStart, "smStart", colsState.mobile);
 };
 exports.updateGridStateFromProps = updateGridStateFromProps;

package/dist/gridLayout/utils/updateGridStateWithDefaultValues.js

@@ -12,6 +12,7 @@ const cardContainer_1 = require("../../cardContainer/cardContainer");
 const bannerUpsell_1 = require("../../banner/bannerUpsell");
 const formStepper_1 = require("../../formStepper/formStepper");
 const formStepperButtons_1 = require("../../formStepperButtons/formStepperButtons");
+const divider_1 = require("../../divider/divider");
 const updateGridStateWithDefaultValues = (item, gridState) => {
     const { lg, md, sm } = gridState;
     if (lg || md || sm) {
@@ -44,5 +45,8 @@ const updateGridStateWithDefaultValues = (item, gridState) => {
     if (item.type === formStepperButtons_1.FormStepperButtons) {
         gridState.lg = 12;
     }
+    if (item.type === divider_1.Divider) {
+        gridState.lg = 12;
+    }
 };
 exports.updateGridStateWithDefaultValues = updateGridStateWithDefaultValues;

package/dist/groupButton/groupButton.d.ts

@@ -1,16 +1,10 @@
-import React from "react";
-import "./groupButton.less";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
-interface IGroupButtons {
-    name: string;
-    value: string;
-    selected?: boolean;
+import { FC } from "react";
+import { TFormFieldComponentProps } from "../formField/formField";
+import { IGroupButtonRaw } from "../groupButtonRaw/groupButtonRaw";
+import { TGroupButtonRaw } from "../groupButtonRaw/types";
+export interface IGroupButton extends IGroupButtonRaw {
 }
-export interface IGroupButton extends IZenComponentProps {
-    groupData: IGroupButtons[];
-    disabled?: boolean;
-    fullWidth?: boolean;
-    onChange?: (e: any) => void;
-}
-export declare const GroupButton: React.FC<IGroupButton>;
+type TFormFieldGroupButton = TFormFieldComponentProps<TGroupButtonRaw>;
+export type TGroupButton = Omit<TFormFieldGroupButton, "counter" | "ref">;
+export declare const GroupButton: FC<TGroupButton>;
 export {};

package/dist/groupButton/groupButton.js

@@ -1,43 +1,24 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GroupButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const classNames_1 = require("../commonHelpers/classNames/classNames");
-const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
-const GroupButtonOption = ({ nameGroup, labelName, value, disabled, checked, onChange }) => {
-    const inputGroupId = (0, react_1.useId)();
-    const inputKey = (0, react_1.useId)();
-    const labelKey = (0, react_1.useId)();
-    return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", onChange: onChange, checked: checked, id: inputGroupId, value: value, disabled: disabled, className: "zen-group-button__input", name: nameGroup }, inputKey), (0, jsx_runtime_1.jsx)("label", { htmlFor: inputGroupId, className: "zen-group-button__label zen-ellipsis", children: labelName }, labelKey)] });
-};
-const GroupButton = ({ fullWidth, disabled, onChange, groupData, className }) => {
-    const nameGroup = (0, react_1.useId)();
-    const onChangeHandler = (0, react_1.useCallback)((e) => { onChange && onChange(e); }, [onChange]);
-    const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-group-button");
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-group-button", driveClasses || "", fullWidth ? "zen-group-button--full-width" : "", className || ""]), children: groupData.map((el, index) => (0, jsx_runtime_1.jsx)(GroupButtonOption, { nameGroup: nameGroup, labelName: el.name, value: el.value, disabled: !!disabled, checked: el.selected, onChange: onChangeHandler }, `${nameGroup}_${index}_btngroup`)) });
+const formField_1 = require("../formField/formField");
+const groupButtonRaw_1 = require("../groupButtonRaw/groupButtonRaw");
+const FormGroupButton = (0, formField_1.FormField)(groupButtonRaw_1.GroupButtonRaw);
+const GroupButton = (_a) => {
+    var props = __rest(_a, []);
+    return (0, jsx_runtime_1.jsx)(FormGroupButton, Object.assign({}, props));
 };
 exports.GroupButton = GroupButton;
+exports.GroupButton.displayName = "GroupButton";

package/dist/groupButtonRaw/components/groupButtonOption.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface IGroupButtonOption {
+    nameGroup: string;
+    labelName: string;
+    value: string;
+    disabled: boolean;
+    checked?: boolean;
+    onChange: (e: any) => void;
+}
+export declare const GroupButtonOption: React.FC<IGroupButtonOption>;
+export {};

package/dist/groupButtonRaw/components/groupButtonOption.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupButtonOption = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const GroupButtonOption = ({ nameGroup, labelName, value, disabled, checked, onChange }) => {
+    const inputGroupId = (0, react_1.useId)();
+    const inputKey = (0, react_1.useId)();
+    const labelKey = (0, react_1.useId)();
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", onChange: onChange, checked: checked, id: inputGroupId, value: value, disabled: disabled, className: "zen-group-button__input", name: nameGroup }, inputKey), (0, jsx_runtime_1.jsx)("label", { htmlFor: inputGroupId, className: "zen-group-button__label zen-ellipsis", children: labelName }, labelKey)] });
+};
+exports.GroupButtonOption = GroupButtonOption;

package/dist/groupButtonRaw/groupButtonRaw.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { IFormFieldComponent } from "../formField/formField";
+import { IGroupButtonRawDefault, TGroupButtonRaw } from "./types";
+import "./groupButtonRaw.less";
+export interface IGroupButtonRaw extends IGroupButtonRawDefault {
+}
+export declare const GroupButtonRaw: React.FC<TGroupButtonRaw & IFormFieldComponent>;

package/dist/groupButtonRaw/groupButtonRaw.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupButtonRaw = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
+const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
+const groupButtonOption_1 = require("./components/groupButtonOption");
+const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+// TODO: tests
+const GroupButtonRaw = (props) => {
+    var _a;
+    const { fullWidth, groupData, className, isError, isReadOnly, controller, value: valueProp } = props;
+    const nameGroupId = (0, react_1.useId)();
+    const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-group-button");
+    const { name = nameGroupId, disabled, onChange = () => { }, onBlur = () => { }, value = "" } = (0, useFormFieldValues_1.useFormFieldValues)(controller, Object.assign(Object.assign({}, props), { value: valueProp || ((_a = groupData.find((el) => el.selected)) === null || _a === void 0 ? void 0 : _a.value) || (controller === null || controller === void 0 ? void 0 : controller.defaultValue) || "" }));
+    const onChangeHandlerMemo = (0, react_1.useCallback)(onChange, [onChange]);
+    const onBlurHandlerMemo = (0, react_1.useCallback)(onBlur, [onBlur]);
+    // TODO: do we need pass classes(GridClasses)
+    if (isReadOnly && value) {
+        return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: value.name, className: "zen-group-button__review" });
+    }
+    // TODO: is it a proper place for onBlur handler?
+    return (0, jsx_runtime_1.jsx)("div", { onBlur: onBlurHandlerMemo, className: (0, classNames_1.classNames)(["zen-group-button", isError ? "zen-group-button--error" : "", driveClasses || "", fullWidth ? "zen-group-button--full-width" : "", className || ""]), children: groupData.map((el, index) => (0, jsx_runtime_1.jsx)(groupButtonOption_1.GroupButtonOption, { nameGroup: name, labelName: el.name, value: el.value, disabled: !!disabled, checked: value === el.value, onChange: onChangeHandlerMemo }, `${name}_${index}_btngroup`)) });
+};
+exports.GroupButtonRaw = GroupButtonRaw;

package/dist/groupButtonRaw/types.d.ts

@@ -0,0 +1,26 @@
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IReactFormItemController, IZenComponentProps } from "../commonHelpers/zenComponent";
+interface IGroupButtons {
+    name: string;
+    value: string;
+    /**
+     * @deprecated
+     * @param selected - use **value** prop in `GroupButton` component instead
+     * */
+    selected?: boolean;
+}
+export interface IGroupButtonRawBase extends IZenComponentProps {
+    groupData: IGroupButtons[];
+    fullWidth?: boolean;
+    value?: string;
+}
+export interface IGroupButtonRawDefault extends IGroupButtonRawBase {
+    disabled?: boolean;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    name?: string;
+}
+export interface IGroupButtonRawForm extends IGroupButtonRawBase, IReactFormItemController {
+}
+export type TGroupButtonRaw = Exclusive<IGroupButtonRawDefault, IGroupButtonRawForm>;
+export {};

package/dist/groupButtonRaw/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/groupsFilter/groupsFilter.d.ts

@@ -1,24 +1,10 @@
-import React from "react";
-import { IGroupItem, IGroupsFilterTotalState } from "./groupsFilterInterfaces";
-import "./groupsFilter.less";
-import { IZenComponentProps } from "../commonHelpers/zenComponent";
-import { IChipsParent } from "../chip/chip";
-interface IGroupsFilterOptions {
+import { TFormFieldComponentProps } from "../formField/formField";
+import { IGroupsFilterRaw } from "../groupsFilterRaw/groupsFilterRaw";
+import { TGroupsFilterRaw } from "../groupsFilterRaw/types";
+type TFormFieldGroupsFilter = TFormFieldComponentProps<TGroupsFilterRaw>;
+export interface IGroupsFilter extends IGroupsFilterRaw {
 }
-export declare const groupsFilterTotalStateDefault: {
-    groups: import("./groupsFilterInterfaces").ILeafStateItem<import("..").IEntityWithId>;
-    sideWide: boolean;
-};
-export interface IGroupsFilter extends IZenComponentProps, IChipsParent {
-    initialFilterState?: IGroupsFilterTotalState;
-    dataLoader: () => Promise<IGroupItem[]>;
-    errorHandler: (e: Error) => void;
-    onChange: (state: IGroupsFilterTotalState) => void;
-    isWithColor?: boolean;
-    fullSize?: boolean;
-    options?: IGroupsFilterOptions;
-    listLimit?: number;
-}
-export declare const GroupsFilter: React.FC<IGroupsFilter>;
+export type TGroupsFilter = Omit<TFormFieldGroupsFilter, "counter" | "ref">;
+export declare const GroupsFilter: ({ ...props }: TGroupsFilter) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};