@wistia/ui 0.5.2-beta.a93c5fb4.3a5bcbb → 0.5.2-beta.afcce0d8.98f1a2c

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.5.2-beta.a93c5fb4.3a5bcbb
+ * @license @wistia/ui v0.5.2-beta.afcce0d8.98f1a2c
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2081,9 +2081,9 @@ var import_react6 = require("react");
 // src/private/hooks/useEvent/useEvent.ts
 var import_react5 = require("react");
 
-// src/private/helpers/isObjectRef/isObjectRef.ts
+// src/private/helpers/isValidRef/isValidRef.ts
 var import_type_guards6 = require("@wistia/type-guards");
-var isObjectRef = (value) => {
+var isValidRef = (value) => {
   return (0, import_type_guards6.isNotNil)(value) && (0, import_type_guards6.isRecord)(value) && "current" in value;
 };
 
@@ -2103,7 +2103,7 @@ var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}
     savedEventOptions.current = eventOptions;
   }, [eventOptions]);
   (0, import_react5.useEffect)(() => {
-    const target = isObjectRef(eventTarget) ? eventTarget.current : eventTarget;
+    const target = isValidRef(eventTarget) ? eventTarget.current : eventTarget;
     if (!eventName || !isEventTargetSupported(target)) {
       return;
     }
@@ -7905,7 +7905,7 @@ var StyledInputContainer = import_styled_components41.default.div`
     padding-right: 32px;
   }
 `;
-var isValidRef = (ref) => {
+var isValidRef2 = (ref) => {
   return typeof ref === "object" && ref !== null && "current" in ref && (0, import_type_guards24.isNotNil)(ref.current);
 };
 var Input = (0, import_react30.forwardRef)(
@@ -7919,7 +7919,7 @@ var Input = (0, import_react30.forwardRef)(
     ...props
   }, externalRef) => {
     const internalRef = (0, import_react30.useRef)();
-    const ref = isValidRef(externalRef) ? externalRef : internalRef;
+    const ref = isValidRef2(externalRef) ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards24.isNil)(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(Icon, { type: "search" });
@@ -9781,48 +9781,43 @@ var DataCardTrend = ({
 var import_styled_components65 = __toESM(require("styled-components"));
 var import_react46 = require("react");
 var import_jsx_runtime214 = require("react/jsx-runtime");
-var sharedInputStyles = import_styled_components65.css`
-  padding: var(--wui-space-02);
-  border-radius: var(--wui-border-radius-01);
-  overflow-wrap: anywhere;
-  width: 100%;
-`;
-var StyledEditableHeadingInput = import_styled_components65.default.textarea`
+var StyledInput = (0, import_styled_components65.default)(Input)`
   :not([rows]) {
     min-height: unset;
   }
 
-  ${sharedInputStyles}
+  resize: vertical;
   font-size: var(--wui-typography-heading-1-size);
   font-weight: var(--wui-typography-heading-1-weight);
   line-height: var(--wui-typography-heading-1-line-height);
   font-family: var(--wui-typography-heading-1-family);
-  box-sizing: border-box;
-  margin: 0;
-  display: block;
-  overflow: hidden;
-  resize: vertical;
-  height: ${({ $headingHeight }) => `${$headingHeight}px`};
-  background: transparent;
-  border: none;
   outline: 2px solid var(--wui-color-focus-ring);
   outline-offset: -2px;
 
-  &:focus {
-    outline: 2px solid var(--wui-color-focus-ring);
-    outline-offset: -2px;
+  && {
+    width: 100%;
+    padding: var(--wui-space-02);
+    border: none;
+    height: ${({ $height }) => `${$height}px`};
+  }
+`;
+var editableStyles = import_styled_components65.css`
+  &:has(+ :focus-within) {
+    background: var(--wui-color-bg-surface-hover);
+  }
+
+  &:hover {
+    background: var(--wui-color-bg-surface-hover);
+    cursor: pointer;
   }
 `;
 var StyledHeading2 = (0, import_styled_components65.default)(Heading)`
-  ${sharedInputStyles}
+  width: 100%;
+  border-radius: var(--wui-border-radius-02);
+  padding: var(--wui-space-02);
+  overflow-wrap: anywhere;
   transition: all var(--wui-motion-duration-01) var(--wui-motion-ease);
-  ${({ $editingDisabled }) => !$editingDisabled && import_styled_components65.css`
-      cursor: pointer;
-
-      &:hover {
-        background: var(--wui-color-bg-surface-hover);
-      }
-    `}
+  ${({ $editingDisabled }) => !$editingDisabled && editableStyles}
 `;
 var EditableHeading = ({
   children,
@@ -9831,10 +9826,7 @@ var EditableHeading = ({
   tooltipText = "Click to edit title",
   ariaLabel = "Edit title",
   forceEditing = false,
-  editingDisabled = false,
-  textareaProps,
-  headingProps,
-  dataTestId
+  editingDisabled = false
 }) => {
   const [isEditing, setIsEditing] = (0, import_react46.useState)(false);
   const [value, setValue] = (0, import_react46.useState)(children);
@@ -9876,10 +9868,8 @@ var EditableHeading = ({
   const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
     StyledHeading2,
     {
-      ...headingProps,
       ref: headingRef,
       $editingDisabled: editingDisabled,
-      "data-testid": dataTestId,
       onClick: () => handleSetEditing(true),
       variant: "heading1",
       children: value
@@ -9890,13 +9880,11 @@ var EditableHeading = ({
   }
   if (isEditing || forceEditing) {
     return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
-      StyledEditableHeadingInput,
+      StyledInput,
       {
-        ...textareaProps,
-        $headingHeight: headingHeight,
-        "aria-label": ariaLabel,
+        $height: headingHeight,
         autoFocus: true,
-        "data-testid": dataTestId,
+        fullWidth: true,
         onBlur: handleFinishEditing,
         onChange: (event) => setValue(event.target.value),
         onFocus: (event) => {
@@ -9904,8 +9892,8 @@ var EditableHeading = ({
           event.currentTarget.setSelectionRange(length, length);
         },
         onKeyDown: handleKeyDown,
-        value,
-        children: value
+        type: "multiline",
+        value
       }
     );
   }