@geotab/zenith 1.26.6 → 2.0.0-beta.0

package/esm/selectList/selectList.helpers.d.ts

@@ -0,0 +1,14 @@
+import { CheckboxState } from "../checkbox/checkboxState";
+import { IListState, IListStateProps } from "./selectList";
+import { ISelectListItem } from "./selectListItem";
+export declare const getItemIdByIndex: (state: Map<string, CheckboxState>, index: number) => string | undefined;
+export declare const getItemIndexById: (state: Map<string, CheckboxState>, id: string) => number;
+export declare const updateItemState: (initialState: Map<string, CheckboxState>, multiselect: boolean, updatedId: string, newState: CheckboxState) => [Map<string, CheckboxState>, boolean];
+export declare const searchItemIndex: (items: ISelectListItem[], searchStr: string) => number;
+export declare const getFirstIndex: (items: ISelectListItem[]) => number;
+export declare const getLastIndex: (items: ISelectListItem[]) => number;
+export declare const getNextIndex: (currIndex: number, items: ISelectListItem[]) => number;
+export declare const getPrevIndex: (currIndex: number, items: ISelectListItem[]) => number;
+export declare const getFirstActiveIndex: (state: Map<string, CheckboxState>, items: ISelectListItem[], multiselect: boolean) => number;
+export declare const getItemsState: (items: ISelectListItem[], value: Map<string, CheckboxState>, multiselect: boolean) => Map<string, CheckboxState>;
+export declare const getInitialState: (props: IListStateProps) => IListState;

package/esm/selectList/selectList.helpers.js

@@ -0,0 +1,86 @@
+import { CheckboxState } from "../checkbox/checkboxState";
+import { getComponentText } from "../commonHelpers/reactHelpers/reactHelpers";
+export const getItemIdByIndex = (state, index) => [...state.keys()][index];
+export const getItemIndexById = (state, id) => [...state.keys()].indexOf(id);
+export const updateItemState = (initialState, multiselect, updatedId, newState) => {
+    const temp = new Map(initialState);
+    let isUpdated = false;
+    if (!temp.has(updatedId)) {
+        return [temp, isUpdated];
+    }
+    let prevState = temp.get(updatedId);
+    isUpdated = prevState !== newState;
+    temp.set(updatedId, newState);
+    if (!multiselect) {
+        let onItem = newState !== CheckboxState.Off && updatedId;
+        temp.forEach((itemState, itemId) => {
+            if (itemState !== CheckboxState.Off && !onItem) {
+                onItem = itemId;
+            }
+            if (itemId !== onItem) {
+                prevState = temp.get(itemId);
+                isUpdated = isUpdated || prevState !== CheckboxState.Off;
+                temp.set(itemId, CheckboxState.Off);
+            }
+        });
+    }
+    return [temp, isUpdated];
+};
+export const searchItemIndex = (items, searchStr) => {
+    if (!searchStr) {
+        return -1;
+    }
+    return items.findIndex(item => {
+        if (item.disabled) {
+            return false;
+        }
+        const content = getComponentText(item.children);
+        return content.toLocaleLowerCase().indexOf(searchStr.toLocaleLowerCase()) > -1;
+    });
+};
+export const getFirstIndex = (items) => items.findIndex(i => !i.disabled);
+export const getLastIndex = (items) => {
+    const reverseLastIndex = [...items].reverse().findIndex(i => !i.disabled);
+    return reverseLastIndex === -1 ? reverseLastIndex : items.length - reverseLastIndex - 1;
+};
+export const getNextIndex = (currIndex, items) => {
+    const next = getFirstIndex(items.slice(currIndex + 1));
+    return next === -1 ? getFirstIndex(items) : next + currIndex + 1;
+};
+export const getPrevIndex = (currIndex, items) => {
+    const prev = getLastIndex(items.slice(0, currIndex));
+    return prev === -1 ? getLastIndex(items) : prev;
+};
+export const getFirstActiveIndex = (state, items, multiselect) => {
+    let firstActiveItemIndex = -1;
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (!item.disabled && firstActiveItemIndex === -1) {
+            firstActiveItemIndex = i;
+        }
+        if (state.get(item.id) === CheckboxState.On && !item.disabled) {
+            return i;
+        }
+    }
+    return multiselect ? firstActiveItemIndex : -1;
+};
+export const getItemsState = (items, value, multiselect) => {
+    let forceUncheck = false;
+    return items.reduce((res, item) => {
+        const itemState = value.get(item.id);
+        if (!itemState || itemState === CheckboxState.Off || forceUncheck) {
+            return res.set(item.id, CheckboxState.Off);
+        }
+        if (!multiselect) {
+            forceUncheck = true;
+        }
+        return res.set(item.id, itemState);
+    }, new Map());
+};
+export const getInitialState = ({ items, value = new Map([]), multiselect }) => ({
+    itemsState: getItemsState(items, value, multiselect),
+    isItemsStateChanged: false,
+    activeIndex: -1,
+    searchStr: "",
+    level: ""
+});

package/esm/selectList/selectList.js

@@ -0,0 +1,124 @@
+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 } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { CheckboxState } from "../checkbox/checkboxState";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { getKeysPressed, isKeyForSearch } from "../commonHelpers/keyboard";
+import { ListAction } from "./selectList.actionTypes";
+import { getInitialState, getItemIdByIndex } from "./selectList.helpers";
+import { selectListReducer } from "./selectList.reducer";
+import { SelectListItem } from "./selectListItem";
+import { isChildOf } from "../utils/isChildOf";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+import { forwardRef, memo, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
+import { getScrollableParent } from "../utils/getScrollableParent";
+export const defaultListItemHeight = 40;
+const MemoizedSelectListItem = memo(SelectListItem);
+const SelectListInnerComp = forwardRef(({ id, items, value, disabled, activeIndex = -1, title, multiselect = false, showCheckbox = false, standalone, className = "", onClickItem, onChangeItem, onKeyDown, onFocus, onBlur, style = {} }, listRef) => {
+    var _a;
+    const driveComponentClass = useDriveClassName("zen-select-list");
+    const state = getInitialState({ items, value, multiselect });
+    state.activeIndex = activeIndex;
+    return _jsx("ul", { id: id, ref: listRef, className: classNames(["zen-select-list", driveComponentClass || "", className]), role: "listbox", "aria-multiselectable": multiselect, "aria-activedescendant": standalone ? (getItemIdByIndex(state.itemsState, state.activeIndex) || ((_a = items.find(el => !el.disabled)) === null || _a === void 0 ? void 0 : _a.id)) : undefined, "aria-label": title, "aria-disabled": disabled, tabIndex: standalone && !disabled ? 0 : -1, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, style: style, children: items.map((item, index) => _createElement(MemoizedSelectListItem, Object.assign({}, item, { className: classNames(["zen-select-list__item", item.className || ""]), key: item.id, showCheckbox: showCheckbox, state: state.itemsState.get(item.id), focused: state.activeIndex === index, onChange: onChangeItem, onClick: onClickItem }), item.children)) });
+});
+SelectListInnerComp.displayName = "SelectListInnerComp";
+const SelectListInner = memo(SelectListInnerComp);
+export const SelectList = (_a) => {
+    var { items: outerItems, value = new Map(), multiselect = false, selectItemOnFocus = true, forceSelection = false, disabled, onChange, onClick } = _a, rest = __rest(_a, ["items", "value", "multiselect", "selectItemOnFocus", "forceSelection", "disabled", "onChange", "onClick"]);
+    const items = useMemo(() => outerItems, [outerItems]);
+    const listRef = useRef(null);
+    const [state, dispatchState] = useReducer(selectListReducer, { items, value, multiselect }, getInitialState);
+    const innerValue = useMemo(() => JSON.stringify(Array.from(getInitialState({ items, value, multiselect }).itemsState)), [items, value, multiselect]);
+    useEffect(() => {
+        const parsedValue = JSON.parse(innerValue);
+        dispatchState({ type: ListAction.Reset, payload: { items, value: new Map(parsedValue), multiselect } });
+    }, [innerValue, multiselect, items]);
+    useEffect(() => {
+        if (!multiselect) {
+            dispatchState({ type: ListAction.FocusFirst, payload: { items } });
+        }
+        dispatchState({ type: ListAction.Focus, payload: { items, multiselect } });
+    }, [multiselect, items]);
+    useEffect(() => {
+        onChange && state.isItemsStateChanged && onChange(new Map(state.itemsState));
+    }, [state.isItemsStateChanged, state.itemsState, onChange]);
+    const onChangeItem = useCallback((updatedId, updatedState) => {
+        dispatchState({ type: ListAction.ChangeItemState, payload: { updatedId, updatedState, multiselect } });
+    }, [multiselect]);
+    useEffect(() => {
+        if (state.activeIndex >= 0 && document.activeElement && listRef.current && isChildOf(document.activeElement, listRef.current)) {
+            const itemEl = listRef.current.querySelector(`.zen-select-list__item:nth-child(${state.activeIndex + 1})`);
+            itemEl === null || itemEl === void 0 ? void 0 : itemEl.scrollIntoView({ block: "nearest" });
+        }
+    }, [state.activeIndex]);
+    useEffect(() => {
+        if (!state.level || !onClick) {
+            return;
+        }
+        onClick(state.level);
+        dispatchState({ type: ListAction.SetLevel, payload: undefined });
+    }, [onClick, state.level]);
+    const onKeyDown = (e) => {
+        const handlers = {
+            "ArrowUp": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusPrev, payload: { items } }) : dispatchState({ type: ListAction.SelectPrev, payload: { items, multiselect } }),
+            "Shift+Tab": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusPrev, payload: { items } }) : dispatchState({ type: ListAction.SelectPrev, payload: { items, multiselect } }),
+            "ArrowDown": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusNext, payload: { items } }) : dispatchState({ type: ListAction.SelectNext, payload: { items, multiselect } }),
+            "Tab": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusNext, payload: { items } }) : dispatchState({ type: ListAction.SelectNext, payload: { items, multiselect } }),
+            "Enter": () => {
+                const item = items[state.activeIndex];
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                if (!item) {
+                    return;
+                }
+                if (item.multiLevel) {
+                    dispatchState({ type: ListAction.SetLevel, payload: { items } });
+                }
+                else {
+                    dispatchState({ type: ListAction.ChangeItemState, payload: {
+                            updatedId: item.id,
+                            updatedState: item.state === CheckboxState.On ? CheckboxState.Off : CheckboxState.On,
+                            multiselect: multiselect
+                        } });
+                }
+            },
+            "Home": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusFirst, payload: { items } }) : dispatchState({ type: ListAction.SelectFirst, payload: { items, multiselect } }),
+            "End": () => multiselect || !selectItemOnFocus ? dispatchState({ type: ListAction.FocusLast, payload: { items } }) : dispatchState({ type: ListAction.SelectLast, payload: { items, multiselect } }),
+            "Space": () => dispatchState({ type: ListAction.ToggleCurrent, payload: { multiselect } }),
+            "Shift+ArrowUp": () => multiselect && dispatchState({ type: ListAction.SelectPrev, payload: { items, multiselect } }),
+            "Shift+ArrowDown": () => multiselect && dispatchState({ type: ListAction.SelectNext, payload: { items, multiselect } }),
+            "Ctrl+Shift+Home": () => multiselect && dispatchState({ type: ListAction.SelectAllToTheBeginning, payload: { items, multiselect } }),
+            "Ctrl+Shift+End": () => multiselect && dispatchState({ type: ListAction.SelectAllToTheEnd, payload: { items, multiselect } }),
+            "Ctrl+KeyA": () => multiselect && dispatchState({ type: ListAction.ToggleAll, payload: { items, multiselect } }),
+            "default": () => dispatchState({ type: ListAction.SearchItem, payload: { items, key: e.key } })
+        };
+        const handlerName = getKeysPressed(e);
+        const handler = handlers[handlerName] || (isKeyForSearch(e.code) && handlers["default"]);
+        if (handler) {
+            handler();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    const onFocus = () => {
+        const scrollableParent = getScrollableParent(listRef.current);
+        if (!scrollableParent || scrollableParent.scrollTop === 0) {
+            dispatchState({ type: ListAction.Focus, payload: { items, multiselect } });
+        }
+    };
+    const onBlur = () => {
+        multiselect && dispatchState({ type: ListAction.Blur, payload: { multiselect } });
+        !multiselect && forceSelection && dispatchState({ type: ListAction.Blur, payload: { multiselect } });
+    };
+    return _jsx(SelectListInner, Object.assign({}, rest, { ref: listRef, value: state.itemsState, items: items, activeIndex: state.activeIndex, multiselect: multiselect, standalone: true, disabled: disabled, onChangeItem: onChangeItem, onClickItem: onClick, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur }));
+};
+export const PassiveSelectList = (props) => _jsx(SelectListInnerComp, Object.assign({}, props, { standalone: false }));

package/esm/selectList/selectList.reducer.d.ts

@@ -0,0 +1,10 @@
+import { CheckboxState } from "../checkbox/checkboxState";
+import { IListState } from "./selectList";
+import { TAction } from "./selectList.actionTypes";
+export declare const selectListReducer: (state: IListState, action: TAction) => {
+    itemsState: Map<string, CheckboxState>;
+    isItemsStateChanged: boolean;
+    activeIndex: number;
+    searchStr: string;
+    level: string;
+};

package/esm/selectList/selectList.reducer.js

@@ -0,0 +1,108 @@
+import { CheckboxState } from "../checkbox/checkboxState";
+import { ListAction, SelectDirection } from "./selectList.actionTypes";
+import { getFirstActiveIndex, getFirstIndex, getItemIdByIndex, getItemIndexById, getLastIndex, getNextIndex, getPrevIndex, searchItemIndex, updateItemState } from "./selectList.helpers";
+const selectItem = (state, itemIndex, multiselect) => {
+    const itemId = getItemIdByIndex(state.itemsState, itemIndex);
+    if (!itemId) {
+        return Object.assign({}, state);
+    }
+    const [itemsState, isUpdated] = updateItemState(state.itemsState, multiselect, itemId, CheckboxState.On);
+    return Object.assign(Object.assign({}, state), { activeIndex: itemIndex, itemsState, isItemsStateChanged: isUpdated, searchStr: "" });
+};
+const toggleItems = (items, state, activeIndex, direction, multiselect, newState) => {
+    if (!multiselect) {
+        return Object.assign({}, state);
+    }
+    let newItemsState = new Map(state.itemsState);
+    let isUpdated = false;
+    const startIndex = direction === SelectDirection.Up ? 0 : activeIndex;
+    const endIndex = direction === SelectDirection.Up ? activeIndex + 1 : items.length;
+    const itemsSlice = items.slice(startIndex, endIndex);
+    itemsSlice.forEach(item => {
+        if (!item.disabled) {
+            const itemState = newItemsState.get(item.id);
+            const newItemState = newState || (itemState === CheckboxState.On ? CheckboxState.Off : CheckboxState.On); // Toggle state if newState is not defined
+            const [updatedState, isItemUpdated] = updateItemState(newItemsState, multiselect, item.id, newItemState);
+            newItemsState = updatedState;
+            isUpdated = isUpdated || isItemUpdated;
+        }
+    });
+    return Object.assign(Object.assign({}, state), { activeIndex, itemsState: newItemsState, isItemsStateChanged: isUpdated, searchStr: "" });
+};
+// eslint-disable-next-line complexity
+export const selectListReducer = (state, action) => {
+    const { type, payload } = action;
+    switch (type) {
+        case ListAction.ChangeItemState: {
+            const [newState, isUpdated] = updateItemState(state.itemsState, payload.multiselect, payload.updatedId, payload.updatedState);
+            return Object.assign(Object.assign({}, state), { itemsState: newState, isItemsStateChanged: isUpdated, activeIndex: getItemIndexById(newState, payload.updatedId), searchStr: "" });
+        }
+        case ListAction.ToggleCurrent: {
+            const currentItemId = getItemIdByIndex(state.itemsState, state.activeIndex);
+            const currentState = currentItemId && state.itemsState.get(currentItemId) || CheckboxState.Off;
+            const [newItemsState, isUpdated] = currentItemId
+                ? updateItemState(state.itemsState, payload.multiselect, currentItemId, currentState === CheckboxState.On ? CheckboxState.Off : CheckboxState.On)
+                : [state.itemsState, false];
+            return Object.assign(Object.assign({}, state), { itemsState: newItemsState, isItemsStateChanged: isUpdated, searchStr: "" });
+        }
+        case ListAction.FocusFirst: return Object.assign(Object.assign({}, state), { activeIndex: getFirstIndex(payload.items), isItemsStateChanged: false, searchStr: "" });
+        case ListAction.FocusLast: return Object.assign(Object.assign({}, state), { activeIndex: getLastIndex(payload.items), isItemsStateChanged: false, searchStr: "" });
+        case ListAction.FocusNext: return Object.assign(Object.assign({}, state), { activeIndex: getNextIndex(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
+        case ListAction.FocusPrev: return Object.assign(Object.assign({}, state), { activeIndex: getPrevIndex(state.activeIndex, payload.items), isItemsStateChanged: false, searchStr: "" });
+        case ListAction.SelectFirst: return selectItem(state, getFirstIndex(payload.items), payload.multiselect);
+        case ListAction.SelectLast: return selectItem(state, getLastIndex(payload.items), payload.multiselect);
+        case ListAction.SelectNext: return selectItem(state, getNextIndex(state.activeIndex, payload.items), payload.multiselect);
+        case ListAction.SelectPrev: return selectItem(state, getPrevIndex(state.activeIndex, payload.items), payload.multiselect);
+        case ListAction.SelectAllToTheBeginning: return toggleItems(payload.items, state, state.activeIndex, SelectDirection.Up, payload.multiselect, CheckboxState.On);
+        case ListAction.SelectAllToTheEnd: return toggleItems(payload.items, state, state.activeIndex, SelectDirection.Down, payload.multiselect, CheckboxState.On);
+        case ListAction.ToggleAll: return toggleItems(payload.items, state, 0, SelectDirection.Down, payload.multiselect);
+        case ListAction.SearchItem: {
+            const isSymbol = payload.key.length === 1;
+            const isBackSpace = payload.key === "Backspace";
+            let searchStr = state.searchStr;
+            if (isSymbol) {
+                searchStr += payload.key;
+            }
+            if (isBackSpace) {
+                searchStr = searchStr.slice(0, -1);
+            }
+            return Object.assign(Object.assign({}, state), { activeIndex: state.searchStr !== searchStr ? searchItemIndex(payload.items, searchStr) : state.activeIndex, isItemsStateChanged: false, searchStr });
+        }
+        case ListAction.Blur: {
+            return Object.assign(Object.assign({}, state), { isItemsStateChanged: false, searchStr: "", activeIndex: -1 });
+        }
+        case ListAction.Focus: {
+            return Object.assign(Object.assign({}, state), { isItemsStateChanged: false, activeIndex: state.activeIndex > -1 ? state.activeIndex : getFirstActiveIndex(state.itemsState, payload.items, payload.multiselect) });
+        }
+        case ListAction.FocusPrevPage: {
+            const prevPage = state.activeIndex - payload.pageSize;
+            const prevIndex = prevPage > -1 ? prevPage : 0;
+            return Object.assign(Object.assign({}, state), { isItemsStateChanged: false, activeIndex: getPrevIndex(prevIndex + 1, payload.items), searchStr: "" });
+        }
+        case ListAction.FocusNextPage: {
+            const nextPage = state.activeIndex + payload.pageSize;
+            const nextIndex = nextPage < payload.items.length ? nextPage : payload.items.length - 1;
+            return Object.assign(Object.assign({}, state), { isItemsStateChanged: false, activeIndex: getNextIndex(nextIndex - 1, payload.items), searchStr: "" });
+        }
+        case ListAction.Reset: {
+            const newState = payload.value;
+            const filteredMergedState = [...payload.value, ...state.itemsState].filter(([key]) => payload.items.find(item => item.id === key));
+            let newItemsState = new Map(filteredMergedState);
+            payload.items.forEach(item => {
+                const newItemState = newState.get(item.id) || CheckboxState.Off;
+                const [updatedState] = updateItemState(newItemsState, payload.multiselect, item.id, newItemState);
+                newItemsState = updatedState;
+            });
+            const prevActiveItemId = getItemIdByIndex(state.itemsState, state.activeIndex);
+            const newActiveItemIndex = !!prevActiveItemId && getItemIndexById(newItemsState, prevActiveItemId);
+            const activeIndex = newActiveItemIndex ? newActiveItemIndex : -1;
+            return Object.assign(Object.assign({}, state), { itemsState: newItemsState, activeIndex, isItemsStateChanged: false });
+        }
+        case ListAction.SetLevel: {
+            const item = payload ? payload.items[state.activeIndex] : undefined;
+            const newLevel = item && item.multiLevel ? item.id : "";
+            return Object.assign(Object.assign({}, state), { level: newLevel });
+        }
+        default: throw new Error("Unknown action");
+    }
+};

package/esm/selectList/selectListItem.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { CheckboxState } from "../checkbox/checkboxState";
+import "./selectList.less";
+import { IZenIdComponentProps } from "../commonHelpers/zenComponent";
+export interface ISelectListItem extends IZenIdComponentProps {
+    state?: CheckboxState;
+    disabled?: boolean;
+    showCheckbox?: boolean;
+    focused?: boolean;
+    onChange?: (id: string, state: CheckboxState) => void;
+    onClick?: (id: string) => void;
+    multiLevel?: boolean;
+}
+export declare const SelectListItem: React.FC<ISelectListItem>;

package/esm/selectList/selectListItem.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckboxState } from "../checkbox/checkboxState";
+import { CheckboxNonInteractive } from "../checkboxNonInteractive/checkboxNonInteractive";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { IconChevronRight } from "../icons/iconChevronRight";
+import { useDriveClassName } from "../utils/theme/useDriveClassName";
+export const SelectListItem = ({ id, disabled = false, state = CheckboxState.Off, showCheckbox = false, focused = false, onChange, onClick, multiLevel, className = "", children }) => {
+    const driveClassName = useDriveClassName("zen-select-item");
+    const onClickFunc = () => {
+        if (disabled) {
+            return;
+        }
+        const newState = state === CheckboxState.On ? CheckboxState.Off : CheckboxState.On;
+        if (multiLevel && !showCheckbox) {
+            onClick && onClick(id);
+        }
+        onChange && onChange(id, newState);
+    };
+    return _jsx("li", { "data-id": id, className: classNames([
+            "zen-select-item",
+            showCheckbox ? "zen-select-item--with-checkbox" : "",
+            focused ? "zen-select-item--focused" : "",
+            driveClassName || "",
+            className
+        ]), role: "option", "aria-selected": state === CheckboxState.On, "aria-disabled": disabled, onClick: onClickFunc, id: id, children: _jsxs("div", { className: classNames([
+                "zen-select-list__item-content",
+                "zen-select-item__wrapper",
+                "zen-ellipsis",
+                multiLevel ? "zen-select-item__wrapper--with-arrow" : ""
+            ]), children: [showCheckbox ?
+                    _jsx(CheckboxNonInteractive, { className: "zen-select-item__control-view", checked: state === CheckboxState.On, indeterminate: state === CheckboxState.Indeterminate, disabled: disabled, children: children })
+                    : children, multiLevel && !showCheckbox ? _jsx(IconChevronRight, { size: "large" }) : null] }) });
+};

package/esm/selectRaw/hooks/usePopupWidth.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface IUsePopupWidth {
+    minWidth: React.CSSProperties["minWidth"];
+    maxWidth: React.CSSProperties["maxWidth"];
+    width: React.CSSProperties["width"];
+}
+export declare const usePopupWidth: (ref: React.RefObject<HTMLDivElement>) => IUsePopupWidth;
+export {};

package/esm/selectRaw/hooks/usePopupWidth.js

@@ -0,0 +1,35 @@
+import React, { useLayoutEffect } from "react";
+import { useResize } from "../../commonHelpers/hooks/useResize";
+import { POPUP_MIN_WIDTH } from "../utils/constants";
+import { getValidWidth } from "../utils/getValidWidth";
+export const usePopupWidth = (ref) => {
+    var _a, _b;
+    const [popupWidth, setPopupWidth] = React.useState({
+        minWidth: POPUP_MIN_WIDTH,
+        width: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || POPUP_MIN_WIDTH,
+        maxWidth: "100%"
+    });
+    useLayoutEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const { width } = ref.current.getBoundingClientRect();
+        setPopupWidth({
+            minWidth: POPUP_MIN_WIDTH,
+            width: getValidWidth(width),
+            maxWidth: "100%"
+        });
+    }, [(_b = ref.current) === null || _b === void 0 ? void 0 : _b.clientWidth, ref]);
+    useResize(() => {
+        if (!ref.current) {
+            return;
+        }
+        const { width } = ref.current.getBoundingClientRect();
+        setPopupWidth({
+            minWidth: POPUP_MIN_WIDTH,
+            width: getValidWidth(width),
+            maxWidth: "100%"
+        });
+    }, true);
+    return popupWidth;
+};

package/esm/selectRaw/select.actionTypes.d.ts

@@ -0,0 +1,30 @@
+import { TAction } from "../selectList/selectList.actionTypes";
+import { ISelectListItem } from "../selectList/selectListItem";
+export declare enum SelectAction {
+    Expand = "expand",
+    Collapse = "collapse",
+    CollapseAndSelect = "collapseAndSelect",
+    FocusFirstAndExpand = "focusFirstAndExpand",
+    SearchAndExpand = "searchAndExpand"
+}
+interface IExpandPayload {
+    items: ISelectListItem[];
+}
+interface ICollapsePayload {
+}
+interface ICollapseAndSelectPayload {
+}
+interface IFocusFirstAndExpandPayload {
+    items: ISelectListItem[];
+}
+interface ISearchAndExpandPayload {
+    key: string;
+    items: ISelectListItem[];
+}
+type TExpandAction = IAction<SelectAction.Expand, IExpandPayload>;
+type TCollapseAction = IAction<SelectAction.Collapse, ICollapsePayload>;
+type TCollapseAndSelectAction = IAction<SelectAction.CollapseAndSelect, ICollapseAndSelectPayload>;
+type TFocusFirstAndExpandAction = IAction<SelectAction.FocusFirstAndExpand, IFocusFirstAndExpandPayload>;
+type TSearchAndExpandAction = IAction<SelectAction.SearchAndExpand, ISearchAndExpandPayload>;
+export type TSelectAction = TAction | TExpandAction | TCollapseAction | TCollapseAndSelectAction | TFocusFirstAndExpandAction | TSearchAndExpandAction;
+export {};

package/esm/selectRaw/select.actionTypes.js

@@ -0,0 +1,8 @@
+export var SelectAction;
+(function (SelectAction) {
+    SelectAction["Expand"] = "expand";
+    SelectAction["Collapse"] = "collapse";
+    SelectAction["CollapseAndSelect"] = "collapseAndSelect";
+    SelectAction["FocusFirstAndExpand"] = "focusFirstAndExpand";
+    SelectAction["SearchAndExpand"] = "searchAndExpand";
+})(SelectAction || (SelectAction = {}));

package/esm/selectRaw/select.helpers.d.ts

@@ -0,0 +1,6 @@
+import { CheckboxState } from "../checkbox/checkboxState";
+import { ISelectListItem } from "../selectList/selectListItem";
+import { ISelectStatePropsRaw, ISelectStateRaw } from "./selectRaw";
+export declare const getSelectValue: (state: Map<string, CheckboxState>, items: ISelectListItem[]) => string | undefined;
+export declare const getSelectInitialState: (props: ISelectStatePropsRaw) => ISelectStateRaw;
+export declare const positionPopup: (triggerElement: HTMLElement, popupEl: HTMLElement, acceptableMinPopupHeight?: number, maxPopupHeight?: number) => void;

package/esm/selectRaw/select.helpers.js

@@ -0,0 +1,53 @@
+import { getBorders } from "../utils/positioningUtils/getBorders";
+import { CheckboxState } from "../checkbox/checkboxState";
+import { getFirstActiveIndex, getInitialState } from "../selectList/selectList.helpers";
+import { getParentWithHiddenOverflow } from "../utils/getParentWithHiddenOverflow";
+import { getRelativeParent } from "../utils/getRelativeParent";
+export const getSelectValue = (state, items) => {
+    var _a;
+    const newValIndex = getFirstActiveIndex(state, items, false);
+    return (_a = items[newValIndex]) === null || _a === void 0 ? void 0 : _a.id;
+};
+export const getSelectInitialState = (props) => {
+    const state = props.items.map(item => [item.id, item.id === props.value ? CheckboxState.On : CheckboxState.Off]);
+    return Object.assign(Object.assign({ expanded: false }, getInitialState({ items: props.items, multiselect: false })), { itemsState: new Map(state) });
+};
+const getElementInnerRect = (elRect, bordersRect) => ({
+    top: elRect.top + bordersRect.top,
+    bottom: elRect.bottom - bordersRect.bottom,
+    left: elRect.left + bordersRect.left,
+    right: elRect.right - bordersRect.right,
+    height: elRect.height - bordersRect.top - bordersRect.bottom,
+    width: elRect.width - bordersRect.left - bordersRect.right
+});
+export const positionPopup = (triggerElement, popupEl, acceptableMinPopupHeight = 0, maxPopupHeight = Number.POSITIVE_INFINITY) => {
+    popupEl.style.height = "auto";
+    const triggerRect = triggerElement.getBoundingClientRect();
+    const relativeParent = getRelativeParent(triggerElement) || document.body;
+    const parentDomRect = relativeParent.getBoundingClientRect();
+    const parentBorders = getBorders(relativeParent);
+    const parentRect = getElementInnerRect(parentDomRect, parentBorders);
+    const cuttingParent = getParentWithHiddenOverflow(triggerElement) || document.body;
+    const cuttingParentDomRect = cuttingParent.getBoundingClientRect();
+    const cuttingParentBorders = getBorders(relativeParent);
+    const cuttingParentRect = getElementInnerRect(cuttingParentDomRect, cuttingParentBorders);
+    const spaceToTop = triggerRect.top - cuttingParentRect.top;
+    const spaceToBottom = cuttingParentRect.bottom - triggerRect.bottom;
+    const alignment = (spaceToBottom < acceptableMinPopupHeight && spaceToTop > spaceToBottom) ? "top" : "bottom";
+    const childrenHeight = popupEl.scrollHeight;
+    const position = alignment === "bottom"
+        ? {
+            top: triggerRect.top - parentRect.top + triggerRect.height,
+            bottom: undefined,
+            height: Math.min(maxPopupHeight, spaceToBottom, childrenHeight)
+        }
+        : {
+            top: undefined,
+            bottom: parentRect.bottom - triggerRect.bottom + triggerRect.height,
+            height: Math.min(maxPopupHeight, spaceToTop, childrenHeight)
+        };
+    Object.keys(position).forEach((prop) => {
+        const propValue = position[prop];
+        popupEl.style[prop] = propValue === undefined ? "auto" : `${propValue}px`;
+    });
+};

package/esm/selectRaw/select.reducer.d.ts

@@ -0,0 +1,10 @@
+import { TSelectAction } from "./select.actionTypes";
+import { ISelectStateRaw } from "./selectRaw";
+export declare const selectReducer: (state: ISelectStateRaw, action: TSelectAction) => {
+    expanded: boolean;
+    itemsState: Map<string, import("..").CheckboxState>;
+    isItemsStateChanged: boolean;
+    activeIndex: number;
+    searchStr: string;
+    level: string;
+};

package/esm/selectRaw/select.reducer.js

@@ -0,0 +1,32 @@
+import { SelectAction } from "./select.actionTypes";
+import { selectListReducer } from "../selectList/selectList.reducer";
+import { ListAction } from "../selectList/selectList.actionTypes";
+export const selectReducer = (state, action) => {
+    const { type, payload } = action;
+    switch (type) {
+        case SelectAction.Expand: {
+            const newState = selectListReducer(state, { type: ListAction.Focus, payload: { items: payload.items, multiselect: false } });
+            return Object.assign(Object.assign(Object.assign({}, state), newState), { expanded: true });
+        }
+        case SelectAction.Collapse: {
+            return Object.assign(Object.assign({}, state), { activeIndex: -1, expanded: false });
+        }
+        case SelectAction.CollapseAndSelect: {
+            const newState = selectListReducer(state, { type: ListAction.Blur, payload: { multiselect: false } });
+            return Object.assign(Object.assign(Object.assign({}, state), newState), { expanded: false });
+        }
+        case SelectAction.FocusFirstAndExpand: {
+            const listState = selectListReducer(state, { type: ListAction.FocusFirst, payload: { items: payload.items } });
+            return Object.assign(Object.assign(Object.assign({}, state), listState), { expanded: true });
+        }
+        case SelectAction.SearchAndExpand: {
+            const listState = selectListReducer(state, { type: ListAction.SearchItem, payload: { items: payload.items, key: payload.key } });
+            return Object.assign(Object.assign(Object.assign({}, state), listState), { expanded: true });
+        }
+        default: {
+            const newSelectListState = selectListReducer(state, action);
+            const expanded = newSelectListState.isItemsStateChanged ? false : state.expanded;
+            return Object.assign(Object.assign(Object.assign({}, state), newSelectListState), { expanded });
+        }
+    }
+};

package/esm/selectRaw/selectRaw.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { IListState } from "../selectList/selectList";
+import { ISelectListItem } from "../selectList/selectListItem";
+import "./selectRaw.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+export interface ISelectRaw extends IZenComponentProps {
+    id?: string;
+    title: string;
+    pageSize?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    items: ISelectListItem[];
+    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;
+}
+export interface ISelectStateRaw extends IListState {
+    expanded: boolean;
+}
+export interface ISelectStatePropsRaw {
+    items: ISelectListItem[];
+    value?: string;
+}
+export declare const SelectRaw: React.ForwardRefExoticComponent<ISelectRaw & React.RefAttributes<HTMLDivElement>>;