@wistia/ui 0.18.10-beta.eae9f561.494bbce → 0.18.11-beta.1934b4e1.7d6f5dd

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 CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  /*
3
- * @license @wistia/ui v0.18.10-beta.eae9f561.494bbce
3
+ * @license @wistia/ui v0.18.11-beta.1934b4e1.7d6f5dd
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 = (event) => {
2992
- if (event.target !== event.currentTarget) return;
2993
- setIsHovered(true);
2994
- };
2995
- const onMouseEnter = (event) => {
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 import_react94 = require("react");
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, import_react94.useContext)(TableSectionContext);
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 import_react98 = require("react");
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 import_react97 = require("react");
17765
- var TabsValueContext = (0, import_react97.createContext)(null);
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, import_react97.useContext)(TabsValueContext);
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, import_react98.useState)(valueProp ?? defaultValue);
17785
- const onValueChange = (0, import_react98.useCallback)(
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 import_react99 = require("react");
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, import_react99.forwardRef)(
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, import_react99.useRef)(null);
17871
+ const buttonRef = (0, import_react96.useRef)(null);
17890
17872
  const combinedRef = mergeRefs([buttonRef, forwardedRef]);
17891
- (0, import_react99.useEffect)(() => {
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 import_react100 = require("react");
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, import_react100.forwardRef)(
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, import_react100.useState)(0);
18368
- const [isMouseOver, setIsMouseOver] = (0, import_react100.useState)(false);
18369
- const [isStoryboardReady, setIsStoryboardReady] = (0, import_react100.useState)(false);
18370
- const storyboardElementRef = (0, import_react100.useRef)(null);
18371
- const [cursorPosition, setCursorPosition] = (0, import_react100.useState)(null);
18372
- const backgroundUrl = (0, import_react100.useMemo)(
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, import_react100.useCallback)(() => {
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, import_react100.useCallback)(
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, import_react100.useCallback)(() => {
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, import_react100.useMemo)(() => {
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 import_react101 = __toESM(require("react"));
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 = import_react101.default.Children.toArray(children);
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 import_react101.default.cloneElement(child, {
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 import_react102 = require("react");
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, import_react102.cloneElement)(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
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";