@wavv/ui 2.4.4-alpha.4 → 2.4.4-alpha.6

package/build/components/Button/Button.js

@@ -8,12 +8,14 @@ import DropdownMenu from "../DropdownMenu.js";
 import { marginProps } from "../helpers/styledProps.js";
 import Icon from "../Icon/index.js";
 import ButtonLoader from "./ButtonLoader.js";
+import dropdown_caret from "./dropdown-caret.js";
 import Group from "./Group.js";
 const Button_Button = ({ content, children, dropdown, options, ref, ...rest })=>{
     const text = content || children;
-    if (dropdown && options) return /*#__PURE__*/ jsx(DropdownButton, {
+    if ((true === dropdown || 'single' === dropdown) && options) return /*#__PURE__*/ jsx(DropdownButton, {
         ref: ref,
         options: options,
+        dropdown: dropdown,
         ...rest,
         children: text
     });
@@ -66,8 +68,20 @@ const BasicButton = ({ children, onClick, onPress, icon, iconPosition, iconColor
         ]
     });
 };
-const DropdownButton = ({ children, options, onClick, onPress, afterShow, afterHide, secondary, negative, positive, caution, outline, subtle, link, size, small, tiny, large, disabled, buttonDisabled, optionsDisabled, loading, direction, collapse, width, hideDivider, gap, ref, ...props })=>{
+const DropdownButton = ({ children, options, dropdown = true, onClick, onPress, afterShow, afterHide, secondary, negative, positive, caution, outline, subtle, link, size, small, tiny, large, disabled, buttonDisabled, optionsDisabled, loading, direction, collapse, width, hideDivider, gap, icon, iconPosition, ref, ...props })=>{
     const [optionsOpen, setOptionsOpen] = useState(false);
+    const isSingle = 'single' === dropdown;
+    let buttonSize = size || 'medium';
+    if (small) buttonSize = 'small';
+    else if (large) buttonSize = 'large';
+    else if (tiny) buttonSize = 'tiny';
+    const caretDimensions = {
+        large: 7,
+        medium: 6,
+        small: 5,
+        tiny: 4
+    };
+    const caretSize = caretDimensions[buttonSize];
     const buttonStyleProps = {
         secondary,
         negative,
@@ -93,6 +107,38 @@ const DropdownButton = ({ children, options, onClick, onPress, afterShow, afterH
         if (afterHide) afterHide();
         setOptionsOpen(false);
     };
+    if (isSingle) return /*#__PURE__*/ jsx(DropdownContainer, {
+        children: /*#__PURE__*/ jsx(DropdownMenu, {
+            options: options,
+            position: `${direction || 'bottom'} right`,
+            afterShow: handleShow,
+            afterHide: handleHide,
+            isTriggerButton: true,
+            trigger: /*#__PURE__*/ jsxs(BasicButton, {
+                ...buttonStyleProps,
+                ...props,
+                ref: ref,
+                disabled: disabled,
+                width: width && !collapse ? '100%' : void 0,
+                collapse: collapse,
+                loading: loading,
+                icon: icon,
+                iconPosition: iconPosition,
+                children: [
+                    children && /*#__PURE__*/ jsx(DropdownButtonChildren, {
+                        children: children
+                    }),
+                    /*#__PURE__*/ jsx(CaretIconWrapper, {
+                        isOpen: optionsOpen,
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            svg: /*#__PURE__*/ jsx(dropdown_caret, {}),
+                            size: caretSize
+                        })
+                    })
+                ]
+            })
+        })
+    });
     return /*#__PURE__*/ jsx(DropdownContainer, {
         children: /*#__PURE__*/ jsxs(Group, {
             width: collapse ? void 0 : width,
@@ -247,10 +293,23 @@ const DropdownContainer = styled.div({
     position: 'relative'
 });
 const DropdownButtonChildren = styled.div({
-    marginRight: 8
+    marginRight: 8,
+    display: 'inline-flex',
+    alignItems: 'center'
 });
+const CaretIconWrapper = styled.span(({ isOpen })=>({
+        display: 'inline-flex',
+        alignItems: 'center',
+        flexShrink: 0,
+        '& > div': {
+            transform: isOpen ? 'rotate(-180deg)' : 'rotate(0deg)',
+            transition: 'transform 0.2s ease-in-out'
+        }
+    }));
 const Inner = styled.span({
-    pointerEvents: 'none'
+    pointerEvents: 'none',
+    display: 'inline-flex',
+    alignItems: 'center'
 });
 const components_Button_Button = Object.assign(Button_Button, {
     Group: Group

package/build/components/Button/ButtonTypes.d.ts

@@ -112,7 +112,7 @@ export type DropdownProps = {
     optionsDisabled?: never;
 } | {
     /** Adds a dropdown button to the main button, allowing for multiple button options */
-    dropdown: true;
+    dropdown: true | 'single';
     /** The dropdown options array of { id: string; label: string; action: () => void; } */
     options: ListItem[];
     /** The direction the options should open in relation to the button  */
@@ -131,6 +131,7 @@ export type DropdownProps = {
     optionsDisabled?: boolean;
 };
 export type ButtonDropdownProps = {
+    dropdown: true | 'single';
     options: ListItem[];
     direction?: 'top' | 'bottom';
     afterShow?: () => void;

package/build/components/Button/dropdown-caret.js

@@ -0,0 +1,2 @@
+import dropdown_caret_namespaceObject from "../../static/svg/dropdown-caret.svg";
+export { dropdown_caret_namespaceObject as default };

package/build/components/Dialog.d.ts

@@ -1,10 +1,13 @@
 import type { CSSProperties, ReactNode, RefObject } from 'react';
+import type { IconName } from './Icon/Icon';
 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 icon displayed to the left of the header text */
+    headerIcon?: IconName;
     /** The main text content displayed in the dialog body */
     text?: ReactNode;
     /** Additional children content */
@@ -60,5 +63,5 @@ type DialogProps = {
     /** The `aria-label` of the dialog */
     'aria-label'?: string;
 } & WidthHeight & MaxWidthHeight & MinWidthHeight & Padding & DivAttributes;
-declare const Dialog: ({ header, text, children, cancelText, confirmText, middleText, negative, confirmDisabled, confirmLoading, middleDisabled, middleLoading, onConfirm, onMiddle, onCancel, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur, overlayColor, backgroundColor, inert, scopeRef, position, zIndex, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+declare const Dialog: ({ header, headerIcon, text, children, cancelText, confirmText, middleText, negative, confirmDisabled, confirmLoading, middleDisabled, middleLoading, onConfirm, onMiddle, onCancel, 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

@@ -2,10 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import styled from "@emotion/styled";
 import { Dialog, Heading, Modal, ModalOverlay } from "react-aria-components";
 import Button from "./Button/index.js";
+import getIcon from "./helpers/getIcon.js";
 import { body1, head3, 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', middleText, negative, confirmDisabled, confirmLoading, middleDisabled, middleLoading, onConfirm, onMiddle, onCancel, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayBlur = true, overlayColor, backgroundColor, inert, scopeRef, position, zIndex, ...props })=>{
+const Dialog_Dialog = ({ header, headerIcon, text, children, cancelText = 'Cancel', confirmText = 'Okay', middleText, negative, confirmDisabled, confirmLoading, middleDisabled, middleLoading, onConfirm, onMiddle, onCancel, 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();
@@ -38,7 +39,12 @@ const Dialog_Dialog = ({ header, text, children, cancelText = 'Cancel', confirmT
                         /*#__PURE__*/ jsxs(DialogHeader, {
                             slot: "title",
                             children: [
-                                header,
+                                /*#__PURE__*/ jsxs(HeaderContent, {
+                                    children: [
+                                        headerIcon && getIcon(headerIcon),
+                                        header
+                                    ]
+                                }),
                                 closeIcon && /*#__PURE__*/ jsx(CloseInHeader, {
                                     children: /*#__PURE__*/ jsx(Icon, {
                                         name: "close",
@@ -100,6 +106,11 @@ const DialogHeader = styled(Heading)(({ theme })=>({
         width: '100%',
         boxSizing: 'border-box'
     }), head3);
+const HeaderContent = styled.div({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8
+});
 const DialogContent = styled.div(({ theme, hasFooter })=>({
         color: theme.modal.color.body,
         padding: hasFooter ? '16px 16px 8px' : 16,

package/build/components/Icon/Icon.js

@@ -9,6 +9,14 @@ const Icon = ({ name, svg, external, size, width, height, color, hoverColor, poi
     let SvgComponent = null;
     let svgContent = null;
     let WrappedIconComponent = null;
+    const iconSizes = {
+        tiny: 12,
+        small: 18,
+        medium: 24,
+        large: 40
+    };
+    let iconSize = 'number' == typeof size ? size : iconSizes.medium;
+    if ('tiny' === size || 'small' === size || 'medium' === size || 'large' === size) iconSize = iconSizes[size];
     if (name) {
         if (name in customIcons) SvgComponent = customIcons[name];
         else if (name in icons) WrappedIconComponent = icons[name];
@@ -16,19 +24,11 @@ const Icon = ({ name, svg, external, size, width, height, color, hoverColor, poi
         let element = svg;
         if ('function' == typeof svg) element = svg();
         const clonedSvg = /*#__PURE__*/ cloneElement(element, {
-            width: width || size,
-            height: height || size
+            width: width || iconSize,
+            height: height || iconSize
         });
         svgContent = clonedSvg;
     }
-    const iconSizes = {
-        tiny: 12,
-        small: 18,
-        medium: 24,
-        large: 40
-    };
-    let iconSize = 'number' == typeof size ? size : iconSizes.medium;
-    if ('tiny' === size || 'small' === size || 'medium' === size || 'large' === size) iconSize = iconSizes[size];
     if (external) return /*#__PURE__*/ jsx(DynamicIcon, {
         ...props,
         name: external,

package/build/static/svg/dropdown-caret.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="4" viewBox="0 0 6 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 0.75L3 3L5.25 0.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/package.json

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