npm - @geotab/zenith - Versions diffs - 3.1.1-beta.0 → 3.1.1-beta.2 - Mend

@geotab/zenith 3.1.1-beta.0 → 3.1.1-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1221) hide show

package/dist/formStepperButtons/formStepperButtons.js CHANGED Viewed

@@ -9,8 +9,10 @@ const textIconButton_1 = require("../textIconButton/textIconButton");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const formStepper_1 = require("../formStepper/formStepper");
 const getCurrentIndex_1 = require("./utils/getCurrentIndex");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const FormStepperButtons = ({ onPrevious, onCancel, onContinue, onSubmit, current, setCurrent, steps, isNextDisabled, className = "" }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
+    const isMobile = (0, useMobile_1.useMobile)();
     const onPreviousHandler = (0, react_1.useCallback)(() => {
         const currIndex = (0, getCurrentIndex_1.getCurrentIndex)(steps, current);
         const prevStep = currIndex > 0 ? steps[currIndex - 1].id : null;
@@ -43,6 +45,6 @@ const FormStepperButtons = ({ onPrevious, onCancel, onContinue, onSubmit, curren
     }, [current, onContinue, setCurrent, steps]);
     const isFirstStep = steps[0].id === current;
     const isLastStep = steps[steps.length - 1].id === current || current === formStepper_1.STEPPER_LAST_STEP;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `zen-form-step-buttons ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-form-step-buttons__left", children: !isFirstStep && (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-form-step-buttons__previous", icon: iconChevronLeft_1.IconChevronLeft, type: "tertiary-black", onClick: onPreviousHandler, children: translate("Previous step") }) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-form-step-buttons__right", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-form-step-buttons__cancel", type: "secondary", onClick: onCancel, children: translate("Cancel") }), isLastStep ? ((0, jsx_runtime_1.jsx)(button_1.Button, { disabled: isNextDisabled, className: "zen-form-step-buttons__submit", type: "primary", onClick: onSubmit, children: translate("Submit") })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { disabled: isNextDisabled, className: "zen-form-step-buttons__continue", type: "primary", onClick: onContinueHandler, children: translate("Continue") }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `zen-form-step-buttons ${isMobile ? "zen-form-step-buttons--mobile" : ""} ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-form-step-buttons__left", children: !isFirstStep && (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-form-step-buttons__previous", icon: iconChevronLeft_1.IconChevronLeft, type: "tertiary-black", onClick: onPreviousHandler, children: translate("Previous step") }) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-form-step-buttons__right", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "zen-form-step-buttons__cancel", type: "secondary", onClick: onCancel, children: translate("Cancel") }), isLastStep ? ((0, jsx_runtime_1.jsx)(button_1.Button, { disabled: isNextDisabled, className: "zen-form-step-buttons__submit", type: "primary", onClick: onSubmit, children: translate("Submit") })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { disabled: isNextDisabled, className: "zen-form-step-buttons__continue", type: "primary", onClick: onContinueHandler, children: translate("Continue") }))] })] }));
 };
 exports.FormStepperButtons = FormStepperButtons;

package/dist/gridLayout/gridLayout.js CHANGED Viewed

@@ -6,12 +6,13 @@ const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useGridClasses_1 = require("./hooks/useGridClasses");
 const useStretch_1 = require("./hooks/useStretch");
+const gridLayoutProvider_1 = require("./utils/gridLayoutProvider");
 const GridLayout = ({ children, className = "", stretch = false }) => {
     const childrenArr = (0, react_1.useMemo)(() => [], []);
     const [childrenArrState, setChildrenArrState] = (0, react_1.useState)(childrenArr);
     const ref = (0, react_1.useRef)(null);
     (0, useGridClasses_1.useGridClasses)(children, childrenArr);
     (0, useStretch_1.useStretch)(stretch, childrenArr, ref, setChildrenArrState);
-    return (0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, classNames_1.classNames)(["zen-grid", className]), children: childrenArrState });
+    return (0, jsx_runtime_1.jsx)(gridLayoutProvider_1.GridLayoutProvider, { children: (0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, classNames_1.classNames)(["zen-grid", className]), children: childrenArrState }) });
 };
 exports.GridLayout = GridLayout;

package/dist/gridLayout/hooks/useGridClasses.d.ts CHANGED Viewed

@@ -20,4 +20,13 @@ export interface IGridItemFullState {
     mdStart?: number | undefined;
     smStart?: number | undefined;
 }
-export declare const useGridClasses: (children: React.ReactNode, childrenArr: React.ReactNode[]) => void;
+export interface IGridColsState {
+    desktop: number;
+    tablet: number;
+    mobile: number;
+}
+export declare const useGridClasses: (children: React.ReactNode, childrenArr: React.ReactNode[], colsState?: {
+    desktop: number;
+    tablet: number;
+    mobile: number;
+}) => void;

package/dist/gridLayout/hooks/useGridClasses.js CHANGED Viewed

@@ -14,6 +14,15 @@ const convertStateToClasses_1 = require("../utils/convertStateToClasses");
 const adjustGridState_1 = require("../utils/adjustGridState");
 const getGridClasses_1 = require("../utils/getGridClasses");
 const updateGridStateWithDefaultValues_1 = require("../utils/updateGridStateWithDefaultValues");
+const constants_1 = require("../utils/constants");
+const applyFitContent = (state, isFitContent) => {
+    if (isFitContent) {
+        delete state.lg;
+        delete state.md;
+        delete state.sm;
+    }
+};
+// TODO: move to utils
 const getEmptyGridItemState = () => ({
     gridLg: undefined,
     gridMd: undefined,
@@ -38,10 +47,16 @@ const getEmptyGridItemState = () => ({
     7. Adjust state (example: correct values to be in range of 1 to 12 for desktop)
     8. Fill state (to exclude empty values if possible)
     9. Adapt state (prevent overflowing, corner cases, etc.)
-    10. Convert state to className
+    10. Apply fit-content (remove grid width props, but keep position props)
+    11. Convert state to className
 */
-const useGridClasses = (children, childrenArr) => {
+const useGridClasses = (children, childrenArr, colsState = {
+    desktop: constants_1.DESKTOP_COLS_NUMBER,
+    tablet: constants_1.TABLET_COLS_NUMBER,
+    mobile: constants_1.MOBILE_COLS_NUMBER
+}) => {
     react_1.Children.forEach(children, (child, indx) => {
+        var _a;
         if (!child || typeof child === "string") {
             return;
         }
@@ -52,17 +67,21 @@ const useGridClasses = (children, childrenArr) => {
         const stateFromProps = getEmptyGridItemState();
         const stateFromClassNames = getEmptyGridItemState();
         const mergedState = getEmptyGridItemState();
-        (0, updateGridStateFromProps_1.updateGridStateFromProps)(stateFromProps, el);
-        (0, updateGridStateFromClassNames_1.updateGridStateFromClassNames)(stateFromClassNames, el);
+        const hasFitContentProp = !!el.props.gridFitContent;
+        const hasFitContentClass = (_a = el.props.className) === null || _a === void 0 ? void 0 : _a.includes(constants_1.FIT_CONTENT_CLASS);
+        const isFitContent = hasFitContentProp || hasFitContentClass;
+        (0, updateGridStateFromProps_1.updateGridStateFromProps)(stateFromProps, el, colsState);
+        (0, updateGridStateFromClassNames_1.updateGridStateFromClassNames)(stateFromClassNames, el, colsState);
         (0, mergeGridStates_1.mergeGridStates)(stateFromProps, stateFromClassNames, mergedState);
         (0, simplifyGridState_1.simplifyGridState)(mergedState);
         (0, updateGridStateWithDefaultValues_1.updateGridStateWithDefaultValues)(el, mergedState);
-        (0, adjustGridState_1.adjustGridState)(mergedState);
-        (0, fillGridState_1.fillGridState)(mergedState);
-        (0, adaptGridState_1.adaptGridState)(mergedState);
-        const gridClasses = (0, convertStateToClasses_1.convertStateToClasses)(mergedState);
+        (0, adjustGridState_1.adjustGridState)(mergedState, colsState);
+        (0, fillGridState_1.fillGridState)(mergedState, colsState);
+        (0, adaptGridState_1.adaptGridState)(mergedState, colsState);
+        applyFitContent(mergedState, hasFitContentProp);
+        const gridClasses = (0, convertStateToClasses_1.convertStateToClasses)(mergedState, true);
         const { restClasses } = (0, getGridClasses_1.getGridClasses)(el.props.className || "");
-        const itemClassName = (0, classNames_1.classNames)(["zen-grid__item", gridClasses.length ? "zen-grid__item--unset" : "", ...gridClasses, ...restClasses]);
+        const itemClassName = (0, classNames_1.classNames)(["zen-grid__item", gridClasses.length ? "zen-grid__item--unset" : "", ...gridClasses, ...restClasses, isFitContent ? constants_1.FIT_CONTENT_CLASS : ""]);
         const clone = (0, react_1.cloneElement)(el, {
             key: el.props.id || el.key || indx,
             className: itemClassName

package/dist/gridLayout/utils/adaptGridState.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { IGridItemResultState } from "../hooks/useGridClasses";
-export declare const adaptGridState: (gridState: IGridItemResultState) => void;
+import { IGridColsState, IGridItemResultState } from "../hooks/useGridClasses";
+export declare const adaptGridState: (gridState: IGridItemResultState, colState: IGridColsState) => void;

package/dist/gridLayout/utils/adaptGridState.js CHANGED Viewed

@@ -1,20 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.adaptGridState = void 0;
-const constants_1 = require("./constants");
-const adaptGridState = (gridState) => {
+const adaptGridState = (gridState, colState) => {
     const { lg, md, sm, lgStart, mdStart, smStart } = gridState;
     // Example:
     // 9 + 4 == 13 -> | 9 | 10 | 11 | 12 | -> the last column is 12 == 12 => OK
     // 9 + 5 == 14 -> | 9 | 10 | 11 | 12 | 13 | -> the last column is 13 > 12 => should be adapted to 12
-    if (lg && lgStart && (lg + lgStart - 1) > constants_1.DESKTOP_COLS_NUMBER) {
-        gridState.lg = constants_1.DESKTOP_COLS_NUMBER - lgStart + 1;
+    if (lg && lgStart && (lg + lgStart - 1) > colState.desktop) {
+        gridState.lg = colState.desktop - lgStart + 1;
     }
-    if (md && mdStart && (md + mdStart - 1) > constants_1.TABLET_COLS_NUMBER) {
-        gridState.md = constants_1.TABLET_COLS_NUMBER - mdStart + 1;
+    if (md && mdStart && (md + mdStart - 1) > colState.tablet) {
+        gridState.md = colState.tablet - mdStart + 1;
     }
-    if (sm && smStart && (sm + smStart - 1) > constants_1.MOBILE_COLS_NUMBER) {
-        gridState.sm = constants_1.MOBILE_COLS_NUMBER - smStart + 1;
+    if (sm && smStart && (sm + smStart - 1) > colState.mobile) {
+        gridState.sm = colState.mobile - smStart + 1;
     }
 };
 exports.adaptGridState = adaptGridState;

package/dist/gridLayout/utils/adjustGridState.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { IGridItemResultState } from "../hooks/useGridClasses";
-export declare const adjustGridState: (gridState: IGridItemResultState) => void;
+import { IGridColsState, IGridItemResultState } from "../hooks/useGridClasses";
+export declare const adjustGridState: (gridState: IGridItemResultState, colState: IGridColsState) => void;

package/dist/gridLayout/utils/adjustGridState.js CHANGED Viewed

@@ -1,26 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.adjustGridState = void 0;
-const constants_1 = require("./constants");
 // eslint-disable-next-line complexity
-const adjustGridState = (gridState) => {
-    if (gridState.lg !== undefined && (gridState.lg < 1 || gridState.lg > constants_1.DESKTOP_COLS_NUMBER)) {
-        gridState.lg = gridState.lg > constants_1.DESKTOP_COLS_NUMBER ? constants_1.DESKTOP_COLS_NUMBER : gridState.lg < 1 ? undefined : gridState.lg;
+const adjustGridState = (gridState, colState) => {
+    if (gridState.lg !== undefined && (gridState.lg < 1 || gridState.lg > colState.desktop)) {
+        gridState.lg = gridState.lg > colState.desktop ? colState.desktop : gridState.lg < 1 ? undefined : gridState.lg;
     }
-    if (gridState.md !== undefined && (gridState.md < 1 || gridState.md > constants_1.TABLET_COLS_NUMBER)) {
-        gridState.md = gridState.md > constants_1.TABLET_COLS_NUMBER ? constants_1.TABLET_COLS_NUMBER : gridState.md < 1 ? undefined : gridState.md;
+    if (gridState.md !== undefined && (gridState.md < 1 || gridState.md > colState.tablet)) {
+        gridState.md = gridState.md > colState.tablet ? colState.tablet : gridState.md < 1 ? undefined : gridState.md;
     }
-    if (gridState.sm !== undefined && (gridState.sm < 1 || gridState.sm > constants_1.MOBILE_COLS_NUMBER)) {
-        gridState.sm = gridState.sm > constants_1.MOBILE_COLS_NUMBER ? constants_1.MOBILE_COLS_NUMBER : gridState.sm < 1 ? undefined : gridState.sm;
+    if (gridState.sm !== undefined && (gridState.sm < 1 || gridState.sm > colState.mobile)) {
+        gridState.sm = gridState.sm > colState.mobile ? colState.mobile : gridState.sm < 1 ? undefined : gridState.sm;
     }
-    if (gridState.lgStart !== undefined && (gridState.lgStart < 1 || gridState.lgStart > constants_1.DESKTOP_COLS_NUMBER)) {
-        gridState.lgStart = gridState.lgStart > constants_1.DESKTOP_COLS_NUMBER ? constants_1.DESKTOP_COLS_NUMBER : gridState.lgStart < 1 ? undefined : gridState.lgStart;
+    if (gridState.lgStart !== undefined && (gridState.lgStart < 1 || gridState.lgStart > colState.desktop)) {
+        gridState.lgStart = gridState.lgStart > colState.desktop ? colState.desktop : gridState.lgStart < 1 ? undefined : gridState.lgStart;
     }
-    if (gridState.mdStart !== undefined && (gridState.mdStart < 1 || gridState.mdStart > constants_1.TABLET_COLS_NUMBER)) {
-        gridState.mdStart = gridState.mdStart > constants_1.TABLET_COLS_NUMBER ? constants_1.TABLET_COLS_NUMBER : gridState.mdStart < 1 ? undefined : gridState.mdStart;
+    if (gridState.mdStart !== undefined && (gridState.mdStart < 1 || gridState.mdStart > colState.tablet)) {
+        gridState.mdStart = gridState.mdStart > colState.tablet ? colState.tablet : gridState.mdStart < 1 ? undefined : gridState.mdStart;
     }
-    if (gridState.smStart !== undefined && (gridState.smStart < 1 || gridState.smStart > constants_1.MOBILE_COLS_NUMBER)) {
-        gridState.smStart = gridState.smStart > constants_1.MOBILE_COLS_NUMBER ? constants_1.MOBILE_COLS_NUMBER : gridState.smStart < 1 ? undefined : gridState.smStart;
+    if (gridState.smStart !== undefined && (gridState.smStart < 1 || gridState.smStart > colState.mobile)) {
+        gridState.smStart = gridState.smStart > colState.mobile ? colState.mobile : gridState.smStart < 1 ? undefined : gridState.smStart;
     }
 };
 exports.adjustGridState = adjustGridState;

package/dist/gridLayout/utils/constants.d.ts CHANGED Viewed

@@ -23,3 +23,4 @@ export declare const MOBILE_UNSET_CLASS = "zen-sm-unset";
 export declare const DESKTOP_START_UNSET_CLASS = "zen-lg-start-unset";
 export declare const TABLET_START_UNSET_CLASS = "zen-md-start-unset";
 export declare const MOBILE_START_UNSET_CLASS = "zen-sm-start-unset";
+export declare const FIT_CONTENT_CLASS = "zen-grid-item--fit-content";

package/dist/gridLayout/utils/constants.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MOBILE_START_UNSET_CLASS = exports.TABLET_START_UNSET_CLASS = exports.DESKTOP_START_UNSET_CLASS = exports.MOBILE_UNSET_CLASS = exports.TABLET_UNSET_CLASS = exports.DESKTOP_UNSET_CLASS = exports.MOBILE_COLS_NUMBER = exports.TABLET_COLS_NUMBER = exports.DESKTOP_COLS_NUMBER = exports.MOBILE_PATTERN = exports.MOBILE_START_PATTERN = exports.TABLET_START_PATTERN = exports.TABLET_PATTERN = exports.DESKTOP_START_PATTERN = exports.DESKTOP_PATTERN = exports.GRID_COL_START_PATTERN = exports.GRID_COL_PATTERN = exports.GRID_COL_START_PREFIX = exports.GRID_COL_PREFIX = exports.MOBILE_START_PREFIX = exports.TABLET_START_PREFIX = exports.DESKTOP_START_PREFIX = exports.MOBILE_PREFIX = exports.TABLET_PREFIX = exports.DESKTOP_PREFIX = void 0;
+exports.FIT_CONTENT_CLASS = exports.MOBILE_START_UNSET_CLASS = exports.TABLET_START_UNSET_CLASS = exports.DESKTOP_START_UNSET_CLASS = exports.MOBILE_UNSET_CLASS = exports.TABLET_UNSET_CLASS = exports.DESKTOP_UNSET_CLASS = exports.MOBILE_COLS_NUMBER = exports.TABLET_COLS_NUMBER = exports.DESKTOP_COLS_NUMBER = exports.MOBILE_PATTERN = exports.MOBILE_START_PATTERN = exports.TABLET_START_PATTERN = exports.TABLET_PATTERN = exports.DESKTOP_START_PATTERN = exports.DESKTOP_PATTERN = exports.GRID_COL_START_PATTERN = exports.GRID_COL_PATTERN = exports.GRID_COL_START_PREFIX = exports.GRID_COL_PREFIX = exports.MOBILE_START_PREFIX = exports.TABLET_START_PREFIX = exports.DESKTOP_START_PREFIX = exports.MOBILE_PREFIX = exports.TABLET_PREFIX = exports.DESKTOP_PREFIX = void 0;
 exports.DESKTOP_PREFIX = "zen-lg-";
 exports.TABLET_PREFIX = "zen-md-";
 exports.MOBILE_PREFIX = "zen-sm-";
@@ -26,3 +26,4 @@ exports.MOBILE_UNSET_CLASS = `${exports.MOBILE_PREFIX}unset`;
 exports.DESKTOP_START_UNSET_CLASS = `${exports.DESKTOP_START_PREFIX}unset`;
 exports.TABLET_START_UNSET_CLASS = `${exports.TABLET_START_PREFIX}unset`;
 exports.MOBILE_START_UNSET_CLASS = `${exports.MOBILE_START_PREFIX}unset`;
+exports.FIT_CONTENT_CLASS = "zen-grid-item--fit-content";

package/dist/gridLayout/utils/convertClassesToState.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { IGridItemResultState } from "../hooks/useGridClasses";
2	+ export declare const convertClassesToState: (className: string) => Partial<IGridItemResultState>;

package/dist/gridLayout/utils/convertClassesToState.js ADDED Viewed

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertClassesToState = void 0;
+const constants_1 = require("./constants");
+const convertClassesToState = (className) => {
+    const classes = className.split(" ");
+    const state = {};
+    classes.forEach((cls) => {
+        if (cls.startsWith(constants_1.DESKTOP_START_PREFIX) && !state.lgStart) {
+            const val = cls.replace(constants_1.DESKTOP_START_PREFIX, "");
+            if (!isNaN(Number(val))) {
+                state.lgStart = parseInt(val, 10);
+            }
+        }
+        if (cls.startsWith(constants_1.DESKTOP_PREFIX) && !state.lg) {
+            const val = cls.replace(constants_1.DESKTOP_PREFIX, "");
+            if (!isNaN(Number(val))) {
+                state.lg = parseInt(val, 10);
+            }
+        }
+        if (cls.startsWith(constants_1.TABLET_START_PREFIX) && !state.mdStart) {
+            const val = cls.replace(constants_1.TABLET_START_PREFIX, "");
+            if (!isNaN(Number(val))) {
+                state.mdStart = parseInt(val, 10);
+            }
+        }
+        if (cls.startsWith(constants_1.TABLET_PREFIX) && !state.md) {
+            const val = cls.replace(constants_1.TABLET_PREFIX, "");
+            if (!isNaN(Number(val))) {
+                state.md = parseInt(val, 10);
+            }
+        }
+        if (cls.startsWith(constants_1.MOBILE_START_PREFIX) && !state.smStart) {
+            const val = cls.replace(constants_1.MOBILE_START_PREFIX, "");
+            if (!isNaN(Number(val))) {
+                state.smStart = parseInt(val, 10);
+            }
+        }
+        if (cls.startsWith(constants_1.MOBILE_PREFIX) && !state.sm) {
+            const val = cls.replace(constants_1.MOBILE_PREFIX, "");
+            if (!isNaN(Number(val))) {
+                state.sm = parseInt(val, 10);
+            }
+        }
+    });
+    return state;
+};
+exports.convertClassesToState = convertClassesToState;

package/dist/gridLayout/utils/convertStateToClasses.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 import { IGridItemResultState } from "../hooks/useGridClasses";
-export declare const convertStateToClasses: (gridState: IGridItemResultState) => string[];
+export declare function convertStateToClasses(gridState: Partial<IGridItemResultState>, returnAsArray?: false): string;
+export declare function convertStateToClasses(gridState: Partial<IGridItemResultState>, returnAsArray?: true): string[];

package/dist/gridLayout/utils/convertStateToClasses.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.convertStateToClasses = void 0;
 const constants_1 = require("./constants");
-const convertStateToClasses = (gridState) => {
+function convertStateToClasses(gridState, returnAsArray) {
     const { lg, md, sm, lgStart, mdStart, smStart } = gridState;
     const classes = [];
     if (lg) {
@@ -23,6 +23,6 @@ const convertStateToClasses = (gridState) => {
     if (smStart) {
         classes.push(`${constants_1.MOBILE_START_PREFIX}${smStart}`);
     }
-    return classes;
-};
+    return returnAsArray ? classes : classes.join(" ");
+}
 exports.convertStateToClasses = convertStateToClasses;

package/dist/gridLayout/utils/fillGridState.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { IGridItemResultState } from "../hooks/useGridClasses";
-export declare const fillGridState: (gridState: IGridItemResultState) => void;
+import { IGridColsState, IGridItemResultState } from "../hooks/useGridClasses";
+export declare const fillGridState: (gridState: IGridItemResultState, colsState: IGridColsState) => void;

package/dist/gridLayout/utils/fillGridState.js CHANGED Viewed

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fillGridState = void 0;
-const constants_1 = require("./constants");
 // eslint-disable-next-line complexity
-const fillGridState = (gridState) => {
+const fillGridState = (gridState, colsState) => {
     const { lg, md, sm } = gridState;
     // If no values provided
     if (!lg && !md && !sm) {
@@ -15,13 +14,13 @@ const fillGridState = (gridState) => {
     }
     // Only one value provided
     if (lg && !md && !sm) {
-        gridState.md = lg > constants_1.TABLET_COLS_NUMBER ? constants_1.TABLET_COLS_NUMBER : lg;
-        gridState.sm = lg > constants_1.MOBILE_COLS_NUMBER ? constants_1.MOBILE_COLS_NUMBER : lg;
+        gridState.md = lg > colsState.tablet ? colsState.tablet : lg;
+        gridState.sm = lg > colsState.mobile ? colsState.mobile : lg;
         return;
     }
     if (md && !lg && !sm) {
         gridState.lg = md;
-        gridState.sm = md > constants_1.MOBILE_COLS_NUMBER ? constants_1.MOBILE_COLS_NUMBER : md;
+        gridState.sm = md > colsState.mobile ? colsState.mobile : md;
         return;
     }
     if (sm && !lg && !md) {
@@ -31,11 +30,11 @@ const fillGridState = (gridState) => {
     }
     // If two values provided
     if (lg && md && !sm) {
-        gridState.sm = md > constants_1.MOBILE_COLS_NUMBER ? constants_1.MOBILE_COLS_NUMBER : md;
+        gridState.sm = md > colsState.mobile ? colsState.mobile : md;
         return;
     }
     if (lg && sm && !md) {
-        gridState.md = lg > constants_1.TABLET_COLS_NUMBER ? constants_1.TABLET_COLS_NUMBER : lg;
+        gridState.md = lg > colsState.tablet ? colsState.tablet : lg;
         return;
     }
     if (md && sm && !lg) {

package/dist/gridLayout/utils/filterGridProps.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { IZenGridItem } from "../../commonHelpers/zenComponent";
2	+ export declare const filterGridProps: <T extends IZenGridItem>(props: T) => Omit<T, "grid" \| "gridStart" \| "gridLgStart" \| "gridLg" \| "gridMdStart" \| "gridMd" \| "gridSmStart" \| "gridSm" \| "gridFitContent">;

package/dist/gridLayout/utils/filterGridProps.js ADDED Viewed

@@ -0,0 +1,19 @@
+"use strict";
+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.filterGridProps = void 0;
+const filterGridProps = (props) => {
+    const { grid, gridLg, gridLgStart, gridFitContent, gridMd, gridMdStart, gridSm, gridSmStart, gridStart } = props, rest = __rest(props, ["grid", "gridLg", "gridLgStart", "gridFitContent", "gridMd", "gridMdStart", "gridSm", "gridSmStart", "gridStart"]);
+    return rest;
+};
+exports.filterGridProps = filterGridProps;

package/dist/gridLayout/utils/getAllowedComponent.js CHANGED Viewed

@@ -11,6 +11,10 @@ const isGridItem_1 = require("./isGridItem");
 const bannerUpsell_1 = require("../../banner/bannerUpsell");
 const formStepper_1 = require("../../formStepper/formStepper");
 const formStepperButtons_1 = require("../../formStepperButtons/formStepperButtons");
+const formGroup_1 = require("../../formGroup/formGroup");
+const divider_1 = require("../../divider/divider");
+const button_1 = require("../../button/button");
+const textIconButton_1 = require("../../textIconButton/textIconButton");
 exports.DEFAULT_SUPPORTED_COMPONENTS = [
     // Data
     table_1.Table,
@@ -24,8 +28,18 @@ exports.DEFAULT_SUPPORTED_COMPONENTS = [
     // Form
     formStepper_1.FormStepper,
     formStepperButtons_1.FormStepperButtons,
+    // TODO: do we need it?
+    // FormSectionInner,
+    // AdditionalSection,
+    formGroup_1.FormGroup,
+    // ...TODO: import FormSection components
+    // Form helpers,
+    divider_1.Divider,
     // Inner
-    cardContainer_1.CardContainer
+    cardContainer_1.CardContainer,
+    // TODO: update list of supported components
+    button_1.Button,
+    textIconButton_1.TextIconButton
 ];
 const getAllowedComponent = (child) => {
     // for React common components ("div", "span", etc.)

package/dist/gridLayout/utils/getGridPositionClasses.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const getGridPositionClasses: (className: string) => string;

package/dist/gridLayout/utils/getGridPositionClasses.js ADDED Viewed

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGridPositionClasses = void 0;
+const constants_1 = require("./constants");
+const positionPrefixes = [
+    constants_1.DESKTOP_START_PREFIX,
+    constants_1.TABLET_START_PREFIX,
+    constants_1.MOBILE_START_PREFIX,
+    constants_1.GRID_COL_START_PREFIX
+];
+const getGridPositionClasses = (className) => className.split(" ").filter((classItem) => positionPrefixes.some((prefix) => classItem.startsWith(prefix))).join(" ");
+exports.getGridPositionClasses = getGridPositionClasses;

package/dist/gridLayout/utils/getGridWidthClasses.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const getGridWidthClasses: (className: string) => string;

package/dist/gridLayout/utils/getGridWidthClasses.js ADDED Viewed

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGridWidthClasses = void 0;
+const constants_1 = require("./constants");
+const widthPrefixes = [
+    constants_1.DESKTOP_PREFIX,
+    constants_1.TABLET_PREFIX,
+    constants_1.MOBILE_PREFIX,
+    constants_1.GRID_COL_PREFIX
+];
+const positionPrefixes = [
+    constants_1.DESKTOP_START_PREFIX,
+    constants_1.TABLET_START_PREFIX,
+    constants_1.MOBILE_START_PREFIX,
+    constants_1.GRID_COL_START_PREFIX
+];
+const getGridWidthClasses = (className) => className
+    .split(" ").filter((cls) => widthPrefixes.some((prefix) => cls.startsWith(prefix)) && !positionPrefixes.some((prefix) => cls.startsWith(prefix))).join(" ");
+exports.getGridWidthClasses = getGridWidthClasses;

package/dist/gridLayout/utils/gridLayoutProvider.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export type TGridScreen = "mobile" | "tablet" | "desktop";
+export interface IGridLayoutContext extends React.PropsWithChildren {
+    screen: TGridScreen;
+}
+export declare const GridLayoutContext: import("react").Context<IGridLayoutContext>;
+export interface IGridLayoutProviderProps extends React.PropsWithChildren {
+}
+export declare const GridLayoutProvider: React.FC<IGridLayoutProviderProps>;

package/dist/gridLayout/utils/gridLayoutProvider.js ADDED Viewed

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridLayoutProvider = exports.GridLayoutContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
+const useTablet_1 = require("../hooks/useTablet");
+exports.GridLayoutContext = (0, react_1.createContext)({
+    screen: "desktop"
+});
+const GridLayoutProvider = ({ children }) => {
+    const isMobile = (0, useMobile_1.useMobile)();
+    const isTablet = (0, useTablet_1.useTablet)();
+    return (0, jsx_runtime_1.jsx)(exports.GridLayoutContext.Provider, { value: { screen: isMobile ? "mobile" : isTablet ? "tablet" : "desktop" }, children: children });
+};
+exports.GridLayoutProvider = GridLayoutProvider;

package/dist/gridLayout/utils/hasGridClasses.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { ReactElement } from "react";
2	+ export declare const hasGridClasses: (element: ReactElement) => boolean;

package/dist/gridLayout/utils/hasGridClasses.js ADDED Viewed

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasGridClasses = void 0;
+const constants_1 = require("./constants");
+const gridPrefixes = [
+    constants_1.DESKTOP_PREFIX,
+    constants_1.TABLET_PREFIX,
+    constants_1.MOBILE_PREFIX,
+    constants_1.GRID_COL_PREFIX
+];
+const hasGridClasses = (element) => !!element.props.className && gridPrefixes.some((prefix) => { var _a; return ((_a = element.props.className) === null || _a === void 0 ? void 0 : _a.indexOf(prefix)) !== -1; });
+exports.hasGridClasses = hasGridClasses;

package/dist/gridLayout/utils/isGridItem.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import { ReactElement } from "react";
 import { IZenGridItem } from "../../commonHelpers/zenComponent";
-export declare const isGridItem: (element: ReactElement) => element is ReactElement<IZenGridItem, string | import("react").JSXElementConstructor<any>>;
+export declare const isGridItem: (element?: ReactElement) => element is ReactElement<IZenGridItem, string | import("react").JSXElementConstructor<any>>;

package/dist/gridLayout/utils/isGridItem.js CHANGED Viewed

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isGridItem = void 0;
 const isGridItem = (element) => {
+    if (!(element === null || element === void 0 ? void 0 : element.props)) {
+        return false;
+    }
     const elProps = element.props;
     return elProps.gridLg !== undefined
         || elProps.gridMd !== undefined

package/dist/gridLayout/utils/removeSameTypeClasses.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const removeSameTypeClasses: (classNames: string) => string;

package/dist/gridLayout/utils/removeSameTypeClasses.js ADDED Viewed

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeSameTypeClasses = void 0;
+const constants_1 = require("./constants");
+const isDesktopClassWidth = (className) => className.startsWith(constants_1.DESKTOP_PREFIX) && !className.startsWith(constants_1.DESKTOP_START_PREFIX);
+const isDesktopPositionClass = (className) => className.startsWith(constants_1.DESKTOP_START_PREFIX);
+const isTabletClassWidth = (className) => className.startsWith(constants_1.TABLET_PREFIX) && !className.startsWith(constants_1.TABLET_START_PREFIX);
+const isTabletPositionClass = (className) => className.startsWith(constants_1.TABLET_START_PREFIX);
+const isMobileClassWidth = (className) => className.startsWith(constants_1.MOBILE_PREFIX) && !className.startsWith(constants_1.MOBILE_START_PREFIX);
+const isMobilePositionClass = (className) => className.startsWith(constants_1.MOBILE_START_PREFIX);
+const removeSameTypeClasses = (classNames) => {
+    const result = [];
+    const classArray = classNames.split(" ");
+    classArray.forEach((className) => {
+        if (isDesktopClassWidth(className) && !result.some(isDesktopClassWidth)) {
+            result.push(className);
+            return;
+        }
+        if (isDesktopPositionClass(className) && !result.some(isDesktopPositionClass)) {
+            result.push(className);
+            return;
+        }
+        if (isTabletClassWidth(className) && !result.some(isTabletClassWidth)) {
+            result.push(className);
+            return;
+        }
+        if (isTabletPositionClass(className) && !result.some(isTabletPositionClass)) {
+            result.push(className);
+            return;
+        }
+        if (isMobileClassWidth(className) && !result.some(isMobileClassWidth)) {
+            result.push(className);
+            return;
+        }
+        if (isMobilePositionClass(className) && !result.some(isMobilePositionClass)) {
+            result.push(className);
+            return;
+        }
+    });
+    return result.join(" ");
+};
+exports.removeSameTypeClasses = removeSameTypeClasses;

package/dist/gridLayout/utils/updateGridStateFromClassNames.d.ts CHANGED Viewed

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