@geotab/zenith 2.0.0 → 3.0.0-beta.1

package/dist/selectRaw/selectRaw.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import { RefCallback, RefObject } from "react";
 import { IListState } from "../selectList/selectList";
 import { ISelectListItem } from "../selectList/selectListItem";
 import "./selectRaw.less";
@@ -13,13 +13,9 @@ export interface ISelectRaw extends IZenComponentProps {
     value?: string;
     classNamePopup?: string;
     forceSelection?: boolean;
-    /**
-    * @deprecated
-    * @param maxPopupHeight - will be removed in the next major release
-    */
-    maxPopupHeight?: number;
     isError?: boolean;
     onChange?: (id: string | undefined) => void;
+    ref?: RefObject<HTMLDivElement | null> | RefCallback<HTMLDivElement | null>;
 }
 export interface ISelectStateRaw extends IListState {
     expanded: boolean;
@@ -28,4 +24,7 @@ export interface ISelectStatePropsRaw {
     items: ISelectListItem[];
     value?: string;
 }
-export declare const SelectRaw: React.ForwardRefExoticComponent<ISelectRaw & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectRaw: {
+    (props: ISelectRaw): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/selectRaw/selectRaw.js

@@ -65,11 +65,11 @@ const openListActionGetters = {
     "default": (items, e) => ({ type: selectList_actionTypes_1.ListAction.SearchItem, payload: { items, key: e.key } })
 };
 const PassiveSelectListComp = react_1.default.memo(selectList_1.PassiveSelectList);
-exports.SelectRaw = react_1.default.forwardRef((props, selectRef) => {
+const SelectRaw = (props) => {
     var _a;
-    const { id, title, pageSize = 10, placeholder, disabled, className, classNamePopup, items: outerItems, value: outerValue, isError, onChange, forceSelection = false } = props;
+    const { id, title, pageSize = 10, placeholder, disabled, className, classNamePopup, items: outerItems, value: outerValue, isError, onChange, forceSelection = false, ref: selectRef } = props;
     const items = react_1.default.useMemo(() => outerItems, [outerItems]);
-    const [state, dispatchState] = react_1.default.useReducer(select_reducer_1.selectReducer, { items, value: outerValue }, select_helpers_1.getSelectInitialState);
+    const [state, dispatchState] = (0, react_1.useReducer)(select_reducer_1.selectReducer, { items, value: outerValue }, select_helpers_1.getSelectInitialState);
     const value = (0, select_helpers_1.getSelectValue)(state.itemsState, items);
     const innerTriggerRef = react_1.default.useRef(null);
     const ref = react_1.default.useRef(null);
@@ -153,5 +153,6 @@ exports.SelectRaw = react_1.default.forwardRef((props, selectRef) => {
                     isError ? "zen-text-input--error" : "",
                     "zen-caption zen-caption--full-width"
                 ]), role: "combobox", tabIndex: disabled ? -1 : 0, "aria-activedescendant": (isOpen && state.activeIndex > -1) ? items[state.activeIndex].id : undefined, onClick: onPopupVisibilityChange, onKeyDown: onTriggerKeyDown, onBlur: onBlur, ref: innerTriggerRef, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-select__text", "zen-ellipsis", "zen-caption__content", !value ? "zen-select__text--placeholder" : ""]), children: text }), (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { className: "zen-select__arrow zen-caption__post-content", size: "large" })] }), (0, jsx_runtime_1.jsx)(absolute_1.Absolute, { recalculateOnScroll: true, className: (0, classNames_1.classNames)(["zen-select__popup", classNamePopup || ""]), triggerRef: innerTriggerRef, id: popupId, isOpen: isOpen, onOpenChange: onPopupVisibilityChange, children: (0, jsx_runtime_1.jsx)(PassiveSelectListComp, { id: listId, title: title, disabled: disabled, multiselect: false, items: items.map(item => (Object.assign(Object.assign({}, item), { state: value === item.id ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off }))), value: new Map(items.map(item => ([item.id, value === item.id ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off]))), activeIndex: state.activeIndex, size: pageSize, onChangeItem: onChangeItem, style: { width, minWidth, maxWidth } }) })] });
-});
+};
+exports.SelectRaw = SelectRaw;
 exports.SelectRaw.displayName = "SelectRaw";

package/dist/sidePanel/sidePanel.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import "./sidePanel.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { RefObject } from "react";
 import { ISidePanelCell } from "./sidePanelCell/sidePanelCell";
 interface ISidePanelComponents {
     Cell: React.FC<ISidePanelCell>;
@@ -16,7 +16,7 @@ export declare const CUSTOM_POPUP_COMPONENT_CLASSNAME = "zen-custom-component-po
 export interface ISidePanel extends IZenComponentProps {
     panelPosition?: TPanelPosition;
     id?: string;
-    triggerRef: React.RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
     isOpen: boolean;
     label: string;
     useTrapFocusWithTrigger?: boolean;

package/dist/sidePanel/sidePanelCell/sidePanelCell.d.ts

@@ -3,7 +3,7 @@ import "./sidePanelCell.less";
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 export interface ISidePanelCell extends IZenComponentProps {
     title: string;
-    footer?: JSX.Element;
+    footer?: React.JSX.Element;
     withoutSidePaddings?: boolean;
     role?: string;
     labelledBy?: string;

package/dist/sortControl/sortControl.d.ts

@@ -9,11 +9,6 @@ export declare enum SortDirections {
 export interface ISortControl extends IZenComponentProps {
     id?: string;
     buttonText?: string;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     disabled?: boolean;
     sortDirection?: SortDirections;
     directionIcon?: boolean;

package/dist/stepper/stepper.d.ts

@@ -1,8 +1,10 @@
-import React from "react";
 import { TFormFieldComponentProps } from "../formField/formField";
 import { IStepperRaw } from "../stepperRaw/stepperRaw";
 type TFormInput = TFormFieldComponentProps<IStepperRaw>;
 export interface IStepperInput extends Omit<TFormInput, "counter" | "maxLength"> {
 }
-export declare const Stepper: React.ForwardRefExoticComponent<Omit<IStepperInput, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Stepper: {
+    ({ value, ...props }: TFormInput): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/stepper/stepper.js

@@ -10,18 +10,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stepper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
 const formField_1 = require("../formField/formField");
 const stepperRaw_1 = require("../stepperRaw/stepperRaw");
 const FormInput = (0, formField_1.FormField)(stepperRaw_1.StepperRaw);
-exports.Stepper = react_1.default.forwardRef((_a, ref) => {
+const Stepper = (_a) => {
     var { value } = _a, props = __rest(_a, ["value"]);
-    return (0, jsx_runtime_1.jsx)(FormInput, Object.assign({}, props, { ref: ref, value: value }));
-});
+    return (0, jsx_runtime_1.jsx)(FormInput, Object.assign({}, props, { value: value }));
+};
+exports.Stepper = Stepper;
 exports.Stepper.displayName = "Stepper";

package/dist/stepperRaw/stepperRaw.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 import { IZenIdComponentProps } from "../commonHelpers/zenComponent";
 import "./stepperRaw.less";
 export interface IStepperRaw extends Partial<Omit<IZenIdComponentProps, "children">> {
@@ -14,8 +14,9 @@ export interface IStepperRaw extends Partial<Omit<IZenIdComponentProps, "childre
     readonly?: boolean;
     placeholder?: string;
     ariaLabel?: string;
+    ref?: RefObject<HTMLInputElement | null>;
 }
 export declare const INPUT_DEFAULT_WIDTH = 47;
 export declare const INPUT_DEFAULT_WIDTH_DRIVE = 56;
-export declare const StepperRaw: import("react").ForwardRefExoticComponent<IStepperRaw & import("react").RefAttributes<HTMLInputElement>>;
+export declare const StepperRaw: ({ min, max, step, width, disabled, readonly, value, isError, onChange, placeholder, className, maxLength, id, ariaLabel, ref }: IStepperRaw) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];

package/dist/stepperRaw/stepperRaw.js

@@ -20,9 +20,7 @@ const onBeforeInput_1 = require("./utils/onBeforeInput");
 // according to design
 exports.INPUT_DEFAULT_WIDTH = 47;
 exports.INPUT_DEFAULT_WIDTH_DRIVE = 56;
-exports.StepperRaw = (0, react_1.forwardRef)(
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function InnerStepper({ min = -Infinity, max = +Infinity, step = 1, width, disabled = false, readonly = false, value = "", isError, onChange, placeholder = "", className = "", maxLength, id, ariaLabel }, ref) {
+const StepperRaw = ({ min = -Infinity, max = +Infinity, step = 1, width, disabled = false, readonly = false, value = "", isError, onChange, placeholder = "", className = "", maxLength, id, ariaLabel, ref }) => {
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-stepper-field");
     const driveInputClass = (0, useDriveClassName_1.useDriveClassName)("zen-text-input");
     const isDrive = (0, useDrive_1.useDrive)();
@@ -54,7 +52,8 @@ function InnerStepper({ min = -Infinity, max = +Infinity, step = 1, width, disab
                                 onChange(String((0, getDecreasedValue_1.getDecreasedValue)(validValue, validStep, min)));
                                 (_a = currRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                             }, "aria-label": translate("Decrease value") })] })] }) });
-});
+};
+exports.StepperRaw = StepperRaw;
 exports.TRANSLATIONS = [
     "Decrease value",
     "Increase value"

package/dist/summaryTile/summaryTile.d.ts

@@ -28,11 +28,6 @@ export interface ISummaryTile extends IZenComponentProps, IZenGridItem {
     tooltipText?: React.ReactNode;
     tooltipAlignment?: TAlignment;
     tooltipSize?: TooltipSize;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 export declare const SummaryTileDisplayName = "SummaryTile";
 export declare const SummaryTile: React.FC<ISummaryTile>;

package/dist/summaryTile/summaryTileTrigger.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { IIcon } from "../icons/icon";
+import { RefObject } from "react";
 export interface ISummaryTileTrigger {
     icon: React.FC<IIcon>;
+    ref?: RefObject<HTMLDivElement | null>;
 }
-export declare const SummaryTileTrigger: React.ForwardRefExoticComponent<ISummaryTileTrigger & React.RefAttributes<HTMLDivElement>>;
+export declare const SummaryTileTrigger: ({ icon, ref, ...restProps }: ISummaryTileTrigger) => import("react/jsx-runtime").JSX.Element;

package/dist/summaryTile/summaryTileTrigger.js

@@ -37,10 +37,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SummaryTileTrigger = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
-exports.SummaryTileTrigger = React.forwardRef(function summaryTileTrigger(_a, ref) {
-    var { icon } = _a, restProps = __rest(_a, ["icon"]);
+const SummaryTileTrigger = (_a) => {
+    var { icon, ref } = _a, restProps = __rest(_a, ["icon", "ref"]);
     return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "zen-summary-tile__trigger", ref: ref }, restProps, { children: React.createElement(icon, {
             className: "zen-summary-tile__title-icon",
             size: "large"
         }) }));
-});
+};
+exports.SummaryTileTrigger = SummaryTileTrigger;

package/dist/table/actions/actionsMenu.d.ts

@@ -3,9 +3,9 @@ import { IEntityWithId } from "../../commonHelpers/entity";
 interface IActionsMenuProps<T extends object> {
     entity: T;
     isNested: boolean;
-    render?: (entity: T, isNested: boolean) => JSX.Element;
-    renderAsync?: (entity: T, isNested: boolean) => PromiseLike<JSX.Element>;
-    primaryActions?: JSX.Element;
+    render?: (entity: T, isNested: boolean) => React.JSX.Element;
+    renderAsync?: (entity: T, isNested: boolean) => PromiseLike<React.JSX.Element>;
+    primaryActions?: React.JSX.Element;
 }
 export declare const ActionsMenu: <T extends IEntityWithId>({ entity, isNested, render, renderAsync, primaryActions }: IActionsMenuProps<T>) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/table/actions/useActions.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IActionWithId } from "../../dataGrid/columns/actionsColumn/actionsColumn";
 import { IListColumn } from "../table";
 import { IRowEntity } from "../../dataGrid/row/row";
@@ -10,7 +9,7 @@ export declare const useActions: <T extends IRowEntity<N>, N extends IEntityWith
     primaryActions?: undefined;
 } | {
     columnsWithActions: IListColumn<T, N>[];
-    actions: IActionWithId<T> | ((entity: T, isNested: boolean) => JSX.Element) | undefined;
-    actionsAsync: ((entity: T, isNested: boolean) => PromiseLike<JSX.Element>) | undefined;
+    actions: IActionWithId<T> | ((entity: T, isNested: boolean) => React.JSX.Element) | undefined;
+    actionsAsync: ((entity: T, isNested: boolean) => PromiseLike<React.JSX.Element>) | undefined;
     primaryActions: IActionWithId<T>[] | ((entity: T, isNested: boolean) => IActionWithId<T>[]) | undefined;
 };

package/dist/table/children/useTableChildren.d.ts

@@ -1,10 +1,10 @@
-import { ReactElement, ReactNode } from "react";
-export declare const useTableChildren: (children: ReactNode, isMobile: boolean, selected: number, allSelected: boolean, clearSelection: () => void, selectAll: () => void, turnOffSelectAll?: boolean, gridRef?: React.RefObject<HTMLElement>) => {
-    bulkActions: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    pagination: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+import { ReactElement, ReactNode, RefObject } from "react";
+export declare const useTableChildren: (children: ReactNode, isMobile: boolean, selected: number, allSelected: boolean, clearSelection: () => void, selectAll: () => void, turnOffSelectAll?: boolean, gridRef?: RefObject<HTMLElement | null>) => {
+    bulkActions: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
+    pagination: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
     activePage: number | undefined;
-    fullscreenButton: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    emptyList: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    footer: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    fullscreenButton: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
+    emptyList: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
+    footer: ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
     other: ReactNode[];
 };

package/dist/table/children/useTableChildren.js

@@ -15,36 +15,37 @@ const tableEmpty_1 = require("./tableEmpty");
 const emptySearchList_1 = require("../../dataGrid/emptySearchList/emptySearchList");
 const dataGrid_1 = require("../../dataGrid/dataGrid");
 const tableFooter_1 = require("./tableFooter");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const isChildElement = (child, expectedType) => {
-    if (!child.type) {
+const isChildElement = function (child, expectedType) {
+    if (!(0, react_1.isValidElement)(child) || !child.type) {
         return false;
     }
-    return child.type.displayName === expectedType;
+    if ((typeof child.type === "object" || typeof child.type === "function") && "displayName" in child.type) {
+        return child.type.displayName === expectedType;
+    }
+    return false;
 };
 const useTableChildren = (children, isMobile, selected, allSelected, clearSelection, selectAll, turnOffSelectAll, gridRef) => (0, react_1.useMemo)(() => {
     let bulkActions = undefined;
     let tablePagination = undefined;
-    let activePage;
+    let activePage = undefined;
     let tableFullscreen = undefined;
     let emptyList = undefined;
     let footer = undefined;
     const other = [];
     react_1.Children.forEach(children, child => {
-        var _a;
         if (!child) {
             return;
         }
         if (isChildElement(child, tableBulkActions_1.TableBulkActions.displayName)) {
-            const bulkActionButtons = ((_a = child.props) === null || _a === void 0 ? void 0 : _a.children) || [];
+            const bulkActionButtons = child.props.children || [];
             bulkActions = (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions, { gridType: isMobile ? deviceType_1.DeviceType.Mobile : deviceType_1.DeviceType.Desktop, selected: selected, allSelected: allSelected, onClearSelection: clearSelection, onSelectAll: selectAll, turnOffSelectAll: turnOffSelectAll, children: bulkActionButtons });
             return;
         }
         if (isChildElement(child, tablePagination_1.TablePagination.displayName)) {
             tablePagination = (0, react_1.createElement)(pagination_1.Pagination, {
                 activePage: child.props.activePage,
-                total: child.props.total,
-                perPage: child.props.perPage,
+                total: child.props.total || 0,
+                perPage: child.props.perPage || 10,
                 onChange: child.props.onChange,
                 type: paginationType_1.PaginationType.Compact,
                 includeText: true,

package/dist/table/flexible/columnsPopup.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 import { IColumnSettings } from "./interfaces";
 import { IListColumn } from "../table";
 import "./columnsPopup.less";
@@ -11,7 +11,7 @@ interface IColumnsPopupProps<T extends IRowEntity<N>, N extends IEntityWithId> {
     onChange: (newSettings: IColumnSettings[]) => void;
     sortGroups?: (groupA: string, groupB: string) => number;
     sortColumns?: (groupA: string, groupB: string) => number;
-    triggerRef: React.RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
 }
 export declare const ColumnsPopup: <T extends IRowEntity<N>, N extends IEntityWithId>({ onReset, onChange, columnSettings, columns, sortGroups, sortColumns, triggerRef }: IColumnsPopupProps<T, N>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/table/flexible/useFlexibleColumns.d.ts

@@ -14,7 +14,7 @@ export interface IFlexibleColumnsOptions {
     sortColumns?: (groupA: string, groupB: string) => number;
 }
 export declare const getColumnSettings: (pageName: string, defaultValue?: IColumnSettings[] | undefined) => import("./columnSettingsStorage").IColumnSettings[] | undefined;
-export declare const useFlexibleColumns: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], flexible: IFlexibleColumnsOptions | undefined, gridRef: RefObject<HTMLElement>, columnsPopupRef: RefObject<HTMLElement> | undefined, isFeed: boolean) => {
+export declare const useFlexibleColumns: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], flexible: IFlexibleColumnsOptions | undefined, gridRef: RefObject<HTMLElement | null>, columnsPopupRef: RefObject<HTMLElement | null> | undefined, isFeed: boolean) => {
     flexibleColumns: IListColumn<T, N>[];
     columnsPopup: import("react/jsx-runtime").JSX.Element | null;
 };

package/dist/table/nested/nestedData.js

@@ -35,8 +35,10 @@ const NestedDataInt = ({ entities, children, expandedRows, useChildrenDataHook,
         }
         return entity;
     }), [entities, expandedRows, maxHooks, hookResults]);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     const table = (0, react_1.useMemo)(() => (0, react_1.cloneElement)(children, {
         entities: entitiesWithChildren
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
     }), [children, entitiesWithChildren]);
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: table });
 };

package/dist/textIconButton/textIconButton.d.ts

@@ -17,4 +17,4 @@ export interface ITextIconButton extends IButton {
     tabIndex?: number;
     role?: string;
 }
-export declare const TextIconButton: React.ForwardRefExoticComponent<ITextIconButton & React.RefAttributes<HTMLButtonElement>>;
+export declare const TextIconButton: ({ icon, iconClasses, iconPosition, iconSize, children, className, contentClasses, ref, ...restProps }: ITextIconButton) => import("react/jsx-runtime").JSX.Element;

package/dist/textIconButton/textIconButton.js

@@ -47,8 +47,8 @@ exports.ButtonIconPosition = {
     End: "end"
 };
 // eslint-disable-next-line @typescript-eslint/naming-convention
-exports.TextIconButton = React.forwardRef(function TextIcon(_a, ref) {
-    var { icon, iconClasses, iconPosition = exports.ButtonIconPosition.Start, iconSize, children, className, contentClasses } = _a, restProps = __rest(_a, ["icon", "iconClasses", "iconPosition", "iconSize", "children", "className", "contentClasses"]);
+const TextIconButton = (_a) => {
+    var { icon, iconClasses, iconPosition = exports.ButtonIconPosition.Start, iconSize, children, className, contentClasses, ref } = _a, restProps = __rest(_a, ["icon", "iconClasses", "iconPosition", "iconSize", "children", "className", "contentClasses", "ref"]);
     const isDrive = (0, useDrive_1.useDrive)();
     const defaultIconSize = isDrive ? svgIconSize_1.SvgIconSize.Huge : svgIconSize_1.SvgIconSize.Large;
     const isMobile = (0, useMobile_1.useMobile)();
@@ -65,4 +65,5 @@ exports.TextIconButton = React.forwardRef(function TextIcon(_a, ref) {
     }), [icon, buttonIconSize, svgIconClasses]);
     const isStartIconPosition = iconPosition === exports.ButtonIconPosition.Start;
     return (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ ref: ref, className: buttonExtraClasses }, restProps, { children: [isStartIconPosition ? svgIcon : null, children && (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-caption__content", contentClasses !== null && contentClasses !== void 0 ? contentClasses : ""]), children: children }), !isStartIconPosition ? svgIcon : null] }));
-});
+};
+exports.TextIconButton = TextIconButton;

package/dist/textInput/textInput.d.ts

@@ -1,8 +1,12 @@
-import * as React from "react";
+import { RefObject } from "react";
 import { TFormFieldComponentProps } from "../formField/formField";
 import { ITextInputRaw } from "../textInputRaw/textInputRaw";
 type TFormInput = TFormFieldComponentProps<ITextInputRaw>;
-export interface ITextInput extends Omit<TFormInput, "counter"> {
+export interface ITextInput extends Omit<TFormInput, "counter" | "ref"> {
+    ref?: RefObject<HTMLInputElement | null>;
 }
-export declare const TextInput: React.ForwardRefExoticComponent<Omit<ITextInput, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TextInput: {
+    ({ maxLength, ...props }: ITextInput): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/textInput/textInput.js

@@ -1,27 +1,4 @@
 "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)
@@ -36,15 +13,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
 const formField_1 = require("../formField/formField");
 const textInputRaw_1 = require("../textInputRaw/textInputRaw");
 const FormInput = (0, formField_1.FormField)(textInputRaw_1.TextInputRaw);
-exports.TextInput = React.forwardRef((_a, ref) => {
+const TextInput = (_a) => {
     var { maxLength } = _a, props = __rest(_a, ["maxLength"]);
     const normalizedMaxLength = maxLength && Math.max(maxLength, 1);
-    return (0, jsx_runtime_1.jsx)(FormInput, Object.assign({}, props, { ref: ref, maxLength: maxLength, counter: normalizedMaxLength
+    return (0, jsx_runtime_1.jsx)(FormInput, Object.assign({}, props, { maxLength: maxLength, counter: normalizedMaxLength
             ? `${Math.min((props.value).length, normalizedMaxLength)}/${normalizedMaxLength}`
             : undefined }));
-});
+};
+exports.TextInput = TextInput;
 exports.TextInput.displayName = "TextInput";

package/dist/textInputRaw/textInputRaw.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import "./textInputRaw.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { RefCallback, RefObject } from "react";
 export interface ITextInputRaw extends IZenComponentProps {
     id?: string;
     value: string;
@@ -19,5 +20,6 @@ export interface ITextInputRaw extends IZenComponentProps {
     ariaLabelledby?: string;
     ariaLabel?: string;
     autoFocus?: boolean;
+    ref?: RefObject<HTMLInputElement | null> | RefCallback<HTMLInputElement | null>;
 }
-export declare const TextInputRaw: React.ForwardRefExoticComponent<ITextInputRaw & React.RefAttributes<HTMLInputElement>>;
+export declare const TextInputRaw: (props: ITextInputRaw) => import("react/jsx-runtime").JSX.Element;

package/dist/textInputRaw/textInputRaw.js

@@ -1,41 +1,16 @@
 "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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInputRaw = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
-exports.TextInputRaw = 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-React.forwardRef(function InnerInput(props, ref) {
+const TextInputRaw = (props) => {
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-text-input");
-    return (0, jsx_runtime_1.jsx)("input", { id: props.id, ref: ref, type: props.type || "text", className: (0, classNames_1.classNames)([
+    return (0, jsx_runtime_1.jsx)("input", { id: props.id, ref: props.ref, type: props.type || "text", className: (0, classNames_1.classNames)([
             "zen-text-input",
             driveComponentClass || "",
             props.className || "",
             props.isError ? "zen-text-input--error" : ""
         ]), value: props.maxLength ? props.value.substring(0, props.maxLength) : props.value, placeholder: props.placeholder, disabled: props.disabled, onChange: props.onChange, onKeyDown: props.onKeyDown, onBlur: props.onBlur, onFocus: props.onFocus, maxLength: props.maxLength, autoComplete: props.autocomplete, min: props.min, max: props.max, "aria-labelledby": props.ariaLabelledby, "aria-label": props.ariaLabel, autoFocus: props.autoFocus });
-});
+};
+exports.TextInputRaw = TextInputRaw;

package/dist/textarea/textarea.d.ts

@@ -1,8 +1,10 @@
-import * as React from "react";
 import { TFormFieldComponentProps } from "../formField/formField";
 import { ITextareaRaw } from "../textareaRaw/textareaRaw";
 type TFormTextareaInput = TFormFieldComponentProps<ITextareaRaw>;
 export interface ITextarea extends Omit<TFormTextareaInput, "counter"> {
 }
-export declare const Textarea: React.ForwardRefExoticComponent<Omit<ITextarea, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Textarea: {
+    ({ maxLength, ...props }: TFormTextareaInput): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/textarea/textarea.js

@@ -1,27 +1,4 @@
 "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)
@@ -36,15 +13,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Textarea = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
 const formField_1 = require("../formField/formField");
 const textareaRaw_1 = require("../textareaRaw/textareaRaw");
 const FormTextareaInput = (0, formField_1.FormField)(textareaRaw_1.TextareaRaw);
-exports.Textarea = React.forwardRef((_a, ref) => {
+const Textarea = (_a) => {
     var { maxLength } = _a, props = __rest(_a, ["maxLength"]);
     const normalizedMaxLength = maxLength && Math.max(maxLength, 1);
-    return (0, jsx_runtime_1.jsx)(FormTextareaInput, Object.assign({}, props, { ref: ref, maxLength: maxLength, counter: normalizedMaxLength
+    return (0, jsx_runtime_1.jsx)(FormTextareaInput, Object.assign({}, props, { maxLength: maxLength, counter: normalizedMaxLength
             ? `${Math.min((props.value).length, normalizedMaxLength)}/${normalizedMaxLength}`
             : undefined }));
-});
+};
+exports.Textarea = Textarea;
 exports.Textarea.displayName = "Textarea";

package/dist/textareaRaw/textareaRaw.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import "../textInputRaw/textInputRaw.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import "./textareaRaw.less";
+import { RefCallback, RefObject } from "react";
 export interface ITextareaRaw extends IZenComponentProps {
     id?: string;
     value: string;
@@ -18,5 +19,9 @@ export interface ITextareaRaw extends IZenComponentProps {
     ariaLabel?: string;
     resize?: boolean;
     readonly?: boolean;
+    ref?: RefObject<HTMLTextAreaElement | null> | RefCallback<HTMLTextAreaElement | null>;
 }
-export declare const TextareaRaw: React.ForwardRefExoticComponent<ITextareaRaw & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const TextareaRaw: {
+    ({ id, rows, maxLength, className, value, resize, readonly, placeholder, disabled, isError, ariaLabel, ariaLabelledby, onChange, onKeyDown, onFocus, onBlur, ref }: ITextareaRaw): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};