@wavv/ui 2.4.22 → 2.5.1

package/build/components/ComboBox.d.ts

@@ -14,7 +14,7 @@ type Props = {
     formatCreateOption?: (inputText: string) => ReactNode;
     ref?: React.Ref<HTMLInputElement>;
 } & 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) & {
+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, separators, onChange, onCreate, formatCreateOption, afterShow, afterHide, onTextChange, 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?: import("react-aria-components").SelectionMode;
     }) => import("react/jsx-runtime").JSX.Element;

package/build/components/ComboBox.js

@@ -19,7 +19,7 @@ import ListRootStyles, { preventProps } from "./ListHelpers/ListRootStyles.js";
 import ListSection from "./ListHelpers/ListSection.js";
 import MotionPopover from "./MotionPopover.js";
 import Spinner from "./Spinner.js";
-const ComboBox_ComboBox = ({ backgroundColor, menuBackground, children, fontSize, disabled, invalid, required, readOnly, loading, loadingResults, label, options, placeholder = 'Select', 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 })=>{
+const ComboBox_ComboBox = ({ backgroundColor, menuBackground, children, fontSize, disabled, invalid, required, readOnly, loading, loadingResults, label, options, placeholder = 'Select', placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, iconLeft, leftElement, rightElement, allowRepeatSelection, allowsEmptyCollection, emptyFallback, position, fixedPosition, open, onOpenChange, before, after, separators, onChange, onCreate, formatCreateOption, afterShow, afterHide, onTextChange, ref, ...props })=>{
     const [isOpen, handleOpenChange] = useControlledOpenState({
         open,
         onOpenChange,
@@ -167,6 +167,7 @@ const ComboBox_ComboBox = ({ backgroundColor, menuBackground, children, fontSize
                         before: before,
                         after: after,
                         menuBackground: menuBackground,
+                        separators: separators,
                         renderEmptyState: emptyContent ? ()=>emptyContent : void 0,
                         createOptionItem: showCreateOption && /*#__PURE__*/ jsx(CreateItem, {
                             onAction: handleCreateOption,

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

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

package/build/components/ListBoxParts/ListOptions.js

@@ -1,10 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import styled from "@emotion/styled";
-import { ListBox } from "react-aria-components";
+import { Fragment } from "react";
+import { ListBox, Separator } 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, selectionMode, ...props })=>/*#__PURE__*/ jsxs(ListContainer, {
+const ListOptions = ({ options, children, autoWidth, width, before, after, menuBackground, createOptionItem, selectionMode, separators, ...props })=>{
+    const renderItem = (item, isLast)=>/*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(ListBoxItem, {
+                    ...item,
+                    selectionMode: selectionMode
+                }),
+                separators && !isLast && /*#__PURE__*/ jsx(ListOptions_Separator, {})
+            ]
+        }, item.id || item.value);
+    return /*#__PURE__*/ jsxs(ListContainer, {
         autoWidth: autoWidth,
         width: autoWidth ? void 0 : width,
         background: menuBackground,
@@ -19,23 +30,17 @@ const ListOptions = ({ options, children, autoWidth, width, before, after, menuB
                 ...props,
                 children: [
                     createOptionItem,
-                    options?.map((option)=>{
+                    options?.map((option, index)=>{
                         if ('options' in option) {
                             const section = option;
                             return /*#__PURE__*/ jsx(ListSection, {
                                 id: section.id,
                                 title: section.title,
-                                children: section.options.map((item)=>/*#__PURE__*/ jsx(ListBoxItem, {
-                                        ...item,
-                                        selectionMode: selectionMode
-                                    }, item.id || item.value))
+                                children: section.options.map((item, i)=>renderItem(item, i === section.options.length - 1))
                             }, section.id);
                         }
                         const item = option;
-                        return /*#__PURE__*/ jsx(ListBoxItem, {
-                            ...item,
-                            selectionMode: selectionMode
-                        }, item.id || item.value);
+                        return renderItem(item, index === options.length - 1);
                     }),
                     children
                 ]
@@ -43,6 +48,13 @@ const ListOptions = ({ options, children, autoWidth, width, before, after, menuB
             after
         ]
     });
+};
+const ListOptions_Separator = styled(Separator)(({ theme })=>({
+        height: 1,
+        border: 'none',
+        backgroundColor: theme.scale2,
+        margin: '0'
+    }));
 const ListContainer = styled('div', preventProps)(ListStyles);
 const ListBoxParts_ListOptions = ListOptions;
 export { ListBoxParts_ListOptions as default };

package/build/components/MultiSelect/MultiSelect.d.ts

@@ -47,6 +47,6 @@ type MultiSelectProps = {
     maxListHeight?: number;
     /** The maxHeight of the options list */
     maxMenuHeight?: number;
-} & Width & Margin & Padding & ElAttributes & Pick<SelectInputProps, 'invalid'>;
-declare const MultiSelect: ({ options, items, listLabel, listText, itemsTitle, maxItems, placeholder, width, accepts, disabled, hideItemsInfo, compact, backgroundColor, borderless, autoFocus, embedded, invalid, maxListHeight, maxMenuHeight, onToggleAllItems, addItem, removeItem, onTextChange, ref, ...props }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+} & Width & Margin & Padding & ElAttributes & Pick<SelectInputProps, 'invalid' | 'separators'>;
+declare const MultiSelect: ({ options, items, listLabel, listText, itemsTitle, maxItems, placeholder, width, accepts, disabled, hideItemsInfo, compact, backgroundColor, borderless, autoFocus, embedded, invalid, maxListHeight, maxMenuHeight, onToggleAllItems, addItem, removeItem, onTextChange, separators, ref, ...props }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

package/build/components/MultiSelect/MultiSelect.js

@@ -8,7 +8,7 @@ import { marginProps, paddingProps as styledProps_js_paddingProps } from "../hel
 import Icon from "../Icon/index.js";
 import Tag from "../Tag.js";
 import SearchDropdown from "./SearchDropdown.js";
-const MultiSelect = ({ options, items, listLabel, listText, itemsTitle, maxItems, placeholder, width, accepts, disabled, hideItemsInfo, compact, backgroundColor, borderless, autoFocus, embedded, invalid, maxListHeight, maxMenuHeight, onToggleAllItems, addItem, removeItem, onTextChange, ref, ...props })=>{
+const MultiSelect = ({ options, items, listLabel, listText, itemsTitle, maxItems, placeholder, width, accepts, disabled, hideItemsInfo, compact, backgroundColor, borderless, autoFocus, embedded, invalid, maxListHeight, maxMenuHeight, onToggleAllItems, addItem, removeItem, onTextChange, separators, ref, ...props })=>{
     const [expanded, setExpanded] = useState(autoFocus || false);
     const [error, setError] = useState(false);
     const { font, input: inputColors } = useTheme();
@@ -97,6 +97,7 @@ const MultiSelect = ({ options, items, listLabel, listText, itemsTitle, maxItems
                     ref: dropdownRef,
                     accepts: accepts,
                     maxHeight: maxMenuHeight,
+                    separators: separators,
                     onValidChange: (valid)=>setError(!valid)
                 })
             ]

package/build/components/MultiSelect/SearchDropdown.d.ts

@@ -13,5 +13,5 @@ type Props = {
     onValidChange?: (valid: boolean) => void;
     ref?: React.Ref<HTMLInputElement>;
 } & Omit<SelectInputProps, 'options'> & ComboBoxProps;
-declare const SearchDropdown: ({ options, items, triggerRef, placeholder, placeholderColor, fontSize, position, fixedPosition, maxHeight, disabled, accepts, addItem, removeItem, afterShow, afterHide, onTextChange, onValidChange, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const SearchDropdown: ({ options, items, triggerRef, placeholder, placeholderColor, fontSize, position, fixedPosition, maxHeight, disabled, accepts, addItem, removeItem, separators, afterShow, afterHide, onTextChange, onValidChange, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default SearchDropdown;

package/build/components/MultiSelect/SearchDropdown.js

@@ -9,7 +9,7 @@ import isAcceptable from "../Inputs/helpers/isAcceptable.js";
 import useDynamicWidth from "../Inputs/helpers/useDynamicWidth.js";
 import ListOptions from "../ListBoxParts/ListOptions.js";
 import MotionPopover from "../MotionPopover.js";
-const SearchDropdown = ({ options, items, triggerRef, placeholder, placeholderColor, fontSize, position, fixedPosition, maxHeight, disabled, accepts, addItem, removeItem, afterShow, afterHide, onTextChange, onValidChange, ref, ...props })=>{
+const SearchDropdown = ({ options, items, triggerRef, placeholder, placeholderColor, fontSize, position, fixedPosition, maxHeight, disabled, accepts, addItem, removeItem, separators, afterShow, afterHide, onTextChange, onValidChange, ref, ...props })=>{
     const [isOpen, setIsOpen] = useState(false);
     const [filteredOptions, setFilteredOptions] = useState([]);
     const [inputText, setInputText] = useState('');
@@ -120,7 +120,8 @@ const SearchDropdown = ({ options, items, triggerRef, placeholder, placeholderCo
                 children: ({ isEntering, isExiting })=>/*#__PURE__*/ jsx(ListOptions, {
                         options: filteredOptions,
                         width: refObject?.current?.offsetWidth,
-                        readOnly: isEntering || isExiting
+                        readOnly: isEntering || isExiting,
+                        separators: separators
                     })
             })
         ]

package/build/components/Select.d.ts

@@ -4,7 +4,7 @@ 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, selectionMode, ref, ...props }: Props) => 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, separators, 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;

package/build/components/Select.js

@@ -15,7 +15,7 @@ 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, selectionMode, 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, separators, ref, ...props })=>{
     const [isOpen, handleOpenChange] = useControlledOpenState({
         open,
         onOpenChange,
@@ -162,6 +162,7 @@ const Select_Select = ({ backgroundColor, menuBackground, children, fontSize, fo
                         after: after,
                         menuBackground: menuBackground,
                         selectionMode: selectionMode,
+                        separators: separators,
                         children: children
                     })
             })

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

@@ -62,6 +62,8 @@ type BaseSelectInputProps = {
     before?: ReactNode;
     /** The element to display after the menu options */
     after?: ReactNode;
+    /** Renders a divider between each option */
+    separators?: boolean;
     maxHeight?: PopoverProps['maxHeight'];
 } & Omit<InputProps, 'iconRight'> & ShowHideCallbacks & Pick<PopoverProps, 'maxHeight'>;
 type SingleSelectInputProps = BaseSelectInputProps & {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.4.22",
+	"version": "2.5.1",
 	"type": "module",
 	"exports": {
 		".": {