@konturio/ui-kit - npm Package Compare versions

Comparing version 3.0.0-alpha.49 to 3.0.0-alpha.50

package.json

 {
   "name": "@konturio/ui-kit",
-  "version": "3.0.0-alpha.49",
+  "version": "3.0.0-alpha.50",
   "repository": {
@@ -32,3 +32,3 @@ "type": "git",
   },
-  "gitHead": "92ff76c3a20ed5b468f0d1eb42a111c24f8c9fde"
+  "gitHead": "b4fc75ee9185c097bc0cc0473fb48a09a4b54934"
 }

tslib/Divider/index.js

@@ -17,4 +17,3 @@ var __rest = (this && this.__rest) || function (s, e) {
     var { children, className, clearing, fitted, hidden, type } = _a, props = __rest(_a, ["children", "className", "clearing", "fitted", "hidden", "type"]);
-    const dynamicClasses = cn({
-        className,
+    const dynamicClasses = cn(className, {
         [styles.divider]: true,
@@ -21,0 +20,0 @@ [styles.clearing]: clearing,

tslib/Select/components/SelectButton/index.d.ts

 import React from 'react';
 import { ForwardRefComponent } from '../../../utils/component-helpers/polymorphic';
-import { SelectItemType } from '../../types';
+import { MultiselectType, SelectItemType } from '../../types';
 export interface SelectButtonClasses {
@@ -16,4 +16,9 @@ label?: string;
     labelProps: Record<string, unknown>;
+    withResetButton?: boolean;
+    multiselect?: MultiselectType;
     open?: boolean;
-    value: SelectItemType | null;
+    item?: string | {
+        title: string;
+        value: SelectItemType['value'];
+    }[];
     classes?: SelectButtonClasses;
@@ -23,5 +28,5 @@ disabled?: boolean;
     type: 'classic' | 'inline';
-    reset: () => void;
+    reset: (val?: SelectItemType['value']) => void;
 }
 export declare const SelectButton: ForwardRefComponent<"div", SelectButtonProps>;
 //# sourceMappingURL=index.d.ts.map

tslib/Select/components/SelectButton/index.js

@@ -17,4 +17,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import style from './style.module.css';
+import { MULTISELECT_TYPE_AGGREGATE, MULTISELECT_TYPE_CHIPS } from '../../types';
+import { MultiselectChip } from '../MultiselectChip';
 export const SelectButton = React.forwardRef((_a, ref) => {
-    var { children = 'Select', value, open = false, label, className, classes, toggleProps, labelProps, disabled, error, type, reset } = _a, props = __rest(_a, ["children", "value", "open", "label", "className", "classes", "toggleProps", "labelProps", "disabled", "error", "type", "reset"]);
+    var { children = 'Select', item, open = false, label, className, classes, toggleProps, labelProps, disabled, error, type, withResetButton = true, reset, multiselect } = _a, props = __rest(_a, ["children", "item", "open", "label", "className", "classes", "toggleProps", "labelProps", "disabled", "error", "type", "withResetButton", "reset", "multiselect"]);
     const dynamicClasses = cn({
@@ -31,5 +33,27 @@ [style.root]: true,
     }, [reset]);
-    const title = value === null || value === void 0 ? void 0 : value.title;
-    return (_jsxs("div", Object.assign({ className: dynamicClasses }, props, { ref: ref }, { children: [label && (_jsx("label", Object.assign({ className: cn(style.label, classes === null || classes === void 0 ? void 0 : classes.label) }, labelProps, { children: label }))), _jsxs("button", Object.assign({ disabled: disabled, type: "button", "aria-label": "toggle menu" }, toggleProps, { className: cn(style.selectBox, classes === null || classes === void 0 ? void 0 : classes.selectBox) }, { children: [_jsx("div", Object.assign({ className: cn(style.placeholder, !title && style.noValue, classes === null || classes === void 0 ? void 0 : classes.placeholder) }, { children: title || children })), _jsx("div", Object.assign({ className: style.openToggle }, { children: title ? (_jsx(Close16, { className: style.closeIcon, onClick: onReset })) : open ? (_jsx(ChevronUp16, {})) : (_jsx(ChevronDown16, {})) }))] })), error && typeof error === 'string' ? (_jsx("div", Object.assign({ className: cn(style.errorMessage, classes === null || classes === void 0 ? void 0 : classes.error) }, { children: error }))) : null] })));
+    let placeholderContent;
+    if (item) {
+        if (multiselect === MULTISELECT_TYPE_AGGREGATE && item) {
+            placeholderContent = _jsx(MultiselectChip, Object.assign({ onBtnClick: reset }, { children: item }));
+        }
+        else if (multiselect === MULTISELECT_TYPE_CHIPS && Array.isArray(item)) {
+            placeholderContent = item.map((itm, index) => (_jsx(MultiselectChip, Object.assign({ value: itm.value, onBtnClick: reset }, { children: itm.title }), `${itm.value}_${index}`)));
+        }
+        else {
+            placeholderContent = item;
+        }
+    }
+    else {
+        placeholderContent = children;
+    }
+    return (_jsxs("div", Object.assign({ className: dynamicClasses }, props, { ref: ref }, { children: [label && (_jsx("label", Object.assign({ className: cn(style.label, classes === null || classes === void 0 ? void 0 : classes.label) }, labelProps, { children: label }))), _jsxs("button", Object.assign({ disabled: disabled, type: "button", "aria-label": "toggle menu" }, toggleProps, { className: cn(style.selectBox, classes === null || classes === void 0 ? void 0 : classes.selectBox) }, { children: [_jsx("div", Object.assign({ className: cn({
+                            [style.placeholder]: true,
+                            [style.nonInteractable]: multiselect !== MULTISELECT_TYPE_AGGREGATE && multiselect !== MULTISELECT_TYPE_CHIPS,
+                            [style.noValue]: !item,
+                            [(classes === null || classes === void 0 ? void 0 : classes.placeholder) || '']: classes === null || classes === void 0 ? void 0 : classes.placeholder,
+                        }) }, { children: placeholderContent })), _jsxs("div", Object.assign({ className: style.buttonsContainer }, { children: [withResetButton &&
+                                item &&
+                                multiselect !== MULTISELECT_TYPE_AGGREGATE &&
+                                multiselect !== MULTISELECT_TYPE_CHIPS ? (_jsx(Close16, { className: style.resetIcon, onClick: onReset })) : null, open ? _jsx(ChevronUp16, {}) : _jsx(ChevronDown16, {})] }))] })), error && typeof error === 'string' ? (_jsx("div", Object.assign({ className: cn(style.errorMessage, classes === null || classes === void 0 ? void 0 : classes.error) }, { children: error }))) : null] })));
 });
 SelectButton.displayName = 'SelectButton';

tslib/Select/components/SelectItem/index.d.ts

@@ -7,6 +7,9 @@ import { ForwardRefComponent } from '../../../utils/component-helpers/polymorphic';
     item: SelectItemType;
+    title?: string;
     highlighted?: boolean;
     selected?: boolean;
+    showSelectedIcon?: boolean;
+    showEntryIcon?: boolean;
 }
 export declare const SelectItem: ForwardRefComponent<"li", SelectItemProps>;
 //# sourceMappingURL=index.d.ts.map

tslib/Select/components/SelectItem/index.js

@@ -1,6 +0,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import cn from 'clsx';
 import style from './style.module.css';
-export const SelectItem = forwardRef(({ className, highlighted, selected, item, itemProps }, ref) => {
+import { ArrowRight24, Finish24 } from '@konturio/default-icons';
+export const SelectItem = forwardRef(({ className, highlighted, selected, item, title, itemProps, showSelectedIcon = true, showEntryIcon = false }, ref) => {
     const dynamicClasses = cn({
@@ -14,4 +15,4 @@ [style.selectItem]: true,
     });
-    return (_jsx("li", Object.assign({ className: dynamicClasses, ref: ref }, (!item.disabled ? itemProps : {}), { children: _jsx("span", { children: item.title }) })));
+    return (_jsxs("li", Object.assign({ className: dynamicClasses, ref: ref }, (!item.disabled ? itemProps : {}), { children: [_jsxs("span", Object.assign({ className: style.titleContainer }, { children: [showEntryIcon && (_jsx("span", Object.assign({ className: style.entryIconContainer }, { children: _jsx(ArrowRight24, {}) }))), title || item.title] })), showSelectedIcon && !item.disabled && selected ? (_jsx("span", Object.assign({ className: style.selectedIconContainer }, { children: _jsx(Finish24, {}) }))) : null] })));
 });
 SelectItem.displayName = 'SelectItem';

tslib/Select/index.d.ts

 import React from 'react';
 import { SelectButtonClasses } from './components/SelectButton';
 import { UseSelectStateChange } from 'downshift';
-import { SelectItemType } from './types';
+import { MultiselectType, SelectItemType } from './types';
 import { ForwardRefComponent } from '../utils/component-helpers/polymorphic';
 export interface SelectProps {
     items: SelectItemType[];
-    itemToString?: (item: SelectItemType | null) => string;
+    value?: SelectItemType['value'] | SelectItemType['value'][];
+    defaultValue?: SelectItemType['value'] | SelectItemType['value'][];
+    showSelectedIcon?: boolean;
+    showEntryIcon?: boolean;
+    multiselect?: MultiselectType;
+    withResetButton?: boolean;
+    itemToString?: (item: SelectItemType | SelectItemType[] | null) => string;
     label?: string | React.ReactChild | React.ReactChild[];
@@ -18,5 +24,6 @@ disabled?: boolean;
     };
-    onChange: (changes: UseSelectStateChange<SelectItemType>) => void;
+    onChange?: (changes: UseSelectStateChange<SelectItemType>) => void;
+    onSelect?: (selection: SelectItemType | SelectItemType[] | null | undefined) => void;
 }
 export declare const Select: ForwardRefComponent<"div", SelectProps>;
 //# sourceMappingURL=index.d.ts.map

tslib/Select/index.js

@@ -13,21 +13,104 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useCallback, useState } from 'react';
 import { SelectButton } from './components/SelectButton';
-import { useSelect } from 'downshift';
+import { useSelect, } from 'downshift';
+import { MULTISELECT_TYPE_CHIPS } from './types';
+import { SelectItem } from './components/SelectItem';
 import cn from 'clsx';
 import style from './style.module.css';
-import { SelectItem } from './components/SelectItem';
+function defaultItemToString(item) {
+    if (Array.isArray(item)) {
+        return item.length ? item.map((itm) => itm.title).join(', ') : '';
+    }
+    return item ? item.title : '';
+}
+function multiselectStateReducer(state, actionAndChanges) {
+    const { changes, type } = actionAndChanges;
+    switch (type) {
+        case useSelect.stateChangeTypes.MenuKeyDownEnter:
+        case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
+        case useSelect.stateChangeTypes.ItemClick:
+            return Object.assign(Object.assign({}, changes), { isOpen: true, highlightedIndex: state.highlightedIndex });
+        default:
+            return changes;
+    }
+}
 export const Select = forwardRef((_a, ref) => {
-    var { children, items, itemToString, label, placeholder, classes, className, disabled, error, type = 'classic', onChange: onSelectedItemChange } = _a, props = __rest(_a, ["children", "items", "itemToString", "label", "placeholder", "classes", "className", "disabled", "error", "type", "onChange"]);
-    const { isOpen, selectedItem, reset, getToggleButtonProps, getLabelProps, getMenuProps, highlightedIndex, getItemProps, } = useSelect({
+    var { children, items, value, defaultValue, showSelectedIcon = true, showEntryIcon = false, multiselect, withResetButton = true, itemToString = defaultItemToString, label, placeholder, classes, className, disabled, error, type = 'classic', onChange, onSelect } = _a, props = __rest(_a, ["children", "items", "value", "defaultValue", "showSelectedIcon", "showEntryIcon", "multiselect", "withResetButton", "itemToString", "label", "placeholder", "classes", "className", "disabled", "error", "type", "onChange", "onSelect"]);
+    const initialSelectedItem = !multiselect && value && items ? items.find((itm) => itm.value === value) : undefined;
+    const defaultSelectedItem = !multiselect && defaultValue && items ? items.find((itm) => itm.value === defaultValue) : undefined;
+    const [selectedItems, setSelectedItems] = useState(value
+        ? (Array.isArray(value) ? value : [value])
+            .map((initItm) => items.find((itm) => itm.value === initItm))
+            .filter((itm) => itm !== undefined)
+        : []);
+    const resetMultiselect = useCallback((val) => {
+        if (val !== undefined) {
+            const index = selectedItems.findIndex((itm) => itm.value === val);
+            if (index >= 0) {
+                setSelectedItems([...selectedItems.slice(0, index), ...selectedItems.slice(index + 1)]);
+            }
+        }
+        else {
+            setSelectedItems([]);
+        }
+    }, [setSelectedItems, selectedItems]);
+    const onSelectChange = useCallback((changes) => {
+        if (onChange && typeof onChange === 'function') {
+            onChange(changes);
+        }
+        if (multiselect) {
+            if (changes.selectedItem === null || changes.selectedItem === undefined)
+                return;
+            const index = selectedItems.indexOf(changes.selectedItem);
+            let newSelectedItems;
+            if (index >= 0) {
+                newSelectedItems = [...selectedItems.slice(0, index), ...selectedItems.slice(index + 1)];
+            }
+            else {
+                newSelectedItems = [...selectedItems, changes.selectedItem];
+            }
+            setSelectedItems(newSelectedItems);
+            if (onSelect && typeof onSelect === 'function') {
+                onSelect(newSelectedItems);
+            }
+        }
+        else {
+            if (onSelect && typeof onSelect === 'function') {
+                onSelect(changes.selectedItem);
+            }
+        }
+    }, [onChange, onSelect, multiselect, selectedItems]);
+    const useSelectProps = {
         items,
         itemToString,
-        onSelectedItemChange,
-    });
+        initialSelectedItem: initialSelectedItem || defaultSelectedItem,
+        defaultSelectedItem,
+        onSelectedItemChange: onSelectChange,
+    };
+    if (multiselect) {
+        useSelectProps.stateReducer = multiselectStateReducer;
+        useSelectProps.selectedItem = null;
+    }
+    const { isOpen, selectedItem, reset, getToggleButtonProps, getLabelProps, getMenuProps, highlightedIndex, getItemProps, } = useSelect(useSelectProps);
+    let selectButtonItems;
+    if (multiselect === MULTISELECT_TYPE_CHIPS && selectedItems.length) {
+        selectButtonItems = selectedItems.map((slItm) => ({
+            title: itemToString(slItm),
+            value: slItm.value,
+        }));
+    }
+    else if (multiselect) {
+        selectButtonItems = itemToString(selectedItems);
+    }
+    else if (selectedItem) {
+        selectButtonItems = itemToString(selectedItem);
+    }
     return (_jsxs("div", Object.assign({ ref: ref, className: cn({
             [style.select]: true,
+            [style.open]: isOpen,
             className,
-        }) }, props, { children: [_jsx(SelectButton, Object.assign({ value: selectedItem, labelProps: getLabelProps(), toggleProps: getToggleButtonProps(), label: label, disabled: disabled, open: isOpen, error: error, type: type, reset: reset }, { children: children })), _jsx("ul", Object.assign({}, getMenuProps(), { className: cn({ [style.menu]: true, [(classes === null || classes === void 0 ? void 0 : classes.menu) || '']: classes === null || classes === void 0 ? void 0 : classes.menu }) }, { children: isOpen &&
-                    items.map((item, index) => (_jsx(SelectItem, { item: item, itemProps: getItemProps({ item, index }), className: classes === null || classes === void 0 ? void 0 : classes.menuItem, highlighted: highlightedIndex === index, selected: selectedItem === item }, `${item.value}${index}`))) }))] })));
+        }) }, props, { children: [_jsx(SelectButton, Object.assign({ item: selectButtonItems, labelProps: getLabelProps(), toggleProps: getToggleButtonProps(), label: label, disabled: disabled, open: isOpen, error: error, type: type, reset: multiselect ? resetMultiselect : reset, multiselect: multiselect, withResetButton: withResetButton }, { children: children })), _jsx("ul", Object.assign({}, getMenuProps(), { className: cn({ [style.menu]: true, [(classes === null || classes === void 0 ? void 0 : classes.menu) || '']: classes === null || classes === void 0 ? void 0 : classes.menu }) }, { children: isOpen &&
+                    items.map((item, index) => (_jsx(SelectItem, { item: item, title: itemToString(item), itemProps: getItemProps({ item, index }), className: classes === null || classes === void 0 ? void 0 : classes.menuItem, highlighted: highlightedIndex === index, selected: multiselect ? selectedItems.includes(item) : selectedItem === item, showSelectedIcon: showSelectedIcon, showEntryIcon: showEntryIcon }, `${item.value}${index}`))) }))] })));
 });
 Select.displayName = 'Select';

tslib/Select/types.d.ts

@@ -7,2 +7,5 @@ export declare type SelectItemType = {
 };
+export declare const MULTISELECT_TYPE_AGGREGATE = "aggregate";
+export declare const MULTISELECT_TYPE_CHIPS = "chips";
+export declare type MultiselectType = boolean | typeof MULTISELECT_TYPE_AGGREGATE | typeof MULTISELECT_TYPE_CHIPS;
 //# sourceMappingURL=types.d.ts.map

tslib/Select/types.js

@@ -1,1 +0,2 @@
-export {};
+export const MULTISELECT_TYPE_AGGREGATE = 'aggregate';
+export const MULTISELECT_TYPE_CHIPS = 'chips';

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

349520

increased by3.23%

Number of package files

296

increased by1.37%

Lines of code

6171

increased by3.61%

No dependency changes