@intlayer/design-system 6.1.6 → 7.0.0-canary.0

package/dist/components/EditableField/EditableFieldInput.d.ts

@@ -1,47 +0,0 @@
-import { FC } from 'react';
-import { InputProps } from '../Input';
-/**
- * Props for the EditableFieldInput component, extending standard Input props
- */
-type EditableFieldInputProps = InputProps & {
-    /** Callback function called when the user saves the edited value */
-    onSave?: (value: string) => void;
-    /** Callback function called when the user cancels the edit operation */
-    onCancel?: () => void;
-};
-/**
- * EditableFieldInput Component
- *
- * An inline editable input field that displays as read-only text until clicked.
- * When activated, it shows an input field with save and cancel buttons.
- *
- * @example
- * ```tsx
- * <EditableFieldInput
- *   defaultValue="Edit me"
- *   placeholder="Click to edit..."
- *   onSave={(value) => console.log('Saved:', value)}
- *   onCancel={() => console.log('Cancelled')}
- * />
- * ```
- *
- * ## Features
- * - **Inline Editing**: Click to edit, displays as text when not editing
- * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks
- * - **Keyboard Support**: Accessible keyboard navigation
- * - **Input Variants**: Supports all Input component variants and sizes
- * - **Auto-save on Click Away**: Saves automatically when clicking outside
- * - **Ref Forwarding**: Exposes the underlying input element reference
- *
- * ## Accessibility
- * - Uses semantic HTML with proper ARIA attributes
- * - Keyboard accessible with tab navigation
- * - Screen reader friendly with descriptive labels
- * - Focus management for edit mode transitions
- *
- * @param props - EditableFieldInputProps extending InputProps
- * @returns React functional component
- */
-export declare const EditableFieldInput: FC<EditableFieldInputProps>;
-export {};
-//# sourceMappingURL=EditableFieldInput.d.ts.map

package/dist/components/EditableField/EditableFieldInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditableFieldInput.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAkD,MAAM,OAAO,CAAC;AAChF,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAGlD;;GAEG;AACH,KAAK,uBAAuB,GAAG,UAAU,GAAG;IAC1C,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAyC1D,CAAC"}

package/dist/components/EditableField/EditableFieldInput.mjs

@@ -1,42 +0,0 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { useRef, useImperativeHandle, useMemo } from "react";
-import { Input } from "../Input/Input.mjs";
-import "lucide-react";
-import "../Input/Checkbox.mjs";
-import { EditableFieldLayout } from "./EditableFieldLayout.mjs";
-const EditableFieldInput = ({
-  onSave,
-  onCancel,
-  ref,
-  ...props
-}) => {
-  const inputRef = useRef(null);
-  const handleSave = () => {
-    onSave?.(inputRef.current?.value ?? "");
-  };
-  const handleCancel = () => {
-    if (inputRef.current) {
-      inputRef.current.value = inputRef.current.defaultValue ?? "";
-    }
-    onCancel?.();
-  };
-  useImperativeHandle(ref, () => inputRef.current);
-  const value = useMemo(
-    () => props.value ?? inputRef.current?.value ?? props.defaultValue,
-    [props.value, props.defaultValue, inputRef.current?.value]
-  );
-  return /* @__PURE__ */ jsx(
-    EditableFieldLayout,
-    {
-      value,
-      onCancel: handleCancel,
-      onSave: handleSave,
-      children: /* @__PURE__ */ jsx(Input, { ref: inputRef, ...props })
-    }
-  );
-};
-export {
-  EditableFieldInput
-};
-//# sourceMappingURL=EditableFieldInput.mjs.map

package/dist/components/EditableField/EditableFieldInput.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditableFieldInput.mjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/**\n * Props for the EditableFieldInput component, extending standard Input props\n */\ntype EditableFieldInputProps = InputProps & {\n  /** Callback function called when the user saves the edited value */\n  onSave?: (value: string) => void;\n  /** Callback function called when the user cancels the edit operation */\n  onCancel?: () => void;\n};\n\n/**\n * EditableFieldInput Component\n *\n * An inline editable input field that displays as read-only text until clicked.\n * When activated, it shows an input field with save and cancel buttons.\n *\n * @example\n * ```tsx\n * <EditableFieldInput\n *   defaultValue=\"Edit me\"\n *   placeholder=\"Click to edit...\"\n *   onSave={(value) => console.log('Saved:', value)}\n *   onCancel={() => console.log('Cancelled')}\n * />\n * ```\n *\n * ## Features\n * - **Inline Editing**: Click to edit, displays as text when not editing\n * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks\n * - **Keyboard Support**: Accessible keyboard navigation\n * - **Input Variants**: Supports all Input component variants and sizes\n * - **Auto-save on Click Away**: Saves automatically when clicking outside\n * - **Ref Forwarding**: Exposes the underlying input element reference\n *\n * ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n *\n * @param props - EditableFieldInputProps extending InputProps\n * @returns React functional component\n */\nexport const EditableFieldInput: FC<EditableFieldInputProps> = ({\n  onSave,\n  onCancel,\n  ref,\n  ...props\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(inputRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (inputRef.current) {\n      inputRef.current.value = inputRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  // Expose the input ref to parent components\n  useImperativeHandle(ref as Ref<HTMLElement>, () => inputRef.current!);\n\n  const value = useMemo(\n    () =>\n      (props.value as string) ??\n      inputRef.current?.value ??\n      (props.defaultValue as string),\n\n    [props.value, props.defaultValue, inputRef.current?.value]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={value}\n      onCancel={handleCancel}\n      onSave={handleSave}\n    >\n      <Input ref={inputRef} {...props} />\n    </EditableFieldLayout>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAiDO,MAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,WAAW,OAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEvB,aAAS,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAC5D;AACA,eAAA;AAAA,EACF;AAGA,sBAAoB,KAAyB,MAAM,SAAS,OAAQ;AAEpE,QAAM,QAAQ;AAAA,IACZ,MACG,MAAM,SACP,SAAS,SAAS,SACjB,MAAM;AAAA,IAET,CAAC,MAAM,OAAO,MAAM,cAAc,SAAS,SAAS,KAAK;AAAA,EAAA;AAG3D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAAA,oBAAC,OAAA,EAAM,KAAK,UAAW,GAAG,MAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGvC;"}

package/dist/components/EditableField/EditableFieldLayout.cjs

@@ -1,139 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const lucideReact = require("lucide-react");
-const ReactExports = require("react");
-const utils_cn = require("../../utils/cn.cjs");
-const components_Button_Button = require("../Button/Button.cjs");
-const EditableFieldLayout = ({
-  value = "",
-  onCancel,
-  onSave,
-  onClick,
-  children,
-  isDisabled,
-  ...props
-}) => {
-  const [isEditing, setIsEditing] = ReactExports.useState(false);
-  const editableFieldRef = ReactExports.useRef(null);
-  const handleSave = (e) => {
-    e.stopPropagation();
-    setIsEditing(false);
-    onSave();
-  };
-  const handleCancel = (e) => {
-    e.stopPropagation();
-    setIsEditing(false);
-    onCancel();
-  };
-  const result = !value || value === "" ? "-" : value;
-  const handleClickOutside = ReactExports.useCallback(
-    (e) => {
-      const selection = window.getSelection();
-      if (selection && selection.toString().trim() !== "") {
-        return;
-      }
-      if (editableFieldRef.current && !editableFieldRef.current.contains(e.target)) {
-        setIsEditing(false);
-        onSave();
-      }
-    },
-    [onSave]
-  );
-  ReactExports.useEffect(() => {
-    if (isEditing) {
-      document.addEventListener("click", handleClickOutside);
-    } else {
-      document.removeEventListener("click", handleClickOutside);
-    }
-    return () => document.removeEventListener("click", handleClickOutside);
-  }, [handleClickOutside, isEditing]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      className: "group/editable-field flex gap-2",
-      role: "button",
-      tabIndex: 0,
-      onClick: (e) => {
-        setIsEditing(true);
-        onClick?.(e);
-      },
-      ref: editableFieldRef,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: utils_cn.cn("flex flex-1 gap-2", isEditing ? "display" : "hidden"),
-            children: [
-              children,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                components_Button_Button.Button,
-                {
-                  label: "Save",
-                  variant: components_Button_Button.ButtonVariant.HOVERABLE,
-                  size: components_Button_Button.ButtonSize.ICON_SM,
-                  color: components_Button_Button.ButtonColor.TEXT,
-                  Icon: lucideReact.Check,
-                  onClick: handleSave,
-                  disabled: isDisabled,
-                  className: "!text-current",
-                  role: "button",
-                  tabIndex: 0,
-                  "aria-label": "Save changes",
-                  "data-testid": "editable-field-save-button"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                components_Button_Button.Button,
-                {
-                  label: "Cancel",
-                  color: components_Button_Button.ButtonColor.TEXT,
-                  variant: components_Button_Button.ButtonVariant.HOVERABLE,
-                  className: "!text-current",
-                  size: components_Button_Button.ButtonSize.ICON_SM,
-                  Icon: lucideReact.X,
-                  onClick: handleCancel,
-                  disabled: isDisabled,
-                  role: "button",
-                  tabIndex: 0,
-                  "aria-label": "Cancel changes",
-                  "data-testid": "editable-field-cancel-button"
-                }
-              )
-            ]
-          },
-          String(isEditing)
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: utils_cn.cn("flex flex-1 gap-2", isEditing ? "hidden" : "display"),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6", children: result }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                components_Button_Button.Button,
-                {
-                  label: "Edit",
-                  Icon: lucideReact.Pencil,
-                  color: components_Button_Button.ButtonColor.TEXT,
-                  variant: components_Button_Button.ButtonVariant.HOVERABLE,
-                  size: components_Button_Button.ButtonSize.ICON_SM,
-                  className: "invisible !text-current group-hover/editable-field:visible",
-                  disabled: isDisabled,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    setIsEditing(true);
-                  }
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-exports.EditableFieldLayout = EditableFieldLayout;
-//# sourceMappingURL=EditableFieldLayout.cjs.map

package/dist/components/EditableField/EditableFieldLayout.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditableFieldLayout.cjs","sources":["../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\ntype EditableFieldLayoutProps = {\n  value?: string | null | undefined;\n  onCancel: () => void;\n  onSave: () => void;\n  children: ReactNode;\n  isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n  value = '',\n  onCancel,\n  onSave,\n  onClick,\n  children,\n  isDisabled,\n  ...props\n}) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n  const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onSave();\n  };\n\n  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onCancel();\n  };\n\n  const result = !value || value === '' ? '-' : value;\n\n  const handleClickOutside = useCallback(\n    (e: MouseEvent) => {\n      // Check if there's any text selected\n      const selection = window.getSelection();\n      if (selection && selection.toString().trim() !== '') {\n        // If there is a selection, do not trigger the save and exit early.\n        return;\n      }\n\n      // Proceed if the click is truly outside the component.\n      if (\n        editableFieldRef.current &&\n        !editableFieldRef.current.contains(e.target as Node)\n      ) {\n        setIsEditing(false);\n        onSave();\n      }\n    },\n    [onSave]\n  );\n\n  useEffect(() => {\n    if (isEditing) {\n      document.addEventListener('click', handleClickOutside);\n    } else {\n      document.removeEventListener('click', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('click', handleClickOutside);\n  }, [handleClickOutside, isEditing]);\n\n  return (\n    <span\n      className=\"group/editable-field flex gap-2\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={(e) => {\n        setIsEditing(true);\n        onClick?.(e);\n      }}\n      ref={editableFieldRef}\n      {...props}\n    >\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n        key={String(isEditing)}\n      >\n        {children}\n        <Button\n          label=\"Save\"\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          color={ButtonColor.TEXT}\n          Icon={Check}\n          onClick={handleSave}\n          disabled={isDisabled}\n          className=\"!text-current\"\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Save changes\"\n          data-testid=\"editable-field-save-button\"\n        />\n        <Button\n          label=\"Cancel\"\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          className=\"!text-current\"\n          size={ButtonSize.ICON_SM}\n          Icon={X}\n          onClick={handleCancel}\n          disabled={isDisabled}\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Cancel changes\"\n          data-testid=\"editable-field-cancel-button\"\n        />\n      </div>\n\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n      >\n        <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n          {result}\n        </span>\n        <Button\n          label=\"Edit\"\n          Icon={Pencil}\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          className=\"invisible !text-current group-hover/editable-field:visible\"\n          disabled={isDisabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            setIsEditing(true);\n          }}\n        />\n      </div>\n    </span>\n  );\n};\n"],"names":["useState","useRef","useCallback","useEffect","jsxs","cn","jsx","Button","ButtonVariant","ButtonSize","ButtonColor","Check","X","Pencil"],"mappings":"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"}

package/dist/components/EditableField/EditableFieldLayout.d.ts

@@ -1,11 +0,0 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
-type EditableFieldLayoutProps = {
-    value?: string | null | undefined;
-    onCancel: () => void;
-    onSave: () => void;
-    children: ReactNode;
-    isDisabled?: boolean;
-} & HTMLAttributes<HTMLSpanElement>;
-export declare const EditableFieldLayout: FC<EditableFieldLayoutProps>;
-export {};
-//# sourceMappingURL=EditableFieldLayout.d.ts.map

package/dist/components/EditableField/EditableFieldLayout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditableFieldLayout.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,cAAc,EACnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,KAAK,wBAAwB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEpC,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA8H5D,CAAC"}

package/dist/components/EditableField/EditableFieldLayout.mjs

@@ -1,139 +0,0 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Check, X, Pencil } from "lucide-react";
-import { useState, useRef, useCallback, useEffect } from "react";
-import { cn } from "../../utils/cn.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
-const EditableFieldLayout = ({
-  value = "",
-  onCancel,
-  onSave,
-  onClick,
-  children,
-  isDisabled,
-  ...props
-}) => {
-  const [isEditing, setIsEditing] = useState(false);
-  const editableFieldRef = useRef(null);
-  const handleSave = (e) => {
-    e.stopPropagation();
-    setIsEditing(false);
-    onSave();
-  };
-  const handleCancel = (e) => {
-    e.stopPropagation();
-    setIsEditing(false);
-    onCancel();
-  };
-  const result = !value || value === "" ? "-" : value;
-  const handleClickOutside = useCallback(
-    (e) => {
-      const selection = window.getSelection();
-      if (selection && selection.toString().trim() !== "") {
-        return;
-      }
-      if (editableFieldRef.current && !editableFieldRef.current.contains(e.target)) {
-        setIsEditing(false);
-        onSave();
-      }
-    },
-    [onSave]
-  );
-  useEffect(() => {
-    if (isEditing) {
-      document.addEventListener("click", handleClickOutside);
-    } else {
-      document.removeEventListener("click", handleClickOutside);
-    }
-    return () => document.removeEventListener("click", handleClickOutside);
-  }, [handleClickOutside, isEditing]);
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: "group/editable-field flex gap-2",
-      role: "button",
-      tabIndex: 0,
-      onClick: (e) => {
-        setIsEditing(true);
-        onClick?.(e);
-      },
-      ref: editableFieldRef,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn("flex flex-1 gap-2", isEditing ? "display" : "hidden"),
-            children: [
-              children,
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  label: "Save",
-                  variant: ButtonVariant.HOVERABLE,
-                  size: ButtonSize.ICON_SM,
-                  color: ButtonColor.TEXT,
-                  Icon: Check,
-                  onClick: handleSave,
-                  disabled: isDisabled,
-                  className: "!text-current",
-                  role: "button",
-                  tabIndex: 0,
-                  "aria-label": "Save changes",
-                  "data-testid": "editable-field-save-button"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  label: "Cancel",
-                  color: ButtonColor.TEXT,
-                  variant: ButtonVariant.HOVERABLE,
-                  className: "!text-current",
-                  size: ButtonSize.ICON_SM,
-                  Icon: X,
-                  onClick: handleCancel,
-                  disabled: isDisabled,
-                  role: "button",
-                  tabIndex: 0,
-                  "aria-label": "Cancel changes",
-                  "data-testid": "editable-field-cancel-button"
-                }
-              )
-            ]
-          },
-          String(isEditing)
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn("flex flex-1 gap-2", isEditing ? "hidden" : "display"),
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6", children: result }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  label: "Edit",
-                  Icon: Pencil,
-                  color: ButtonColor.TEXT,
-                  variant: ButtonVariant.HOVERABLE,
-                  size: ButtonSize.ICON_SM,
-                  className: "invisible !text-current group-hover/editable-field:visible",
-                  disabled: isDisabled,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    setIsEditing(true);
-                  }
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  EditableFieldLayout
-};
-//# sourceMappingURL=EditableFieldLayout.mjs.map

package/dist/components/EditableField/EditableFieldLayout.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditableFieldLayout.mjs","sources":["../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\ntype EditableFieldLayoutProps = {\n  value?: string | null | undefined;\n  onCancel: () => void;\n  onSave: () => void;\n  children: ReactNode;\n  isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n  value = '',\n  onCancel,\n  onSave,\n  onClick,\n  children,\n  isDisabled,\n  ...props\n}) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n  const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onSave();\n  };\n\n  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onCancel();\n  };\n\n  const result = !value || value === '' ? '-' : value;\n\n  const handleClickOutside = useCallback(\n    (e: MouseEvent) => {\n      // Check if there's any text selected\n      const selection = window.getSelection();\n      if (selection && selection.toString().trim() !== '') {\n        // If there is a selection, do not trigger the save and exit early.\n        return;\n      }\n\n      // Proceed if the click is truly outside the component.\n      if (\n        editableFieldRef.current &&\n        !editableFieldRef.current.contains(e.target as Node)\n      ) {\n        setIsEditing(false);\n        onSave();\n      }\n    },\n    [onSave]\n  );\n\n  useEffect(() => {\n    if (isEditing) {\n      document.addEventListener('click', handleClickOutside);\n    } else {\n      document.removeEventListener('click', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('click', handleClickOutside);\n  }, [handleClickOutside, isEditing]);\n\n  return (\n    <span\n      className=\"group/editable-field flex gap-2\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={(e) => {\n        setIsEditing(true);\n        onClick?.(e);\n      }}\n      ref={editableFieldRef}\n      {...props}\n    >\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n        key={String(isEditing)}\n      >\n        {children}\n        <Button\n          label=\"Save\"\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          color={ButtonColor.TEXT}\n          Icon={Check}\n          onClick={handleSave}\n          disabled={isDisabled}\n          className=\"!text-current\"\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Save changes\"\n          data-testid=\"editable-field-save-button\"\n        />\n        <Button\n          label=\"Cancel\"\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          className=\"!text-current\"\n          size={ButtonSize.ICON_SM}\n          Icon={X}\n          onClick={handleCancel}\n          disabled={isDisabled}\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Cancel changes\"\n          data-testid=\"editable-field-cancel-button\"\n        />\n      </div>\n\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n      >\n        <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n          {result}\n        </span>\n        <Button\n          label=\"Edit\"\n          Icon={Pencil}\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          className=\"invisible !text-current group-hover/editable-field:visible\"\n          disabled={isDisabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            setIsEditing(true);\n          }}\n        />\n      </div>\n    </span>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/EditableField/EditableFieldTextArea.cjs

@@ -1,62 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const ReactExports = require("react");
-const components_TextArea_AutoSizeTextArea = require("../TextArea/AutoSizeTextArea.cjs");
-require("clsx");
-require("tailwind-merge");
-require("../Input/Input.cjs");
-require("lucide-react");
-require("../Input/Checkbox.cjs");
-require("@intlayer/editor-react");
-require("@tanstack/react-query");
-require("@intlayer/api");
-require("@intlayer/config/built");
-require("../../better-auth.CiuwFiHM-C2nBKRMa.cjs");
-const components_EditableField_EditableFieldLayout = require("./EditableFieldLayout.cjs");
-const EditableFieldTextArea = ({
-  onSave,
-  onCancel,
-  ref,
-  ...props
-}) => {
-  const textAreaRef = ReactExports.useRef(null);
-  ReactExports.useImperativeHandle(ref, () => textAreaRef.current);
-  const handleSave = () => {
-    onSave?.(textAreaRef.current?.value ?? "");
-  };
-  const handleCancel = () => {
-    if (textAreaRef.current) {
-      textAreaRef.current.value = textAreaRef.current.defaultValue ?? "";
-    }
-    onCancel?.();
-  };
-  const memoValue = props.value ?? textAreaRef.current?.value ?? props.defaultValue ?? "";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    components_EditableField_EditableFieldLayout.EditableFieldLayout,
-    {
-      value: memoValue,
-      onCancel: handleCancel,
-      onSave: handleSave,
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        components_TextArea_AutoSizeTextArea.AutoSizedTextArea,
-        {
-          className: "leading-6",
-          ref: textAreaRef,
-          onClick: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          },
-          ...props
-        }
-      )
-    }
-  );
-};
-exports.EditableFieldTextArea = EditableFieldTextArea;
-//# sourceMappingURL=EditableFieldTextArea.cjs.map

package/dist/components/EditableField/EditableFieldTextArea.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditableFieldTextArea.cjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useImperativeHandle, useRef, type FC, type Ref } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/**\n * Props for the EditableFieldTextArea component, extending AutoSizedTextAreaProps\n */\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  /** Callback function called when the user saves the edited value */\n  onSave?: (value: string) => void;\n  /** Callback function called when the user cancels the edit operation */\n  onCancel?: () => void;\n};\n\n/**\n * EditableFieldTextArea Component\n *\n * An inline editable textarea field that displays as read-only text until clicked.\n * When activated, it shows an auto-sized textarea with save and cancel buttons.\n * Perfect for multiline text editing with automatic height adjustment.\n *\n * @example\n * ```tsx\n * <EditableFieldTextArea\n *   defaultValue=\"Multiline text content\"\n *   placeholder=\"Click to edit...\"\n *   maxRows={10}\n *   onSave={(value) => console.log('Saved:', value)}\n *   onCancel={() => console.log('Cancelled')}\n * />\n * ```\n *\n * ## Features\n * - **Inline Editing**: Click to edit, displays as formatted text when not editing\n * - **Auto-Sizing**: Automatically adjusts height to fit content\n * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks\n * - **Multiline Support**: Preserves line breaks and formatting\n * - **Max Rows Control**: Configurable maximum height with scroll\n * - **Auto-save on Click Away**: Saves automatically when clicking outside\n * - **Ref Forwarding**: Exposes the underlying textarea element reference\n *\n * ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n * - Preserves whitespace and formatting for screen readers\n *\n * @param props - EditableFieldTextAreaProps extending AutoSizedTextAreaProps\n * @returns React functional component\n */\nexport const EditableFieldTextArea: FC<EditableFieldTextAreaProps> = ({\n  onSave,\n  onCancel,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref as Ref<HTMLElement>, () => textAreaRef.current!);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(textAreaRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  const memoValue =\n    (props.value as string) ??\n    textAreaRef.current?.value ??\n    (props.defaultValue as string) ??\n    '';\n\n  return (\n    <EditableFieldLayout\n      value={memoValue}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n    >\n      <AutoSizedTextArea\n        className=\"leading-6\"\n        ref={textAreaRef}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        {...props}\n      />\n    </EditableFieldLayout>\n  );\n};\n"],"names":["useRef","useImperativeHandle","jsx","EditableFieldLayout","AutoSizedTextArea"],"mappings":";;;;;;;;;;;;;;;;;AAqDO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,cAAcA,aAAAA,OAA4B,IAAI;AAGpDC,eAAAA,oBAAoB,KAAyB,MAAM,YAAY,OAAQ;AAEvE,QAAM,aAAa,MAAM;AAEvB,aAAS,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAClE;AACA,eAAA;AAAA,EACF;AAEA,QAAM,YACH,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;AAEF,SACEC,2BAAAA;AAAAA,IAACC,6CAAAA;AAAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACJ;AAAA,MAEA,UAAAD,2BAAAA;AAAAA,QAACE,qCAAAA;AAAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAA;AACF,cAAE,gBAAA;AAAA,UACJ;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;;"}

package/dist/components/EditableField/EditableFieldTextArea.d.ts

@@ -1,51 +0,0 @@
-import { FC } from 'react';
-import { AutoSizedTextAreaProps } from '../TextArea';
-/**
- * Props for the EditableFieldTextArea component, extending AutoSizedTextAreaProps
- */
-type EditableFieldTextAreaProps = AutoSizedTextAreaProps & {
-    /** Callback function called when the user saves the edited value */
-    onSave?: (value: string) => void;
-    /** Callback function called when the user cancels the edit operation */
-    onCancel?: () => void;
-};
-/**
- * EditableFieldTextArea Component
- *
- * An inline editable textarea field that displays as read-only text until clicked.
- * When activated, it shows an auto-sized textarea with save and cancel buttons.
- * Perfect for multiline text editing with automatic height adjustment.
- *
- * @example
- * ```tsx
- * <EditableFieldTextArea
- *   defaultValue="Multiline text content"
- *   placeholder="Click to edit..."
- *   maxRows={10}
- *   onSave={(value) => console.log('Saved:', value)}
- *   onCancel={() => console.log('Cancelled')}
- * />
- * ```
- *
- * ## Features
- * - **Inline Editing**: Click to edit, displays as formatted text when not editing
- * - **Auto-Sizing**: Automatically adjusts height to fit content
- * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks
- * - **Multiline Support**: Preserves line breaks and formatting
- * - **Max Rows Control**: Configurable maximum height with scroll
- * - **Auto-save on Click Away**: Saves automatically when clicking outside
- * - **Ref Forwarding**: Exposes the underlying textarea element reference
- *
- * ## Accessibility
- * - Uses semantic HTML with proper ARIA attributes
- * - Keyboard accessible with tab navigation
- * - Screen reader friendly with descriptive labels
- * - Focus management for edit mode transitions
- * - Preserves whitespace and formatting for screen readers
- *
- * @param props - EditableFieldTextAreaProps extending AutoSizedTextAreaProps
- * @returns React functional component
- */
-export declare const EditableFieldTextArea: FC<EditableFieldTextAreaProps>;
-export {};
-//# sourceMappingURL=EditableFieldTextArea.d.ts.map

package/dist/components/EditableField/EditableFieldTextArea.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditableFieldTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AACvE,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAG7E;;GAEG;AACH,KAAK,0BAA0B,GAAG,sBAAsB,GAAG;IACzD,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAkDhE,CAAC"}

package/dist/components/EditableField/EditableFieldTextArea.mjs

@@ -1,62 +0,0 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { useRef, useImperativeHandle } from "react";
-import { AutoSizedTextArea } from "../TextArea/AutoSizeTextArea.mjs";
-import "clsx";
-import "tailwind-merge";
-import "../Input/Input.mjs";
-import "lucide-react";
-import "../Input/Checkbox.mjs";
-import "@intlayer/editor-react";
-import "@tanstack/react-query";
-import "@intlayer/api";
-import "@intlayer/config/built";
-import "../../better-auth.CiuwFiHM-7umXOENE.js";
-import { EditableFieldLayout } from "./EditableFieldLayout.mjs";
-const EditableFieldTextArea = ({
-  onSave,
-  onCancel,
-  ref,
-  ...props
-}) => {
-  const textAreaRef = useRef(null);
-  useImperativeHandle(ref, () => textAreaRef.current);
-  const handleSave = () => {
-    onSave?.(textAreaRef.current?.value ?? "");
-  };
-  const handleCancel = () => {
-    if (textAreaRef.current) {
-      textAreaRef.current.value = textAreaRef.current.defaultValue ?? "";
-    }
-    onCancel?.();
-  };
-  const memoValue = props.value ?? textAreaRef.current?.value ?? props.defaultValue ?? "";
-  return /* @__PURE__ */ jsx(
-    EditableFieldLayout,
-    {
-      value: memoValue,
-      onCancel: handleCancel,
-      onSave: handleSave,
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      children: /* @__PURE__ */ jsx(
-        AutoSizedTextArea,
-        {
-          className: "leading-6",
-          ref: textAreaRef,
-          onClick: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          },
-          ...props
-        }
-      )
-    }
-  );
-};
-export {
-  EditableFieldTextArea
-};
-//# sourceMappingURL=EditableFieldTextArea.mjs.map

package/dist/components/EditableField/EditableFieldTextArea.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditableFieldTextArea.mjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useImperativeHandle, useRef, type FC, type Ref } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/**\n * Props for the EditableFieldTextArea component, extending AutoSizedTextAreaProps\n */\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  /** Callback function called when the user saves the edited value */\n  onSave?: (value: string) => void;\n  /** Callback function called when the user cancels the edit operation */\n  onCancel?: () => void;\n};\n\n/**\n * EditableFieldTextArea Component\n *\n * An inline editable textarea field that displays as read-only text until clicked.\n * When activated, it shows an auto-sized textarea with save and cancel buttons.\n * Perfect for multiline text editing with automatic height adjustment.\n *\n * @example\n * ```tsx\n * <EditableFieldTextArea\n *   defaultValue=\"Multiline text content\"\n *   placeholder=\"Click to edit...\"\n *   maxRows={10}\n *   onSave={(value) => console.log('Saved:', value)}\n *   onCancel={() => console.log('Cancelled')}\n * />\n * ```\n *\n * ## Features\n * - **Inline Editing**: Click to edit, displays as formatted text when not editing\n * - **Auto-Sizing**: Automatically adjusts height to fit content\n * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks\n * - **Multiline Support**: Preserves line breaks and formatting\n * - **Max Rows Control**: Configurable maximum height with scroll\n * - **Auto-save on Click Away**: Saves automatically when clicking outside\n * - **Ref Forwarding**: Exposes the underlying textarea element reference\n *\n * ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n * - Preserves whitespace and formatting for screen readers\n *\n * @param props - EditableFieldTextAreaProps extending AutoSizedTextAreaProps\n * @returns React functional component\n */\nexport const EditableFieldTextArea: FC<EditableFieldTextAreaProps> = ({\n  onSave,\n  onCancel,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref as Ref<HTMLElement>, () => textAreaRef.current!);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(textAreaRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  const memoValue =\n    (props.value as string) ??\n    textAreaRef.current?.value ??\n    (props.defaultValue as string) ??\n    '';\n\n  return (\n    <EditableFieldLayout\n      value={memoValue}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n    >\n      <AutoSizedTextArea\n        className=\"leading-6\"\n        ref={textAreaRef}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        {...props}\n      />\n    </EditableFieldLayout>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqDO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,cAAc,OAA4B,IAAI;AAGpD,sBAAoB,KAAyB,MAAM,YAAY,OAAQ;AAEvE,QAAM,aAAa,MAAM;AAEvB,aAAS,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAClE;AACA,eAAA;AAAA,EACF;AAEA,QAAM,YACH,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;AAEF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACJ;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAA;AACF,cAAE,gBAAA;AAAA,UACJ;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;"}

package/dist/components/EditableField/index.cjs

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const components_EditableField_EditableFieldInput = require("./EditableFieldInput.cjs");
-const components_EditableField_EditableFieldTextArea = require("./EditableFieldTextArea.cjs");
-exports.EditableFieldInput = components_EditableField_EditableFieldInput.EditableFieldInput;
-exports.EditableFieldTextArea = components_EditableField_EditableFieldTextArea.EditableFieldTextArea;
-//# sourceMappingURL=index.cjs.map

package/dist/components/EditableField/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/EditableField/index.d.ts

@@ -1,3 +0,0 @@
-export * from './EditableFieldInput';
-export * from './EditableFieldTextArea';
-//# sourceMappingURL=index.d.ts.map