@kopexa/tiptap 17.6.17 → 17.7.0

package/dist/ui/bubble-menu/index.js

@@ -1,673 +0,0 @@
-"use client";
-"use strict";
-"use client";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/ui/bubble-menu/index.tsx
-var bubble_menu_exports = {};
-__export(bubble_menu_exports, {
-  BubbleMenu: () => BubbleMenu,
-  default: () => bubble_menu_default
-});
-module.exports = __toCommonJS(bubble_menu_exports);
-var import_toolbar3 = require("@kopexa/toolbar");
-var import_menus = require("@tiptap/react/menus");
-
-// src/ui/link-popover/link-popover.tsx
-var import_button = require("@kopexa/button");
-var import_icons2 = require("@kopexa/icons");
-var import_input = require("@kopexa/input");
-var import_popover = require("@kopexa/popover");
-var import_toolbar = require("@kopexa/toolbar");
-var import_react3 = require("react");
-
-// src/hooks/use-tiptap-editor.ts
-var import_react = require("@tiptap/react");
-var import_react2 = require("react");
-function useTiptapEditor(providedEditor) {
-  const { editor: coreEditor } = (0, import_react.useCurrentEditor)();
-  const mainEditor = (0, import_react2.useMemo)(
-    () => providedEditor || coreEditor,
-    [providedEditor, coreEditor]
-  );
-  const editorState = (0, import_react.useEditorState)({
-    editor: mainEditor,
-    selector(context) {
-      if (!context.editor) {
-        return {
-          editor: null,
-          editorState: void 0,
-          canCommand: void 0
-        };
-      }
-      return {
-        editor: context.editor,
-        editorState: context.editor.state,
-        canCommand: context.editor.can
-      };
-    }
-  });
-  return editorState || { editor: null };
-}
-
-// src/ui/link-popover/use-link-popover.ts
-var import_editor_utils = require("@kopexa/editor-utils");
-var import_icons = require("@kopexa/icons");
-var React = __toESM(require("react"));
-
-// src/utils/index.ts
-var MAX_FILE_SIZE = 5 * 1024 * 1024;
-var ATTR_WHITESPACE = (
-  // eslint-disable-next-line no-control-regex
-  // biome-ignore lint/suspicious/noControlCharactersInRegex: we can do this yay
-  /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g
-);
-function isAllowedUri(uri, protocols) {
-  const allowedProtocols = [
-    "http",
-    "https",
-    "ftp",
-    "ftps",
-    "mailto",
-    "tel",
-    "callto",
-    "sms",
-    "cid",
-    "xmpp"
-  ];
-  if (protocols) {
-    for (const protocol of protocols) {
-      const nextProtocol = typeof protocol === "string" ? protocol : protocol.scheme;
-      if (nextProtocol) {
-        allowedProtocols.push(nextProtocol);
-      }
-    }
-  }
-  return !uri || uri.replace(ATTR_WHITESPACE, "").match(
-    new RegExp(
-      // eslint-disable-next-line no-useless-escape
-      `^(?:(?:${allowedProtocols.join("|")}):|[^a-z]|[a-z0-9+.-]+(?:[^a-z+.-:]|$))`,
-      "i"
-    )
-  );
-}
-function sanitizeUrl(inputUrl, baseUrl, protocols) {
-  try {
-    const url = new URL(inputUrl, baseUrl);
-    if (isAllowedUri(url.href, protocols)) {
-      return url.href;
-    }
-  } catch {
-  }
-  return "#";
-}
-
-// src/ui/link-popover/use-link-popover.ts
-function canSetLink(editor) {
-  if (!editor || !editor.isEditable) return false;
-  return editor.can().setMark("link");
-}
-function isLinkActive(editor) {
-  if (!editor || !editor.isEditable) return false;
-  return editor.isActive("link");
-}
-function shouldShowLinkButton(props) {
-  const { editor, hideWhenUnavailable } = props;
-  const linkInSchema = (0, import_editor_utils.isMarkInSchema)("link", editor);
-  if (!linkInSchema || !editor) {
-    return false;
-  }
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canSetLink(editor);
-  }
-  return true;
-}
-function useLinkHandler(props) {
-  const { editor, onSetLink } = props;
-  const [url, setUrl] = React.useState(null);
-  React.useEffect(() => {
-    if (!editor) return;
-    const { href } = editor.getAttributes("link");
-    if (isLinkActive(editor) && url === null) {
-      setUrl(href || "");
-    }
-  }, [editor, url]);
-  React.useEffect(() => {
-    if (!editor) return;
-    const updateLinkState = () => {
-      const { href } = editor.getAttributes("link");
-      setUrl(href || "");
-    };
-    editor.on("selectionUpdate", updateLinkState);
-    return () => {
-      editor.off("selectionUpdate", updateLinkState);
-    };
-  }, [editor]);
-  const setLink = React.useCallback(() => {
-    if (!url || !editor) return;
-    const { selection } = editor.state;
-    const isEmpty = selection.empty;
-    let chain = editor.chain().focus();
-    chain = chain.extendMarkRange("link").setLink({ href: url });
-    if (isEmpty) {
-      chain = chain.insertContent({ type: "text", text: url });
-    }
-    chain.run();
-    setUrl(null);
-    onSetLink == null ? void 0 : onSetLink();
-  }, [editor, onSetLink, url]);
-  const removeLink = React.useCallback(() => {
-    if (!editor) return;
-    editor.chain().focus().extendMarkRange("link").unsetLink().setMeta("preventAutolink", true).run();
-    setUrl("");
-  }, [editor]);
-  const openLink = React.useCallback(
-    (target = "_blank", features = "noopener,noreferrer") => {
-      if (!url) return;
-      const safeUrl = sanitizeUrl(url, window.location.href);
-      if (safeUrl !== "#") {
-        window.open(safeUrl, target, features);
-      }
-    },
-    [url]
-  );
-  return {
-    url: url || "",
-    setUrl,
-    setLink,
-    removeLink,
-    openLink
-  };
-}
-function useLinkState(props) {
-  const { editor, hideWhenUnavailable = false } = props;
-  const canSet = canSetLink(editor);
-  const isActive = isLinkActive(editor);
-  const [isVisible, setIsVisible] = React.useState(false);
-  React.useEffect(() => {
-    if (!editor) return;
-    const handleSelectionUpdate = () => {
-      setIsVisible(
-        shouldShowLinkButton({
-          editor,
-          hideWhenUnavailable
-        })
-      );
-    };
-    handleSelectionUpdate();
-    editor.on("selectionUpdate", handleSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
-    };
-  }, [editor, hideWhenUnavailable]);
-  return {
-    isVisible,
-    canSet,
-    isActive
-  };
-}
-function useLinkPopover(config) {
-  const {
-    editor: providedEditor,
-    hideWhenUnavailable = false,
-    onSetLink
-  } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
-  const { isVisible, canSet, isActive } = useLinkState({
-    editor,
-    hideWhenUnavailable
-  });
-  const linkHandler = useLinkHandler({
-    editor,
-    onSetLink
-  });
-  return {
-    isVisible,
-    canSet,
-    isActive,
-    label: "Link",
-    Icon: import_icons.LinkIcon,
-    ...linkHandler
-  };
-}
-
-// src/ui/link-popover/link-popover.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var LinkButton = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_toolbar.ToolbarButton,
-    {
-      type: "button",
-      className,
-      variant: "ghost",
-      color: "default",
-      tabIndex: -1,
-      "aria-label": "Link",
-      title: "Link",
-      isIconOnly: !children,
-      ...props,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons2.LinkIcon, {})
-    }
-  );
-};
-var LinkMain = ({
-  url,
-  setUrl,
-  setLink,
-  removeLink,
-  openLink,
-  isActive,
-  onSave
-}) => {
-  const [isEditing, setIsEditing] = (0, import_react3.useState)(!isActive || !url);
-  (0, import_react3.useEffect)(() => {
-    setIsEditing(!isActive || !url);
-  }, [isActive, url]);
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      setLink();
-      setIsEditing(false);
-      onSave == null ? void 0 : onSave();
-    } else if (event.key === "Escape") {
-      event.preventDefault();
-      setIsEditing(false);
-    }
-  };
-  const handleSave = () => {
-    setLink();
-    setIsEditing(false);
-    onSave == null ? void 0 : onSave();
-  };
-  const handleEdit = () => {
-    setIsEditing(true);
-  };
-  if (isEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_input.Input,
-        {
-          type: "url",
-          placeholder: "Enter URL...",
-          value: url,
-          onChange: (e) => setUrl(e.target.value),
-          onKeyDown: handleKeyDown,
-          autoComplete: "off",
-          autoCorrect: "off",
-          autoCapitalize: "off",
-          className: "flex-1 h-8 text-sm",
-          autoFocus: true
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_button.IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: handleSave,
-          "aria-label": "Save link",
-          disabled: !url,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons2.CheckIcon, { className: "size-4" })
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "a",
-      {
-        href: url,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "flex-1 text-sm text-primary truncate max-w-[200px] hover:underline px-2",
-        onClick: (e) => {
-          e.preventDefault();
-          openLink();
-        },
-        children: url
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_button.IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: openLink,
-          "aria-label": "Open link in new tab",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons2.ExternalLinkIcon, { className: "size-4" })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_button.IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: handleEdit,
-          "aria-label": "Edit link",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons2.EditIcon, { className: "size-4" })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_button.IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: removeLink,
-          "aria-label": "Remove link",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons2.TrashIcon, { className: "size-4" })
-        }
-      )
-    ] })
-  ] });
-};
-function LinkPopover({
-  editor: providedEditor,
-  hideWhenUnavailable = false,
-  onSetLink,
-  onOpenChange,
-  autoOpenOnLinkActive = true,
-  onClick,
-  children,
-  ...buttonProps
-}) {
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
-  const {
-    isVisible,
-    canSet,
-    isActive,
-    url,
-    setUrl,
-    setLink,
-    removeLink,
-    openLink,
-    label
-  } = useLinkPopover({
-    editor,
-    hideWhenUnavailable,
-    onSetLink
-  });
-  const handleOnOpenChange = (0, import_react3.useCallback)(
-    (nextIsOpen) => {
-      setIsOpen(nextIsOpen);
-      onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
-    },
-    [onOpenChange]
-  );
-  const handleSetLink = (0, import_react3.useCallback)(() => {
-    setLink();
-    setIsOpen(false);
-  }, [setLink]);
-  const handleClick = (0, import_react3.useCallback)(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      setIsOpen(!isOpen);
-    },
-    [onClick, isOpen]
-  );
-  (0, import_react3.useEffect)(() => {
-    if (autoOpenOnLinkActive && isActive) {
-      setIsOpen(true);
-    }
-  }, [autoOpenOnLinkActive, isActive]);
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_popover.Popover.Root,
-    {
-      open: isOpen,
-      onOpenChange: handleOnOpenChange,
-      spacing: "dense",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_popover.Popover.Trigger,
-          {
-            render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              LinkButton,
-              {
-                "data-disabled": !canSet,
-                disabled: !canSet,
-                "data-active-state": isActive ? "on" : "off",
-                "aria-label": label,
-                "aria-pressed": isActive,
-                onClick: handleClick,
-                ...buttonProps
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          LinkMain,
-          {
-            url,
-            setUrl,
-            setLink: handleSetLink,
-            removeLink,
-            openLink,
-            isActive,
-            onSave: () => setIsOpen(false)
-          }
-        ) })
-      ]
-    }
-  );
-}
-LinkButton.displayName = "LinkButton";
-
-// src/ui/mark-button/index.tsx
-var import_editor_utils2 = require("@kopexa/editor-utils");
-var import_icons3 = require("@kopexa/icons");
-var import_toolbar2 = require("@kopexa/toolbar");
-var import_react4 = require("@tiptap/react");
-var import_react5 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var markIcons = {
-  bold: import_icons3.BoldIcon,
-  italic: import_icons3.ItalicIcon,
-  underline: import_icons3.UnderlineIcon,
-  strike: import_icons3.StrikeIcon,
-  code: import_icons3.CodeIcon,
-  superscript: import_icons3.SuperscriptIcon,
-  subscript: import_icons3.SubscriptIcon
-};
-var markShortcutKeys = {
-  bold: "mod+b",
-  italic: "mod+i",
-  underline: "mod+u",
-  strike: "mod+shift+s",
-  code: "mod+e",
-  superscript: "mod+.",
-  subscript: "mod+,"
-};
-function canToggleMark(editor, type) {
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils2.isMarkInSchema)(type, editor) || (0, import_editor_utils2.isNodeTypeSelected)(editor, ["image"]))
-    return false;
-  return editor.can().toggleMark(type);
-}
-function isMarkActive(editor, type) {
-  if (!editor) return false;
-  return editor.isActive(type);
-}
-function toggleMark(editor, type) {
-  if (!editor) return;
-  editor.chain().focus().toggleMark(type).run();
-}
-function isMarkButtonDisabled(editor, type, userDisabled = false) {
-  if (!editor) return true;
-  if (userDisabled) return true;
-  if (editor.isActive("codeBlock")) return true;
-  if (!canToggleMark(editor, type)) return true;
-  return false;
-}
-function shouldShowMarkButton(params) {
-  const { editor, type, hideWhenUnavailable, markInSchema } = params;
-  if (!markInSchema || !editor) {
-    return false;
-  }
-  if (hideWhenUnavailable) {
-    if ((0, import_react4.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
-      return false;
-    }
-  }
-  return true;
-}
-function getFormattedMarkName(type) {
-  return type.charAt(0).toUpperCase() + type.slice(1);
-}
-function useMarkState(editor, type, disabled = false) {
-  const markInSchema = (0, import_editor_utils2.isMarkInSchema)(type, editor);
-  const isDisabled = isMarkButtonDisabled(editor, type, disabled);
-  const isActive = isMarkActive(editor, type);
-  const Icon = markIcons[type];
-  const shortcutKey = markShortcutKeys[type];
-  const formattedName = getFormattedMarkName(type);
-  return {
-    markInSchema,
-    isDisabled,
-    isActive,
-    Icon,
-    shortcutKey,
-    formattedName
-  };
-}
-var MarkButton = ({
-  editor: providedEditor,
-  type,
-  text,
-  hideWhenUnavailable = false,
-  className = "",
-  disabled,
-  onClick,
-  children,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const {
-    markInSchema,
-    isDisabled,
-    isActive,
-    Icon,
-    shortcutKey,
-    formattedName
-  } = useMarkState(editor, type, disabled);
-  const handleClick = (0, import_react5.useCallback)(
-    (e) => {
-      onClick == null ? void 0 : onClick(e);
-      if (!e.defaultPrevented && !isDisabled && editor) {
-        toggleMark(editor, type);
-      }
-    },
-    [onClick, isDisabled, editor, type]
-  );
-  const show = (0, import_react5.useMemo)(() => {
-    return shouldShowMarkButton({
-      editor,
-      type,
-      hideWhenUnavailable,
-      markInSchema
-    });
-  }, [editor, type, hideWhenUnavailable, markInSchema]);
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_toolbar2.ToolbarButton,
-    {
-      type: "button",
-      className: className.trim(),
-      disabled: isDisabled,
-      variant: "ghost",
-      color: "default",
-      "data-active-state": isActive ? "on" : "off",
-      "data-disabled": isDisabled,
-      tabIndex: -1,
-      "aria-label": type,
-      "aria-pressed": isActive,
-      title: formattedName,
-      shortcutKeys: shortcutKey,
-      onClick: handleClick,
-      isIconOnly: true,
-      ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, {})
-    }
-  );
-};
-
-// src/ui/bubble-menu/index.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function BubbleMenu({ editor }) {
-  if (!editor) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_menus.BubbleMenu,
-    {
-      editor,
-      shouldShow: ({ editor: e, state, view }) => {
-        const { selection } = state;
-        const { empty } = selection;
-        if (!view.hasFocus()) return false;
-        if (empty) return false;
-        if (e.isActive("codeBlock")) return false;
-        if (e.isActive("link")) return false;
-        if (e.isActive("variable")) return false;
-        if (!e.isEditable) return false;
-        return true;
-      },
-      options: {
-        placement: "top",
-        offset: 8
-      },
-      className: "rounded-lg border bg-background shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_toolbar3.Toolbar, { radius: "md", border: "none", className: "p-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_toolbar3.ToolbarGroup, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MarkButton, { type: "bold" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MarkButton, { type: "italic" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MarkButton, { type: "strike" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MarkButton, { type: "code" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_toolbar3.ToolbarSeparator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_toolbar3.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkPopover, { autoOpenOnLinkActive: false }) })
-      ] })
-    }
-  );
-}
-var bubble_menu_default = BubbleMenu;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  BubbleMenu
-});

package/dist/ui/bubble-menu/index.mjs

@@ -1,16 +0,0 @@
-"use client";
-"use client";
-import {
-  BubbleMenu,
-  bubble_menu_default
-} from "../../chunk-2UDCL55K.mjs";
-import "../../chunk-LNVWG34E.mjs";
-import "../../chunk-LVNUU67N.mjs";
-import "../../chunk-7VGROP26.mjs";
-import "../../chunk-VTKJPVNM.mjs";
-import "../../chunk-P55PLOHR.mjs";
-import "../../chunk-TZQQ6C2Q.mjs";
-export {
-  BubbleMenu,
-  bubble_menu_default as default
-};

package/dist/ui/codeblock-button/code-block-button.d.mts

@@ -1,20 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps } from '@kopexa/button';
-import { UseCodeBlockConfig } from './use-code-block.mjs';
-import '@kopexa/icons';
-import '@tiptap/react';
-
-interface CodeBlockButtonProps extends Omit<ButtonProps, "type">, UseCodeBlockConfig {
-    /**
-     * Optional text to display alongside the icon.
-     */
-    text?: string;
-    /**
-     * Optional show shortcut keys in the button.
-     * @default false
-     */
-    showShortcut?: boolean;
-}
-declare const CodeBlockButton: ({ editor: providedEditor, text, hideWhenUnavailable, onToggled, showShortcut, onClick, children, ...buttonProps }: CodeBlockButtonProps) => react_jsx_runtime.JSX.Element | null;
-
-export { CodeBlockButton, type CodeBlockButtonProps };