@konturio/ui-kit - npm Package Compare versions

Comparing version 3.0.0-alpha.66 to 3.0.0-alpha.67

package.json

 {
   "name": "@konturio/ui-kit",
-  "version": "3.0.0-alpha.66",
+  "version": "3.0.0-alpha.67",
   "repository": {
@@ -32,3 +32,3 @@ "type": "git",
   },
-  "gitHead": "bc97846745bd4ae0a10035f8ec5d71e734609b47"
+  "gitHead": "6fbb7e874859cbb727f2ca08a6618663d524f1e3"
 }

tslib/Autocomplete/index.js

@@ -13,3 +13,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { AutocompleteButton } from './components/AutocompleteButton';
@@ -34,5 +34,10 @@ import { useCombobox } from 'downshift';
     var { children, items, filterFunction = defaultFilterFunction, value, defaultValue, showSelectedIcon = true, showEntryIcon = false, withResetButton = true, itemToString = defaultItemToString, label, placeholder, classes, className, disabled, error, type = 'classic', onChange, onSelect } = _a, props = __rest(_a, ["children", "items", "filterFunction", "value", "defaultValue", "showSelectedIcon", "showEntryIcon", "withResetButton", "itemToString", "label", "placeholder", "classes", "className", "disabled", "error", "type", "onChange", "onSelect"]);
-    const initialSelectedItem = value && items ? items.find((itm) => itm.value === value) : undefined;
-    const defaultSelectedItem = defaultValue && items ? items.find((itm) => itm.value === defaultValue) : null;
+    const defaultSelectedItem = useMemo(() => (defaultValue && items ? items.find((itm) => itm.value === defaultValue) : null), [defaultValue, items]);
     const [filteredItems, setFilteredItems] = useState(items);
+    const [selectedItem, setSelectedItem] = useState(defaultSelectedItem || null);
+    useEffect(() => {
+        setSelectedItem(value !== undefined && items
+            ? items.find((itm) => itm.value === value) || defaultSelectedItem || null
+            : defaultSelectedItem || null);
+    }, [value]);
     const onAutocompleteChange = useCallback((changes) => {
@@ -45,8 +50,10 @@ if (onChange && typeof onChange === 'function') {
         }
-    }, [onChange, onSelect]);
-    const { isOpen, reset, getToggleButtonProps, getLabelProps, getMenuProps, getComboboxProps, getInputProps, highlightedIndex, getItemProps, selectedItem, } = useCombobox({
+        setSelectedItem(changes.selectedItem || null);
+    }, [onChange, onSelect, setSelectedItem]);
+    const reset = useCallback(() => {
+        setSelectedItem(defaultSelectedItem || null);
+    }, [setSelectedItem, defaultSelectedItem]);
+    const { isOpen, getToggleButtonProps, getLabelProps, getMenuProps, getComboboxProps, getInputProps, highlightedIndex, getItemProps, } = useCombobox({
         items: filteredItems,
         itemToString,
-        initialSelectedItem: initialSelectedItem || defaultSelectedItem,
-        defaultSelectedItem,
         onSelectedItemChange: onAutocompleteChange,
@@ -61,6 +68,6 @@ onInputValueChange({ inputValue }) {
         },
+        selectedItem,
     });
     const _b = getComboboxProps(), { ref } = _b, restComboProps = __rest(_b, ["ref"]);
     const combinedRef = useComposedRefs(forwardedRef, ref);
-    console.log('render autocomplete');
     return (_jsxs("div", Object.assign({ className: cn(className, {
@@ -67,0 +74,0 @@ [style.autocomplete]: true,

tslib/index.d.ts

@@ -35,4 +35,6 @@ export { Input } from './Input';
 export * from './Select/components';
+export * from './Select/types';
 export * from './Autocomplete';
 export * from './Autocomplete/components';
+export * from './Autocomplete/types';
 //# sourceMappingURL=index.d.ts.map

tslib/index.js

@@ -35,3 +35,5 @@ export { Input } from './Input';
 export * from './Select/components';
+export * from './Select/types';
 export * from './Autocomplete';
 export * from './Autocomplete/components';
+export * from './Autocomplete/types';

tslib/Select/index.js

@@ -13,3 +13,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useState } from 'react';
 import { SelectButton } from './components/SelectButton';
@@ -42,9 +42,16 @@ import { useSelect, } from 'downshift';
     const defaultSelectedItem = !multiselect && defaultValue && items ? items.find((itm) => itm.value === defaultValue) : null;
-    const [selectedItems, setSelectedItems] = useState(value
-        ? (Array.isArray(value) ? value : [value])
-            .map((initItm) => items.find((itm) => itm.value === initItm))
-            .filter((itm) => itm !== undefined)
-        : []);
+    const [selectedItems, setSelectedItems] = useState([]);
+    useEffect(() => {
+        if (value) {
+            setSelectedItems((Array.isArray(value) ? value : [value])
+                .map((initItm) => items.find((itm) => itm.value === initItm))
+                .filter((itm) => itm !== undefined));
+        }
+        else {
+            if (selectedItems.length) {
+                setSelectedItems([]);
+            }
+        }
+    }, [value]);
     const resetMultiselect = useCallback((val) => {
-        console.log('resetMultiselect', val);
         if (val !== undefined) {
@@ -51,0 +58,0 @@ const index = selectedItems.findIndex((itm) => itm.value === val);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

393750

increased by0.17%

Lines of code

7000

increased by0.26%

No dependency changes