@wistia/ui 0.18.10-beta.6184f9f6.d0d0aad → 0.18.10-beta.621d1dd0.401dcf0
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 +30 -33
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +24 -22
- package/dist/index.d.ts +24 -22
- package/dist/index.mjs +6 -9
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.18.10-beta.
|
|
3
|
+
* @license @wistia/ui v0.18.10-beta.621d1dd0.401dcf0
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -17686,7 +17686,6 @@ var Table = ({
|
|
|
17686
17686
|
};
|
|
17687
17687
|
|
|
17688
17688
|
// src/components/Table/TableBody.tsx
|
|
17689
|
-
var import_react93 = require("react");
|
|
17690
17689
|
var import_styled_components116 = require("styled-components");
|
|
17691
17690
|
|
|
17692
17691
|
// src/components/Table/TableSectionContext.ts
|
|
@@ -17701,7 +17700,7 @@ var TableBody = ({ children, ...props }) => {
|
|
|
17701
17700
|
};
|
|
17702
17701
|
|
|
17703
17702
|
// src/components/Table/TableCell.tsx
|
|
17704
|
-
var
|
|
17703
|
+
var import_react93 = require("react");
|
|
17705
17704
|
var import_styled_components117 = require("styled-components");
|
|
17706
17705
|
var import_jsx_runtime321 = require("react/jsx-runtime");
|
|
17707
17706
|
var sharedStyles = import_styled_components117.css`
|
|
@@ -17722,7 +17721,7 @@ var StyledTd = import_styled_components117.styled.td`
|
|
|
17722
17721
|
line-height: var(--wui-typography-body-2-line-height);
|
|
17723
17722
|
`;
|
|
17724
17723
|
var TableCell = ({ children, ...props }) => {
|
|
17725
|
-
const section = (0,
|
|
17724
|
+
const section = (0, import_react93.useContext)(TableSectionContext);
|
|
17726
17725
|
if (section === "head") {
|
|
17727
17726
|
return /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(StyledTh, { ...props, children });
|
|
17728
17727
|
}
|
|
@@ -17730,7 +17729,6 @@ var TableCell = ({ children, ...props }) => {
|
|
|
17730
17729
|
};
|
|
17731
17730
|
|
|
17732
17731
|
// src/components/Table/TableFoot.tsx
|
|
17733
|
-
var import_react95 = require("react");
|
|
17734
17732
|
var import_styled_components118 = require("styled-components");
|
|
17735
17733
|
var import_jsx_runtime322 = require("react/jsx-runtime");
|
|
17736
17734
|
var StyledTableFoot = import_styled_components118.styled.tfoot``;
|
|
@@ -17739,7 +17737,6 @@ var TableFoot = ({ children, ...props }) => {
|
|
|
17739
17737
|
};
|
|
17740
17738
|
|
|
17741
17739
|
// src/components/Table/TableHead.tsx
|
|
17742
|
-
var import_react96 = require("react");
|
|
17743
17740
|
var import_styled_components119 = require("styled-components");
|
|
17744
17741
|
var import_jsx_runtime323 = require("react/jsx-runtime");
|
|
17745
17742
|
var StyledThead = import_styled_components119.styled.thead``;
|
|
@@ -17757,15 +17754,15 @@ var TableRow = ({ children, ...props }) => {
|
|
|
17757
17754
|
|
|
17758
17755
|
// src/components/Tabs/Tabs.tsx
|
|
17759
17756
|
var import_react_tabs = require("@radix-ui/react-tabs");
|
|
17760
|
-
var
|
|
17757
|
+
var import_react95 = require("react");
|
|
17761
17758
|
var import_type_guards68 = require("@wistia/type-guards");
|
|
17762
17759
|
|
|
17763
17760
|
// src/components/Tabs/useTabsValue.tsx
|
|
17764
|
-
var
|
|
17765
|
-
var TabsValueContext = (0,
|
|
17761
|
+
var import_react94 = require("react");
|
|
17762
|
+
var TabsValueContext = (0, import_react94.createContext)(null);
|
|
17766
17763
|
var TabsValueProvider = TabsValueContext.Provider;
|
|
17767
17764
|
var useTabsValue = () => {
|
|
17768
|
-
const context = (0,
|
|
17765
|
+
const context = (0, import_react94.useContext)(TabsValueContext);
|
|
17769
17766
|
if (context === null) {
|
|
17770
17767
|
throw new Error("useTabsValue must be used within a TabsValueProvider");
|
|
17771
17768
|
}
|
|
@@ -17781,8 +17778,8 @@ var Tabs = ({
|
|
|
17781
17778
|
defaultValue,
|
|
17782
17779
|
...props
|
|
17783
17780
|
}) => {
|
|
17784
|
-
const [value, setValue] = (0,
|
|
17785
|
-
const onValueChange = (0,
|
|
17781
|
+
const [value, setValue] = (0, import_react95.useState)(valueProp ?? defaultValue);
|
|
17782
|
+
const onValueChange = (0, import_react95.useCallback)(
|
|
17786
17783
|
(newValue) => {
|
|
17787
17784
|
setValue(newValue);
|
|
17788
17785
|
if (onValueChangeProp) {
|
|
@@ -17866,7 +17863,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
|
|
|
17866
17863
|
TabsList.displayName = "TabsList_UI";
|
|
17867
17864
|
|
|
17868
17865
|
// src/components/Tabs/TabsTrigger.tsx
|
|
17869
|
-
var
|
|
17866
|
+
var import_react96 = require("react");
|
|
17870
17867
|
var import_type_guards70 = require("@wistia/type-guards");
|
|
17871
17868
|
|
|
17872
17869
|
// src/components/Tabs/StyledRadixTabsTrigger.tsx
|
|
@@ -17882,13 +17879,13 @@ var StyledRadixTabsTrigger = (0, import_styled_components123.styled)(import_reac
|
|
|
17882
17879
|
|
|
17883
17880
|
// src/components/Tabs/TabsTrigger.tsx
|
|
17884
17881
|
var import_jsx_runtime329 = require("react/jsx-runtime");
|
|
17885
|
-
var TabsTrigger = (0,
|
|
17882
|
+
var TabsTrigger = (0, import_react96.forwardRef)(
|
|
17886
17883
|
({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
|
|
17887
17884
|
const selectedValue = useTabsValue();
|
|
17888
17885
|
const { setSelectedItemMeasurements } = useSelectedItemStyle();
|
|
17889
|
-
const buttonRef = (0,
|
|
17886
|
+
const buttonRef = (0, import_react96.useRef)(null);
|
|
17890
17887
|
const combinedRef = mergeRefs([buttonRef, forwardedRef]);
|
|
17891
|
-
(0,
|
|
17888
|
+
(0, import_react96.useEffect)(() => {
|
|
17892
17889
|
const buttonElem = buttonRef.current;
|
|
17893
17890
|
if (!buttonElem) {
|
|
17894
17891
|
return void 0;
|
|
@@ -17970,7 +17967,7 @@ var ThumbnailBadge = ({ icon, label, ...props }) => {
|
|
|
17970
17967
|
ThumbnailBadge.displayName = "ThumbnailBadge_UI";
|
|
17971
17968
|
|
|
17972
17969
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
17973
|
-
var
|
|
17970
|
+
var import_react97 = require("react");
|
|
17974
17971
|
var import_styled_components127 = require("styled-components");
|
|
17975
17972
|
var import_type_guards74 = require("@wistia/type-guards");
|
|
17976
17973
|
|
|
@@ -18352,7 +18349,7 @@ var getRelativeMousePosition = (elem, mouseEvent) => {
|
|
|
18352
18349
|
var hasValidThumbnailUrl = (thumbnailUrl) => {
|
|
18353
18350
|
return (0, import_type_guards74.isNotNil)(thumbnailUrl) && (0, import_type_guards74.isNonEmptyString)(thumbnailUrl);
|
|
18354
18351
|
};
|
|
18355
|
-
var Thumbnail = (0,
|
|
18352
|
+
var Thumbnail = (0, import_react97.forwardRef)(
|
|
18356
18353
|
({
|
|
18357
18354
|
gradientBackground = "defaultMidOne",
|
|
18358
18355
|
thumbnailImageType = "wide",
|
|
@@ -18364,17 +18361,17 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18364
18361
|
aspectRatio = "wide",
|
|
18365
18362
|
...props
|
|
18366
18363
|
}, ref) => {
|
|
18367
|
-
const [percent, setPercent] = (0,
|
|
18368
|
-
const [isMouseOver, setIsMouseOver] = (0,
|
|
18369
|
-
const [isStoryboardReady, setIsStoryboardReady] = (0,
|
|
18370
|
-
const storyboardElementRef = (0,
|
|
18371
|
-
const [cursorPosition, setCursorPosition] = (0,
|
|
18372
|
-
const backgroundUrl = (0,
|
|
18364
|
+
const [percent, setPercent] = (0, import_react97.useState)(0);
|
|
18365
|
+
const [isMouseOver, setIsMouseOver] = (0, import_react97.useState)(false);
|
|
18366
|
+
const [isStoryboardReady, setIsStoryboardReady] = (0, import_react97.useState)(false);
|
|
18367
|
+
const storyboardElementRef = (0, import_react97.useRef)(null);
|
|
18368
|
+
const [cursorPosition, setCursorPosition] = (0, import_react97.useState)(null);
|
|
18369
|
+
const backgroundUrl = (0, import_react97.useMemo)(
|
|
18373
18370
|
() => thumbnailImageType === "square" && hasValidThumbnailUrl(thumbnailUrl) ? thumbnailUrl : void 0,
|
|
18374
18371
|
[thumbnailImageType, thumbnailUrl]
|
|
18375
18372
|
);
|
|
18376
18373
|
const isScrubbable = (0, import_type_guards74.isNotNil)(storyboard);
|
|
18377
|
-
const trackStoryboardLoadStatus = (0,
|
|
18374
|
+
const trackStoryboardLoadStatus = (0, import_react97.useCallback)(() => {
|
|
18378
18375
|
if (storyboardElementRef.current || !storyboard) {
|
|
18379
18376
|
return storyboardElementRef.current;
|
|
18380
18377
|
}
|
|
@@ -18384,7 +18381,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18384
18381
|
storyboardElementRef.current = asset;
|
|
18385
18382
|
return storyboardElementRef.current;
|
|
18386
18383
|
}, [storyboard]);
|
|
18387
|
-
const handleMouseMove = (0,
|
|
18384
|
+
const handleMouseMove = (0, import_react97.useCallback)(
|
|
18388
18385
|
(mouseEvent) => {
|
|
18389
18386
|
if (!isScrubbable) return;
|
|
18390
18387
|
const elem = mouseEvent.currentTarget;
|
|
@@ -18397,12 +18394,12 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18397
18394
|
},
|
|
18398
18395
|
[isScrubbable, trackStoryboardLoadStatus]
|
|
18399
18396
|
);
|
|
18400
|
-
const handleMouseOut = (0,
|
|
18397
|
+
const handleMouseOut = (0, import_react97.useCallback)(() => {
|
|
18401
18398
|
if (!isScrubbable) return;
|
|
18402
18399
|
setIsMouseOver(false);
|
|
18403
18400
|
setCursorPosition(null);
|
|
18404
18401
|
}, [isScrubbable]);
|
|
18405
|
-
const shouldRenderStoryboard = (0,
|
|
18402
|
+
const shouldRenderStoryboard = (0, import_react97.useMemo)(() => {
|
|
18406
18403
|
if ((0, import_type_guards74.isNil)(storyboard) || (0, import_type_guards74.isUndefined)(height) || (0, import_type_guards74.isEmptyString)(height)) {
|
|
18407
18404
|
return false;
|
|
18408
18405
|
}
|
|
@@ -18464,7 +18461,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18464
18461
|
Thumbnail.displayName = "Thumbnail_UI";
|
|
18465
18462
|
|
|
18466
18463
|
// src/components/ThumbnailCollage/ThumbnailCollage.tsx
|
|
18467
|
-
var
|
|
18464
|
+
var import_react98 = require("react");
|
|
18468
18465
|
var import_styled_components128 = require("styled-components");
|
|
18469
18466
|
var import_type_guards75 = require("@wistia/type-guards");
|
|
18470
18467
|
var import_jsx_runtime333 = (
|
|
@@ -18526,10 +18523,10 @@ var ThumbnailCollage = ({
|
|
|
18526
18523
|
gradientBackground = "defaultMidOne",
|
|
18527
18524
|
...props
|
|
18528
18525
|
}) => {
|
|
18529
|
-
const thumbnailArray =
|
|
18526
|
+
const thumbnailArray = import_react98.Children.toArray(children);
|
|
18530
18527
|
const truncatedThumbnails = thumbnailArray.slice(0, 3);
|
|
18531
18528
|
const thumbnails = (0, import_type_guards75.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
|
|
18532
|
-
return
|
|
18529
|
+
return (0, import_react98.cloneElement)(child, {
|
|
18533
18530
|
...child.props,
|
|
18534
18531
|
children: void 0
|
|
18535
18532
|
});
|
|
@@ -18682,7 +18679,7 @@ WistiaLogo.displayName = "WistiaLogo_UI";
|
|
|
18682
18679
|
// src/components/SplitButton/SplitButton.tsx
|
|
18683
18680
|
var import_styled_components130 = require("styled-components");
|
|
18684
18681
|
var import_type_guards77 = require("@wistia/type-guards");
|
|
18685
|
-
var
|
|
18682
|
+
var import_react99 = require("react");
|
|
18686
18683
|
var import_jsx_runtime335 = require("react/jsx-runtime");
|
|
18687
18684
|
var StyledSplitButton = import_styled_components130.styled.span`
|
|
18688
18685
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
@@ -18747,7 +18744,7 @@ var SplitButton = ({
|
|
|
18747
18744
|
children: menuItems
|
|
18748
18745
|
}
|
|
18749
18746
|
),
|
|
18750
|
-
(0, import_type_guards77.isNotNil)(secondaryAction) && (0,
|
|
18747
|
+
(0, import_type_guards77.isNotNil)(secondaryAction) && (0, import_react99.cloneElement)(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
|
|
18751
18748
|
] });
|
|
18752
18749
|
};
|
|
18753
18750
|
SplitButton.displayName = "SplitButton_UI";
|