@gravity-ui/querieskit 1.0.3 → 1.1.0

package/build/esm/components/PathEditor/PathEditor.js

@@ -0,0 +1,327 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.error.cause.js";
+import "core-js/modules/es.error.to-string.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.promise.js";
+import "core-js/modules/web.timers.js";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Icon, Popup, Text, TextInput } from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import { getDefaultNavigationIcon } from "../../helpers/getDefaultNavigationIcon";
+import { filterByCurrentPath, getCompletedPath, getLastFragment, getNextSelectedIndex, getPrevSelectedIndex } from "./helpers/suggestions";
+import i18n from "./i18n";
+import "./PathEditor.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var DEBOUNCE_MS = 300;
+var block = cn('qp-path-editor');
+export var PathEditor = function PathEditor(_ref) {
+  var _ref2;
+  var className = _ref.className,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? i18n('field_placeholder') : _ref$placeholder,
+    _ref$defaultPath = _ref.defaultPath,
+    defaultPath = _ref$defaultPath === void 0 ? '' : _ref$defaultPath,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$hasClear = _ref.hasClear,
+    hasClear = _ref$hasClear === void 0 ? false : _ref$hasClear,
+    _ref$showErrors = _ref.showErrors,
+    showErrors = _ref$showErrors === void 0 ? true : _ref$showErrors,
+    customFilter = _ref.customFilter,
+    cluster = _ref.cluster,
+    suggestionsFromProps = _ref.suggestions,
+    suggestionsErrorFromProps = _ref.suggestionsError,
+    errorMessageFromProps = _ref.errorMessage,
+    onLoadSuggestions = _ref.onLoadSuggestions,
+    onChange = _ref.onChange,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    onApply = _ref.onApply,
+    onCancel = _ref.onCancel;
+  var inputRef = useRef(null);
+  var selectedItemRef = useRef(null);
+  var debounceTimerRef = useRef(undefined);
+  var requestIdRef = useRef(0);
+  var wasDisabledRef = useRef(disabled);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    rootElement = _useState2[0],
+    setRootElement = _useState2[1];
+  var onLoadSuggestionsRef = useRef(onLoadSuggestions);
+  onLoadSuggestionsRef.current = onLoadSuggestions;
+  var onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  var customFilterRef = useRef(customFilter);
+  customFilterRef.current = customFilter;
+  var _useState3 = useState(defaultPath),
+    _useState4 = _slicedToArray(_useState3, 2),
+    path = _useState4[0],
+    setPath = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loadedSuggestions = _useState6[0],
+    setLoadedSuggestions = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    internalError = _useState8[0],
+    setInternalError = _useState8[1];
+  var _useState9 = useState(),
+    _useState0 = _slicedToArray(_useState9, 2),
+    internalErrorMessage = _useState0[0],
+    setInternalErrorMessage = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    inputFocus = _useState10[0],
+    setInputFocus = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    inputChange = _useState12[0],
+    setInputChange = _useState12[1];
+  var _useState13 = useState(-1),
+    _useState14 = _slicedToArray(_useState13, 2),
+    selectedIndex = _useState14[0],
+    setSelectedIndex = _useState14[1];
+  var _useState15 = useState(0),
+    _useState16 = _slicedToArray(_useState15, 2),
+    inputWidth = _useState16[0],
+    setInputWidth = _useState16[1];
+  var suggestions = suggestionsFromProps !== null && suggestionsFromProps !== void 0 ? suggestionsFromProps : loadedSuggestions;
+  var suggestionsError = suggestionsErrorFromProps !== null && suggestionsErrorFromProps !== void 0 ? suggestionsErrorFromProps : internalError;
+  var errorMessage = (_ref2 = errorMessageFromProps !== null && errorMessageFromProps !== void 0 ? errorMessageFromProps : internalErrorMessage) !== null && _ref2 !== void 0 ? _ref2 : i18n('message_error-default');
+  var actualSuggestions = useMemo(function () {
+    if (!inputFocus || !inputChange || !suggestions.length) {
+      return [];
+    }
+    return filterByCurrentPath(path, suggestions);
+  }, [inputFocus, inputChange, path, suggestions]);
+  var loadSuggestions = useCallback(function (nextPath) {
+    var load = onLoadSuggestionsRef.current;
+    if (!load) {
+      return;
+    }
+    var requestId = ++requestIdRef.current;
+    Promise.resolve(load({
+      path: nextPath,
+      customFilter: customFilterRef.current,
+      cluster: cluster
+    })).then(function (result) {
+      if (requestId !== requestIdRef.current) {
+        return;
+      }
+      if (result) {
+        setLoadedSuggestions(result);
+      }
+      setInternalError(false);
+      setInternalErrorMessage(undefined);
+    })["catch"](function (error) {
+      if (requestId !== requestIdRef.current) {
+        return;
+      }
+      setLoadedSuggestions([]);
+      setInternalError(true);
+      setInternalErrorMessage(error instanceof Error ? error.message : undefined);
+    });
+  }, [cluster]);
+  var debounceLoading = useCallback(function (nextPath) {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+    debounceTimerRef.current = setTimeout(function () {
+      var _onChangeRef$current;
+      loadSuggestions(nextPath);
+      (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 || _onChangeRef$current.call(onChangeRef, nextPath);
+    }, DEBOUNCE_MS);
+  }, [loadSuggestions]);
+  var hideSuggestions = useCallback(function () {
+    setInputFocus(false);
+    setSelectedIndex(-1);
+  }, []);
+  var handleInputChange = useCallback(function (nextPath) {
+    setPath(nextPath);
+    setSelectedIndex(-1);
+    setInputChange(true);
+    setInputFocus(true);
+    debounceLoading(nextPath);
+  }, [debounceLoading]);
+  var handleInputFocus = useCallback(function (event) {
+    setInputFocus(true);
+    onFocus === null || onFocus === void 0 || onFocus(event, {
+      path: path
+    });
+  }, [onFocus, path]);
+  var handleInputBlur = useCallback(function () {
+    hideSuggestions();
+    onBlur === null || onBlur === void 0 || onBlur(path);
+  }, [hideSuggestions, onBlur, path]);
+  var handleEnterClick = useCallback(function (event) {
+    event.preventDefault();
+    var inputPath = event.currentTarget.value;
+    if (selectedIndex === -1) {
+      setPath(inputPath);
+      setSelectedIndex(-1);
+      onApply === null || onApply === void 0 || onApply(inputPath);
+      return;
+    }
+    var suggestion = actualSuggestions[selectedIndex];
+    if (suggestion) {
+      handleInputChange(getCompletedPath(suggestion));
+    }
+  }, [actualSuggestions, handleInputChange, onApply, selectedIndex]);
+  var handleEscClick = useCallback(function () {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
+    onCancel === null || onCancel === void 0 || onCancel();
+  }, [onCancel]);
+  var handleTabClick = useCallback(function (event) {
+    event.preventDefault();
+    if (actualSuggestions.length === 1) {
+      handleInputChange(getCompletedPath(actualSuggestions[0]));
+    } else if (actualSuggestions.length > 1) {
+      setSelectedIndex(function (current) {
+        return getNextSelectedIndex(actualSuggestions, current);
+      });
+    }
+  }, [actualSuggestions, handleInputChange]);
+  var handleKeyDown = useCallback(function (event) {
+    switch (event.key) {
+      case 'ArrowDown':
+        if (!actualSuggestions.length) {
+          break;
+        }
+        event.preventDefault();
+        setSelectedIndex(function (current) {
+          return getNextSelectedIndex(actualSuggestions, current);
+        });
+        break;
+      case 'ArrowUp':
+        if (!actualSuggestions.length) {
+          break;
+        }
+        event.preventDefault();
+        setSelectedIndex(function (current) {
+          return getPrevSelectedIndex(actualSuggestions, current);
+        });
+        break;
+      case 'Enter':
+        handleEnterClick(event);
+        break;
+      case 'Escape':
+        handleEscClick();
+        break;
+      case 'Tab':
+        if (!actualSuggestions.length) {
+          break;
+        }
+        handleTabClick(event);
+        break;
+    }
+  }, [actualSuggestions, handleEnterClick, handleEscClick, handleTabClick]);
+  useEffect(function () {
+    if (path) {
+      loadSuggestions(path);
+    }
+    return function () {
+      requestIdRef.current += 1;
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    if (wasDisabledRef.current && !disabled) {
+      var _inputRef$current2;
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
+    }
+    wasDisabledRef.current = disabled;
+  }, [disabled]);
+  useLayoutEffect(function () {
+    if (inputFocus && rootElement) {
+      setInputWidth(rootElement.offsetWidth);
+    }
+  }, [inputFocus, path, rootElement]);
+  useLayoutEffect(function () {
+    var _selectedItemRef$curr;
+    (_selectedItemRef$curr = selectedItemRef.current) === null || _selectedItemRef$curr === void 0 || _selectedItemRef$curr.scrollIntoView({
+      block: 'nearest'
+    });
+  }, [selectedIndex]);
+  var isPopupVisible = Boolean((actualSuggestions.length || suggestionsError && showErrors) && inputFocus);
+  return /*#__PURE__*/_jsxs("div", {
+    className: block(null, className),
+    ref: setRootElement,
+    children: [/*#__PURE__*/_jsx(TextInput, {
+      onKeyDown: handleKeyDown,
+      onUpdate: handleInputChange,
+      onFocus: handleInputFocus,
+      onBlur: handleInputBlur,
+      placeholder: placeholder,
+      hasClear: hasClear,
+      autoFocus: autoFocus,
+      disabled: disabled,
+      controlRef: inputRef,
+      value: path
+    }), /*#__PURE__*/_jsx(Popup, {
+      className: block('popup'),
+      placement: "bottom-start",
+      onOpenChange: function onOpenChange(open) {
+        if (!open) {
+          hideSuggestions();
+        }
+      },
+      anchorElement: rootElement,
+      open: isPopupVisible,
+      offset: {
+        mainAxis: 0,
+        crossAxis: 0
+      },
+      disableEscapeKeyDown: true,
+      disableFocusOut: true,
+      children: /*#__PURE__*/_jsx("div", {
+        className: block('items'),
+        style: {
+          width: inputWidth || undefined
+        },
+        role: "listbox",
+        children: suggestionsError && showErrors ? /*#__PURE__*/_jsx(Text, {
+          className: block('item', {
+            error: true
+          }),
+          color: "danger",
+          children: errorMessage
+        }) : actualSuggestions.map(function (item, index) {
+          var _item$icon;
+          var completedPath = getCompletedPath(item);
+          var isSelected = index === selectedIndex;
+          var lastFragment = getLastFragment(item.path);
+          var handleMouseDown = function handleMouseDown(event) {
+            handleInputChange(completedPath);
+            event.preventDefault();
+          };
+          return /*#__PURE__*/_jsxs("div", {
+            ref: isSelected ? selectedItemRef : undefined,
+            onMouseDown: handleMouseDown,
+            className: block('item', {
+              selected: isSelected
+            }),
+            role: "option",
+            "aria-selected": isSelected,
+            children: [(_item$icon = item.icon) !== null && _item$icon !== void 0 ? _item$icon : /*#__PURE__*/_jsx(Icon, {
+              data: getDefaultNavigationIcon(item.kind, item.targetPathBroken),
+              size: 16
+            }), /*#__PURE__*/_jsx("span", {
+              className: block('item-path'),
+              children: lastFragment ? "\u2026/".concat(lastFragment) : item.path
+            })]
+          }, item.path);
+        })
+      })
+    })]
+  });
+};
+// #sourceMappingURL=PathEditor.js.map

package/build/esm/components/PathEditor/PathEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useLayoutEffect","useMemo","useRef","useState","Icon","Popup","Text","TextInput","cn","getDefaultNavigationIcon","filterByCurrentPath","getCompletedPath","getLastFragment","getNextSelectedIndex","getPrevSelectedIndex","i18n","jsx","_jsx","jsxs","_jsxs","DEBOUNCE_MS","block","PathEditor","_ref","_ref2","className","_ref$placeholder","placeholder","_ref$defaultPath","defaultPath","_ref$disabled","disabled","_ref$autoFocus","autoFocus","_ref$hasClear","hasClear","_ref$showErrors","showErrors","customFilter","cluster","suggestionsFromProps","suggestions","suggestionsErrorFromProps","suggestionsError","errorMessageFromProps","errorMessage","onLoadSuggestions","onChange","onFocus","onBlur","onApply","onCancel","inputRef","selectedItemRef","debounceTimerRef","undefined","requestIdRef","wasDisabledRef","_useState","_useState2","_slicedToArray","rootElement","setRootElement","onLoadSuggestionsRef","current","onChangeRef","customFilterRef","_useState3","_useState4","path","setPath","_useState5","_useState6","loadedSuggestions","setLoadedSuggestions","_useState7","_useState8","internalError","setInternalError","_useState9","_useState0","internalErrorMessage","setInternalErrorMessage","_useState1","_useState10","inputFocus","setInputFocus","_useState11","_useState12","inputChange","setInputChange","_useState13","_useState14","selectedIndex","setSelectedIndex","_useState15","_useState16","inputWidth","setInputWidth","actualSuggestions","length","loadSuggestions","nextPath","load","requestId","Promise","resolve","then","result","error","Error","message","debounceLoading","clearTimeout","setTimeout","_onChangeRef$current","call","hideSuggestions","handleInputChange","handleInputFocus","event","handleInputBlur","handleEnterClick","preventDefault","inputPath","currentTarget","value","suggestion","handleEscClick","_inputRef$current","blur","handleTabClick","handleKeyDown","key","_inputRef$current2","focus","offsetWidth","_selectedItemRef$curr","scrollIntoView","isPopupVisible","Boolean","ref","children","onKeyDown","onUpdate","controlRef","placement","onOpenChange","open","anchorElement","offset","mainAxis","crossAxis","disableEscapeKeyDown","disableFocusOut","style","width","role","color","map","item","index","_item$icon","completedPath","isSelected","lastFragment","handleMouseDown","onMouseDown","selected","icon","data","kind","targetPathBroken","size","concat"],"sources":["PathEditor.tsx"],"sourcesContent":["import React, {\n    FC,\n    type FocusEvent,\n    type KeyboardEvent,\n    type MouseEvent,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport {Icon, Popup, Text, TextInput} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\nimport type {\n    LoadPathSuggestions,\n    PathEditorEventPayload,\n    PathEditorSuggestion,\n    PathEditorSuggestionFilter,\n} from '../../types/pathEditor';\nimport {getDefaultNavigationIcon} from '../../helpers/getDefaultNavigationIcon';\nimport {\n    filterByCurrentPath,\n    getCompletedPath,\n    getLastFragment,\n    getNextSelectedIndex,\n    getPrevSelectedIndex,\n} from './helpers/suggestions';\nimport i18n from './i18n';\nimport './PathEditor.scss';\n\nconst DEBOUNCE_MS = 300;\nconst block = cn('qp-path-editor');\n\nexport type PathEditorProps = {\n    className?: string;\n    placeholder?: string;\n    defaultPath?: string;\n    disabled?: boolean;\n    autoFocus?: boolean;\n    hasClear?: boolean;\n    showErrors?: boolean;\n    customFilter?: PathEditorSuggestionFilter;\n    cluster?: string;\n    suggestions?: PathEditorSuggestion[];\n    suggestionsError?: boolean;\n    errorMessage?: string;\n    onLoadSuggestions?: LoadPathSuggestions;\n    onChange?: (path: string) => void;\n    onFocus?: (event: FocusEvent<HTMLInputElement>, payload: PathEditorEventPayload) => void;\n    onBlur?: (path: string) => void;\n    onApply?: (path: string) => void;\n    onCancel?: () => void;\n};\n\nexport const PathEditor: FC<PathEditorProps> = ({\n    className,\n    placeholder = i18n('field_placeholder'),\n    defaultPath = '',\n    disabled = false,\n    autoFocus = false,\n    hasClear = false,\n    showErrors = true,\n    customFilter,\n    cluster,\n    suggestions: suggestionsFromProps,\n    suggestionsError: suggestionsErrorFromProps,\n    errorMessage: errorMessageFromProps,\n    onLoadSuggestions,\n    onChange,\n    onFocus,\n    onBlur,\n    onApply,\n    onCancel,\n}) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const selectedItemRef = useRef<HTMLDivElement>(null);\n    const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n    const requestIdRef = useRef(0);\n    const wasDisabledRef = useRef(disabled);\n    const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null);\n\n    const onLoadSuggestionsRef = useRef(onLoadSuggestions);\n    onLoadSuggestionsRef.current = onLoadSuggestions;\n    const onChangeRef = useRef(onChange);\n    onChangeRef.current = onChange;\n    const customFilterRef = useRef(customFilter);\n    customFilterRef.current = customFilter;\n\n    const [path, setPath] = useState(defaultPath);\n    const [loadedSuggestions, setLoadedSuggestions] = useState<PathEditorSuggestion[]>([]);\n    const [internalError, setInternalError] = useState(false);\n    const [internalErrorMessage, setInternalErrorMessage] = useState<string>();\n    const [inputFocus, setInputFocus] = useState(false);\n    const [inputChange, setInputChange] = useState(false);\n    const [selectedIndex, setSelectedIndex] = useState(-1);\n    const [inputWidth, setInputWidth] = useState(0);\n\n    const suggestions = suggestionsFromProps ?? loadedSuggestions;\n    const suggestionsError = suggestionsErrorFromProps ?? internalError;\n    const errorMessage =\n        errorMessageFromProps ?? internalErrorMessage ?? i18n('message_error-default');\n\n    const actualSuggestions = useMemo(() => {\n        if (!inputFocus || !inputChange || !suggestions.length) {\n            return [];\n        }\n\n        return filterByCurrentPath(path, suggestions);\n    }, [inputFocus, inputChange, path, suggestions]);\n\n    const loadSuggestions = useCallback(\n        (nextPath: string) => {\n            const load = onLoadSuggestionsRef.current;\n            if (!load) {\n                return;\n            }\n\n            const requestId = ++requestIdRef.current;\n\n            Promise.resolve(\n                load({\n                    path: nextPath,\n                    customFilter: customFilterRef.current,\n                    cluster,\n                }),\n            )\n                .then((result) => {\n                    if (requestId !== requestIdRef.current) {\n                        return;\n                    }\n\n                    if (result) {\n                        setLoadedSuggestions(result);\n                    }\n                    setInternalError(false);\n                    setInternalErrorMessage(undefined);\n                })\n                .catch((error: unknown) => {\n                    if (requestId !== requestIdRef.current) {\n                        return;\n                    }\n\n                    setLoadedSuggestions([]);\n                    setInternalError(true);\n                    setInternalErrorMessage(error instanceof Error ? error.message : undefined);\n                });\n        },\n        [cluster],\n    );\n\n    const debounceLoading = useCallback(\n        (nextPath: string) => {\n            if (debounceTimerRef.current) {\n                clearTimeout(debounceTimerRef.current);\n            }\n\n            debounceTimerRef.current = setTimeout(() => {\n                loadSuggestions(nextPath);\n                onChangeRef.current?.(nextPath);\n            }, DEBOUNCE_MS);\n        },\n        [loadSuggestions],\n    );\n\n    const hideSuggestions = useCallback(() => {\n        setInputFocus(false);\n        setSelectedIndex(-1);\n    }, []);\n\n    const handleInputChange = useCallback(\n        (nextPath: string) => {\n            setPath(nextPath);\n            setSelectedIndex(-1);\n            setInputChange(true);\n            setInputFocus(true);\n            debounceLoading(nextPath);\n        },\n        [debounceLoading],\n    );\n\n    const handleInputFocus = useCallback(\n        (event: FocusEvent<HTMLInputElement>) => {\n            setInputFocus(true);\n            onFocus?.(event, {path});\n        },\n        [onFocus, path],\n    );\n\n    const handleInputBlur = useCallback(() => {\n        hideSuggestions();\n        onBlur?.(path);\n    }, [hideSuggestions, onBlur, path]);\n\n    const handleEnterClick = useCallback(\n        (event: KeyboardEvent<HTMLInputElement>) => {\n            event.preventDefault();\n\n            const inputPath = event.currentTarget.value;\n\n            if (selectedIndex === -1) {\n                setPath(inputPath);\n                setSelectedIndex(-1);\n                onApply?.(inputPath);\n                return;\n            }\n\n            const suggestion = actualSuggestions[selectedIndex];\n            if (suggestion) {\n                handleInputChange(getCompletedPath(suggestion));\n            }\n        },\n        [actualSuggestions, handleInputChange, onApply, selectedIndex],\n    );\n\n    const handleEscClick = useCallback(() => {\n        inputRef.current?.blur();\n        onCancel?.();\n    }, [onCancel]);\n\n    const handleTabClick = useCallback(\n        (event: KeyboardEvent<HTMLInputElement>) => {\n            event.preventDefault();\n\n            if (actualSuggestions.length === 1) {\n                handleInputChange(getCompletedPath(actualSuggestions[0]));\n            } else if (actualSuggestions.length > 1) {\n                setSelectedIndex((current) => getNextSelectedIndex(actualSuggestions, current));\n            }\n        },\n        [actualSuggestions, handleInputChange],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent<HTMLInputElement>) => {\n            switch (event.key) {\n                case 'ArrowDown':\n                    if (!actualSuggestions.length) {\n                        break;\n                    }\n                    event.preventDefault();\n                    setSelectedIndex((current) => getNextSelectedIndex(actualSuggestions, current));\n                    break;\n                case 'ArrowUp':\n                    if (!actualSuggestions.length) {\n                        break;\n                    }\n                    event.preventDefault();\n                    setSelectedIndex((current) => getPrevSelectedIndex(actualSuggestions, current));\n                    break;\n                case 'Enter':\n                    handleEnterClick(event);\n                    break;\n                case 'Escape':\n                    handleEscClick();\n                    break;\n                case 'Tab':\n                    if (!actualSuggestions.length) {\n                        break;\n                    }\n                    handleTabClick(event);\n                    break;\n            }\n        },\n        [actualSuggestions, handleEnterClick, handleEscClick, handleTabClick],\n    );\n\n    useEffect(() => {\n        if (path) {\n            loadSuggestions(path);\n        }\n\n        return () => {\n            requestIdRef.current += 1;\n            if (debounceTimerRef.current) {\n                clearTimeout(debounceTimerRef.current);\n            }\n        };\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useEffect(() => {\n        if (wasDisabledRef.current && !disabled) {\n            inputRef.current?.focus();\n        }\n        wasDisabledRef.current = disabled;\n    }, [disabled]);\n\n    useLayoutEffect(() => {\n        if (inputFocus && rootElement) {\n            setInputWidth(rootElement.offsetWidth);\n        }\n    }, [inputFocus, path, rootElement]);\n\n    useLayoutEffect(() => {\n        selectedItemRef.current?.scrollIntoView({block: 'nearest'});\n    }, [selectedIndex]);\n\n    const isPopupVisible = Boolean(\n        (actualSuggestions.length || (suggestionsError && showErrors)) && inputFocus,\n    );\n\n    return (\n        <div className={block(null, className)} ref={setRootElement}>\n            <TextInput\n                onKeyDown={handleKeyDown}\n                onUpdate={handleInputChange}\n                onFocus={handleInputFocus}\n                onBlur={handleInputBlur}\n                placeholder={placeholder}\n                hasClear={hasClear}\n                autoFocus={autoFocus}\n                disabled={disabled}\n                controlRef={inputRef}\n                value={path}\n            />\n            <Popup\n                className={block('popup')}\n                placement=\"bottom-start\"\n                onOpenChange={(open) => {\n                    if (!open) {\n                        hideSuggestions();\n                    }\n                }}\n                anchorElement={rootElement}\n                open={isPopupVisible}\n                offset={{mainAxis: 0, crossAxis: 0}}\n                disableEscapeKeyDown\n                disableFocusOut\n            >\n                <div\n                    className={block('items')}\n                    style={{width: inputWidth || undefined}}\n                    role=\"listbox\"\n                >\n                    {suggestionsError && showErrors ? (\n                        <Text className={block('item', {error: true})} color=\"danger\">\n                            {errorMessage}\n                        </Text>\n                    ) : (\n                        actualSuggestions.map((item, index) => {\n                            const completedPath = getCompletedPath(item);\n                            const isSelected = index === selectedIndex;\n                            const lastFragment = getLastFragment(item.path);\n\n                            const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n                                handleInputChange(completedPath);\n                                event.preventDefault();\n                            };\n\n                            return (\n                                <div\n                                    key={item.path}\n                                    ref={isSelected ? selectedItemRef : undefined}\n                                    onMouseDown={handleMouseDown}\n                                    className={block('item', {selected: isSelected})}\n                                    role=\"option\"\n                                    aria-selected={isSelected}\n                                >\n                                    {item.icon ?? (\n                                        <Icon\n                                            data={getDefaultNavigationIcon(\n                                                item.kind,\n                                                item.targetPathBroken,\n                                            )}\n                                            size={16}\n                                        />\n                                    )}\n                                    <span className={block('item-path')}>\n                                        {lastFragment ? `\\u2026/${lastFragment}` : item.path}\n                                    </span>\n                                </div>\n                            );\n                        })\n                    )}\n                </div>\n            </Popup>\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/build/esm/components/PathEditor/PathEditor.scss

@@ -0,0 +1,41 @@
+.qp-path-editor {
+    position: relative;
+    display: block;
+    width: 100%;
+
+    &__items {
+        max-height: 300px;
+        overflow: hidden auto;
+        background-color: var(--g-color-base-float);
+    }
+
+    &__item {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding: 0 16px;
+        overflow: hidden;
+        line-height: 32px;
+        color: var(--g-color-text-primary);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: pointer;
+
+        &:hover,
+        &_selected {
+            background-color: var(--g-color-base-simple-hover);
+        }
+
+        &_error {
+            color: var(--g-color-text-danger);
+            cursor: default;
+        }
+    }
+
+    &__item-path {
+        margin-left: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}

package/build/esm/components/PathEditor/PathEditor.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PathEditor } from './PathEditor';
+declare const meta: Meta<typeof PathEditor>;
+export default meta;
+type Story = StoryObj<typeof PathEditor>;
+export declare const Default: Story;
+export declare const WithClear: Story;
+export declare const Disabled: Story;
+export declare const SuggestionsError: Story;

package/build/esm/components/PathEditor/PathEditor.stories.helpers.d.ts

@@ -0,0 +1,2 @@
+import type { LoadPathSuggestionsParams, PathEditorSuggestion } from '../../types/pathEditor';
+export declare function mockLoadPathSuggestions({ path, }: LoadPathSuggestionsParams): Promise<PathEditorSuggestion[]>;

package/build/esm/components/PathEditor/PathEditor.stories.helpers.js

@@ -0,0 +1,163 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIteratorHelper";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.array.last-index-of.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.array.sort.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.filter.js";
+import "core-js/modules/es.iterator.find.js";
+import "core-js/modules/es.iterator.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.promise.js";
+import "core-js/modules/es.string.ends-with.js";
+import "core-js/modules/web.timers.js";
+var TREE = {
+  name: '',
+  kind: 'folder',
+  children: [{
+    name: 'home',
+    kind: 'folder',
+    children: [{
+      name: 'user',
+      kind: 'folder',
+      children: [{
+        name: 'projects',
+        kind: 'folder',
+        children: [{
+          name: 'favorites',
+          kind: 'folder'
+        }, {
+          name: 'query.sql',
+          kind: 'file'
+        }]
+      }, {
+        name: 'tmp',
+        kind: 'folder'
+      }, {
+        name: 'events',
+        kind: 'table'
+      }, {
+        name: 'events_dyn',
+        kind: 'table'
+      }]
+    }, {
+      name: 'my-projects',
+      kind: 'folder',
+      children: [{
+        name: 'favorites',
+        kind: 'folder'
+      }, {
+        name: 'very',
+        kind: 'folder',
+        children: [{
+          name: 'long',
+          kind: 'folder',
+          children: [{
+            name: 'nested',
+            kind: 'folder',
+            children: [{
+              name: 'directory',
+              kind: 'folder',
+              children: [{
+                name: 'structure',
+                kind: 'folder'
+              }]
+            }]
+          }]
+        }]
+      }]
+    }]
+  }, {
+    name: 'tmp',
+    kind: 'folder'
+  }, {
+    name: 'sys',
+    kind: 'unknown'
+  }]
+};
+function getParentPath(path) {
+  if (!path || path === '/') {
+    return '/';
+  }
+  var normalized = path.endsWith('/') ? path.slice(0, -1) : path;
+  var index = normalized.lastIndexOf('/');
+  return index <= 0 ? '/' : normalized.slice(0, index);
+}
+function findNode(path) {
+  if (path === '/' || path === '') {
+    return TREE;
+  }
+  var parts = path.split('/').filter(Boolean);
+  var current = TREE;
+  var _iterator = _createForOfIteratorHelper(parts),
+    _step;
+  try {
+    var _loop = function _loop() {
+        var _current$children;
+        var part = _step.value;
+        current = (_current$children = current.children) === null || _current$children === void 0 ? void 0 : _current$children.find(function (child) {
+          return child.name === part;
+        });
+        if (!current) {
+          return {
+            v: undefined
+          };
+        }
+      },
+      _ret;
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      _ret = _loop();
+      if (_ret) return _ret.v;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return current;
+}
+export function mockLoadPathSuggestions(_x) {
+  return _mockLoadPathSuggestions.apply(this, arguments);
+}
+function _mockLoadPathSuggestions() {
+  _mockLoadPathSuggestions = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
+    var _parent$children;
+    var path, parentPath, parent, children, prefix;
+    return _regeneratorRuntime().wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          path = _ref.path;
+          _context.next = 1;
+          return new Promise(function (resolve) {
+            return setTimeout(resolve, 150);
+          });
+        case 1:
+          parentPath = getParentPath(path);
+          parent = findNode(parentPath);
+          children = (_parent$children = parent === null || parent === void 0 ? void 0 : parent.children) !== null && _parent$children !== void 0 ? _parent$children : [];
+          prefix = parentPath === '/' ? '' : parentPath;
+          return _context.abrupt("return", children.map(function (child) {
+            return {
+              parentPath: parentPath,
+              childPath: "/".concat(child.name),
+              path: "".concat(prefix, "/").concat(child.name),
+              kind: child.kind
+            };
+          }).sort(function (a, b) {
+            return a.childPath.localeCompare(b.childPath);
+          }));
+        case 2:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _mockLoadPathSuggestions.apply(this, arguments);
+}
+// #sourceMappingURL=PathEditor.stories.helpers.js.map

package/build/esm/components/PathEditor/PathEditor.stories.helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TREE","name","kind","children","getParentPath","path","normalized","endsWith","slice","index","lastIndexOf","findNode","parts","split","filter","Boolean","current","_iterator","_createForOfIteratorHelper","_step","_loop","_current$children","part","value","find","child","v","undefined","_ret","s","n","done","err","e","f","mockLoadPathSuggestions","_x","_mockLoadPathSuggestions","apply","arguments","_asyncToGenerator","_regeneratorRuntime","mark","_callee","_ref","_parent$children","parentPath","parent","prefix","wrap","_context","prev","next","Promise","resolve","setTimeout","abrupt","map","childPath","concat","sort","a","b","localeCompare","stop"],"sources":["PathEditor.stories.helpers.ts"],"sourcesContent":["import type {LoadPathSuggestionsParams, PathEditorSuggestion} from '../../types/pathEditor';\nimport type {NavigationItemKind} from '../../types/navigation';\n\ntype MockNode = {\n    name: string;\n    kind: NavigationItemKind;\n    children?: MockNode[];\n};\n\nconst TREE: MockNode = {\n    name: '',\n    kind: 'folder',\n    children: [\n        {\n            name: 'home',\n            kind: 'folder',\n            children: [\n                {\n                    name: 'user',\n                    kind: 'folder',\n                    children: [\n                        {\n                            name: 'projects',\n                            kind: 'folder',\n                            children: [\n                                {name: 'favorites', kind: 'folder'},\n                                {name: 'query.sql', kind: 'file'},\n                            ],\n                        },\n                        {name: 'tmp', kind: 'folder'},\n                        {name: 'events', kind: 'table'},\n                        {name: 'events_dyn', kind: 'table'},\n                    ],\n                },\n                {\n                    name: 'my-projects',\n                    kind: 'folder',\n                    children: [\n                        {name: 'favorites', kind: 'folder'},\n                        {\n                            name: 'very',\n                            kind: 'folder',\n                            children: [\n                                {\n                                    name: 'long',\n                                    kind: 'folder',\n                                    children: [\n                                        {\n                                            name: 'nested',\n                                            kind: 'folder',\n                                            children: [\n                                                {\n                                                    name: 'directory',\n                                                    kind: 'folder',\n                                                    children: [{name: 'structure', kind: 'folder'}],\n                                                },\n                                            ],\n                                        },\n                                    ],\n                                },\n                            ],\n                        },\n                    ],\n                },\n            ],\n        },\n        {name: 'tmp', kind: 'folder'},\n        {name: 'sys', kind: 'unknown'},\n    ],\n};\n\nfunction getParentPath(path: string): string {\n    if (!path || path === '/') {\n        return '/';\n    }\n\n    const normalized = path.endsWith('/') ? path.slice(0, -1) : path;\n    const index = normalized.lastIndexOf('/');\n    return index <= 0 ? '/' : normalized.slice(0, index);\n}\n\nfunction findNode(path: string): MockNode | undefined {\n    if (path === '/' || path === '') {\n        return TREE;\n    }\n\n    const parts = path.split('/').filter(Boolean);\n    let current: MockNode | undefined = TREE;\n\n    for (const part of parts) {\n        current = current.children?.find((child) => child.name === part);\n        if (!current) {\n            return undefined;\n        }\n    }\n\n    return current;\n}\n\nexport async function mockLoadPathSuggestions({\n    path,\n}: LoadPathSuggestionsParams): Promise<PathEditorSuggestion[]> {\n    await new Promise((resolve) => setTimeout(resolve, 150));\n\n    const parentPath = getParentPath(path);\n    const parent = findNode(parentPath);\n    const children = parent?.children ?? [];\n    const prefix = parentPath === '/' ? '' : parentPath;\n\n    return children\n        .map((child) => ({\n            parentPath,\n            childPath: `/${child.name}`,\n            path: `${prefix}/${child.name}`,\n            kind: child.kind,\n        }))\n        .sort((a, b) => a.childPath.localeCompare(b.childPath));\n}\n"],"mappings":"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","ignoreList":[]}