@wistia/ui 0.7.1 → 0.8.1-beta.3c5d1921.3fffdf1

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.7.1
+ * @license @wistia/ui v0.8.1-beta.3c5d1921.3fffdf1
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -76,6 +76,7 @@ __export(index_exports, {
   Image: () => Image,
   ImageDimensionsValidator: () => import_validators.ImageDimensionsValidator,
   Input: () => Input,
+  InputClickToCopy: () => InputClickToCopy,
   Label: () => Label,
   Link: () => Link,
   Menu: () => Menu,
@@ -7032,11 +7033,14 @@ var Link = (0, import_react15.forwardRef)(
   }, ref) => {
     const inRouterContext = (0, import_react_router_dom.useInRouterContext)();
     const to = generateHref(props.href, type, disabled);
+    const shouldUseReactRouterLink = inRouterContext && type !== "external" && !to?.startsWith("http");
     const handleClick = async (event) => {
       if (disabled) {
         event.preventDefault();
       } else if (beforeAction) {
-        event.preventDefault();
+        if (!shouldUseReactRouterLink) {
+          event.preventDefault();
+        }
         try {
           await beforeAction();
         } catch (error) {
@@ -7080,7 +7084,6 @@ var Link = (0, import_react15.forwardRef)(
         ...commonProps,
         ...externalLinkProps
       };
-      const shouldUseReactRouterLink = inRouterContext && type !== "external" && !to?.startsWith("http");
       return shouldUseReactRouterLink ? /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
         StyledLink,
         {
@@ -9039,26 +9042,17 @@ var import_react29 = require("react");
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
 var import_styled_components44 = __toESM(require("styled-components"));
 var import_jsx_runtime218 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components44.css`
-  --tooltip-font-size: var(--wui-typography-label-4-size);
-  --tooltip-line-height: var(--wui-typography-label-4-line-height);
-  --tooltip-font-weight: var(--wui-typography-label-4-weight);
-  --tooltip-horizontal-padding: var(--wui-space-02);
-  --tooltip-vertical-padding: var(--wui-space-03);
-`;
 var StyledContent = (0, import_styled_components44.default)(import_react_tooltip2.Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
   --tooltip-color: var(--wui-color-text-on-fill);
-  --tooltip-font-size: var(--wui-typography-label-3-size);
-  --tooltip-line-height: var(--wui-typography-label-3-line-height);
-  --tooltip-font-weight: var(--wui-typography-label-3-weight);
-  --tooltip-horizontal-padding: var(--wui-space-03);
+  --tooltip-font-size: var(--wui-typography-label-4-size);
+  --tooltip-line-height: var(--wui-typography-label-4-line-height);
+  --tooltip-font-weight: var(--wui-typography-label-4-weight);
+  --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 
-  ${({ $compact }) => Boolean($compact) && CompactTooltipStyles};
-
   font-family: var(--tooltip-font-family);
   font-size: var(--tooltip-font-size);
   border-radius: var(--tooltip-border-radius);
@@ -9090,12 +9084,11 @@ var StyledContent = (0, import_styled_components44.default)(import_react_tooltip
 `;
 var VISUAL_OFFSET = 6;
 var Tooltip = ({
-  delay = 700,
+  delay = 500,
   direction = "top",
   content,
   children,
   forceOpen,
-  compact = false,
   hideArrow = false
 }) => {
   const rootProps = {};
@@ -9115,7 +9108,6 @@ var Tooltip = ({
         /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
           StyledContent,
           {
-            $compact: compact,
             side: direction,
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
@@ -9461,14 +9453,7 @@ var EditableHeading = ({
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(import_jsx_runtime220.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
-      Tooltip,
-      {
-        compact: true,
-        content: tooltipText,
-        children: HeadingComponent2
-      }
-    ),
+    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
     /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
       "button",
       {
@@ -12711,6 +12696,70 @@ var Thumbnail = (0, import_react66.forwardRef)(
   }
 );
 Thumbnail.displayName = "Thumbnail";
+
+// src/components/InputClickToCopy/InputClickToCopy.tsx
+var import_styled_components90 = __toESM(require("styled-components"));
+var import_react67 = require("react");
+var import_type_guards54 = require("@wistia/type-guards");
+var import_jsx_runtime271 = require("react/jsx-runtime");
+var StyledInput2 = (0, import_styled_components90.default)(Input)`
+  &:not([aria-disabled='true']) {
+    cursor: pointer;
+  }
+
+  &::selection {
+    background-color: transparent;
+  }
+`;
+var COPY_SUCCESS_DURATION = 2e3;
+var InputClickToCopy = (0, import_react67.forwardRef)(
+  ({ value, onCopy, ...props }, ref) => {
+    const [isCopied, setIsCopied] = (0, import_react67.useState)(false);
+    (0, import_react67.useEffect)(() => {
+      if (isCopied) {
+        const timeout = setTimeout(() => {
+          setIsCopied(false);
+        }, COPY_SUCCESS_DURATION);
+        return () => {
+          clearTimeout(timeout);
+        };
+      }
+      return () => null;
+    }, [isCopied]);
+    const handleClick = (event) => {
+      event.preventDefault();
+      if ((0, import_type_guards54.isFunction)(props.onClick)) {
+        props.onClick(event);
+      }
+      void copyToClipboard(value).then(() => {
+        setIsCopied(true);
+        if ((0, import_type_guards54.isFunction)(onCopy)) {
+          onCopy(value);
+        }
+        return value;
+      });
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
+      StyledInput2,
+      {
+        "aria-label": "Click to Copy",
+        ...props,
+        ref,
+        onClick: handleClick,
+        readOnly: true,
+        rightIcon: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
+          Icon,
+          {
+            colorScheme: "success",
+            type: "checkmark-circle"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(Icon, { type: "save-as-copy" }),
+        value
+      }
+    );
+  }
+);
+InputClickToCopy.displayName = "InputClickToCopy";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -12750,6 +12799,7 @@ Thumbnail.displayName = "Thumbnail";
   Image,
   ImageDimensionsValidator,
   Input,
+  InputClickToCopy,
   Label,
   Link,
   Menu,