@wavv/ui 2.4.8-alpha.1 → 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/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.8-alpha.1",
+	"version": "2.4.8-alpha.2",
 	"type": "module",
 	"exports": {
 		".": {