@wavv/ui 2.4.12 → 2.4.14

package/build/components/DraftEditor.js

@@ -84,7 +84,7 @@ const DraftEditor = ({ value, onChange, onEnterKey, onFocus, onBlur, mergeFields
         height: height,
         editorMaxHeight: editorMaxHeight,
         noPadding: noPadding || textOnly,
-        readOnly: readOnly,
+        readOnly: readOnly || disabled,
         color: color,
         overflow: overflow,
         clampLines: clampLines,
@@ -106,7 +106,7 @@ const DraftEditor = ({ value, onChange, onEnterKey, onFocus, onBlur, mergeFields
         className: className,
         children: [
             /*#__PURE__*/ jsxs(InputWrapper, {
-                readOnly: readOnly,
+                readOnly: readOnly || disabled,
                 children: [
                     label && /*#__PURE__*/ jsx(Label, {
                         filled: isInputFilled(value),
@@ -119,7 +119,7 @@ const DraftEditor = ({ value, onChange, onEnterKey, onFocus, onBlur, mergeFields
                         editorState: editorState,
                         onChange: handleChange,
                         placeholder: placeholder,
-                        readOnly: readOnly,
+                        readOnly: readOnly || disabled,
                         handleReturn: handleEditorReturn,
                         handlePastedText: handlePaste,
                         onFocus: handleFocus,
@@ -143,10 +143,10 @@ const EditorContainer = styled(InputContainer)(({ theme, height, noPadding, disa
         color: disabled ? theme.input.color.disabled : color || theme.input.color.default,
         cursor: readOnly ? 'inherit' : 'text',
         '&:hover': {
-            backgroundColor: readOnly ? theme.input.background.default : void 0,
-            borderBottom: readOnly ? `1px solid ${theme.input.borderColor.default}` : void 0,
+            backgroundColor: readOnly && !disabled ? theme.input.background.default : void 0,
+            borderBottom: readOnly && !disabled ? `1px solid ${theme.input.borderColor.default}` : void 0,
             Label: {
-                color: readOnly ? theme.input.labelColor.filled : void 0
+                color: readOnly && !disabled ? theme.input.labelColor.filled : void 0
             }
         }
     }), ({ theme, height, hasLabel, editorMaxHeight, overflow, clampLines, hideEditor, fontSize, noPadding, filled })=>({

package/build/components/Icon/icons.d.ts

@@ -18,7 +18,7 @@ declare const icons: {
     readonly bug: ComponentType<WrappedIconProps>;
     readonly bulb: ComponentType<WrappedIconProps>;
     readonly calendar: ComponentType<WrappedIconProps>;
-    readonly callboards: ComponentType<WrappedIconProps>;
+    readonly callboard: ComponentType<WrappedIconProps>;
     readonly camera: ComponentType<WrappedIconProps>;
     readonly card: ComponentType<WrappedIconProps>;
     readonly cart: ComponentType<WrappedIconProps>;
@@ -39,11 +39,13 @@ declare const icons: {
     readonly 'copy-plus': ComponentType<WrappedIconProps>;
     readonly cycle: ComponentType<WrappedIconProps>;
     readonly dash: ComponentType<WrappedIconProps>;
+    readonly delete: ComponentType<WrappedIconProps>;
     readonly devices: ComponentType<WrappedIconProps>;
     readonly 'double-arrow-left': ComponentType<WrappedIconProps>;
     readonly 'double-arrow-right': ComponentType<WrappedIconProps>;
     readonly download: ComponentType<WrappedIconProps>;
     readonly drag: ComponentType<WrappedIconProps>;
+    readonly duplicate: ComponentType<WrappedIconProps>;
     readonly edit: ComponentType<WrappedIconProps>;
     readonly 'emoji-happy': ComponentType<WrappedIconProps>;
     readonly 'emoji-neutral': ComponentType<WrappedIconProps>;
@@ -153,7 +155,7 @@ declare const icons: {
     readonly 'vol-on': ComponentType<WrappedIconProps>;
     readonly warning: ComponentType<WrappedIconProps>;
     readonly 'warning-circle': ComponentType<WrappedIconProps>;
-    readonly workflow: ComponentType<WrappedIconProps>;
+    readonly automation: ComponentType<WrappedIconProps>;
     readonly youtube: ComponentType<WrappedIconProps>;
 };
 export type IconNames = keyof typeof icons;

package/build/components/Icon/icons.js

@@ -1,4 +1,4 @@
-import { ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowRight, ArrowRightLeft, ArrowUp, ArrowUpWideNarrow, BadgeCheck, Ban, Bell, BellDot, Bold, Bot, Braces, Bug, CalendarDays, Camera, ChartColumn, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, Circle, CircleAlert, CircleCheck, CirclePause, CirclePlay, CirclePlus, CircleQuestionMark, CircleStop, CircleUserRound, CircleX, Clapperboard, Clock, Copy, CopyCheck, CopyPlus, CreditCard, Download, Ear, EllipsisVertical, ExternalLink, Eye, EyeOff, Facebook, FileText, Flag, FlaskConical, Frown, Funnel, Globe, GripVertical, Hash, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Headset, Heart, Highlighter, Hourglass, House, IdCard, Info, Instagram, Italic, Kanban, Layers2, LayoutDashboard, Lightbulb, Link, Linkedin, List, ListChecks, ListFilter, ListOrdered, ListTodo, Loader, LockKeyhole, LockKeyholeOpen, LogIn, LogOut, MapPin, MapPinned, Maximize2, Meh, Menu, Merge, MessageSquareMore, Mic, MicOff, Minimize2, Minus, MonitorSmartphone, NotebookPen, Paperclip, Pause, Pencil, Percent, Pilcrow, Pin, PinOff, Play, Plus, Redo, RefreshCcwDot, RefreshCw, Rocket, RotateCw, Search, Send, Settings, Share, Share2, Shield, ShieldCheck, ShieldOff, ShieldPlus, ShoppingCart, Smartphone, Smile, Sparkles, Square, SquareKanban, SquarePen, SquareStack, Star, Strikethrough, Tag, TextQuote, Trash2, TriangleAlert, Trophy, Underline, Undo, Upload, UserRound, UserRoundCheck, UserRoundPlus, UserRoundX, Users, Video, Voicemail, Volume2, Workflow, X, Youtube } from "lucide-react";
+import { ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowRight, ArrowRightLeft, ArrowUp, ArrowUpWideNarrow, BadgeCheck, Ban, Bell, BellDot, Bold, Bot, Braces, Bug, CalendarDays, Camera, ChartColumn, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, Circle, CircleAlert, CircleCheck, CirclePause, CirclePlay, CirclePlus, CircleQuestionMark, CircleStop, CircleUserRound, CircleX, Clapperboard, Clock, Copy, CopyCheck, CopyPlus, CreditCard, Delete, Download, Ear, EllipsisVertical, ExternalLink, Eye, EyeOff, Facebook, FileText, Flag, FlaskConical, Frown, Funnel, Globe, GripVertical, Hash, Heading, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Headset, Heart, Highlighter, Hourglass, House, IdCard, Info, Instagram, Italic, Kanban, Layers2, LayoutDashboard, Lightbulb, Link, Linkedin, List, ListChecks, ListFilter, ListOrdered, ListTodo, Loader, LockKeyhole, LockKeyholeOpen, LogIn, LogOut, MapPin, MapPinned, Maximize2, Meh, Menu, Merge, MessageSquareMore, Mic, MicOff, Minimize2, Minus, MonitorSmartphone, NotebookPen, Paperclip, Pause, Pencil, Percent, Pilcrow, Pin, PinOff, Play, Plus, Redo, RefreshCcwDot, RefreshCw, Rocket, RotateCw, Search, Send, Settings, Share, Share2, Shield, ShieldCheck, ShieldOff, ShieldPlus, ShoppingCart, Smartphone, Smile, Sparkles, Square, SquareKanban, SquarePen, SquareStack, Star, Strikethrough, Tag, TextQuote, Trash2, TriangleAlert, Trophy, Underline, Undo, Upload, UserRound, UserRoundCheck, UserRoundPlus, UserRoundX, Users, Video, Voicemail, Volume2, Workflow, X, Youtube } from "lucide-react";
 import createWrappedIcon from "./createWrappedIcon.js";
 const icons = {
     'activity-history': createWrappedIcon(IdCard),
@@ -18,7 +18,7 @@ const icons = {
     bug: createWrappedIcon(Bug),
     bulb: createWrappedIcon(Lightbulb),
     calendar: createWrappedIcon(CalendarDays),
-    callboards: createWrappedIcon(SquareKanban),
+    callboard: createWrappedIcon(SquareKanban),
     camera: createWrappedIcon(Camera),
     card: createWrappedIcon(CreditCard),
     cart: createWrappedIcon(ShoppingCart),
@@ -39,11 +39,13 @@ const icons = {
     'copy-plus': createWrappedIcon(CopyPlus),
     cycle: createWrappedIcon(RefreshCw),
     dash: createWrappedIcon(Minus),
+    delete: createWrappedIcon(Delete),
     devices: createWrappedIcon(MonitorSmartphone),
     'double-arrow-left': createWrappedIcon(ChevronsLeft),
     'double-arrow-right': createWrappedIcon(ChevronsRight),
     download: createWrappedIcon(Download),
     drag: createWrappedIcon(GripVertical),
+    duplicate: createWrappedIcon(CopyPlus),
     edit: createWrappedIcon(Pencil),
     'emoji-happy': createWrappedIcon(Smile),
     'emoji-neutral': createWrappedIcon(Meh),
@@ -153,7 +155,7 @@ const icons = {
     'vol-on': createWrappedIcon(Volume2),
     warning: createWrappedIcon(TriangleAlert),
     'warning-circle': createWrappedIcon(CircleAlert),
-    workflow: createWrappedIcon(Workflow),
+    automation: createWrappedIcon(Workflow),
     youtube: createWrappedIcon(Youtube)
 };
 const Icon_icons = icons;

package/build/components/MultiSelect/MultiSelect.js

@@ -11,7 +11,7 @@ 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 [expanded, setExpanded] = useState(autoFocus || false);
     const [error, setError] = useState(false);
-    const { color, font, input: inputColors } = useTheme();
+    const { font, input: inputColors } = useTheme();
     const clickOutsideRef = useOnClickOutside(()=>setExpanded(false), expanded);
     const dropdownTriggerRef = useRef(null);
     const dropdownRef = useRef(null);
@@ -161,7 +161,7 @@ const MultiSelect = ({ options, items, listLabel, listText, itemsTitle, maxItems
                             }),
                             items.length > 0 && /*#__PURE__*/ jsx(Icon, {
                                 name: expanded ? 'chevron-up' : 'chevron-down',
-                                color: color.brand,
+                                color: inputColors.labelColor.default,
                                 pointer: true,
                                 onClick: toggleExpand
                             })

package/build/components/Select.js

@@ -27,11 +27,11 @@ const Select_Select = ({ backgroundColor, menuBackground, children, fontSize, fo
     const [internalValue, setInternalValue] = useState(()=>{
         if (isMultiple) {
             const defaultValueArray = defaultValue;
-            return Array.isArray(defaultValueArray) ? defaultValueArray.map(String) : defaultValueArray ? [
-                String(defaultValueArray)
+            return Array.isArray(defaultValueArray) ? defaultValueArray : defaultValueArray ? [
+                defaultValueArray
             ] : [];
         }
-        return defaultValue ? String(defaultValue) : '';
+        return defaultValue ?? '';
     });
     const isControlled = void 0 !== value;
     const currentValue = isControlled ? value : internalValue;

package/build/components/Tree/Tree.d.ts

@@ -3,6 +3,8 @@ import type { Padding, WidthHeight } from '../types';
 type Props = {
     /** The background color of the tree */
     backgroundColor?: string;
+    /** When true, no background is applied */
+    noBackground?: boolean;
     /** The currently selected keys in the collection */
     selectedKeys?: Set<React.Key>;
     /** Handler that is called when the selection changes */
@@ -22,7 +24,7 @@ type Props = {
     onExpandedChange?: TreeProps<object>['onExpandedChange'];
 } & WidthHeight & Padding & Omit<TreeProps<object>, 'items' | 'selectionMode' | 'selectionBehavior' | 'selectedKeys' | 'onSelectionChange' | 'disallowEmptySelection' | 'dragAndDropHooks' | 'dependencies'>;
 declare const Tree: {
-    ({ backgroundColor, expandedKeys: expandedKeysProp, onExpandedChange, defaultExpandedKeys, selectedKeys, onSelectionChange, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ backgroundColor, noBackground, expandedKeys: expandedKeysProp, onExpandedChange, defaultExpandedKeys, selectedKeys, onSelectionChange, ...props }: Props): import("react/jsx-runtime").JSX.Element;
     Item: ({ children, title, id, iconLeft, iconRight, expandOnSelect, indent, content, disabled, ...props }: {
         title: string;
         children?: import("react").ReactNode;

package/build/components/Tree/Tree.js

@@ -5,7 +5,7 @@ import { Tree } from "react-aria-components";
 import { paddingProps } from "../helpers/styledProps.js";
 import { TreeContext } from "./TreeContext.js";
 import TreeItem from "./TreeItem.js";
-const Tree_Tree = ({ backgroundColor, expandedKeys: expandedKeysProp, onExpandedChange, defaultExpandedKeys, selectedKeys, onSelectionChange, ...props })=>{
+const Tree_Tree = ({ backgroundColor, noBackground, expandedKeys: expandedKeysProp, onExpandedChange, defaultExpandedKeys, selectedKeys, onSelectionChange, ...props })=>{
     const initialExpanded = new Set(defaultExpandedKeys ?? []);
     const [internalExpandedKeys, setInternalExpandedKeys] = useState(initialExpanded);
     const isControlled = void 0 !== expandedKeysProp;
@@ -46,6 +46,7 @@ const Tree_Tree = ({ backgroundColor, expandedKeys: expandedKeysProp, onExpanded
             selectionMode: "single",
             disallowEmptySelection: true,
             backgroundColor: backgroundColor,
+            noBackground: noBackground,
             expandedKeys: expandedKeys,
             onExpandedChange: handleExpandedChange,
             selectedKeys: selectedKeys,
@@ -56,11 +57,11 @@ const Tree_Tree = ({ backgroundColor, expandedKeys: expandedKeysProp, onExpanded
     });
 };
 Tree_Tree.Item = TreeItem;
-const TreeContainer = styled(Tree)(({ theme: { menu }, width, height, backgroundColor })=>({
+const TreeContainer = styled(Tree)(({ theme: { menu }, width, height, backgroundColor, noBackground })=>({
         display: 'flex',
         flexFlow: 'column',
         overflowY: 'auto',
-        backgroundColor: backgroundColor || menu.background,
+        backgroundColor: noBackground ? void 0 : backgroundColor || menu.background,
         padding: '8px 0',
         width: width || '100%',
         height

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

@@ -68,9 +68,9 @@ type SingleSelectInputProps = BaseSelectInputProps & {
     /** The selection mode for the select */
     selectionMode?: 'single';
     /** The controlled value of the input */
-    value?: Key;
+    value?: string;
     /** The uncontrolled initial value of the input */
-    defaultValue?: Key;
+    defaultValue?: string;
     /** The function to be called when an option is selected */
     onChange?: (key: string) => void;
 };
@@ -78,9 +78,9 @@ type MultipleSelectInputProps = BaseSelectInputProps & {
     /** The selection mode for the select */
     selectionMode: 'multiple';
     /** The controlled value of the input */
-    value?: Key | Key[];
+    value?: string | string[];
     /** The uncontrolled initial value of the input */
-    defaultValue?: Key | Key[];
+    defaultValue?: string | string[];
     onChange?: (keys: string | string[]) => void;
 };
 export type SelectInputProps = SingleSelectInputProps | MultipleSelectInputProps;

package/package.json

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