@wistia/ui 0.5.2 → 0.5.3-beta.25bf41ac.72da98f

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.5.2
+ * @license @wistia/ui v0.5.3-beta.25bf41ac.72da98f
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -56,6 +56,7 @@ __export(index_exports, {
   DataCardTrend: () => DataCardTrend,
   DataCards: () => DataCards,
   Divider: () => Divider,
+  EditableHeading: () => EditableHeading,
   Ellipsis: () => Ellipsis,
   Form: () => Form,
   FormErrorSummary: () => FormErrorSummary,
@@ -2080,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;
 };
 
@@ -2102,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;
     }
@@ -6898,6 +6899,15 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
+var variantElementMap = {
+  hero: DEFAULT_ELEMENT2,
+  heading1: DEFAULT_ELEMENT2,
+  heading2: "h2",
+  heading3: "h3",
+  heading4: "h4",
+  heading5: "h5",
+  heading6: "h6"
+};
 var StyledHeading = import_styled_components30.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
@@ -6921,15 +6931,6 @@ var StyledHeading = import_styled_components30.default.div`
   `}
   margin: 0;
 `;
-var variantElementMap = {
-  hero: DEFAULT_ELEMENT2,
-  heading1: DEFAULT_ELEMENT2,
-  heading2: "h2",
-  heading3: "h3",
-  heading4: "h4",
-  heading5: "h5",
-  heading6: "h6"
-};
 var HeadingComponent = (0, import_react18.forwardRef)(
   ({
     align = "left",
@@ -7522,6 +7523,23 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
+var bodyElement = "p";
+var labelElement = "span";
+var DEFAULT_ELEMENT4 = bodyElement;
+var variantElementMap2 = {
+  body1: bodyElement,
+  body2: bodyElement,
+  body3: bodyElement,
+  body4: bodyElement,
+  body1Mono: bodyElement,
+  body2Mono: bodyElement,
+  body3Mono: bodyElement,
+  body4Mono: bodyElement,
+  label1: labelElement,
+  label2: labelElement,
+  label3: labelElement,
+  label4: labelElement
+};
 var StyledText = import_styled_components37.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
@@ -7562,7 +7580,6 @@ var StyledText = import_styled_components37.default.div`
       display: block;
     `}
 `;
-var DEFAULT_ELEMENT4 = "div";
 var TextComponent = (0, import_react24.forwardRef)(
   ({
     align = "left",
@@ -7904,7 +7921,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)(
@@ -7918,7 +7935,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" });
@@ -9775,6 +9792,243 @@ var DataCardTrend = ({
     )
   ] });
 };
+
+// src/components/EditableHeading/EditableHeading.tsx
+var import_styled_components65 = __toESM(require("styled-components"));
+var import_react46 = require("react");
+var import_type_guards37 = require("@wistia/type-guards");
+var import_jsx_runtime214 = (
+  // If you are an AI, please don't remove this comment.
+  // eslint-disable-next-line styled-components-a11y/click-events-have-key-events, styled-components-a11y/no-static-element-interactions
+  require("react/jsx-runtime")
+);
+var variantStyleMap3 = { ...variantStyleMap, ...variantStyleMap2 };
+var variantElementMap3 = {
+  ...variantElementMap,
+  ...variantElementMap2
+};
+var textStyles = import_styled_components65.css`
+  ${({ $variant }) => variantStyleMap3[$variant]}
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+`;
+var compactStyles = import_styled_components65.css`
+  padding: var(--wui-space-01);
+  border-radius: var(--wui-border-radius-01);
+`;
+var defaultStyles = import_styled_components65.css`
+  padding: var(--wui-space-02);
+  border-radius: var(--wui-border-radius-02);
+`;
+var stylesMap = {
+  hero: "default",
+  heading1: "default",
+  heading2: "default",
+  heading3: "default",
+  heading4: "compact",
+  heading5: "compact",
+  heading6: "compact",
+  body1: "default",
+  body2: "compact",
+  body3: "compact",
+  body4: "compact",
+  label1: "default",
+  label2: "compact",
+  label3: "compact",
+  label4: "compact",
+  body1Mono: "default",
+  body2Mono: "compact",
+  body3Mono: "compact",
+  body4Mono: "compact"
+};
+var sharedStyles = import_styled_components65.css`
+  ${({ $variant }) => stylesMap[$variant] === "default" ? defaultStyles : compactStyles}
+`;
+var StyledInput = (0, import_styled_components65.default)(Input)`
+  :not([rows]) {
+    min-height: unset;
+  }
+
+  ${textStyles}
+  && {
+    border: none;
+    height: ${({ $height }) => `${$height}px`};
+    ${sharedStyles}
+  }
+  resize: vertical;
+  outline: 2px solid var(--wui-color-border);
+  outline-offset: -2px;
+  &:focus {
+    outline-color: var(--wui-color-focus-ring);
+  }
+
+  ${({ $width }) => (0, import_type_guards37.isNotNull)($width) && `width: ${$width}`};
+`;
+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 singleLineStyles = import_styled_components65.css`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var StyledHeading2 = import_styled_components65.default.span`
+  ${textStyles}
+  && {
+    margin: 0;
+    ${sharedStyles}
+    width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+    ${({ $singleLine }) => $singleLine && singleLineStyles}
+  }
+  display: block;
+  overflow-wrap: ${({ $singleLine }) => $singleLine ? "normal" : "anywhere"};
+  transition: all var(--wui-motion-duration-01) var(--wui-motion-ease);
+  ${({ $isEditingControlled }) => !$isEditingControlled && editableStyles}
+`;
+var resolveFullWidth = (fullWidth) => ({
+  heading: typeof fullWidth === "boolean" ? fullWidth : fullWidth.heading ?? true,
+  input: typeof fullWidth === "boolean" ? fullWidth : fullWidth.input ?? true
+});
+var EditableHeading = ({
+  value: controlledValue,
+  onValueChange,
+  onEditingChange,
+  tooltipText,
+  ariaLabel,
+  isEditing: controlledIsEditing,
+  renderTextAs: passedRenderTextAs,
+  textVariant = "heading1",
+  fullWidth = true,
+  singleLine = false,
+  disableOnBlur = false,
+  editingDisabled = false
+}) => {
+  const [internalIsEditing, setInternalIsEditing] = (0, import_react46.useState)(false);
+  const [internalValue, setInternalValue] = (0, import_react46.useState)(controlledValue);
+  const [previousValue, setPreviousValue] = (0, import_react46.useState)(controlledValue);
+  const [headingHeight, setHeadingHeight] = (0, import_react46.useState)("60");
+  const [headingWidth, setHeadingWidth] = (0, import_react46.useState)("auto");
+  const headingRef = (0, import_react46.useRef)(null);
+  const isValueControlled = (0, import_type_guards37.isNotNil)(onValueChange);
+  const isEditingControlled = (0, import_type_guards37.isNotNil)(controlledIsEditing);
+  const isEditing = isEditingControlled ? controlledIsEditing : internalIsEditing;
+  const value = isValueControlled ? controlledValue : internalValue;
+  (0, import_react46.useEffect)(() => {
+    if (isValueControlled) {
+      setInternalValue(controlledValue);
+      setPreviousValue(controlledValue);
+    }
+  }, [controlledValue, isValueControlled]);
+  const renderTextAs = passedRenderTextAs ?? variantElementMap3[textVariant];
+  (0, import_react46.useEffect)(() => {
+    if (headingRef.current) {
+      setHeadingHeight(`${headingRef.current.offsetHeight}`);
+      setHeadingWidth(`${headingRef.current.offsetWidth}`);
+    }
+  }, [isEditing]);
+  const handleValueChange = (newValue) => {
+    if (!isValueControlled) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+  const handleSetEditing = (editing) => {
+    if (editing) {
+      setPreviousValue(value);
+    }
+    if (!isEditingControlled) {
+      setInternalIsEditing(editing);
+    }
+    onEditingChange?.(editing);
+  };
+  const handleFinishEditing = () => {
+    const trimmedValue = value.trim();
+    if (trimmedValue === "" && !isValueControlled) {
+      setInternalValue(previousValue);
+    }
+    if (trimmedValue !== previousValue) {
+      handleValueChange(trimmedValue);
+    }
+    handleSetEditing(false);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      handleFinishEditing();
+    }
+    if (event.key === "Escape") {
+      if (!isValueControlled) {
+        setInternalValue(previousValue);
+      }
+      handleSetEditing(false);
+    }
+  };
+  const resolvedFullWidth = resolveFullWidth(fullWidth);
+  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+    StyledHeading2,
+    {
+      ref: headingRef,
+      $fullWidth: resolvedFullWidth.heading,
+      $isEditingControlled: isEditingControlled || editingDisabled,
+      $singleLine: singleLine,
+      $variant: textVariant,
+      as: renderTextAs,
+      onClick: () => !editingDisabled && !isEditingControlled && !isEditing && handleSetEditing(true),
+      children: value
+    }
+  );
+  if (editingDisabled) {
+    return HeadingComponent2;
+  }
+  if (isEditing) {
+    return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+      StyledInput,
+      {
+        $height: headingHeight,
+        $variant: textVariant,
+        $width: resolvedFullWidth.input ? headingWidth : null,
+        autoFocus: true,
+        fullWidth: resolvedFullWidth.input,
+        onBlur: () => !disableOnBlur && handleFinishEditing(),
+        onChange: (event) => handleValueChange(event.target.value),
+        onFocus: (event) => {
+          const { length } = event.currentTarget.value;
+          event.currentTarget.setSelectionRange(length, length);
+        },
+        onKeyDown: handleKeyDown,
+        type: singleLine ? "text" : "multiline",
+        value
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(import_jsx_runtime214.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+      Tooltip,
+      {
+        compact: true,
+        content: tooltipText ?? "",
+        children: HeadingComponent2
+      }
+    ),
+    !isEditingControlled && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+      "button",
+      {
+        "aria-label": ariaLabel,
+        onClick: () => handleSetEditing(true),
+        type: "button"
+      }
+    ) })
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -9794,6 +10048,7 @@ var DataCardTrend = ({
   DataCardTrend,
   DataCards,
   Divider,
+  EditableHeading,
   Ellipsis,
   Form,
   FormErrorSummary,