react-calendar-timeline - npm Package Compare versions

Comparing version 0.30.0-beta.2 to 0.30.0-beta.3

dist/lib/headers/CustomDateHeader.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { HTMLProps } from 'react';
 import { Interval as IntervalType, IntervalRenderer } from '../types/main';
@@ -11,3 +11,5 @@ import { Dayjs } from 'dayjs';
     };
-    getRootProps: (props?: any) => any;
+    getRootProps: (props?: {
+        style?: React.CSSProperties;
+    }) => HTMLProps<HTMLDivElement>;
     getIntervalProps: GetIntervalPropsType;
@@ -14,0 +16,0 @@ showPeriod: (start: Dayjs, end: Dayjs) => void;

dist/lib/headers/DateHeader.d.ts

@@ -5,3 +5,3 @@ import { CSSProperties, ReactNode } from 'react';
 import { IntervalRenderer, SidebarHeaderChildrenFnProps, TimelineTimeSteps } from '../types/main';
-import { Dayjs, UnitType } from 'dayjs';
+import { Dayjs } from 'dayjs';
 export interface DateHeaderProps<Data> {
@@ -12,3 +12,3 @@ style?: CSSProperties | undefined;
     timelineUnit: SelectUnits;
-    labelFormat?: string | (([startTime, endTime]: [Dayjs, Dayjs], unit: UnitType | 'primaryHeader', labelWidth: number) => string) | undefined;
+    labelFormat?: string | FormatLabelFunction | undefined;
     intervalRenderer?: (props: IntervalRenderer<Data>) => ReactNode;
@@ -21,3 +21,3 @@ headerData?: Data | undefined;
     unit?: keyof TimelineTimeSteps | 'primaryHeader';
-    labelFormat?: typeof formatLabel;
+    labelFormat?: FormatLabelFunction;
     style?: CSSProperties;
@@ -30,8 +30,3 @@ className?: string;
 export declare function DateHeader<Data>({ labelFormat, unit, style, className, intervalRenderer, headerData, height, }: DateHeaderWrapper<Data>): import("react/jsx-runtime").JSX.Element;
-declare function formatLabel([timeStart]: [Dayjs, Dayjs], unit: keyof typeof defaultHeaderFormats, labelWidth: number, formatOptions?: Record<string, {
-    long: string;
-    mediumLong: string;
-    medium: string;
-    short: string;
-}>): string;
+type FormatLabelFunction = (timeRange: [Dayjs, Dayjs], unit: keyof typeof defaultHeaderFormats, labelWidth?: number, formatOptions?: typeof defaultHeaderFormats) => string;
 export default DateHeader;

dist/lib/headers/Interval.d.ts

@@ -21,4 +21,4 @@ import React, { HTMLAttributes, ReactNode } from 'react';
     };
-    render(): import("react/jsx-runtime").JSX.Element;
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }
 export default Interval;

dist/lib/headers/SidebarHeader.d.ts

@@ -1,8 +0,10 @@
-import { ComponentType, HTMLProps } from 'react';
+import React, { HTMLProps, ReactNode } from 'react';
 import { LEFT_VARIANT, RIGHT_VARIANT } from './constants';
-type GetRootProps = () => HTMLProps<HTMLDivElement>;
+type GetRootProps = (props?: {
+    style?: React.CSSProperties;
+}) => HTMLProps<HTMLDivElement>;
 export type SidebarWrapperProps = {
-    children?: ComponentType<{
+    children?: (props: {
         getRootProps: GetRootProps;
-    }>;
+    }) => ReactNode;
     variant?: typeof LEFT_VARIANT | typeof RIGHT_VARIANT;
@@ -9,0 +11,0 @@ headerData?: any;

dist/lib/items/defaultItemRenderer.d.ts

@@ -1,11 +0,3 @@
-import { HTMLAttributes } from 'react';
-import { GetItemPropsParams, GetResizeProps, ItemProps } from './Item';
-import { ItemContext, TimelineItemBase } from '../types/main';
-type Props<CustomItem extends TimelineItemBase<number>> = {
-    item: ItemProps<CustomItem>;
-    itemContext: ItemContext;
-    getItemProps: (p?: GetItemPropsParams) => HTMLAttributes<HTMLDivElement>;
-    getResizeProps: GetResizeProps;
-};
-export declare function defaultItemRenderer<CustomItem extends TimelineItemBase<number>>({ item, itemContext, getItemProps, getResizeProps }: Props<CustomItem>): import("react/jsx-runtime").JSX.Element;
-export {};
+import { ItemRendererProps } from './Item';
+import { TimelineItemBase } from '../types/main';
+export declare function defaultItemRenderer<CustomItem extends TimelineItemBase<number>>({ item, itemContext, getItemProps, getResizeProps }: ItemRendererProps<CustomItem>): import("react/jsx-runtime").JSX.Element;

dist/lib/items/Item.d.ts

@@ -69,3 +69,6 @@ import { Component, CSSProperties, HTMLAttributes, LegacyRef, MouseEvent, MouseEventHandler, ReactNode, TouchEvent, TouchEventHandler } from 'react';
     itemContext: ItemContext;
-    getItemProps: (params: GetItemPropsParams) => HTMLAttributes<HTMLDivElement>;
+    getItemProps: (params: GetItemPropsParams) => HTMLAttributes<HTMLDivElement> & {
+        key: string;
+        ref: LegacyRef<HTMLDivElement>;
+    };
     getResizeProps: GetResizeProps;
@@ -95,3 +98,3 @@ }
     private itemTimeEnd?;
-    private item?;
+    private itemRef;
     private dragLeft?;
@@ -125,3 +128,2 @@ private dragRight?;
     actualClick(e: MouseEvent<HTMLElement> | TouchEvent<HTMLElement>, clickType: 'click' | 'touch'): void;
-    getItemRef: (el: HTMLElement) => HTMLElement;
     getDragLeftRef: (el: HTMLElement) => HTMLElement;
@@ -131,3 +133,3 @@ getDragRightRef: (el: HTMLElement) => HTMLElement;
         key: string;
-        ref: (el: HTMLElement) => HTMLElement;
+        ref: import("react").RefObject<HTMLDivElement>;
         title: string | undefined;
@@ -145,4 +147,4 @@ className: string;
     getItemStyle(props: GetItemPropsParams): any;
-    render(): ReactNode;
+    render(): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }
 export {};

dist/lib/items/styles.d.ts

@@ -6,3 +6,8 @@ export declare const overridableStyles: {
     background: string;
-    border: string;
+    borderTopWidth: string;
+    borderBottomWidth: string;
+    borderLeftWidth: string;
+    borderRightWidth: string;
+    borderStyle: string;
+    borderColor: string;
     zIndex: number;
@@ -12,3 +17,8 @@ };
     background: string;
-    border: string;
+    borderTopWidth: string;
+    borderLeftWidth: string;
+    borderRightWidth: string;
+    borderBottomWidth: string;
+    borderStyle: string;
+    borderColor: string;
     zIndex: number;
@@ -27,3 +37,3 @@ };
 export declare const selectedAndCanResizeRight: {
-    borderRightWidth: number;
+    borderRightWidth: string;
 };
@@ -30,0 +40,0 @@ export declare const selectedAndCanResizeRightAndDragRight: {

dist/lib/markers/public/CursorMarker.d.ts

@@ -5,3 +5,3 @@ import { SubscribeReturn } from '../TimelineMarkersContext';
     subscribeMarker: (m: MarkerType) => SubscribeReturn;
-    children: MarkerRendererType;
+    children?: MarkerRendererType;
 };
@@ -8,0 +8,0 @@ declare const CursorMarkerWrapper: {

dist/lib/markers/public/CustomMarker.d.ts

@@ -5,3 +5,3 @@ import { SubscribeReturn } from '../TimelineMarkersContext';
     date: number;
-    children: MarkerRendererType;
+    children?: MarkerRendererType;
     updateMarker: (marker: MarkerType) => void;
@@ -8,0 +8,0 @@ subscribeMarker: (newe: MarkerType) => SubscribeReturn;

dist/lib/scroll/ScrollElement.d.ts

@@ -1,2 +0,2 @@
-import { Component, MouseEventHandler, ReactNode, TouchEventHandler } from 'react';
+import { Component, MouseEventHandler, ReactNode } from 'react';
 type Props = {
@@ -16,3 +16,3 @@ children: ReactNode;
 declare class ScrollElement extends Component<Props, State> {
-    scrollComponent: HTMLDivElement | null;
+    scrollComponentRef: import("react").RefObject<HTMLDivElement>;
     private dragLastPosition;
@@ -24,2 +24,3 @@ private lastTouchDistance;
     constructor(props: Props);
+    componentDidMount(): void;
     /**
@@ -29,3 +30,2 @@ * needed to handle scrolling with trackpad
     handleScroll: () => void;
-    refHandler: (el: HTMLDivElement) => void;
     handleWheel: (e: WheelEvent) => void;
@@ -36,4 +36,4 @@ handleMouseDown: MouseEventHandler<HTMLDivElement>;
     handleMouseLeave: () => void;
-    handleTouchStart: TouchEventHandler<HTMLDivElement>;
-    handleTouchMove: TouchEventHandler<HTMLDivElement>;
+    handleTouchStart: (e: TouchEvent) => void;
+    handleTouchMove: (e: TouchEvent) => void;
     handleTouchEnd: () => void;
@@ -40,0 +40,0 @@ handleItemInteract: (e: Event) => void;

dist/lib/Timeline.d.ts

@@ -8,3 +8,9 @@ import React, { Component, MouseEvent } from 'react';
 import { ItemProps, ResizeEdge } from './items/Item';
-import './Timeline.scss';
+export interface ReactCalendarTimelineRef {
+    getBoundingClientRect(): DOMRect;
+    calculateDropCoordinatesToTimeAndGroup(x: number, y: number): {
+        time: number;
+        groupIndex: number;
+    };
+}
 export type OnTimeChange<CustomItem, CustomGroup> = (visibleTimeStart: number, visibleTimeEnd: number, updateScrollCanvas: (start: dateType, end: dateType, forceUpdateDimensions?: boolean, items?: CustomItem[], groups?: CustomGroup[]) => void, unit: Unit) => any;
@@ -45,3 +51,3 @@ export type ReactCalendarTimelineProps<CustomItem extends TimelineItemBase<number>, CustomGroup extends TimelineGroupBase = TimelineGroupBase> = {
     onItemResize?(itemId: Id, endTimeOrStartTime: number, edge: ResizeEdge): void;
-    onItemSelect?(itemId: Id, e: any, time: number): void;
+    onItemSelect?(itemId: Id, e: React.SyntheticEvent, time: number): void;
     onItemDeselect?(e: React.SyntheticEvent): void;
@@ -70,2 +76,3 @@ onItemClick?(itemId: Id, e: React.SyntheticEvent, time: number): void;
     style?: React.CSSProperties;
+    ref?: React.Ref<ReactCalendarTimelineRef>;
 };
@@ -223,3 +230,8 @@ export type ReactCalendarTimelineState<CustomItem extends TimelineItemBase<any> = TimelineItemBase<number>, CustomGroup extends TimelineGroupBase = TimelineGroupBase> = {
     container: React.RefObject<HTMLDivElement>;
+    getBoundingClientRect: () => DOMRect;
+    calculateDropCoordinatesToTimeAndGroup: (x: number, y: number) => {
+        time: number;
+        groupIndex: number;
+    };
     render(): import("react/jsx-runtime").JSX.Element;
 }

package.json

 {
   "name": "react-calendar-timeline",
-  "version": "0.30.0-beta.2",
+  "version": "0.30.0-beta.3",
   "description": "react-calendar-timeline",
   "packageManager": "npm@10.1.0",
   "scripts": {
-    "build": "tsc && vite build",
+    "build": "npm run clean && tsc && vite build",
+    "clean": "rimraf ./dist",
     "lint": "eslint --ext .ts --ext .tsx ./src",
@@ -15,4 +16,7 @@ "lint:fix": "npm run lint --fix",
   "module": "./dist/react-calendar-timeline.es.js",
+  "sideEffects": false,
   "exports": {
-    "./styles.css": "./dist/styles.css",
+    "./style.css": "./dist/style.css",
+    "./dist/*.scss": "./dist/*.scss",
+    "./dist/*.css": "./dist/*.css",
     ".": {
@@ -22,2 +26,4 @@ "types": [
       ],
+      "sass": "./dist/Timeline.scss",
+      "style": "./dist/Timeline.css",
       "import": "./dist/react-calendar-timeline.es.js",
@@ -91,13 +97,12 @@ "require": "./dist/react-calendar-timeline.umd.js"
     "interactjs": "1.10.27",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": "^18 || ^19.0.0-rc-66855b96-20241106",
+    "react-dom": "^18 || ^19.0.0-rc-66855b96-20241106"
   },
   "devDependencies": {
-    "rollup-plugin-typescript-paths": "^1.5.0",
-    "@types/lodash": "^4.14.202",
+    "@faker-js/faker": "^9.0.3",
     "@rollup/plugin-typescript": "^12.1.0",
-    "@faker-js/faker": "^9.0.3",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@types/element-resize-detector": "^1.1.6",
+    "@types/lodash": "^4.14.202",
     "@types/react": "^18.2.41",
@@ -125,10 +130,11 @@ "@types/react-dom": "^18.2.17",
     "randomcolor": "^0.6.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "rollup-plugin-typescript-paths": "^1.5.0",
     "sass": "^1.69.5",
     "typescript": "^5.2.2",
-    "vite": "^5.4.8",
-    "vite-plugin-dts": "^4.2.4",
-    "vite-plugin-lib-inject-css": "^2.1.1"
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-static-copy": "^2.1.0"
   }
 }

README.md

@@ -6,4 +6,14 @@
 
-**🎉 Version 0.30.0-beta.1 Now Available!**
+**🎉 Version 0.30.0-beta.3 Now Available!**
 
+Latest release includes:
+- [Use buffer prop to calculate when to redraw canvas](https://github.com/namespace-ee/react-calendar-timeline/pull/936)
+- [fix start and end of day when there is daylight saving](https://github.com/namespace-ee/react-calendar-timeline/pull/727)
+- [fix timeSteps don't work properly](https://github.com/namespace-ee/react-calendar-timeline/pull/951)
+- [Add option do drop new tasks to the timeline from an external component](https://github.com/namespace-ee/react-calendar-timeline/pull/941)
+- [fix few other issues](https://github.com/namespace-ee/react-calendar-timeline/pull/944):
+  - Resolved an issue where the timeline would scroll left even when there were no items present
+  - Addressed a problem where anonymous renderers caused headers to unmount and lose their state
+  - Cleaned up unnecessary demo files following updates in the new release.
+
 We're excited to announce the beta release of v0.30.0 which includes:
@@ -10,0 +20,0 @@ - Full TypeScript rewrite

No alert changes

Improved metrics

Total package byte prevSize

1815546

increased by0.99%

Number of package files

52

increased by1.96%

Lines of code

8983

increased by0.85%

Number of lines in readme file

1328

increased by0.76%

No dependency changes