@wistia/ui 0.18.14-beta.0ffff1cc.bde9434 → 0.18.14-beta.25f44b78.4728536
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +38 -20
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +43 -15
- package/dist/index.d.ts +43 -15
- package/dist/index.mjs +37 -20
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -5
package/dist/index.d.mts
CHANGED
|
@@ -99,7 +99,7 @@ type Rect = {
|
|
|
99
99
|
x: number;
|
|
100
100
|
y: number;
|
|
101
101
|
};
|
|
102
|
-
declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T
|
|
102
|
+
declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T>, Rect];
|
|
103
103
|
|
|
104
104
|
/**
|
|
105
105
|
* Hook that wraps `useFilePicker` from the use-file-picker library
|
|
@@ -116,7 +116,7 @@ declare const useImperativeFilePicker: <T extends useImperativeFilePickerConfig
|
|
|
116
116
|
|
|
117
117
|
type UseFocusTrapOptions = {
|
|
118
118
|
disableAriaHider?: boolean;
|
|
119
|
-
focusSelector?: HTMLElement | RefObject<HTMLElement
|
|
119
|
+
focusSelector?: HTMLElement | RefObject<HTMLElement> | string | null | undefined;
|
|
120
120
|
};
|
|
121
121
|
declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
|
|
122
122
|
|
|
@@ -365,7 +365,9 @@ type ButtonProps = ButtonAsButtonProps | ButtonAsLinkProps;
|
|
|
365
365
|
* action, or performing a delete operation. It replaces the HTML `<button>` element,
|
|
366
366
|
* unless an `href` attribute is passed, in which it will render an `<a>` element.
|
|
367
367
|
*/
|
|
368
|
-
declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & react.
|
|
368
|
+
declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
|
|
369
|
+
ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
|
|
370
|
+
} & {
|
|
369
371
|
beforeAction?: (() => Promise<void>) | (() => void);
|
|
370
372
|
children: ReactNode;
|
|
371
373
|
colorScheme?: ColorSchemeTypes;
|
|
@@ -396,7 +398,9 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & re
|
|
|
396
398
|
* @ignore
|
|
397
399
|
*/
|
|
398
400
|
type?: LinkTypes;
|
|
399
|
-
}, "ref"> | Omit<BaseButtonProps & react.
|
|
401
|
+
}, "ref"> | Omit<BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
|
|
402
|
+
ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
|
|
403
|
+
} & {
|
|
400
404
|
beforeAction?: (() => Promise<void>) | (() => void);
|
|
401
405
|
children: ReactNode;
|
|
402
406
|
colorScheme?: ColorSchemeTypes;
|
|
@@ -405,7 +409,9 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & re
|
|
|
405
409
|
rightIcon?: ReactNode | undefined;
|
|
406
410
|
type?: LinkTypes | undefined;
|
|
407
411
|
underline?: "always" | "hover" | "none";
|
|
408
|
-
} & react.
|
|
412
|
+
} & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
413
|
+
ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
|
|
414
|
+
} & {
|
|
409
415
|
href?: never;
|
|
410
416
|
type?: "button" | "reset" | "submit";
|
|
411
417
|
} & {
|
|
@@ -1138,7 +1144,7 @@ type ClickRegionProps = {
|
|
|
1138
1144
|
/**
|
|
1139
1145
|
* The ref to the button or link that should be clicked when the ClickRegion is clicked.
|
|
1140
1146
|
*/
|
|
1141
|
-
targetRef:
|
|
1147
|
+
targetRef: MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
|
|
1142
1148
|
};
|
|
1143
1149
|
/**
|
|
1144
1150
|
* This allows larger elements to be interactive links or buttons while maintaining acessibility.
|
|
@@ -1668,7 +1674,7 @@ type ContextMenuProps = {
|
|
|
1668
1674
|
} | {
|
|
1669
1675
|
position?: never;
|
|
1670
1676
|
side?: never;
|
|
1671
|
-
triggerRef: RefObject<HTMLElement
|
|
1677
|
+
triggerRef: RefObject<HTMLElement>;
|
|
1672
1678
|
});
|
|
1673
1679
|
/**
|
|
1674
1680
|
* The ContextMenu is an extended implementation of the [Menu]() component that allows for right-click context menus.
|
|
@@ -1717,7 +1723,7 @@ declare const DataCard: {
|
|
|
1717
1723
|
displayName: string;
|
|
1718
1724
|
};
|
|
1719
1725
|
|
|
1720
|
-
type DataCardsProps = ComponentPropsWithoutRef<'
|
|
1726
|
+
type DataCardsProps = ComponentPropsWithoutRef<'dl'> & {
|
|
1721
1727
|
/**
|
|
1722
1728
|
* Should be at least one `DataCard` component
|
|
1723
1729
|
*/
|
|
@@ -2859,7 +2865,9 @@ type MenuItemButtonProps = ButtonProps & {
|
|
|
2859
2865
|
unstyled?: never;
|
|
2860
2866
|
};
|
|
2861
2867
|
|
|
2862
|
-
declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & react.
|
|
2868
|
+
declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
|
|
2869
|
+
ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
|
|
2870
|
+
} & {
|
|
2863
2871
|
beforeAction?: (() => Promise<void>) | (() => void);
|
|
2864
2872
|
children: react.ReactNode;
|
|
2865
2873
|
colorScheme?: ColorSchemeTypes;
|
|
@@ -2900,7 +2908,9 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
|
|
|
2900
2908
|
* Treats the menu item as a link when provided
|
|
2901
2909
|
*/
|
|
2902
2910
|
href?: MenuItemButtonProps["href"];
|
|
2903
|
-
}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & react.
|
|
2911
|
+
}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
|
|
2912
|
+
ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
|
|
2913
|
+
} & {
|
|
2904
2914
|
beforeAction?: (() => Promise<void>) | (() => void);
|
|
2905
2915
|
children: react.ReactNode;
|
|
2906
2916
|
colorScheme?: ColorSchemeTypes;
|
|
@@ -2909,7 +2919,9 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
|
|
|
2909
2919
|
rightIcon?: react.ReactNode | undefined;
|
|
2910
2920
|
type?: LinkTypes | undefined;
|
|
2911
2921
|
underline?: "always" | "hover" | "none";
|
|
2912
|
-
} & react.
|
|
2922
|
+
} & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
2923
|
+
ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
|
|
2924
|
+
} & {
|
|
2913
2925
|
href?: never;
|
|
2914
2926
|
type?: "button" | "reset" | "submit";
|
|
2915
2927
|
} & {
|
|
@@ -2935,7 +2947,9 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
|
|
|
2935
2947
|
* Treats the menu item as a link when provided
|
|
2936
2948
|
*/
|
|
2937
2949
|
href?: MenuItemButtonProps["href"];
|
|
2938
|
-
}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & react.
|
|
2950
|
+
}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
2951
|
+
ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
|
|
2952
|
+
} & {
|
|
2939
2953
|
href?: never;
|
|
2940
2954
|
type?: "button" | "reset" | "submit";
|
|
2941
2955
|
children: react.ReactNode;
|
|
@@ -3092,7 +3106,7 @@ type ModalProps = ComponentPropsWithoutRef<'div'> & {
|
|
|
3092
3106
|
/**
|
|
3093
3107
|
* Ref to the element that should receive focus when the modal opens
|
|
3094
3108
|
*/
|
|
3095
|
-
initialFocusRef?: RefObject<HTMLElement
|
|
3109
|
+
initialFocusRef?: RefObject<HTMLElement>;
|
|
3096
3110
|
/**
|
|
3097
3111
|
* Determines if the modal is currently open
|
|
3098
3112
|
*/
|
|
@@ -3140,7 +3154,7 @@ declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
|
|
|
3140
3154
|
/**
|
|
3141
3155
|
* Ref to the element that should receive focus when the modal opens
|
|
3142
3156
|
*/
|
|
3143
|
-
initialFocusRef?: RefObject<HTMLElement
|
|
3157
|
+
initialFocusRef?: RefObject<HTMLElement>;
|
|
3144
3158
|
/**
|
|
3145
3159
|
* Determines if the modal is currently open
|
|
3146
3160
|
*/
|
|
@@ -4353,4 +4367,18 @@ declare const SplitButton: {
|
|
|
4353
4367
|
displayName: string;
|
|
4354
4368
|
};
|
|
4355
4369
|
|
|
4356
|
-
|
|
4370
|
+
type CustomizableTokens = '--wui-color-backdrop' | '--wui-color-bg-app' | '--wui-color-bg-fill-active' | '--wui-color-bg-fill-hover' | '--wui-color-bg-fill-white ' | '--wui-color-bg-fill' | '--wui-color-bg-surface-active' | '--wui-color-bg-surface-disabled' | '--wui-color-bg-surface-hover' | '--wui-color-bg-surface-secondary-active' | '--wui-color-bg-surface-secondary-hover' | '--wui-color-bg-surface-secondary' | '--wui-color-bg-surface-selected-active' | '--wui-color-bg-surface-selected-hover' | '--wui-color-bg-surface-selected' | '--wui-color-bg-surface-tertiary' | '--wui-color-bg-surface' | '--wui-color-bg-tooltip' | '--wui-color-border-active-selected' | '--wui-color-border-active' | '--wui-color-border-disabled' | '--wui-color-border-hover-selected' | '--wui-color-border-hover' | '--wui-color-border-secondary-active' | '--wui-color-border-secondary-hover' | '--wui-color-border-secondary' | '--wui-color-border-selected' | '--wui-color-border' | '--wui-color-drop-shadow' | '--wui-color-focus-color' | '--wui-color-focus-ring-disabled' | '--wui-color-focus-ring' | '--wui-color-icon-disabled' | '--wui-color-icon-on-fill' | '--wui-color-icon-selected' | '--wui-color-icon' | '--wui-color-invalid-indicator' | '--wui-color-notification-pill-color' | '--wui-color-segmented-control-checked-background' | '--wui-color-text-button' | '--wui-color-text-disabled' | '--wui-color-text-link' | '--wui-color-text-on-fill-white-selected' | '--wui-color-text-on-fill' | '--wui-color-text-secondary' | '--wui-color-text-selected' | '--wui-color-text';
|
|
4371
|
+
type CustomizableThemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
|
|
4372
|
+
children: ReactNode;
|
|
4373
|
+
overrides: Partial<Record<CustomizableTokens, number | string>>;
|
|
4374
|
+
};
|
|
4375
|
+
/**
|
|
4376
|
+
* Used for overriding the default theme tokens with custom values.
|
|
4377
|
+
* This should only be used when the ui systems team has been consulted first.
|
|
4378
|
+
*/
|
|
4379
|
+
declare const CustomizableThemeWrapper: {
|
|
4380
|
+
({ children, overrides, ...props }: CustomizableThemeWrapperProps): JSX.Element;
|
|
4381
|
+
displayName: string;
|
|
4382
|
+
};
|
|
4383
|
+
|
|
4384
|
+
export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, BannerImage, type BannerProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, type ColorGridOptionProps, type ColorGridProps, ColorList, ColorListGroup, type ColorListGroupProps, ColorListOption, type ColorListOptionProps, type ColorListProps, ColorPicker, ColorPickerPopoverContent, type ColorPickerPopoverContentProps, type ColorPickerProps, ColorPickerSection, type ColorPickerSectionProps, ColorPickerTrigger, type ColorPickerTriggerProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ContextMenu, type ContextMenuProps, ContrastControls, CustomizableThemeWrapper, type CustomizableThemeWrapperProps, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, DataList, DataListItem, DataListItemLabel, DataListItemValue, type DataListProps, Divider, EditableHeading, type EditableHeadingProps, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, type EditableTextProps, EditableTextRoot, type EditableTextRootProps, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, type EllipsisProps, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Grid, type GridProps, Heading, type HeadingProps, HexColorInput, type HexColorInputProps, HueSlider, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, InputPassword, type InputPasswordProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Mark, type MarkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, ModalCallout, ModalCallouts, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, SplitButton, type SplitButtonProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseActiveMqReturnType, type UseIsHoveredReturnType, type UseMqReturnType, type UseToastProps, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
|
package/dist/index.d.ts
CHANGED
|
@@ -99,7 +99,7 @@ type Rect = {
|
|
|
99
99
|
x: number;
|
|
100
100
|
y: number;
|
|
101
101
|
};
|
|
102
|
-
declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T
|
|
102
|
+
declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T>, Rect];
|
|
103
103
|
|
|
104
104
|
/**
|
|
105
105
|
* Hook that wraps `useFilePicker` from the use-file-picker library
|
|
@@ -116,7 +116,7 @@ declare const useImperativeFilePicker: <T extends useImperativeFilePickerConfig
|
|
|
116
116
|
|
|
117
117
|
type UseFocusTrapOptions = {
|
|
118
118
|
disableAriaHider?: boolean;
|
|
119
|
-
focusSelector?: HTMLElement | RefObject<HTMLElement
|
|
119
|
+
focusSelector?: HTMLElement | RefObject<HTMLElement> | string | null | undefined;
|
|
120
120
|
};
|
|
121
121
|
declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
|
|
122
122
|
|
|
@@ -365,7 +365,9 @@ type ButtonProps = ButtonAsButtonProps | ButtonAsLinkProps;
|
|
|
365
365
|
* action, or performing a delete operation. It replaces the HTML `<button>` element,
|
|
366
366
|
* unless an `href` attribute is passed, in which it will render an `<a>` element.
|
|
367
367
|
*/
|
|
368
|
-
declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & react.
|
|
368
|
+
declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
|
|
369
|
+
ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
|
|
370
|
+
} & {
|
|
369
371
|
beforeAction?: (() => Promise<void>) | (() => void);
|
|
370
372
|
children: ReactNode;
|
|
371
373
|
colorScheme?: ColorSchemeTypes;
|
|
@@ -396,7 +398,9 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & re
|
|
|
396
398
|
* @ignore
|
|
397
399
|
*/
|
|
398
400
|
type?: LinkTypes;
|
|
399
|
-
}, "ref"> | Omit<BaseButtonProps & react.
|
|
401
|
+
}, "ref"> | Omit<BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
|
|
402
|
+
ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
|
|
403
|
+
} & {
|
|
400
404
|
beforeAction?: (() => Promise<void>) | (() => void);
|
|
401
405
|
children: ReactNode;
|
|
402
406
|
colorScheme?: ColorSchemeTypes;
|
|
@@ -405,7 +409,9 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & re
|
|
|
405
409
|
rightIcon?: ReactNode | undefined;
|
|
406
410
|
type?: LinkTypes | undefined;
|
|
407
411
|
underline?: "always" | "hover" | "none";
|
|
408
|
-
} & react.
|
|
412
|
+
} & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
413
|
+
ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
|
|
414
|
+
} & {
|
|
409
415
|
href?: never;
|
|
410
416
|
type?: "button" | "reset" | "submit";
|
|
411
417
|
} & {
|
|
@@ -1138,7 +1144,7 @@ type ClickRegionProps = {
|
|
|
1138
1144
|
/**
|
|
1139
1145
|
* The ref to the button or link that should be clicked when the ClickRegion is clicked.
|
|
1140
1146
|
*/
|
|
1141
|
-
targetRef:
|
|
1147
|
+
targetRef: MutableRefObject<HTMLAnchorElement | HTMLButtonElement | null>;
|
|
1142
1148
|
};
|
|
1143
1149
|
/**
|
|
1144
1150
|
* This allows larger elements to be interactive links or buttons while maintaining acessibility.
|
|
@@ -1668,7 +1674,7 @@ type ContextMenuProps = {
|
|
|
1668
1674
|
} | {
|
|
1669
1675
|
position?: never;
|
|
1670
1676
|
side?: never;
|
|
1671
|
-
triggerRef: RefObject<HTMLElement
|
|
1677
|
+
triggerRef: RefObject<HTMLElement>;
|
|
1672
1678
|
});
|
|
1673
1679
|
/**
|
|
1674
1680
|
* The ContextMenu is an extended implementation of the [Menu]() component that allows for right-click context menus.
|
|
@@ -1717,7 +1723,7 @@ declare const DataCard: {
|
|
|
1717
1723
|
displayName: string;
|
|
1718
1724
|
};
|
|
1719
1725
|
|
|
1720
|
-
type DataCardsProps = ComponentPropsWithoutRef<'
|
|
1726
|
+
type DataCardsProps = ComponentPropsWithoutRef<'dl'> & {
|
|
1721
1727
|
/**
|
|
1722
1728
|
* Should be at least one `DataCard` component
|
|
1723
1729
|
*/
|
|
@@ -2859,7 +2865,9 @@ type MenuItemButtonProps = ButtonProps & {
|
|
|
2859
2865
|
unstyled?: never;
|
|
2860
2866
|
};
|
|
2861
2867
|
|
|
2862
|
-
declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & react.
|
|
2868
|
+
declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
|
|
2869
|
+
ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
|
|
2870
|
+
} & {
|
|
2863
2871
|
beforeAction?: (() => Promise<void>) | (() => void);
|
|
2864
2872
|
children: react.ReactNode;
|
|
2865
2873
|
colorScheme?: ColorSchemeTypes;
|
|
@@ -2900,7 +2908,9 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
|
|
|
2900
2908
|
* Treats the menu item as a link when provided
|
|
2901
2909
|
*/
|
|
2902
2910
|
href?: MenuItemButtonProps["href"];
|
|
2903
|
-
}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & react.
|
|
2911
|
+
}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
|
|
2912
|
+
ref?: ((instance: HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLAnchorElement> | null | undefined;
|
|
2913
|
+
} & {
|
|
2904
2914
|
beforeAction?: (() => Promise<void>) | (() => void);
|
|
2905
2915
|
children: react.ReactNode;
|
|
2906
2916
|
colorScheme?: ColorSchemeTypes;
|
|
@@ -2909,7 +2919,9 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
|
|
|
2909
2919
|
rightIcon?: react.ReactNode | undefined;
|
|
2910
2920
|
type?: LinkTypes | undefined;
|
|
2911
2921
|
underline?: "always" | "hover" | "none";
|
|
2912
|
-
} & react.
|
|
2922
|
+
} & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
2923
|
+
ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
|
|
2924
|
+
} & {
|
|
2913
2925
|
href?: never;
|
|
2914
2926
|
type?: "button" | "reset" | "submit";
|
|
2915
2927
|
} & {
|
|
@@ -2935,7 +2947,9 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
|
|
|
2935
2947
|
* Treats the menu item as a link when provided
|
|
2936
2948
|
*/
|
|
2937
2949
|
href?: MenuItemButtonProps["href"];
|
|
2938
|
-
}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & react.
|
|
2950
|
+
}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
2951
|
+
ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
|
|
2952
|
+
} & {
|
|
2939
2953
|
href?: never;
|
|
2940
2954
|
type?: "button" | "reset" | "submit";
|
|
2941
2955
|
children: react.ReactNode;
|
|
@@ -3092,7 +3106,7 @@ type ModalProps = ComponentPropsWithoutRef<'div'> & {
|
|
|
3092
3106
|
/**
|
|
3093
3107
|
* Ref to the element that should receive focus when the modal opens
|
|
3094
3108
|
*/
|
|
3095
|
-
initialFocusRef?: RefObject<HTMLElement
|
|
3109
|
+
initialFocusRef?: RefObject<HTMLElement>;
|
|
3096
3110
|
/**
|
|
3097
3111
|
* Determines if the modal is currently open
|
|
3098
3112
|
*/
|
|
@@ -3140,7 +3154,7 @@ declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
|
|
|
3140
3154
|
/**
|
|
3141
3155
|
* Ref to the element that should receive focus when the modal opens
|
|
3142
3156
|
*/
|
|
3143
|
-
initialFocusRef?: RefObject<HTMLElement
|
|
3157
|
+
initialFocusRef?: RefObject<HTMLElement>;
|
|
3144
3158
|
/**
|
|
3145
3159
|
* Determines if the modal is currently open
|
|
3146
3160
|
*/
|
|
@@ -4353,4 +4367,18 @@ declare const SplitButton: {
|
|
|
4353
4367
|
displayName: string;
|
|
4354
4368
|
};
|
|
4355
4369
|
|
|
4356
|
-
|
|
4370
|
+
type CustomizableTokens = '--wui-color-backdrop' | '--wui-color-bg-app' | '--wui-color-bg-fill-active' | '--wui-color-bg-fill-hover' | '--wui-color-bg-fill-white ' | '--wui-color-bg-fill' | '--wui-color-bg-surface-active' | '--wui-color-bg-surface-disabled' | '--wui-color-bg-surface-hover' | '--wui-color-bg-surface-secondary-active' | '--wui-color-bg-surface-secondary-hover' | '--wui-color-bg-surface-secondary' | '--wui-color-bg-surface-selected-active' | '--wui-color-bg-surface-selected-hover' | '--wui-color-bg-surface-selected' | '--wui-color-bg-surface-tertiary' | '--wui-color-bg-surface' | '--wui-color-bg-tooltip' | '--wui-color-border-active-selected' | '--wui-color-border-active' | '--wui-color-border-disabled' | '--wui-color-border-hover-selected' | '--wui-color-border-hover' | '--wui-color-border-secondary-active' | '--wui-color-border-secondary-hover' | '--wui-color-border-secondary' | '--wui-color-border-selected' | '--wui-color-border' | '--wui-color-drop-shadow' | '--wui-color-focus-color' | '--wui-color-focus-ring-disabled' | '--wui-color-focus-ring' | '--wui-color-icon-disabled' | '--wui-color-icon-on-fill' | '--wui-color-icon-selected' | '--wui-color-icon' | '--wui-color-invalid-indicator' | '--wui-color-notification-pill-color' | '--wui-color-segmented-control-checked-background' | '--wui-color-text-button' | '--wui-color-text-disabled' | '--wui-color-text-link' | '--wui-color-text-on-fill-white-selected' | '--wui-color-text-on-fill' | '--wui-color-text-secondary' | '--wui-color-text-selected' | '--wui-color-text';
|
|
4371
|
+
type CustomizableThemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
|
|
4372
|
+
children: ReactNode;
|
|
4373
|
+
overrides: Partial<Record<CustomizableTokens, number | string>>;
|
|
4374
|
+
};
|
|
4375
|
+
/**
|
|
4376
|
+
* Used for overriding the default theme tokens with custom values.
|
|
4377
|
+
* This should only be used when the ui systems team has been consulted first.
|
|
4378
|
+
*/
|
|
4379
|
+
declare const CustomizableThemeWrapper: {
|
|
4380
|
+
({ children, overrides, ...props }: CustomizableThemeWrapperProps): JSX.Element;
|
|
4381
|
+
displayName: string;
|
|
4382
|
+
};
|
|
4383
|
+
|
|
4384
|
+
export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, BannerImage, type BannerProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, type ColorGridOptionProps, type ColorGridProps, ColorList, ColorListGroup, type ColorListGroupProps, ColorListOption, type ColorListOptionProps, type ColorListProps, ColorPicker, ColorPickerPopoverContent, type ColorPickerPopoverContentProps, type ColorPickerProps, ColorPickerSection, type ColorPickerSectionProps, ColorPickerTrigger, type ColorPickerTriggerProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ContextMenu, type ContextMenuProps, ContrastControls, CustomizableThemeWrapper, type CustomizableThemeWrapperProps, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, DataList, DataListItem, DataListItemLabel, DataListItemValue, type DataListProps, Divider, EditableHeading, type EditableHeadingProps, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, type EditableTextProps, EditableTextRoot, type EditableTextRootProps, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, type EllipsisProps, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Grid, type GridProps, Heading, type HeadingProps, HexColorInput, type HexColorInputProps, HueSlider, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, InputPassword, type InputPasswordProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Mark, type MarkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, ModalCallout, ModalCallouts, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, SplitButton, type SplitButtonProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseActiveMqReturnType, type UseIsHoveredReturnType, type UseMqReturnType, type UseToastProps, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.18.14-beta.
|
|
3
|
+
* @license @wistia/ui v0.18.14-beta.25f44b78.4728536
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -2383,20 +2383,17 @@ var dateTime = {
|
|
|
2383
2383
|
|
|
2384
2384
|
// src/helpers/mergeRefs/mergeRefs.ts
|
|
2385
2385
|
import { isNotNil, isFunction } from "@wistia/type-guards";
|
|
2386
|
-
var mergeRefs = (
|
|
2387
|
-
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
|
|
2394
|
-
|
|
2395
|
-
|
|
2396
|
-
|
|
2397
|
-
});
|
|
2398
|
-
}
|
|
2399
|
-
);
|
|
2386
|
+
var mergeRefs = (refs) => (value) => {
|
|
2387
|
+
refs.forEach((ref) => {
|
|
2388
|
+
if (isFunction(ref)) {
|
|
2389
|
+
ref(value);
|
|
2390
|
+
return;
|
|
2391
|
+
}
|
|
2392
|
+
if (isNotNil(ref)) {
|
|
2393
|
+
ref.current = value;
|
|
2394
|
+
}
|
|
2395
|
+
});
|
|
2396
|
+
};
|
|
2400
2397
|
|
|
2401
2398
|
// src/helpers/mq/mq.ts
|
|
2402
2399
|
import { getValueAndUnit } from "polished";
|
|
@@ -2472,7 +2469,7 @@ import { useCallback as useCallback3 } from "react";
|
|
|
2472
2469
|
import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
|
|
2473
2470
|
var useTimedToggle = (initialValue) => {
|
|
2474
2471
|
const [value, setValue] = useState3(false);
|
|
2475
|
-
const timeoutRef = useRef2(
|
|
2472
|
+
const timeoutRef = useRef2();
|
|
2476
2473
|
const initialValueRef = useRef2(initialValue);
|
|
2477
2474
|
const toggleValue = (timeout) => {
|
|
2478
2475
|
clearTimeout(timeoutRef.current);
|
|
@@ -2847,8 +2844,8 @@ var isEventTargetSupported = (eventTarget) => (
|
|
|
2847
2844
|
Boolean(typeof eventTarget === "object" && eventTarget?.addEventListener)
|
|
2848
2845
|
);
|
|
2849
2846
|
var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}) => {
|
|
2850
|
-
const savedEventHandler = useRef5(
|
|
2851
|
-
const savedEventOptions = useRef5(
|
|
2847
|
+
const savedEventHandler = useRef5();
|
|
2848
|
+
const savedEventOptions = useRef5();
|
|
2852
2849
|
useEffect4(() => {
|
|
2853
2850
|
savedEventHandler.current = eventHandler;
|
|
2854
2851
|
}, [eventHandler]);
|
|
@@ -3041,7 +3038,7 @@ var useOnClickOutside = (ref, handler, eventTypes = ["mousedown", "touchend"]) =
|
|
|
3041
3038
|
// src/hooks/usePreviousValue/usePreviousValue.ts
|
|
3042
3039
|
import { useEffect as useEffect6, useRef as useRef6 } from "react";
|
|
3043
3040
|
var usePreviousValue = (value) => {
|
|
3044
|
-
const ref = useRef6(
|
|
3041
|
+
const ref = useRef6();
|
|
3045
3042
|
useEffect6(() => {
|
|
3046
3043
|
ref.current = value;
|
|
3047
3044
|
});
|
|
@@ -14751,7 +14748,6 @@ var EditableTextDisplayComponent = forwardRef21(
|
|
|
14751
14748
|
);
|
|
14752
14749
|
EditableTextDisplayComponent.displayName = "EditableTextDisplay_UI";
|
|
14753
14750
|
var EditableTextDisplay = makePolymorphic(
|
|
14754
|
-
// @ts-expect-error makePolymorphic is causing issues with types in R19
|
|
14755
14751
|
EditableTextDisplayComponent
|
|
14756
14752
|
);
|
|
14757
14753
|
|
|
@@ -18694,6 +18690,26 @@ var SplitButton = ({
|
|
|
18694
18690
|
] });
|
|
18695
18691
|
};
|
|
18696
18692
|
SplitButton.displayName = "SplitButton_UI";
|
|
18693
|
+
|
|
18694
|
+
// src/components/CustomizableThemeWrapper/CustomizableThemeWrapper.tsx
|
|
18695
|
+
import { styled as styled112 } from "styled-components";
|
|
18696
|
+
import { jsx as jsx338 } from "react/jsx-runtime";
|
|
18697
|
+
var StyledCustomizableThemeWrapper = styled112.div(
|
|
18698
|
+
(props) => props.$overrides
|
|
18699
|
+
);
|
|
18700
|
+
var CustomizableThemeWrapper = ({
|
|
18701
|
+
children,
|
|
18702
|
+
overrides,
|
|
18703
|
+
...props
|
|
18704
|
+
}) => /* @__PURE__ */ jsx338(
|
|
18705
|
+
StyledCustomizableThemeWrapper,
|
|
18706
|
+
{
|
|
18707
|
+
...props,
|
|
18708
|
+
$overrides: overrides,
|
|
18709
|
+
children
|
|
18710
|
+
}
|
|
18711
|
+
);
|
|
18712
|
+
CustomizableThemeWrapper.displayName = "CustomizableThemeWrapper_UI";
|
|
18697
18713
|
export {
|
|
18698
18714
|
ActionButton,
|
|
18699
18715
|
Avatar,
|
|
@@ -18729,6 +18745,7 @@ export {
|
|
|
18729
18745
|
ComboboxOption,
|
|
18730
18746
|
ContextMenu,
|
|
18731
18747
|
ContrastControls,
|
|
18748
|
+
CustomizableThemeWrapper,
|
|
18732
18749
|
DataCard,
|
|
18733
18750
|
DataCardHoverArrow,
|
|
18734
18751
|
DataCardTrend,
|