react-chrono - npm Package Compare versions

Comparing version 2.5.1 to 2.6.0

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

@@ -8,3 +8,2 @@ import { TimelineVerticalModel } from '@models/TimelineVerticalModel';
  * @property {React.ReactNode} contentDetailsChildren - The content details children nodes.
- * @property {boolean} enableOutline - Whether to enable outline.
  * @property {boolean} hasFocus - Whether the timeline has focus.
@@ -11,0 +10,0 @@ * @property {React.ReactNode} iconChildren - The icon children nodes.

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

@@ -5,3 +5,2 @@ /// <reference types="react" />
 export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $hideControls?: boolean;
     cardPositionHorizontal?: 'TOP' | 'BOTTOM';
@@ -8,0 +7,0 @@ }>>;

dist/models/TimelineModel.d.ts

@@ -12,3 +12,3 @@ /// <reference types="react" />
  */
-export type TimelineModel = Pick<TimelineProps, 'items' | 'onItemSelected' | 'onRestartSlideshow' | 'theme' | 'slideShow' | 'onScrollEnd' | 'mode' | 'enableOutline' | 'hideControls' | 'timelinePointDimension' | 'nestedCardHeight' | 'noUniqueId' | 'uniqueId'> & {
+export type TimelineModel = Pick<TimelineProps, 'items' | 'onItemSelected' | 'onRestartSlideshow' | 'theme' | 'slideShow' | 'onScrollEnd' | 'mode' | 'timelinePointDimension' | 'nestedCardHeight' | 'noUniqueId' | 'uniqueId'> & {
     activeTimelineItem?: number;
@@ -90,6 +90,6 @@ contentDetailsChildren?: React.ReactNode | React.ReactNode[];
     disableTimelinePoint?: boolean;
+    disableToolbar?: boolean;
     enableBreakPoint?: boolean;
     enableDarkToggle?: boolean;
     enableLayoutSwitch?: boolean;
-    enableOutline?: boolean;
     enableQuickJump?: boolean;
@@ -104,3 +104,2 @@ flipLayout?: boolean;
     };
-    hideControls?: boolean;
     highlightCardsOnHover?: boolean;
@@ -107,0 +106,0 @@ itemWidth?: number;

dist/models/TimelineVerticalModel.d.ts

@@ -10,3 +10,3 @@ /// <reference types="react" />
  */
-export type Props = Pick<TimelineProps, 'flipLayout' | 'theme' | 'mode' | 'timelinePointDimension' | 'lineWidth' | 'cardHeight' | 'enableOutline' | 'disableClickOnCircle' | 'cardLess' | 'nestedCardHeight'> & {
+export type Props = Pick<TimelineProps, 'flipLayout' | 'theme' | 'mode' | 'timelinePointDimension' | 'lineWidth' | 'cardHeight' | 'disableClickOnCircle' | 'cardLess' | 'nestedCardHeight'> & {
     alternateCards?: boolean;
@@ -49,3 +49,3 @@ hasFocus?: boolean;
  */
-export type TimelineVerticalModel = Pick<Props, 'alternateCards' | 'enableOutline' | 'mode' | 'onClick' | 'onElapsed' | 'slideShowRunning' | 'theme' | 'hasFocus' | 'cardLess' | 'nestedCardHeight'> & {
+export type TimelineVerticalModel = Pick<Props, 'alternateCards' | 'mode' | 'onClick' | 'onElapsed' | 'slideShowRunning' | 'theme' | 'hasFocus' | 'cardLess' | 'nestedCardHeight'> & {
     activeTimelineItem?: number;
@@ -52,0 +52,0 @@ autoScroll: (s: Partial<Scroll>) => void;

dist/README.md

@@ -22,3 +22,3 @@ <div align="center">
   <div>
-    <img src="./readme-assets/react_chrono_2.gif" />
+    <img src="./readme-assets/new-image.png" />
   </div>
@@ -63,3 +63,2 @@
   - [Slideshow](#slideshow)
-  - [Outline](#outline)
   - [Item Width](#item-width)
@@ -137,3 +136,3 @@ - [🎥Media Settings](#media-settings)
 
-![vertical-basic](./readme-assets/vertical-basic.png)
+![vertical-basic](./readme-assets/vertical_basic.png)
 
@@ -176,3 +175,2 @@ ### 🚥Vertical Alternating
 | 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                                                                                                |
@@ -182,3 +180,2 @@ | flipLayout               | false                | Reverses the layout (Right to Left).                                                                                                     |
 | fontSizes                |                      | Allows customization of font sizes.                                                                                                      |
-| hideControls             | false                | Hides navigation controls.                                                                                                               |
 | highlightCardsOnHover    | false                | Highlights the card on hover                                                                                                             |
@@ -197,3 +194,3 @@ | items                    | []                   | A collection of Timeline Item Models.                                                                                                    |
 | parseDetailsAsHTML       | false                | Parses the `cardDetailedText` as HTML.                                                                                                   |
-| responsiveBreakPoint     | 1024px               | Break point at which the timeline changes to `VERTICAL` mode when `VERTICAL_ALTERNATING` is the default mode                             |
+| responsiveBreakPoint     | 1024                 | Break point at which the timeline changes to `VERTICAL` mode when `VERTICAL_ALTERNATING` is the default mode                             |
 | scrollable               | true                 | Makes the timeline scrollable in `VERTICAL` and `VERTICAL_ALTERNATING` modes.                                                            |
@@ -212,2 +209,3 @@ | showAllCardsHorizontal   | false                | Displays all cards in horizontal mode. By default, only the active card is shown.                                                        |
 | useReadMore              | true                 | Enables or disables the "read more" button. Available if text content on the card is taller than the card itself.                        |
+| disableToolbar           | false                | Disables and hides the toolbar                                                                                                           |
 
@@ -497,13 +495,2 @@ ### Mode
 
-### Outline
-
-With `enableOutline` prop you can enable outline on the timelines and quickly jump to a specific timeline item.
-The outlines are only supported on `VERTICAL` and `VERTICAL_ALTERNATING` modes.
-
-```jsx
-<Chrono items={items} enableOutline />
-```
-
-![media](./readme-assets/outline.png)
-
 ### Item Width
@@ -669,2 +656,8 @@
   pnpm cypress:test
+
+  # run cypress tests in headless mode
+  pnpm cypress:headless
+
+  # run cypress tests in quiet mode
+  pnpm cypress:quiet
 ```
@@ -671,0 +664,0 @@

dist/utils/index.d.ts

 import { ButtonTexts, SlideShowType, TimelineMode } from '@models/TimelineModel';
 export declare const hexToRGBA: (hex: string, alpha: number) => string;
-export declare const getDefaultThemeOrDark: (isDark?: boolean) => import("../models/Theme").Theme;
+export declare const getDefaultThemeOrDark: (isDark?: boolean) => import("@models/Theme").Theme;
 export declare const getDefaultClassNames: () => {
@@ -5,0 +5,0 @@ card: string;

package.json

 {
   "name": "react-chrono",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "license": "MIT",
@@ -84,5 +84,5 @@ "description": "A Modern Timeline component for React",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.24",
-    "@types/react": "^18.2.62",
-    "@types/react-dom": "^18.2.19",
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
     "@types/react-router-dom": "^5.3.3",
@@ -102,3 +102,3 @@ "@types/sanitize-html": "^2.11.0",
     "c8": "^9.1.0",
-    "cssnano": "^6.0.5",
+    "cssnano": "^6.1.0",
     "cypress": "13.6.6",
@@ -117,3 +117,3 @@ "eslint": "^8.57.0",
     "postcss": "^8.4.35",
-    "postcss-preset-env": "^9.4.0",
+    "postcss-preset-env": "^9.5.0",
     "postcss-syntax": "^0.36.2",
@@ -125,5 +125,5 @@ "prettier": "^3.2.5",
     "react-is": "^18.2.0",
-    "react-router-dom": "^6.22.2",
+    "react-router-dom": "^6.22.3",
     "rimraf": "^5.0.5",
-    "rollup": "^4.12.0",
+    "rollup": "^4.12.1",
     "rollup-plugin-analyzer": "^4.0.0",
@@ -140,3 +140,3 @@ "rollup-plugin-copy": "^3.5.0",
     "size-limit": "^11.0.2",
-    "snyk": "^1.1281.0",
+    "snyk": "^1.1283.0",
     "start-server-and-test": "^2.0.3",
@@ -150,3 +150,3 @@ "stylelint": "^16.2.1",
     "stylelint-processor-styled-components": "^1.10.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
     "typescript-plugin-css-modules": "^5.1.0",
@@ -153,0 +153,0 @@ "typescript-plugin-styled-components": "^3.0.0",

README.md

@@ -22,3 +22,3 @@ <div align="center">
   <div>
-    <img src="./readme-assets/react_chrono_2.gif" />
+    <img src="./readme-assets/new-image.png" />
   </div>
@@ -63,3 +63,2 @@
   - [Slideshow](#slideshow)
-  - [Outline](#outline)
   - [Item Width](#item-width)
@@ -137,3 +136,3 @@ - [🎥Media Settings](#media-settings)
 
-![vertical-basic](./readme-assets/vertical-basic.png)
+![vertical-basic](./readme-assets/vertical_basic.png)
 
@@ -176,3 +175,2 @@ ### 🚥Vertical Alternating
 | 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                                                                                                |
@@ -182,3 +180,2 @@ | flipLayout               | false                | Reverses the layout (Right to Left).                                                                                                     |
 | fontSizes                |                      | Allows customization of font sizes.                                                                                                      |
-| hideControls             | false                | Hides navigation controls.                                                                                                               |
 | highlightCardsOnHover    | false                | Highlights the card on hover                                                                                                             |
@@ -197,3 +194,3 @@ | items                    | []                   | A collection of Timeline Item Models.                                                                                                    |
 | parseDetailsAsHTML       | false                | Parses the `cardDetailedText` as HTML.                                                                                                   |
-| responsiveBreakPoint     | 1024px               | Break point at which the timeline changes to `VERTICAL` mode when `VERTICAL_ALTERNATING` is the default mode                             |
+| responsiveBreakPoint     | 1024                 | Break point at which the timeline changes to `VERTICAL` mode when `VERTICAL_ALTERNATING` is the default mode                             |
 | scrollable               | true                 | Makes the timeline scrollable in `VERTICAL` and `VERTICAL_ALTERNATING` modes.                                                            |
@@ -212,2 +209,3 @@ | showAllCardsHorizontal   | false                | Displays all cards in horizontal mode. By default, only the active card is shown.                                                        |
 | useReadMore              | true                 | Enables or disables the "read more" button. Available if text content on the card is taller than the card itself.                        |
+| disableToolbar           | false                | Disables and hides the toolbar                                                                                                           |
 
@@ -497,13 +495,2 @@ ### Mode
 
-### Outline
-
-With `enableOutline` prop you can enable outline on the timelines and quickly jump to a specific timeline item.
-The outlines are only supported on `VERTICAL` and `VERTICAL_ALTERNATING` modes.
-
-```jsx
-<Chrono items={items} enableOutline />
-```
-
-![media](./readme-assets/outline.png)
-
 ### Item Width
@@ -669,2 +656,8 @@
   pnpm cypress:test
+
+  # run cypress tests in headless mode
+  pnpm cypress:headless
+
+  # run cypress tests in quiet mode
+  pnpm cypress:quiet
 ```
@@ -671,0 +664,0 @@

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

749298

increased by0.13%

Number of package files

95

increased by4.4%

Lines of code

2839

increased by0.18%

Worsened metrics

Number of lines in readme file

716

decreased by-0.97%

No dependency changes