@wavv/ui 2.2.2-alpha.5 → 2.2.2-alpha.6

package/build/components/Dropdown.js

@@ -0,0 +1,130 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useRef, useState } from "react";
+import { DialogTrigger, GridList } from "react-aria-components";
+import { useControlledOpenState } from "../hooks/index.js";
+import flattenListOptions from "../utils/flattenListOptions.js";
+import AriaButton from "./Inputs/helpers/AriaButton.js";
+import TextInput from "./Inputs/TextInput.js";
+import GridListItem from "./ListBoxParts/GridListItem.js";
+import GridListSection from "./ListHelpers/GridListSection.js";
+import ListStyles from "./ListHelpers/ListStyles.js";
+import MotionPopover from "./MotionPopover.js";
+const Dropdown_Dropdown = ({ children, before, after, open, label, placeholder = 'Select', options = [], width, height, value, defaultValue, loading, hideCaret, color, disabled, readOnly, placeholderColor, fontSize, fontWeight, description, errorMessage, position, backgroundColor, menuBackground, iconLeft, leftElement, rightElement, onChange, onOpenChange, afterShow, afterHide, ...props })=>{
+    const [isOpen, handleOpenChange] = useControlledOpenState({
+        open,
+        onOpenChange,
+        afterShow,
+        afterHide
+    });
+    const [internalValue, setInternalValue] = useState(defaultValue || '');
+    const triggerRef = useRef(null);
+    const isControlled = void 0 !== value;
+    const currentValue = isControlled ? value : internalValue;
+    const selectedOption = flattenListOptions(options).find((opt)=>opt.id === currentValue);
+    const handleSelectionChange = (keys)=>{
+        const key = keys instanceof Set ? Array.from(keys)[0] : keys;
+        if (key) {
+            if (!isControlled) setInternalValue(key);
+            if (onChange) onChange(key);
+        }
+        handleOpenChange(false);
+    };
+    return /*#__PURE__*/ jsxs(DialogTrigger, {
+        isOpen: isOpen,
+        onOpenChange: handleOpenChange,
+        children: [
+            /*#__PURE__*/ jsx(InputWrapper, {
+                ...props,
+                ref: triggerRef,
+                width: width ?? '100%',
+                isDisabled: disabled || readOnly || loading,
+                backgroundColor: backgroundColor,
+                children: /*#__PURE__*/ jsx(TextInput, {
+                    value: selectedOption?.value || currentValue,
+                    disabled: disabled,
+                    readOnly: readOnly || loading,
+                    placeholder: placeholder,
+                    placeholderColor: placeholderColor,
+                    loading: loading,
+                    label: label,
+                    description: description,
+                    errorMessage: errorMessage,
+                    fontSize: fontSize,
+                    fontWeight: fontWeight,
+                    backgroundColor: backgroundColor,
+                    color: color,
+                    iconLeft: iconLeft,
+                    leftElement: leftElement,
+                    rightElement: rightElement,
+                    iconRight: hideCaret ? void 0 : isOpen ? 'caret-up' : 'caret-down',
+                    paddingLeft: iconLeft ? 8 : void 0,
+                    paddingRight: 8,
+                    height: height,
+                    asTrigger: true
+                })
+            }),
+            /*#__PURE__*/ jsx(MotionPopover, {
+                triggerRef: triggerRef,
+                offset: 2,
+                placement: position,
+                children: ({ isEntering, isExiting })=>/*#__PURE__*/ jsxs(MenuContainer, {
+                        width: width || triggerRef?.current?.offsetWidth,
+                        readOnly: isEntering || isExiting,
+                        background: menuBackground,
+                        children: [
+                            before,
+                            /*#__PURE__*/ jsxs(GridList, {
+                                "aria-label": label || 'Dropdown',
+                                selectionMode: "single",
+                                selectedKeys: currentValue ? [
+                                    currentValue
+                                ] : [],
+                                onSelectionChange: handleSelectionChange,
+                                style: {
+                                    outline: 'none'
+                                },
+                                autoFocus: true,
+                                shouldSelectOnPressUp: true,
+                                children: [
+                                    options.map((option)=>{
+                                        if ('options' in option) {
+                                            const section = option;
+                                            return /*#__PURE__*/ jsx(GridListSection, {
+                                                id: section.id,
+                                                title: section.title,
+                                                children: section.options.map((item)=>/*#__PURE__*/ jsx(GridListItem, {
+                                                        ...item
+                                                    }, item.id || item.value))
+                                            }, section.id);
+                                        }
+                                        const item = option;
+                                        return /*#__PURE__*/ jsx(GridListItem, {
+                                            ...item
+                                        }, item.id || item.value);
+                                    }),
+                                    children
+                                ]
+                            }),
+                            after
+                        ]
+                    })
+            })
+        ]
+    });
+};
+const InputWrapper = styled(AriaButton)(({ theme: { input }, isDisabled, backgroundColor })=>({
+        cursor: isDisabled ? 'default' : void 0,
+        '&:hover > div': {
+            backgroundColor: isDisabled || backgroundColor ? void 0 : input.background.hover,
+            '& > label': {
+                color: isDisabled ? void 0 : input.labelColor.hover
+            }
+        }
+    }));
+const MenuContainer = styled.div(ListStyles);
+const Item = GridListItem;
+const Dropdown = Object.assign(Dropdown_Dropdown, {
+    Item
+});
+export { Dropdown as default };

package/build/components/DropdownMenu.js

@@ -0,0 +1,131 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useEffect, useRef, useState } from "react";
+import { MenuTrigger, Separator, SubmenuTrigger } from "react-aria-components";
+import { useControlledOpenState } from "../hooks/index.js";
+import Menu from "./DropdownMenuParts/Menu.js";
+import MenuItem from "./DropdownMenuParts/MenuItem.js";
+import MenuOptions from "./DropdownMenuParts/MenuOptions.js";
+import MenuSection from "./DropdownMenuParts/MenuSection.js";
+import Icon from "./Icon/index.js";
+import AriaButton from "./Inputs/helpers/AriaButton.js";
+import MotionPopover from "./MotionPopover.js";
+const DropdownMenu = ({ children, position = 'bottom', fixedPosition, trigger, isTriggerButton, triggerProps, triggerOnContextMenu, menuBackground, options, offset = 4, selectionMode, selectedKeys, before, after, open, afterShow, afterHide, onSelectionChange, onOpenChange, ...props })=>{
+    const [selected, setSelected] = useState(new Set());
+    const [controlledKeys, setControlledKeys] = useState();
+    const [isOpen, handleOpenChange] = useControlledOpenState({
+        open,
+        onOpenChange,
+        afterShow,
+        afterHide
+    });
+    const contextMenuTriggerRef = useRef(null);
+    useEffect(()=>{
+        if (selectedKeys) {
+            if ('single' === selectionMode) setControlledKeys(new Set([
+                selectedKeys
+            ]));
+            else if ('multiple' === selectionMode) setControlledKeys('string' == typeof selectedKeys ? selectedKeys : new Set(selectedKeys));
+        }
+    }, [
+        selectedKeys
+    ]);
+    useEffect(()=>()=>{
+            handleOpenChange(false);
+        }, []);
+    const handleContextMenu = (event)=>{
+        if (triggerOnContextMenu) {
+            event.preventDefault();
+            handleOpenChange(true);
+        }
+    };
+    const triggerEl = isTriggerButton ? trigger : /*#__PURE__*/ jsx(AriaButton, {
+        "aria-label": "Menu",
+        ...triggerProps,
+        children: trigger
+    });
+    const wrappedTrigger = triggerOnContextMenu ? /*#__PURE__*/ jsx(TriggerWrapper, {
+        onContextMenu: handleContextMenu,
+        ref: contextMenuTriggerRef,
+        children: trigger
+    }) : triggerEl;
+    const handleSelection = (selection)=>{
+        setSelected(selection);
+        const values = Array.from(selection);
+        if (onSelectionChange) 'single' === selectionMode ? onSelectionChange(values[0]) : onSelectionChange('all' === selection ? selection : values);
+    };
+    return /*#__PURE__*/ jsxs(MenuTrigger, {
+        onOpenChange: handleOpenChange,
+        isOpen: isOpen,
+        children: [
+            wrappedTrigger,
+            /*#__PURE__*/ jsx(MotionPopover, {
+                placement: position,
+                offset: offset,
+                shouldFlip: fixedPosition ? false : void 0,
+                triggerRef: triggerOnContextMenu ? contextMenuTriggerRef : void 0,
+                children: ({ isEntering, isExiting })=>/*#__PURE__*/ jsx(MenuOptions, {
+                        options: options,
+                        autoWidth: true,
+                        selectionMode: selectionMode,
+                        selectedKeys: controlledKeys || selected,
+                        onSelectionChange: handleSelection,
+                        readOnly: isEntering || isExiting,
+                        before: before,
+                        after: after,
+                        menuBackground: menuBackground,
+                        ...props,
+                        children: children
+                    })
+            })
+        ]
+    });
+};
+const SubMenu = ({ children, label, disabled })=>/*#__PURE__*/ jsxs(SubmenuTrigger, {
+        children: [
+            /*#__PURE__*/ jsx(MenuItem, {
+                value: label,
+                disabled: disabled,
+                rightElement: /*#__PURE__*/ jsx(ChevronContainer, {
+                    children: /*#__PURE__*/ jsx(Chevron, {
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            name: "chevron-right",
+                            size: "small"
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(MotionPopover, {
+                offset: 2,
+                children: ({ isEntering, isExiting })=>/*#__PURE__*/ jsx(Menu, {
+                        autoWidth: true,
+                        readOnly: isEntering || isExiting,
+                        children: children
+                    })
+            })
+        ]
+    });
+SubMenu.displayName = 'DropdownMenu.Sub';
+const DropdownMenu_Separator = styled(Separator)(({ theme })=>({
+        height: 1,
+        backgroundColor: theme.scale2,
+        margin: '4px 8px'
+    }));
+const ChevronContainer = styled.div({
+    marginLeft: 'auto',
+    width: 16,
+    height: 16
+});
+const Chevron = styled.div({
+    position: 'absolute',
+    right: 8
+});
+const TriggerWrapper = styled.div({
+    display: 'inline-block'
+});
+DropdownMenu.Item = MenuItem;
+DropdownMenu.Sub = SubMenu;
+DropdownMenu.Section = MenuSection;
+DropdownMenu.Separator = DropdownMenu_Separator;
+const components_DropdownMenu = DropdownMenu;
+export { components_DropdownMenu as default };

package/build/components/DropdownMenuParts/Menu.js

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+import { Menu } from "react-aria-components";
+import ListStyles, { preventProps } from "../ListHelpers/ListStyles.js";
+const Menu_Menu = styled(Menu, preventProps)(ListStyles);
+const DropdownMenuParts_Menu = Menu_Menu;
+export { DropdownMenuParts_Menu as default };

package/build/components/DropdownMenuParts/MenuItem.js

@@ -0,0 +1,54 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { MenuItem } from "react-aria-components";
+import Checkbox from "../Checkbox.js";
+import Icon from "../Icon/index.js";
+import ItemHeaderBody from "../ListHelpers/ItemHeaderBody.js";
+import ListItemStyles, { preventProps } from "../ListHelpers/ListItemStyles.js";
+const MenuItem_MenuItem = ({ id, value, children, header, body, leftElement, rightElement, inline, disabled, checkbox, onClick, ...props })=>{
+    const content = children || value;
+    const headerText = header || value;
+    return /*#__PURE__*/ jsx(Item, {
+        id: id || value,
+        textValue: value,
+        onAction: onClick,
+        isDisabled: disabled,
+        ...props,
+        children: ({ selectionMode, isSelected })=>{
+            const showCheck = 'multiple' === selectionMode || 'single' === selectionMode;
+            const check = checkbox ? /*#__PURE__*/ jsx(Checkbox, {
+                checked: isSelected,
+                readOnly: true,
+                marginRight: 4
+            }) : /*#__PURE__*/ jsx(Icon, {
+                name: "check",
+                color: isSelected ? void 0 : 'transparent',
+                size: "small",
+                marginLeft: -12,
+                marginRight: 4
+            });
+            return /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    showCheck ? check : null,
+                    leftElement || null,
+                    headerText && body ? /*#__PURE__*/ jsx(ItemHeaderBody, {
+                        header: headerText,
+                        body: body,
+                        inline: inline,
+                        disabled: disabled
+                    }) : content,
+                    rightElement && /*#__PURE__*/ jsx("div", {
+                        style: {
+                            marginLeft: 'auto'
+                        },
+                        children: rightElement
+                    })
+                ]
+            });
+        }
+    });
+};
+const Item = styled(MenuItem, preventProps)(ListItemStyles);
+MenuItem_MenuItem.displayName = 'DropdownMenu.Item';
+const DropdownMenuParts_MenuItem = MenuItem_MenuItem;
+export { DropdownMenuParts_MenuItem as default };

package/build/components/DropdownMenuParts/MenuOptions.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Menu } from "react-aria-components";
+import ListSection from "../ListHelpers/ListSection.js";
+import ListStyles, { preventProps } from "../ListHelpers/ListStyles.js";
+import MenuItem from "./MenuItem.js";
+const MenuOptions_MenuOptions = ({ options, children, autoWidth, itemProps, width, ref, before, after, menuBackground, ...props })=>/*#__PURE__*/ jsxs(MenuContainer, {
+        autoWidth: autoWidth,
+        width: width,
+        background: menuBackground,
+        children: [
+            before,
+            /*#__PURE__*/ jsxs(Menu, {
+                shouldFocusWrap: true,
+                ref: ref,
+                style: {
+                    outline: 'none'
+                },
+                ...props,
+                children: [
+                    options?.map((option)=>{
+                        if ('options' in option) {
+                            const section = option;
+                            return /*#__PURE__*/ jsx(ListSection, {
+                                id: section.id,
+                                title: section.title,
+                                children: section.options.map((item)=>/*#__PURE__*/ jsx(MenuItem, {
+                                        ...item,
+                                        ...itemProps
+                                    }, item.id || item.value))
+                            }, section.id);
+                        }
+                        const item = option;
+                        return /*#__PURE__*/ jsx(MenuItem, {
+                            ...item,
+                            ...itemProps
+                        }, item.id || item.value);
+                    }),
+                    children
+                ]
+            }),
+            after
+        ]
+    });
+const MenuContainer = styled('div', preventProps)(ListStyles);
+const MenuOptions = MenuOptions_MenuOptions;
+export { MenuOptions as default };

package/build/components/DropdownMenuParts/MenuSection.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MenuSection } from "react-aria-components";
+import ListHeader from "../ListHelpers/ListHeader.js";
+const MenuSection_MenuSection = ({ id, title, children })=>/*#__PURE__*/ jsxs(MenuSection, {
+        id: id,
+        children: [
+            title && /*#__PURE__*/ jsx(ListHeader, {
+                children: title
+            }),
+            children
+        ]
+    });
+const DropdownMenuParts_MenuSection = MenuSection_MenuSection;
+export { DropdownMenuParts_MenuSection as default };

package/build/components/DropdownSelect.js

@@ -0,0 +1,171 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useRef, useState } from "react";
+import { MenuTrigger } from "react-aria-components";
+import flattenListOptions from "../utils/flattenListOptions.js";
+import Checkbox from "./Checkbox.js";
+import MenuOptions from "./DropdownMenuParts/MenuOptions.js";
+import Icon from "./Icon/index.js";
+import AriaButton from "./Inputs/helpers/AriaButton.js";
+import InputContainerStyles from "./Inputs/helpers/InputContainerStyles.js";
+import SearchInput from "./Inputs/SearchInput.js";
+import ListStyles from "./ListHelpers/ListStyles.js";
+import MotionPopover from "./MotionPopover.js";
+const filterOptions = (options, searchTerm)=>{
+    const includes = (val)=>{
+        if (!val) return false;
+        const text = searchTerm.toLowerCase();
+        const property = val.toString().toLowerCase();
+        return property.includes(text);
+    };
+    return options.reduce((acc, item)=>{
+        if ('options' in item) {
+            const filteredOptions = filterOptions(item.options, searchTerm);
+            if (filteredOptions.length > 0) acc.push({
+                ...item,
+                options: filteredOptions
+            });
+        } else {
+            let match = includes(item.value);
+            if (!match && 'id' in item) match = includes(item.id);
+            if (!match && 'body' in item) match = includes(item.body);
+            if (!match && 'header' in item) match = includes(item.header);
+            if (match) acc.push(item);
+        }
+        return acc;
+    }, []);
+};
+const DropdownSelect_DropdownSelect = ({ label, options, width, search, onChange, ...props })=>{
+    const [selected, setSelected] = useState(new Set());
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchVal, setSearchVal] = useState('');
+    const [allSelected, setAllSelected] = useState(false);
+    const [partial, setPartial] = useState(false);
+    const [count, setCount] = useState(0);
+    const [focus, setFocus] = useState('menu');
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    const flatOptions = flattenListOptions(options);
+    const filtered = filterOptions(options, searchVal);
+    const reset = ()=>{
+        setSearchVal('');
+        setFocus('menu');
+    };
+    const handleOpenChange = (open)=>{
+        setIsOpen(open);
+        if (!open) reset();
+    };
+    const handleSelectionChange = (newSelection)=>{
+        setSelected(newSelection);
+        const total = flatOptions.length;
+        const all = 'all' === newSelection || newSelection.size === total;
+        const some = !all && newSelection.size > 0;
+        setAllSelected(all);
+        setPartial(some);
+        setCount(all ? total : newSelection.size);
+        const items = all ? flatOptions : flatOptions.filter((option)=>newSelection.has(option.id));
+        if (onChange) onChange(items);
+    };
+    return /*#__PURE__*/ jsxs(Container, {
+        width: width,
+        ref: triggerRef,
+        tabIndex: -1,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsxs(Side, {
+                children: [
+                    /*#__PURE__*/ jsx(Checkbox, {
+                        partial: partial,
+                        checked: allSelected,
+                        onChange: ()=>handleSelectionChange(allSelected ? new Set() : 'all')
+                    }),
+                    /*#__PURE__*/ jsx(Label, {
+                        children: label
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Side, {
+                gap: 8,
+                children: [
+                    (partial || allSelected) && /*#__PURE__*/ jsx(Count, {
+                        children: partial ? count : 'All'
+                    }),
+                    /*#__PURE__*/ jsxs(MenuTrigger, {
+                        onOpenChange: handleOpenChange,
+                        children: [
+                            /*#__PURE__*/ jsx(AriaButton, {
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    name: isOpen ? 'caret-up' : 'caret-down'
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(MotionPopover, {
+                                triggerRef: triggerRef,
+                                offset: 2,
+                                children: ({ isEntering, isExiting })=>/*#__PURE__*/ jsxs(MenuContainer, {
+                                        width: width || triggerRef?.current?.offsetWidth,
+                                        readOnly: isEntering || isExiting,
+                                        children: [
+                                            search && /*#__PURE__*/ jsx(SearchInput, {
+                                                value: searchVal,
+                                                onChange: setSearchVal,
+                                                placeholder: "Search",
+                                                padding: "2px 4px",
+                                                margin: 8,
+                                                minHeight: "unset",
+                                                height: "auto",
+                                                width: "auto",
+                                                onFocus: ()=>setFocus('input'),
+                                                onKeyDown: (event)=>{
+                                                    if ('ArrowDown' === event.key || 'ArrowUp' === event.key) menuRef.current?.focus();
+                                                }
+                                            }),
+                                            searchVal && 0 === filtered.length && /*#__PURE__*/ jsx(Empty, {
+                                                children: "No results found"
+                                            }),
+                                            /*#__PURE__*/ jsx(MenuOptions, {
+                                                options: filtered,
+                                                selectionMode: "multiple",
+                                                width: "100%",
+                                                selectedKeys: selected,
+                                                onSelectionChange: handleSelectionChange,
+                                                autoFocus: 'menu' === focus,
+                                                ref: menuRef,
+                                                itemProps: {
+                                                    checkbox: true
+                                                },
+                                                readOnly: isEntering || isExiting
+                                            })
+                                        ]
+                                    })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const Container = styled.div(InputContainerStyles, {
+    gap: 16
+});
+const MenuContainer = styled.div(ListStyles);
+const Label = styled.span(({ theme: { font, scale10 } })=>({
+        fontSize: font.size.md,
+        color: scale10
+    }));
+const Side = styled.div(({ gap })=>({
+        display: 'flex',
+        alignItems: 'center',
+        gap: gap || 4
+    }));
+const Count = styled.div(({ theme })=>({
+        color: theme.scale10
+    }));
+const Empty = styled.div(({ theme })=>({
+        textAlign: 'center',
+        color: theme.scale8,
+        paddingTop: 4,
+        paddingBottom: 8
+    }));
+const DropdownSelect = DropdownSelect_DropdownSelect;
+export { Label, DropdownSelect as default };

package/build/components/DynamicIcon.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { DynamicIcon } from "lucide-react/dynamic";
+import isPropAllowed from "./helpers/isPropAllowed.js";
+import { marginProps } from "./helpers/styledProps.js";
+const DynamicIcon_DynamicIcon = ({ size, onClick, ...props })=>{
+    const handleKeyDown = (event)=>{
+        if ('Enter' === event.key || ' ' === event.key) {
+            event.preventDefault();
+            onClick?.();
+        }
+    };
+    return /*#__PURE__*/ jsx(Icon, {
+        ...props,
+        size: size,
+        strokeWidth: 1.5,
+        onClick: onClick,
+        onKeyDown: onClick ? handleKeyDown : void 0
+    });
+};
+const Icon = styled(DynamicIcon, {
+    shouldForwardProp: (prop)=>isPropAllowed(prop, [
+            'pointer',
+            'hoverColor',
+            'margin',
+            'marginLeft',
+            'marginRight',
+            'marginTop',
+            'marginBottom'
+        ])
+})(({ theme, hoverColor, pointer, animation, size })=>({
+        display: 'flex',
+        width: size,
+        height: size,
+        minWidth: size,
+        minHeight: size,
+        cursor: pointer ? 'pointer' : 'inherit',
+        animation,
+        outline: 'none',
+        '&:hover': {
+            stroke: hoverColor
+        },
+        '&:focus-visible': {
+            outline: `${theme.accent} solid 1px`,
+            outlineOffset: -1
+        }
+    }), marginProps);
+const components_DynamicIcon = DynamicIcon_DynamicIcon;
+export { components_DynamicIcon as default };