@teambit/explorer.ui.command-bar - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

dist/autocomplete-input/autocomplete-input.d.ts

@@ -1,9 +0,7 @@
-import React, { InputHTMLAttributes } from 'react';
-declare type KeyHandlers = Record<string, (e: React.KeyboardEvent<HTMLInputElement>) => void>;
+import { InputHTMLAttributes } from 'react';
 declare type AutoCompleteInputProps = InputHTMLAttributes<HTMLInputElement> & {
-    keyHandlers: KeyHandlers;
     focus?: Truthy;
 };
 declare type Truthy = boolean | number | string | null | undefined;
-export declare function AutoCompleteInput({ className, keyHandlers, onKeyDown, focus, ...rest }: AutoCompleteInputProps): JSX.Element;
+export declare function AutoCompleteInput({ className, focus, ...rest }: AutoCompleteInputProps): JSX.Element;
 export {};

dist/autocomplete-input/autocomplete-input.js

@@ -41,3 +41,3 @@ "use strict";
 function AutoCompleteInput(_a) {
-    var { className, keyHandlers, onKeyDown, focus } = _a, rest = __rest(_a, ["className", "keyHandlers", "onKeyDown", "focus"]);
+    var { className, focus } = _a, rest = __rest(_a, ["className", "focus"]);
     const inputRef = (0, react_1.createRef)();
@@ -51,21 +51,6 @@ (0, react_1.useEffect)(() => {
     }, [focus]);
-    const handleKeyDown = useKeyHandler(keyHandlers, onKeyDown);
     // @ts-ignore (https://github.com/teambit/bit/issues/4908)
-    return react_1.default.createElement("input", Object.assign({}, rest, { ref: inputRef, className: (0, classnames_1.default)(autocomplete_input_module_scss_1.default.input, className), onKeyDown: handleKeyDown }));
+    return react_1.default.createElement("input", Object.assign({}, rest, { ref: inputRef, className: (0, classnames_1.default)(autocomplete_input_module_scss_1.default.input, className) }));
 }
 exports.AutoCompleteInput = AutoCompleteInput;
-function useKeyHandler(keyHandlers, onEvent) {
-    const handlersRef = (0, react_1.useRef)(keyHandlers);
-    handlersRef.current = keyHandlers;
-    return (0, react_1.useCallback)((e) => {
-        onEvent === null || onEvent === void 0 ? void 0 : onEvent(e);
-        if (e.defaultPrevented)
-            return;
-        const callback = handlersRef.current[e.key];
-        if (!callback)
-            return;
-        e.preventDefault();
-        callback(e);
-    }, [onEvent]);
-}
 //# sourceMappingURL=autocomplete-input.js.map

dist/command-bar/command-bar.d.ts

@@ -16,2 +16,2 @@ /// <reference types="react" />
 } & Omit<CardProps, 'defaultValue' | 'onChange'>;
-export declare function CommandBar({ elevation, className, visible, items, loading, onVisibilityChange: setVisibility, placeholder, value, defaultValue, onChange, autofocus, ...rest }: CommandBarProps): JSX.Element;
+export declare function CommandBar({ elevation, className, visible, items, loading, onVisibilityChange: setVisibility, placeholder, value, defaultValue, onChange, onKeyDown, autofocus, ...rest }: CommandBarProps): JSX.Element;

dist/command-bar/command-bar.js

@@ -42,11 +42,11 @@ "use strict";
 const use_optionally_controlled_state_1 = __importDefault(require("use-optionally-controlled-state"));
+const base_react_hooks_use_1d_nav_1 = require("@teambit/base-react.hooks.use-1d-nav");
 const autocomplete_input_1 = require("../autocomplete-input");
 const command_bar_item_1 = require("../command-bar-item");
 const command_bar_module_scss_1 = __importDefault(require("./command-bar.module.scss"));
-const _1d_nav_1 = require("./1d-nav");
 function CommandBar(_a) {
-    var { elevation, className, visible = true, items, loading, onVisibilityChange: setVisibility, placeholder = 'Search anything', value, defaultValue = '', onChange, autofocus } = _a, rest = __rest(_a, ["elevation", "className", "visible", "items", "loading", "onVisibilityChange", "placeholder", "value", "defaultValue", "onChange", "autofocus"]);
+    var { elevation, className, visible = true, items, loading, onVisibilityChange: setVisibility, placeholder = 'Search anything', value, defaultValue = '', onChange, onKeyDown, autofocus } = _a, rest = __rest(_a, ["elevation", "className", "visible", "items", "loading", "onVisibilityChange", "placeholder", "value", "defaultValue", "onChange", "onKeyDown", "autofocus"]);
     const [term = '', setTerm] = (0, use_optionally_controlled_state_1.default)({ controlledValue: value, initialValue: defaultValue, onChange });
     (0, react_1.useEffect)(() => setTerm(defaultValue), [visible]); // reset on visibility change
-    const idxNav = (0, _1d_nav_1.useNav1D)(items.length);
+    const idxNav = (0, base_react_hooks_use_1d_nav_1.use1dNav)(items.length);
     useAutoReset(items, idxNav);
@@ -58,10 +58,8 @@ const handleEnter = () => {
     };
-    const keyHandlers = {
-        ArrowDown: idxNav.increment,
-        ArrowUp: idxNav.decrement,
+    const handleKeydown = (0, base_react_hooks_use_1d_nav_1.useKey1dNav)(onKeyDown, idxNav, 'vertical', {
         Enter: handleEnter,
         Escape: () => setVisibility === null || setVisibility === void 0 ? void 0 : setVisibility(false),
-    };
+    });
     return (react_1.default.createElement(base_ui_surfaces_card_1.Card, Object.assign({}, rest, { elevation: elevation, className: (0, classnames_1.default)(className, command_bar_module_scss_1.default.commandBar, visible && command_bar_module_scss_1.default.visible, !elevation && command_bar_module_scss_1.default.shadow) }),
-        react_1.default.createElement(autocomplete_input_1.AutoCompleteInput, { value: term, focus: autofocus ? visible : undefined, autoFocus: autofocus, keyHandlers: keyHandlers, className: command_bar_module_scss_1.default.input, placeholder: placeholder, onChange: (e) => setTerm(e.target.value), onBlur: () => setVisibility === null || setVisibility === void 0 ? void 0 : setVisibility(false) }),
+        react_1.default.createElement(autocomplete_input_1.AutoCompleteInput, { value: term, focus: autofocus ? visible : undefined, autoFocus: autofocus, onKeyDown: handleKeydown, className: command_bar_module_scss_1.default.input, placeholder: placeholder, onChange: (e) => setTerm(e.target.value), onBlur: () => setVisibility === null || setVisibility === void 0 ? void 0 : setVisibility(false) }),
         react_1.default.createElement("div", { className: (0, classnames_1.default)(command_bar_module_scss_1.default.results, loading && command_bar_module_scss_1.default.loading) }, items.map((_a, idx) => {
@@ -68,0 +66,0 @@ var { action, id } = _a, result = __rest(_a, ["action", "id"]);

dist/command-bar/use-searcher.js

@@ -9,4 +9,4 @@ "use strict";
 const use_optionally_controlled_state_1 = __importDefault(require("use-optionally-controlled-state"));
-const use_promise_debounce_1 = require("./use-promise-debounce");
 const use_debounce_1 = require("use-debounce");
+const base_react_hooks_use_queued_execution_1 = require("@teambit/base-react.hooks.use-queued-execution");
 function useSearcher(searcher, { value: term, defaultValue = '', limit = 5, debounce = 0 } = {}) {
@@ -19,3 +19,3 @@ const [_value = defaultValue, setValue] = (0, use_optionally_controlled_state_1.default)({
     const [debouncedTerm] = (0, use_debounce_1.useDebounce)(_value, debounce); // reduce searches
-    const queuedSearch = (0, use_promise_debounce_1.usePromiseDebounce)(searcher); // enforce order
+    const queuedSearch = (0, base_react_hooks_use_queued_execution_1.useQueuedExecution)(searcher); // enforce order
     (0, react_1.useEffect)(() => {
@@ -28,3 +28,3 @@ setResults((prevState) => (Object.assign(Object.assign({}, prevState), { loading: true })));
             .catch((err) => {
-            if (err instanceof use_promise_debounce_1.PromiseCanceledError)
+            if (err instanceof base_react_hooks_use_queued_execution_1.PromiseCanceledError)
                 return;
@@ -31,0 +31,0 @@ throw err;

package.json

 {
   "name": "@teambit/explorer.ui.command-bar",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "homepage": "https://bit.dev/teambit/explorer/ui/command-bar",
@@ -9,3 +9,3 @@ "main": "dist/index.js",
     "name": "ui/command-bar",
-    "version": "2.0.0"
+    "version": "2.0.1"
   },
@@ -20,5 +20,7 @@ "dependencies": {
     "core-js": "^3.0.0",
+    "@teambit/design.ui.surfaces.menu.item": "0.0.354",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487",
+    "@teambit/base-react.hooks.use-1d-nav": "1.0.0",
     "@teambit/base-ui.surfaces.card": "1.0.3",
-    "@teambit/design.ui.surfaces.menu.item": "0.0.354"
+    "@teambit/base-react.hooks.use-queued-execution": "0.0.3"
   },
@@ -25,0 +27,0 @@ "devDependencies": {

No alert changes

Worsened metrics

Total package byte prevSize

81066

decreased by-12.86%

Dependency count

14

increased by16.67%

Number of package files

63

decreased by-16%

Lines of code

950

decreased by-16.89%

Dependency changes

• + Added@teambit/base-react.hooks.use-1d-nav@1.0.0

• + Added@teambit/base-react.hooks.use-queued-execution@0.0.3