jsuites 5.1.1 → 5.1.2

package/dist/jsuites.css

@@ -2087,6 +2087,7 @@ div[data-before]:before {
     user-select: none;
     outline: none;
     position: relative;
+    min-height: 26px;
 }
 
 .jpicker-header {
@@ -2098,12 +2099,8 @@ div[data-before]:before {
     box-sizing: border-box;
     text-align: left;
     outline: none;
-
     line-height: 24px;
-    padding: 2px;
-    padding-left: 12px;
-    padding-right: 35px;
-    outline: none;
+    padding: 2px 35px 2px 12px;
     border-radius: 4px;
 }
 

package/dist/jsuites.js

@@ -2500,6 +2500,7 @@ function Mask() {
                         d[0] = d[0].replace('*', '\t');
                         d[0] = d[0].replace(new RegExp(/_-/g), '');
                         d[0] = d[0].replace(new RegExp(/_/g), '');
+                        d[0] = d[0].replace(new RegExp(/"/g), '');
                         d[0] = d[0].replace('##0.###','##0.000');
                         d[0] = d[0].replace('##0.##','##0.00');
                         d[0] = d[0].replace('##0.#','##0.0');
@@ -12702,7 +12703,7 @@ var jSuites = {
     ...dictionary,
     ...helpers,
     /** Current version */
-    version: '5.1.0',
+    version: '5.1.1',
     /** Bind new extensions to Jsuites */
     setExtensions: function(o) {
         if (typeof(o) == 'object') {

package/jest.config.js

@@ -0,0 +1,11 @@
+/** @type {import('jest').Config} */
+const config = {
+  verbose: true,
+  testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    html: '<div id="component"></div>'
+  },
+  setupFiles: ["jest-canvas-mock"],
+};
+
+module.exports = config;

package/package.json

@@ -20,26 +20,31 @@
     ],
     "scripts": {
         "test": "jest",
+        "test:watch": "jest --watchAll",
         "build": "npx webpack --config webpack.config.js",
         "start": "npx webpack serve --history-api-fallback"
     },
     "main": "dist/jsuites.js",
     "types": "dist/jsuites.d.ts",
-    "version": "5.1.1",
+    "version": "5.1.2",
     "bugs": "https://github.com/jsuites/jsuites/issues",
     "homepage": "https://github.com/jsuites/jsuites",
     "docs": "https://jsuites.net",
     "download": "https://github.com/jsuites/jsuites/archive/master.zip",
     "devDependencies": {
+        "@testing-library/dom": "^9.3.4",
         "copy-webpack-plugin": "^11.0.0",
         "css-loader": "^6.7.2",
         "css-minimizer-webpack-plugin": "^3.4.1",
-        "jest": "^28.1.1",
+        "jest": "^28.1.3",
+        "jest-canvas-mock": "^2.5.2",
+        "jest-environment-jsdom": "^29.7.0",
+        "jsdom": "^24.0.0",
         "mini-css-extract-plugin": "^2.7.0",
         "style-loader": "^3.3.1",
-        "url-loader": "^4.1.1",
         "ts-loader": "^9.4.1",
         "typescript": "^4.9.3",
+        "url-loader": "^4.1.1",
         "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.15.1"

package/react/calendar/index.d.ts

@@ -0,0 +1,105 @@
+/**
+ * Official Type definitions for LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+
+declare function Component(el: HTMLElement, options?: Component.Options): Component.Instance;
+
+declare namespace Component {
+    interface Options {
+        // Render type: [ default | year-month-picker ]. Default: default
+        type?: 'default' | 'year-month-picker';
+        // Range restriction [dateStart, dateEnd]
+        validRange?: [string|null, string|null];
+        // Starting weekday - 0 for sunday, 6 for saturday
+        startingDay?: number,
+        // Date format. Default 'DD/MM/YYYY'
+        format?: string,
+        // Allow keyboard date entry
+        readonly?: boolean,
+        // Today is default
+        today?: boolean,
+        // Show timepicker
+        time?: boolean,
+        // Show the reset button
+        resetButton?: boolean,
+        // Placeholder
+        placeholder?: string,
+        // Translations can be done here
+        months?: string[],
+        monthsFull?: string[],
+        weekdays?: string[],
+        textDone?: string[],
+        textReset?: string[],
+        textUpdate?: string[],
+        // Start with the value
+        value?: string,
+        // Fullscreen (this is automatic set for screen size < 800)
+        fullscreen: boolean,
+        // Create the calendar closed as default
+        opened: boolean,
+        // Events
+        onopen: () => void,
+        onclose: () => void,
+        onchange: () => void,
+        onupdate: () => void,
+        // Internal mode controller
+        mode: null,
+        position: null,
+        // Data type
+        dataType: null,
+        // Controls
+        controls: boolean,
+        /** Auto select confirms the current date as the new value onblur. Default: true */
+        autoSelect: boolean;
+    }
+
+    interface Instance {
+        /** Close the calendar picker */
+        close: () => void;
+        /** Internal date value */
+        date: number[];
+        /** Convert a formatted string to a valid raw date */
+        fromFormatted: string;
+        /** Show the calendar in day picker mode */
+        getDays: () => void;
+        /** Show the calendar in month picker mode */
+        getMonths: () => void;
+        /** Show the calendar in year picker mode */
+        getYears: () => void;
+        /** Get the current date */
+        getValue: () => string;
+        /** Advance to the next month, year or group of years depending on the current view mode */
+        next: () => void;
+        /** Previous month, year or group of years depending on the current view mode */
+        prev: () => void;
+        /** Open the calendar picker */
+        open: () => void;
+        /** Initial settings */
+        options: Options;
+        /** Reset date */
+        reset: () => void;
+        /** Change the configurations */
+        setOptions
+        /** Change the date for today */
+        setToday: () => void;
+        /** Change the value for a given date */
+        setValue: (newDate: string) => void;
+        /** Type calendar */
+        type: 'calendar';
+        /** Alias for setValue */
+        update: () => void;
+        /** Auto select confirms the current date as the new value onblur. Default: true */
+        autoSelect: boolean;
+    }
+}
+
+
+interface Calendar {
+    (): any
+    [key: string]: any
+}
+
+declare function Calendar<Calendar>(props: Component.Options): any;
+export default Calendar;

package/react/calendar/index.js

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import React, { useRef, useEffect } from "react";
+import jSuites from '../../dist/jsuites';
+
+// @ts-ignore
+export default React.forwardRef((props, mainReference) => {
+    // Dom element
+    const Ref = useRef(null);
+
+    // Get the properties for the spreadsheet
+    let options = { ...props };
+
+    useEffect(() => {
+        // @ts-ignore
+        if (!Ref.current.innerHTML) {
+            mainReference.current = jSuites.calendar(Ref.current, options);
+        }
+    }, []);
+
+    useEffect(() => {
+        mainReference.current.setValue(props.value)
+    }, [props.value])
+
+    let prop = {
+        ref: Ref,
+    };
+
+    return React.createElement("input", prop);
+})

package/react/color/index.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Official Type definitions for LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+
+declare function Component(el: HTMLElement, options?: Component.Options): Component.Instance;
+
+declare namespace Component {
+    interface Options {
+        /** Color picker input place holder */
+        placeholder: string;
+        /** Initial value */
+        value: string;
+        /** When the color picker is opened */
+        onopen: (el: HTMLElement, instance: Color) => void;
+        /** When the color picker is closed */
+        onclose: (el: HTMLElement, instance: Color) => void;
+        /** When the color is changed */
+        onchange: (el: HTMLElement, value: string, instance: Color) => void;
+        /** Automatically close the color picker when a new color is clicked */
+        closeOnChange: boolean;
+        /** Color palette options */
+        palette: string[];
+        /** Fixed or normal */
+        position: 'absolute' | null;
+        /** Button label */
+        doneLabel: string;
+        /** Button label */
+        resetLabel: string;
+        /** Fullscreen mode */
+        fullscreen: boolean;
+        /** Start the picker opened */
+        opened: boolean;
+    }
+
+    interface Instance {
+        /** Close the calendar picker */
+        close: () => void;
+        /** Internal date value */
+        date: number[];
+        /** Convert a formatted string to a valid raw date */
+        fromFormatted: string;
+        /** Show the calendar in day picker mode */
+        getDays: () => void;
+        /** Show the calendar in month picker mode */
+        getMonths: () => void;
+        /** Show the calendar in year picker mode */
+        getYears: () => void;
+        /** Get the current date */
+        getValue: () => string;
+        /** Advance to the next month, year or group of years depending on the current view mode */
+        next: () => void;
+        /** Previous month, year or group of years depending on the current view mode */
+        prev: () => void;
+        /** Open the calendar picker */
+        open: () => void;
+        /** Initial settings */
+        options: Options;
+        /** Reset date */
+        reset: () => void;
+        /** Change the configurations */
+        setOptions
+        /** Change the date for today */
+        setToday: () => void;
+        /** Change the value for a given date */
+        setValue: (newDate: string) => void;
+        /** Type calendar */
+        type: 'calendar';
+        /** Alias for setValue */
+        update: () => void;
+        /** Auto select confirms the current date as the new value onblur. Default: true */
+        autoSelect: boolean;
+    }
+}
+
+
+interface Color {
+    (): any
+    [key: string]: any
+}
+
+declare function Color<Color>(props: Component.Options): any;
+export default Color;

package/react/color/index.js

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import React, { useRef, useEffect } from "react";
+import jSuites from '../../dist/jsuites';
+
+// @ts-ignore
+export default React.forwardRef((props, mainReference) => {
+    // Dom element
+    const Ref = useRef(null);
+
+    // Get the properties for the spreadsheet
+    let options = { ...props };
+
+    useEffect(() => {
+        // @ts-ignore
+        if (!Ref.current.innerHTML) {
+            mainReference.current = jSuites.color(Ref.current, options);
+        }
+    }, []);
+
+    useEffect(() => {
+        mainReference.current.setValue(props.value)
+    }, [props.value])
+
+    let prop = {
+        ref: Ref,
+    };
+
+    return React.createElement("input", prop);
+})

package/react/contextmenu/index.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Official Type definitions for LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+
+declare function Component(el: HTMLElement, options?: Component.Options): Component.Instance;
+
+interface Items {
+    /** Context menu item type: line | divisor | default */
+    type?: 'line' | 'divisor' | 'default';
+    /** Context menu item title */
+    title: string;
+    /** Context menu icon key. (Material icon key icon identification) */
+    icon?: string;
+    /** HTML id property of the item DOM element */
+    id?: string;
+    /** Item is disabled */
+    disabled?: boolean;
+    /** Onclick event for the contextmenu item */
+    onclick?: (instance: object, e: MouseEvent) => void;
+    /** A short description or instruction for the item. Normally a shortcut. Ex. CTRL + C */
+    shortcut?: string;
+    /** Show this text when the user mouse over the element */
+    tooltip?: string;
+    /** Submenu */
+    submenu?: Array<Items>;
+}
+
+declare namespace Component {
+    interface Options {
+        /** Items for the contextmenu */
+        items: Items[],
+        /** General onclick handler */
+        onclick: null,
+    }
+
+    interface Instance {
+        /** Close the color picker */
+        close: () =>  void;
+        /** Get the current color in hex */
+        create: (items: Items[]) =>  void;
+        /** Open the contextmenu. You can overwrite the items each time the menu is opened */
+        open: (event: MouseEvent, items?: Items[]) =>  void;
+        /** Open the contextmenu. You can overwrite the items each time the menu is opened */
+        options: Options;
+        /** Initial settings */
+        isOpened: () => boolean;
+        /** Internal type */
+        type: 'contextmenu';
+    }
+}
+
+
+interface Contextmenu {
+    (): any
+    [key: string]: any
+}
+
+declare function Contextmenu<Contextmenu>(props: Component.Options): any;
+export default Contextmenu;

package/react/contextmenu/index.js

@@ -0,0 +1,25 @@
+// @ts-nocheck
+import React, { useRef, useEffect } from "react";
+import jSuites from '../../dist/jsuites';
+
+// @ts-ignore
+export default React.forwardRef((props, mainReference) => {
+    // Dom element
+    const Ref = useRef(null);
+
+    // Get the properties for the spreadsheet
+    let options = { ...props };
+
+    useEffect(() => {
+        // @ts-ignore
+        if (!Ref.current.innerHTML) {
+            mainReference.current = jSuites.contextmenu(Ref.current, options);
+        }
+    }, []);
+
+    let prop = {
+        ref: Ref,
+    };
+
+    return React.createElement("div", prop);
+})

package/react/dropdown/index.d.ts

@@ -0,0 +1,184 @@
+/**
+ * Official Type definitions for LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+
+declare function Component(el: HTMLElement, options?: Component.Options): Component.Instance;
+
+interface DropdownItem {
+    /** Value of the selected item. */
+    id?: string | number;
+    /** Label for the selected item. */
+    name?: string;
+    /** Description of the item */
+    title?: string;
+    /** Icon of the item */
+    image?: string;
+    /** Name of the group where the item belongs to */
+    group?: string;
+    /** Keywords to help finding one item */
+    synonym?: string[];
+    /** Item is disabled */
+    disabled?: boolean;
+    /** Color for the item */
+    color?: string;
+}
+
+interface ItemContainer {
+    /** Data for the item */
+    data: DropdownItem;
+    /** HTML container for the element */
+    element: HTMLElement;
+    /** HTML container for the group */
+    group: HTMLElement;
+}
+
+declare namespace Component {
+    interface Options {
+        /** Endpoint to fetch data from a remote server */
+        url?: string;
+        /** Preloaded data items for the dropdown */
+        data?: DropdownItem[];
+        /** Format type of the data, typically { id: name } or { value: text } */
+        format?: number;
+        /** Indicates if multiple item selection is allowed */
+        multiple?: boolean;
+        /** Enables the autocomplete feature for user input */
+        autocomplete?: boolean;
+        /** Allows remote search for options */
+        remoteSearch?: boolean;
+        /** Enables the lazy loading feature for handling a large number of options */
+        lazyLoading?: boolean;
+        /** Rendering style of the dropdown: 'default', 'picker', or 'searchbar' */
+        type?: 'default' | 'picker' | 'searchbar',
+        /** Defines the dropdown's width */
+        width?: number;
+        /** Sets the maximum width of the dropdown */
+        maxWidth?: number;
+        /** Determines if the dropdown is opened when initialized */
+        opened?: boolean;
+        /** The initial value of the dropdown */
+        value?: string;
+        /** Placeholder text for the dropdown */
+        placeholder?: string;
+        /** Allows the user to add new options */
+        newOptions?: boolean;
+        /** Internal controller for the dropdown's position */
+        position?: boolean;
+        /** Event handler for value changes */
+        onchange?: (el: HTMLElement, obj: Dropdown, oldValue: string, newValue: string) => void;
+        /** Event handler for when the dropdown is ready */
+        onload?: (el: HTMLElement, obj: Dropdown, data: any, val: any) => void;
+        /** Event handler for when the dropdown opens */
+        onopen?: (el: HTMLElement) => void;
+        /** Event handler for when the dropdown closes */
+        onclose?: (el: HTMLElement) => void;
+        /** Event handler for when the dropdown receives focus */
+        onfocus?: (el: HTMLElement) => void;
+        /** Event handler for when the dropdown loses focus */
+        onblur?: (el: HTMLElement) => void;
+        /** Event handler for when a new option is added to the dropdown */
+        oninsert?: (obj: Dropdown, item: DropdownItem, newItem: DropdownItem) => void;
+        /** Event handler for just before a new option is added to the dropdown */
+        onbeforeinsert?: (obj: Dropdown, item: DropdownItem) => void;
+        /** Event handler for before a search on autocomplete is performed */
+        onbeforesearch?: (obj: Dropdown, ajaxRequest: object) => boolean | null;
+        /** Event handler for processing search results */
+        onsearch?: (obj: Dropdown, result: object) => void;
+        /** Toggles the sorting of dropdown elements */
+        sortResults?: boolean;
+        /** Indicates if the dropdown should automatically receive focus upon creation */
+        autofocus?: boolean;
+    }
+
+    interface Instance {
+        /** Add a new item to the dropdown */
+        add: (title: string, id: string|number) => DropdownItem;
+        /** Append new data to the dropdown */
+        appendData: (data: DropdownItem[]) => void
+        /** Close the dropdown picker */
+        closeItem: (ignoreEvents?: boolean) => void
+        /** Current selectIndex */
+        currentIndex: number;
+        /** Find the items with the keyword */
+        find: (str: string) => void;
+        /** Select the first item */
+        first: () => void;
+        /** Get all data */
+        getData: () => DropdownItem[];
+        /** Get the index position of a item by its value */
+        getPosition: (value: string) => number | boolean;
+        /** Get the text from the selected options */
+        getText: (asArray?: boolean) => string | string[];
+        /** Get the URL source for the data if defined */
+        getUrl: () => string;
+        /** Get the value from the selected options */
+        getValue: (asArray?: boolean) => string | string[];
+        /** DOM Elements for the groups */
+        groups: HTMLElement[];
+        /** DOM Element for the header */
+        header: HTMLElement;
+        /** Items */
+        items: ItemContainer[];
+        /** Move index to the last element in the dropdown */
+        last: () => void;
+        /** Internal lazy loading method */
+        loadDown: () => void;
+        /** Internal lazy loading method */
+        loadFirst: () => void;
+        /** Internal lazy loading method */
+        loadLast: () => void;
+        /** Internal lazy loading method */
+        loadUp: () => void;
+        /** Move index to the next element in the dropdown */
+        next: () => void;
+        /** Open the dropdown */
+        open: () => void;
+        /** Dropdown configuration */
+        options: Component.Options;
+        /** Move index to the previous element in the dropdown */
+        prev: () => void;
+        /** Reset the value of the dropdown */
+        reset: () => void;
+        /** Alias for setCursor */
+        resetCursor: (index: number, setPosition?: boolean) => void
+        /** Set the value to null */
+        resetSelected: () => void;
+        /** Array of results when filtering */
+        results: DropdownItem[];
+        /** Search term */
+        search: string;
+        /** Select an index */
+        selectIndex: (index: number, force?: boolean) => void
+        /** Select an item */
+        selectItem: (item: DropdownItem) => void;
+        /** Set the cursor to a specified element index */
+        setCursor: (index: number, setPosition?: boolean) => void
+        /** Set new data for the dropdown */
+        setData: (items: DropdownItem[]) => void;
+        /** Set the id or value for one item */
+        setId: (item: number|DropdownItem, newId: number) => void;
+        /** Change the dropdown options */
+        setOptions: (newOptions: Component.Options, reset?: boolean) => void;
+        /** Change the dropdown data from a URL */
+        setUrl: (newUrl: string, callback?: Function) => void;
+        /** Set the value for a dropdown */
+        setValue: (newValue: string | string[]) => void;
+        /** Internal type */
+        type: 'dropdown';
+        /** Alias for setCursor */
+        updateCursor: (index: number, setPosition?: boolean) => void;
+        /** Current internal value */
+        value: Record<number, string>;
+    }
+}
+
+
+interface Dropdown {
+    (): any
+    [key: string]: any
+}
+
+declare function Dropdown<Dropdown>(props: Component.Options): any;
+export default Dropdown;

package/react/dropdown/index.js

@@ -0,0 +1,26 @@
+// @ts-nocheck
+import React, { useRef, useEffect } from "react";
+import jSuites from '../../dist/jsuites';
+
+// @ts-ignore
+export default React.forwardRef((props, mainReference) => {
+    // Dom element
+    const Ref = useRef(null);
+
+    // Get the properties for the spreadsheet
+    let options = { ...props };
+
+    useEffect(() => {
+        // @ts-ignore
+        if (!Ref.current.innerHTML) {
+            mainReference.current = jSuites.dropdown(Ref.current, options);
+        }
+    }, []);
+
+    let prop = {
+        ref: Ref,
+        style: { height: '100%', width: '100%' }
+    };
+
+    return React.createElement("div", prop);
+})