@wistia/ui 0.19.3 → 0.19.4-beta.0bc44fe8.e89e0f2

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.19.3
3
+ * @license @wistia/ui v0.19.4-beta.0bc44fe8.e89e0f2
4
4
  *
5
5
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
6
6
  *
@@ -222,6 +222,7 @@ var globalStyleAdjustmentsCss = import_styled_components.css`
222
222
  -webkit-tap-highlight-color: rgb(0 0 0 / 0%); /* 2 */
223
223
  -moz-text-size-adjust: none; /* 3 */
224
224
  -webkit-text-size-adjust: none;
225
+ /* stylelint-disable-next-line plugin/use-baseline */
225
226
  text-size-adjust: none;
226
227
  height: -webkit-fill-available; /* 4 */
227
228
  }
@@ -2526,7 +2527,9 @@ var differenceInCalendarDays = (dateLeft, dateRight) => {
2526
2527
 
2527
2528
  // src/helpers/dateTime/timeAgoString.ts
2528
2529
  var timeAgoString = (date, { nowAnchor = /* @__PURE__ */ new Date(), includeTime = true } = {}) => {
2529
- if (isInvalidDate(date)) return "";
2530
+ if (isInvalidDate(date)) {
2531
+ return "";
2532
+ }
2530
2533
  const minutesAgo = (nowAnchor.valueOf() - date.valueOf()) / (secondsInMinute * milisecondsInSecond);
2531
2534
  const minutesAgoRounded = Math.round(minutesAgo);
2532
2535
  const differenceInDays = differenceInCalendarDays(nowAnchor, date);
@@ -8782,7 +8785,9 @@ var getFillViewportStyle = (fillViewport) => {
8782
8785
  return void 0;
8783
8786
  };
8784
8787
  var getFlexStyle = (flexMode) => {
8785
- if (!flexMode) return null;
8788
+ if (!flexMode) {
8789
+ return null;
8790
+ }
8786
8791
  switch (flexMode) {
8787
8792
  // grows to fill space, won't shrink, starts at 0
8788
8793
  case "grow":
@@ -9509,13 +9514,19 @@ var Banner = ({
9509
9514
  const hasImage = (0, import_type_guards25.isNotNil)(image);
9510
9515
  const shouldShowImage = hasImage && (isVerticalLayout || width >= MIN_IMAGE_WIDTH);
9511
9516
  const iconPosition = (0, import_react31.useMemo)(() => {
9512
- if ((0, import_type_guards25.isNil)(icon)) return "none";
9513
- if (isSmallContainer) return shouldShowImage ? "inline" : "above";
9517
+ if ((0, import_type_guards25.isNil)(icon)) {
9518
+ return "none";
9519
+ }
9520
+ if (isSmallContainer) {
9521
+ return shouldShowImage ? "inline" : "above";
9522
+ }
9514
9523
  return prominence === "secondary" ? "inline" : "above";
9515
9524
  }, [icon, isSmallContainer, shouldShowImage, prominence]);
9516
9525
  const hasActions = (0, import_type_guards25.isNotNil)(primaryAction) || (0, import_type_guards25.isNotNil)(secondaryAction);
9517
9526
  const contentDirection = (0, import_react31.useMemo)(() => {
9518
- if (orientation === "horizontal" && !hasActions) return "row";
9527
+ if (orientation === "horizontal" && !hasActions) {
9528
+ return "row";
9529
+ }
9519
9530
  return !shouldShowImage && prominence === "primary" && !isSmallContainer && !isVerticalLayout ? "row" : "column";
9520
9531
  }, [orientation, shouldShowImage, prominence, isSmallContainer, isVerticalLayout, hasActions]);
9521
9532
  const headingVariant = isSmallContainer || prominence === "primary" ? "heading5" : "heading3";
@@ -10259,8 +10270,12 @@ var sizeLarge = import_styled_components46.css`
10259
10270
  --wui-checkbox-icon-size: 11px;
10260
10271
  `;
10261
10272
  var getSizeCss = (size) => {
10262
- if (size === "sm") return sizeSmall;
10263
- if (size === "lg") return sizeLarge;
10273
+ if (size === "sm") {
10274
+ return sizeSmall;
10275
+ }
10276
+ if (size === "lg") {
10277
+ return sizeLarge;
10278
+ }
10264
10279
  return sizeMedium;
10265
10280
  };
10266
10281
  var StyledCheckboxWrapper = import_styled_components46.styled.div`
@@ -10405,7 +10420,9 @@ Checkbox.displayName = "Checkbox_UI";
10405
10420
  // src/components/ClickRegion/ClickRegion.tsx
10406
10421
  var import_react39 = require("react");
10407
10422
  var isClickableElement = (element) => {
10408
- if (!element) return false;
10423
+ if (!element) {
10424
+ return false;
10425
+ }
10409
10426
  const el = element;
10410
10427
  return el.closest("button") !== null || el.closest("a") !== null || el.closest("input") !== null || el.closest("select") !== null || el.closest("textarea") !== null || el.closest("label") !== null || el.closest("[data-wui-faux-input]") !== null;
10411
10428
  };
@@ -14635,7 +14652,9 @@ var EditableHeading = ({
14635
14652
  const [headingHeight, setHeadingHeight] = (0, import_react63.useState)("60");
14636
14653
  const headingRef = (0, import_react63.useRef)(null);
14637
14654
  const handleSetEditing = (editing) => {
14638
- if (editingDisabled) return;
14655
+ if (editingDisabled) {
14656
+ return;
14657
+ }
14639
14658
  if (editing && headingRef.current) {
14640
14659
  setHeadingHeight(`${headingRef.current.offsetHeight}`);
14641
14660
  }
@@ -14917,7 +14936,7 @@ var EditableTextDisplayComponent = (0, import_react65.forwardRef)(
14917
14936
  };
14918
14937
  const elementType = renderAs ?? getDefaultTypographicElement(typographicVariant);
14919
14938
  const displayText = value.length > 0 ? value : placeholder;
14920
- const isPlaceholderVisible = value.length === 0 && !!placeholder;
14939
+ const isPlaceholderVisible = value.length === 0 && Boolean(placeholder);
14921
14940
  if (isEditing) {
14922
14941
  return null;
14923
14942
  }
@@ -15062,7 +15081,9 @@ var EditableTextInput = (props) => {
15062
15081
  }, 0);
15063
15082
  }
15064
15083
  };
15065
- if (!isEditing) return null;
15084
+ if (!isEditing) {
15085
+ return null;
15086
+ }
15066
15087
  return /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
15067
15088
  StyledInput2,
15068
15089
  {
@@ -15143,7 +15164,9 @@ var EditableTextSubmitButton = ({
15143
15164
  onClick: handleClick,
15144
15165
  "data-wui-editable-text-submit": true
15145
15166
  };
15146
- if (!isEditing) return null;
15167
+ if (!isEditing) {
15168
+ return null;
15169
+ }
15147
15170
  return (0, import_react68.cloneElement)(onlyChild, triggerProps);
15148
15171
  };
15149
15172
 
@@ -15173,7 +15196,9 @@ var EditableTextCancelButton = ({
15173
15196
  onClick: handleClick,
15174
15197
  "data-wui-editable-text-cancel": true
15175
15198
  };
15176
- if (!isEditing) return null;
15199
+ if (!isEditing) {
15200
+ return null;
15201
+ }
15177
15202
  return (0, import_react69.cloneElement)(onlyChild, triggerProps);
15178
15203
  };
15179
15204
 
@@ -15197,7 +15222,9 @@ var EditableTextTrigger = ({
15197
15222
  "data-wui-editable-text-trigger": true,
15198
15223
  ...props
15199
15224
  };
15200
- if (isEditing) return null;
15225
+ if (isEditing) {
15226
+ return null;
15227
+ }
15201
15228
  return (0, import_react70.cloneElement)(onlyChild, triggerProps);
15202
15229
  };
15203
15230
 
@@ -16622,8 +16649,12 @@ var sizeLarge2 = import_styled_components103.css`
16622
16649
  --wui-radio-icon-size: 10px;
16623
16650
  `;
16624
16651
  var getSizeCss3 = (size) => {
16625
- if (size === "sm") return sizeSmall2;
16626
- if (size === "lg") return sizeLarge2;
16652
+ if (size === "sm") {
16653
+ return sizeSmall2;
16654
+ }
16655
+ if (size === "lg") {
16656
+ return sizeLarge2;
16657
+ }
16627
16658
  return sizeMedium2;
16628
16659
  };
16629
16660
  var StyledRadioWrapper = import_styled_components103.styled.div`
@@ -17515,7 +17546,6 @@ var StyledContent3 = (0, import_styled_components112.styled)(import_react_select
17515
17546
  --wui-select-option-bg-hover: var(--wui-color-bg-surface-hover);
17516
17547
 
17517
17548
  overflow: hidden;
17518
- transform: translateY(8px);
17519
17549
  background-color: var(--wui-select-content-bg);
17520
17550
  border: 1px solid var(--wui-select-content-border);
17521
17551
  border-radius: var(--wui-select-content-border-radius);
@@ -17580,23 +17610,30 @@ var Select = (0, import_react90.forwardRef)(
17580
17610
  ]
17581
17611
  }
17582
17612
  ),
17583
- /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)(StyledContent3, { position: "popper", children: [
17584
- /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(StyledScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
17585
- Icon,
17586
- {
17587
- size: "sm",
17588
- type: "caret-up"
17589
- }
17590
- ) }),
17591
- /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(import_react_select.Viewport, { children }),
17592
- /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(StyledScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
17593
- Icon,
17594
- {
17595
- size: "sm",
17596
- type: "caret-down"
17597
- }
17598
- ) })
17599
- ] }) })
17613
+ /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)(
17614
+ StyledContent3,
17615
+ {
17616
+ position: "popper",
17617
+ sideOffset: 8,
17618
+ children: [
17619
+ /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(StyledScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
17620
+ Icon,
17621
+ {
17622
+ size: "sm",
17623
+ type: "caret-up"
17624
+ }
17625
+ ) }),
17626
+ /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(import_react_select.Viewport, { children }),
17627
+ /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(StyledScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
17628
+ Icon,
17629
+ {
17630
+ size: "sm",
17631
+ type: "caret-down"
17632
+ }
17633
+ ) })
17634
+ ]
17635
+ }
17636
+ ) })
17600
17637
  ] });
17601
17638
  }
17602
17639
  );
@@ -18559,7 +18596,9 @@ var Thumbnail = (0, import_react97.forwardRef)(
18559
18596
  }, [storyboard]);
18560
18597
  const handleMouseMove = (0, import_react97.useCallback)(
18561
18598
  (mouseEvent) => {
18562
- if (!isScrubbable) return;
18599
+ if (!isScrubbable) {
18600
+ return;
18601
+ }
18563
18602
  const elem = mouseEvent.currentTarget;
18564
18603
  const relMousePos = getRelativeMousePosition(elem, mouseEvent);
18565
18604
  const newPercent = relMousePos.left / elem.clientWidth;
@@ -18571,7 +18610,9 @@ var Thumbnail = (0, import_react97.forwardRef)(
18571
18610
  [isScrubbable, trackStoryboardLoadStatus]
18572
18611
  );
18573
18612
  const handleMouseOut = (0, import_react97.useCallback)(() => {
18574
- if (!isScrubbable) return;
18613
+ if (!isScrubbable) {
18614
+ return;
18615
+ }
18575
18616
  setIsMouseOver(false);
18576
18617
  setCursorPosition(null);
18577
18618
  }, [isScrubbable]);