@wavv/ui 2.4.3 → 2.4.4-alpha.1

package/build/components/Dialog.d.ts

@@ -0,0 +1,50 @@
+import type { CSSProperties, ReactNode, RefObject } from 'react';
+import type { Attributes } from './typeDefs/elementTypes';
+import type { MaxWidthHeight, MinWidthHeight, Padding, PositionType, WidthHeight } from './types';
+type DivAttributes = Attributes<HTMLDivElement>;
+type DialogProps = {
+    /** The header content displayed at the top of the dialog */
+    header: ReactNode;
+    /** The main text content displayed in the dialog body */
+    text?: ReactNode;
+    /** Additional children content */
+    children?: ReactNode;
+    /** The text of the cancel button */
+    cancelText?: string;
+    /** The text of the confirm button */
+    confirmText?: string;
+    /** The confirm button will be negative (red) */
+    negative?: boolean;
+    /** The function called when the confirm button is clicked */
+    onConfirm?: () => void;
+    /** Controls whether or not the Dialog is open */
+    visible: boolean;
+    /** The function called when the Dialog is closed */
+    onClose: () => void;
+    /** Displays a close icon in the top right of the Dialog */
+    closeIcon?: boolean;
+    /** Prevents the Dialog from closing if the overlay outside the dialog is clicked */
+    preventOverlayClose?: boolean;
+    /** Adjust or disable the blur effect of the dialog overlay */
+    overlayBlur?: boolean | number;
+    /** Sets the color of the dialog overlay */
+    overlayColor?: string;
+    /** Overrides the backgroundColor of the dialog container */
+    backgroundColor?: string;
+    /** Overrides the borderRadius of the dialog container */
+    borderRadius?: number | string;
+    /** Overrides the overflow of the dialog container */
+    overflow?: CSSProperties['overflow'];
+    /** Prevents the dialog from being interacted with */
+    inert?: boolean;
+    /** Renders the Dialog scoped inside a container */
+    scopeRef?: RefObject<HTMLElement | null>;
+    /** Sets the position of the dialog container */
+    position?: PositionType;
+    /** Sets the zIndex of the dialog container */
+    zIndex?: number;
+    /** The `aria-label` of the dialog */
+    'aria-label'?: string;
+} & WidthHeight & MaxWidthHeight & MinWidthHeight & Padding & DivAttributes;
+declare const Dialog: ({ header, text, children, cancelText, confirmText, negative, onConfirm, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur, overlayColor, backgroundColor, inert, scopeRef, position, zIndex, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export default Dialog;

package/build/components/Dialog.js

@@ -0,0 +1,150 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Dialog, Modal, ModalOverlay } from "react-aria-components";
+import Button from "./Button/index.js";
+import { maxWidthHeightProps, minWidthHeightProps, paddingProps } from "./helpers/styledProps.js";
+import Icon from "./Icon/index.js";
+import PortalScope from "./PortalScope.js";
+const Dialog_Dialog = ({ header, text, children, cancelText = 'Cancel', confirmText = 'Okay', negative, onConfirm, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur = true, overlayColor, backgroundColor, inert, scopeRef, position, zIndex, ...props })=>{
+    const { 'aria-label': ariaLabel, ...rest } = props;
+    const handleOpenChange = (open)=>{
+        if (!open) onClose();
+    };
+    const hasFooter = !!onConfirm;
+    const dialog = /*#__PURE__*/ jsx(Overlay, {
+        isDismissable: !preventOverlayClose,
+        isOpen: visible,
+        onOpenChange: handleOpenChange,
+        color: overlayColor,
+        position: scopeRef ? 'absolute' : position,
+        width: scopeRef ? '100%' : void 0,
+        height: scopeRef ? '100%' : void 0,
+        zIndex: zIndex,
+        blur: overlayBlur,
+        ref: (node)=>{
+            if (!node) return;
+            if (inert) node.setAttribute('inert', '');
+            else node.removeAttribute('inert');
+        },
+        children: /*#__PURE__*/ jsx(StyledModal, {
+            children: /*#__PURE__*/ jsx(StyledDialog, {
+                "aria-label": ariaLabel,
+                children: /*#__PURE__*/ jsxs(DialogContainer, {
+                    width: width,
+                    height: height,
+                    backgroundColor: backgroundColor,
+                    ...rest,
+                    children: [
+                        /*#__PURE__*/ jsxs(DialogHeader, {
+                            children: [
+                                header,
+                                closeIcon && /*#__PURE__*/ jsx(CloseInHeader, {
+                                    children: /*#__PURE__*/ jsx(Icon, {
+                                        name: "close",
+                                        size: "small",
+                                        onClick: onClose
+                                    })
+                                })
+                            ]
+                        }),
+                        (text || children) && /*#__PURE__*/ jsxs(DialogContent, {
+                            hasFooter: hasFooter,
+                            children: [
+                                text,
+                                children
+                            ]
+                        }),
+                        hasFooter && /*#__PURE__*/ jsxs(DialogFooter, {
+                            children: [
+                                /*#__PURE__*/ jsx(Button, {
+                                    secondary: true,
+                                    onClick: onClose,
+                                    children: cancelText
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    negative: negative,
+                                    onClick: onConfirm,
+                                    children: confirmText
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        })
+    });
+    return scopeRef ? /*#__PURE__*/ jsx(PortalScope, {
+        containerRef: scopeRef,
+        children: dialog
+    }) : dialog;
+};
+const DialogHeader = styled.div(({ theme })=>({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        color: theme.modal.color.header,
+        fontWeight: theme.font.weight.default,
+        fontSize: theme.font.size.xl,
+        margin: 0,
+        padding: 16,
+        borderBottom: `1px solid ${theme.scale1}`,
+        position: 'relative',
+        width: '100%',
+        boxSizing: 'border-box'
+    }));
+const DialogContent = styled.div(({ theme, hasFooter })=>({
+        color: theme.modal.color.body,
+        fontSize: theme.font.size.lg,
+        padding: hasFooter ? '16px 16px 8px' : 16,
+        boxSizing: 'border-box'
+    }));
+const DialogFooter = styled.div({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: 16,
+    gap: 8,
+    boxSizing: 'border-box'
+});
+const DialogContainer = styled.div(({ theme, width, height, backgroundColor, borderRadius, overflow })=>({
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: backgroundColor || theme.modal.background,
+        color: theme.scale10,
+        boxShadow: theme.elevation3,
+        width: width || 'max-content',
+        height: height || 'max-content',
+        borderRadius: borderRadius || theme.size.sm,
+        overflow: overflow || 'hidden'
+    }), {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%,-50%)'
+}, paddingProps, minWidthHeightProps, maxWidthHeightProps);
+const CloseInHeader = styled.div(({ theme })=>({
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginLeft: 'auto',
+        cursor: 'pointer',
+        color: theme.scale10
+    }));
+const Overlay = styled(ModalOverlay)(({ color, blur, position, zIndex, width, height })=>({
+        position: position || 'fixed',
+        top: 0,
+        left: 0,
+        width: width || '100vw',
+        height: height || 'var(--visual-viewport-height)',
+        zIndex: zIndex || 100,
+        backgroundColor: color || 'rgba(0, 0, 0, 0.2)',
+        backdropFilter: blur ? `blur(${'number' == typeof blur ? blur : 4}px)` : 'none'
+    }));
+const StyledModal = styled(Modal)({
+    outline: 'none'
+});
+const StyledDialog = styled(Dialog)({
+    outline: 'none'
+});
+const components_Dialog = Dialog_Dialog;
+export { components_Dialog as default };

package/build/index.d.ts

@@ -8,6 +8,7 @@ export { default as Checkbox } from './components/Checkbox';
 export { default as Code } from './components/Code';
 export { default as ComboBox } from './components/ComboBox';
 export { default as CommandMenu } from './components/CommandMenu';
+export { default as Dialog } from './components/Dialog';
 export { default as DocTable } from './components/DocTable';
 export { default as Dot } from './components/Dot';
 export { default as DraftEditor } from './components/DraftEditor';

package/build/index.js

@@ -8,6 +8,7 @@ import Checkbox from "./components/Checkbox.js";
 import Code from "./components/Code/index.js";
 import ComboBox from "./components/ComboBox.js";
 import CommandMenu from "./components/CommandMenu/index.js";
+import Dialog from "./components/Dialog.js";
 import DocTable from "./components/DocTable.js";
 import Dot from "./components/Dot.js";
 import DraftEditor from "./components/DraftEditor.js";
@@ -82,4 +83,4 @@ import formatDate from "./utils/formatDate.js";
 import formatNumber from "./utils/formatNumber.js";
 import numberWithCommas from "./utils/numberWithCommas.js";
 import matchesFileTypes from "./utils/matchesFileTypes.js";
-export { Accordion, Audio, Avatar, BarChart, Button, Calendar, Checkbox, Code, ComboBox, CommandMenu, DatePicker, DateRangePicker, DateRangeSelect, DocTable, Dot, DraftEditor, DropZone, Dropdown, DropdownMenu, DropdownSelect, Editor, Ellipsis, FileTrigger, Form, Grid, Icon, ImageViewer, InlineCode, InlineInput, InputHelpers as InputUtils, Label, LineChart, Menu, Message, MessageHr, Modal, MultiSelect, NumberInput, Pagination, PaymentLogo, PhoneInput, PieChart, Popover, PortalScope, Progress, Radio, RangeCalendar, ResetStyles, ScrollbarStyles, SearchInput, Select, Slider, Spinner, Table, Tabs, Tag, TextArea, TextInput, TimeInput, ToastStyles, Toggle, ToggleButton, ToggleButtonGroup, Tooltip, TransferList, Tree, UnstyledButton, colors, copyToClipboard, createEditorContent, darkScale, editorContentToText, formatDate, formatNumber, lightScale, marginProps, matchesFileTypes, numberWithCommas, paddingProps, positionProps, theme, themeClasses, themeOptions, useConfirm, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize, widthHeightProps };
+export { Accordion, Audio, Avatar, BarChart, Button, Calendar, Checkbox, Code, ComboBox, CommandMenu, DatePicker, DateRangePicker, DateRangeSelect, Dialog, DocTable, Dot, DraftEditor, DropZone, Dropdown, DropdownMenu, DropdownSelect, Editor, Ellipsis, FileTrigger, Form, Grid, Icon, ImageViewer, InlineCode, InlineInput, InputHelpers as InputUtils, Label, LineChart, Menu, Message, MessageHr, Modal, MultiSelect, NumberInput, Pagination, PaymentLogo, PhoneInput, PieChart, Popover, PortalScope, Progress, Radio, RangeCalendar, ResetStyles, ScrollbarStyles, SearchInput, Select, Slider, Spinner, Table, Tabs, Tag, TextArea, TextInput, TimeInput, ToastStyles, Toggle, ToggleButton, ToggleButtonGroup, Tooltip, TransferList, Tree, UnstyledButton, colors, copyToClipboard, createEditorContent, darkScale, editorContentToText, formatDate, formatNumber, lightScale, marginProps, matchesFileTypes, numberWithCommas, paddingProps, positionProps, theme, themeClasses, themeOptions, useConfirm, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize, widthHeightProps };

package/package.json

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