@wistia/ui 0.18.3-beta.5cd29926.116130d → 0.18.3-beta.e98f53f4.66dc5b8
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 +29 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +16 -3
- package/dist/index.d.ts +16 -3
- package/dist/index.mjs +29 -18
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -4138,7 +4138,7 @@ type ThumbnailProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
|
|
|
4138
4138
|
/**
|
|
4139
4139
|
* The URL of the thumbnail image to display
|
|
4140
4140
|
*/
|
|
4141
|
-
thumbnailUrl: string | null
|
|
4141
|
+
thumbnailUrl: string | null;
|
|
4142
4142
|
/**
|
|
4143
4143
|
* Children to render inside the thumbnail; must be a `ThumbnailBadge` component
|
|
4144
4144
|
*/
|
|
@@ -4178,7 +4178,7 @@ declare const Thumbnail: react.ForwardRefExoticComponent<Omit<Omit<react.Detaile
|
|
|
4178
4178
|
/**
|
|
4179
4179
|
* The URL of the thumbnail image to display
|
|
4180
4180
|
*/
|
|
4181
|
-
thumbnailUrl: string | null
|
|
4181
|
+
thumbnailUrl: string | null;
|
|
4182
4182
|
/**
|
|
4183
4183
|
* Children to render inside the thumbnail; must be a `ThumbnailBadge` component
|
|
4184
4184
|
*/
|
|
@@ -4357,4 +4357,17 @@ declare const SplitButton: {
|
|
|
4357
4357
|
displayName: string;
|
|
4358
4358
|
};
|
|
4359
4359
|
|
|
4360
|
-
|
|
4360
|
+
type CustomizableTokens = '--wui-color-backdrop' | '--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';
|
|
4361
|
+
type CustomizableThemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
|
|
4362
|
+
children: ReactNode;
|
|
4363
|
+
overrides: Partial<Record<CustomizableTokens, number | string>>;
|
|
4364
|
+
};
|
|
4365
|
+
/**
|
|
4366
|
+
* Component description goes here
|
|
4367
|
+
*/
|
|
4368
|
+
declare const CustomizableThemeWrapper: {
|
|
4369
|
+
({ children, overrides, ...props }: CustomizableThemeWrapperProps): JSX.Element;
|
|
4370
|
+
displayName: string;
|
|
4371
|
+
};
|
|
4372
|
+
|
|
4373
|
+
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 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
|
@@ -4138,7 +4138,7 @@ type ThumbnailProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
|
|
|
4138
4138
|
/**
|
|
4139
4139
|
* The URL of the thumbnail image to display
|
|
4140
4140
|
*/
|
|
4141
|
-
thumbnailUrl: string | null
|
|
4141
|
+
thumbnailUrl: string | null;
|
|
4142
4142
|
/**
|
|
4143
4143
|
* Children to render inside the thumbnail; must be a `ThumbnailBadge` component
|
|
4144
4144
|
*/
|
|
@@ -4178,7 +4178,7 @@ declare const Thumbnail: react.ForwardRefExoticComponent<Omit<Omit<react.Detaile
|
|
|
4178
4178
|
/**
|
|
4179
4179
|
* The URL of the thumbnail image to display
|
|
4180
4180
|
*/
|
|
4181
|
-
thumbnailUrl: string | null
|
|
4181
|
+
thumbnailUrl: string | null;
|
|
4182
4182
|
/**
|
|
4183
4183
|
* Children to render inside the thumbnail; must be a `ThumbnailBadge` component
|
|
4184
4184
|
*/
|
|
@@ -4357,4 +4357,17 @@ declare const SplitButton: {
|
|
|
4357
4357
|
displayName: string;
|
|
4358
4358
|
};
|
|
4359
4359
|
|
|
4360
|
-
|
|
4360
|
+
type CustomizableTokens = '--wui-color-backdrop' | '--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';
|
|
4361
|
+
type CustomizableThemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
|
|
4362
|
+
children: ReactNode;
|
|
4363
|
+
overrides: Partial<Record<CustomizableTokens, number | string>>;
|
|
4364
|
+
};
|
|
4365
|
+
/**
|
|
4366
|
+
* Component description goes here
|
|
4367
|
+
*/
|
|
4368
|
+
declare const CustomizableThemeWrapper: {
|
|
4369
|
+
({ children, overrides, ...props }: CustomizableThemeWrapperProps): JSX.Element;
|
|
4370
|
+
displayName: string;
|
|
4371
|
+
};
|
|
4372
|
+
|
|
4373
|
+
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 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.3-beta.
|
|
3
|
+
* @license @wistia/ui v0.18.3-beta.e98f53f4.66dc5b8
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -6690,13 +6690,13 @@ var SpeedIcon = (props) => /* @__PURE__ */ jsx168(
|
|
|
6690
6690
|
|
|
6691
6691
|
// src/components/Icon/icons/SpinnerIcon.tsx
|
|
6692
6692
|
import { jsx as jsx169, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
6693
|
-
var SpinnerIcon = (props) => /* @__PURE__ */
|
|
6693
|
+
var SpinnerIcon = (props) => /* @__PURE__ */ jsx169(
|
|
6694
6694
|
"svg",
|
|
6695
6695
|
{
|
|
6696
6696
|
...props,
|
|
6697
6697
|
viewBox: "0 0 24 24",
|
|
6698
6698
|
xmlns: "http://www.w3.org/2000/svg",
|
|
6699
|
-
children: [
|
|
6699
|
+
children: /* @__PURE__ */ jsxs7("g", { children: [
|
|
6700
6700
|
/* @__PURE__ */ jsx169(
|
|
6701
6701
|
"path",
|
|
6702
6702
|
{
|
|
@@ -6714,10 +6714,10 @@ var SpinnerIcon = (props) => /* @__PURE__ */ jsxs7(
|
|
|
6714
6714
|
keyTimes: "0;1",
|
|
6715
6715
|
repeatCount: "indefinite",
|
|
6716
6716
|
type: "rotate",
|
|
6717
|
-
values: "0
|
|
6717
|
+
values: "0 12 12;360 12 12"
|
|
6718
6718
|
}
|
|
6719
6719
|
)
|
|
6720
|
-
]
|
|
6720
|
+
] })
|
|
6721
6721
|
}
|
|
6722
6722
|
);
|
|
6723
6723
|
|
|
@@ -17699,14 +17699,7 @@ ThumbnailBadge.displayName = "ThumbnailBadge_UI";
|
|
|
17699
17699
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
17700
17700
|
import { forwardRef as forwardRef37, useState as useState26, useRef as useRef24, useCallback as useCallback20, useMemo as useMemo17 } from "react";
|
|
17701
17701
|
import { styled as styled107 } from "styled-components";
|
|
17702
|
-
import {
|
|
17703
|
-
isNil as isNil19,
|
|
17704
|
-
isNotNil as isNotNil43,
|
|
17705
|
-
isUndefined as isUndefined7,
|
|
17706
|
-
isEmptyString as isEmptyString2,
|
|
17707
|
-
isString as isString4,
|
|
17708
|
-
isNonEmptyString as isNonEmptyString10
|
|
17709
|
-
} from "@wistia/type-guards";
|
|
17702
|
+
import { isNil as isNil19, isNotNil as isNotNil43, isUndefined as isUndefined7, isEmptyString as isEmptyString2, isString as isString4 } from "@wistia/type-guards";
|
|
17710
17703
|
|
|
17711
17704
|
// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
|
|
17712
17705
|
import { isNotNil as isNotNil41 } from "@wistia/type-guards";
|
|
@@ -18079,9 +18072,6 @@ var getRelativeMousePosition = (elem, mouseEvent) => {
|
|
|
18079
18072
|
left: relativeLeft
|
|
18080
18073
|
};
|
|
18081
18074
|
};
|
|
18082
|
-
var hasValidThumbnailUrl = (thumbnailUrl) => {
|
|
18083
|
-
return isNotNil43(thumbnailUrl) && isNonEmptyString10(thumbnailUrl);
|
|
18084
|
-
};
|
|
18085
18075
|
var Thumbnail = forwardRef37(
|
|
18086
18076
|
({
|
|
18087
18077
|
gradientBackground = "defaultMidOne",
|
|
@@ -18100,7 +18090,7 @@ var Thumbnail = forwardRef37(
|
|
|
18100
18090
|
const storyboardElementRef = useRef24(null);
|
|
18101
18091
|
const [cursorPosition, setCursorPosition] = useState26(null);
|
|
18102
18092
|
const backgroundUrl = useMemo17(
|
|
18103
|
-
() => thumbnailImageType === "square" &&
|
|
18093
|
+
() => thumbnailImageType === "square" && isNotNil43(thumbnailUrl) ? thumbnailUrl : void 0,
|
|
18104
18094
|
[thumbnailImageType, thumbnailUrl]
|
|
18105
18095
|
);
|
|
18106
18096
|
const isScrubbable = isNotNil43(storyboard);
|
|
@@ -18151,7 +18141,7 @@ var Thumbnail = forwardRef37(
|
|
|
18151
18141
|
width
|
|
18152
18142
|
}
|
|
18153
18143
|
);
|
|
18154
|
-
} else if (
|
|
18144
|
+
} else if (isNotNil43(thumbnailUrl)) {
|
|
18155
18145
|
thumbnailContent = /* @__PURE__ */ jsx326(
|
|
18156
18146
|
ThumbnailImage,
|
|
18157
18147
|
{
|
|
@@ -18479,6 +18469,26 @@ var SplitButton = ({
|
|
|
18479
18469
|
] });
|
|
18480
18470
|
};
|
|
18481
18471
|
SplitButton.displayName = "SplitButton_UI";
|
|
18472
|
+
|
|
18473
|
+
// src/components/CustomizableThemeWrapper/CustomizableThemeWrapper.tsx
|
|
18474
|
+
import { styled as styled111 } from "styled-components";
|
|
18475
|
+
import { jsx as jsx330 } from "react/jsx-runtime";
|
|
18476
|
+
var StyledCustomizableThemeWrapper = styled111.div(
|
|
18477
|
+
(props) => props.$overrides
|
|
18478
|
+
);
|
|
18479
|
+
var CustomizableThemeWrapper = ({
|
|
18480
|
+
children,
|
|
18481
|
+
overrides,
|
|
18482
|
+
...props
|
|
18483
|
+
}) => /* @__PURE__ */ jsx330(
|
|
18484
|
+
StyledCustomizableThemeWrapper,
|
|
18485
|
+
{
|
|
18486
|
+
...props,
|
|
18487
|
+
$overrides: overrides,
|
|
18488
|
+
children
|
|
18489
|
+
}
|
|
18490
|
+
);
|
|
18491
|
+
CustomizableThemeWrapper.displayName = "CustomizableThemeWrapper_UI";
|
|
18482
18492
|
export {
|
|
18483
18493
|
ActionButton,
|
|
18484
18494
|
Avatar,
|
|
@@ -18514,6 +18524,7 @@ export {
|
|
|
18514
18524
|
ComboboxOption,
|
|
18515
18525
|
ContextMenu,
|
|
18516
18526
|
ContrastControls,
|
|
18527
|
+
CustomizableThemeWrapper,
|
|
18517
18528
|
DataCard,
|
|
18518
18529
|
DataCardHoverArrow,
|
|
18519
18530
|
DataCardTrend,
|