@wistia/ui 0.4.6 → 0.4.7-beta.5aa0e9cf.7fbd46e

package/dist/index.d.mts

@@ -336,6 +336,11 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
 } & Omit<ButtonAsLinkProps, "size" | "isLoading" | "leftIcon" | "fullWidth" | "unstyled" | "rightIcon" | "variant">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type AvatarInstanceType = 'image' | 'initials';
+type AvatarImageLoadStateType = 'error' | 'loaded' | 'loading';
+type AvatarStatus = {
+    type: AvatarInstanceType;
+    state: AvatarImageLoadStateType;
+};
 type AvatarProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * The height and width of the avatar (overrides size prop)
@@ -358,7 +363,7 @@ type AvatarProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * A callback that is invoked after the image has loaded or failed to load
      */
-    onImageLoad?: (avatarType: AvatarInstanceType) => void;
+    onImageLoad?: (avatarStatus: AvatarStatus) => void;
 };
 /**
  * An avatar uses a photo, initials or icon to represent an entity
@@ -2163,4 +2168,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -336,6 +336,11 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
 } & Omit<ButtonAsLinkProps, "size" | "isLoading" | "leftIcon" | "fullWidth" | "unstyled" | "rightIcon" | "variant">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type AvatarInstanceType = 'image' | 'initials';
+type AvatarImageLoadStateType = 'error' | 'loaded' | 'loading';
+type AvatarStatus = {
+    type: AvatarInstanceType;
+    state: AvatarImageLoadStateType;
+};
 type AvatarProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * The height and width of the avatar (overrides size prop)
@@ -358,7 +363,7 @@ type AvatarProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * A callback that is invoked after the image has loaded or failed to load
      */
-    onImageLoad?: (avatarType: AvatarInstanceType) => void;
+    onImageLoad?: (avatarStatus: AvatarStatus) => void;
 };
 /**
  * An avatar uses a photo, initials or icon to represent an entity
@@ -2163,4 +2168,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.6
+ * @license @wistia/ui v0.4.7-beta.5aa0e9cf.7fbd46e
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -5868,17 +5868,17 @@ var Avatar = ({
   onImageLoad,
   ...otherProps
 }) => {
-  const [imageLoadState, setImageLoadState] = useState4(null);
+  const [imageLoadState, setImageLoadState] = useState4("loading");
   useEffect3(() => {
-    setImageLoadState(null);
+    setImageLoadState("loading");
   }, [imageUrl]);
   const handleImageLoad = () => {
     setImageLoadState("loaded");
-    onImageLoad?.("image");
+    onImageLoad?.({ state: "loaded", type: "image" });
   };
   const handleImageLoadError = () => {
     setImageLoadState("error");
-    onImageLoad?.("initials");
+    onImageLoad?.({ state: "error", type: "initials" });
   };
   const avatarSize = heightAndWidth ?? avatarSizeMap[size];
   const avatarColor = useMemo3(() => chooseColorScheme(name), [name]);
@@ -7397,6 +7397,14 @@ import {
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil10, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
+import { useMemo as useMemo7 } from "react";
+
+// src/components/Menu/MenuContext.tsx
+import { createContext as createContext5, useContext as useContext4 } from "react";
+var MenuContext = createContext5({ compact: false });
+var useMenuContext = () => useContext4(MenuContext);
+
+// src/components/Menu/Menu.tsx
 import { jsx as jsx187, jsxs as jsxs14 } from "react/jsx-runtime";
 var open = keyframes`
   from {
@@ -7418,6 +7426,28 @@ var close = keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
+var menuItemCss = css20`
+  --menu-label-description-gap: var(--wui-space-01);
+  --menu-item-inner-gap: var(--wui-space-03);
+  --menu-item-left-icon-size: 24px;
+  --menu-item-right-icon-size: 16px;
+  --menu-item-padding: var(--wui-space-02);
+  --menu-label-font-size: var(--wui-typography-label-3-size);
+  --menu-label-font-weight: var(--wui-typography-label-3-weight);
+  --menu-label-line-height: var(--wui-typography-label-3-line-height);
+  --menu-divider-margin: var(--wui-space-02);
+`;
+var compactMenuItemCss = css20`
+  --menu-label-description-gap: 0;
+  --menu-item-inner-gap: var(--wui-space-02);
+  --menu-item-left-icon-size: 16px;
+  --menu-item-right-icon-size: 12px;
+  --menu-item-padding: 6px;
+  --menu-label-font-size: var(--wui-typography-label-4-size);
+  --menu-label-font-weight: var(--wui-typography-label-4-weight);
+  --menu-label-line-height: var(--wui-typography-label-4-line-height);
+  --menu-divider-margin: var(--wui-space-01);
+`;
 var menuContentCss = css20`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
@@ -7427,6 +7457,8 @@ var menuContentCss = css20`
   --menu-min-width: 120px;
   --menu-max-width: 284px;
 
+  ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss};
+
   animation: ${open}; /* TODO - need easing tokens */
   font-family: var(--menu-font-family);
   background: var(--menu-bg);
@@ -7457,31 +7489,8 @@ var menuContentCss = css20`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var menuItemCss = css20`
-  --menu-label-description-gap: var(--wui-space-01);
-  --menu-item-inner-gap: var(--wui-space-03);
-  --menu-item-left-icon-size: 24px;
-  --menu-item-right-icon-size: 16px;
-  --menu-item-padding: var(--wui-space-02);
-  --menu-label-font-size: var(--wui-typography-label-3-size);
-  --menu-label-font-weight: var(--wui-typography-label-3-weight);
-  --menu-label-line-height: var(--wui-typography-label-3-line-height);
-  --menu-divider-margin: var(--wui-space-02);
-`;
-var compactMenuItemCss = css20`
-  --menu-label-description-gap: 0;
-  --menu-item-inner-gap: var(--wui-space-02);
-  --menu-item-left-icon-size: 16px;
-  --menu-item-right-icon-size: 12px;
-  --menu-item-padding: 6px;
-  --menu-label-font-size: var(--wui-typography-label-4-size);
-  --menu-label-font-weight: var(--wui-typography-label-4-weight);
-  --menu-label-line-height: var(--wui-typography-label-4-line-height);
-  --menu-divider-margin: var(--wui-space-01);
-`;
 var MenuContent = styled26(DropdownMenuContent)`
   ${menuContentCss}
-  ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss}
 `;
 var Menu = ({
   align = "start",
@@ -7496,6 +7505,7 @@ var Menu = ({
   onInteractOutside,
   ...props
 }) => {
+  const contextValue = useMemo7(() => ({ compact }), [compact]);
   let controlProps = {
     ...isNotNil10(onOpenChange) && isNotNil10(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
@@ -7505,7 +7515,7 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsx187(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs14(
     DropdownMenu,
     {
       modal: false,
@@ -7537,7 +7547,7 @@ var Menu = ({
         ) })
       ]
     }
-  );
+  ) });
 };
 Menu.displayName = "Menu";
 
@@ -7714,7 +7724,6 @@ var MenuItemDescription = ({ children }) => {
 import { jsx as jsx191, jsxs as jsxs16 } from "react/jsx-runtime";
 var SubMenuContent = styled30(DropdownMenuSubContent)`
   ${menuContentCss}
-  width: 298px;
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
@@ -7751,12 +7760,13 @@ var SubMenu = ({
 }) => {
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = useState7(false);
+  const { compact } = useMenuContext();
   return isSmAndUp ? /* @__PURE__ */ jsxs16(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs16(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ jsx191(MenuItemLabel, { children: label }),
       isNotNil12(description) ? /* @__PURE__ */ jsx191(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx191(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx191(SubMenuContent, { children }) })
+    /* @__PURE__ */ jsx191(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx191(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ jsxs16(DropdownMenuGroup, { children: [
     /* @__PURE__ */ jsxs16(
       SubMenuTrigger,