@wavv/ui 2.4.7 → 2.4.8-alpha.2

package/build/components/CalendarParts/CalendarHeader.js

@@ -65,10 +65,12 @@ const CalendarHeader = ({ date, setDate })=>{
     const month = mth?.toString() || '';
     const year = yr?.toString() || '';
     const handleMonth = (monthId)=>{
-        setDate(new CalendarDate(+year, +monthId, day || 1));
+        const id = Array.isArray(monthId) ? monthId[0] : monthId;
+        setDate(new CalendarDate(+year, +id, day || 1));
     };
     const handleYear = (yearId)=>{
-        setDate(new CalendarDate(+yearId, +month, day || 1));
+        const id = Array.isArray(yearId) ? yearId[0] : yearId;
+        setDate(new CalendarDate(+id, +month, day || 1));
     };
     return /*#__PURE__*/ jsxs(Header, {
         children: [

package/build/components/ComboBox.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import type { ComboBoxProps } from './typeDefs/reactAriaTypes';
-import type { OpenStateProps, SelectInputProps } from './typeDefs/selectionTypes';
+import type { ComboBoxInputProps, OpenStateProps } from './typeDefs/selectionTypes';
 type Props = {
     /** Use when loading options asynchronously with onTextChange */
     loadingResults?: boolean;
@@ -13,9 +13,11 @@ type Props = {
     /** Customize the create option label. Receives raw inputText and returns the label to display. */
     formatCreateOption?: (inputText: string) => ReactNode;
     ref?: React.Ref<HTMLInputElement>;
-} & SelectInputProps & OpenStateProps & ComboBoxProps;
+} & ComboBoxInputProps & OpenStateProps & ComboBoxProps;
 declare const _default: (({ backgroundColor, menuBackground, children, fontSize, disabled, invalid, required, readOnly, loading, loadingResults, label, options, placeholder, placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, iconLeft, leftElement, rightElement, allowRepeatSelection, allowsEmptyCollection, emptyFallback, position, fixedPosition, open, onOpenChange, before, after, onChange, onCreate, formatCreateOption, afterShow, afterHide, onTextChange, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element) & {
-    Item: ({ id, value, header, body, leftElement, rightElement, inline, disabled, ...props }: import("..").SelectItem & Omit<import("react-aria-components").ListBoxItemProps<object>, "id" | "value" | "isDisabled">) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ id, value, header, body, leftElement, rightElement, inline, disabled, selectionMode, ...props }: import("..").SelectItem & Omit<import("react-aria-components").ListBoxItemProps<object>, "id" | "value" | "isDisabled"> & {
+        selectionMode?: import("react-aria-components").SelectionMode;
+    }) => import("react/jsx-runtime").JSX.Element;
     Section: ({ id, title, children }: {
         id?: string;
         title?: string;

package/build/components/ComboBox.js

@@ -26,7 +26,7 @@ const ComboBox_ComboBox = ({ backgroundColor, menuBackground, children, fontSize
         afterShow,
         afterHide
     });
-    const [internalValue, setInternalValue] = useState(defaultValue || '');
+    const [internalValue, setInternalValue] = useState(defaultValue ? String(defaultValue) : '');
     const [inputText, setInputText] = useState((value || defaultValue || '').toString());
     const pendingSelectionRef = useRef(null);
     const isControlled = void 0 !== value;

package/build/components/Dropdown.d.ts

@@ -1,9 +1,9 @@
 import { type ButtonProps } from 'react-aria-components';
-import type { ListOption, OpenStateProps, SelectInputProps, SelectItem } from './typeDefs/selectionTypes';
+import type { ComboBoxInputProps, ListOption, OpenStateProps, SelectItem } from './typeDefs/selectionTypes';
 type Props = {
     /** The options to be displayed in the dropdown */
     options?: ListOption[];
-} & Omit<SelectInputProps, 'options' | 'textOnly'> & OpenStateProps & Omit<ButtonProps, 'ref' | 'isDisabled'>;
+} & Omit<ComboBoxInputProps, 'options' | 'textOnly'> & OpenStateProps & Omit<ButtonProps, 'ref' | 'isDisabled'>;
 declare const _default: (({ children, before, after, open, label, placeholder, options, width, height, value, defaultValue, loading, hideCaret, color, disabled, readOnly, required, invalid, placeholderColor, fontSize, fontWeight, description, errorMessage, position, backgroundColor, menuBackground, iconLeft, leftElement, rightElement, onChange, onOpenChange, afterShow, afterHide, ...props }: Props) => import("react/jsx-runtime").JSX.Element) & {
     Item: ({ children, id, value, header, body, leftElement, rightElement, inline, disabled, ...props }: {
         children?: import("react").ReactNode;

package/build/components/ImageViewer.js

@@ -1,110 +1,152 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
-import { useEffect, useState } from "react";
-import { useOnClickOutside } from "../hooks/index.js";
+import { useCallback, useEffect, useState } from "react";
+import { Dialog, Modal, ModalOverlay } from "react-aria-components";
+import useEventListener from "../hooks/useEventListener.js";
 import Icon from "./Icon/index.js";
 const ImageViewer = ({ visible, close, images, startIndex, alt, maxWidth, maxHeight, opacity, ...rest })=>{
     const [currentIndex, setCurrentIndex] = useState(startIndex);
-    const exclusions = [
-        '#viewer-prev',
-        '#viewer-next',
-        '#viewer-prev *',
-        '#viewer-next *'
-    ];
-    const imageRef = useOnClickOutside(close, visible, exclusions);
+    const handleOpenChange = (open)=>{
+        if (!open) close();
+    };
     useEffect(()=>{
-        setCurrentIndex(startIndex);
+        if (visible) setCurrentIndex(startIndex);
     }, [
+        visible,
         startIndex
     ]);
-    const handlePrev = ()=>currentIndex > 0 ? setCurrentIndex(currentIndex - 1) : setCurrentIndex(images.length - 1);
-    const handleNext = ()=>currentIndex < images.length - 1 ? setCurrentIndex(currentIndex + 1) : setCurrentIndex(0);
-    const handleKeyPress = (event)=>{
-        const { key } = event;
-        switch(key){
+    const handlePrev = ()=>setCurrentIndex((prev)=>prev > 0 ? prev - 1 : images.length - 1);
+    const handleNext = ()=>setCurrentIndex((prev)=>prev < images.length - 1 ? prev + 1 : 0);
+    const handleKeyDown = useCallback((e)=>{
+        switch(e.key){
+            case 'Escape':
+                e.preventDefault();
+                close();
+                break;
             case 'ArrowLeft':
             case 'ArrowDown':
-                event.preventDefault();
-                handlePrev();
+                e.preventDefault();
+                setCurrentIndex((prev)=>prev > 0 ? prev - 1 : images.length - 1);
                 break;
             case 'ArrowRight':
             case 'ArrowUp':
-                event.preventDefault();
-                handleNext();
-                break;
-            case 'Escape':
-                event.preventDefault();
-                close();
+                e.preventDefault();
+                setCurrentIndex((prev)=>prev < images.length - 1 ? prev + 1 : 0);
                 break;
             default:
                 break;
         }
-    };
-    useEffect(()=>{
-        const ssr = "u" < typeof window;
-        const cleanup = ssr ? ()=>null : ()=>window.removeEventListener('keydown', handleKeyPress);
-        if (visible && !ssr) window.addEventListener('keydown', handleKeyPress);
-        return cleanup;
     }, [
-        visible,
-        currentIndex
+        close,
+        images.length
+    ]);
+    useEventListener("u" > typeof window ? window : {
+        current: null
+    }, 'keydown', handleKeyDown, visible, [
+        handleKeyDown
     ]);
-    return visible ? /*#__PURE__*/ jsxs(Viewer, {
+    if (0 === images.length) return null;
+    return /*#__PURE__*/ jsx(Overlay, {
+        isOpen: visible,
+        onOpenChange: handleOpenChange,
+        isDismissable: true,
         opacity: opacity,
         prevNext: images.length > 1,
         ...rest,
-        children: [
-            /*#__PURE__*/ jsx(Close, {
-                onClick: close,
-                children: /*#__PURE__*/ jsx(Icon, {
-                    name: "close",
-                    color: "white"
-                })
-            }),
-            images.length > 1 && /*#__PURE__*/ jsx(PrevNext, {
-                id: "viewer-prev",
-                onClick: handlePrev,
-                children: /*#__PURE__*/ jsx(Icon, {
-                    name: "chevron-left",
-                    size: 35,
-                    color: "white"
-                })
-            }),
-            /*#__PURE__*/ jsx(Media, {
-                ref: imageRef,
-                src: images[currentIndex],
-                alt: alt,
-                maxWidth: maxWidth,
-                maxHeight: maxHeight
-            }),
-            images.length > 1 && /*#__PURE__*/ jsx(PrevNext, {
-                next: true,
-                id: "viewer-next",
-                onClick: handleNext,
-                children: /*#__PURE__*/ jsx(Icon, {
-                    name: "chevron-right",
-                    size: 35,
-                    color: "white"
+        children: /*#__PURE__*/ jsx(StyledModal, {
+            children: /*#__PURE__*/ jsx(StyledDialog, {
+                "aria-label": alt || 'Image viewer',
+                children: /*#__PURE__*/ jsxs(ViewerContent, {
+                    children: [
+                        /*#__PURE__*/ jsx(Close, {
+                            onClick: close,
+                            children: /*#__PURE__*/ jsx(Icon, {
+                                name: "close",
+                                color: "white"
+                            })
+                        }),
+                        images.length > 1 && /*#__PURE__*/ jsx(PrevNext, {
+                            id: "viewer-prev",
+                            onClick: handlePrev,
+                            children: /*#__PURE__*/ jsx(Icon, {
+                                name: "chevron-left",
+                                size: 35,
+                                color: "white"
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Media, {
+                            src: images[currentIndex],
+                            alt: alt,
+                            maxWidth: maxWidth,
+                            maxHeight: maxHeight
+                        }),
+                        images.length > 1 && /*#__PURE__*/ jsx(PrevNext, {
+                            $next: true,
+                            id: "viewer-next",
+                            onClick: handleNext,
+                            children: /*#__PURE__*/ jsx(Icon, {
+                                name: "chevron-right",
+                                size: 35,
+                                color: "white"
+                            })
+                        })
+                    ]
                 })
             })
-        ]
-    }) : null;
+        })
+    });
 };
-const Viewer = styled.div(({ prevNext, opacity })=>({
-        width: '100%',
-        height: '100%',
-        backgroundColor: `rgba(0, 0, 0, ${opacity ?? 0.3})`,
+const fadeIn = keyframes({
+    from: {
+        opacity: 0
+    },
+    to: {
+        opacity: 1
+    }
+});
+const fadeOut = keyframes({
+    from: {
+        opacity: 1
+    },
+    to: {
+        opacity: 0
+    }
+});
+const Overlay = styled(ModalOverlay)(({ prevNext, opacity })=>({
         position: 'fixed',
         top: 0,
         left: 0,
+        width: '100%',
+        height: '100%',
+        backgroundColor: `rgba(0, 0, 0, ${opacity ?? 0.3})`,
         display: 'grid',
         gridTemplateColumns: prevNext ? 'auto 1fr auto' : '1fr',
         justifyContent: 'space-between',
         alignItems: 'center',
         zIndex: 10000,
         userSelect: 'none',
-        borderRadius: 5
+        borderRadius: 5,
+        '&[data-entering]': {
+            animation: `${fadeIn} 200ms ease-out`
+        },
+        '&[data-exiting]': {
+            animation: `${fadeOut} 200ms ease-in forwards`
+        }
     }));
+const StyledModal = styled(Modal)({
+    outline: 'none',
+    pointerEvents: 'none',
+    display: 'contents'
+});
+const StyledDialog = styled(Dialog)({
+    outline: 'none',
+    pointerEvents: 'none',
+    display: 'contents'
+});
+const ViewerContent = styled.div({
+    display: 'contents'
+});
 const Close = styled.div({
     position: 'absolute',
     top: 0,
@@ -115,9 +157,10 @@ const Close = styled.div({
     cursor: 'pointer',
     width: 50,
     height: 50,
-    zIndex: 1
+    zIndex: 1,
+    pointerEvents: 'auto'
 });
-const PrevNext = styled.div(({ next })=>({
+const PrevNext = styled.div(({ $next })=>({
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
@@ -125,18 +168,20 @@ const PrevNext = styled.div(({ next })=>({
         width: 50,
         height: '100%',
         backgroundColor: 'transparent',
-        left: next ? void 0 : 0,
-        right: next ? 0 : void 0,
+        left: $next ? void 0 : 0,
+        right: $next ? 0 : void 0,
         zIndex: 0,
+        pointerEvents: 'auto',
         '&:hover': {
-            background: `linear-gradient(90deg, rgba(0,0,0,${next ? 0 : 0.4}) 0%, rgba(0,0,0,${next ? 0.4 : 0}) 100%)`
+            background: `linear-gradient(90deg, rgba(0,0,0,${$next ? 0 : 0.4}) 0%, rgba(0,0,0,${$next ? 0.4 : 0}) 100%)`
         }
     }));
 const Media = styled.img(({ maxWidth, maxHeight })=>({
         display: 'block',
         justifySelf: 'center',
         maxWidth: maxWidth || '100%',
-        maxHeight: maxHeight || '100%'
+        maxHeight: maxHeight || '100%',
+        pointerEvents: 'auto'
     }));
 const components_ImageViewer = ImageViewer;
 export { components_ImageViewer as default };

package/build/components/ListBoxParts/ListBoxItem.d.ts

@@ -1,5 +1,7 @@
-import { type ListBoxItemProps } from 'react-aria-components';
+import { type ListBoxItemProps, type SelectionMode } from 'react-aria-components';
 import type { SelectItem } from '../typeDefs/selectionTypes';
-type Props = SelectItem & Omit<ListBoxItemProps, 'value' | 'id' | 'isDisabled'>;
-declare const ListBoxItem: ({ id, value, header, body, leftElement, rightElement, inline, disabled, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+type Props = SelectItem & Omit<ListBoxItemProps, 'value' | 'id' | 'isDisabled'> & {
+    selectionMode?: SelectionMode;
+};
+declare const ListBoxItem: ({ id, value, header, body, leftElement, rightElement, inline, disabled, selectionMode, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ListBoxItem;

package/build/components/ListBoxParts/ListBoxItem.js

@@ -1,30 +1,44 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styled from "@emotion/styled";
 import { ListBoxItem } from "react-aria-components";
+import Icon from "../Icon/index.js";
 import ItemHeaderBody from "../ListHelpers/ItemHeaderBody.js";
 import ListItemStyles, { preventProps } from "../ListHelpers/ListItemStyles.js";
-const ListBoxItem_ListBoxItem = ({ id, value, header, body, leftElement, rightElement, inline, disabled, ...props })=>{
+const ListBoxItem_ListBoxItem = ({ id, value, header, body, leftElement, rightElement, inline, disabled, selectionMode, ...props })=>{
     const headerText = header || value;
-    return /*#__PURE__*/ jsxs(Item, {
+    return /*#__PURE__*/ jsx(Item, {
         id: id || value,
         textValue: value,
         isDisabled: disabled,
         ...props,
-        children: [
-            leftElement || null,
-            headerText && body ? /*#__PURE__*/ jsx(ItemHeaderBody, {
-                header: headerText,
-                body: body,
-                inline: inline,
-                disabled: disabled
-            }) : value,
-            rightElement && /*#__PURE__*/ jsx("div", {
-                style: {
-                    marginLeft: 'auto'
-                },
-                children: rightElement
-            })
-        ]
+        children: ({ isSelected })=>{
+            const showCheck = 'multiple' === selectionMode || 'single' === selectionMode;
+            const check = showCheck ? /*#__PURE__*/ jsx(Icon, {
+                name: "check",
+                color: isSelected ? void 0 : 'transparent',
+                size: "small",
+                marginLeft: -12,
+                marginRight: 4
+            }) : null;
+            return /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    check,
+                    leftElement || null,
+                    headerText && body ? /*#__PURE__*/ jsx(ItemHeaderBody, {
+                        header: headerText,
+                        body: body,
+                        inline: inline,
+                        disabled: disabled
+                    }) : value,
+                    rightElement && /*#__PURE__*/ jsx("div", {
+                        style: {
+                            marginLeft: 'auto'
+                        },
+                        children: rightElement
+                    })
+                ]
+            });
+        }
     });
 };
 const Item = styled(ListBoxItem, preventProps)(ListItemStyles);

package/build/components/ListBoxParts/ListOptions.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { type ListBoxProps } from 'react-aria-components';
+import { type ListBoxProps, type SelectionMode } from 'react-aria-components';
 import type { ListOption, SelectInputProps } from '../typeDefs/selectionTypes';
 import type { Width } from '../types';
 type Props = {
@@ -8,6 +8,7 @@ type Props = {
     autoWidth?: boolean;
     readOnly?: boolean;
     createOptionItem?: ReactNode;
+    selectionMode?: SelectionMode;
 } & Width & ListBoxProps<ListOption> & Pick<SelectInputProps, 'before' | 'after' | 'menuBackground'>;
-declare const ListOptions: ({ options, children, autoWidth, width, before, after, menuBackground, createOptionItem, ...props }: Props) => ReactNode;
+declare const ListOptions: ({ options, children, autoWidth, width, before, after, menuBackground, createOptionItem, selectionMode, ...props }: Props) => ReactNode;
 export default ListOptions;

package/build/components/ListBoxParts/ListOptions.js

@@ -4,7 +4,7 @@ import { ListBox } from "react-aria-components";
 import ListSection from "../ListHelpers/ListSection.js";
 import ListStyles, { preventProps } from "../ListHelpers/ListStyles.js";
 import ListBoxItem from "./ListBoxItem.js";
-const ListOptions = ({ options, children, autoWidth, width, before, after, menuBackground, createOptionItem, ...props })=>/*#__PURE__*/ jsxs(ListContainer, {
+const ListOptions = ({ options, children, autoWidth, width, before, after, menuBackground, createOptionItem, selectionMode, ...props })=>/*#__PURE__*/ jsxs(ListContainer, {
         autoWidth: autoWidth,
         width: autoWidth ? void 0 : width,
         background: menuBackground,
@@ -15,6 +15,7 @@ const ListOptions = ({ options, children, autoWidth, width, before, after, menuB
                 style: {
                     outline: 'none'
                 },
+                selectionMode: selectionMode,
                 ...props,
                 children: [
                     createOptionItem,
@@ -25,13 +26,15 @@ const ListOptions = ({ options, children, autoWidth, width, before, after, menuB
                                 id: section.id,
                                 title: section.title,
                                 children: section.options.map((item)=>/*#__PURE__*/ jsx(ListBoxItem, {
-                                        ...item
+                                        ...item,
+                                        selectionMode: selectionMode
                                     }, item.id || item.value))
                             }, section.id);
                         }
                         const item = option;
                         return /*#__PURE__*/ jsx(ListBoxItem, {
-                            ...item
+                            ...item,
+                            selectionMode: selectionMode
                         }, item.id || item.value);
                     }),
                     children

package/build/components/Select.d.ts

@@ -1,10 +1,13 @@
+import { type SelectionMode } from 'react-aria-components';
 import type { SelectProps } from './typeDefs/reactAriaTypes';
 import type { OpenStateProps, SelectInputProps } from './typeDefs/selectionTypes';
 type Props = {
     ref?: React.Ref<HTMLButtonElement>;
 } & SelectInputProps & OpenStateProps & SelectProps;
-declare const _default: (({ backgroundColor, menuBackground, children, fontSize, fontWeight, color, disabled, invalid, required, readOnly, loading, label, options, placeholder, placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, allowRepeatSelection, hideCaret, position, fixedPosition, borderRadius, iconLeft, leftElement, rightElement, before, after, open, onOpenChange, onChange, afterShow, afterHide, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element) & {
-    Item: ({ id, value, header, body, leftElement, rightElement, inline, disabled, ...props }: import("..").SelectItem & Omit<import("react-aria-components").ListBoxItemProps<object>, "id" | "value" | "isDisabled">) => import("react/jsx-runtime").JSX.Element;
+declare const _default: (({ backgroundColor, menuBackground, children, fontSize, fontWeight, color, disabled, invalid, required, readOnly, loading, label, options, placeholder, placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, allowRepeatSelection, hideCaret, position, fixedPosition, borderRadius, iconLeft, leftElement, rightElement, before, after, open, onOpenChange, onChange, afterShow, afterHide, selectionMode, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element) & {
+    Item: ({ id, value, header, body, leftElement, rightElement, inline, disabled, selectionMode, ...props }: import("..").SelectItem & Omit<import("react-aria-components").ListBoxItemProps<object>, "id" | "value" | "isDisabled"> & {
+        selectionMode?: SelectionMode;
+    }) => import("react/jsx-runtime").JSX.Element;
     Section: ({ id, title, children }: {
         id?: string;
         title?: string;

package/build/components/Select.js

@@ -15,14 +15,24 @@ import ListRootStyles, { preventProps } from "./ListHelpers/ListRootStyles.js";
 import ListSection from "./ListHelpers/ListSection.js";
 import MotionPopover from "./MotionPopover.js";
 import Spinner from "./Spinner.js";
-const Select_Select = ({ backgroundColor, menuBackground, children, fontSize, fontWeight, color, disabled, invalid, required, readOnly, loading, label, options, placeholder = 'Select', placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, allowRepeatSelection, hideCaret, position, fixedPosition, borderRadius, iconLeft, leftElement, rightElement, before, after, open, onOpenChange, onChange, afterShow, afterHide, ref, ...props })=>{
+const Select_Select = ({ backgroundColor, menuBackground, children, fontSize, fontWeight, color, disabled, invalid, required, readOnly, loading, label, options, placeholder = 'Select', placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, allowRepeatSelection, hideCaret, position, fixedPosition, borderRadius, iconLeft, leftElement, rightElement, before, after, open, onOpenChange, onChange, afterShow, afterHide, selectionMode, ref, ...props })=>{
     const [isOpen, handleOpenChange] = useControlledOpenState({
         open,
         onOpenChange,
         afterShow,
         afterHide
     });
-    const [internalValue, setInternalValue] = useState(defaultValue || '');
+    const actualSelectionMode = selectionMode ?? 'single';
+    const isMultiple = 'multiple' === actualSelectionMode;
+    const [internalValue, setInternalValue] = useState(()=>{
+        if (isMultiple) {
+            const defaultValueArray = defaultValue;
+            return Array.isArray(defaultValueArray) ? defaultValueArray.map(String) : defaultValueArray ? [
+                String(defaultValueArray)
+            ] : [];
+        }
+        return defaultValue ? String(defaultValue) : '';
+    });
     const isControlled = void 0 !== value;
     const currentValue = isControlled ? value : internalValue;
     const { padding, paddingTop, paddingBottom, paddingRight, paddingLeft } = props;
@@ -43,11 +53,26 @@ const Select_Select = ({ backgroundColor, menuBackground, children, fontSize, fo
     };
     const handleSelect = (val)=>{
         if (!val) return;
-        if (!allowRepeatSelection && val === currentValue) return;
-        if (!isControlled) setInternalValue(val);
-        if (onChange) onChange(val);
+        if (isMultiple) {
+            const newValue = Array.isArray(val) ? val.map(String) : [
+                String(val)
+            ];
+            const currentArray = Array.isArray(currentValue) ? currentValue : [];
+            if (!allowRepeatSelection && JSON.stringify([
+                ...newValue
+            ].sort()) === JSON.stringify([
+                ...currentArray
+            ].sort())) return;
+            if (!isControlled) setInternalValue(newValue);
+            if (onChange) onChange(newValue);
+        } else {
+            const stringVal = String(val);
+            if (!allowRepeatSelection && stringVal === currentValue) return;
+            if (!isControlled) setInternalValue(stringVal);
+            if (onChange) onChange(stringVal);
+        }
     };
-    const hasValue = !!(currentValue || defaultValue);
+    const hasValue = isMultiple ? (Array.isArray(currentValue) ? currentValue.length > 0 : false) || (Array.isArray(defaultValue) ? defaultValue.length > 0 : false) : !!(currentValue || defaultValue);
     const hidePlaceholder = !hasValue && label;
     const caret = hideCaret ? null : /*#__PURE__*/ jsx(Icon, {
         name: isOpen ? 'caret-up' : 'caret-down',
@@ -65,7 +90,7 @@ const Select_Select = ({ backgroundColor, menuBackground, children, fontSize, fo
         defaultValue: defaultValue,
         textOnly: textOnly,
         width: width,
-        selectionMode: "single",
+        selectionMode: selectionMode ?? 'single',
         ...props,
         children: [
             /*#__PURE__*/ jsxs(SelectContainer, {
@@ -103,7 +128,14 @@ const Select_Select = ({ backgroundColor, menuBackground, children, fontSize, fo
                                     opacity: 0,
                                     position: 'absolute'
                                 } : {},
-                            children: ({ isPlaceholder, selectedText, defaultChildren })=>isPlaceholder ? defaultChildren : selectedText
+                            children: ({ isPlaceholder, selectedText, selectedItems, defaultChildren })=>{
+                                if (isPlaceholder) return defaultChildren;
+                                if (isMultiple && selectedItems) {
+                                    const count = selectedItems.length;
+                                    return count > 0 ? `${count} items selected` : defaultChildren;
+                                }
+                                return selectedText;
+                            }
                         })
                     }),
                     rightElement,
@@ -129,6 +161,7 @@ const Select_Select = ({ backgroundColor, menuBackground, children, fontSize, fo
                         before: before,
                         after: after,
                         menuBackground: menuBackground,
+                        selectionMode: selectionMode,
                         children: children
                     })
             })

package/build/components/typeDefs/reactAriaTypes.d.ts

@@ -98,7 +98,7 @@ export type ComboBoxProps = {
     onOpenChange?: Combo['onOpenChange'];
     onInputChange?: Combo['onInputChange'];
 } & Omit<Combo, 'children' | 'defaultItems' | 'items' | 'onSelectionChange' | 'selectedKey' | 'defaultSelectedKey' | 'defaultInputValue' | 'isOpen' | 'isDisabled' | 'isInvalid' | 'isRequired'>;
-type Select = AriaSelectProps<SelectItem>;
+type Select = AriaSelectProps<SelectItem, 'single' | 'multiple'>;
 export type SelectProps = {
     autoComplete?: Select['autoComplete'];
     name?: Select['name'];
@@ -108,10 +108,11 @@ export type SelectProps = {
     defaultValue?: Select['defaultValue'];
     autoFocus?: Select['autoFocus'];
     validationBehavior?: Select['validationBehavior'];
+    selectionMode?: Select['selectionMode'];
     className?: Select['className'];
     style?: Select['style'];
     onOpenChange?: Select['onOpenChange'];
-} & Omit<Select, 'placeholder' | 'selectionMode' | 'value' | 'children' | 'isOpen' | 'isDisabled' | 'isInvalid' | 'isRequired' | 'defaultSelectedKey' | 'selectionMode' | 'onChange' | 'validate' | 'onSelectionChange'>;
+} & Omit<Select, 'placeholder' | 'value' | 'children' | 'isOpen' | 'isDisabled' | 'isInvalid' | 'isRequired' | 'defaultSelectedKey' | 'selectionMode' | 'onChange' | 'validate' | 'onSelectionChange'>;
 type MenuProps = AriaMenuProps<ListOption>;
 export type DropdownMenuProps = {
     defaultSelectedKeys?: MenuProps['defaultSelectedKeys'];

package/build/components/typeDefs/selectionTypes.d.ts

@@ -43,15 +43,11 @@ export type ListOption<T = ListItem> = T | ListSection<T>;
 export type SelectItem = Omit<ListItem, 'onClick'>;
 export type MultiSelectItem = WithRequired<SelectItem, 'id'>;
 export type MultiSelectOption = ListOption<MultiSelectItem>;
-export type SelectInputProps = {
+type BaseSelectInputProps = {
     /** The option Items to be displayed in the menu */
     children?: ReactNode;
     /** The options to be displayed in the menu */
     options?: ListOption<SelectItem>[];
-    /** The controlled value of the input */
-    value?: Key;
-    /** The uncontrolled initial value of the input */
-    defaultValue?: Key;
     /** Allow the selected option to be re-selected */
     allowRepeatSelection?: boolean;
     /** Hides the caret icon toggle */
@@ -66,10 +62,24 @@ export type SelectInputProps = {
     before?: ReactNode;
     /** The element to display after the menu options */
     after?: ReactNode;
-    /** The function to be called when an option is selected */
-    onChange?: (key: string) => void;
     maxHeight?: PopoverProps['maxHeight'];
 } & Omit<InputProps, 'iconRight'> & ShowHideCallbacks & Pick<PopoverProps, 'maxHeight'>;
+export type SelectInputProps = BaseSelectInputProps & {
+    /** The controlled value of the input */
+    value?: Key | Key[];
+    /** The uncontrolled initial value of the input */
+    defaultValue?: Key | Key[];
+    /** The function to be called when an option is selected */
+    onChange?: (key: string | string[]) => void;
+};
+export type ComboBoxInputProps = BaseSelectInputProps & {
+    /** The controlled value of the input */
+    value?: Key;
+    /** The uncontrolled initial value of the input */
+    defaultValue?: Key;
+    /** The function to be called when an option is selected */
+    onChange?: (key: string) => void;
+};
 export type CalendarBaseProps = {
     /** Prevents selection of dates in the past (relative to the set date or current date). */
     preventPast?: boolean | Date;
@@ -82,3 +92,4 @@ export type DateInputProps = {
     /** Hides the calendar picker icon */
     hidePicker?: boolean;
 } & ShowHideCallbacks & Omit<CalendarBaseProps, 'noShadow'> & Omit<InputProps, 'placeholder'>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.4.7",
+	"version": "2.4.8-alpha.2",
 	"type": "module",
 	"exports": {
 		".": {