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

package/dist/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/dist/dropdownRaw/dropdownTrigger.js

@@ -0,0 +1,31 @@
+"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.TRANSLATIONS = exports.DropdownTrigger = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdownSearchableTrigger_1 = require("./dropdownSearchableTrigger");
+const filterButton_1 = require("../filterButton/filterButton");
+const react_1 = require("react");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+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 = (0, react_1.useRef)(null);
+    const handleButtonClick = () => {
+        handleClick(!isActive);
+    };
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: searchField ? (0, jsx_runtime_1.jsx)(dropdownSearchableTrigger_1.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)) : (0, jsx_runtime_1.jsx)(filterButton_1.FilterButton, Object.assign({ ref: triggerRef, id: id, name: name, onBlur: onBlur, className: (0, classNames_1.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 ? (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-dropdown__trigger-button-text", buttonType ? `zen-dropdown__trigger-button-text--${buttonType.toString()}` : ""]), children: currentSelection }) : placeholder })) });
+};
+exports.DropdownTrigger = DropdownTrigger;
+exports.TRANSLATIONS = [
+    ...dropdownSearchableTrigger_1.TRANSLATIONS
+];

package/{esm/dropdown → dist/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/dist/dropdownRaw/stateReducer/stateAction.js

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

package/dist/{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/dist/{dropdown → dropdownRaw}/stateReducer/stateReducer.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.stateReducer = exports.getInitialState = void 0;
 const stateActionType_1 = require("./stateActionType");
 const stateReducerHelper_1 = require("./stateReducerHelper");
-const groupsFilterHelper_1 = require("../../groupsFilter/groupsFilterHelper");
-const groupsHelper_1 = require("../../groupsFilter/groupsHelper");
+const groupsFilterHelper_1 = require("../../groupsFilterRaw/groupsFilterHelper");
+const groupsHelper_1 = require("../../groupsFilterRaw/groupsHelper");
 const getInitialState = (isFullSelectionMode, comboItems, selection, listLimit, defaultValue, isAllSelected, defaultValueIsAllSelected, isChecked, defaultValueIsChecked) => {
     const updatedGroupsMapSelected = new Map();
     const updatedGroupsMap = comboItems.length ? (0, groupsFilterHelper_1.createGroupsMap)(comboItems, groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID) : {};

package/dist/{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/dist/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/dist/dropdownRaw/types.js

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

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

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

package/dist/dropdownRaw/utils/getSelectedValues.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectedValues = void 0;
+const getSelectedValues = (groupsMapSelected) => [...groupsMapSelected.values()].map(item => item.name).join(", ").trim();
+exports.getSelectedValues = getSelectedValues;

package/dist/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/dist/filterButton/filterButton.js

@@ -20,7 +20,7 @@ const button_1 = require("../button/button");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useDrive_1 = require("../utils/theme/useDrive");
 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 = (0, useDriveClassName_1.useDriveClassName)("zen-filter-button");
     const isDrive = (0, useDrive_1.useDrive)();
     const hasQuantity = typeof quantity === "number";
@@ -29,7 +29,7 @@ const FilterButton = (_a) => {
         ? (e) => onClick(e.nativeEvent)
         : () => { }, [onClick]);
     const inlineStyle = (0, react_1.useMemo)(() => maxWidth || minWidth ? { style: Object.assign(Object.assign({}, (maxWidth ? { maxWidth: `${maxWidth}px` } : {})), (minWidth ? { minWidth: `${minWidth}px` } : {})) } : {}, [maxWidth, minWidth]);
-    return (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ id: id, title: title, disabled: disabled, type: type, className: (0, classNames_1.classNames)([
+    return (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ id: id, name: name, onBlur: onBlur, title: title, disabled: disabled, type: type, className: (0, classNames_1.classNames)([
             "zen-filter-button",
             driveComponentClass || "",
             `zen-filter-button--${type}`,

package/dist/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/dist/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/dist/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/dist/filters/components/filtersSidePanelDropdown.js

@@ -19,11 +19,11 @@ const dropdown_1 = require("../../dropdown/dropdown");
 const filtersHelper_1 = require("../filtersHelper");
 const filtersChip_1 = require("./filtersChip");
 const skeleton_1 = require("../../skeleton/skeleton");
-const dropdownHelper_1 = require("../../dropdown/dropdownHelper");
 const radioGroup_1 = require("../../radioGroup/radioGroup");
-const groupsHelper_1 = require("../../groupsFilter/groupsHelper");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const skeletonList_1 = require("../../skeletonList/skeletonList");
+const groupsHelper_1 = require("../../groupsFilterRaw/groupsHelper");
+const dropdownHelper_1 = require("../../dropdownRaw/dropdownHelper");
 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/dist/filters/components/filtersSidePanelRange.js

@@ -15,7 +15,7 @@ exports.FiltersSidePanelRange = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const filtersBarSidePanelRange_1 = require("../../filtersBar/filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange");
-const rangeHelper_1 = require("../../range/rangeHelper");
+const rangeHelper_1 = require("../../rangeRaw/utils/rangeHelper");
 const FiltersSidePanelRange = (_a) => {
     var { errorCheck } = _a, otherProps = __rest(_a, ["errorCheck"]);
     const { value } = otherProps;

package/dist/filters/filtersHelper.js

@@ -10,10 +10,10 @@ const filtersGroups_1 = require("./components/filtersGroups");
 const react_2 = __importDefault(require("react"));
 const isArraysEqualDeeply_1 = require("../utils/compareElementsUtils/isArraysEqualDeeply");
 const isElementsEqual_1 = require("../utils/compareElementsUtils/isElementsEqual");
-const groupsFilter_1 = require("../groupsFilter/groupsFilter");
 const filtersChip_1 = require("./components/filtersChip");
 const filtersDropdown_1 = require("./components/filtersDropdown");
 const filtersSearchList_1 = require("./components/filtersSearchList");
+const types_1 = require("../groupsFilterRaw/types");
 const createStateHash = (state) => {
     if (state === undefined) {
         return "undefined";
@@ -109,7 +109,7 @@ const getFiltersState = (children) => {
         state[childProps.id] = {};
         state[childProps.id].state = childProps.state;
         if (child.type === filtersGroups_1.FiltersGroups) {
-            state[childProps.id].defaultState = groupsFilter_1.groupsFilterTotalStateDefault;
+            state[childProps.id].defaultState = types_1.groupsFilterTotalStateDefault;
         }
         else if (child.type === filtersChip_1.FiltersChip) {
             state[childProps.id].defaultState = false;
@@ -130,7 +130,7 @@ const createStateObject = (children, field) => {
         const childProps = child.props;
         state[childProps.id] = {};
         if (child.type === filtersGroups_1.FiltersGroups && field === "defaultState") {
-            state[childProps.id] = groupsFilter_1.groupsFilterTotalStateDefault;
+            state[childProps.id] = types_1.groupsFilterTotalStateDefault;
         }
         else if (child.type === filtersChip_1.FiltersChip && field === "defaultState") {
             state[childProps.id] = false;

package/dist/filtersBar/components/filtersBarDropdown/filtersBarDropdown.js

@@ -10,10 +10,10 @@ const filtersBarSidePanelCheckboxGroup_1 = require("../../filtersBarSidePanel/co
 const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
 const pillBox_1 = require("../../../pillBox/pillBox");
 const classNames_1 = require("../../../commonHelpers/classNames/classNames");
-const groupsHelper_1 = require("../../../groupsFilter/groupsHelper");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
-const dropdownHelper_1 = require("../../../dropdown/dropdownHelper");
 const focusableSelector_1 = require("../../../utils/focusableSelector");
+const dropdownHelper_1 = require("../../../dropdownRaw/dropdownHelper");
+const groupsHelper_1 = require("../../../groupsFilterRaw/groupsHelper");
 // eslint-disable-next-line complexity
 const FiltersBarDropdown = ({ sidePanelTitle, className, props, state, useSidePanelView, sidePanelMaxGroupedItemsLength = 5, onChange }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();

package/dist/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/dist/filtersBar/components/filtersBarRange/filtersBarRange.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const sidePanelCell_1 = require("../../../sidePanel/sidePanelCell/sidePanelCell");
 const range_1 = require("../../../range/range");
 const filtersBarSidePanelRange_1 = require("../../filtersBarSidePanel/components/filtersBarSidePanelRange/filtersBarSidePanelRange");
-const rangeHelper_1 = require("../../../range/rangeHelper");
+const rangeHelper_1 = require("../../../rangeRaw/utils/rangeHelper");
 const useUniqueId_1 = require("../../../commonHelpers/useUniqueId");
 const FiltersBarRange = ({ sidePanelTitle, props, state, useSidePanelView, onChange, checkError }) => {
     const component = (0, jsx_runtime_1.jsx)(range_1.Range, Object.assign({}, props, { value: state.value, onChange: newValue => {

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

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const checkbox_1 = require("../../../../checkbox/checkbox");
 const dropdown_1 = require("../../../../dropdown/dropdown");
-const dropdownHelper_1 = require("../../../../dropdown/dropdownHelper");
+const dropdownHelper_1 = require("../../../../dropdownRaw/dropdownHelper");
 const FiltersBarSidePanelDropdownWithCheckbox = ({ props, state, onChange, getData }) => {
     const isFullSelectionMode = (0, react_1.useMemo)(() => "isAllSelected" in state && typeof (state).isAllSelected === "boolean", [state]);
     const [checkboxValue, setCheckboxValue] = (0, react_1.useState)(state.isChecked);

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

@@ -4,9 +4,9 @@ exports.FiltersBarSidePanelRange = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../../../../commonHelpers/classNames/classNames");
-const rangeHelper_1 = require("../../../../range/rangeHelper");
+const rangeHelper_1 = require("../../../../rangeRaw/utils/rangeHelper");
 const useLanguage_1 = require("../../../../utils/localization/useLanguage");
-const rangeField_1 = require("../../../../range/rangeField");
+const rangeField_1 = require("../../../../rangeRaw/components/rangeField");
 const useDirection_1 = require("../../hooks/useDirection");
 const useMobile_1 = require("../../../../commonHelpers/hooks/useMobile");
 const formFieldError_1 = require("../../../../formFieldError/formFieldError");

package/dist/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/dist/formField/components/formFieldBanner.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldBanner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const banner_1 = require("../../banner/banner");
+// TODO: banners with assistive text?
+// TODO: test with complex components: dropdowns, date pickers, etc.
+const FormFieldBanner = (props) => (0, jsx_runtime_1.jsx)(banner_1.Banner, Object.assign({ className: "zen-form-field-banner" }, props));
+exports.FormFieldBanner = FormFieldBanner;

package/dist/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/dist/formField/components/formFieldSkeleton.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldSkeleton = void 0;
+const FormFieldSkeleton = () => null;
+exports.FormFieldSkeleton = FormFieldSkeleton;

package/dist/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/dist/formField/components/formFieldWithLabel.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldWithLabel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const formGroupItem_1 = require("../../formGroupItem/formGroupItem");
+const FormFieldWithLabel = ({ hasCustomWidth, classes, widthObj, props, id, container, trailing, trailingId }) => {
+    if (!hasCustomWidth) {
+        return (0, jsx_runtime_1.jsxs)("div", { className: classes, style: widthObj, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: props.labelClassesName, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] });
+    }
+    return (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes, style: widthObj, children: [props.label && (0, jsx_runtime_1.jsx)(formGroupItem_1.FormGroupItem, { className: props.labelClassesName, id: id, value: props.label, tooltip: props.tooltip }), (0, jsx_runtime_1.jsx)("div", { className: props.controlClassesName, children: container })] }), trailing && (0, jsx_runtime_1.jsx)("span", { className: "zen-form-field__trailing-text", id: trailingId, children: trailing })] });
+};
+exports.FormFieldWithLabel = FormFieldWithLabel;

package/dist/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/dist/formField/components/formFieldWithoutLabel.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFieldWithoutLabel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const FormFieldWithoutLabel = ({ hasCustomWidth, classes, widthObj, container, trailing, trailingId }) => {
+    if (!hasCustomWidth) {
+        return (0, jsx_runtime_1.jsx)("div", { className: classes, style: widthObj, children: container });
+    }
+    return (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { className: classes, style: widthObj, children: container }), trailing && (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-form-field__trailing-text"]), id: trailingId, children: trailing })] });
+};
+exports.FormFieldWithoutLabel = FormFieldWithoutLabel;