@progress/kendo-react-scheduler 10.2.0-develop.1 → 10.2.0-develop.10

package/editors/SchedulerFormEditor.mjs

@@ -22,13 +22,16 @@ import { useSchedulerFieldsContext as we, useSchedulerPropsContext as Fe } from
 const Re = e.forwardRef(
   (r, b) => {
     const u = e.useRef(null), f = e.useRef(null), L = ge(), i = Ce(), t = we(), { resources: q, timezone: z } = Fe();
-    e.useImperativeHandle(f, () => {
-      var n;
-      return {
-        element: (n = u.current) != null && n.element ? u.current.element : u.current,
-        props: r
-      };
-    }), e.useImperativeHandle(
+    e.useImperativeHandle(
+      f,
+      () => {
+        var n;
+        return {
+          element: (n = u.current) != null && n.element ? u.current.element : u.current,
+          props: r
+        };
+      }
+    ), e.useImperativeHandle(
       b,
       () => f.current
     );

package/hooks/useSlotExpand.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react"),d=require("../views/common/utils.js"),E=require("../constants/index.js"),O=require("@progress/kendo-react-common"),S=require("../context/SchedulerContext.js");function j(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const f=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(t,c,f.get?f:{enumerable:!0,get:()=>e[c]})}}return t.default=e,Object.freeze(t)}const i=j(x),q=(e,t)=>{const c=i.useRef(),f=i.useRef(0),m=S.useSchedulerElementContext(),w=()=>{if(!e.current)return;const n=e.current.element;n&&(f.current=n.clientHeight)},p=i.useCallback(()=>{if(!t||!e.current)return;const n=e.current.element,g=e.current.props;if(!n)return;const a=d.getPadding(n),r=new Map,o=g.items.filter(u=>u._ref.current);o.forEach(u=>{var R,v,y;if(!u._ref.current)return;const{height:l}=d.getRect(u._ref.current.element),_=(v=(R=u._ref.current)==null?void 0:R._order)!=null?v:-1;((y=r.get(_))!=null?y:0)<l&&r.set(_,l)});const s=Array.from(r.values()).reduce((u,l)=>u+l,0),b=o.length*E.BORDER_WIDTH*2+s-(a||0)+(typeof t=="object"&&t.offsetTop?t.offsetTop:0)+(typeof t=="object"&&t.offsetBottom?t.offsetBottom:0);o.length?b>f.current-a&&d.setRect(n,{height:b},!0):n&&(n.style.minHeight="")},[t,e]),h=i.useCallback(()=>{c.current!==void 0&&window.cancelAnimationFrame(c.current),c.current=window.requestAnimationFrame(()=>{p()})},[p]);O.useIsomorphicLayoutEffect(w,[]),i.useEffect(p,[e,e.current&&e.current.props,t]),i.useEffect(()=>{if(!e.current)return;const a=e.current.props.items.filter(r=>r._ref.current).map(r=>{if(!r._ref.current||!r._ref.current.element||!m.current)return;const o=window.ResizeObserver,s=o&&new o(h);return s&&s.observe(r._ref.current.element),()=>{s&&s.disconnect()}});return()=>{a.forEach(r=>r&&r())}},[h,m,e])};exports.useSlotExpand=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react"),p=require("../views/common/utils.js"),E=require("../constants/index.js"),O=require("@progress/kendo-react-common"),S=require("../context/SchedulerContext.js");function j(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const f=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(t,c,f.get?f:{enumerable:!0,get:()=>e[c]})}}return t.default=e,Object.freeze(t)}const i=j(x),q=(e,t)=>{const c=i.useRef(void 0),f=i.useRef(0),m=S.useSchedulerElementContext(),w=()=>{if(!e.current)return;const n=e.current.element;n&&(f.current=n.clientHeight)},d=i.useCallback(()=>{if(!t||!e.current)return;const n=e.current.element,g=e.current.props;if(!n)return;const a=p.getPadding(n),r=new Map,o=g.items.filter(u=>u._ref.current);o.forEach(u=>{var v,R,y;if(!u._ref.current)return;const{height:l}=p.getRect(u._ref.current.element),_=(R=(v=u._ref.current)==null?void 0:v._order)!=null?R:-1;((y=r.get(_))!=null?y:0)<l&&r.set(_,l)});const s=Array.from(r.values()).reduce((u,l)=>u+l,0),b=o.length*E.BORDER_WIDTH*2+s-(a||0)+(typeof t=="object"&&t.offsetTop?t.offsetTop:0)+(typeof t=="object"&&t.offsetBottom?t.offsetBottom:0);o.length?b>f.current-a&&p.setRect(n,{height:b},!0):n&&(n.style.minHeight="")},[t,e]),h=i.useCallback(()=>{c.current!==void 0&&window.cancelAnimationFrame(c.current),c.current=window.requestAnimationFrame(()=>{d()})},[d]);O.useIsomorphicLayoutEffect(w,[]),i.useEffect(d,[e,e.current&&e.current.props,t]),i.useEffect(()=>{if(!e.current)return;const a=e.current.props.items.filter(r=>r._ref.current).map(r=>{if(!r._ref.current||!r._ref.current.element||!m.current)return;const o=window.ResizeObserver,s=o&&new o(h);return s&&s.observe(r._ref.current.element),()=>{s&&s.disconnect()}});return()=>{a.forEach(r=>r&&r())}},[h,m,e])};exports.useSlotExpand=q;

package/hooks/useSlotExpand.mjs

@@ -11,7 +11,7 @@ import { BORDER_WIDTH as y } from "../constants/index.mjs";
 import { useIsomorphicLayoutEffect as k } from "@progress/kendo-react-common";
 import { useSchedulerElementContext as z } from "../context/SchedulerContext.mjs";
 const O = (e, t) => {
-  const m = u.useRef(), p = u.useRef(0), l = z(), w = () => {
+  const m = u.useRef(void 0), p = u.useRef(0), l = z(), w = () => {
     if (!e.current)
       return;
     const n = e.current.element;
@@ -24,11 +24,11 @@ const O = (e, t) => {
       return;
     const i = E(n), r = /* @__PURE__ */ new Map(), o = h.items.filter((c) => c._ref.current);
     o.forEach((c) => {
-      var R, b, v;
+      var v, R, b;
       if (!c._ref.current)
         return;
-      const { height: f } = x(c._ref.current.element), _ = (b = (R = c._ref.current) == null ? void 0 : R._order) != null ? b : -1;
-      ((v = r.get(_)) != null ? v : 0) < f && r.set(_, f);
+      const { height: f } = x(c._ref.current.element), _ = (R = (v = c._ref.current) == null ? void 0 : v._order) != null ? R : -1;
+      ((b = r.get(_)) != null ? b : 0) < f && r.set(_, f);
     });
     const s = Array.from(r.values()).reduce((c, f) => c + f, 0), g = o.length * y * 2 + s - (i || 0) + (typeof t == "object" && t.offsetTop ? t.offsetTop : 0) + (typeof t == "object" && t.offsetBottom ? t.offsetBottom : 0);
     o.length ? g > p.current - i && H(n, { height: g }, !0) : n && (n.style.minHeight = "");

package/index.d.mts

@@ -31,7 +31,7 @@ import { InferProps } from 'prop-types';
 import { InputHandle } from '@progress/kendo-react-inputs';
 import { InputProps } from '@progress/kendo-react-inputs';
 import { IntlService } from '@progress/kendo-react-intl';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { JSX } from 'react/jsx-runtime';
 import { LabelProps } from '@progress/kendo-react-labels';
 import { LocalizationService } from '@progress/kendo-react-intl';
 import { MultiSelectProps } from '@progress/kendo-react-dropdowns';
@@ -1894,7 +1894,7 @@ export declare const SchedulerFormEditor: React_2.ForwardRefExoticComponent<glob
 export declare const schedulerFormEditorDefaultProps: {
     as: React_2.ForwardRefExoticComponent<globalThis.Omit<FormElementProps, "ref"> & React_2.RefAttributes<FormElementHandle>>;
     titleLabel: {
-        (props: LabelProps): JSX_2.Element;
+        (props: LabelProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             editorId: Requireable<string>;
@@ -1910,7 +1910,7 @@ export declare const schedulerFormEditorDefaultProps: {
         displayName: string;
     };
     titleError: {
-        (props: ErrorProps): JSX_2.Element;
+        (props: ErrorProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             direction: Requireable<string>;
@@ -1922,7 +1922,7 @@ export declare const schedulerFormEditorDefaultProps: {
     };
     titleEditor: React_2.ForwardRefExoticComponent<InputProps & React_2.RefAttributes<InputHandle | null>>;
     startLabel: {
-        (props: LabelProps): JSX_2.Element;
+        (props: LabelProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             editorId: Requireable<string>;
@@ -1938,7 +1938,7 @@ export declare const schedulerFormEditorDefaultProps: {
         displayName: string;
     };
     startError: {
-        (props: ErrorProps): JSX_2.Element;
+        (props: ErrorProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             direction: Requireable<string>;
@@ -1948,9 +1948,9 @@ export declare const schedulerFormEditorDefaultProps: {
         };
         displayName: string;
     };
-    startEditor: (props: ZonedDateTimeProps) => JSX_2.Element;
+    startEditor: (props: ZonedDateTimeProps) => JSX.Element;
     startTimezoneLabel: {
-        (props: LabelProps): JSX_2.Element;
+        (props: LabelProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             editorId: Requireable<string>;
@@ -1966,7 +1966,7 @@ export declare const schedulerFormEditorDefaultProps: {
         displayName: string;
     };
     startTimezoneError: {
-        (props: ErrorProps): JSX_2.Element;
+        (props: ErrorProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             direction: Requireable<string>;
@@ -1976,9 +1976,9 @@ export declare const schedulerFormEditorDefaultProps: {
         };
         displayName: string;
     };
-    startTimezoneEditor: (props: FieldRenderProps & ComboBoxProps) => JSX_2.Element;
+    startTimezoneEditor: (props: FieldRenderProps & ComboBoxProps) => JSX.Element;
     startTimezoneCheckedLabel: {
-        (props: LabelProps): JSX_2.Element;
+        (props: LabelProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             editorId: Requireable<string>;
@@ -1995,7 +1995,7 @@ export declare const schedulerFormEditorDefaultProps: {
     };
     startTimezoneCheckedEditor: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<CheckboxHandle | null>>;
     endLabel: {
-        (props: LabelProps): JSX_2.Element;
+        (props: LabelProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             editorId: Requireable<string>;
@@ -2011,7 +2011,7 @@ export declare const schedulerFormEditorDefaultProps: {
         displayName: string;
     };
     endError: {
-        (props: ErrorProps): JSX_2.Element;
+        (props: ErrorProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             direction: Requireable<string>;
@@ -2021,9 +2021,9 @@ export declare const schedulerFormEditorDefaultProps: {
         };
         displayName: string;
     };
-    endEditor: (props: ZonedDateTimeProps) => JSX_2.Element;
+    endEditor: (props: ZonedDateTimeProps) => JSX.Element;
     endTimezoneLabel: {
-        (props: LabelProps): JSX_2.Element;
+        (props: LabelProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             editorId: Requireable<string>;
@@ -2039,7 +2039,7 @@ export declare const schedulerFormEditorDefaultProps: {
         displayName: string;
     };
     endTimezoneError: {
-        (props: ErrorProps): JSX_2.Element;
+        (props: ErrorProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             direction: Requireable<string>;
@@ -2049,9 +2049,9 @@ export declare const schedulerFormEditorDefaultProps: {
         };
         displayName: string;
     };
-    endTimezoneEditor: (props: FieldRenderProps & ComboBoxProps) => JSX_2.Element;
+    endTimezoneEditor: (props: FieldRenderProps & ComboBoxProps) => JSX.Element;
     endTimezoneCheckedLabel: {
-        (props: LabelProps): JSX_2.Element;
+        (props: LabelProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             editorId: Requireable<string>;
@@ -2068,7 +2068,7 @@ export declare const schedulerFormEditorDefaultProps: {
     };
     endTimezoneCheckedEditor: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<CheckboxHandle | null>>;
     allDayLabel: {
-        (props: LabelProps): JSX_2.Element;
+        (props: LabelProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             editorId: Requireable<string>;
@@ -2086,7 +2086,7 @@ export declare const schedulerFormEditorDefaultProps: {
     allDayEditor: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<CheckboxHandle | null>>;
     recurrenceEditor: React_2.FunctionComponent<RecurrenceEditorProps>;
     descriptionLabel: {
-        (props: LabelProps): JSX_2.Element;
+        (props: LabelProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             editorId: Requireable<string>;
@@ -2103,7 +2103,7 @@ export declare const schedulerFormEditorDefaultProps: {
     };
     descriptionEditor: React_2.ForwardRefExoticComponent<TextAreaProps & React_2.RefAttributes<TextAreaHandle | null>>;
     descriptionError: {
-        (props: ErrorProps): JSX_2.Element;
+        (props: ErrorProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             direction: Requireable<string>;
@@ -2114,7 +2114,7 @@ export declare const schedulerFormEditorDefaultProps: {
         displayName: string;
     };
     resourceLabel: {
-        (props: LabelProps): JSX_2.Element;
+        (props: LabelProps): JSX.Element;
         propTypes: {
             id: Requireable<string>;
             editorId: Requireable<string>;
@@ -2129,7 +2129,7 @@ export declare const schedulerFormEditorDefaultProps: {
         };
         displayName: string;
     };
-    resourceEditor: (props: ResourceEditorProps) => JSX_2.Element;
+    resourceEditor: (props: ResourceEditorProps) => JSX.Element;
 };
 
 /**
@@ -2763,7 +2763,7 @@ export declare type SchedulerItemSeriesAction = {
  */
 export declare interface SchedulerItemsFocusAction {
     type: ITEMS_FOCUS_ACTION;
-    item?: React_2.RefObject<SchedulerItemHandle>;
+    item?: React_2.RefObject<SchedulerItemHandle | null>;
     ignoreIsAllDay?: boolean;
 }
 
@@ -2788,7 +2788,7 @@ export declare type SchedulerItemShowRemoveDialogAction = {
  */
 export declare interface SchedulerItemsSelectAction {
     type: ITEMS_SELECT_ACTION;
-    item?: React_2.RefObject<SchedulerItemHandle>;
+    item?: React_2.RefObject<SchedulerItemHandle | null>;
     ignoreIsAllDay?: boolean;
 }
 
@@ -2928,141 +2928,265 @@ export declare const schedulerProportionalViewItemDefaultProps: {
 export declare interface SchedulerProps {
     /**
      * Specifies the `id` of the wrapping element of the Scheduler.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler id="my-scheduler" />
+     * ```
      */
     id?: string;
     /**
      * Specifies the `tabIndex` attribute of the wrapping element of the Scheduler.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler tabIndex={0} />
+     * ```
      */
     tabIndex?: number;
     /**
      * Specifies the `role` attribute of the Scheduler wrapping element.
      *
-     * For more information, refer to the [Scheduler Accessibility Compliance]({% slug accessibility_scheduler %}) article
+     * For more information, refer to the [Scheduler Accessibility Compliance]({% slug accessibility_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler role="application" />
+     * ```
      */
     role?: string;
     /**
      * The `aria-labelledby` attribute to be applied to the Scheduler component.
      *
-     * For more information, refer to the [Scheduler Accessibility Compliance]({% slug accessibility_scheduler %}) article
+     * For more information, refer to the [Scheduler Accessibility Compliance]({% slug accessibility_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler ariaLabelledby="scheduler-label" />
+     * ```
      */
     ariaLabelledby?: string;
     /**
      * The `aria-label` attribute to be applied to the Scheduler component.
      *
-     * For more information, refer to the [Scheduler Accessibility Compliance]({% slug accessibility_scheduler %}) article
+     * For more information, refer to the [Scheduler Accessibility Compliance]({% slug accessibility_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler ariaLabel="Scheduler component" />
+     * ```
      */
     ariaLabel?: string;
     /**
      * Specifies the `style` object of the wrapping element of the Scheduler.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler style={{ height: '500px' }} />
+     * ```
      */
     style?: React_2.CSSProperties;
     /**
      * Specifies the `className` attribute of the wrapping element of the Scheduler.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler className="custom-scheduler" />
+     * ```
      */
     className?: string;
     /**
      * Overrides the default item. Specifying the `item` property of a specific view will override this property.
      *
-     * The default component is: [SchedulerItem]({% slug api_scheduler_scheduleritem %})
+     * The default component is: [SchedulerItem]({% slug api_scheduler_scheduleritem %}).
      *
      * For more information on customizing the scheduler items, refer to the [Item Customization]({% slug overview_items_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomItem = (props) => <div>{props.title}</div>;
+     * <Scheduler item={CustomItem} />
+     * ```
      */
     item?: React_2.ComponentType<SchedulerItemProps>;
     /**
      * Overrides the default viewItem. Specifying the `viewItem` property of a specific view will override this property.
      *
-     * The default component is: [SchedulerViewItem]({% slug api_scheduler_schedulerviewitem %})
+     * The default component is: [SchedulerViewItem]({% slug api_scheduler_schedulerviewitem %}).
      *
      * For more information on customizing the scheduler items, refer to the [Item Customization]({% slug overview_items_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomViewItem = (props) => <div>{props.title}</div>;
+     * <Scheduler viewItem={CustomViewItem} />
+     * ```
      */
     viewItem?: React_2.ComponentType<SchedulerViewItemProps>;
     /**
      * Overrides the default editItem. Specifying the `editItem` property of a specific view will override this property.
      *
-     * The default component is: [SchedulerEditItem]({% slug api_scheduler_scheduleredititem %})
+     * The default component is: [SchedulerEditItem]({% slug api_scheduler_scheduleredititem %}).
      *
      * For more information on customizing the scheduler items, refer to the [Item Customization]({% slug overview_items_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomEditItem = (props) => <div>{props.title}</div>;
+     * <Scheduler editItem={CustomEditItem} />
+     * ```
      */
     editItem?: React_2.ComponentType<SchedulerEditItemProps>;
     /**
      * Overrides the default task. Specifying the `task` property of a specific view will override this property.
      * Currently, the `task` is being used in the [AgendaView]({% slug agenda_view_scheduler %}) only.
      *
-     * The default component is: [SchedulerTask]({% slug api_scheduler_schedulertask %})
+     * The default component is: [SchedulerTask]({% slug api_scheduler_schedulertask %}).
      *
      * For more information on customizing the scheduler tasks, refer to the [Task Customization]({% slug overview_tasks_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomTask = (props) => <div>{props.title}</div>;
+     * <Scheduler task={CustomTask} />
+     * ```
      */
     task?: React_2.ComponentType<SchedulerTaskProps>;
     /**
      * Overrides the default viewTask. Specifying the `viewTask` property of a specific view will override this property.
      * Currently, the `viewTask` is being used in the [AgendaView]({% slug agenda_view_scheduler %}) only.
      *
-     * The default component is: [SchedulerViewTask]({% slug api_scheduler_schedulerviewtask %})
+     * The default component is: [SchedulerViewTask]({% slug api_scheduler_schedulerviewtask %}).
      *
      * For more information on customizing the scheduler tasks, refer to the [Task Customization]({% slug overview_tasks_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomViewTask = (props) => <div>{props.title}</div>;
+     * <Scheduler viewTask={CustomViewTask} />
+     * ```
      */
     viewTask?: React_2.ComponentType<SchedulerTaskProps>;
     /**
      * Overrides the default editTask. Specifying the `editTask` property of a specific view will override this property.
-     * Currently, the `viewTask` is being used in the [AgendaView]({% slug agenda_view_scheduler %}) only.
+     * Currently, the `editTask` is being used in the [AgendaView]({% slug agenda_view_scheduler %}) only.
      *
-     * The default component is: [SchedulerEditTask]({% slug api_scheduler_scheduleredittask %})
+     * The default component is: [SchedulerEditTask]({% slug api_scheduler_scheduleredittask %}).
      *
      * For more information on customizing the scheduler tasks, refer to the [Task Customization]({% slug overview_tasks_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomEditTask = (props) => <div>{props.title}</div>;
+     * <Scheduler editTask={CustomEditTask} />
+     * ```
      */
     editTask?: React_2.ComponentType<SchedulerTaskProps>;
     /**
      * Overrides the default header component of the Scheduler.
      *
-     * The default component is: [SchedulerHeader]({% slug api_scheduler_schedulerheader %})
+     * The default component is: [SchedulerHeader]({% slug api_scheduler_schedulerheader %}).
      *
      * For more information on customizing the scheduler header, refer to the [Header Customization]({% slug overview_header_footer_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomHeader = (props) => <div>Custom Header</div>;
+     * <Scheduler header={CustomHeader} />
+     * ```
      */
     header?: React_2.ComponentType<SchedulerHeaderProps>;
     /**
      * Overrides the default footer component of the Scheduler.
      *
-     * The default component is: [Scheduler]({% slug api_scheduler_schedulerfooter %})
+     * The default component is: [SchedulerFooter]({% slug api_scheduler_schedulerfooter %}).
      *
      * For more information on customizing the scheduler footer, refer to the [Footer Customization]({% slug overview_header_footer_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomFooter = (props) => <div>Custom Footer</div>;
+     * <Scheduler footer={CustomFooter} />
+     * ```
      */
     footer?: React_2.ComponentType<SchedulerFooterProps>;
     /**
      * Overrides the default slot component. Specifying the `slot` property of a specific view will override this property.
      *
-     * The default component is: [SchedulerSlot]({% slug api_scheduler_schedulerslot %})
+     * The default component is: [SchedulerSlot]({% slug api_scheduler_schedulerslot %}).
      *
      * For more information on customizing the scheduler slots, refer to the [Slot Customization]({% slug overview_slots_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomSlot = (props) => <div>{props.title}</div>;
+     * <Scheduler slot={CustomSlot} />
+     * ```
      */
     slot?: React_2.ComponentType<SchedulerSlotProps>;
     /**
      * Overrides the default viewSlot component. Specifying the `viewSlot` property of a specific view will override this property.
      *
-     * The default component is: [SchedulerViewSlot]({% slug api_scheduler_schedulerviewslot %})
+     * The default component is: [SchedulerViewSlot]({% slug api_scheduler_schedulerviewslot %}).
      *
      * For more information on customizing the scheduler slots, refer to the [Slot Customization]({% slug overview_slots_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomViewSlot = (props) => <div>{props.title}</div>;
+     * <Scheduler viewSlot={CustomViewSlot} />
+     * ```
      */
     viewSlot?: React_2.ComponentType<SchedulerViewSlotProps>;
     /**
      * Overrides the default editSlot component. Specifying the `editSlot` property of a specific view will override this property.
      *
-     * The default component is: [SchedulerEditSlot]({% slug api_scheduler_schedulereditslot %})
+     * The default component is: [SchedulerEditSlot]({% slug api_scheduler_schedulereditslot %}).
      *
      * For more information on customizing the scheduler slots, refer to the [Slot Customization]({% slug overview_slots_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const CustomEditSlot = (props) => <div>{props.title}</div>;
+     * <Scheduler editSlot={CustomEditSlot} />
+     * ```
      */
     editSlot?: React_2.ComponentType<SchedulerEditSlotProps>;
     /** @hidden */
     form?: React_2.ComponentType<SchedulerFormProps>;
     /**
      * Sets the currently selected view. The value is matched with the `name` property of the view.
+     *
+     * Sets the initially selected view. The available values are:
+     * * `day`
+     * * `week`
+     * * `month`
+     * * `agenda`
+     * * `timeline`
+     *
+     * @example
+     * ```jsx
+     * <Scheduler view="day" />
+     * ```
      */
     view?: string;
     /**
-     * Sets the data of the Scheduler component. The data is then parsed and rendered as a visual Scheduler items.
+     * Sets the data of the Scheduler component. The data is then parsed and rendered as visual Scheduler items.
+     *
+     * @example
+     * ```jsx
+     * const data = [{ id: 1, title: 'Event', start: new Date(), end: new Date() }];
+     * <Scheduler data={data} />
+     * ```
      */
     data?: DataItem[];
     /**
      * Sets if the Scheduler component is editable. The value can be either a `boolean` or an Object to specify different types of editing.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler editable={true} />
+     * ```
      */
     editable?: EditableProp | boolean;
     /**
@@ -3076,26 +3200,59 @@ export declare interface SchedulerProps {
      * * `month`
      * * `agenda`
      * * `timeline`
+     *
+     * @example
+     * ```jsx
+     * <Scheduler defaultView="week" />
+     * ```
      */
     defaultView?: string;
     /**
-     * Sets the current selected `Date`. The current selected date is passed to the selected view and transformed in to a range.
+     * Sets the current selected `Date`. The current selected date is passed to the selected view and transformed into a range.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler date={new Date()} />
+     * ```
      */
     date?: Date;
     /**
      * Sets a default selected `Date`. The `defaultDate` property is used to specify the initial rendered date, while still remaining in an uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler defaultDate={new Date()} />
+     * ```
      */
     defaultDate?: Date;
     /**
-     * Force a `rtl` mode. For more information refer to [RTL Support]({% slug globalization_scheduler %}#toc-right-to-left-support)
+     * Force a `rtl` mode. For more information refer to [RTL Support]({% slug globalization_scheduler %}#toc-right-to-left-support).
+     *
+     * @example
+     * ```jsx
+     * <Scheduler rtl={true} />
+     * ```
      */
     rtl?: boolean;
     /**
      * Sets the `height` of the Scheduler.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler height={600} />
+     * ```
      */
     height?: number | string;
     /**
      * Specify the available `view` components as `children` and the Scheduler will match the currently selected view and render it.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler>
+     *   <DayView />
+     *   <WeekView />
+     * </Scheduler>
+     * ```
      */
     children?: SchedulerView[] | SchedulerView;
     /**
@@ -3103,34 +3260,75 @@ export declare interface SchedulerProps {
      * For example, `Europe/Sofia`.
      *
      * Defaults to `Etc/UTC`.
+     *
+     * @example
+     * ```jsx
+     * <Scheduler timezone="Europe/Sofia" />
+     * ```
      */
     timezone?: string;
     /**
      * Specifies the groups of the Scheduler.
+     *
+     * @example
+     * ```jsx
+     * const group = { resources: ['Rooms'], orientation: 'horizontal' };
+     * <Scheduler group={group} />
+     * ```
      */
     group?: SchedulerGroup;
     /**
      * Specifies the resources of the Scheduler.
+     *
+     * @example
+     * ```jsx
+     * const resources = [{ name: 'Rooms', data: [{ text: 'Room 1', value: 1 }] }];
+     * <Scheduler resources={resources} />
+     * ```
      */
     resources?: SchedulerResource[];
     /**
      * The names of the model fields from which the Scheduler will read its data
      * ([see example]({% slug data_binding_scheduler %})).
+     *
+     * @example
+     * ```jsx
+     * const modelFields = { id: 'TaskID', start: 'Start', end: 'End' };
+     * <Scheduler modelFields={modelFields} />
+     * ```
      */
     modelFields?: SchedulerModelFields;
     /**
      * Called when new `date` is selected.
+     *
+     * @example
+     * ```jsx
+     * const handleDateChange = (args) => console.log(args.value);
+     * <Scheduler onDateChange={handleDateChange} />
+     * ```
      */
     onDateChange?: (args: SchedulerDateChangeEvent) => void;
     /**
-     * Called when new `view` is selected. [(see example)]({% slug views_scheduler %}#toc-controlling-the-selected-view)
+     * Called when new `view` is selected. [(see example)]({% slug views_scheduler %}#toc-controlling-the-selected-view).
+     *
+     * @example
+     * ```jsx
+     * const handleViewChange = (args) => console.log(args.value);
+     * <Scheduler onViewChange={handleViewChange} />
+     * ```
      */
     onViewChange?: (args: SchedulerViewChangeEvent) => void;
     /**
      * Called each time when editing occurs.
-     * To enable editing set the `editable` property to `true` or an [`EditableProp`]({% slug api_scheduler_editableprop %})
+     * To enable editing set the `editable` property to `true` or an [`EditableProp`]({% slug api_scheduler_editableprop %}).
      *
      * For more information refer to the [Scheduler Editing]({% slug editing_scheduler %}) article.
+     *
+     * @example
+     * ```jsx
+     * const handleDataChange = (event) => console.log(event);
+     * <Scheduler onDataChange={handleDataChange} />
+     * ```
      */
     onDataChange?: (event: SchedulerDataChangeEvent) => void;
 }
@@ -3446,7 +3644,7 @@ export declare interface SchedulerSlotsFocusAction {
  */
 export declare interface SchedulerSlotsSelectAction {
     type: SLOTS_SELECT_ACTION;
-    slot?: React_2.RefObject<SchedulerSlotHandle>;
+    slot?: React_2.RefObject<SchedulerSlotHandle | null>;
 }
 
 /**