@progress/kendo-react-common 13.4.0-develop.4 → 13.4.0-develop.5

package/kendopaste/useKendoPaste.d.ts

@@ -0,0 +1,111 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * Options for the useKendoPaste hook.
+ */
+export interface UseKendoPasteOptions {
+    /**
+     * The field name to listen for in the smart paste event.
+     * This is typically the component's `name` or `id` prop.
+     * When the event contains a value for this field, the onValueChange callback is called.
+     *
+     * If undefined or empty, the hook will not subscribe to events.
+     */
+    fieldName?: string;
+    /**
+     * Callback fired when a value is received for this field from the smart paste event.
+     *
+     * @param value - The new value from the smart paste event
+     */
+    onValueChange: (value: any) => void;
+    /**
+     * Whether the smart paste subscription is enabled.
+     * When false, the hook will not listen for smart paste events.
+     *
+     * @default true
+     */
+    enabled?: boolean;
+}
+/**
+ * Options for subscribing to smart paste events in class components.
+ */
+export interface KendoPasteSubscriptionOptions {
+    /**
+     * The field name to listen for in the smart paste event.
+     */
+    fieldName?: string;
+    /**
+     * Callback fired when a value is received for this field from the smart paste event.
+     */
+    onValueChange: (value: any) => void;
+}
+/**
+ * Result of subscribing to smart paste events, used to unsubscribe later.
+ */
+export interface KendoPasteSubscription {
+    /**
+     * Unsubscribe from smart paste events.
+     * Call this in componentWillUnmount to clean up the event listener.
+     */
+    unsubscribe: () => void;
+}
+/**
+ * Subscribe to smart paste events for class components.
+ * Call this in componentDidMount and store the result.
+ * Call unsubscribe() in componentWillUnmount.
+ *
+ * @param element - The DOM element to use for finding the event target
+ * @param options - Configuration options for the smart paste subscription
+ * @returns A subscription object with an unsubscribe method
+ *
+ * @example
+ * ```tsx
+ * class MyComponent extends React.Component {
+ *   private KendoPasteSubscription?: KendoPasteSubscription;
+ *
+ *   componentDidMount() {
+ *     this.KendoPasteSubscription = subscribeToKendoPaste(this.element, {
+ *       fieldName: this.props.name,
+ *       onValueChange: (value) => this.handleSmartPasteValue(value)
+ *     });
+ *   }
+ *
+ *   componentWillUnmount() {
+ *     this.KendoPasteSubscription?.unsubscribe();
+ *   }
+ * }
+ * ```
+ */
+export declare function subscribeToKendoPaste(element: Element | null | undefined, options: KendoPasteSubscriptionOptions): KendoPasteSubscription;
+/**
+ * A React hook that subscribes a component to smart paste events.
+ * When a SmartPasteButton dispatches a populate event, this hook will
+ * call the onValueChange callback if the event contains a value for the specified field.
+ *
+ * The field is identified by the `name` or `id` prop of the component.
+ * Works with both KendoReact Form components and native HTML form elements.
+ *
+ * @param elementRef - A ref to the DOM element that will be used to find the event target
+ * @param options - Configuration options for the smart paste subscription
+ *
+ * @example
+ * ```tsx
+ * const inputRef = React.useRef<HTMLInputElement>(null);
+ * const [value, setValue] = React.useState('');
+ *
+ * // Using name prop as field identifier
+ * useKendoPaste(inputRef, {
+ *   fieldName: 'firstName', // matches the name prop
+ *   onValueChange: (newValue) => setValue(newValue)
+ * });
+ *
+ * return <input ref={inputRef} name="firstName" value={value} onChange={(e) => setValue(e.target.value)} />;
+ * ```
+ */
+export declare function useKendoPaste(elementRef: React.RefObject<Element | null>, options: UseKendoPasteOptions): void;

package/kendopaste/useKendoPaste.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),i=require("./KendoPasteEvent.js");function T(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(n,e,o.get?o:{enumerable:!0,get:()=>t[e]})}}return n.default=t,Object.freeze(n)}const d=T(N);function _(t,n){const{fieldName:e,onValueChange:o}=n;if(!t||!e)return{unsubscribe:()=>{}};const s=l(t),c=u=>{const a=u,{fieldValues:r}=a.detail;if(r&&e in r){const f=r[e];o(f)}};return s.addEventListener(i.KENDO_PASTE_EVENT_NAME,c),{unsubscribe:()=>{s.removeEventListener(i.KENDO_PASTE_EVENT_NAME,c)}}}function g(t,n){const{fieldName:e,onValueChange:o,enabled:s=!0}=n,c=d.useRef(o);d.useEffect(()=>{c.current=o},[o]),d.useEffect(()=>{if(!s||!e)return;const u=t.current;if(!u)return;const a=l(u),r=f=>{const b=f,{fieldValues:E}=b.detail;if(E&&e in E){const v=E[e];c.current(v)}};return a.addEventListener(i.KENDO_PASTE_EVENT_NAME,r),()=>{a.removeEventListener(i.KENDO_PASTE_EVENT_NAME,r)}},[t,e,s])}function l(t){const n=t.closest("form");if(n)return n;const e=t.closest(".k-form");return e||document.body}exports.subscribeToKendoPaste=_;exports.useKendoPaste=g;

package/kendopaste/useKendoPaste.mjs

@@ -0,0 +1,60 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as l from "react";
+import { KENDO_PASTE_EVENT_NAME as i } from "./KendoPasteEvent.mjs";
+function g(n, t) {
+  const { fieldName: e, onValueChange: r } = t;
+  if (!n || !e)
+    return { unsubscribe: () => {
+    } };
+  const s = E(n), u = (c) => {
+    const a = c, { fieldValues: o } = a.detail;
+    if (o && e in o) {
+      const f = o[e];
+      r(f);
+    }
+  };
+  return s.addEventListener(i, u), {
+    unsubscribe: () => {
+      s.removeEventListener(i, u);
+    }
+  };
+}
+function T(n, t) {
+  const { fieldName: e, onValueChange: r, enabled: s = !0 } = t, u = l.useRef(r);
+  l.useEffect(() => {
+    u.current = r;
+  }, [r]), l.useEffect(() => {
+    if (!s || !e)
+      return;
+    const c = n.current;
+    if (!c)
+      return;
+    const a = E(c), o = (f) => {
+      const v = f, { fieldValues: d } = v.detail;
+      if (d && e in d) {
+        const m = d[e];
+        u.current(m);
+      }
+    };
+    return a.addEventListener(i, o), () => {
+      a.removeEventListener(i, o);
+    };
+  }, [n, e, s]);
+}
+function E(n) {
+  const t = n.closest("form");
+  if (t)
+    return t;
+  const e = n.closest(".k-form");
+  return e || document.body;
+}
+export {
+  g as subscribeToKendoPaste,
+  T as useKendoPaste
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-common",
-  "version": "13.4.0-develop.4",
+  "version": "13.4.0-develop.5",
   "description": "React Common package delivers common utilities that can be used with the KendoReact UI components. KendoReact Common Utilities package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",