@astral/ui 4.4.0 → 4.5.0

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/useLogic/useLogic.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const array_1 = require("../../../utils/array");
+const useLogic = ({ isOpen, initialValue, options, onChange, dialogProps, onInputChange, onRetry, meta, onShowUserHint, isLoadingModal, minSymbolsToFetch = 0, isLoading, isLoadingError, loadingErrorMsg, treeProps, }) => {
+    const [value, setValue] = (0, react_1.useState)(initialValue);
+    const [searchValue, setSearchValue] = (0, react_1.useState)();
+    const { onClose, ...restDialogProps } = dialogProps;
+    (0, react_1.useEffect)(() => {
+        setValue(initialValue);
+    }, [initialValue]);
+    (0, react_1.useEffect)(() => {
+        // В поле ввода вставляем выбранное значение или пустую строку для запроса на открытие модального окна
+        if (isOpen) {
+            setSearchValue('');
+        }
+    }, [isOpen]);
+    const addIsForceExpandedFlag = (item) => {
+        if (item.children) {
+            return {
+                ...item,
+                options: { ...(item.options || {}), isForceExpanded: true },
+            };
+        }
+        return item;
+    };
+    // Если строка поиска не пустая и загрузки нет, то раскрываем все дерево в отфильтрованной выдаче
+    const optionToRender = (0, react_1.useMemo)(() => searchValue && !isLoading
+        ? (0, array_1.deepMap)(options, 'children', addIsForceExpandedFlag)
+        : options, [options, searchValue, isLoading]);
+    const handleChangeSearchField = (event) => {
+        setSearchValue(event.target.value);
+        onInputChange(event.target.value);
+    };
+    const handleChange = (newValue) => setValue(newValue);
+    const handleClose = (event) => {
+        setValue(initialValue);
+        onClose?.(event, 'escapeKeyDown');
+    };
+    const handleCancel = (event) => {
+        setValue(initialValue);
+        onClose?.(event, 'escapeKeyDown');
+    };
+    const handleClick = (event) => {
+        onChange?.(value);
+        onClose?.(event, 'escapeKeyDown');
+    };
+    const isNoResult = Boolean(searchValue) && !options.length;
+    const isDisabledButton = !value || isNoResult;
+    const handleRetry = () => {
+        onRetry?.(searchValue);
+    };
+    const isShowUserHint = onShowUserHint?.(options) || meta?.isAllDataLoaded;
+    const isShowModalLoader = isLoadingModal && options.length === 0;
+    const isShowSearchFieldLoader = (isLoading && !isLoadingModal) ||
+        (isLoading && isLoadingModal && options.length > 0);
+    const isShowSearchSuggestion = Boolean((!searchValue && minSymbolsToFetch > 0) ||
+        (searchValue && searchValue.length < minSymbolsToFetch));
+    return {
+        isShowModalLoader,
+        isShowSearchFieldLoader,
+        isNoResult,
+        handleRetry,
+        isShowUserHint,
+        isShowSearchSuggestion,
+        treeProps,
+        loadingErrorMsg,
+        isLoadingError,
+        modalProps: {
+            onClose: handleClose,
+            disableRestoreFocus: true,
+            open: isOpen,
+            size: 'md',
+            ...restDialogProps,
+        },
+        searchFieldProps: {
+            value: searchValue,
+            onChange: handleChangeSearchField,
+        },
+        treeListProps: {
+            value,
+            data: optionToRender,
+            onChange: handleChange,
+            isObjectMode: true,
+        },
+        cancelButtonProps: {
+            onClick: handleCancel,
+        },
+        confirmButtonProps: {
+            disabled: isDisabledButton,
+            onClick: handleClick,
+        },
+    };
+};
+exports.useLogic = useLogic;

package/node/components/TreeLikeAsyncAutocomplete/TreeLikeAsyncAutocomplete.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { TreeLikeAsyncAutocompleteProps } from './types';
+export declare const TreeLikeAsyncAutocomplete: import("react").ForwardRefExoticComponent<Omit<TreeLikeAsyncAutocompleteProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/node/components/TreeLikeAsyncAutocomplete/TreeLikeAsyncAutocomplete.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeLikeAsyncAutocomplete = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Input_1 = require("./Input");
+const OptionsModal_1 = require("./OptionsModal");
+const useLogic_1 = require("./useLogic");
+exports.TreeLikeAsyncAutocomplete = (0, react_1.forwardRef)((props, forwardedRef) => {
+    const { inputProps, optionsModalProps } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { ref: forwardedRef, ...inputProps }), (0, jsx_runtime_1.jsx)(OptionsModal_1.OptionsModal, { ...optionsModalProps })] }));
+});

package/node/components/TreeLikeAsyncAutocomplete/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_MIN_SEARCH_CHARACTERS = 0;
+export declare const DEFAULT_DELAY_MS = 300;

package/node/components/TreeLikeAsyncAutocomplete/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_DELAY_MS = exports.DEFAULT_MIN_SEARCH_CHARACTERS = void 0;
+exports.DEFAULT_MIN_SEARCH_CHARACTERS = 0;
+exports.DEFAULT_DELAY_MS = 300;

package/node/components/TreeLikeAsyncAutocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export type { TreeLikeAsyncAutocompleteValue, TreeLikeAsyncAutocompleteProps, FetchOptionsResult, } from './types';
+export * from './TreeLikeAsyncAutocomplete';

package/node/components/TreeLikeAsyncAutocomplete/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TreeLikeAsyncAutocomplete"), exports);

package/node/components/TreeLikeAsyncAutocomplete/types.d.ts

@@ -0,0 +1,69 @@
+import type { FetchOptionsResult, TreeAsyncAutocompleteValue } from '../TreeAsyncAutocomplete';
+import type { TreeAutocompleteProps } from '../TreeAutocomplete';
+/**
+ * Значение для TreeLikeAsyncAutocomplete - массив элементов дерева
+ */
+export type TreeLikeAsyncAutocompleteValue = TreeAsyncAutocompleteValue[];
+export type { FetchOptionsResult };
+export type TreeLikeAsyncAutocompleteProps = Omit<TreeAutocompleteProps, 'options' | 'isLoading' | 'isLoadingError' | 'value' | 'onChange' | 'filterOptions' | 'trimmed' | 'maxLength' | 'type'> & {
+    /**
+     * Выбранное значения
+     */
+    value?: TreeLikeAsyncAutocompleteValue;
+    /**
+     * Функция, которая запускается при выборе item
+     */
+    onChange?: (newValue?: TreeLikeAsyncAutocompleteValue) => void;
+    /**
+     * Функция для асинхронной загрузки опций на основе поискового запроса
+     * При возникновении ошибки запроса данных, компонент сам ее обработает.
+     * Для обработки ошибок вручную используйте параметр `onDataLoadError`
+     *
+     * @param search - Строка поиска, введенная пользователем. На основе этой
+     *   строки функция должна вернуть подходящие опции.
+     * @param signal - Объект `AbortSignal`, который позволяет отменить запрос,
+     *   если пользователь изменил поисковый запрос или закрыл компонент.
+     *
+     * @returns Promise<FetchResult> Промис, который разрешается объектом с массивом узлов дерева и метаданными.
+     *
+     * @example
+     ```typescript
+     * const fetchOptions = async (search: string, signal?: AbortSignal) => {
+     *   const response = await fetch(`/api/options/search?query=${search}`, {
+     *     signal
+     *   });
+     *   const data = await response.json();
+     *
+     *   return {
+     *     options: data.items,
+     *     meta: {
+     *       isAllDataLoaded: data.isAllDataLoaded,
+     *     }
+     *   };
+     * };
+     *
+     * <TreeLikeAsyncAutocomplete fetchOptions={fetchOptions} />
+     * ```
+     */
+    fetchOptions: (search: string, signal?: AbortSignal) => Promise<FetchOptionsResult>;
+    /**
+     * Задержка для fetchOptions
+     */
+    fetchDelayMs?: number;
+    /**
+     * Функция для обработки ошибок загрузки данных
+     */
+    onDataLoadError?: (error: Error) => void;
+    /**
+     * Минимальное количество символов для выполнения запроса
+     */
+    minSymbolsToFetch?: number;
+    /**
+     * Функция определения необходимости показа подсказки пользователю
+     */
+    onShowUserHint?: (options: TreeLikeAsyncAutocompleteValue) => boolean;
+    /**
+     * Флаг загрузки данных
+     */
+    isLoading?: boolean;
+};

package/node/components/TreeLikeAsyncAutocomplete/types.js

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

package/node/components/TreeLikeAsyncAutocomplete/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/node/components/TreeLikeAsyncAutocomplete/useLogic/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLogic"), exports);