Updated/Added packages for latest release

Author: Mohamed7Imran

components/base/README.md

@@ -43,4 +43,4 @@ Check the changelog [here](https://github.com/syncfusion/react-ui-components/blo
 
 See [LICENSE FILE](https://github.com/syncfusion/react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info.
 
-© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
+© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. 

components/base/gulpfile.js

@@ -48,5 +48,5 @@ gulp.task('styles', function (done) {
 /**
  * Build ts and scss files
  */
-gulp.task('build', gulp.series('scripts', 'styles'));
+gulp.task('build', gulp.series('scripts'));
 

components/base/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@syncfusion/react-base",
-  "version": "29.2.4",
-  "description": "A common package of core Pure React base, methods and class definitions",
+  "version": "30.1.37",
+  "description": "A common package of core React base, methods and class definitions",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
   "keywords": [
@@ -21,6 +21,9 @@
   "homepage": "https://www.syncfusion.com/react-ui-components",
   "module": "./index.js",
   "readme": "README.md",
+  "bin": {
+    "syncfusion-license": "bin/syncfusion-license.js"
+  },
   "devDependencies": {
     "gulp": "4.0.2",
     "gulp-typescript": "5.0.1",

components/base/src/drag-util.tsx

@@ -0,0 +1,211 @@
+import { select } from './dom';
+import { IPosition } from './draggable';
+import { isNullOrUndefined } from './util';
+
+/**
+ * Position coordinates
+ */
+export interface PositionCoordinates {
+    left?: number;
+    top?: number;
+    bottom?: number;
+    right?: number;
+}
+
+/**
+ * Coordinates for element position
+ *
+ * @private
+ */
+export interface Coordinates {
+    /**
+     * Defines the x Coordinate of page.
+     */
+    pageX?: number;
+    /**
+     * Defines the y Coordinate of page.
+     */
+    pageY?: number;
+    /**
+     * Defines the x Coordinate of client.
+     */
+    clientX?: number;
+    /**
+     * Defines the y Coordinate of client.
+     */
+    clientY?: number;
+}
+
+let left: number;
+let top: number;
+let width: number;
+let height: number;
+
+/**
+ * Sets the permitted drag area boundaries based on the defined dragArea.
+ *
+ * @private
+ * @param {HTMLElement | string} dragArea - The element or selector string defining the drag area
+ * @param {Element} helperElement - The helper element used in dragging
+ * @param {PositionCoordinates} borderWidth - The border width of the drag area
+ * @param {PositionCoordinates} padding - The padding of the drag area
+ * @param {PositionCoordinates} dragLimit - The object to store the calculated drag limits
+ * @returns {void}
+ */
+export function setDragArea(
+    dragArea: HTMLElement | string, helperElement: Element,
+    borderWidth: PositionCoordinates, padding: PositionCoordinates,
+    dragLimit: PositionCoordinates
+): void {
+    let eleWidthBound: number;
+    let eleHeightBound: number;
+    let top: number = 0;
+    let left: number = 0;
+    let ele: HTMLElement;
+    const type: string = typeof dragArea;
+    if (type === 'string') {
+        ele = select(dragArea as string) as HTMLElement;
+    } else {
+        ele = dragArea as HTMLElement;
+    }
+    if (ele) {
+        const elementArea: ClientRect | DOMRect = ele.getBoundingClientRect();
+        eleWidthBound = ele.scrollWidth ? ele.scrollWidth : elementArea.right - elementArea.left;
+        eleHeightBound = ele.scrollHeight ? (dragArea && !isNullOrUndefined(helperElement) && helperElement.classList.contains('sf-treeview')) ? ele.clientHeight : ele.scrollHeight : elementArea.bottom - elementArea.top;
+        const keys: string[] = ['Top', 'Left', 'Bottom', 'Right'];
+        const styles: CSSStyleDeclaration = getComputedStyle(ele);
+        for (let i: number = 0; i < keys.length; i++) {
+            const key: string = keys[parseInt(i.toString(), 10)];
+            const tborder: string = styles['border' + key + 'Width'];
+            const tpadding: string = styles['padding' + key];
+            const lowerKey: string = key.toLowerCase();
+            (borderWidth as Record<string, number>)[`${lowerKey}`] = isNaN(parseFloat(tborder)) ? 0 : parseFloat(tborder);
+            (padding as Record<string, number>)[`${lowerKey}`] = isNaN(parseFloat(tpadding)) ? 0 : parseFloat(tpadding);
+        }
+        if (dragArea && !isNullOrUndefined(helperElement) && helperElement.classList.contains('sf-treeview')) {
+            top = elementArea.top + document.scrollingElement.scrollTop;
+        } else {
+            top = elementArea.top;
+        }
+        left = elementArea.left;
+        dragLimit.left = left + borderWidth.left + padding.left;
+        dragLimit.top = ele.offsetTop + borderWidth.top + padding.top;
+        dragLimit.right = left + eleWidthBound - (borderWidth.right + padding.right);
+        dragLimit.bottom = top + eleHeightBound - (borderWidth.bottom + padding.bottom);
+    }
+}
+
+/**
+ * Retrieves the document's full height or width, considering the scroll and offset values.
+ *
+ * @private
+ * @param {string} str - The dimension type ('Height' or 'Width') to calculate.
+ * @returns {number} - The maximum value across scroll, offset, and client dimensions.
+ */
+export function getDocumentWidthHeight(str: 'Height' | 'Width'): number {
+    const docBody: HTMLElement = document.body;
+    const docEle: HTMLElement = document.documentElement;
+    return Math.max(
+        docBody['scroll' + str], docEle['scroll' + str],
+        docBody['offset' + str], docEle['offset' + str],
+        docEle['client' + str]
+    );
+}
+
+/**
+ * Determines if a given element is within the bounds of the viewport.
+ *
+ * @private
+ * @param {HTMLElement} el - The element to check.
+ * @returns {boolean} - True if the element is in the viewport, false otherwise.
+ */
+export function elementInViewport(el: HTMLElement): boolean {
+    top = el.offsetTop;
+    left = el.offsetLeft;
+    width = el.offsetWidth;
+    height = el.offsetHeight;
+    while (el.offsetParent) {
+        el = el.offsetParent as HTMLElement;
+        top += el.offsetTop;
+        left += el.offsetLeft;
+    }
+    return (
+        top >= window.pageYOffset &&
+        left >= window.pageXOffset &&
+        (top + height) <= (window.pageYOffset + window.innerHeight) &&
+        (left + width) <= (window.pageXOffset + window.innerWidth)
+    );
+}
+
+/**
+ * Gets the coordinates of a mouse or touch event.
+ *
+ * @private
+ * @param {MouseEvent | TouchEvent} evt - The event object.
+ * @returns {Coordinates} - The x and y coordinates of the page and client.
+ */
+export function getCoordinates(evt: MouseEvent & TouchEvent): Coordinates {
+    if (evt.type.indexOf('touch') > -1) {
+        return evt.changedTouches[0];
+    }
+    return evt as Coordinates;
+}
+
+/**
+ * Calculates the parent position of the element relative to the document.
+ *
+ * @private
+ * @param {Element} ele - The element for which the parent position is calculated.
+ * @returns {IPosition} - The calculated left and top position.
+ */
+export function calculateParentPosition(ele: Element): IPosition {
+    if (isNullOrUndefined(ele)) {
+        return { left: 0, top: 0 };
+    }
+    const rect: ClientRect | DOMRect = ele.getBoundingClientRect();
+    const style: CSSStyleDeclaration = getComputedStyle(ele);
+    return {
+        left: (rect.left + window.pageXOffset) - parseInt(style.marginLeft, 10),
+        top: (rect.top + window.pageYOffset) - parseInt(style.marginTop, 10)
+    };
+}
+
+/**
+ * Retrieves all elements from a point defined by event coordinates.
+ *
+ * @private
+ * @param {MouseEvent | TouchEvent} evt - The event object containing coordinates.
+ * @returns {Element[]} - An array of elements located at the event's point.
+ */
+export function getPathElements(evt: MouseEvent & TouchEvent): Element[] {
+    const elementTop: number = evt.clientX > 0 ? evt.clientX : 0;
+    const elementLeft: number = evt.clientY > 0 ? evt.clientY : 0;
+    return document.elementsFromPoint(elementTop, elementLeft);
+}
+
+/**
+ * Identifies the scrollable parent of the current node element.
+ *
+ * @private
+ * @param {Element[]} nodes - The path of elements to check.
+ * @param {boolean} reverse - Whether to reverse the array to check from bottom to top.
+ * @returns {Element | null} - The first scrollable parent element or null.
+ */
+export function getScrollParent(nodes: Element[], reverse: boolean): Element | null {
+    const nodeList: Element[] = reverse ? [...nodes].reverse() : nodes;
+    for (const node of nodeList) {
+        const computedStyle: CSSStyleDeclaration = window.getComputedStyle(node);
+        const overflowY: string = computedStyle.overflowY;
+        if ((overflowY === 'auto' || overflowY === 'scroll') &&
+            node.scrollHeight > node.clientHeight) {
+            return node;
+        }
+    }
+    const scrollingElement: HTMLElement = document.scrollingElement as HTMLElement;
+    const docOverflowY: string = window.getComputedStyle(scrollingElement).overflowY;
+    if (docOverflowY === 'visible') {
+        scrollingElement.style.overflow = 'auto';
+        return scrollingElement;
+    }
+    return null;
+}

components/base/src/dragdrop.tsx

@@ -0,0 +1,131 @@
+import { createContext, useContext, useState, ReactNode, RefObject, useRef } from 'react';
+import { IDroppable } from './droppable';
+
+/**
+ * Interface defining the methods available in the DragDropContext.
+ *
+ * @private
+ */
+export interface DragDropContextProps {
+    /**
+     * Registers a droppable instance with a unique identifier.
+     *
+     * @param {string} id - The unique identifier for the droppable instance
+     * @param {DragDropContext} instance - The droppable instance to register
+     * @returns {void}
+     */
+    registerDroppable: (id: string, instance: DroppableContext) => void;
+
+    /**
+     * Unregisters a droppable instance by its identifier.
+     *
+     * @param {string} id - The unique identifier of the droppable instance to unregister
+     * @returns {void}
+     */
+    unregisterDroppable: (id: string) => void;
+
+    /**
+     * Retrieves all registered droppable instances.
+     *
+     * @returns {Record<string, DragDropContext>} A record of all droppable instances indexed by their identifiers
+     */
+    getAllDroppables: () => Record<string, DroppableContext>;
+}
+
+/**
+ * Interface defining the Droppable instance reference with element.
+ *
+ * @private
+ */
+export interface DroppableContext extends IDroppable {
+    element?: RefObject<HTMLElement>;
+}
+
+const DragDropContext: React.Context<DragDropContextProps | undefined> = createContext<DragDropContextProps | undefined>(undefined);
+
+/**
+ * Custom hook that provides access to the droppable context functionality.
+ *
+ * @private
+ * @returns {DragDropContextProps} The droppable context methods and state
+ */
+export const useDragDropContext: () => DragDropContextProps | undefined = (): DragDropContextProps | undefined => {
+    const context: DragDropContextProps | undefined = useContext(DragDropContext);
+    if (!context) {
+        return undefined;
+    }
+    return context;
+};
+
+/**
+ * Props for the DragDrop component.
+ */
+interface DragDropProps {
+    /**
+     * The child components that will have access to the droppable context.
+     */
+    children: ReactNode;
+}
+
+/**
+ * Provider component that manages droppable instances throughout the application, provides registration and retrieval methods for droppable elements.
+ *
+ * @param {DragDropProps} props - The component props
+ * @param {ReactNode} props.children - The child elements to render within the provider
+ * @returns {Element} The rendered DragDrop provider component
+ */
+export const DragDrop: React.FC<DragDropProps> = ({ children }: { children: ReactNode }) => {
+    const [droppables, setDroppables] = useState<Record<string, DroppableContext>>({});
+    const currentDroppables: RefObject<Record<string, DroppableContext>> = useRef<Record<string, DroppableContext>>({});
+
+    /**
+     * Registers a droppable instance with a unique identifier.
+     *
+     * @param {string} id - The unique identifier for the droppable instance
+     * @param {DragDropContext} instance - The droppable instance to register
+     * @returns {void}
+     */
+    const registerDroppable: (id: string, instance: DroppableContext) => void = (id: string, instance: DroppableContext): void => {
+        setDroppables((prev: Record<string, DroppableContext>) => {
+            const updated: {[x: string]: DroppableContext} = {
+                ...prev,
+                [id]: instance
+            };
+            currentDroppables.current = updated;
+            return updated;
+        });
+    };
+
+    /**
+     * Unregisters a droppable instance by its identifier.
+     *
+     * @param {string} id - The unique identifier of the droppable instance to unregister
+     * @returns {void}
+     */
+    const unregisterDroppable: (id: string) => void = (id: string): void => {
+        setDroppables((prev: Record<string, DroppableContext>) => {
+            const newDroppables: Record<string, DroppableContext> = { ...prev };
+            delete newDroppables[`${id}`];
+            return newDroppables;
+        });
+    };
+
+    /**
+     * Retrieves all registered droppable instances.
+     *
+     * @returns {Record<string, DragDropContext>} A record of all droppable instances indexed by their identifiers
+     */
+    const getAllDroppables: () => Record<string, DroppableContext> = (): Record<string, DroppableContext> => {
+        return currentDroppables.current || droppables;
+    };
+
+    return (
+        <DragDropContext.Provider value={{
+            registerDroppable,
+            unregisterDroppable,
+            getAllDroppables
+        }}>
+            {children}
+        </DragDropContext.Provider>
+    );
+};