@wistia/ui 0.18.10 → 0.18.11
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 +35 -53
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +15 -15
- package/dist/index.d.ts +15 -15
- package/dist/index.mjs +11 -29
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.18.
|
|
3
|
+
* @license @wistia/ui v0.18.11
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -2988,26 +2988,11 @@ var useForceUpdate = () => {
|
|
|
2988
2988
|
var import_react11 = require("react");
|
|
2989
2989
|
var useIsHovered = () => {
|
|
2990
2990
|
const [isHovered, setIsHovered] = (0, import_react11.useState)(false);
|
|
2991
|
-
const onFocus = (
|
|
2992
|
-
|
|
2993
|
-
|
|
2994
|
-
|
|
2995
|
-
const
|
|
2996
|
-
if (event.target !== event.currentTarget) return;
|
|
2997
|
-
setIsHovered(true);
|
|
2998
|
-
};
|
|
2999
|
-
const onMouseMove = (event) => {
|
|
3000
|
-
if (event.target !== event.currentTarget) return;
|
|
3001
|
-
setIsHovered(true);
|
|
3002
|
-
};
|
|
3003
|
-
const onBlur = (event) => {
|
|
3004
|
-
if (event.target !== event.currentTarget) return;
|
|
3005
|
-
setIsHovered(false);
|
|
3006
|
-
};
|
|
3007
|
-
const onMouseLeave = (event) => {
|
|
3008
|
-
if (event.target !== event.currentTarget) return;
|
|
3009
|
-
setIsHovered(false);
|
|
3010
|
-
};
|
|
2991
|
+
const onFocus = () => setIsHovered(true);
|
|
2992
|
+
const onMouseEnter = () => setIsHovered(true);
|
|
2993
|
+
const onMouseMove = () => setIsHovered(true);
|
|
2994
|
+
const onBlur = () => setIsHovered(false);
|
|
2995
|
+
const onMouseLeave = () => setIsHovered(false);
|
|
3011
2996
|
const hoverProps = {
|
|
3012
2997
|
onFocus,
|
|
3013
2998
|
onMouseEnter,
|
|
@@ -17686,7 +17671,6 @@ var Table = ({
|
|
|
17686
17671
|
};
|
|
17687
17672
|
|
|
17688
17673
|
// src/components/Table/TableBody.tsx
|
|
17689
|
-
var import_react93 = require("react");
|
|
17690
17674
|
var import_styled_components116 = require("styled-components");
|
|
17691
17675
|
|
|
17692
17676
|
// src/components/Table/TableSectionContext.ts
|
|
@@ -17701,7 +17685,7 @@ var TableBody = ({ children, ...props }) => {
|
|
|
17701
17685
|
};
|
|
17702
17686
|
|
|
17703
17687
|
// src/components/Table/TableCell.tsx
|
|
17704
|
-
var
|
|
17688
|
+
var import_react93 = require("react");
|
|
17705
17689
|
var import_styled_components117 = require("styled-components");
|
|
17706
17690
|
var import_jsx_runtime321 = require("react/jsx-runtime");
|
|
17707
17691
|
var sharedStyles = import_styled_components117.css`
|
|
@@ -17722,7 +17706,7 @@ var StyledTd = import_styled_components117.styled.td`
|
|
|
17722
17706
|
line-height: var(--wui-typography-body-2-line-height);
|
|
17723
17707
|
`;
|
|
17724
17708
|
var TableCell = ({ children, ...props }) => {
|
|
17725
|
-
const section = (0,
|
|
17709
|
+
const section = (0, import_react93.useContext)(TableSectionContext);
|
|
17726
17710
|
if (section === "head") {
|
|
17727
17711
|
return /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(StyledTh, { ...props, children });
|
|
17728
17712
|
}
|
|
@@ -17730,7 +17714,6 @@ var TableCell = ({ children, ...props }) => {
|
|
|
17730
17714
|
};
|
|
17731
17715
|
|
|
17732
17716
|
// src/components/Table/TableFoot.tsx
|
|
17733
|
-
var import_react95 = require("react");
|
|
17734
17717
|
var import_styled_components118 = require("styled-components");
|
|
17735
17718
|
var import_jsx_runtime322 = require("react/jsx-runtime");
|
|
17736
17719
|
var StyledTableFoot = import_styled_components118.styled.tfoot``;
|
|
@@ -17739,7 +17722,6 @@ var TableFoot = ({ children, ...props }) => {
|
|
|
17739
17722
|
};
|
|
17740
17723
|
|
|
17741
17724
|
// src/components/Table/TableHead.tsx
|
|
17742
|
-
var import_react96 = require("react");
|
|
17743
17725
|
var import_styled_components119 = require("styled-components");
|
|
17744
17726
|
var import_jsx_runtime323 = require("react/jsx-runtime");
|
|
17745
17727
|
var StyledThead = import_styled_components119.styled.thead``;
|
|
@@ -17757,15 +17739,15 @@ var TableRow = ({ children, ...props }) => {
|
|
|
17757
17739
|
|
|
17758
17740
|
// src/components/Tabs/Tabs.tsx
|
|
17759
17741
|
var import_react_tabs = require("@radix-ui/react-tabs");
|
|
17760
|
-
var
|
|
17742
|
+
var import_react95 = require("react");
|
|
17761
17743
|
var import_type_guards68 = require("@wistia/type-guards");
|
|
17762
17744
|
|
|
17763
17745
|
// src/components/Tabs/useTabsValue.tsx
|
|
17764
|
-
var
|
|
17765
|
-
var TabsValueContext = (0,
|
|
17746
|
+
var import_react94 = require("react");
|
|
17747
|
+
var TabsValueContext = (0, import_react94.createContext)(null);
|
|
17766
17748
|
var TabsValueProvider = TabsValueContext.Provider;
|
|
17767
17749
|
var useTabsValue = () => {
|
|
17768
|
-
const context = (0,
|
|
17750
|
+
const context = (0, import_react94.useContext)(TabsValueContext);
|
|
17769
17751
|
if (context === null) {
|
|
17770
17752
|
throw new Error("useTabsValue must be used within a TabsValueProvider");
|
|
17771
17753
|
}
|
|
@@ -17781,8 +17763,8 @@ var Tabs = ({
|
|
|
17781
17763
|
defaultValue,
|
|
17782
17764
|
...props
|
|
17783
17765
|
}) => {
|
|
17784
|
-
const [value, setValue] = (0,
|
|
17785
|
-
const onValueChange = (0,
|
|
17766
|
+
const [value, setValue] = (0, import_react95.useState)(valueProp ?? defaultValue);
|
|
17767
|
+
const onValueChange = (0, import_react95.useCallback)(
|
|
17786
17768
|
(newValue) => {
|
|
17787
17769
|
setValue(newValue);
|
|
17788
17770
|
if (onValueChangeProp) {
|
|
@@ -17866,7 +17848,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
|
|
|
17866
17848
|
TabsList.displayName = "TabsList_UI";
|
|
17867
17849
|
|
|
17868
17850
|
// src/components/Tabs/TabsTrigger.tsx
|
|
17869
|
-
var
|
|
17851
|
+
var import_react96 = require("react");
|
|
17870
17852
|
var import_type_guards70 = require("@wistia/type-guards");
|
|
17871
17853
|
|
|
17872
17854
|
// src/components/Tabs/StyledRadixTabsTrigger.tsx
|
|
@@ -17882,13 +17864,13 @@ var StyledRadixTabsTrigger = (0, import_styled_components123.styled)(import_reac
|
|
|
17882
17864
|
|
|
17883
17865
|
// src/components/Tabs/TabsTrigger.tsx
|
|
17884
17866
|
var import_jsx_runtime329 = require("react/jsx-runtime");
|
|
17885
|
-
var TabsTrigger = (0,
|
|
17867
|
+
var TabsTrigger = (0, import_react96.forwardRef)(
|
|
17886
17868
|
({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
|
|
17887
17869
|
const selectedValue = useTabsValue();
|
|
17888
17870
|
const { setSelectedItemMeasurements } = useSelectedItemStyle();
|
|
17889
|
-
const buttonRef = (0,
|
|
17871
|
+
const buttonRef = (0, import_react96.useRef)(null);
|
|
17890
17872
|
const combinedRef = mergeRefs([buttonRef, forwardedRef]);
|
|
17891
|
-
(0,
|
|
17873
|
+
(0, import_react96.useEffect)(() => {
|
|
17892
17874
|
const buttonElem = buttonRef.current;
|
|
17893
17875
|
if (!buttonElem) {
|
|
17894
17876
|
return void 0;
|
|
@@ -17970,7 +17952,7 @@ var ThumbnailBadge = ({ icon, label, ...props }) => {
|
|
|
17970
17952
|
ThumbnailBadge.displayName = "ThumbnailBadge_UI";
|
|
17971
17953
|
|
|
17972
17954
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
17973
|
-
var
|
|
17955
|
+
var import_react97 = require("react");
|
|
17974
17956
|
var import_styled_components127 = require("styled-components");
|
|
17975
17957
|
var import_type_guards74 = require("@wistia/type-guards");
|
|
17976
17958
|
|
|
@@ -18352,7 +18334,7 @@ var getRelativeMousePosition = (elem, mouseEvent) => {
|
|
|
18352
18334
|
var hasValidThumbnailUrl = (thumbnailUrl) => {
|
|
18353
18335
|
return (0, import_type_guards74.isNotNil)(thumbnailUrl) && (0, import_type_guards74.isNonEmptyString)(thumbnailUrl);
|
|
18354
18336
|
};
|
|
18355
|
-
var Thumbnail = (0,
|
|
18337
|
+
var Thumbnail = (0, import_react97.forwardRef)(
|
|
18356
18338
|
({
|
|
18357
18339
|
gradientBackground = "defaultMidOne",
|
|
18358
18340
|
thumbnailImageType = "wide",
|
|
@@ -18364,17 +18346,17 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18364
18346
|
aspectRatio = "wide",
|
|
18365
18347
|
...props
|
|
18366
18348
|
}, 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,
|
|
18349
|
+
const [percent, setPercent] = (0, import_react97.useState)(0);
|
|
18350
|
+
const [isMouseOver, setIsMouseOver] = (0, import_react97.useState)(false);
|
|
18351
|
+
const [isStoryboardReady, setIsStoryboardReady] = (0, import_react97.useState)(false);
|
|
18352
|
+
const storyboardElementRef = (0, import_react97.useRef)(null);
|
|
18353
|
+
const [cursorPosition, setCursorPosition] = (0, import_react97.useState)(null);
|
|
18354
|
+
const backgroundUrl = (0, import_react97.useMemo)(
|
|
18373
18355
|
() => thumbnailImageType === "square" && hasValidThumbnailUrl(thumbnailUrl) ? thumbnailUrl : void 0,
|
|
18374
18356
|
[thumbnailImageType, thumbnailUrl]
|
|
18375
18357
|
);
|
|
18376
18358
|
const isScrubbable = (0, import_type_guards74.isNotNil)(storyboard);
|
|
18377
|
-
const trackStoryboardLoadStatus = (0,
|
|
18359
|
+
const trackStoryboardLoadStatus = (0, import_react97.useCallback)(() => {
|
|
18378
18360
|
if (storyboardElementRef.current || !storyboard) {
|
|
18379
18361
|
return storyboardElementRef.current;
|
|
18380
18362
|
}
|
|
@@ -18384,7 +18366,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18384
18366
|
storyboardElementRef.current = asset;
|
|
18385
18367
|
return storyboardElementRef.current;
|
|
18386
18368
|
}, [storyboard]);
|
|
18387
|
-
const handleMouseMove = (0,
|
|
18369
|
+
const handleMouseMove = (0, import_react97.useCallback)(
|
|
18388
18370
|
(mouseEvent) => {
|
|
18389
18371
|
if (!isScrubbable) return;
|
|
18390
18372
|
const elem = mouseEvent.currentTarget;
|
|
@@ -18397,12 +18379,12 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18397
18379
|
},
|
|
18398
18380
|
[isScrubbable, trackStoryboardLoadStatus]
|
|
18399
18381
|
);
|
|
18400
|
-
const handleMouseOut = (0,
|
|
18382
|
+
const handleMouseOut = (0, import_react97.useCallback)(() => {
|
|
18401
18383
|
if (!isScrubbable) return;
|
|
18402
18384
|
setIsMouseOver(false);
|
|
18403
18385
|
setCursorPosition(null);
|
|
18404
18386
|
}, [isScrubbable]);
|
|
18405
|
-
const shouldRenderStoryboard = (0,
|
|
18387
|
+
const shouldRenderStoryboard = (0, import_react97.useMemo)(() => {
|
|
18406
18388
|
if ((0, import_type_guards74.isNil)(storyboard) || (0, import_type_guards74.isUndefined)(height) || (0, import_type_guards74.isEmptyString)(height)) {
|
|
18407
18389
|
return false;
|
|
18408
18390
|
}
|
|
@@ -18464,7 +18446,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18464
18446
|
Thumbnail.displayName = "Thumbnail_UI";
|
|
18465
18447
|
|
|
18466
18448
|
// src/components/ThumbnailCollage/ThumbnailCollage.tsx
|
|
18467
|
-
var
|
|
18449
|
+
var import_react98 = require("react");
|
|
18468
18450
|
var import_styled_components128 = require("styled-components");
|
|
18469
18451
|
var import_type_guards75 = require("@wistia/type-guards");
|
|
18470
18452
|
var import_jsx_runtime333 = (
|
|
@@ -18526,10 +18508,10 @@ var ThumbnailCollage = ({
|
|
|
18526
18508
|
gradientBackground = "defaultMidOne",
|
|
18527
18509
|
...props
|
|
18528
18510
|
}) => {
|
|
18529
|
-
const thumbnailArray =
|
|
18511
|
+
const thumbnailArray = import_react98.Children.toArray(children);
|
|
18530
18512
|
const truncatedThumbnails = thumbnailArray.slice(0, 3);
|
|
18531
18513
|
const thumbnails = (0, import_type_guards75.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
|
|
18532
|
-
return
|
|
18514
|
+
return (0, import_react98.cloneElement)(child, {
|
|
18533
18515
|
...child.props,
|
|
18534
18516
|
children: void 0
|
|
18535
18517
|
});
|
|
@@ -18682,7 +18664,7 @@ WistiaLogo.displayName = "WistiaLogo_UI";
|
|
|
18682
18664
|
// src/components/SplitButton/SplitButton.tsx
|
|
18683
18665
|
var import_styled_components130 = require("styled-components");
|
|
18684
18666
|
var import_type_guards77 = require("@wistia/type-guards");
|
|
18685
|
-
var
|
|
18667
|
+
var import_react99 = require("react");
|
|
18686
18668
|
var import_jsx_runtime335 = require("react/jsx-runtime");
|
|
18687
18669
|
var StyledSplitButton = import_styled_components130.styled.span`
|
|
18688
18670
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
@@ -18747,7 +18729,7 @@ var SplitButton = ({
|
|
|
18747
18729
|
children: menuItems
|
|
18748
18730
|
}
|
|
18749
18731
|
),
|
|
18750
|
-
(0, import_type_guards77.isNotNil)(secondaryAction) && (0,
|
|
18732
|
+
(0, import_type_guards77.isNotNil)(secondaryAction) && (0, import_react99.cloneElement)(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
|
|
18751
18733
|
] });
|
|
18752
18734
|
};
|
|
18753
18735
|
SplitButton.displayName = "SplitButton_UI";
|