react-chrono - npm Package Compare versions

Comparing version 2.4.2 to 2.5.0

dist/components/GlobalContext.d.ts

@@ -1,8 +0,12 @@
-import { TimelineProps as PropsModel } from '@models/TimelineModel';
+import { TimelineProps as PropsModel, TextDensity } from '@models/TimelineModel';
 import { FunctionComponent } from 'react';
-declare const GlobalContext: import("react").Context<PropsModel & {
+export type ContextProps = PropsModel & {
+    isMobile?: boolean;
     toggleDarkMode?: () => void;
-}>;
-declare const GlobalContextProvider: FunctionComponent<Partial<PropsModel>>;
+    updateHorizontalAllCards?: (state: boolean) => void;
+    updateTextContentDensity?: (value: TextDensity) => void;
+};
+declare const GlobalContext: import("react").Context<ContextProps>;
+declare const GlobalContextProvider: FunctionComponent<ContextProps>;
 export default GlobalContextProvider;
 export { GlobalContext };

dist/components/icons/index.d.ts

@@ -0,3 +1,9 @@
+export { default as ArrowDownIcon } from './arrow-down';
+export { default as CheckIcon } from './check';
+export { default as ChevronDown } from './chev-down';
 export { default as ChevronLeft } from './chev-left';
 export { default as ChevronRight } from './chev-right';
+export { default as ChevronUp } from './chev-up';
+export { default as CloseIcon } from './close';
+export { default as LayoutIcon } from './layout';
 export { default as MaximizeIcon } from './maximize';
@@ -10,1 +16,3 @@ export { default as MinimizeIcon } from './minimize';
 export { default as SunIcon } from './sun';
+export { default as TextIcon } from './text';
+export { default as ParaIcon } from './para';

dist/components/index.d.ts

 import { TimelineProps } from '@models/TimelineModel';
-import 'focus-visible';
 import React from 'react';
 declare const Chrono: React.FunctionComponent<Partial<TimelineProps>>;
 export default Chrono;

dist/components/timeline-elements/timeline-card-content/details-text.d.ts

@@ -1,11 +0,4 @@
-import { TimelineContentModel } from '@models/TimelineContentModel';
-import { ReactNode } from 'react';
-declare const DetailsText: import("react").ForwardRefExoticComponent<Pick<TimelineContentModel, "detailedText" | "timelineContent"> & {
-    cardActualHeight?: number;
-    contentDetailsClass?: string;
-    customContent?: ReactNode;
-    detailsHeight?: number;
-    gradientColor?: string;
-    showMore?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>>;
+/// <reference types="react" />
+import { DetailsTextProps } from './details-text.model';
+declare const DetailsText: import("react").ForwardRefExoticComponent<DetailsTextProps & import("react").RefAttributes<HTMLDivElement>>;
 export { DetailsText };

dist/components/timeline-elements/timeline-card-content/header-footer.model.d.ts

 import { Theme } from '@models/Theme';
 import { TimelineContentModel } from '@models/TimelineContentModel';
 import { RefObject } from 'react';
-export type ContentHeaderProps = Pick<TimelineContentModel, 'theme' | 'url' | 'title' | 'media' | 'content'>;
+export type ContentHeaderProps = Pick<TimelineContentModel, 'theme' | 'url' | 'title' | 'media' | 'content' | 'cardTitle'>;
 export type ContentFooterProps = {
@@ -6,0 +6,0 @@ canShow: boolean;

dist/components/timeline-elements/timeline-card-content/timeline-card-content.styles.d.ts

 /// <reference types="react" />
 import { Theme } from '@models/Theme';
-import { TimelineProps } from '@models/TimelineModel';
+import { TextDensity, TimelineProps } from '@models/TimelineModel';
 type ContentT = Pick<TimelineProps, 'theme' | 'slideShow' | 'mode' | 'borderLessCards'>;
@@ -9,2 +9,3 @@ export declare const TimelineItemContentWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
     $branchDir?: string;
+    $customContent?: boolean;
     $highlight?: boolean;
@@ -18,4 +19,4 @@ $isNested?: boolean;
     $slideShowType?: TimelineProps['slideShowType'];
+    $textDensity?: TextDensity;
     $textOverlay?: boolean;
-    $customContent?: boolean;
 } & ContentT>>;
@@ -22,0 +23,0 @@ export declare const TimelineCardHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>;

dist/components/timeline-elements/timeline-control/timeline-control.d.ts

@@ -22,3 +22,3 @@ import { TimelineControlModel } from '@models/TimelineControlModel';
  */
-declare const TimelineControl: React.FunctionComponent<TimelineControlModel>;
-export default TimelineControl;
+declare const Controls: React.FunctionComponent<TimelineControlModel>;
+export default Controls;

dist/components/timeline-vertical/timeline-vertical-shape.styles.d.ts

 /// <reference types="react" />
 export declare const TimelinePointWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $cardLess?: boolean;
+    $isMobile?: boolean;
     bg?: string;
@@ -5,0 +6,0 @@ width?: number;

dist/components/timeline-vertical/timeline-vertical.styles.d.ts

@@ -16,2 +16,3 @@ /// <reference types="react" />
     $flip?: boolean;
+    $isMobile?: boolean;
     $noTitle?: boolean;
@@ -18,0 +19,0 @@ height?: number;

dist/components/timeline/timeline.d.ts

 import { TimelineModel } from '@models/TimelineModel';
-import 'focus-visible';
 import React from 'react';
 declare const Timeline: React.FunctionComponent<TimelineModel>;
 export default Timeline;

dist/components/timeline/timeline.style.d.ts

@@ -13,2 +13,3 @@ /// <reference types="react" />
     mode?: TimelineMode;
+    position?: 'top' | 'bottom';
     theme?: Theme;
@@ -28,1 +29,9 @@ }>>;
 }>>;
+export declare const ToolbarWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    position: 'top' | 'bottom';
+}>>;
+export declare const ExtraControls: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
+    $hide: boolean;
+    $slideShowRunning: boolean;
+}>>;
+export declare const ExtraControlChild: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>;

dist/models/Theme.d.ts

@@ -20,2 +20,5 @@ export interface Theme {
     titleColorActive?: string;
+    toolbarBgColor?: string;
+    toolbarBtnBgColor?: string;
+    toolbarTextColor?: string;
 }

dist/models/TimelineContentModel.d.ts

@@ -11,2 +11,3 @@ import { ReactNode } from 'react';
     branchDir?: string;
+    cardTitle?: string;
     content?: string | ReactNode;
@@ -13,0 +14,0 @@ customContent?: React.ReactNode;

dist/models/TimelineModel.d.ts

 /// <reference types="react" />
 import { Theme } from './Theme';
 import { TimelineItemModel } from './TimelineItemModel';
+export type TextDensity = 'LOW' | 'HIGH';
 /**
@@ -27,2 +28,31 @@ * model internally used by the component
 };
+type Option = {
+    helpText?: string;
+    text: string;
+};
+type ChangeDensityOptions = {
+    high?: Option;
+    low?: Option;
+};
+type ChangeLayoutOptions = {
+    alternating?: Option;
+    horizontal?: Option;
+    horizontal_all?: Option;
+    vertical?: Option;
+};
+export type ButtonTexts = {
+    changeDensity?: string;
+    changeDensityOptions?: ChangeDensityOptions;
+    changeLayout?: string;
+    changeLayoutOptions?: ChangeLayoutOptions;
+    dark?: string;
+    first: string;
+    jumpTo?: string;
+    last: string;
+    light?: string;
+    next?: string;
+    play?: string;
+    previous?: string;
+    stop?: string;
+};
 /**
@@ -38,12 +68,3 @@ * Main props used by the host app.
     borderLessCards?: boolean;
-    buttonTexts?: {
-        dark?: string;
-        first: string;
-        last: string;
-        light?: string;
-        next?: string;
-        play?: string;
-        previous?: string;
-        stop?: string;
-    };
+    buttonTexts?: ButtonTexts;
     cardHeight?: number;
@@ -72,3 +93,5 @@ cardLess?: boolean;
     enableDarkToggle?: boolean;
+    enableLayoutSwitch?: boolean;
     enableOutline?: boolean;
+    enableQuickJump?: boolean;
     flipLayout?: boolean;
@@ -102,2 +125,3 @@ focusActiveItemOnLoad?: boolean;
     parseDetailsAsHTML?: boolean;
+    responsiveBreakPoint?: number;
     scrollable?: boolean | {
@@ -111,2 +135,3 @@ scrollbar: boolean;
     slideShowType?: SlideShowType;
+    textDensity?: TextDensity;
     textOverlay?: boolean;
@@ -118,7 +143,8 @@ theme?: Theme;
     titleDateFormat?: string;
+    toolbarPosition?: 'top' | 'bottom';
     uniqueId?: string;
     useReadMore?: boolean;
-    verticalBreakPoint?: number;
 };
 export type SlideShowType = 'reveal' | 'slide_in' | 'slide_from_sides';
-export type TimelineMode = 'VERTICAL' | 'HORIZONTAL' | 'VERTICAL_ALTERNATING';
+export type TimelineMode = 'VERTICAL' | 'HORIZONTAL' | 'VERTICAL_ALTERNATING' | 'HORIZONTAL_ALL';
+export {};

dist/models/TimelineVerticalModel.d.ts

@@ -29,2 +29,3 @@ /// <reference types="react" />
     iconChild?: React.ReactNode;
+    isMobile?: boolean;
     onActive: (pointOffset: number) => void;
@@ -31,0 +32,0 @@ };

dist/README.md

@@ -172,3 +172,5 @@ <div align="center">
 | enableDarkToggle         | false                | Adds a toggle switch for dark mode.                                                                                                      |
+| enableLayoutSwitch       | true                 | Switches the timeline layout                                                                                                             |
 | enableOutline            | false                | Enables an outline menu in vertical and vertical alternating modes.                                                                      |
+| enableQuickJump          | true                 | Allows to quickly jump to a timeline item                                                                                                |
 | flipLayout               | false                | Reverses the layout (Right to Left).                                                                                                     |
@@ -202,3 +204,4 @@ | focusActiveItemOnLoad    | false                | Automatically scrolls to and focuses on the `activeItemIndex` when loading.                                                              |
 | useReadMore              | true                 | Enables or disables the "read more" button. Available if text content on the card is taller than the card itself.                        |
-| verticalBreakPoint       | 768px                | Sets the pixel count below which the timeline will switch to `VERTICAL` mode.                                                            |
+| responsiveBreakPoint     | 1024px               | Break point at which the timeline changes to `VERTICAL` mode when `VERTICAL_ALTERNATING` is the default mode                             |
+| textDensity              | HIGH                 | Configures the amount of text to be displayed in each timeline card. Can be either `HIGH` or `LOW`                                       |
 
@@ -528,2 +531,4 @@ ### Mode
 
+> Checkout the documentation for the complete list of available theme properties.
+
 ```jsx
@@ -530,0 +535,0 @@ <Chrono

dist/utils/index.d.ts

@@ -1,2 +0,2 @@
-import { SlideShowType, TimelineMode } from '@models/TimelineModel';
+import { ButtonTexts, SlideShowType, TimelineMode } from '@models/TimelineModel';
 export declare const hexToRGBA: (hex: string, alpha: number) => string;
@@ -13,12 +13,3 @@ export declare const getDefaultThemeOrDark: (isDark?: boolean) => import("../models/Theme").Theme;
 };
-export declare const getDefaultButtonTexts: () => {
-    dark: string;
-    first: string;
-    last: string;
-    light: string;
-    next: string;
-    play: string;
-    previous: string;
-    stop: string;
-};
+export declare const getDefaultButtonTexts: () => ButtonTexts;
 export declare const getSlideShowType: (mode: TimelineMode) => SlideShowType;
@@ -25,0 +16,0 @@ export declare const isTextArray: (text: string | string[]) => text is string[];

package.json

 {
   "name": "react-chrono",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "license": "MIT",
@@ -40,3 +40,4 @@ "description": "A Modern Timeline component for React",
     "size-limit": "pnpm rollup && pnpm size-limit",
-    "build": "pnpm rollup"
+    "build": "pnpm rollup",
+    "fix-css": "stylelint src/**/*style.ts --custom-syntax @stylelint/postcss-css-in-js --fix"
   },
@@ -48,3 +49,4 @@ "dependencies": {
     "styled-components": "^6.1.8",
-    "xss": "^1.0.14"
+    "use-debounce": "^10.0.0",
+    "xss": "^1.0.15"
   },
@@ -60,7 +62,7 @@ "peerDependencies": {
   "devDependencies": {
-    "@babel/core": "^7.23.7",
+    "@babel/core": "^7.24.0",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/plugin-transform-runtime": "^7.24.0",
     "@babel/plugin-transform-typescript": "^7.23.6",
-    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
@@ -73,2 +75,3 @@ "@babel/preset-typescript": "^7.23.3",
     "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-eslint": "^9.0.5",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -80,40 +83,41 @@ "@rollup/plugin-strip": "^3.0.4",
     "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^20.11.5",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.62",
+    "@types/react-dom": "^18.2.19",
     "@types/react-router-dom": "^5.3.3",
-    "@types/sanitize-html": "^2.9.5",
+    "@types/sanitize-html": "^2.11.0",
     "@types/styled-components": "^5.1.34",
     "@types/testing-library__jest-dom": "^6.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.2.1",
-    "@vitest/ui": "^1.2.1",
-    "autoprefixer": "^10.4.17",
+    "@vitest/coverage-v8": "^1.3.1",
+    "@vitest/ui": "^1.3.1",
+    "autoprefixer": "^10.4.18",
     "babel-loader": "^9.1.3",
+    "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
     "babel-plugin-styled-components": "^2.1.4",
     "c8": "^9.1.0",
-    "cssnano": "^6.0.3",
-    "cypress": "13.6.3",
-    "eslint": "^8.56.0",
+    "cssnano": "^6.0.5",
+    "cypress": "13.6.6",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-sort-keys-fix": "^1.1.2",
-    "eslint-plugin-typescript-sort-keys": "^3.1.0",
-    "husky": "^8.0.3",
+    "eslint-plugin-typescript-sort-keys": "^3.2.0",
+    "husky": "^9.0.11",
     "intersection-observer": "^0.12.2",
-    "jsdom": "^23.2.0",
-    "lint-staged": "^15.2.0",
-    "postcss": "^8.4.33",
-    "postcss-preset-env": "^9.3.0",
+    "jsdom": "^24.0.0",
+    "lint-staged": "^15.2.2",
+    "postcss": "^8.4.35",
+    "postcss-preset-env": "^9.4.0",
     "postcss-syntax": "^0.36.2",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "pretty-quick": "^4.0.0",
@@ -123,17 +127,21 @@ "react": "^18.2.0",
     "react-is": "^18.2.0",
-    "react-router-dom": "^6.21.2",
+    "react-router-dom": "^6.22.2",
     "rimraf": "^5.0.5",
-    "rollup": "^4.9.5",
+    "rollup": "^4.12.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
-    "sass": "^1.70.0",
-    "semver": "^7.5.4",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.71.1",
+    "semver": "7.6.0",
     "size-limit": "^11.0.2",
-    "snyk": "^1.1269.0",
+    "snyk": "^1.1281.0",
     "start-server-and-test": "^2.0.3",
-    "stylelint": "^16.1.0",
+    "stylelint": "^16.2.1",
+    "stylelint-config-prettier-scss": "^1.0.0",
+    "stylelint-config-recess-order": "^5.0.0",
     "stylelint-config-recommended": "^14.0.0",
@@ -144,7 +152,7 @@ "stylelint-config-styled-components": "^0.1.1",
     "typescript": "^5.3.3",
-    "typescript-plugin-css-modules": "^5.0.2",
+    "typescript-plugin-css-modules": "^5.1.0",
     "typescript-plugin-styled-components": "^3.0.0",
-    "vite": "^5.0.11",
+    "vite": "^5.1.5",
     "vite-tsconfig-paths": "^4.3.1",
-    "vitest": "^1.2.1"
+    "vitest": "^1.3.1"
   },
@@ -151,0 +159,0 @@ "resolutions": {

README.md

@@ -172,3 +172,5 @@ <div align="center">
 | enableDarkToggle         | false                | Adds a toggle switch for dark mode.                                                                                                      |
+| enableLayoutSwitch       | true                 | Switches the timeline layout                                                                                                             |
 | enableOutline            | false                | Enables an outline menu in vertical and vertical alternating modes.                                                                      |
+| enableQuickJump          | true                 | Allows to quickly jump to a timeline item                                                                                                |
 | flipLayout               | false                | Reverses the layout (Right to Left).                                                                                                     |
@@ -202,3 +204,4 @@ | focusActiveItemOnLoad    | false                | Automatically scrolls to and focuses on the `activeItemIndex` when loading.                                                              |
 | useReadMore              | true                 | Enables or disables the "read more" button. Available if text content on the card is taller than the card itself.                        |
-| verticalBreakPoint       | 768px                | Sets the pixel count below which the timeline will switch to `VERTICAL` mode.                                                            |
+| responsiveBreakPoint     | 1024px               | Break point at which the timeline changes to `VERTICAL` mode when `VERTICAL_ALTERNATING` is the default mode                             |
+| textDensity              | HIGH                 | Configures the amount of text to be displayed in each timeline card. Can be either `HIGH` or `LOW`                                       |
 
@@ -528,2 +531,4 @@ ### Mode
 
+> Checkout the documentation for the complete list of available theme properties.
+
 ```jsx
@@ -530,0 +535,0 @@ <Chrono

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

545614

increased by4.06%

Number of package files

90

increased by26.76%

Lines of code

2833

increased by7.47%

Number of lines in readme file

722

increased by0.7%

Worsened metrics

Dependency count

8

increased by14.29%

Dev dependency count

91

increased by7.06%

Dependency changes

• + Addeduse-debounce@^10.0.0

• + Addeduse-debounce@10.0.4(transitive)

• Updatedxss@^1.0.15