@homecode/ui 4.29.1 → 4.30.0

package/dist/esm/index.js

@@ -4,6 +4,7 @@ export { Button } from './src/components/Button/Button.js';
 export { ButtonGroup } from './src/components/ButtonGroup/ButtonGroup.js';
 export { Calendar } from './src/components/Calendar/Calendar.js';
 export { Checkbox } from './src/components/Checkbox/Checkbox.js';
+export { Chip } from './src/components/Chip/Chip.js';
 export { Container } from './src/components/Container/Container.js';
 export { DatePicker } from './src/components/DatePicker/DatePicker.js';
 export { DatePickerInput } from './src/components/DatePickerInput/DatePickerInput.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -26,6 +26,8 @@ import 'justorm/react';
 import 'lodash.omit';
 import 'nanoid';
 import '../Checkbox/Checkbox.styl.js';
+import '../Chip/Chip.styl.js';
+import '../Tooltip/Tooltip.styl.js';
 import '../Container/Container.js';
 import '../DatePicker/DatePicker.styl.js';
 import 'moment';
@@ -54,7 +56,6 @@ import '../ProgressCircular/ProgressCircular.styl.js';
 import '../Router/Router.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';
-import '../Tooltip/Tooltip.styl.js';
 import '../Text/Text.js';
 import '../Virtualized/Virtualized.styl.js';
 import '../Virtualized/List/List.styl.js';

package/dist/esm/src/components/Chip/Chip.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Button } from '../Button/Button.js';
+import S from './Chip.styl.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { Icon } from '../Icon/Icon.js';
+
+function Chip({ children, className, selected, onRemove, onClick, removeTooltip, size = 'm', }) {
+    const buttonSize = size === 'xs' ? 's' : size;
+    const closeIcon = jsx(Icon, { type: "close", size: buttonSize });
+    return (jsxs("div", { className: cn(S.chip, S[`size_${size}`], className, selected && S.selected), onClick: onClick, children: [jsx("span", { className: S.content, children: children }), onRemove && (jsx(Button, { round: true, square: true, variant: "clear", size: buttonSize, className: S.remove, onClick: e => {
+                    e.stopPropagation();
+                    onRemove();
+                }, children: removeTooltip ? (jsx(Tooltip, { content: removeTooltip, children: closeIcon })) : (closeIcon) }))] }));
+}
+
+export { Chip };

package/dist/esm/src/components/Chip/Chip.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Chip_chip__DXD0C{align-items:center;background:var(--accent-color-alpha-100);cursor:pointer;display:inline-flex;gap:2px;transition:background .2s ease}.Chip_chip__DXD0C:hover{background:var(--accent-color-alpha-200)}.Chip_size_xs__IbN1f{border-radius:var(--indent-xs);font-size:12px;padding-left:var(--indent-xs)}.Chip_size_s__ERE3z{border-radius:var(--indent-s);font-size:16px;padding-left:var(--indent-s)}.Chip_size_m__F2Bbw{border-radius:var(--indent-m);font-size:20px;padding-left:var(--indent-m)}.Chip_size_l__YgtcF{border-radius:var(--indent-l);font-size:24px;padding-left:var(--indent-l)}.Chip_selected__UcBat,.Chip_selected__UcBat:hover{background:var(--accent-color-alpha-300)}.Chip_content__2xloA,.Chip_remove__vqyOL{align-items:center;display:flex}.Chip_remove__vqyOL{justify-content:center;opacity:.3;transform:scale(.6);transition:opacity .2s ease,transform .1s ease}.Chip_remove__vqyOL:hover{background-color:var(--danger-color-alpha-300);transform:scale(.8)}.Chip_remove__vqyOL svg{transform:scale(.8)}.Chip_chip__DXD0C:hover .Chip_remove__vqyOL{opacity:1}";
+var S = {"chip":"Chip_chip__DXD0C","size_xs":"Chip_size_xs__IbN1f","size_s":"Chip_size_s__ERE3z","size_m":"Chip_size_m__F2Bbw","size_l":"Chip_size_l__YgtcF","selected":"Chip_selected__UcBat","content":"Chip_content__2xloA","remove":"Chip_remove__vqyOL"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/InputFile/InputFile.js

@@ -30,6 +30,8 @@ import '../RequiredStar/RequiredStar.styl.js';
 import '../Select/Select.styl.js';
 import 'lodash.omit';
 import '../Checkbox/Checkbox.styl.js';
+import '../Chip/Chip.styl.js';
+import '../Tooltip/Tooltip.styl.js';
 import '../Container/Container.js';
 import '../DatePicker/DatePicker.styl.js';
 import 'moment';
@@ -53,7 +55,6 @@ import '../ProgressCircular/ProgressCircular.styl.js';
 import '../Router/Router.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';
-import '../Tooltip/Tooltip.styl.js';
 import '../Text/Text.js';
 import '../Virtualized/Virtualized.styl.js';
 import '../Virtualized/List/List.styl.js';

package/dist/esm/src/components/Select/Select.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Select_root__mjOjv{max-height:200px;max-width:100%;position:relative}.Select_root__mjOjv.Select_disabled__AlOQi{opacity:.4;pointer-events:none}.Select_additionalLabel__K0--Z{flex-grow:1;overflow:hidden;text-align:left;text-overflow:ellipsis}.Select_trigger__OH48f{position:relative;z-index:1}.Select_triggerArrow__1LEop{flex-shrink:0;margin-left:.3em;margin-right:-.3em;transition:transform .2s ease-out}.Select_triggerArrow__1LEop.Select_isOpen__WlMUH{transform:rotateX(-180deg)}.Select_disabled__AlOQi .Select_triggerArrow__1LEop{color:var(--text3-color)}.Select_triggerButton__lErtt{justify-content:space-between;text-align:left;width:100%}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad>span{max-width:calc(100% - 22px)}.Select_triggerButton__lErtt.Select_isError__WJJLq{box-shadow:inset 0 0 0 2px var(--danger-color)}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh{line-height:1.2em;opacity:0;overflow:hidden;text-overflow:ellipsis}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh.Select_hasSelected__zQhBV{opacity:1}.Select_presetPanel__Yu94r{box-shadow:inset 0 -1px 0 var(--decent-color-alpha-100);display:flex;padding:5px}.Select_presetButton__BAl0q{flex-grow:1;justify-content:center}.Select_presetButton__BAl0q+.Select_presetButton__BAl0q{margin-left:8px}.Select_options__3C0-v{max-height:200px;overflow-y:auto}.keyboard .Select_options__3C0-v{pointer-events:none}.Select_option__iJkfJ{align-items:center;cursor:pointer;display:flex;overflow:hidden;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}.Select_isTree__SiTaD .Select_option__iJkfJ{min-height:36px}.Select_size-s__qBK9t .Select_option__iJkfJ{font-size:12px;height:26px;padding:0 14px}.Select_size-m__jp7n- .Select_option__iJkfJ{font-size:16px;height:34px;padding:0 16px}.Select_size-l__b4EEy .Select_option__iJkfJ{font-size:20px;height:42px;padding:0 18px}.Select_size-xl__0OerX .Select_option__iJkfJ{font-size:24px;height:50px;padding:0 20px}.Select_option__iJkfJ:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.Select_option__iJkfJ:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.Select_isTree__SiTaD .Select_option__iJkfJ{padding-left:30px}.Select_option__iJkfJ.Select_isGroup__aP1lY{color:var(--accent-color);font-weight:500;pointer-events:none}.Select_isExpanded__rG8R1>.Select_option__iJkfJ{display:flex}.Select_option__iJkfJ>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_option__iJkfJ:before{content:\"\";display:inline-block}.Select_option__iJkfJ.Select_level-0__vu03A:before{content:none}.Select_option__iJkfJ.Select_level-1__ozH2U:before{min-width:24px;width:24px}.Select_option__iJkfJ.Select_level-2__XDqeh:before{min-width:48px;width:48px}.Select_option__iJkfJ.Select_level-3__Bc9XS:before{min-width:72px;width:72px}.Select_option__iJkfJ.Select_level-4__KfQcQ:before{min-width:96px;width:96px}.Select_option__iJkfJ.Select_level-5__DGSDM:before{min-width:120px;width:120px}.Select_option__iJkfJ.Select_level-6__p688A:before{min-width:144px;width:144px}.Select_option__iJkfJ.Select_isIndeterminate__dy-xV,.Select_option__iJkfJ.Select_isSelected__n3ZeN{background-color:var(--active-color-alpha-500)}.keyboard .Select_option__iJkfJ.Select_isFocused__oZSgY,.pointer .Select_option__iJkfJ:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Select_expandButton__UTwlR{background-color:transparent!important;display:flex;height:100%;justify-content:flex-end;overflow:visible;padding:0;position:relative;width:30px}.Select_expandButton__UTwlR:before{content:\"\";display:block;height:calc(100% + 20px);position:absolute;right:0;top:-10;width:100px}.Select_size-m__jp7n- .Select_expandButton__UTwlR{margin-left:-40px}.Select_size-l__b4EEy .Select_expandButton__UTwlR{margin-left:-46px}.Select_expandIcon__gWAIB{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .1s ease-out}.Select_isExpanded__rG8R1 .Select_expandIcon__gWAIB{transform:rotate(90deg) translateZ(0)}.Select_expandButton__UTwlR:hover .Select_expandIcon__gWAIB{color:var(--primary-color)}@keyframes Select_fadeIn__QpAwZ{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
-var S = {"root":"Select_root__mjOjv","disabled":"Select_disabled__AlOQi","additionalLabel":"Select_additionalLabel__K0--Z","trigger":"Select_trigger__OH48f","triggerArrow":"Select_triggerArrow__1LEop","isOpen":"Select_isOpen__WlMUH","triggerButton":"Select_triggerButton__lErtt","hasTriggerArrow":"Select_hasTriggerArrow__vPLad","isError":"Select_isError__WJJLq","triggerButtonLabel":"Select_triggerButtonLabel__XXLzh","hasSelected":"Select_hasSelected__zQhBV","presetPanel":"Select_presetPanel__Yu94r","presetButton":"Select_presetButton__BAl0q","options":"Select_options__3C0-v","option":"Select_option__iJkfJ","isTree":"Select_isTree__SiTaD","size-s":"Select_size-s__qBK9t","size-m":"Select_size-m__jp7n-","size-l":"Select_size-l__b4EEy","size-xl":"Select_size-xl__0OerX","isGroup":"Select_isGroup__aP1lY","isExpanded":"Select_isExpanded__rG8R1","level-0":"Select_level-0__vu03A","level-1":"Select_level-1__ozH2U","level-2":"Select_level-2__XDqeh","level-3":"Select_level-3__Bc9XS","level-4":"Select_level-4__KfQcQ","level-5":"Select_level-5__DGSDM","level-6":"Select_level-6__p688A","isSelected":"Select_isSelected__n3ZeN","isIndeterminate":"Select_isIndeterminate__dy-xV","isFocused":"Select_isFocused__oZSgY","expandButton":"Select_expandButton__UTwlR","expandIcon":"Select_expandIcon__gWAIB","fadeIn":"Select_fadeIn__QpAwZ"};
+var css_248z = ".Select_root__mjOjv{max-height:200px;max-width:100%;position:relative}.Select_root__mjOjv.Select_disabled__AlOQi{opacity:.4;pointer-events:none}.Select_additionalLabel__K0--Z{flex-grow:1;overflow:hidden;text-align:left;text-overflow:ellipsis}.Select_trigger__OH48f{position:relative;z-index:1}.Select_triggerArrow__1LEop{flex-shrink:0;margin-left:.3em;margin-right:-.3em;transition:transform .2s ease-out}.Select_triggerArrow__1LEop.Select_isOpen__WlMUH{transform:rotateX(-180deg)}.Select_disabled__AlOQi .Select_triggerArrow__1LEop{color:var(--text3-color)}.Select_triggerButton__lErtt{justify-content:space-between;text-align:left;width:100%}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad>span{max-width:calc(100% - 22px)}.Select_triggerButton__lErtt.Select_isError__WJJLq{box-shadow:inset 0 0 0 2px var(--danger-color)}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh{line-height:1.2em;opacity:0;overflow:hidden;text-overflow:ellipsis}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh.Select_hasSelected__zQhBV{opacity:1}.Select_presetPanel__Yu94r{box-shadow:inset 0 -1px 0 var(--decent-color-alpha-100);display:flex;padding:5px}.Select_presetButton__BAl0q{flex-grow:1;justify-content:center}.Select_presetButton__BAl0q+.Select_presetButton__BAl0q{margin-left:8px}.Select_options__3C0-v{max-height:200px;overflow-y:auto}.keyboard .Select_options__3C0-v{pointer-events:none}.Select_option__iJkfJ{align-items:center;cursor:pointer;display:flex;overflow:hidden;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}.Select_isTree__SiTaD .Select_option__iJkfJ{min-height:36px}.Select_size-s__qBK9t .Select_option__iJkfJ{font-size:12px;height:26px;padding:0 14px}.Select_size-m__jp7n- .Select_option__iJkfJ{font-size:16px;height:34px;padding:0 16px}.Select_size-l__b4EEy .Select_option__iJkfJ{font-size:20px;height:42px;padding:0 18px}.Select_size-xl__0OerX .Select_option__iJkfJ{font-size:24px;height:50px;padding:0 20px}.Select_option__iJkfJ:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.Select_option__iJkfJ:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.Select_isTree__SiTaD .Select_option__iJkfJ{padding-left:30px}.Select_option__iJkfJ.Select_isGroup__aP1lY{color:var(--accent-color);font-weight:500;pointer-events:none}.Select_isExpanded__rG8R1>.Select_option__iJkfJ{display:flex}.Select_option__iJkfJ>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_option__iJkfJ:before{content:\"\";display:inline-block}.Select_option__iJkfJ.Select_level-0__vu03A:before{content:none}.Select_option__iJkfJ.Select_level-1__ozH2U:before{min-width:24px;width:24px}.Select_option__iJkfJ.Select_level-2__XDqeh:before{min-width:48px;width:48px}.Select_option__iJkfJ.Select_level-3__Bc9XS:before{min-width:72px;width:72px}.Select_option__iJkfJ.Select_level-4__KfQcQ:before{min-width:96px;width:96px}.Select_option__iJkfJ.Select_level-5__DGSDM:before{min-width:120px;width:120px}.Select_option__iJkfJ.Select_level-6__p688A:before{min-width:144px;width:144px}.Select_option__iJkfJ.Select_isIndeterminate__dy-xV,.Select_option__iJkfJ.Select_isSelected__n3ZeN{background-color:var(--active-color-alpha-500)}.keyboard .Select_option__iJkfJ.Select_isFocused__oZSgY,.pointer .Select_option__iJkfJ:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Select_expandButton__UTwlR{background-color:transparent!important;display:flex;height:100%;justify-content:flex-end;overflow:visible;padding:0;position:relative;width:30px}.Select_expandButton__UTwlR:before{content:\"\";display:block;height:calc(100% + 20px);position:absolute;right:0;top:-10;width:100px}.Select_size-m__jp7n- .Select_expandButton__UTwlR{margin-left:-40px}.Select_size-l__b4EEy .Select_expandButton__UTwlR{margin-left:-46px}.Select_expandIcon__gWAIB{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .1s ease-out}.Select_isExpanded__rG8R1 .Select_expandIcon__gWAIB{transform:rotate(90deg) translateZ(0)}.Select_expandButton__UTwlR:hover .Select_expandIcon__gWAIB{color:var(--primary-color)}.Select_chip__FRK2y{margin-left:-.4em}.Select_chipsContainer__JruCi{overflow-y:auto;padding:4px 0}.Select_size-s__qBK9t .Select_chipsContainer__JruCi{max-height:108px}.Select_size-m__jp7n- .Select_chipsContainer__JruCi{max-height:180px}.Select_size-l__b4EEy .Select_chipsContainer__JruCi{max-height:220px}.Select_chipContainerInner__cYHSk{display:flex;flex-wrap:wrap;gap:4px}.Select_chip__FRK2y{margin:0}@keyframes Select_fadeIn__QpAwZ{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
+var S = {"root":"Select_root__mjOjv","disabled":"Select_disabled__AlOQi","additionalLabel":"Select_additionalLabel__K0--Z","trigger":"Select_trigger__OH48f","triggerArrow":"Select_triggerArrow__1LEop","isOpen":"Select_isOpen__WlMUH","triggerButton":"Select_triggerButton__lErtt","hasTriggerArrow":"Select_hasTriggerArrow__vPLad","isError":"Select_isError__WJJLq","triggerButtonLabel":"Select_triggerButtonLabel__XXLzh","hasSelected":"Select_hasSelected__zQhBV","presetPanel":"Select_presetPanel__Yu94r","presetButton":"Select_presetButton__BAl0q","options":"Select_options__3C0-v","option":"Select_option__iJkfJ","isTree":"Select_isTree__SiTaD","size-s":"Select_size-s__qBK9t","size-m":"Select_size-m__jp7n-","size-l":"Select_size-l__b4EEy","size-xl":"Select_size-xl__0OerX","isGroup":"Select_isGroup__aP1lY","isExpanded":"Select_isExpanded__rG8R1","level-0":"Select_level-0__vu03A","level-1":"Select_level-1__ozH2U","level-2":"Select_level-2__XDqeh","level-3":"Select_level-3__Bc9XS","level-4":"Select_level-4__KfQcQ","level-5":"Select_level-5__DGSDM","level-6":"Select_level-6__p688A","isSelected":"Select_isSelected__n3ZeN","isIndeterminate":"Select_isIndeterminate__dy-xV","isFocused":"Select_isFocused__oZSgY","expandButton":"Select_expandButton__UTwlR","expandIcon":"Select_expandIcon__gWAIB","chip":"Select_chip__FRK2y","chipsContainer":"Select_chipsContainer__JruCi","chipContainerInner":"Select_chipContainerInner__cYHSk","fadeIn":"Select_fadeIn__QpAwZ"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/src/components/Select/Select2.js

@@ -6,6 +6,7 @@ import cn from 'classnames';
 import omit from 'lodash.omit';
 import { AssistiveText } from '../AssistiveText/AssistiveText.js';
 import { Button } from '../Button/Button.js';
+import { Chip } from '../Chip/Chip.js';
 import { Input } from '../Input/Input.js';
 import { Icon } from '../Icon/Icon.js';
 import { Label } from '../Label/Label.js';
@@ -17,7 +18,7 @@ import useEvent from '../../hooks/useEvent.js';
 import S from './Select.styl.js';
 
 function Select2(props) {
-    const { className, value, onChange, onSearchChange, disableTriggerArrow, inputProps, popupProps, scrollProps, size = 'm', round, optionClassName, additionalOptions = [], options, variant, label, additionalLabel, error, blur, disabled, trigger, required, hideRequiredStar, isSearchable, presets = [], selectAllButton, clearButton, showSelectedCount, disableLabel, } = props;
+    const { className, value, onChange, onChipClick, onSearchChange, disableTriggerArrow, inputProps, popupProps, scrollProps, size = 'm', round, optionClassName, additionalOptions = [], options, variant, label, additionalLabel, error, blur, disabled, trigger, required, hideRequiredStar, isSearchable, presets = [], selectAllButton, clearButton, showSelectedCount, disableLabel, selectedChipRemoveTooltip, } = props;
     const isMultiple$1 = isMultiple(value);
     const closeOnSelect = props.closeOnSelect ?? !isMultiple$1;
     const contentRef = useRef(null);
@@ -172,26 +173,47 @@ function Select2(props) {
         }, [])
             .join(', '));
     }, [isMultiple$1, value, ids]);
+    const renderSelectedChips = () => {
+        if (!isMultiple$1 || !value || !value.length)
+            return null;
+        return value.map(id => {
+            const label = getLabel(id);
+            if (!label)
+                return null;
+            return (jsx(Chip, { className: S.chip, size: size, onRemove: () => onItemToggle(id), onClick: () => onChipClick?.(id), removeTooltip: selectedChipRemoveTooltip, children: label }, id));
+        });
+    };
     const triggerArrow = useMemo(() => {
         if (disableTriggerArrow || (inputProps?.hasClear && searchVal))
             return null;
         return (jsx(Icon, { type: "chevronDown", className: cn(S.triggerArrow, isOpen && S.isOpen), size: size }));
     }, [isOpen, searchVal]);
     const renderTriggerInput = () => {
+        const hasChips = isMultiple$1 && value && value.length > 0;
+        const inputValue = isMultiple$1
+            ? isFocused && isSearchActive
+                ? searchVal
+                : ''
+            : isFocused && isSearchActive
+                ? searchVal
+                : selectedLabel;
         return (jsx(Input, { ...triggerProps, ...inputProps, 
             // TODO: autoComplete
-            addonRight: triggerArrow, error: isErrorVisible, value: isFocused && isSearchActive ? searchVal : selectedLabel, onChange: handleSearchChange, label: getFieldLabel(label) }));
+            addonRight: triggerArrow, error: isErrorVisible, value: inputValue, onChange: handleSearchChange, label: getFieldLabel(label), placeholder: hasChips && !inputValue ? '' : inputProps?.placeholder }));
     };
     const renderTriggerButton = () => {
         const { label, className, ...rest } = triggerProps;
         const props = omit(rest, ['name', 'inputProps']);
-        const fullSelectedLabel = [selectedLabel, label, additionalLabel].filter(Boolean);
+        isMultiple$1 && value && value.length > 0;
+        const fullSelectedLabel = [label, additionalLabel].filter(Boolean);
+        // ?
+        // : [selectedLabel, label, additionalLabel].filter(Boolean);
         const hasSelected = fullSelectedLabel.length > 0;
         const displayLabel = hasSelected ? fullSelectedLabel : label;
-        const title = hasSelected ? fullSelectedLabel : null;
+        const title = hasSelected && !isMultiple$1 ? fullSelectedLabel : null;
         const isError = isErrorVisible;
         const classes = cn(S.triggerButton, isError && S.isError, triggerArrow && S.hasTriggerArrow, className);
-        return (jsxs("div", { children: [jsxs(Button, { className: classes, variant: "default", ...props, style: { clipPath: labelClipPath }, title: title?.join?.(', '), children: [jsx("div", { className: cn(S.triggerButtonLabel, hasSelected && S.hasSelected), children: displayLabel }), triggerArrow] }), jsx(Label, { size: size, isOnTop: hasSelected, isError: isError, onClipPathChange: setLabelClipPath, children: getFieldLabel(label) })] }));
+        return (jsxs("div", { children: [jsxs(Button, { className: classes, variant: "default", ...props, style: { clipPath: labelClipPath }, title: title?.join?.(', '), children: [jsx("div", { className: cn(S.triggerButtonLabel, hasSelected && S.hasSelected), children: displayLabel }), triggerArrow] }), !isMultiple$1 && (jsx(Label, { size: size, isOnTop: hasSelected, isError: isError, onClipPathChange: setLabelClipPath, children: getFieldLabel(label) }))] }));
     };
     const renderTrigger = () => {
         if (trigger)
@@ -199,7 +221,8 @@ function Select2(props) {
         const triggerElem = isSearchable
             ? renderTriggerInput()
             : renderTriggerButton();
-        return (jsxs("div", { className: S.trigger, children: [triggerElem, required && !hideRequiredStar && jsx(RequiredStar, { size: size })] }));
+        const hasChips = isMultiple$1 && value && value.length > 0;
+        return (jsxs("div", { className: S.trigger, children: [hasChips && (jsx(Scroll, { y: true, className: S.chipsContainer, innerClassName: S.chipContainerInner, size: size, fadeSize: size, autoHide: true, children: renderSelectedChips() })), triggerElem, required && !hideRequiredStar && jsx(RequiredStar, { size: size })] }));
     };
     const renderPresets = () => {
         const items = presets.map(({ label, ids }) => ({

package/dist/esm/types/src/components/Chip/Chip.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+type ChipSize = 'xs' | 's' | 'm' | 'l';
+type Props = {
+    children: ReactNode;
+    className?: string;
+    selected?: boolean;
+    onRemove?: () => void;
+    onClick?: () => void;
+    removeTooltip?: ReactNode;
+    size?: ChipSize;
+};
+export declare function Chip({ children, className, selected, onRemove, onClick, removeTooltip, size, }: Props): JSX.Element;
+export {};

package/dist/esm/types/src/components/Select/Select.types.d.ts

@@ -49,6 +49,7 @@ export type Props = FormControl<Value> & InheritedInputProps & {
     searchValue?: string;
     expandSelected?: boolean;
     onChange: (value: Value) => void;
+    onChipClick?: (id: Id) => void;
     onSearchChange?: (value: string) => void;
     onOpen?: () => void;
     onClose?: () => void;
@@ -61,6 +62,7 @@ export type Props = FormControl<Value> & InheritedInputProps & {
     disableTriggerArrow?: boolean;
     popupProps?: SelectPopupProps;
     hideRequiredStar?: boolean;
+    selectedChipRemoveTooltip?: ReactNode;
 };
 export type State = {
     isFocused: boolean;

package/dist/esm/types/src/components/index.d.ts

@@ -4,6 +4,7 @@ export * from './Button/Button';
 export * from './ButtonGroup/ButtonGroup';
 export * from './Calendar/Calendar';
 export * from './Checkbox/Checkbox';
+export * from './Chip/Chip';
 export * from './Container/Container';
 export * from './DatePicker/DatePicker';
 export * from './DatePickerInput/DatePickerInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.29.1",
+  "version": "4.30.0",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",