@homecode/ui 4.30.12 → 4.30.14

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

@@ -18,7 +18,7 @@ import useEvent from '../../hooks/useEvent.js';
 import S from './Select.styl.js';
 
 function Select2(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, selectedChipIds, } = props;
+    const { className, value, onChange, onChipClick, onSearchChange, disableTriggerArrow, inputProps, popupProps, scrollProps, size = 'm', round, optionClassName, selectedChipClassName, additionalOptions = [], options, variant, label, additionalLabel, error, blur, disabled, trigger, required, hideRequiredStar, isSearchable, presets = [], selectAllButton, clearButton, showSelectedCount, disableLabel, selectedChipRemoveTooltip, selectedChipIds, onOpen, onClose, } = props;
     const isMultiple$1 = isMultiple(value);
     const closeOnSelect = props.closeOnSelect ?? !isMultiple$1;
     const contentRef = useRef(null);
@@ -66,7 +66,6 @@ function Select2(props) {
         }
     };
     const setItemFocus = index => {
-        console.log('setItemFocus::', index);
         focusedItemId.current = items[index]?.id;
         setFocusedItemIndex(index);
     };
@@ -108,12 +107,16 @@ function Select2(props) {
         if (focusedItemIndex === -1) {
             setItemFocus(0);
         }
+        popupProps?.onOpen?.();
+        onOpen?.();
     };
     const onPopupClose = () => {
         setIsOpen(false);
         setSearchVal('');
         setIsSearchActive(false);
         setItemFocus(0);
+        popupProps?.onClose?.();
+        onClose?.();
     };
     const onFocus = () => {
         setIsFocused(true);
@@ -180,7 +183,7 @@ function Select2(props) {
             const label = getLabel(id);
             if (!label)
                 return null;
-            return (jsx(Chip, { className: S.chip, size: size, selected: selectedChipIds?.includes(id), onRemove: () => onItemToggle(id), onClick: () => onChipClick?.(id), removeTooltip: selectedChipRemoveTooltip, children: label }, id));
+            return (jsx(Chip, { className: cn(S.chip, selectedChipIds?.includes(id) && selectedChipClassName, ids.items[id]?.chipClassName), size: size, selected: selectedChipIds?.includes(id), onRemove: () => onItemToggle(id), onClick: () => onChipClick?.(id), removeTooltip: selectedChipRemoveTooltip, children: label }, id));
         });
     };
     const triggerArrow = useMemo(() => {

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

@@ -12,6 +12,8 @@ export type Option = {
     sortingKey?: string | number;
     children?: Option[];
     render?: (label: string) => string;
+    /** Applied to the selected chip in multi-select mode */
+    chipClassName?: string;
 };
 type Preset = {
     label: string;
@@ -24,7 +26,7 @@ export type PresetButtonProps = {
 };
 type SelectPopupProps = Omit<PopupProps, 'disabled' | 'direction' | 'autoClose' | 'onOpen' | 'onClose' | 'trigger' | 'content'> & Partial<{
     direction: PopupProps['direction'];
-}>;
+}> & Partial<Pick<PopupProps, 'onOpen' | 'onClose'>>;
 type Selected = Record<string, true | Id[]>;
 export type Value = Id | Id[] | null;
 type InheritedInputProps = Partial<Pick<InputProps, 'onFocus' | 'onBlur'>>;
@@ -34,6 +36,7 @@ export type Props = FormControl<Value> & InheritedInputProps & {
     closeOnSelect?: boolean;
     optionsClassName?: string;
     optionClassName?: string;
+    selectedChipClassName?: string;
     additionalLabel?: ReactNode;
     size?: Size;
     variant?: 'default' | 'outlined';

package/package.json

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