@wistia/ui 0.18.10-beta.85f50c74.84b332c → 0.18.10-beta.a12abacc.dd82133
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 +15 -15
- package/dist/index.d.ts +15 -15
- package/dist/index.mjs +6 -9
- 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.10-beta.
|
|
3
|
+
* @license @wistia/ui v0.18.10-beta.a12abacc.dd82133
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -17722,7 +17722,6 @@ var Table = ({
|
|
|
17722
17722
|
};
|
|
17723
17723
|
|
|
17724
17724
|
// src/components/Table/TableBody.tsx
|
|
17725
|
-
var import_react93 = require("react");
|
|
17726
17725
|
var import_styled_components116 = require("styled-components");
|
|
17727
17726
|
|
|
17728
17727
|
// src/components/Table/TableSectionContext.ts
|
|
@@ -17737,7 +17736,7 @@ var TableBody = ({ children, ...props }) => {
|
|
|
17737
17736
|
};
|
|
17738
17737
|
|
|
17739
17738
|
// src/components/Table/TableCell.tsx
|
|
17740
|
-
var
|
|
17739
|
+
var import_react93 = require("react");
|
|
17741
17740
|
var import_styled_components117 = require("styled-components");
|
|
17742
17741
|
var import_jsx_runtime321 = require("react/jsx-runtime");
|
|
17743
17742
|
var sharedStyles = import_styled_components117.css`
|
|
@@ -17758,7 +17757,7 @@ var StyledTd = import_styled_components117.styled.td`
|
|
|
17758
17757
|
line-height: var(--wui-typography-body-2-line-height);
|
|
17759
17758
|
`;
|
|
17760
17759
|
var TableCell = ({ children, ...props }) => {
|
|
17761
|
-
const section = (0,
|
|
17760
|
+
const section = (0, import_react93.useContext)(TableSectionContext);
|
|
17762
17761
|
if (section === "head") {
|
|
17763
17762
|
return /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(StyledTh, { ...props, children });
|
|
17764
17763
|
}
|
|
@@ -17766,7 +17765,6 @@ var TableCell = ({ children, ...props }) => {
|
|
|
17766
17765
|
};
|
|
17767
17766
|
|
|
17768
17767
|
// src/components/Table/TableFoot.tsx
|
|
17769
|
-
var import_react95 = require("react");
|
|
17770
17768
|
var import_styled_components118 = require("styled-components");
|
|
17771
17769
|
var import_jsx_runtime322 = require("react/jsx-runtime");
|
|
17772
17770
|
var StyledTableFoot = import_styled_components118.styled.tfoot``;
|
|
@@ -17775,7 +17773,6 @@ var TableFoot = ({ children, ...props }) => {
|
|
|
17775
17773
|
};
|
|
17776
17774
|
|
|
17777
17775
|
// src/components/Table/TableHead.tsx
|
|
17778
|
-
var import_react96 = require("react");
|
|
17779
17776
|
var import_styled_components119 = require("styled-components");
|
|
17780
17777
|
var import_jsx_runtime323 = require("react/jsx-runtime");
|
|
17781
17778
|
var StyledThead = import_styled_components119.styled.thead``;
|
|
@@ -17793,15 +17790,15 @@ var TableRow = ({ children, ...props }) => {
|
|
|
17793
17790
|
|
|
17794
17791
|
// src/components/Tabs/Tabs.tsx
|
|
17795
17792
|
var import_react_tabs = require("@radix-ui/react-tabs");
|
|
17796
|
-
var
|
|
17793
|
+
var import_react95 = require("react");
|
|
17797
17794
|
var import_type_guards68 = require("@wistia/type-guards");
|
|
17798
17795
|
|
|
17799
17796
|
// src/components/Tabs/useTabsValue.tsx
|
|
17800
|
-
var
|
|
17801
|
-
var TabsValueContext = (0,
|
|
17797
|
+
var import_react94 = require("react");
|
|
17798
|
+
var TabsValueContext = (0, import_react94.createContext)(null);
|
|
17802
17799
|
var TabsValueProvider = TabsValueContext.Provider;
|
|
17803
17800
|
var useTabsValue = () => {
|
|
17804
|
-
const context = (0,
|
|
17801
|
+
const context = (0, import_react94.useContext)(TabsValueContext);
|
|
17805
17802
|
if (context === null) {
|
|
17806
17803
|
throw new Error("useTabsValue must be used within a TabsValueProvider");
|
|
17807
17804
|
}
|
|
@@ -17817,8 +17814,8 @@ var Tabs = ({
|
|
|
17817
17814
|
defaultValue,
|
|
17818
17815
|
...props
|
|
17819
17816
|
}) => {
|
|
17820
|
-
const [value, setValue] = (0,
|
|
17821
|
-
const onValueChange = (0,
|
|
17817
|
+
const [value, setValue] = (0, import_react95.useState)(valueProp ?? defaultValue);
|
|
17818
|
+
const onValueChange = (0, import_react95.useCallback)(
|
|
17822
17819
|
(newValue) => {
|
|
17823
17820
|
setValue(newValue);
|
|
17824
17821
|
if (onValueChangeProp) {
|
|
@@ -17902,7 +17899,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
|
|
|
17902
17899
|
TabsList.displayName = "TabsList_UI";
|
|
17903
17900
|
|
|
17904
17901
|
// src/components/Tabs/TabsTrigger.tsx
|
|
17905
|
-
var
|
|
17902
|
+
var import_react96 = require("react");
|
|
17906
17903
|
var import_type_guards70 = require("@wistia/type-guards");
|
|
17907
17904
|
|
|
17908
17905
|
// src/components/Tabs/StyledRadixTabsTrigger.tsx
|
|
@@ -17918,13 +17915,13 @@ var StyledRadixTabsTrigger = (0, import_styled_components123.styled)(import_reac
|
|
|
17918
17915
|
|
|
17919
17916
|
// src/components/Tabs/TabsTrigger.tsx
|
|
17920
17917
|
var import_jsx_runtime329 = require("react/jsx-runtime");
|
|
17921
|
-
var TabsTrigger = (0,
|
|
17918
|
+
var TabsTrigger = (0, import_react96.forwardRef)(
|
|
17922
17919
|
({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
|
|
17923
17920
|
const selectedValue = useTabsValue();
|
|
17924
17921
|
const { setSelectedItemMeasurements } = useSelectedItemStyle();
|
|
17925
|
-
const buttonRef = (0,
|
|
17922
|
+
const buttonRef = (0, import_react96.useRef)(null);
|
|
17926
17923
|
const combinedRef = mergeRefs([buttonRef, forwardedRef]);
|
|
17927
|
-
(0,
|
|
17924
|
+
(0, import_react96.useEffect)(() => {
|
|
17928
17925
|
const buttonElem = buttonRef.current;
|
|
17929
17926
|
if (!buttonElem) {
|
|
17930
17927
|
return void 0;
|
|
@@ -18006,7 +18003,7 @@ var ThumbnailBadge = ({ icon, label, ...props }) => {
|
|
|
18006
18003
|
ThumbnailBadge.displayName = "ThumbnailBadge_UI";
|
|
18007
18004
|
|
|
18008
18005
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
18009
|
-
var
|
|
18006
|
+
var import_react97 = require("react");
|
|
18010
18007
|
var import_styled_components127 = require("styled-components");
|
|
18011
18008
|
var import_type_guards74 = require("@wistia/type-guards");
|
|
18012
18009
|
|
|
@@ -18388,7 +18385,7 @@ var getRelativeMousePosition = (elem, mouseEvent) => {
|
|
|
18388
18385
|
var hasValidThumbnailUrl = (thumbnailUrl) => {
|
|
18389
18386
|
return (0, import_type_guards74.isNotNil)(thumbnailUrl) && (0, import_type_guards74.isNonEmptyString)(thumbnailUrl);
|
|
18390
18387
|
};
|
|
18391
|
-
var Thumbnail = (0,
|
|
18388
|
+
var Thumbnail = (0, import_react97.forwardRef)(
|
|
18392
18389
|
({
|
|
18393
18390
|
gradientBackground = "defaultMidOne",
|
|
18394
18391
|
thumbnailImageType = "wide",
|
|
@@ -18400,17 +18397,17 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18400
18397
|
aspectRatio = "wide",
|
|
18401
18398
|
...props
|
|
18402
18399
|
}, ref) => {
|
|
18403
|
-
const [percent, setPercent] = (0,
|
|
18404
|
-
const [isMouseOver, setIsMouseOver] = (0,
|
|
18405
|
-
const [isStoryboardReady, setIsStoryboardReady] = (0,
|
|
18406
|
-
const storyboardElementRef = (0,
|
|
18407
|
-
const [cursorPosition, setCursorPosition] = (0,
|
|
18408
|
-
const backgroundUrl = (0,
|
|
18400
|
+
const [percent, setPercent] = (0, import_react97.useState)(0);
|
|
18401
|
+
const [isMouseOver, setIsMouseOver] = (0, import_react97.useState)(false);
|
|
18402
|
+
const [isStoryboardReady, setIsStoryboardReady] = (0, import_react97.useState)(false);
|
|
18403
|
+
const storyboardElementRef = (0, import_react97.useRef)(null);
|
|
18404
|
+
const [cursorPosition, setCursorPosition] = (0, import_react97.useState)(null);
|
|
18405
|
+
const backgroundUrl = (0, import_react97.useMemo)(
|
|
18409
18406
|
() => thumbnailImageType === "square" && hasValidThumbnailUrl(thumbnailUrl) ? thumbnailUrl : void 0,
|
|
18410
18407
|
[thumbnailImageType, thumbnailUrl]
|
|
18411
18408
|
);
|
|
18412
18409
|
const isScrubbable = (0, import_type_guards74.isNotNil)(storyboard);
|
|
18413
|
-
const trackStoryboardLoadStatus = (0,
|
|
18410
|
+
const trackStoryboardLoadStatus = (0, import_react97.useCallback)(() => {
|
|
18414
18411
|
if (storyboardElementRef.current || !storyboard) {
|
|
18415
18412
|
return storyboardElementRef.current;
|
|
18416
18413
|
}
|
|
@@ -18420,7 +18417,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18420
18417
|
storyboardElementRef.current = asset;
|
|
18421
18418
|
return storyboardElementRef.current;
|
|
18422
18419
|
}, [storyboard]);
|
|
18423
|
-
const handleMouseMove = (0,
|
|
18420
|
+
const handleMouseMove = (0, import_react97.useCallback)(
|
|
18424
18421
|
(mouseEvent) => {
|
|
18425
18422
|
if (!isScrubbable) return;
|
|
18426
18423
|
const elem = mouseEvent.currentTarget;
|
|
@@ -18433,12 +18430,12 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18433
18430
|
},
|
|
18434
18431
|
[isScrubbable, trackStoryboardLoadStatus]
|
|
18435
18432
|
);
|
|
18436
|
-
const handleMouseOut = (0,
|
|
18433
|
+
const handleMouseOut = (0, import_react97.useCallback)(() => {
|
|
18437
18434
|
if (!isScrubbable) return;
|
|
18438
18435
|
setIsMouseOver(false);
|
|
18439
18436
|
setCursorPosition(null);
|
|
18440
18437
|
}, [isScrubbable]);
|
|
18441
|
-
const shouldRenderStoryboard = (0,
|
|
18438
|
+
const shouldRenderStoryboard = (0, import_react97.useMemo)(() => {
|
|
18442
18439
|
if ((0, import_type_guards74.isNil)(storyboard) || (0, import_type_guards74.isUndefined)(height) || (0, import_type_guards74.isEmptyString)(height)) {
|
|
18443
18440
|
return false;
|
|
18444
18441
|
}
|
|
@@ -18500,7 +18497,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
|
|
|
18500
18497
|
Thumbnail.displayName = "Thumbnail_UI";
|
|
18501
18498
|
|
|
18502
18499
|
// src/components/ThumbnailCollage/ThumbnailCollage.tsx
|
|
18503
|
-
var
|
|
18500
|
+
var import_react98 = require("react");
|
|
18504
18501
|
var import_styled_components128 = require("styled-components");
|
|
18505
18502
|
var import_type_guards75 = require("@wistia/type-guards");
|
|
18506
18503
|
var import_jsx_runtime333 = (
|
|
@@ -18562,10 +18559,10 @@ var ThumbnailCollage = ({
|
|
|
18562
18559
|
gradientBackground = "defaultMidOne",
|
|
18563
18560
|
...props
|
|
18564
18561
|
}) => {
|
|
18565
|
-
const thumbnailArray =
|
|
18562
|
+
const thumbnailArray = import_react98.Children.toArray(children);
|
|
18566
18563
|
const truncatedThumbnails = thumbnailArray.slice(0, 3);
|
|
18567
18564
|
const thumbnails = (0, import_type_guards75.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
|
|
18568
|
-
return
|
|
18565
|
+
return (0, import_react98.cloneElement)(child, {
|
|
18569
18566
|
...child.props,
|
|
18570
18567
|
children: void 0
|
|
18571
18568
|
});
|
|
@@ -18718,7 +18715,7 @@ WistiaLogo.displayName = "WistiaLogo_UI";
|
|
|
18718
18715
|
// src/components/SplitButton/SplitButton.tsx
|
|
18719
18716
|
var import_styled_components130 = require("styled-components");
|
|
18720
18717
|
var import_type_guards77 = require("@wistia/type-guards");
|
|
18721
|
-
var
|
|
18718
|
+
var import_react99 = require("react");
|
|
18722
18719
|
var import_jsx_runtime335 = require("react/jsx-runtime");
|
|
18723
18720
|
var StyledSplitButton = import_styled_components130.styled.span`
|
|
18724
18721
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
@@ -18783,7 +18780,7 @@ var SplitButton = ({
|
|
|
18783
18780
|
children: menuItems
|
|
18784
18781
|
}
|
|
18785
18782
|
),
|
|
18786
|
-
(0, import_type_guards77.isNotNil)(secondaryAction) && (0,
|
|
18783
|
+
(0, import_type_guards77.isNotNil)(secondaryAction) && (0, import_react99.cloneElement)(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
|
|
18787
18784
|
] });
|
|
18788
18785
|
};
|
|
18789
18786
|
SplitButton.displayName = "SplitButton_UI";
|