@wavv/ui 2.4.6-alpha.1 → 2.4.6-alpha.2

package/build/components/ComboBox.d.ts

@@ -1,20 +1,25 @@
+import { type ReactNode } from 'react';
 import type { ComboBoxProps } from './typeDefs/reactAriaTypes';
 import type { OpenStateProps, SelectInputProps } from './typeDefs/selectionTypes';
 type Props = {
     /** Use when loading options asynchronously with onTextChange */
     loadingResults?: boolean;
+    /** The element/string to display when the table is empty */
+    emptyFallback?: ReactNode;
     /** The function to be called when the search input is updated */
     onTextChange?: (text: string) => void;
     /** The function to be called when the input text does not match any options */
     onCreate?: (text: string) => void;
+    /** Customize the create option label. Receives raw inputText and returns the label to display. */
+    formatCreateOption?: (inputText: string) => string;
     ref?: React.Ref<HTMLInputElement>;
 } & SelectInputProps & 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, position, fixedPosition, open, onOpenChange, before, after, onChange, onCreate, 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, 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;
     Section: ({ id, title, children }: {
         id?: string;
         title?: string;
-        children: import("react").ReactNode;
+        children: ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;

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, position, fixedPosition, open, onOpenChange, before, after, onChange, onCreate, 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, onChange, onCreate, formatCreateOption, afterShow, afterHide, onTextChange, ref, ...props })=>{
     const [isOpen, handleOpenChange] = useControlledOpenState({
         open,
         onOpenChange,
@@ -46,11 +46,13 @@ const ComboBox_ComboBox = ({ backgroundColor, menuBackground, children, fontSize
         marginRight,
         marginLeft
     };
+    const flatOptions = flattenListOptions(options || []);
     const handleSelect = (val)=>{
         if (!val || !allowRepeatSelection && val === currentValue) return;
         if (!isControlled) {
+            const option = flatOptions.find((o)=>o.id === val || o.value === val);
             setInternalValue(val);
-            setInputText(val.toString());
+            setInputText(option?.value ?? val.toString());
         }
         if (onChange) onChange(val);
     };
@@ -60,8 +62,7 @@ const ComboBox_ComboBox = ({ backgroundColor, menuBackground, children, fontSize
     };
     const hasValue = !!(currentValue || defaultValue || inputText);
     const hidePlaceholder = !!(!hasValue && label);
-    const flatOptions = flattenListOptions(options || []);
-    const showCreateOption = inputText.length > 0 && onCreate && !flatOptions.some((option)=>option.value === inputText);
+    const showCreateOption = inputText.length > 0 && onCreate && !flatOptions.some((option)=>option.value === inputText || option.id === inputText);
     const handleCreateOption = ()=>{
         if (!onCreate) return;
         pendingSelectionRef.current = inputText;
@@ -79,7 +80,11 @@ const ComboBox_ComboBox = ({ backgroundColor, menuBackground, children, fontSize
     }, [
         options
     ]);
+    const emptyContent = 'string' == typeof emptyFallback ? /*#__PURE__*/ jsx(EmptyState, {
+        children: emptyFallback
+    }) : emptyFallback;
     return /*#__PURE__*/ jsxs(ComboRoot, {
+        inputValue: inputText,
         onOpenChange: handleOpenChange,
         menuTrigger: "focus",
         onInputChange: handleInputChange,
@@ -93,7 +98,7 @@ const ComboBox_ComboBox = ({ backgroundColor, menuBackground, children, fontSize
         defaultSelectedKey: defaultValue,
         textOnly: textOnly,
         width: width,
-        allowsEmptyCollection: allowsEmptyCollection || !!onCreate,
+        allowsEmptyCollection: allowsEmptyCollection || !!onCreate || !!emptyFallback,
         ...props,
         children: [
             /*#__PURE__*/ jsxs(ComboContainer, {
@@ -162,9 +167,11 @@ const ComboBox_ComboBox = ({ backgroundColor, menuBackground, children, fontSize
                         before: before,
                         after: after,
                         menuBackground: menuBackground,
+                        renderEmptyState: emptyContent ? ()=>emptyContent : void 0,
                         createOptionItem: showCreateOption && /*#__PURE__*/ jsx(CreateItem, {
                             onAction: handleCreateOption,
-                            children: `Create "${inputText}"`
+                            textValue: inputText,
+                            children: formatCreateOption ? formatCreateOption(inputText) : `Create "${inputText}"`
                         }),
                         children: children
                     })
@@ -184,6 +191,11 @@ const CaretButton = styled(AriaButton)(({ theme, disabled, readOnly })=>({
         cursor: readOnly ? 'default' : void 0
     }));
 const CreateItem = styled(ListBoxItem, preventProps)(ListItemStyles);
+const EmptyState = styled.div(({ theme })=>({
+        color: theme.scale6,
+        fontSize: theme.font.size.md,
+        paddingLeft: 16
+    }));
 const components_ComboBox = Object.assign(ComboBox_ComboBox, {
     Item,
     Section

package/package.json

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