@wistia/ui 0.19.3-beta.098968f1.4c9ab93 → 0.19.4-beta.32a78d83.3ea9116
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 +53 -19
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +53 -19
- 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.19.
|
|
3
|
+
* @license @wistia/ui v0.19.4-beta.32a78d83.3ea9116
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -2526,7 +2526,9 @@ var differenceInCalendarDays = (dateLeft, dateRight) => {
|
|
|
2526
2526
|
|
|
2527
2527
|
// src/helpers/dateTime/timeAgoString.ts
|
|
2528
2528
|
var timeAgoString = (date, { nowAnchor = /* @__PURE__ */ new Date(), includeTime = true } = {}) => {
|
|
2529
|
-
if (isInvalidDate(date))
|
|
2529
|
+
if (isInvalidDate(date)) {
|
|
2530
|
+
return "";
|
|
2531
|
+
}
|
|
2530
2532
|
const minutesAgo = (nowAnchor.valueOf() - date.valueOf()) / (secondsInMinute * milisecondsInSecond);
|
|
2531
2533
|
const minutesAgoRounded = Math.round(minutesAgo);
|
|
2532
2534
|
const differenceInDays = differenceInCalendarDays(nowAnchor, date);
|
|
@@ -8782,7 +8784,9 @@ var getFillViewportStyle = (fillViewport) => {
|
|
|
8782
8784
|
return void 0;
|
|
8783
8785
|
};
|
|
8784
8786
|
var getFlexStyle = (flexMode) => {
|
|
8785
|
-
if (!flexMode)
|
|
8787
|
+
if (!flexMode) {
|
|
8788
|
+
return null;
|
|
8789
|
+
}
|
|
8786
8790
|
switch (flexMode) {
|
|
8787
8791
|
// grows to fill space, won't shrink, starts at 0
|
|
8788
8792
|
case "grow":
|
|
@@ -9509,13 +9513,19 @@ var Banner = ({
|
|
|
9509
9513
|
const hasImage = (0, import_type_guards25.isNotNil)(image);
|
|
9510
9514
|
const shouldShowImage = hasImage && (isVerticalLayout || width >= MIN_IMAGE_WIDTH);
|
|
9511
9515
|
const iconPosition = (0, import_react31.useMemo)(() => {
|
|
9512
|
-
if ((0, import_type_guards25.isNil)(icon))
|
|
9513
|
-
|
|
9516
|
+
if ((0, import_type_guards25.isNil)(icon)) {
|
|
9517
|
+
return "none";
|
|
9518
|
+
}
|
|
9519
|
+
if (isSmallContainer) {
|
|
9520
|
+
return shouldShowImage ? "inline" : "above";
|
|
9521
|
+
}
|
|
9514
9522
|
return prominence === "secondary" ? "inline" : "above";
|
|
9515
9523
|
}, [icon, isSmallContainer, shouldShowImage, prominence]);
|
|
9516
9524
|
const hasActions = (0, import_type_guards25.isNotNil)(primaryAction) || (0, import_type_guards25.isNotNil)(secondaryAction);
|
|
9517
9525
|
const contentDirection = (0, import_react31.useMemo)(() => {
|
|
9518
|
-
if (orientation === "horizontal" && !hasActions)
|
|
9526
|
+
if (orientation === "horizontal" && !hasActions) {
|
|
9527
|
+
return "row";
|
|
9528
|
+
}
|
|
9519
9529
|
return !shouldShowImage && prominence === "primary" && !isSmallContainer && !isVerticalLayout ? "row" : "column";
|
|
9520
9530
|
}, [orientation, shouldShowImage, prominence, isSmallContainer, isVerticalLayout, hasActions]);
|
|
9521
9531
|
const headingVariant = isSmallContainer || prominence === "primary" ? "heading5" : "heading3";
|
|
@@ -10259,8 +10269,12 @@ var sizeLarge = import_styled_components46.css`
|
|
|
10259
10269
|
--wui-checkbox-icon-size: 11px;
|
|
10260
10270
|
`;
|
|
10261
10271
|
var getSizeCss = (size) => {
|
|
10262
|
-
if (size === "sm")
|
|
10263
|
-
|
|
10272
|
+
if (size === "sm") {
|
|
10273
|
+
return sizeSmall;
|
|
10274
|
+
}
|
|
10275
|
+
if (size === "lg") {
|
|
10276
|
+
return sizeLarge;
|
|
10277
|
+
}
|
|
10264
10278
|
return sizeMedium;
|
|
10265
10279
|
};
|
|
10266
10280
|
var StyledCheckboxWrapper = import_styled_components46.styled.div`
|
|
@@ -10405,7 +10419,9 @@ Checkbox.displayName = "Checkbox_UI";
|
|
|
10405
10419
|
// src/components/ClickRegion/ClickRegion.tsx
|
|
10406
10420
|
var import_react39 = require("react");
|
|
10407
10421
|
var isClickableElement = (element) => {
|
|
10408
|
-
if (!element)
|
|
10422
|
+
if (!element) {
|
|
10423
|
+
return false;
|
|
10424
|
+
}
|
|
10409
10425
|
const el = element;
|
|
10410
10426
|
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
10427
|
};
|
|
@@ -14635,7 +14651,9 @@ var EditableHeading = ({
|
|
|
14635
14651
|
const [headingHeight, setHeadingHeight] = (0, import_react63.useState)("60");
|
|
14636
14652
|
const headingRef = (0, import_react63.useRef)(null);
|
|
14637
14653
|
const handleSetEditing = (editing) => {
|
|
14638
|
-
if (editingDisabled)
|
|
14654
|
+
if (editingDisabled) {
|
|
14655
|
+
return;
|
|
14656
|
+
}
|
|
14639
14657
|
if (editing && headingRef.current) {
|
|
14640
14658
|
setHeadingHeight(`${headingRef.current.offsetHeight}`);
|
|
14641
14659
|
}
|
|
@@ -14917,7 +14935,7 @@ var EditableTextDisplayComponent = (0, import_react65.forwardRef)(
|
|
|
14917
14935
|
};
|
|
14918
14936
|
const elementType = renderAs ?? getDefaultTypographicElement(typographicVariant);
|
|
14919
14937
|
const displayText = value.length > 0 ? value : placeholder;
|
|
14920
|
-
const isPlaceholderVisible = value.length === 0 &&
|
|
14938
|
+
const isPlaceholderVisible = value.length === 0 && Boolean(placeholder);
|
|
14921
14939
|
if (isEditing) {
|
|
14922
14940
|
return null;
|
|
14923
14941
|
}
|
|
@@ -15062,7 +15080,9 @@ var EditableTextInput = (props) => {
|
|
|
15062
15080
|
}, 0);
|
|
15063
15081
|
}
|
|
15064
15082
|
};
|
|
15065
|
-
if (!isEditing)
|
|
15083
|
+
if (!isEditing) {
|
|
15084
|
+
return null;
|
|
15085
|
+
}
|
|
15066
15086
|
return /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
|
|
15067
15087
|
StyledInput2,
|
|
15068
15088
|
{
|
|
@@ -15143,7 +15163,9 @@ var EditableTextSubmitButton = ({
|
|
|
15143
15163
|
onClick: handleClick,
|
|
15144
15164
|
"data-wui-editable-text-submit": true
|
|
15145
15165
|
};
|
|
15146
|
-
if (!isEditing)
|
|
15166
|
+
if (!isEditing) {
|
|
15167
|
+
return null;
|
|
15168
|
+
}
|
|
15147
15169
|
return (0, import_react68.cloneElement)(onlyChild, triggerProps);
|
|
15148
15170
|
};
|
|
15149
15171
|
|
|
@@ -15173,7 +15195,9 @@ var EditableTextCancelButton = ({
|
|
|
15173
15195
|
onClick: handleClick,
|
|
15174
15196
|
"data-wui-editable-text-cancel": true
|
|
15175
15197
|
};
|
|
15176
|
-
if (!isEditing)
|
|
15198
|
+
if (!isEditing) {
|
|
15199
|
+
return null;
|
|
15200
|
+
}
|
|
15177
15201
|
return (0, import_react69.cloneElement)(onlyChild, triggerProps);
|
|
15178
15202
|
};
|
|
15179
15203
|
|
|
@@ -15197,7 +15221,9 @@ var EditableTextTrigger = ({
|
|
|
15197
15221
|
"data-wui-editable-text-trigger": true,
|
|
15198
15222
|
...props
|
|
15199
15223
|
};
|
|
15200
|
-
if (isEditing)
|
|
15224
|
+
if (isEditing) {
|
|
15225
|
+
return null;
|
|
15226
|
+
}
|
|
15201
15227
|
return (0, import_react70.cloneElement)(onlyChild, triggerProps);
|
|
15202
15228
|
};
|
|
15203
15229
|
|
|
@@ -16622,8 +16648,12 @@ var sizeLarge2 = import_styled_components103.css`
|
|
|
16622
16648
|
--wui-radio-icon-size: 10px;
|
|
16623
16649
|
`;
|
|
16624
16650
|
var getSizeCss3 = (size) => {
|
|
16625
|
-
if (size === "sm")
|
|
16626
|
-
|
|
16651
|
+
if (size === "sm") {
|
|
16652
|
+
return sizeSmall2;
|
|
16653
|
+
}
|
|
16654
|
+
if (size === "lg") {
|
|
16655
|
+
return sizeLarge2;
|
|
16656
|
+
}
|
|
16627
16657
|
return sizeMedium2;
|
|
16628
16658
|
};
|
|
16629
16659
|
var StyledRadioWrapper = import_styled_components103.styled.div`
|
|
@@ -18565,7 +18595,9 @@ var Thumbnail = (0, import_react97.forwardRef)(
|
|
|
18565
18595
|
}, [storyboard]);
|
|
18566
18596
|
const handleMouseMove = (0, import_react97.useCallback)(
|
|
18567
18597
|
(mouseEvent) => {
|
|
18568
|
-
if (!isScrubbable)
|
|
18598
|
+
if (!isScrubbable) {
|
|
18599
|
+
return;
|
|
18600
|
+
}
|
|
18569
18601
|
const elem = mouseEvent.currentTarget;
|
|
18570
18602
|
const relMousePos = getRelativeMousePosition(elem, mouseEvent);
|
|
18571
18603
|
const newPercent = relMousePos.left / elem.clientWidth;
|
|
@@ -18577,7 +18609,9 @@ var Thumbnail = (0, import_react97.forwardRef)(
|
|
|
18577
18609
|
[isScrubbable, trackStoryboardLoadStatus]
|
|
18578
18610
|
);
|
|
18579
18611
|
const handleMouseOut = (0, import_react97.useCallback)(() => {
|
|
18580
|
-
if (!isScrubbable)
|
|
18612
|
+
if (!isScrubbable) {
|
|
18613
|
+
return;
|
|
18614
|
+
}
|
|
18581
18615
|
setIsMouseOver(false);
|
|
18582
18616
|
setCursorPosition(null);
|
|
18583
18617
|
}, [isScrubbable]);
|