@wistia/ui 0.14.8 → 0.14.9-beta.228fbd19.a9151aa
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 +108 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +57 -1
- package/dist/index.d.ts +57 -1
- package/dist/index.mjs +104 -6
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -3918,4 +3918,60 @@ type ContextMenuProps = {
|
|
|
3918
3918
|
*/
|
|
3919
3919
|
declare const ContextMenu: ({ position, triggerRef, children, onRequestClose, }: ContextMenuProps) => react_jsx_runtime.JSX.Element | null;
|
|
3920
3920
|
|
|
3921
|
-
|
|
3921
|
+
type DataListProps = ComponentPropsWithoutRef<'dl'> & {
|
|
3922
|
+
/**
|
|
3923
|
+
* Should only contain `DataListItem` components.
|
|
3924
|
+
*/
|
|
3925
|
+
children: ReactNode;
|
|
3926
|
+
/**
|
|
3927
|
+
* Maximum width for the label.
|
|
3928
|
+
*/
|
|
3929
|
+
labelMaxWith?: string;
|
|
3930
|
+
/**
|
|
3931
|
+
* Prominence of the label text. Default is `primary`.
|
|
3932
|
+
*/
|
|
3933
|
+
labelProminence?: 'primary' | 'secondary';
|
|
3934
|
+
/**
|
|
3935
|
+
* Alignment of the value text. Default is `start`.
|
|
3936
|
+
*/
|
|
3937
|
+
valueAlignment?: 'end' | 'start';
|
|
3938
|
+
};
|
|
3939
|
+
/**
|
|
3940
|
+
* The DataList component is used to display a list of items with labels and values.
|
|
3941
|
+
*/
|
|
3942
|
+
declare const DataList: {
|
|
3943
|
+
({ children, valueAlignment, labelMaxWith, labelProminence, ...props }: DataListProps): JSX.Element;
|
|
3944
|
+
displayName: string;
|
|
3945
|
+
};
|
|
3946
|
+
|
|
3947
|
+
type DataListItemProps = Omit<ComponentPropsWithoutRef<'dl'>, 'childern'> & {
|
|
3948
|
+
/**
|
|
3949
|
+
* Should only contain `DataListItemItem` components.
|
|
3950
|
+
*/
|
|
3951
|
+
children: ReactNode;
|
|
3952
|
+
};
|
|
3953
|
+
/**
|
|
3954
|
+
* An item within a `DataList`. It should only contain `DataListItemLabel` and `DataListItemValue` components.
|
|
3955
|
+
*/
|
|
3956
|
+
declare const DataListItem: {
|
|
3957
|
+
({ children }: DataListItemProps): ReactNode;
|
|
3958
|
+
displayName: string;
|
|
3959
|
+
};
|
|
3960
|
+
|
|
3961
|
+
/**
|
|
3962
|
+
* The label of the `DataListItem`. Extends the [Text]() component.
|
|
3963
|
+
*/
|
|
3964
|
+
declare const DataListItemLabel: {
|
|
3965
|
+
(props: TextProps): JSX.Element;
|
|
3966
|
+
displayName: string;
|
|
3967
|
+
};
|
|
3968
|
+
|
|
3969
|
+
/**
|
|
3970
|
+
* The value of the `DataListItem`. Extends the [Text]() component.
|
|
3971
|
+
*/
|
|
3972
|
+
declare const DataListItemValue: {
|
|
3973
|
+
(props: TextProps): JSX.Element;
|
|
3974
|
+
displayName: string;
|
|
3975
|
+
};
|
|
3976
|
+
|
|
3977
|
+
export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, 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, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, DataList, DataListItem, DataListItemLabel, DataListItemValue, type DataListProps, Divider, EditableHeading, type EditableHeadingProps, 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, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, 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
|
@@ -3918,4 +3918,60 @@ type ContextMenuProps = {
|
|
|
3918
3918
|
*/
|
|
3919
3919
|
declare const ContextMenu: ({ position, triggerRef, children, onRequestClose, }: ContextMenuProps) => react_jsx_runtime.JSX.Element | null;
|
|
3920
3920
|
|
|
3921
|
-
|
|
3921
|
+
type DataListProps = ComponentPropsWithoutRef<'dl'> & {
|
|
3922
|
+
/**
|
|
3923
|
+
* Should only contain `DataListItem` components.
|
|
3924
|
+
*/
|
|
3925
|
+
children: ReactNode;
|
|
3926
|
+
/**
|
|
3927
|
+
* Maximum width for the label.
|
|
3928
|
+
*/
|
|
3929
|
+
labelMaxWith?: string;
|
|
3930
|
+
/**
|
|
3931
|
+
* Prominence of the label text. Default is `primary`.
|
|
3932
|
+
*/
|
|
3933
|
+
labelProminence?: 'primary' | 'secondary';
|
|
3934
|
+
/**
|
|
3935
|
+
* Alignment of the value text. Default is `start`.
|
|
3936
|
+
*/
|
|
3937
|
+
valueAlignment?: 'end' | 'start';
|
|
3938
|
+
};
|
|
3939
|
+
/**
|
|
3940
|
+
* The DataList component is used to display a list of items with labels and values.
|
|
3941
|
+
*/
|
|
3942
|
+
declare const DataList: {
|
|
3943
|
+
({ children, valueAlignment, labelMaxWith, labelProminence, ...props }: DataListProps): JSX.Element;
|
|
3944
|
+
displayName: string;
|
|
3945
|
+
};
|
|
3946
|
+
|
|
3947
|
+
type DataListItemProps = Omit<ComponentPropsWithoutRef<'dl'>, 'childern'> & {
|
|
3948
|
+
/**
|
|
3949
|
+
* Should only contain `DataListItemItem` components.
|
|
3950
|
+
*/
|
|
3951
|
+
children: ReactNode;
|
|
3952
|
+
};
|
|
3953
|
+
/**
|
|
3954
|
+
* An item within a `DataList`. It should only contain `DataListItemLabel` and `DataListItemValue` components.
|
|
3955
|
+
*/
|
|
3956
|
+
declare const DataListItem: {
|
|
3957
|
+
({ children }: DataListItemProps): ReactNode;
|
|
3958
|
+
displayName: string;
|
|
3959
|
+
};
|
|
3960
|
+
|
|
3961
|
+
/**
|
|
3962
|
+
* The label of the `DataListItem`. Extends the [Text]() component.
|
|
3963
|
+
*/
|
|
3964
|
+
declare const DataListItemLabel: {
|
|
3965
|
+
(props: TextProps): JSX.Element;
|
|
3966
|
+
displayName: string;
|
|
3967
|
+
};
|
|
3968
|
+
|
|
3969
|
+
/**
|
|
3970
|
+
* The value of the `DataListItem`. Extends the [Text]() component.
|
|
3971
|
+
*/
|
|
3972
|
+
declare const DataListItemValue: {
|
|
3973
|
+
(props: TextProps): JSX.Element;
|
|
3974
|
+
displayName: string;
|
|
3975
|
+
};
|
|
3976
|
+
|
|
3977
|
+
export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, 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, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, DataList, DataListItem, DataListItemLabel, DataListItemValue, type DataListProps, Divider, EditableHeading, type EditableHeadingProps, 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, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, 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.14.
|
|
3
|
+
* @license @wistia/ui v0.14.9-beta.228fbd19.a9151aa
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -14154,6 +14154,13 @@ var Header = styled69.header`
|
|
|
14154
14154
|
/* DialogTitle creates an h2 element which inherits some margin */
|
|
14155
14155
|
h2 {
|
|
14156
14156
|
margin: 0 0 var(--wui-space-03);
|
|
14157
|
+
padding-right: ${({ $hideCloseButon }) => $hideCloseButon ? "0" : "var(--wui-space-03)"};
|
|
14158
|
+
}
|
|
14159
|
+
|
|
14160
|
+
button {
|
|
14161
|
+
position: absolute;
|
|
14162
|
+
right: var(--wui-space-03);
|
|
14163
|
+
top: var(--wui-space-03);
|
|
14157
14164
|
}
|
|
14158
14165
|
`;
|
|
14159
14166
|
var Title = styled69(DialogTitle)`
|
|
@@ -14168,10 +14175,17 @@ var ModalHeader = ({
|
|
|
14168
14175
|
hideCloseButton
|
|
14169
14176
|
}) => {
|
|
14170
14177
|
const TitleComponent = hideTitle ? /* @__PURE__ */ jsx280(ScreenReaderOnly, { children: /* @__PURE__ */ jsx280(Title, { children: title }) }) : /* @__PURE__ */ jsx280(Title, { children: title });
|
|
14171
|
-
return /* @__PURE__ */ jsxs47(
|
|
14172
|
-
|
|
14173
|
-
|
|
14174
|
-
|
|
14178
|
+
return /* @__PURE__ */ jsxs47(
|
|
14179
|
+
Header,
|
|
14180
|
+
{
|
|
14181
|
+
$hideCloseButon: hideCloseButton,
|
|
14182
|
+
$hideTitle: hideTitle,
|
|
14183
|
+
children: [
|
|
14184
|
+
TitleComponent,
|
|
14185
|
+
hideCloseButton ? null : /* @__PURE__ */ jsx280(ModalCloseButton, {})
|
|
14186
|
+
]
|
|
14187
|
+
}
|
|
14188
|
+
);
|
|
14175
14189
|
};
|
|
14176
14190
|
|
|
14177
14191
|
// src/components/Modal/ModalContent.tsx
|
|
@@ -14425,7 +14439,7 @@ var Modal = forwardRef24(
|
|
|
14425
14439
|
...props,
|
|
14426
14440
|
children: [
|
|
14427
14441
|
/* @__PURE__ */ jsx282(ModalBody, { children }),
|
|
14428
|
-
/* @__PURE__ */ jsx282(
|
|
14442
|
+
hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx282(
|
|
14429
14443
|
ModalHeader,
|
|
14430
14444
|
{
|
|
14431
14445
|
hideCloseButton,
|
|
@@ -16885,6 +16899,86 @@ var ContextMenu = ({
|
|
|
16885
16899
|
}
|
|
16886
16900
|
) : null;
|
|
16887
16901
|
};
|
|
16902
|
+
|
|
16903
|
+
// src/components/DataList/DataList.tsx
|
|
16904
|
+
import styled102 from "styled-components";
|
|
16905
|
+
import { jsx as jsx315 } from "react/jsx-runtime";
|
|
16906
|
+
var StyledDataList = styled102.dl`
|
|
16907
|
+
display: grid;
|
|
16908
|
+
grid-template-columns: auto 1fr;
|
|
16909
|
+
column-gap: var(--wui-space-02);
|
|
16910
|
+
row-gap: var(--wui-space-04);
|
|
16911
|
+
align-items: baseline;
|
|
16912
|
+
align-content: start;
|
|
16913
|
+
|
|
16914
|
+
dt {
|
|
16915
|
+
margin: 0;
|
|
16916
|
+
padding: 0;
|
|
16917
|
+
font-weight: var(--wui-datalist-label-prominence);
|
|
16918
|
+
width: var(--wui-datalist-label-max-width, auto);
|
|
16919
|
+
}
|
|
16920
|
+
|
|
16921
|
+
dd {
|
|
16922
|
+
margin: 0;
|
|
16923
|
+
padding: 0;
|
|
16924
|
+
text-align: var(--wui-datalist-value-alignment, start);
|
|
16925
|
+
}
|
|
16926
|
+
`;
|
|
16927
|
+
var DataList = ({
|
|
16928
|
+
children,
|
|
16929
|
+
valueAlignment = "start",
|
|
16930
|
+
labelMaxWith = "auto",
|
|
16931
|
+
labelProminence = "primary",
|
|
16932
|
+
...props
|
|
16933
|
+
}) => {
|
|
16934
|
+
return /* @__PURE__ */ jsx315(
|
|
16935
|
+
StyledDataList,
|
|
16936
|
+
{
|
|
16937
|
+
style: {
|
|
16938
|
+
"--wui-datalist-label-max-width": labelMaxWith,
|
|
16939
|
+
"--wui-datalist-value-alignment": valueAlignment === "end" ? "right" : "left",
|
|
16940
|
+
"--wui-datalist-label-prominence": labelProminence === "secondary" ? "var(--wui-typography-weight-label)" : "var(--wui-typography-weight-label-bold)"
|
|
16941
|
+
},
|
|
16942
|
+
...props,
|
|
16943
|
+
children
|
|
16944
|
+
}
|
|
16945
|
+
);
|
|
16946
|
+
};
|
|
16947
|
+
DataList.displayName = "DataList_UI";
|
|
16948
|
+
|
|
16949
|
+
// src/components/DataList/DataListItem.tsx
|
|
16950
|
+
var DataListItem = ({ children }) => {
|
|
16951
|
+
return children;
|
|
16952
|
+
};
|
|
16953
|
+
DataListItem.displayName = "DataListItem_UI";
|
|
16954
|
+
|
|
16955
|
+
// src/components/DataList/DataListItemLabel.tsx
|
|
16956
|
+
import { jsx as jsx316 } from "react/jsx-runtime";
|
|
16957
|
+
var DataListItemLabel = (props) => {
|
|
16958
|
+
return /* @__PURE__ */ jsx316(
|
|
16959
|
+
Text,
|
|
16960
|
+
{
|
|
16961
|
+
variant: "label4",
|
|
16962
|
+
...props,
|
|
16963
|
+
renderAs: "dt"
|
|
16964
|
+
}
|
|
16965
|
+
);
|
|
16966
|
+
};
|
|
16967
|
+
DataListItemLabel.displayName = "DataListItemLabel_UI";
|
|
16968
|
+
|
|
16969
|
+
// src/components/DataList/DataListItemValue.tsx
|
|
16970
|
+
import { jsx as jsx317 } from "react/jsx-runtime";
|
|
16971
|
+
var DataListItemValue = (props) => {
|
|
16972
|
+
return /* @__PURE__ */ jsx317(
|
|
16973
|
+
Text,
|
|
16974
|
+
{
|
|
16975
|
+
variant: "body3",
|
|
16976
|
+
...props,
|
|
16977
|
+
renderAs: "dd"
|
|
16978
|
+
}
|
|
16979
|
+
);
|
|
16980
|
+
};
|
|
16981
|
+
DataListItemValue.displayName = "DataListItemValue_UI";
|
|
16888
16982
|
export {
|
|
16889
16983
|
ActionButton,
|
|
16890
16984
|
Avatar,
|
|
@@ -16923,6 +17017,10 @@ export {
|
|
|
16923
17017
|
DataCardHoverArrow,
|
|
16924
17018
|
DataCardTrend,
|
|
16925
17019
|
DataCards,
|
|
17020
|
+
DataList,
|
|
17021
|
+
DataListItem,
|
|
17022
|
+
DataListItemLabel,
|
|
17023
|
+
DataListItemValue,
|
|
16926
17024
|
Divider,
|
|
16927
17025
|
EditableHeading,
|
|
16928
17026
|
Ellipsis,
|