npm - @lemonadejs/calendar - Versions diffs - 5.8.3 → 5.9.0 - Mend

@lemonadejs/calendar 5.8.3 → 5.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md CHANGED Viewed

@@ -1,34 +1,28 @@
 # JavaScript Calendar
-[Official JavaScript Calendar Documenation](https://lemonadejs.com/docs/plugins/calendar)
+[Official JavaScript Calendar Documentation](https://lemonadejs.com/docs/plugins/calendar)
 Compatible with Vanilla JavaScript, LemonadeJS, React, VueJS or Angular.
-# JavaScript Calendar
 Leverage the power of the LemonadeJS Calendar, a lightweight and versatile JavaScript component compatible with React, VueJS, and Angular. Designed to enhance web applications, it offers an embeddable calendar for easy date, time, and range selections. Key features include:
--   Intuitive keyboard navigation.
--   A reactive and responsive design for seamless device adaptation.
--   Flexible range selection for various applications.
--   Customizable options to match your project needs.
+- Intuitive keyboard navigation.
+- A reactive and responsive design for seamless device adaptation.
+- Flexible range selection for various applications.
+- Customizable options to match your project needs.
 ## Getting Started
-You can install using NPM or using directly from a CDN.
+You can install using NPM or directly from a CDN.
 ### npm Installation
-To install it in your project using npm, run the following command:
 ```bash
-$ npm install @lemonadejs/calendar
+npm install @lemonadejs/calendar
 ```
 ### CDN
-For immediate use without NPM, include these script tags in your HTML for access to the calendar and its dependencies:
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/dist/style.min.css" />
@@ -40,7 +34,7 @@ For immediate use without NPM, include these script tags in your HTML for access
 ### Usage
-Quick example with ReactJS.
+Quick example with React:
 ```javascript
 import React, { useRef } from 'react';
@@ -52,39 +46,75 @@ import '@lemonadejs/modal/dist/style.css';
 export default function App() {
     const calendarRef = useRef();
-    return (
-        <>
-            <Calendar type={'inline'} ref={calendarRef} value={new Date()} />
-        </>
-    );
+    return <Calendar type="inline" ref={calendarRef} value={new Date()} />;
 }
 ```
-### Configuration
-You can configure things such as calendar starting date, calendar events, and customize functions.
-#### Calendar Properties
-| Attribute | Type             | Description                                                                                                       |
-| --------- | ---------------- | ----------------------------------------------------------------------------------------------------------------- |
-| type?     | string           | Determines the rendering type for the calendar. Options: 'inline', 'default'.                                     |
-| range?    | boolean          | Enables the range mode for date selection.                                                                        |
-| value?    | number or string | Represents the currently selected date.                                                                           |
-| numeric?  | boolean          | Enables the use of numeric dates, treating them as serial numbers.                                                |
-| input?    | HTML element     | An optional reference to control the calendar opening. The value is automatically bound when using this property. |
-### Calendar Events
-| Event                            | Description                         |
-| -------------------------------- | ----------------------------------- |
-| onchange?: (self, value) => void | Called when a new date is selected. |
+## API Reference
+### Options
+| Attribute      | Type                                              | Description                                                                                                              |
+|----------------|---------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------|
+| `type?`        | `'default' \| 'auto' \| 'picker' \| 'inline'`     | Render mode. `'auto'` resolves to `'default'` (≥ 800px wide) or `'picker'` (smaller). `Default: 'default'`.              |
+| `format?`      | `string`                                          | Date format using Excel-like tokens (e.g. `'dd/mm/yyyy'`).                                                               |
+| `value?`       | `number \| string \| Date \| Array`               | Initial value. ISO string (`'2025-06-15'`), Excel-style serial number, native `Date`, or `[start, end]` tuple in range mode. |
+| `numeric?`     | `boolean`                                         | Return values as Excel-style numbers via `getValue()`. `Default: false`.                                                 |
+| `range?`       | `boolean`                                         | Enable range selection. `Default: false`.                                                                                |
+| `footer?`      | `boolean`                                         | Show the footer (Reset / Done buttons + Today + time picker). `Default: true`.                                           |
+| `time?`        | `boolean`                                         | Show hour and minute selectors in the footer. `Default: false`.                                                          |
+| `grid?`        | `boolean`                                         | Apply grid display mode (sets `data-grid="true"` on root). `Default: false`.                                             |
+| `placeholder?` | `string`                                          | Placeholder applied to a bound input.                                                                                    |
+| `disabled?`    | `boolean`                                         | Disable interaction. `Default: false`.                                                                                   |
+| `startingDay?` | `number`                                          | First day of the week (`0=Sun … 6=Sat`). `Default: 0`.                                                                   |
+| `validRange?`  | `string[] \| number[] \| Function`                | Bounds tuple `[from, to]` (ISO or Excel serial), or a predicate `(day, month, year, item) => boolean` to disable a cell. |
+| `data?`        | `Array<{ date: string, [key: string]: any }>`     | Event entries; cells with a matching `date` get a `data-event` marker.                                                   |
+| `wheel?`       | `boolean`                                         | Allow mouse-wheel month navigation. `Default: true`.                                                                     |
+| `input?`       | `HTMLInputElement \| 'auto'`                      | Existing input to bind, or `'auto'` to create one.                                                                       |
+| `initInput?`   | `boolean`                                         | Wire up input listeners (open-on-focus, type-to-update). `Default: true`.                                                |
+### Events
+| Event       | Signature                                | Description                                                                       |
+|-------------|------------------------------------------|-----------------------------------------------------------------------------------|
+| `onchange?` | `(self, value) => void`                  | Fired when the value changes (date selection or `setValue`).                      |
+| `onupdate?` | `(self, value) => void`                  | Fired when the cursor moves between cells (e.g. via arrow keys).                  |
+| `onopen?`   | `(self) => void`                         | Fired when the modal opens (`'picker'` / `'default'` types only).                 |
+| `onclose?`  | `(self, origin) => void`                 | Fired when the modal closes. `origin` is `'button'`, `'escape'`, `'focusout'`, or any custom string passed to `close({ origin })`. |
+| `onChange?` | `(event) => void`                        | **React-only.** Forwarded to the bound input's native `change` DOM event. Distinct from `onchange`. |
+### Instance
+Calling `Calendar(root, options)` returns an instance exposing:
+| Property / Method  | Description                                                                                  |
+|--------------------|----------------------------------------------------------------------------------------------|
+| `el`               | Root DOM element.                                                                            |
+| `value`            | Current value (assignable; mutation triggers a re-render).                                   |
+| `format`           | Active date format mask.                                                                     |
+| `type`             | Resolved type (post-`'auto'` resolution).                                                    |
+| `view`             | Current view: `'days' \| 'months' \| 'years'`.                                               |
+| `range`            | Range mode flag.                                                                             |
+| `rangeValues`      | `[start, end]` numeric tuple while a range is active, `null` otherwise.                      |
+| `modal`            | Modal instance (only for `'picker'` / `'default'` types).                                    |
+| `content`          | Inner content element (focus target for keyboard navigation).                                |
+| `input`            | Bound input element (auto-created or user-provided).                                         |
+| `open()`           | Open the modal.                                                                              |
+| `close(options?)`  | Close the modal. Pass `{ origin: '...' }` to label the close source.                         |
+| `isClosed()`       | `true` / `false` for modal types; `undefined` for `'inline'`.                                |
+| `setView(view)`    | Switch view. Accepts `'days'`, `'months'`, `'years'`.                                        |
+| `next()`           | Navigate forward (month / year / year-block depending on the current view).                  |
+| `prev()`           | Navigate backward.                                                                           |
+| `reset()`          | Clear the value and close the modal when applicable.                                         |
+| `getValue()`       | Return the current value as a string (or number when `numeric: true`).                       |
+| `setValue(v)`      | Set the value programmatically. Accepts ISO strings, Excel serial numbers, or `[start, end]` tuples in range mode. |
+| `update()`         | Commit the current cursor selection (used by Done button).                                   |
 ## License
-The LemonadeJS [Reactive JavaScript Calendar](https://lemonadejs.com/docs/plugins/calendar) is released under the MIT.
+Released under the MIT license.
 ## Other Tools
--   [jSuites Plugins - JavaScript Calendar](https://jsuites.net/docs/javascript-calendar)
--   [Jspreadsheet - JavaScript Spreadsheet](https://jspreadsheet.com/)
+- [jSuites Plugins - JavaScript Calendar](https://jsuites.net/docs/javascript-calendar)
+- [Jspreadsheet - JavaScript Spreadsheet](https://jspreadsheet.com/)

package/dist/index.d.ts CHANGED Viewed

@@ -1,103 +1,131 @@
-/**
- * Official Type definitions for LemonadeJS plugins
- * https://lemonadejs.com
- * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
- */
-declare function Calendar(el: HTMLElement, options?: Calendar.Options): Calendar.Instance;
-declare namespace Calendar {
-    interface Options {
-        /** Calendar type. Use picker for a responsive modal, auto to automatic detect screen size and open between default or picker. */
-        type?: 'default' | 'auto' | 'picker' | 'inline';
-        /** Date format. Excel like format dd/mm/yyyy */
-        format?: string;
-        /** Range picker */
-        range?: boolean;
-        /** Value */
-        value?: number | string;
-        /** Calendar value will be a excel-like number or a ISO string. Default false */
-        numeric?: boolean;
-        /** Show Footer. Default: true **/
-        footer?: boolean;
-        /** Show hour and minute picker **/
-        time?: boolean;
-        /** Show grid mode. Default: false */
-        grid?: boolean;
-        /** Placeholder */
-        placeholder?: string;
-        /** Disabled. Default false **/
-        disabled?: boolean;
-        /** Starting day. From 0-6 where zero is Sunday and six is Saturday */
-        startingDay?: number;
-        /** Valid range **/
-        validRange?: number[] | string[];
-        /** Calendar events data */
-        data?: Array<{date: string, [key: string]: any}>;
-        /** Update view on mouse wheel. Default: true */
-        wheel?: boolean;
-        /** Bind the calendar to na HTML input element */
-        input?: HTMLInputElement | 'auto';
-        /** Create events and assing the calendar classes for the input. Default true */
-        initInput?: boolean;
-        /** Change value event */
-        onchange?: (self: object, value: string) => void;
-        /** Update view event */
-        onupdate?: (self: object, value: string) => void;
-        /** Close event */
-        onclose?: (self: object, origin: string) => void;
-        /** Open event */
-        onopen?: (self: object) => void;
-        /** React dedicated onChange event */
-        onChange?: (e: Event) => void;
-    }
-    interface Instance {
-        /** Calendar type */
-        type?: 'default' | 'auto' | 'picker' | 'inline';
-        /** Date format */
-        format: string;
-        /** Range picker */
-        range: boolean;
-        /** Value */
-        value: number | string;
-        /** Calendar value will be a excel-like number or a ISO string. Default false */
-        numeric: boolean;
-        /** Footer. Default: true **/
-        footer: boolean;
-        /** Show hour and minute picker **/
-        time: boolean;
-        /** Show grid mode. Default: false */
-        grid: boolean;
-        /** Placeholder */
-        placeholder: string;
-        /** Disabled. Default false **/
-        disabled: boolean;
-        /** Update view on mouse wheel. Default: true */
-        wheel: boolean;
-        /** Bind the calendar to na HTML input element */
-        input: HTMLElement;
-        /** Open the calendar modal */
-        open: () => void;
-        /** Open the calendar modal */
-        close: (options?: object) => void;
-        /** Calendar is closed */
-        isClosed?: () => boolean;
-        /** Change the view */
-        setView: (view: 'days' | 'months' | 'years') => void;
-        /** Go to the next month or year depending on the view */
-        next?: () => void;
-        /** Go to the previous month or year depending on the view */
-        prev?: () => void;
-        /** Reset the calendar value and close the modal when applicable */
-        reset?: () => void;
-        /** Get the current calendar value */
-        getValue?: () => string | number;
-        /** Set the current calendar value. Use number for Excel like numbers */
-        setValue?: (value: string | number) => void;
-        /** Accept the selected value on the calendar */
-        update?: () => void;
-    }
-}
-export default Calendar;
+/**
+ * Official Type definitions for LemonadeJS plugins
+ * https://lemonadejs.com
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+declare function Calendar(el: HTMLElement, options?: Calendar.Options): Calendar.Instance;
+declare namespace Calendar {
+    /** Item passed to a `validRange` function — describes the cell being evaluated. */
+    interface ValidRangeItem {
+        date: string;
+        [key: string]: any;
+    }
+    /** `validRange` may be a tuple of bounds (numeric or ISO strings) or a predicate
+     *  returning truthy to disable a cell. */
+    type ValidRange =
+        | number[]
+        | string[]
+        | ((day: number, month: number, year: number, item: ValidRangeItem) => boolean | void);
+    interface CloseOptions {
+        /** Where the close was triggered from: 'button', 'escape', 'focusout', or any custom string. */
+        origin?: string;
+    }
+    interface Options {
+        /** Calendar type. Use picker for a responsive modal, auto to automatic detect screen size and open between default or picker. */
+        type?: 'default' | 'auto' | 'picker' | 'inline';
+        /** Date format. Excel like format dd/mm/yyyy */
+        format?: string;
+        /** Range picker */
+        range?: boolean;
+        /** Initial value. Accepts an ISO string, an Excel serial number, a `Date`, or `[start, end]` for range mode. */
+        value?: number | string | Date | Array<number | string | Date>;
+        /** Calendar value will be a excel-like number or a ISO string. Default false */
+        numeric?: boolean;
+        /** Show Footer. Default: true **/
+        footer?: boolean;
+        /** Show hour and minute picker **/
+        time?: boolean;
+        /** Show grid mode. Default: false */
+        grid?: boolean;
+        /** Placeholder */
+        placeholder?: string;
+        /** Disabled. Default false **/
+        disabled?: boolean;
+        /** Starting day of the week. From 0-6 where zero is Sunday and six is Saturday */
+        startingDay?: number;
+        /** Bounds tuple, or predicate returning truthy to disable a cell. */
+        validRange?: ValidRange;
+        /** Calendar events data */
+        data?: Array<{ date: string; [key: string]: any }>;
+        /** Update view on mouse wheel. Default: true */
+        wheel?: boolean;
+        /** Bind the calendar to an HTML input element, or `'auto'` to create one. */
+        input?: HTMLInputElement | 'auto';
+        /** Create events and assign the calendar classes for the input. Default: true */
+        initInput?: boolean;
+        /** Fired when the calendar value changes (date selection). */
+        onchange?: (self: Instance, value: string | number) => void;
+        /** Fired when the cursor moves between cells (e.g. arrow-key navigation). */
+        onupdate?: (self: Instance, value: string) => void;
+        /** Fired when the modal closes. `origin` identifies the source ('button', 'escape', 'focusout', or custom). */
+        onclose?: (self: Instance, origin: string) => void;
+        /** Fired when the modal opens. */
+        onopen?: (self: Instance) => void;
+        /** React-only: forwarded to the bound input's native `change` DOM event. Distinct from `onchange`. */
+        onChange?: (e: Event) => void;
+    }
+    interface Instance {
+        /** The root DOM element. */
+        el: HTMLElement;
+        /** Calendar type — may be re-assigned at runtime when initial type is 'auto'. */
+        type?: 'default' | 'auto' | 'picker' | 'inline';
+        /** Date format */
+        format: string;
+        /** Range picker */
+        range: boolean;
+        /** Value */
+        value: number | string;
+        /** Calendar value will be a excel-like number or a ISO string. Default false */
+        numeric: boolean;
+        /** Footer. Default: true **/
+        footer: boolean;
+        /** Show hour and minute picker **/
+        time: boolean;
+        /** Show grid mode. Default: false */
+        grid: boolean;
+        /** Placeholder */
+        placeholder: string;
+        /** Disabled. Default false **/
+        disabled: boolean;
+        /** Update view on mouse wheel. Default: true */
+        wheel: boolean;
+        /** Bound input element (created when `input: 'auto'`). */
+        input: HTMLInputElement;
+        /** Modal instance — present only when `type` resolves to 'picker' or 'default'. */
+        modal?: any;
+        /** Inner content element used as the focusable target for keyboard navigation. */
+        content?: HTMLElement;
+        /** Current view. */
+        view?: 'days' | 'months' | 'years';
+        /** Active range tuple as numeric (Excel-like) values when `range: true`; null otherwise. */
+        rangeValues: [number, number] | null;
+        /** Open the calendar modal */
+        open: () => void;
+        /** Close the calendar modal */
+        close: (options?: CloseOptions) => void;
+        /** Whether the calendar modal is currently closed. Returns undefined for inline calendars. */
+        isClosed?: () => boolean | undefined;
+        /** Change the view */
+        setView: (view: 'days' | 'months' | 'years') => void;
+        /** Go to the next month or year depending on the view */
+        next?: () => void;
+        /** Go to the previous month or year depending on the view */
+        prev?: () => void;
+        /** Reset the calendar value and close the modal when applicable */
+        reset?: () => void;
+        /** Get the current calendar value */
+        getValue?: () => string | number;
+        /** Set the current calendar value. Accepts ISO strings, Excel serial numbers, `Date` objects, or `[start, end]` tuples in range mode. */
+        setValue?: (value: string | number | Date | Array<number | string | Date>) => void;
+        /** Accept the selected value on the calendar */
+        update?: () => void;
+    }
+}
+export default Calendar;

package/dist/index.js CHANGED Viewed

@@ -63,6 +63,9 @@ const Mask = utils.Mask;
         let data = {};
         if (Array.isArray(this.data)) {
             this.data.map(function (v) {
+                if (!v || typeof v !== 'object' || typeof v.date !== 'string') {
+                    return;
+                }
                 let d = year + '-' + Helpers.two(month + 1);
                 if (v.date.substring(0, 7) === d) {
                     if (!data[v.date]) {
@@ -291,8 +294,13 @@ const Mask = utils.Mask;
         let change = self.onchange;
         self.onchange = null;
+        // Coerce startingDay to a number so string inputs ('1') don't trigger string concat in modulo math
+        if (typeof self.startingDay !== 'number') {
+            self.startingDay = Number(self.startingDay) || 0;
+        }
         // Weekdays
-        self.weekdays = getWeekdays(self.startingDay ?? 0);
+        self.weekdays = getWeekdays(self.startingDay);
         // Cursor
         self.cursor = {};
@@ -380,6 +388,10 @@ const Mask = utils.Mask;
         const setValue = function(v) {
             let d = new Date();
             if (v) {
+                // Accept native Date objects by converting to ISO string
+                if (v instanceof Date) {
+                    v = v.toISOString().substring(0, 10);
+                }
                 if (isTrue(self.range)) {
                     if (v) {
                         if (! Array.isArray(v)) {
@@ -508,6 +520,9 @@ const Mask = utils.Mask;
         }
         const select = function(e, s) {
+            if (self.disabled === true) {
+                return;
+            }
             // Get new date content
             let d = updateDate(s.value, getPosition());
             // New date
@@ -536,7 +551,7 @@ const Mask = utils.Mask;
                 } else {
                     setCursor(s);
-                    update();
+                    update(e);
                 }
             }
         }
@@ -544,7 +559,10 @@ const Mask = utils.Mask;
         // Update Calendar
         const update = function(e) {
             self.setValue(getValue());
-            self.close({ origin: 'button' });
+            if (! (e && e.type === 'click' && e.target.tagName === 'DIV' && self.time === true)) {
+                self.close({ origin: 'button' });
+            }
         }
         const reset = function() {
@@ -696,11 +714,17 @@ const Mask = utils.Mask;
         }
         const normalize = function(v) {
+            if (v instanceof Date) {
+                v = Helpers.dateToString ? Helpers.dateToString(v) : v.toISOString().substring(0, 10);
+            }
             if (! Array.isArray(v)) {
                 v = v.toString().split(',');
             }
             return v.map(item => {
+                if (item instanceof Date) {
+                    return Helpers.dateToString ? Helpers.dateToString(item) : item.toISOString().substring(0, 10);
+                }
                 if (Number(item) == item) {
                     return Helpers.numToDate(item);
                 } else {
@@ -824,7 +848,7 @@ const Mask = utils.Mask;
                         }
                     } else if (e.code === 'Enter') {
                         if (! self.isClosed()) {
-                            update();
+                            update(e);
                         } else {
                             self.open();
                         }
@@ -1009,7 +1033,10 @@ const Mask = utils.Mask;
             if (prop === 'view') {
                 reloadView(true);
             } else if (prop === 'startingDay') {
-                self.weekdays = getWeekdays(self.startingDay ?? 0);
+                if (typeof self.startingDay !== 'number') {
+                    self.startingDay = Number(self.startingDay) || 0;
+                }
+                self.weekdays = getWeekdays(self.startingDay);
             } else if (prop === 'value') {
                 dispatchOnChangeEvent();
             }

package/dist/react.d.ts CHANGED Viewed

@@ -1,18 +1,55 @@
-/**
- * Official Type definitions for the LemonadeJS plugins
- * https://lemonadejs.net/docs/plugins/calendar
- * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
- */
-import Component from './index';
-interface Calendar {
-    ref?: MutableRefObject<undefined>;
-    (): any
-    [key: string]: any
-}
-type Props = IntrinsicAttributes & Component.Options & Calendar;
-declare function Calendar<Calendar>(props: Props): any;
-export default Calendar;
+/**
+ * Official Type definitions for the LemonadeJS plugins
+ * https://lemonadejs.net/docs/plugins/calendar
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+import React from 'react';
+import Calendar from './index';
+declare namespace CalendarReact {
+    /**
+     * React-idiomatic camelCase aliases for the lemonadejs callbacks. The
+     * wrapper drops the leading `self` argument before invoking these — the
+     * instance is available via the forwarded ref.
+     *
+     * The lowercase names from `Calendar.Options` (e.g. `onchange`) still
+     * work for legacy compatibility, but new code should prefer these.
+     */
+    interface ReactCallbacks {
+        /** Fired when the value changes (date selection or `setValue`). */
+        onChange?: (value: string | number) => void;
+        /** Fired when the cursor moves between cells (e.g. via arrow keys). */
+        onUpdate?: (value: string) => void;
+        /** Fired when the modal opens. */
+        onOpen?: () => void;
+        /**
+         * Fired when the modal closes. `origin` is `'button'`, `'escape'`,
+         * `'focusout'`, or any custom string passed to `close({ origin })`.
+         */
+        onClose?: (origin: string) => void;
+        /**
+         * Wired to the bound input element's native DOM `change` event.
+         * Renamed from the legacy `onChange` to free that name for
+         * `onChange` (the date-selection callback above).
+         */
+        onInputChange?: (e: Event) => void;
+    }
+    /** Wrapper-only props (the wrapping `<div>` accepts these). */
+    interface DOMProps {
+        className?: string;
+        style?: React.CSSProperties;
+        children?: React.ReactNode;
+    }
+}
+declare const CalendarReact: React.MemoExoticComponent<
+    React.ForwardRefExoticComponent<
+        Omit<Calendar.Options, 'onchange' | 'onupdate' | 'onclose' | 'onopen' | 'onChange'>
+        & CalendarReact.ReactCallbacks
+        & CalendarReact.DOMProps
+        & React.RefAttributes<Calendar.Instance>
+    >
+>;
+export default CalendarReact;

package/dist/react.js CHANGED Viewed

@@ -1,42 +1,112 @@
-// @ts-nocheck
-import React, { useRef, useEffect } from "react";
-import Component from './index';
-// @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) {
-            for (let key in props) {
-                if (key === 'onchange' || key === 'onload') {
-                    continue;
-                }
-                if (props.hasOwnProperty(key) && mainReference.current.hasOwnProperty(key)) {
-                    if (props[key] !== mainReference.current[key]) {
-                        mainReference.current[key] = props[key];
-                    }
-                }
-            }
-        }
-    }, [props])
-    useEffect(() => {
-        // @ts-ignore
-        if (! Ref.current.innerHTML) {
-            mainReference.current = Component(Ref.current, options);
-        }
-    }, []);
-    let prop = {
-        ref: Ref,
-        style: { height: '100%', width: '100%' }
-    };
-    return React.createElement("div", prop);
-})
+// @ts-nocheck
+import React, {
+    useRef,
+    useEffect,
+    useImperativeHandle,
+    useState,
+    memo,
+} from 'react';
+import Component from './index';
+// Maps React-style camelCase prop names to the underlying lemonadejs
+// lowercase option names. The wrapper drops the leading `self` argument
+// from camelCase callbacks before invoking the user's handler — `self` is
+// redundant in React because the user already has access to the instance
+// through the forwarded ref.
+//
+// `onInputChange` is calendar-specific: the lemonadejs plugin uses `onChange`
+// (capital C) as a hook for the bound input element's native DOM `change`
+// event. Renaming it to `onInputChange` frees `onChange` to mean "date
+// selection callback" — matching what React users expect.
+const REACT_TO_LEMONADE = {
+    onChange: 'onchange',
+    onUpdate: 'onupdate',
+    onCreate: 'oncreate',
+    onBeforeCreate: 'onbeforecreate',
+    onChangeEvent: 'onchangeevent',
+    onBeforeChangeEvent: 'onbeforechangeevent',
+    onBeforeChange: 'onbeforechange',
+    onBeforeInsert: 'onbeforeinsert',
+    onDelete: 'ondelete',
+    onError: 'onerror',
+    onClose: 'onclose',
+    onOpen: 'onopen',
+    onEdition: 'onedition',
+    onDblClick: 'ondblclick',
+    onInputChange: 'onChange',
+};
+const RESERVED_REACT_PROPS = new Set(['children', 'className', 'style', 'key']);
+const Calendar = memo(React.forwardRef((props, mainReference) => {
+    const containerRef = useRef(null);
+    const instanceRef = useRef(null);
+    const propsRef = useRef(props);
+    const [instance, setInstance] = useState(null);
+    // Keep a ref to the latest props so callback trampolines always invoke
+    // the user's most recent function (avoids stale-closure bugs on parent
+    // rerenders).
+    propsRef.current = props;
+    // Single-mount effect, StrictMode-safe via the `instance` guard.
+    useEffect(() => {
+        if (!containerRef.current || instance) return;
+        const options = {};
+        for (const key in props) {
+            if (RESERVED_REACT_PROPS.has(key)) continue;
+            const lemonadeKey = REACT_TO_LEMONADE[key] || key;
+            const isReactCallback = key in REACT_TO_LEMONADE;
+            const value = props[key];
+            if (typeof value === 'function') {
+                options[lemonadeKey] = isReactCallback
+                    // React-style: drop the leading `self` argument
+                    ? (...args) => {
+                        const fn = propsRef.current[key];
+                        if (typeof fn === 'function') return fn(...args.slice(1));
+                    }
+                    // Legacy lowercase callback: pass through unchanged
+                    : (...args) => {
+                        const fn = propsRef.current[key];
+                        if (typeof fn === 'function') return fn(...args);
+                    };
+            } else {
+                options[lemonadeKey] = value;
+            }
+        }
+        const newInstance = Component(containerRef.current, options);
+        instanceRef.current = newInstance;
+        setInstance(newInstance);
+    }, []);
+    // Prop sync: write non-function prop changes back to the live instance.
+    useEffect(() => {
+        const inst = instanceRef.current;
+        if (!inst) return;
+        for (const key in props) {
+            if (RESERVED_REACT_PROPS.has(key)) continue;
+            if (typeof props[key] === 'function') continue;
+            const lemonadeKey = REACT_TO_LEMONADE[key] || key;
+            if (Object.prototype.hasOwnProperty.call(inst, lemonadeKey)
+                && props[key] !== inst[lemonadeKey]) {
+                inst[lemonadeKey] = props[key];
+            }
+        }
+    }, [props]);
+    // Expose the lemonadejs instance through the forwarded ref.
+    useImperativeHandle(mainReference, () => instance, [instance]);
+    return React.createElement(React.Fragment, null,
+        React.createElement('div', {
+            ref: containerRef,
+            className: props.className,
+            style: { width: '100%', height: '100%', ...props.style },
+        }),
+        props.children,
+    );
+}));
+export default Calendar;

package/dist/vue.d.ts CHANGED Viewed

@@ -1,15 +1,22 @@
-/**
- * Official Type definitions for the LemonadeJS plugins
- * https://lemonadejs.net
- * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
- */
-import Component from './index';
-interface Calendar {
-    (): any
-    [key: string]: any
-}
-declare function Calendar<Calendar>(props: Component.Options): any;
-export default Calendar;
+/**
+ * Official Type definitions for the LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+import { DefineComponent } from 'vue';
+import Calendar from './index';
+/**
+ * Vue 3 wrapper. Use `<Calendar ... ref="calendarRef" />` and access the
+ * underlying instance via `calendarRef.value?.current` (e.g. `current.setValue(...)`).
+ */
+declare const CalendarVue: DefineComponent<
+    Calendar.Options,
+    {},
+    {
+        el: HTMLElement | null;
+        current: Calendar.Instance | null;
+    }
+>;
+export default CalendarVue;

package/dist/vue.js CHANGED Viewed

@@ -1,47 +1,39 @@
-import { h } from 'vue';
-import component from "./index";
-export default {
-    inheritAttrs: false,
-    mounted() {
-        this.$nextTick(() => {
-            let options = {
-                ...this.$attrs
-            };
-            this.current = component(this.$refs.container, options);
-        });
-    },
-    setup() {
-        let containerProps = {
-            ref: 'container',
-            style: {
-                width: '100%',
-                height: '100%',
-            }
-        };
-        return () => h('div', containerProps);
-    },
-    watch: {
-        $attrs: {
-            deep: true,
-            handler() {
-                this.updateState();
-            }
-        }
-    },
-    methods: {
-        updateState() {
-            if (this.current) {
-                for (let key in this.$attrs) {
-                    if (this.$attrs.hasOwnProperty(key) && this.current.hasOwnProperty(key)) {
-                        if (this.$attrs[key] !== this.current[key]) {
-                            this.current[key] = this.$attrs[key];
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
+import { h } from 'vue';
+import component from './index';
+export default {
+    inheritAttrs: false,
+    mounted() {
+        this.$nextTick(() => {
+            const options = { ...this.$attrs };
+            this.el = this.$refs.container;
+            this.current = component(this.$refs.container, options);
+        });
+    },
+    setup() {
+        return () => h('div', {
+            ref: 'container',
+            style: { width: '100%', height: '100%' },
+        });
+    },
+    watch: {
+        $attrs: {
+            deep: true,
+            handler() {
+                this.updateState();
+            },
+        },
+    },
+    methods: {
+        updateState() {
+            if (!this.current) return;
+            for (const key in this.$attrs) {
+                if (Object.prototype.hasOwnProperty.call(this.$attrs, key)
+                    && Object.prototype.hasOwnProperty.call(this.current, key)
+                    && this.$attrs[key] !== this.current[key]) {
+                    this.current[key] = this.$attrs[key];
+                }
+            }
+        },
+    },
+};

package/package.json CHANGED Viewed

@@ -20,5 +20,21 @@
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "5.8.3"
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./react": {
+            "types": "./dist/react.d.ts",
+            "default": "./dist/react.js"
+        },
+        "./vue": {
+            "types": "./dist/vue.d.ts",
+            "default": "./dist/vue.js"
+        },
+        "./style.css": "./dist/style.css",
+        "./dist/*": "./dist/*"
+    },
+    "version": "5.9.0"
 }