@geotab/zenith 3.1.0 → 3.1.1-beta.1

package/esm/dropdownRaw/dropdownTrigger.d.ts

@@ -0,0 +1,27 @@
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { TFilterButton } from "../filterButton/filterButton";
+import { ChangeEvent } from "react";
+export interface IDropdownTrigger extends IZenComponentProps {
+    currentSelection?: string;
+    isActive: boolean;
+    id?: string;
+    disabled?: boolean;
+    count?: number;
+    fullWidth?: boolean;
+    inputValue?: string;
+    placeholder: string;
+    searchField: boolean;
+    onSearchChange?: (event?: ChangeEvent<HTMLInputElement>) => void;
+    handleClick: (value: boolean) => void;
+    width?: number;
+    title?: string;
+    triggerAriaLabel?: string;
+    triggerRef: React.RefObject<HTMLElement | null>;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
+    buttonType?: TFilterButton;
+    isError?: boolean;
+    name?: string;
+    onBlur?: () => void;
+}
+export declare const DropdownTrigger: React.FC<IDropdownTrigger>;
+export declare const TRANSLATIONS: string[];

package/esm/dropdownRaw/dropdownTrigger.js

@@ -0,0 +1,27 @@
+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;
+};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { DropdownSearchableTrigger, TRANSLATIONS as SearchableTriggerTranslations } from "./dropdownSearchableTrigger";
+import { FilterButton } from "../filterButton/filterButton";
+import { useRef } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const DropdownTrigger = (_a) => {
+    var { name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange = () => { }, width, title, triggerAriaLabel, count, inputRef, buttonType, isError } = _a, otherProps = __rest(_a, ["name", "onBlur", "isActive", "id", "triggerRef", "searchField", "placeholder", "disabled", "fullWidth", "currentSelection", "handleClick", "inputValue", "className", "onSearchChange", "width", "title", "triggerAriaLabel", "count", "inputRef", "buttonType", "isError"]);
+    const elInpRef = useRef(null);
+    const handleButtonClick = () => {
+        handleClick(!isActive);
+    };
+    return _jsx(_Fragment, { children: searchField ? _jsx(DropdownSearchableTrigger, Object.assign({ value: inputValue || "", name: name, onChange: onSearchChange, isOpenPopup: isActive, inputRef: inputRef || elInpRef, handleClick: handleClick, ref: triggerRef, width: width, placeholder: placeholder, disabled: disabled, id: id, title: title, count: count, currentSelection: currentSelection, className: className, isError: isError, fullWidth: fullWidth }, otherProps)) : _jsx(FilterButton, Object.assign({ ref: triggerRef, id: id, name: name, onBlur: onBlur, className: classNames(["zen-dropdown__trigger-button", isError ? "zen-dropdown__trigger-button--error" : "", className || ""]), onClick: handleButtonClick, disabled: disabled, isActive: isActive, fullWidth: width ? true : fullWidth, maxWidth: width, minWidth: width, quantity: count || undefined, type: buttonType, title: title, ariaLabel: triggerAriaLabel }, otherProps, { children: currentSelection ? _jsx("span", { className: classNames(["zen-dropdown__trigger-button-text", buttonType ? `zen-dropdown__trigger-button-text--${buttonType.toString()}` : ""]), children: currentSelection }) : placeholder })) });
+};
+export const TRANSLATIONS = [
+    ...SearchableTriggerTranslations
+];

package/{dist/dropdown → esm/dropdownRaw}/stateReducer/stateAction.d.ts

@@ -1,4 +1,4 @@
-import { IDropdownItem } from "../dropdown";
+import { IDropdownRawItem } from "../types";
 import { StateActionType } from "./stateActionType";
 interface IPayloadSelectionAction {
     value: boolean;
@@ -31,11 +31,11 @@ interface ISetGlobalStateAction {
 }
 interface ICreateMapAction {
     type: StateActionType.CreateMap;
-    payload: IDropdownItem[];
+    payload: IDropdownRawItem[];
 }
 interface ISetListDataAction {
     type: StateActionType.SetListData;
-    payload: IDropdownItem[];
+    payload: IDropdownRawItem[];
 }
 interface ISetDataProblemAction {
     type: StateActionType.SetDataProblem;
@@ -119,7 +119,7 @@ interface ISetDefaultAllSelectedAction {
 }
 interface IUpdateSelectedItemsAction {
     type: StateActionType.UpdateSelectedItems;
-    payload: IDropdownItem[];
+    payload: IDropdownRawItem[];
 }
 interface ISetPendingStateAction {
     type: StateActionType.SetPendingState;

package/esm/dropdownRaw/stateReducer/stateAction.js

@@ -0,0 +1 @@
+export {};

package/esm/{dropdown → dropdownRaw}/stateReducer/stateReducer.d.ts

@@ -1,13 +1,13 @@
 import { Reducer } from "react";
 import { TStateAction } from "./stateAction";
-import { IGroupTree, ITypedHash } from "../../groupsFilter/groupsFilterInterfaces";
-import { IDropdownItem } from "../dropdown";
+import { IGroupTree, ITypedHash } from "../../groupsFilterRaw/groupsFilterInterfaces";
+import { IDropdownRawItem } from "../types";
 export interface IDropdownState {
     groupsMap: ITypedHash<IGroupTree | undefined>;
     selectedIds: string[];
     globalSelectedIds: string[];
     defaultValue: string[];
-    listData: IDropdownItem[];
+    listData: IDropdownRawItem[];
     currentId: string | undefined;
     showWaiting: boolean;
     showEmptyList: boolean;
@@ -15,7 +15,7 @@ export interface IDropdownState {
     inputValue: string;
     isOpenCombo: boolean;
     hasDataProblem: boolean;
-    groupsMapSelected: Map<string, IDropdownItem>;
+    groupsMapSelected: Map<string, IDropdownRawItem>;
     namelessIds: Set<string>;
     pendingNamelessIds: boolean;
     isNestedList: boolean;
@@ -31,7 +31,7 @@ export interface IDropdownState {
 }
 export interface IStateReducer extends Reducer<IDropdownState, TStateAction> {
 }
-export declare const getInitialState: (isFullSelectionMode: boolean, comboItems: IDropdownItem[], selection: string[], listLimit: number, defaultValue?: string[], isAllSelected?: boolean, defaultValueIsAllSelected?: boolean, isChecked?: boolean, defaultValueIsChecked?: boolean) => {
+export declare const getInitialState: (isFullSelectionMode: boolean, comboItems: IDropdownRawItem[], selection: string[], listLimit: number, defaultValue?: string[], isAllSelected?: boolean, defaultValueIsAllSelected?: boolean, isChecked?: boolean, defaultValueIsChecked?: boolean) => {
     groupsMap: ITypedHash<IGroupTree>;
     selectedIds: string[];
     globalSelectedIds: string[];

package/esm/{dropdown → dropdownRaw}/stateReducer/stateReducer.js

@@ -1,7 +1,7 @@
 import { StateActionType } from "./stateActionType";
 import { getChildList, updateAllSelectedStateValueBasedOnTotalSelected } from "./stateReducerHelper";
-import { createGroupsMap } from "../../groupsFilter/groupsFilterHelper";
-import { ENTIRE_ORGANIZATION_GROUP_ID } from "../../groupsFilter/groupsHelper";
+import { createGroupsMap } from "../../groupsFilterRaw/groupsFilterHelper";
+import { ENTIRE_ORGANIZATION_GROUP_ID } from "../../groupsFilterRaw/groupsHelper";
 export const getInitialState = (isFullSelectionMode, comboItems, selection, listLimit, defaultValue, isAllSelected, defaultValueIsAllSelected, isChecked, defaultValueIsChecked) => {
     const updatedGroupsMapSelected = new Map();
     const updatedGroupsMap = comboItems.length ? createGroupsMap(comboItems, ENTIRE_ORGANIZATION_GROUP_ID) : {};

package/esm/{dropdown → dropdownRaw}/stateReducer/stateReducerHelper.d.ts

@@ -1,4 +1,4 @@
-import { IDropdownItem } from "../dropdown";
 import { IDropdownState } from "./stateReducer";
-export declare function getChildList(childArr: IDropdownItem[] | undefined): IDropdownItem[];
+import { IDropdownRawItem } from "../types";
+export declare function getChildList(childArr: IDropdownRawItem[] | undefined): IDropdownRawItem[];
 export declare const updateAllSelectedStateValueBasedOnTotalSelected: (state: IDropdownState, totalSelected: number) => Partial<Pick<IDropdownState, "isAllSelected">>;

package/esm/dropdownRaw/types.d.ts

@@ -0,0 +1,133 @@
+import { TAlignment } from "../absolute/absolute";
+import { IChipsParent } from "../chip/chip";
+import { IEntityWithId } from "../commonHelpers/entity";
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IReactFormItemController } from "../commonHelpers/zenComponent";
+import { TFilterButton } from "../filterButton/filterButton";
+import { IColor } from "../groupsFilterRaw/groupsFilterInterfaces";
+export interface ISelectionItemRaw {
+    id: string;
+    name?: string;
+    color?: IColor;
+}
+export interface IDropdownRawItem extends IEntityWithId {
+    name?: string;
+    children?: IEntityWithId[];
+    color?: IColor;
+    disabled?: boolean;
+}
+interface IFetchState<T> {
+    data: T | undefined;
+    isLoading: boolean;
+    error: Error | null;
+}
+export interface IFetchDropdownState extends IFetchState<IDropdownRawItem[]> {
+}
+interface IDropdownBase extends IChipsParent {
+    /**
+    * @deprecated
+    * @param translate - will be removed in the next major release
+    */
+    translate?: (s: string) => string;
+    className?: string;
+    dataItems?: IDropdownRawItem[];
+    getData?: (signal?: AbortSignal, searchValue?: string) => Promise<IDropdownRawItem[]>;
+    errorHandler: (e: Error) => void;
+    getNamedItems?: (fn: (items: string[]) => ISelectionItemRaw[]) => void;
+    getSelectedItem?: (id: string) => IDropdownRawItem | undefined | Promise<IDropdownRawItem | undefined>;
+    placeholder?: string;
+    dialogAriaLabel?: string;
+    width?: number;
+    title?: string;
+    triggerAriaLabel?: string;
+    inputId?: string;
+    filterName?: string;
+    showCounterPill?: boolean;
+    showSelection?: boolean;
+    searchField?: boolean;
+    fullWidthTriggerButton?: boolean;
+    hasApplyButton?: boolean;
+    listLimit?: number;
+    forceSelection?: boolean;
+    buttonType?: TFilterButton;
+    isLoading?: boolean;
+    alignment?: TAlignment;
+    classNamePopup?: string;
+    sortFn?: (a: IDropdownRawItem, b: IDropdownRawItem) => number;
+    checkboxLabel?: string;
+    setSearch?: (value: string) => void;
+    setChecked?: (value: boolean) => void;
+    fetchState?: IFetchDropdownState;
+    mobileSheetStackingClassName?: string;
+}
+interface IDropdownBaseDefault {
+    disabled?: boolean;
+    onBlur?: () => void;
+    onChange?: (...props: any[]) => void;
+    name?: string;
+    value?: unknown;
+    defaultValue?: unknown;
+}
+export interface IDropdownRawValueFullSelection {
+    selected: string[];
+    isAllSelected: boolean;
+}
+export interface IDropdownRawWithCheckboxValue {
+    selected: string[];
+    isChecked: boolean;
+}
+export interface IDropdownRawWithCheckboxSelected {
+    selected: ISelectionItemRaw[];
+    isChecked: boolean;
+}
+export interface IDropdownRawValueFullSelectionWithCheckbox {
+    selected: string[];
+    isAllSelected: boolean;
+    isChecked: boolean;
+}
+export interface IDropdownRawPrevValueFullSelection {
+    selected: string[];
+    isAllSelected?: boolean;
+    isChecked?: boolean;
+}
+export interface IDropdownRawFullSelectedValue {
+    selected: ISelectionItemRaw[];
+    isAllSelected: boolean;
+}
+export interface IDropdownRawFullSelectedValueWithCheckbox {
+    selected: ISelectionItemRaw[];
+    isAllSelected: boolean;
+    isChecked: boolean;
+}
+export interface IDropdownRawFullSelection extends IDropdownBase, IDropdownBaseDefault {
+    multiselect: true;
+    selectAllButton: true;
+    value: IDropdownRawValueFullSelection;
+    onChange: (selected: IDropdownRawFullSelectedValue) => void;
+    defaultValue?: IDropdownRawValueFullSelection;
+}
+export interface IDropdownRaw extends IDropdownBase, IDropdownBaseDefault {
+    value: string[];
+    onChange: (selected: ISelectionItemRaw[]) => void;
+    multiselect?: boolean;
+    selectAllButton?: boolean;
+    defaultValue?: string[];
+}
+export interface IDropdownRawWithCheckbox extends Omit<IDropdownRaw, "value" | "onChange" | "getData" | "defaultValue">, IDropdownBaseDefault {
+    checkboxLabel: string;
+    value: IDropdownRawWithCheckboxValue;
+    getData: (signal?: AbortSignal, searchValue?: string, isChecked?: boolean) => Promise<IDropdownRawItem[]>;
+    defaultValue?: IDropdownRawWithCheckboxValue;
+    onChange: (selected: IDropdownRawWithCheckboxSelected) => void;
+}
+export interface IDropdownRawFullSelectionWithCheckbox extends Omit<IDropdownRawFullSelection, "value" | "onChange" | "getData" | "defaultValue">, IDropdownBaseDefault {
+    checkboxLabel: string;
+    value: IDropdownRawValueFullSelectionWithCheckbox;
+    getData: (signal?: AbortSignal, searchValue?: string, isChecked?: boolean) => Promise<IDropdownRawItem[]>;
+    defaultValue?: IDropdownRawValueFullSelectionWithCheckbox;
+    onChange: (selected: IDropdownRawFullSelectedValueWithCheckbox) => void;
+}
+export interface IDropdownRawForm extends IDropdownBase, IReactFormItemController {
+}
+export type TDropdownRaw = Exclusive<IDropdownRawForm, IDropdownRaw> | Exclusive<IDropdownRawForm, IDropdownRawFullSelection> | Exclusive<IDropdownRawForm, IDropdownRawWithCheckbox> | Exclusive<IDropdownRawForm, IDropdownRawFullSelectionWithCheckbox>;
+export {};

package/esm/dropdownRaw/types.js

@@ -0,0 +1 @@
+export {};

package/esm/dropdownRaw/utils/getSelectedValues.d.ts

@@ -0,0 +1,2 @@
+import { IDropdownRawItem } from "../types";
+export declare const getSelectedValues: (groupsMapSelected: Map<string, IDropdownRawItem>) => string;

package/esm/dropdownRaw/utils/getSelectedValues.js

@@ -0,0 +1 @@
+export const getSelectedValues = (groupsMapSelected) => [...groupsMapSelected.values()].map(item => item.name).join(", ").trim();

package/esm/filterButton/filterButton.d.ts

@@ -5,10 +5,12 @@ import { ButtonType } from "../button/buttonType";
 export type TFilterButton = typeof ButtonType.Secondary | typeof ButtonType.Tertiary | typeof ButtonType.TertiaryBlack;
 export interface IFilterButton extends IZenComponentProps {
     id?: string;
+    name?: string;
     title?: string;
     disabled?: boolean;
     quantity?: number;
     onClick?: (e: MouseEvent) => void;
+    onBlur?: (e: React.FocusEvent<HTMLElement>) => void;
     onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
     onMouseOut?: (e: React.MouseEvent<HTMLElement>) => void;
     isActive?: boolean;
@@ -19,4 +21,4 @@ export interface IFilterButton extends IZenComponentProps {
     ariaLabel?: string;
     ref?: RefObject<HTMLButtonElement | null>;
 }
-export declare const FilterButton: ({ id, title, disabled, quantity, className, children, onClick, onMouseOver, onMouseOut, fullWidth, maxWidth, minWidth, isActive, type, ariaLabel, ref, ...other }: IFilterButton) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterButton: ({ id, title, disabled, quantity, className, children, onClick, onMouseOver, onMouseOut, fullWidth, maxWidth, minWidth, isActive, type, ariaLabel, ref, onBlur, name, ...other }: IFilterButton) => import("react/jsx-runtime").JSX.Element;

package/esm/filterButton/filterButton.js

@@ -17,7 +17,7 @@ import { Button } from "../button/button";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useDrive } from "../utils/theme/useDrive";
 export const FilterButton = (_a) => {
-    var { id, title, disabled, quantity, className, children, onClick, onMouseOver, onMouseOut, fullWidth, maxWidth, minWidth, isActive = false, type = "secondary", ariaLabel, ref } = _a, other = __rest(_a, ["id", "title", "disabled", "quantity", "className", "children", "onClick", "onMouseOver", "onMouseOut", "fullWidth", "maxWidth", "minWidth", "isActive", "type", "ariaLabel", "ref"]);
+    var { id, title, disabled, quantity, className, children, onClick, onMouseOver, onMouseOut, fullWidth, maxWidth, minWidth, isActive = false, type = "secondary", ariaLabel, ref, onBlur, name } = _a, other = __rest(_a, ["id", "title", "disabled", "quantity", "className", "children", "onClick", "onMouseOver", "onMouseOut", "fullWidth", "maxWidth", "minWidth", "isActive", "type", "ariaLabel", "ref", "onBlur", "name"]);
     const driveComponentClass = useDriveClassName("zen-filter-button");
     const isDrive = useDrive();
     const hasQuantity = typeof quantity === "number";
@@ -26,7 +26,7 @@ export const FilterButton = (_a) => {
         ? (e) => onClick(e.nativeEvent)
         : () => { }, [onClick]);
     const inlineStyle = useMemo(() => maxWidth || minWidth ? { style: Object.assign(Object.assign({}, (maxWidth ? { maxWidth: `${maxWidth}px` } : {})), (minWidth ? { minWidth: `${minWidth}px` } : {})) } : {}, [maxWidth, minWidth]);
-    return _jsxs(Button, Object.assign({ id: id, title: title, disabled: disabled, type: type, className: classNames([
+    return _jsxs(Button, Object.assign({ id: id, name: name, onBlur: onBlur, title: title, disabled: disabled, type: type, className: classNames([
             "zen-filter-button",
             driveComponentClass || "",
             `zen-filter-button--${type}`,

package/esm/filters/components/filtersDropdown.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { IDropdown, IDropdownFullSelection, IDropdownFullSelectionWithCheckbox, IDropdownWithCheckbox, IFetchDropdownState, IDropdownItem } from "../../dropdown/dropdown";
+import { IDropdown, IDropdownFullSelection, IDropdownFullSelectionWithCheckbox, IDropdownItem, IDropdownWithCheckbox } from "../../dropdown/dropdown";
 import { IFiltersItem } from "./filtersItem";
+import { IFetchDropdownState } from "../../dropdownRaw/types";
 export interface IFiltersDropdownProps extends Omit<IDropdown | IDropdownFullSelection | IDropdownWithCheckbox | IDropdownFullSelectionWithCheckbox, "value" | "onChange" | "defaultValue" | "className" | "getData" | "errorHandler"> {
 }
 export type TFiltersDropdownState = string[];
@@ -20,7 +21,8 @@ export interface IFiltersDropdownFullSelectionWithCheckboxState {
 export type TFiltersDropdownComplexState = IFiltersDropdownFullSelectionState | IFiltersDropdownWithCheckboxState | IFiltersDropdownFullSelectionWithCheckboxState;
 export type TFiltersDropdownAllStates = TFiltersDropdownState | TFiltersDropdownComplexState;
 export type TInferOnChangeType<T> = T extends string[] ? (state: string[]) => void : T extends IFiltersDropdownWithCheckboxState ? (state: IFiltersDropdownWithCheckboxState) => void : T extends IFiltersDropdownFullSelectionState ? (state: IFiltersDropdownFullSelectionState) => void : T extends IFiltersDropdownFullSelectionWithCheckboxState ? (state: IFiltersDropdownFullSelectionWithCheckboxState) => void : (state: T) => void;
-export interface IFiltersDropdown<T extends TFiltersDropdownAllStates = TFiltersDropdownState> extends Omit<IFiltersItem<T>, "onChange" | "defaultState">, IFiltersDropdownProps {
+export interface IFiltersDropdown<T extends TFiltersDropdownAllStates = TFiltersDropdownState> extends Omit<IFiltersItem<T>, "onChange" | "defaultState" | "name">, Omit<IFiltersDropdownProps, "name"> {
+    name?: string;
     onChange: TInferOnChangeType<T>;
     fetchState?: IFetchDropdownState;
     dataItems?: IDropdownItem[];

package/esm/filters/components/filtersGroups.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { IFiltersItem } from "./filtersItem";
-import { IGroupsFilterTotalState } from "../../groupsFilter/groupsFilterInterfaces";
 import { IGroupsFilter } from "../../groupsFilter/groupsFilter";
+import { IGroupsFilterTotalState } from "../../groupsFilterRaw/groupsFilterInterfaces";
 export interface IFiltersGroupsProps extends Pick<IGroupsFilter, "dataLoader" | "errorHandler" | "listLimit" | "chipIcon"> {
 }
 export interface IFiltersGroupsItem extends Omit<IFiltersItem<IGroupsFilterTotalState>, "defaultState"> {

package/esm/filters/components/filtersItem.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import { IGroupsFilterTotalState } from "../../groupsFilter/groupsFilterInterfaces";
 import { FiltersChip, IFiltersChip } from "./filtersChip";
 import { FiltersDateRange, IFiltersDateRangeItem, TFiltersDateRangeState } from "./filtersDateRange";
 import { FiltersDropdown, IFiltersDropdown, TFiltersDropdownAllStates } from "./filtersDropdown";
 import { FiltersGroups, IFiltersGroups } from "./filtersGroups";
 import { FiltersRange, IFiltersRange, IFiltersRangeState } from "./filtersRange";
 import { FiltersDateInput, IFiltersDateInput, TFiltersDateInputState } from "./filtersDateInput";
+import { IGroupsFilterTotalState } from "../../groupsFilterRaw/groupsFilterInterfaces";
 export interface IFiltersItem<State = unknown> {
     id: string;
     name: string;

package/esm/filters/components/filtersSidePanelDropdown.js

@@ -16,11 +16,11 @@ import { Dropdown } from "../../dropdown/dropdown";
 import { getDropdownStateType, prepareDefaultDropdownState } from "../filtersHelper";
 import { FiltersChip } from "./filtersChip";
 import { Skeleton } from "../../skeleton/skeleton";
-import { sortDropdownItemArray } from "../../dropdown/dropdownHelper";
 import { RadioGroup } from "../../radioGroup/radioGroup";
-import { getGroupDescription } from "../../groupsFilter/groupsHelper";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { SkeletonList } from "../../skeletonList/skeletonList";
+import { getGroupDescription } from "../../groupsFilterRaw/groupsHelper";
+import { sortDropdownItemArray } from "../../dropdownRaw/dropdownHelper";
 export const FiltersSidePanelDropdown = ({ elemProps, currentState, handleStateChange }) => {
     const simpleViewLimit = 7;
     const _a = elemProps, { id, name, state: _globalState, onChange: _globalOnChange, defaultState, fetchState, dataItems, isLoading, classNamePopup } = _a, otherProps = __rest(_a, ["id", "name", "state", "onChange", "defaultState", "fetchState", "dataItems", "isLoading", "classNamePopup"]);

package/esm/filters/components/filtersSidePanelRange.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo } from "react";
 import { FiltersBarSidePanelRange } from "../../filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange";
-import { checkErrorType } from "../../range/rangeHelper";
+import { checkErrorType } from "../../rangeRaw/utils/rangeHelper";
 export const FiltersSidePanelRange = (_a) => {
     var { errorCheck } = _a, otherProps = __rest(_a, ["errorCheck"]);
     const { value } = otherProps;

package/esm/filters/filtersHelper.js

@@ -4,10 +4,10 @@ import { FiltersGroups } from "./components/filtersGroups";
 import React from "react";
 import { isArraysEqualDeeply } from "../utils/compareElementsUtils/isArraysEqualDeeply";
 import { isElementsEqual } from "../utils/compareElementsUtils/isElementsEqual";
-import { groupsFilterTotalStateDefault } from "../groupsFilter/groupsFilter";
 import { FiltersChip } from "./components/filtersChip";
 import { FiltersDropdown } from "./components/filtersDropdown";
 import { NO_TYPED_SEARCH_ITEM } from "./components/filtersSearchList";
+import { groupsFilterTotalStateDefault } from "../groupsFilterRaw/types";
 export const createStateHash = (state) => {
     if (state === undefined) {
         return "undefined";

package/esm/filtersBar/components/filtersBarDropdown/filtersBarDropdown.js

@@ -7,10 +7,10 @@ import { FiltersBarSidePanelCheckboxGroup } from "../../filtersBarSidePanel/comp
 import { useUniqueId } from "../../../commonHelpers/useUniqueId";
 import { PillBox } from "../../../pillBox/pillBox";
 import { classNames } from "../../../commonHelpers/classNames/classNames";
-import { getGroupDescription } from "../../../groupsFilter/groupsHelper";
 import { useLanguage } from "../../../utils/localization/useLanguage";
-import { sortDropdownItemArray } from "../../../dropdown/dropdownHelper";
 import { FOCUSABLE_SELECTOR } from "../../../utils/focusableSelector";
+import { sortDropdownItemArray } from "../../../dropdownRaw/dropdownHelper";
+import { getGroupDescription } from "../../../groupsFilterRaw/groupsHelper";
 // eslint-disable-next-line complexity
 export const FiltersBarDropdown = ({ sidePanelTitle, className, props, state, useSidePanelView, sidePanelMaxGroupedItemsLength = 5, onChange }) => {
     const { translate } = useLanguage();

package/esm/filtersBar/components/filtersBarGroupsFilter/filtersBarGroupsFilter.d.ts

@@ -2,7 +2,7 @@
 import "./filtersBarGroupsFilter.less";
 import { IGroupsFilter } from "../../../groupsFilter/groupsFilter";
 import { IFiltersBarItem } from "../interfaces";
-import { IGroupsFilterTotalState } from "../../../groupsFilter/groupsFilterInterfaces";
+import { IGroupsFilterTotalState } from "../../../groupsFilterRaw/groupsFilterInterfaces";
 export interface IFiltersBarSearchState {
     value: IGroupsFilterTotalState;
 }

package/esm/filtersBar/components/filtersBarRange/filtersBarRange.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { SidePanelCell } from "../../../sidePanel/sidePanelCell/sidePanelCell";
 import { Range } from "../../../range/range";
 import { FiltersBarSidePanelRange } from "../../filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange";
-import { checkErrorType } from "../../../range/rangeHelper";
+import { checkErrorType } from "../../../rangeRaw/utils/rangeHelper";
 import { useUniqueId } from "../../../commonHelpers/useUniqueId";
 export const FiltersBarRange = ({ sidePanelTitle, props, state, useSidePanelView, onChange, checkError }) => {
     const component = _jsx(Range, Object.assign({}, props, { value: state.value, onChange: newValue => {

package/esm/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelDropdownWithCheckbox/filtersBarSidePanelDropdownWithCheckbox.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Checkbox } from "../../../../checkbox/checkbox";
 import { Dropdown } from "../../../../dropdown/dropdown";
-import { compareStringsArrays } from "../../../../dropdown/dropdownHelper";
+import { compareStringsArrays } from "../../../../dropdownRaw/dropdownHelper";
 export const FiltersBarSidePanelDropdownWithCheckbox = ({ props, state, onChange, getData }) => {
     const isFullSelectionMode = useMemo(() => "isAllSelected" in state && typeof (state).isAllSelected === "boolean", [state]);
     const [checkboxValue, setCheckboxValue] = useState(state.isChecked);

package/esm/filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useCallback, useRef, useState, useId } from "react";
 import { classNames } from "../../../../commonHelpers/classNames/classNames";
-import { checkErrorType, getErrorString } from "../../../../range/rangeHelper";
+import { checkErrorType, getErrorString } from "../../../../rangeRaw/utils/rangeHelper";
 import { useLanguage } from "../../../../utils/localization/useLanguage";
-import { RangeField } from "../../../../range/rangeField";
+import { RangeField } from "../../../../rangeRaw/components/rangeField";
 import { useDirection } from "../../hooks/useDirection";
 import { useMobile } from "../../../../commonHelpers/hooks/useMobile";
 import { FormFieldError } from "../../../../formFieldError/formFieldError";

package/esm/formField/components/formFieldBanner.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { IBanner } from "../../banner/banner";
+import "./formFieldBanner.less";
+export interface IFormFieldBannerProps extends Omit<IBanner, "onClose"> {
+}
+export declare const FormFieldBanner: FC<IFormFieldBannerProps>;

package/esm/formField/components/formFieldBanner.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Banner } from "../../banner/banner";
+// TODO: banners with assistive text?
+// TODO: test with complex components: dropdowns, date pickers, etc.
+export const FormFieldBanner = (props) => _jsx(Banner, Object.assign({ className: "zen-form-field-banner" }, props));

package/esm/formField/components/formFieldSkeleton.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ISkeleton } from "../../skeleton/skeleton";
+interface IFormFieldSkeletonProps extends ISkeleton {
+}
+export declare const FormFieldSkeleton: React.FC<IFormFieldSkeletonProps>;
+export {};

package/esm/formField/components/formFieldSkeleton.js

@@ -0,0 +1 @@
+export const FormFieldSkeleton = () => null;

package/esm/formField/components/formFieldWithLabel.d.ts

@@ -0,0 +1,10 @@
+export declare const FormFieldWithLabel: ({ hasCustomWidth, classes, widthObj, props, id, container, trailing, trailingId }: {
+    hasCustomWidth: any;
+    classes: any;
+    widthObj: any;
+    props: any;
+    id: any;
+    container: any;
+    trailing: any;
+    trailingId: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/esm/formField/components/formFieldWithLabel.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormGroupItem } from "../../formGroupItem/formGroupItem";
+export const FormFieldWithLabel = ({ hasCustomWidth, classes, widthObj, props, id, container, trailing, trailingId }) => {
+    if (!hasCustomWidth) {
+        return _jsxs("div", { className: classes, style: widthObj, children: [props.label && _jsx(FormGroupItem, { className: props.labelClassesName, id: id, value: props.label, tooltip: props.tooltip }), _jsx("div", { className: props.controlClassesName, children: container })] });
+    }
+    return _jsxs("div", { style: { display: "flex" }, children: [_jsxs("div", { className: classes, style: widthObj, children: [props.label && _jsx(FormGroupItem, { className: props.labelClassesName, id: id, value: props.label, tooltip: props.tooltip }), _jsx("div", { className: props.controlClassesName, children: container })] }), trailing && _jsx("span", { className: "zen-form-field__trailing-text", id: trailingId, children: trailing })] });
+};

package/esm/formField/components/formFieldWithoutLabel.d.ts

@@ -0,0 +1,8 @@
+export declare const FormFieldWithoutLabel: ({ hasCustomWidth, classes, widthObj, container, trailing, trailingId }: {
+    hasCustomWidth: any;
+    classes: any;
+    widthObj: any;
+    container: any;
+    trailing: any;
+    trailingId: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/esm/formField/components/formFieldWithoutLabel.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+export const FormFieldWithoutLabel = ({ hasCustomWidth, classes, widthObj, container, trailing, trailingId }) => {
+    if (!hasCustomWidth) {
+        return _jsx("div", { className: classes, style: widthObj, children: container });
+    }
+    return _jsxs("div", { style: { display: "flex", gap: "8px" }, children: [_jsx("div", { className: classes, style: widthObj, children: container }), trailing && _jsx("span", { className: classNames(["zen-form-field__trailing-text"]), id: trailingId, children: trailing })] });
+};

package/esm/formField/formField.d.ts

@@ -1,17 +1,45 @@
-import React from "react";
+import React, { Ref, PropsWithChildren } from "react";
+import { Exclusive } from "../commonHelpers/types/exclusive";
+import { IReactFormItemController, IZenGridItem } from "../commonHelpers/zenComponent";
+import { ILoadingBase } from "../commonHelpers/loading";
 import "./formField.less";
-export interface IFormField {
+export type TLabelAlign = "left" | "top";
+interface IFormFieldBase extends PropsWithChildren {
     className?: string;
     inputClassName?: string;
     error?: string;
     assistive?: string;
     counter?: string;
+    trailing?: string;
+    isReadOnly?: boolean;
+    disabled?: boolean;
+    width?: string | number;
 }
+export interface IFormFieldWithLabel extends IFormFieldBase, ILoadingBase {
+    label?: string;
+    labelAlign?: TLabelAlign;
+    tooltip?: React.ReactNode;
+    labelClassesName?: string;
+    controlClassesName?: string;
+    readOnlyValue?: string | React.ReactNode | ((content: React.ReactNode) => React.ReactNode);
+}
+export interface IFormField extends IFormFieldBase {
+}
+export type TFormField = Exclusive<IFormFieldWithLabel, IFormField>;
 export interface IFormFieldComponent {
     isError?: boolean;
+    isReadOnly?: boolean;
+    children?: React.ReactNode;
+    isLoadingError?: boolean;
+    bannerLabel?: string;
+    ref?: Ref<HTMLElement | null>;
 }
-export type TFormFieldComponentProps<T> = Omit<T, "isError"> & IFormField;
-export declare const FormField: <T extends IFormFieldComponent>(WrappedComponent: React.FC<T>) => {
-    (props: TFormFieldComponentProps<T>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+export type TFormFieldComponentProps<T> = Omit<T, "isError"> & TFormField & IZenGridItem & IReactFormItemController;
+export declare const FormField: {
+    <T extends IFormFieldComponent>(WrappedComponent: React.FC<T>): {
+        (props: TFormFieldComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Banner: React.FC<import("./components/formFieldBanner").IFormFieldBannerProps>;
 };
+export {};