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

package/build/components/ComboBox.js

@@ -0,0 +1,190 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { useEffect, useRef, useState } from "react";
+import { ComboBox, FieldError, ListBoxItem } from "react-aria-components";
+import { useControlledOpenState } from "../hooks/index.js";
+import flattenListOptions from "../utils/flattenListOptions.js";
+import getIcon from "./helpers/getIcon.js";
+import Icon from "./Icon/index.js";
+import AriaButton from "./Inputs/helpers/AriaButton.js";
+import Input from "./Inputs/helpers/Input.js";
+import InputContainerStyles from "./Inputs/helpers/InputContainerStyles.js";
+import InputMessage from "./Inputs/helpers/InputMessage.js";
+import Label from "./Inputs/helpers/Label.js";
+import useDynamicWidth from "./Inputs/helpers/useDynamicWidth.js";
+import ListBoxParts_ListBoxItem from "./ListBoxParts/ListBoxItem.js";
+import ListOptions from "./ListBoxParts/ListOptions.js";
+import ListItemStyles from "./ListHelpers/ListItemStyles.js";
+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 [isOpen, handleOpenChange] = useControlledOpenState({
+        open,
+        onOpenChange,
+        afterShow,
+        afterHide
+    });
+    const [internalValue, setInternalValue] = useState(defaultValue || '');
+    const [inputText, setInputText] = useState((value || defaultValue || '').toString());
+    const pendingSelectionRef = useRef(null);
+    const isControlled = void 0 !== value;
+    const currentValue = isControlled ? value : internalValue;
+    const [inputWidth, HiddenWidthEl] = useDynamicWidth({
+        value: inputText,
+        placeholder,
+        fontSize,
+        active: !!textOnly
+    });
+    const triggerRef = useRef(null);
+    const { margin, marginTop, marginBottom, marginRight, marginLeft } = props;
+    const marginProps = {
+        margin,
+        marginTop,
+        marginBottom,
+        marginRight,
+        marginLeft
+    };
+    const handleSelect = (val)=>{
+        if (!val || !allowRepeatSelection && val === currentValue) return;
+        if (!isControlled) {
+            setInternalValue(val);
+            setInputText(val.toString());
+        }
+        if (onChange) onChange(val);
+    };
+    const handleInputChange = (text)=>{
+        setInputText(text);
+        if (onTextChange) onTextChange(text);
+    };
+    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 handleCreateOption = ()=>{
+        if (!onCreate) return;
+        pendingSelectionRef.current = inputText;
+        onCreate(inputText);
+    };
+    useEffect(()=>{
+        const pending = pendingSelectionRef.current;
+        if (!pending) return;
+        const flat = flattenListOptions(options || []);
+        const newOption = flat.find((option)=>pending === option.id || pending === option.value);
+        if (!newOption) return;
+        const key = newOption.id ?? newOption.value;
+        handleSelect(key);
+        pendingSelectionRef.current = null;
+    }, [
+        options
+    ]);
+    return /*#__PURE__*/ jsxs(ComboRoot, {
+        onOpenChange: handleOpenChange,
+        menuTrigger: "focus",
+        onInputChange: handleInputChange,
+        onSelectionChange: handleSelect,
+        isDisabled: disabled,
+        isReadOnly: readOnly || loading,
+        isInvalid: invalid,
+        isRequired: required,
+        shouldFocusWrap: true,
+        selectedKey: currentValue,
+        defaultSelectedKey: defaultValue,
+        textOnly: textOnly,
+        width: width,
+        allowsEmptyCollection: allowsEmptyCollection || !!onCreate,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsxs(ComboContainer, {
+                ref: triggerRef,
+                hasLabel: !!label,
+                textOnly: textOnly,
+                backgroundColor: backgroundColor,
+                isDisabled: disabled,
+                isReadOnly: readOnly || loading,
+                isInvalid: invalid,
+                iconLeft: !!iconLeft,
+                height: height,
+                ...marginProps,
+                children: [
+                    iconLeft && getIcon(iconLeft, {
+                        marginRight: 8
+                    }),
+                    leftElement,
+                    /*#__PURE__*/ jsxs(Label, {
+                        label: label,
+                        filled: hasValue,
+                        disabled: disabled,
+                        children: [
+                            /*#__PURE__*/ jsx(Input, {
+                                placeholder: placeholder,
+                                hide: hidePlaceholder,
+                                placeholderColor: placeholderColor,
+                                fontSize: fontSize,
+                                isDisabled: disabled,
+                                width: inputWidth,
+                                ref: ref
+                            }),
+                            /*#__PURE__*/ jsx(HiddenWidthEl, {})
+                        ]
+                    }),
+                    rightElement,
+                    loading || loadingResults ? /*#__PURE__*/ jsx(Spinner, {
+                        size: "small"
+                    }) : /*#__PURE__*/ jsx(CaretButton, {
+                        disabled: disabled,
+                        readOnly: readOnly,
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            name: isOpen ? 'caret-up' : 'caret-down'
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(InputMessage, {
+                        description: description,
+                        errorMessage: errorMessage
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(FieldError, {}),
+            /*#__PURE__*/ jsx(MotionPopover, {
+                triggerRef: triggerRef,
+                offset: 2,
+                placement: position,
+                shouldFlip: fixedPosition ? false : void 0,
+                maxHeight: maxHeight,
+                isOpen: isOpen,
+                children: ({ isEntering, isExiting })=>/*#__PURE__*/ jsx(ListOptions, {
+                        options: options,
+                        autoWidth: textOnly,
+                        width: triggerRef?.current?.offsetWidth,
+                        readOnly: isEntering || isExiting,
+                        before: before,
+                        after: after,
+                        menuBackground: menuBackground,
+                        createOptionItem: showCreateOption && /*#__PURE__*/ jsx(CreateItem, {
+                            onAction: handleCreateOption,
+                            children: `Create "${inputText}"`
+                        }),
+                        children: children
+                    })
+            })
+        ]
+    });
+};
+const Item = ListBoxParts_ListBoxItem;
+const Section = ListSection;
+const ComboRoot = styled(ComboBox, preventProps)(ListRootStyles);
+const ComboContainer = styled.div(InputContainerStyles, ({ iconLeft, textOnly })=>({
+        paddingLeft: iconLeft ? 8 : void 0,
+        paddingRight: textOnly ? void 0 : 8
+    }));
+const CaretButton = styled(AriaButton)(({ theme, disabled, readOnly })=>({
+        color: disabled || readOnly ? theme.input.labelColor.disabled : theme.input.labelColor.default,
+        cursor: readOnly ? 'default' : void 0
+    }));
+const CreateItem = styled(ListBoxItem, preventProps)(ListItemStyles);
+const components_ComboBox = Object.assign(ComboBox_ComboBox, {
+    Item,
+    Section
+});
+export { components_ComboBox as default };

package/build/components/CommandMenu/CommandItem.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Command } from "cmdk";
+import ItemHeaderBody from "../ListHelpers/ItemHeaderBody.js";
+import ListItemStyles, { preventProps } from "../ListHelpers/ListItemStyles.js";
+const CommandItem = ({ id, value, header, body, leftElement, rightElement, inline, disabled, onClick, ...props })=>/*#__PURE__*/ jsxs(Item, {
+        id: id || value,
+        disabled: disabled,
+        onSelect: onClick,
+        ...props,
+        children: [
+            leftElement || null,
+            header && body ? /*#__PURE__*/ jsx(ItemHeaderBody, {
+                header: header,
+                body: body,
+                inline: inline
+            }) : value,
+            rightElement && /*#__PURE__*/ jsx("div", {
+                style: {
+                    marginLeft: 'auto'
+                },
+                children: rightElement
+            })
+        ]
+    });
+const Item = styled(Command.Item, preventProps)(({ theme: { optionItem } })=>({
+        '&[data-selected="true"]': {
+            backgroundColor: optionItem.background.active
+        }
+    }), ListItemStyles);
+const CommandMenu_CommandItem = CommandItem;
+export { CommandMenu_CommandItem as default };

package/build/components/CommandMenu/CommandMenu.js

@@ -0,0 +1,136 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { CommandEmpty, CommandInput, CommandList, CommandRoot } from "cmdk";
+import { useRef, useState } from "react";
+import { Dialog, Modal, ModalOverlay, Popover } from "react-aria-components";
+import { maxWidthHeightProps, widthHeightProps } from "../helpers/styledProps.js";
+import Icon from "../Icon/index.js";
+import InputContainerStyles from "../Inputs/helpers/InputContainerStyles.js";
+import InputStyles from "../Inputs/helpers/InputStyles.js";
+import ListStyles from "../ListHelpers/ListStyles.js";
+import CommandOptions from "./CommandOptions.js";
+const CommandMenu_CommandMenu = ({ options, inputProps, modalProps, triggerRef, position, offset, open, onChange, setOpen, ...props })=>{
+    const [search, setSearch] = useState('');
+    const listRef = useRef(null);
+    const scrollId = useRef(null);
+    const { color } = useTheme();
+    const { 'aria-label': ariaLabel, ...rest } = props;
+    const handleOpenChange = (isOpen)=>{
+        setOpen(isOpen);
+        if (!isOpen) setSearch('');
+    };
+    const handleItemSelect = (item)=>{
+        onChange(item);
+        handleOpenChange(false);
+    };
+    const scrollList = ()=>{
+        if (scrollId.current) clearTimeout(scrollId.current);
+        scrollId.current = setTimeout(()=>{
+            if (listRef.current) listRef?.current.scrollTo({
+                top: 0
+            });
+        }, 0);
+    };
+    const handleSearch = (value)=>{
+        setSearch(value);
+        scrollList();
+    };
+    const content = /*#__PURE__*/ jsx(Dialog, {
+        "aria-label": ariaLabel,
+        style: {
+            outline: 'none'
+        },
+        children: /*#__PURE__*/ jsxs(MenuContainer, {
+            ...rest,
+            children: [
+                /*#__PURE__*/ jsxs(InputContainer, {
+                    margin: 8,
+                    width: "auto",
+                    children: [
+                        /*#__PURE__*/ jsx(Icon, {
+                            name: "search",
+                            marginRight: 8
+                        }),
+                        /*#__PURE__*/ jsx(Input, {
+                            placeholder: "Search",
+                            autoFocus: true,
+                            value: search,
+                            onValueChange: handleSearch,
+                            ...inputProps
+                        }),
+                        search && /*#__PURE__*/ jsx(Icon, {
+                            name: "close-circle",
+                            color: color.brand,
+                            onClick: ()=>setSearch(''),
+                            pointer: true
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(List, {
+                    ref: listRef,
+                    children: [
+                        /*#__PURE__*/ jsxs(Empty, {
+                            children: [
+                                "No results found for ",
+                                `"${search}"`,
+                                "."
+                            ]
+                        }),
+                        options && /*#__PURE__*/ jsx(CommandOptions, {
+                            options: options,
+                            onItemSelect: handleItemSelect
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+    return triggerRef ? /*#__PURE__*/ jsx(Popover, {
+        triggerRef: triggerRef,
+        isOpen: open,
+        onOpenChange: handleOpenChange,
+        placement: position,
+        offset: offset,
+        children: content
+    }) : /*#__PURE__*/ jsx(Overlay, {
+        isDismissable: true,
+        isOpen: open,
+        onOpenChange: handleOpenChange,
+        ...modalProps,
+        children: /*#__PURE__*/ jsx(Modal, {
+            children: content
+        })
+    });
+};
+const MenuContainer = styled(CommandRoot)(ListStyles, {
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden'
+}, maxWidthHeightProps, widthHeightProps);
+const InputContainer = styled.div(InputContainerStyles);
+const Input = styled(CommandInput)(InputStyles);
+const List = styled(CommandList)({
+    overflowY: 'auto'
+});
+const Empty = styled(CommandEmpty)(({ theme })=>({
+        textAlign: 'center',
+        color: theme.scale8,
+        paddingTop: 4,
+        paddingBottom: 8
+    }));
+const Overlay = styled(ModalOverlay)(({ overlayColor, overlayBlur = true, zIndex = 100 })=>({
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        zIndex,
+        width: '100vw',
+        height: 'var(--visual-viewport-height)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: overlayColor || 'rgba(0, 0, 0, 0.2)',
+        backdropFilter: overlayBlur ? `blur(${'number' == typeof overlayBlur ? overlayBlur : 4}px)` : 'none'
+    }));
+const CommandMenu = CommandMenu_CommandMenu;
+export { CommandMenu as default };

package/build/components/CommandMenu/CommandOptions.js

@@ -0,0 +1,24 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import CommandItem from "./CommandItem.js";
+import CommandSection from "./CommandSection.js";
+const CommandOptions = ({ options, onItemSelect })=>/*#__PURE__*/ jsx(Fragment, {
+        children: options.map((option)=>{
+            if ('options' in option) {
+                const section = option;
+                return /*#__PURE__*/ jsx(CommandSection, {
+                    id: section.id,
+                    title: section.title,
+                    children: section.options.map((item)=>/*#__PURE__*/ jsx(CommandItem, {
+                            onClick: ()=>onItemSelect(item),
+                            ...item
+                        }, item.id || item.value))
+                }, section.id);
+            }
+            return /*#__PURE__*/ jsx(CommandItem, {
+                onClick: ()=>onItemSelect(option),
+                ...option
+            }, option.id || option.value);
+        })
+    });
+const CommandMenu_CommandOptions = CommandOptions;
+export { CommandMenu_CommandOptions as default };

package/build/components/CommandMenu/CommandSection.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Command } from "cmdk";
+const CommandSection_CommandSection = ({ id, title, children })=>/*#__PURE__*/ jsx(Section, {
+        id: id,
+        heading: title,
+        children: children
+    });
+const Section = styled(Command.Group)(({ theme })=>({
+        '& > div[cmdk-group-heading]': {
+            backgroundColor: theme.scale0,
+            padding: '0 16px',
+            color: theme.scale6,
+            fontWeight: theme.font.weight.medium,
+            pointerEvents: 'none'
+        }
+    }));
+const CommandSection = CommandSection_CommandSection;
+export { CommandSection as default };

package/build/components/CommandMenu/index.js

@@ -0,0 +1,2 @@
+import CommandMenu from "./CommandMenu.js";
+export { CommandMenu as default };