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

package/build/components/DateRangeSelect.js

@@ -0,0 +1,359 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { isSameDay } from "@internationalized/date";
+import { useEffect, useRef, useState } from "react";
+import { DialogTrigger, GridList } from "react-aria-components";
+import { useControlledOpenState, useEventListener } from "../hooks/index.js";
+import { getDateFromObj, getNow, getObjFromDate } from "./CalendarParts/utils.js";
+import DateRangePicker from "./Inputs/DateRangePicker.js";
+import AriaButton from "./Inputs/helpers/AriaButton.js";
+import TextInput from "./Inputs/TextInput.js";
+import GridListItem from "./ListBoxParts/GridListItem.js";
+import ListStyles from "./ListHelpers/ListStyles.js";
+import MotionPopover from "./MotionPopover.js";
+import Radio from "./Radio.js";
+const rangeOptions = [
+    {
+        id: 'today',
+        value: 'Today'
+    },
+    {
+        id: 'yesterday',
+        value: 'Yesterday'
+    },
+    {
+        id: 'thisWeek',
+        value: 'This Week'
+    },
+    {
+        id: 'lastWeek',
+        value: 'Last Week'
+    },
+    {
+        id: 'lastMonth',
+        value: 'Last Month'
+    },
+    {
+        id: 'last3Months',
+        value: 'Last 3 Months'
+    },
+    {
+        id: 'last6Months',
+        value: 'Last 6 Months'
+    },
+    {
+        id: 'lastYear',
+        value: 'Last Year'
+    },
+    {
+        id: 'custom',
+        value: 'Custom'
+    }
+];
+const getThisWeekRange = (now)=>{
+    const daysSinceSunday = getDateFromObj(now).getDay();
+    const weekStart = now.subtract({
+        days: daysSinceSunday
+    });
+    const weekEnd = weekStart.add({
+        days: 6
+    });
+    return {
+        start: weekStart,
+        end: weekEnd
+    };
+};
+const getLastWeekRange = (now)=>{
+    const daysSinceSunday = getDateFromObj(now).getDay();
+    const currentWeekStart = now.subtract({
+        days: daysSinceSunday
+    });
+    const lastWeekStart = currentWeekStart.subtract({
+        days: 7
+    });
+    const lastWeekEnd = lastWeekStart.add({
+        days: 6
+    });
+    return {
+        start: lastWeekStart,
+        end: lastWeekEnd
+    };
+};
+const getLastNMonthsRange = (now, months)=>{
+    const currentMonthStart = now.set({
+        day: 1
+    });
+    const start = currentMonthStart.subtract({
+        months
+    });
+    const end = currentMonthStart.subtract({
+        days: 1
+    });
+    return {
+        start,
+        end
+    };
+};
+const getRangeIdFromDates = ({ start, end })=>{
+    const today = getNow();
+    const startDate = getObjFromDate(start);
+    const endDate = getObjFromDate(end);
+    if (isSameDay(startDate, today) && isSameDay(endDate, today)) return 'today';
+    const yesterday = today.subtract({
+        days: 1
+    });
+    if (isSameDay(startDate, yesterday) && isSameDay(endDate, yesterday)) return 'yesterday';
+    const thisWeek = getThisWeekRange(today);
+    if (isSameDay(startDate, thisWeek.start) && isSameDay(endDate, thisWeek.end)) return 'thisWeek';
+    const lastWeek = getLastWeekRange(today);
+    if (isSameDay(startDate, lastWeek.start) && isSameDay(endDate, lastWeek.end)) return 'lastWeek';
+    const lastMonth = getLastNMonthsRange(today, 1);
+    if (isSameDay(startDate, lastMonth.start) && isSameDay(endDate, lastMonth.end)) return 'lastMonth';
+    const last3Months = getLastNMonthsRange(today, 3);
+    if (isSameDay(startDate, last3Months.start) && isSameDay(endDate, last3Months.end)) return 'last3Months';
+    const last6Months = getLastNMonthsRange(today, 6);
+    if (isSameDay(startDate, last6Months.start) && isSameDay(endDate, last6Months.end)) return 'last6Months';
+    const lastYear = getLastNMonthsRange(today, 12);
+    if (isSameDay(startDate, lastYear.start) && isSameDay(endDate, lastYear.end)) return 'lastYear';
+    return 'custom';
+};
+const getDisplayValue = (range)=>{
+    const start = range.start.toLocaleDateString();
+    const end = range.end.toLocaleDateString();
+    if (start === end) return start;
+    return `${start} - ${end}`;
+};
+const DateRangeSelect = ({ children, open, label, placeholder = 'Select', width, loading, hideCaret, color, disabled, readOnly, placeholderColor, fontSize, fontWeight, description, errorMessage, position, backgroundColor, iconLeft, value, preventPast, preventFuture, hide, onChange, onOpenChange, afterShow, afterHide, ...props })=>{
+    const [isOpen, handleOpenChange] = useControlledOpenState({
+        open,
+        onOpenChange,
+        afterShow,
+        afterHide
+    });
+    const [displayValue, setDisplayValue] = useState();
+    const [selectedOptionId, setSelectedOptionId] = useState();
+    const [customDateRange, setCustomDateRange] = useState(()=>{
+        const now = getNow();
+        const yesterday = now.subtract({
+            days: 1
+        });
+        return {
+            start: getDateFromObj(yesterday),
+            end: getDateFromObj(now)
+        };
+    });
+    const filteredRangeOptions = hide ? rangeOptions.filter(({ id })=>{
+        const hideArray = Array.isArray(hide) ? hide : [
+            hide
+        ];
+        return !hideArray.includes(id);
+    }) : rangeOptions;
+    useEffect(()=>{
+        if (hide && 1 === filteredRangeOptions.length && 'custom' === filteredRangeOptions[0].id) setSelectedOptionId('custom');
+    }, [
+        hide,
+        filteredRangeOptions
+    ]);
+    useEffect(()=>{
+        if (value?.start && value?.end) {
+            const optionId = getRangeIdFromDates(value);
+            setSelectedOptionId(optionId);
+            if ('custom' === optionId) setCustomDateRange(value);
+            setDisplayValue(getDisplayValue(value));
+        }
+    }, [
+        value
+    ]);
+    const triggerRef = useRef(null);
+    const listRef = useRef(null);
+    const handleDateRangeChange = (start, end)=>{
+        start.setHours(0, 0, 0, 0);
+        end.setHours(23, 59, 59, 999);
+        setCustomDateRange({
+            start,
+            end
+        });
+    };
+    const handleRangeOptionChange = (optionId)=>{
+        setSelectedOptionId(optionId);
+        if ('custom' !== optionId) {
+            saveChanges(optionId);
+            handleOpenChange(false);
+        }
+    };
+    const saveChanges = (id)=>{
+        let dateRange = customDateRange;
+        const optionId = id || selectedOptionId;
+        if (!optionId) return;
+        if ('custom' !== optionId) {
+            const now = getNow();
+            let range;
+            switch(optionId){
+                case 'today':
+                    range = {
+                        start: now,
+                        end: now
+                    };
+                    break;
+                case 'yesterday':
+                    {
+                        const yesterday = now.subtract({
+                            days: 1
+                        });
+                        range = {
+                            start: yesterday,
+                            end: yesterday
+                        };
+                        break;
+                    }
+                case 'thisWeek':
+                    range = getThisWeekRange(now);
+                    break;
+                case 'lastWeek':
+                    range = getLastWeekRange(now);
+                    break;
+                case 'lastMonth':
+                    range = getLastNMonthsRange(now, 1);
+                    break;
+                case 'last3Months':
+                    range = getLastNMonthsRange(now, 3);
+                    break;
+                case 'last6Months':
+                    range = getLastNMonthsRange(now, 6);
+                    break;
+                case 'lastYear':
+                    range = getLastNMonthsRange(now, 12);
+                    break;
+            }
+            const startDate = getDateFromObj(range.start);
+            const endDate = getDateFromObj(range.end);
+            startDate.setHours(0, 0, 0, 0);
+            endDate.setHours(23, 59, 59, 999);
+            dateRange = {
+                start: startDate,
+                end: endDate
+            };
+        }
+        const newDisplayValue = getDisplayValue(dateRange);
+        setDisplayValue(newDisplayValue);
+        if (newDisplayValue !== displayValue) {
+            const start = new Date(dateRange.start);
+            const end = new Date(dateRange.end);
+            const timezoneOffset = end.getTimezoneOffset();
+            end.setMinutes(end.getMinutes() - timezoneOffset);
+            onChange({
+                start,
+                end
+            });
+        }
+    };
+    const handlePopoverOpenChange = (show)=>{
+        handleOpenChange(show);
+        if (!show && selectedOptionId) saveChanges();
+    };
+    const handleEscape = (e)=>{
+        if ('Escape' === e.key) handlePopoverOpenChange(false);
+    };
+    useEventListener(listRef, 'keydown', handleEscape, isOpen, [
+        saveChanges
+    ]);
+    return /*#__PURE__*/ jsxs(DialogTrigger, {
+        isOpen: isOpen,
+        onOpenChange: handlePopoverOpenChange,
+        children: [
+            /*#__PURE__*/ jsx(InputWrapper, {
+                ...props,
+                ref: triggerRef,
+                width: width ?? '100%',
+                isDisabled: disabled || readOnly || loading,
+                backgroundColor: backgroundColor,
+                children: /*#__PURE__*/ jsx(TextInput, {
+                    value: displayValue,
+                    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,
+                    iconRight: hideCaret ? void 0 : isOpen ? 'caret-up' : 'caret-down',
+                    paddingLeft: iconLeft ? 8 : void 0,
+                    paddingRight: 8,
+                    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,
+                        children: [
+                            /*#__PURE__*/ jsx(GridList, {
+                                "aria-label": label || 'Date Range Select',
+                                selectionMode: "single",
+                                selectedKeys: selectedOptionId ? [
+                                    selectedOptionId
+                                ] : [],
+                                onSelectionChange: (keys)=>{
+                                    const key = keys instanceof Set ? Array.from(keys)[0] : keys;
+                                    if (key) handleRangeOptionChange(key);
+                                    else handlePopoverOpenChange(false);
+                                },
+                                style: {
+                                    outline: 'none'
+                                },
+                                ref: listRef,
+                                autoFocus: true,
+                                children: filteredRangeOptions.map((option)=>/*#__PURE__*/ jsx(GridListItem, {
+                                        id: option.id,
+                                        value: option.value,
+                                        leftElement: /*#__PURE__*/ jsx(Radio, {
+                                            name: "wavv-ui-range-options",
+                                            marginRight: 8,
+                                            checked: selectedOptionId === option.id,
+                                            readOnly: true
+                                        })
+                                    }, option.id))
+                            }),
+                            'custom' === selectedOptionId && /*#__PURE__*/ jsx("div", {
+                                style: {
+                                    padding: '8px 16px'
+                                },
+                                children: /*#__PURE__*/ jsx(DateRangePicker, {
+                                    startValue: customDateRange.start,
+                                    endValue: customDateRange.end,
+                                    onChange: handleDateRangeChange,
+                                    preventPast: preventPast,
+                                    preventFuture: preventFuture
+                                })
+                            })
+                        ]
+                    })
+            })
+        ]
+    });
+};
+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, ({ readOnly })=>({
+        '& > div > *': {
+            pointerEvents: readOnly ? 'none' : void 0
+        }
+    }));
+const components_DateRangeSelect = DateRangeSelect;
+export { components_DateRangeSelect as default };

package/build/components/DocTable.js

@@ -0,0 +1,32 @@
+import styled from "@emotion/styled";
+const Table = styled.table(({ theme })=>({
+        border: `1px solid ${theme.scale1}`,
+        borderSpacing: 0,
+        borderCollapse: 'separate',
+        borderRadius: theme.size.xs,
+        overflow: 'hidden',
+        width: '100%',
+        '& thead': {
+            backgroundColor: theme.scale1,
+            borderTopLeftRadius: theme.size.xs,
+            borderTopRightRadius: theme.size.xs
+        },
+        '& th, & td': {
+            border: 'none',
+            padding: 10,
+            textAlign: 'left'
+        },
+        '& td': {
+            borderTop: `1px solid ${theme.scale1}`,
+            lineHeight: '28px'
+        },
+        '& th': {
+            fontWeight: 'bold',
+            whiteSpace: 'nowrap'
+        },
+        '& td:not(:last-of-type)': {
+            whiteSpace: 'nowrap'
+        }
+    }));
+const DocTable = Table;
+export { DocTable as default };

package/build/components/Dot.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { marginProps, positionProps } from "./helpers/styledProps.js";
+const Dot_Dot = ({ children, type, color, size = 'tiny', ...props })=>{
+    const theme = useTheme();
+    let dotColor = color || theme.color.brand;
+    let dotSize = size;
+    switch(size){
+        case 'tiny':
+            dotSize = 8;
+            break;
+        case 'small':
+            dotSize = 16;
+            break;
+        case 'medium':
+            dotSize = 24;
+            break;
+        case 'large':
+            dotSize = 32;
+            break;
+    }
+    if (type && !color) switch(type){
+        case 'error':
+            dotColor = theme.color.error;
+            break;
+        case 'success':
+            dotColor = theme.color.success;
+            break;
+        case 'warning':
+            dotColor = theme.color.warning;
+            break;
+        case 'alert':
+            dotColor = theme.color.alert;
+            break;
+    }
+    return /*#__PURE__*/ jsx(StyledDot, {
+        color: dotColor,
+        size: dotSize,
+        hasContent: !!children,
+        ...props,
+        children: children
+    });
+};
+const StyledDot = styled.div(({ theme: { font, scale10 }, color, size, textColor })=>({
+        borderRadius: '50%',
+        backgroundColor: color,
+        width: size,
+        height: size,
+        minWidth: size,
+        minHeight: size,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontFamily: font.family.light,
+        fontSize: font.size.sm,
+        color: textColor || scale10
+    }), marginProps, positionProps);
+const Dot = Dot_Dot;
+export { Dot as default };

package/build/components/DraftEditor.js

@@ -0,0 +1,188 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Editor, RichUtils } from "draft-js";
+import { isEqual } from "es-toolkit/predicate";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { createStateWithContent, getEntities, getFocusStateAtEnd, getPastedState, getRawState, hasMissingEntities, insertFieldEntity } from "./draftUtils.js";
+import { Description, InputContainer, InputWrapper, Label, isInputFilled, useInputFocus } from "./InputHelpers.js";
+const DraftEditor_DraftEditor = ({ value, onChange, onEnterKey, onFocus, onBlur, mergeFields = [], placeholder = 'Text...', description, invalid, width, height, maxHeight, noPadding = false, readOnly = false, displayMergedValues = false, color, overflow, clampLines, label, disabled, borderRadius, backgroundColor, fontSize, textOnly, margin, marginLeft, marginRight, marginTop, marginBottom, ref, className, ...rest })=>{
+    const [editorState, setEditorState] = useState(()=>createStateWithContent(value, mergeFields, displayMergedValues));
+    const { focused, handleFocus, handleBlur } = useInputFocus(onFocus, onBlur);
+    const [missingField, setMissingField] = useState(false);
+    const editorRef = useRef(null);
+    const fieldsRef = useRef(mergeFields);
+    const heightVar = maxHeight ?? height;
+    const editorMaxHeight = heightVar;
+    const handleChange = (state)=>{
+        setEditorState(state);
+        const hasMissing = hasMissingEntities(state);
+        setMissingField(hasMissing);
+        const text = getRawState(state);
+        const reason = state.getLastChangeType();
+        if (onChange) onChange(text, hasMissing, reason);
+    };
+    const insertField = (field)=>{
+        const newState = insertFieldEntity(field, mergeFields, editorState, displayMergedValues);
+        handleChange(newState);
+    };
+    const focusAtEnd = ()=>{
+        if (editorRef?.current) editorRef.current.focus();
+        const atEnd = getFocusStateAtEnd(editorState);
+        setEditorState(atEnd);
+    };
+    useImperativeHandle(ref, ()=>({
+            insertField,
+            focusAtEnd
+        }));
+    const setEditorText = (text)=>{
+        const selection = editorState.getSelection();
+        const updatedState = createStateWithContent(text, mergeFields, displayMergedValues);
+        const updatedWithFocus = getFocusStateAtEnd(updatedState);
+        const newState = selection.getHasFocus() ? updatedWithFocus : updatedState;
+        handleChange(newState);
+    };
+    useEffect(()=>{
+        const editorText = getRawState(editorState);
+        if (editorText !== value) setEditorText(value);
+    }, [
+        value
+    ]);
+    useEffect(()=>{
+        fieldsRef.current = mergeFields;
+    }, []);
+    useEffect(()=>{
+        const { current: prevFields } = fieldsRef;
+        const areEqual = isEqual(prevFields, mergeFields);
+        const entities = getEntities(editorState);
+        if (!areEqual && entities.length > 0) {
+            fieldsRef.current = mergeFields;
+            const newState = createStateWithContent(value, mergeFields, displayMergedValues);
+            handleChange(newState);
+        }
+    }, [
+        mergeFields
+    ]);
+    const handleContainerClick = (event)=>{
+        if (!readOnly) event.stopPropagation();
+        const selection = editorState.getSelection();
+        if (!selection.getHasFocus()) focusAtEnd();
+    };
+    const handleEditorReturn = (event)=>{
+        const stateWithNewLine = RichUtils.insertSoftNewline(editorState);
+        if (event.shiftKey || !onEnterKey) handleChange(stateWithNewLine);
+        else onEnterKey(event);
+        return 'handled';
+    };
+    const handlePaste = (text, _html, state)=>{
+        const newState = getPastedState(text, state);
+        handleChange(newState);
+        return 'handled';
+    };
+    return /*#__PURE__*/ jsxs(EditorContainer, {
+        onClick: handleContainerClick,
+        width: width,
+        height: height,
+        editorMaxHeight: editorMaxHeight,
+        noPadding: noPadding || textOnly,
+        readOnly: readOnly,
+        color: color,
+        overflow: overflow,
+        clampLines: clampLines,
+        filled: isInputFilled(value),
+        invalid: invalid || missingField,
+        textOnly: textOnly,
+        borderRadius: borderRadius,
+        backgroundColor: backgroundColor,
+        fontSize: fontSize,
+        margin: margin,
+        marginLeft: marginLeft,
+        marginRight: marginRight,
+        marginTop: marginTop,
+        marginBottom: marginBottom,
+        focused: focused,
+        disabled: disabled,
+        hasLabel: !!label,
+        hideEditor: !isInputFilled(value) && !!label && !focused,
+        className: className,
+        children: [
+            /*#__PURE__*/ jsxs(InputWrapper, {
+                readOnly: readOnly,
+                children: [
+                    label && /*#__PURE__*/ jsx(Label, {
+                        filled: isInputFilled(value),
+                        focused: focused,
+                        disabled: disabled,
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsx(Editor, {
+                        ref: editorRef,
+                        editorState: editorState,
+                        onChange: handleChange,
+                        placeholder: placeholder,
+                        readOnly: readOnly,
+                        handleReturn: handleEditorReturn,
+                        handlePastedText: handlePaste,
+                        onFocus: handleFocus,
+                        onBlur: handleBlur,
+                        ...rest
+                    })
+                ]
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                invalid: invalid,
+                children: description
+            })
+        ]
+    });
+};
+const EditorContainer = styled(InputContainer)(({ theme, height, noPadding, disabled, readOnly, color })=>({
+        alignItems: height ? 'flex-start' : void 0,
+        minHeight: height,
+        height: 'max-content',
+        padding: noPadding ? 0 : void 0,
+        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,
+            Label: {
+                color: readOnly ? theme.input.labelColor.filled : void 0
+            }
+        }
+    }), ({ theme, height, hasLabel, editorMaxHeight, overflow, clampLines, hideEditor, fontSize, noPadding, filled })=>({
+        '& .public-DraftEditor-content': {
+            maxHeight: editorMaxHeight || height,
+            overflow: overflow || 'auto',
+            lineHeight: hasLabel ? '19px' : '21px',
+            position: hideEditor ? 'absolute' : 'relative',
+            fontSize: fontSize || theme.font.size.lg,
+            top: !filled || hasLabel || noPadding ? void 0 : 1,
+            caretColor: theme.accent
+        },
+        '& .public-DraftStyleDefault-block': {
+            WebkitLineClamp: clampLines,
+            overflow: clampLines ? 'hidden' : overflow || 'auto',
+            display: clampLines ? '-webkit-box' : void 0,
+            WebkitBoxOrient: clampLines ? 'vertical' : void 0,
+            wordBreak: clampLines ? 'break-word' : void 0
+        },
+        '& .public-DraftEditorPlaceholder-root': {
+            color: theme.input.color.placeholder,
+            position: 'relative',
+            visibility: hideEditor ? 'hidden' : void 0,
+            fontSize: fontSize || theme.font.size.lg
+        }
+    }), ({ noPadding, hasLabel })=>{
+    let top;
+    if (noPadding) top = -1;
+    if (hasLabel) top = -2;
+    return {
+        '& .public-DraftEditorPlaceholder-inner': {
+            position: 'absolute',
+            pointerEvents: 'none',
+            top
+        }
+    };
+});
+const DraftEditor = DraftEditor_DraftEditor;
+export { DraftEditor as default };