@nimbus-ds/scroll-pane 1.1.1 → 1.1.2

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 (4) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/CHANGELOG.md +12 -0
  3. package/dist/index.d.ts +38 -26
  4. package/package.json +11 -11
package/CHANGELOG.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  The ScrollPane component handles responsive scrolls in lists that are overflowing inside a container.
4
4
 
5
+ ## 2026-01-13 `1.1.3`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Adds support for React 19. ([#404](https://github.com/TiendaNube/nimbus-design-system/pull/404) by [@joacotornello](https://github.com/joacotornello))
10
+
11
+ ## 2026-01-13 `1.1.2`
12
+
13
+ #### 🐛 Bug fixes
14
+
15
+ - `ScrollPane`: Fixed types to avoid bloating the documentation builder. ([#350](https://github.com/TiendaNube/nimbus-design-system/pull/350) by [@joacotornello](https://github.com/joacotornello))
16
+
5
17
  ## 2025-12-01 `1.1.1`
6
18
 
7
19
  #### 🐛 Bug fixes
package/dist/CHANGELOG.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  The ScrollPane component handles responsive scrolls in lists that are overflowing inside a container.
4
4
 
5
+ ## 2026-01-13 `1.1.3`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Adds support for React 19. ([#404](https://github.com/TiendaNube/nimbus-design-system/pull/404) by [@joacotornello](https://github.com/joacotornello))
10
+
11
+ ## 2026-01-13 `1.1.2`
12
+
13
+ #### 🐛 Bug fixes
14
+
15
+ - `ScrollPane`: Fixed types to avoid bloating the documentation builder. ([#350](https://github.com/TiendaNube/nimbus-design-system/pull/350) by [@joacotornello](https://github.com/joacotornello))
16
+
5
17
  ## 2025-12-01 `1.1.1`
6
18
 
7
19
  #### 🐛 Bug fixes
package/dist/index.d.ts CHANGED
@@ -22,10 +22,10 @@ export interface PolymorphicForwardRefComponent<IntrinsicElementString, OwnProps
22
22
  * so that events are typed when using JSX.IntrinsicElements.
23
23
  */
24
24
  <As = IntrinsicElementString>(props: As extends "" ? {
25
- as: keyof JSX.IntrinsicElements;
25
+ as: keyof React.JSX.IntrinsicElements;
26
26
  } : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
27
27
  as: As;
28
- }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
28
+ }> : As extends keyof React.JSX.IntrinsicElements ? Merge<React.JSX.IntrinsicElements[As], OwnProps & {
29
29
  as: As;
30
30
  }> : never): React.ReactElement | null;
31
31
  }
@@ -51,11 +51,15 @@ export type Position = "absolute" | "fixed" | "relative" | "static" | "sticky";
51
51
  export type Overflow = "visible" | "hidden" | "scroll" | "auto";
52
52
  export type PointerEvents = "auto" | "none" | "visiblePainted" | "visibleFill" | "visibleStroke" | "visible" | "painted" | "fill" | "stroke" | "all" | "inherit";
53
53
  export type TransitionTiming = "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end";
54
+ export type ScrollbarWidth = "auto" | "none" | "thin";
54
55
  declare const propertiesBox: {
55
56
  gap: {
56
57
  none: string;
57
58
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
58
- "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
60
+ * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
61
+ * such as grid or flex.
62
+ */
59
63
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
64
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
61
65
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -79,7 +83,10 @@ declare const propertiesBox: {
79
83
  gridGap: {
80
84
  none: string;
81
85
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
82
- "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
86
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
87
+ * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
88
+ * such as grid or flex.
89
+ */
83
90
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
84
91
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
85
92
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -111,9 +118,7 @@ declare const propertiesBox: {
111
118
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
112
119
  "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
113
120
  "primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
114
- "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
115
- * The width property specifies the width of a box's content area.
116
- */
121
+ "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
117
122
  "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
118
123
  "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
119
124
  "success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -147,9 +152,7 @@ declare const propertiesBox: {
147
152
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
148
153
  "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
149
154
  "primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
150
- "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
151
- * The width property specifies the width of a box's content area.
152
- */
155
+ "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
153
156
  "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
154
157
  "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
155
158
  "success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -187,10 +190,6 @@ declare const propertiesBox: {
187
190
  "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
188
191
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
189
192
  "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
190
- /**
191
- * The gridArea shorthand property specifies a grid item's size and location within a grid by contributing a line,
192
- * a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
193
- */
194
193
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
195
194
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
195
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -212,9 +211,7 @@ declare const propertiesBox: {
212
211
  borderWidth: {
213
212
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
214
213
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
215
- "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
216
- * The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
217
- */
214
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
218
215
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
219
216
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
220
217
  none: string;
@@ -225,7 +222,10 @@ declare const propertiesBox: {
225
222
  spacing: {
226
223
  none: string;
227
224
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
228
- "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
225
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
226
+ * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
227
+ * such as grid or flex.
228
+ */
229
229
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
230
230
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
231
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -248,7 +248,10 @@ declare const propertiesBox: {
248
248
  };
249
249
  margin: {
250
250
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
251
- "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
251
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
252
+ * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
253
+ * such as grid or flex.
254
+ */
252
255
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
253
256
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
254
257
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -312,7 +315,10 @@ declare const propertiesBox: {
312
315
  };
313
316
  fontSize: {
314
317
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
315
- "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
318
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
319
+ * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
320
+ * such as grid or flex.
321
+ */
316
322
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
317
323
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
318
324
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -343,7 +349,10 @@ declare const propertiesBox: {
343
349
  };
344
350
  lineHeight: {
345
351
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
346
- "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
352
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
353
+ * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
354
+ * such as grid or flex.
355
+ */
347
356
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
348
357
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
349
358
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -372,6 +381,7 @@ declare const propertiesBox: {
372
381
  h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
373
382
  h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
374
383
  };
384
+ scrollbarWidth: ScrollbarWidth[];
375
385
  };
376
386
  export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
377
387
  export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
@@ -772,6 +782,10 @@ export interface BoxSprinkle {
772
782
  * @default left
773
783
  */
774
784
  textAlign?: TextAlign | BoxConditions<TextAlign>;
785
+ /**
786
+ * The scrollbarWidth property specifies the width of the scrollbar.
787
+ */
788
+ scrollbarWidth?: ScrollbarWidth | BoxConditions<ScrollbarWidth>;
775
789
  }
776
790
  export interface BoxProperties extends BoxSprinkle {
777
791
  /**
@@ -792,16 +806,14 @@ export interface ScrollPaneItemProperties {
792
806
  * Custom class name for styling
793
807
  */
794
808
  className?: string;
795
- /**
796
- * Custom inline styles
797
- */
798
- style?: React.CSSProperties;
799
809
  /**
800
810
  * Callback fired when the item is clicked
801
811
  */
802
812
  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
803
813
  }
804
- export type ScrollPaneItemProps = ScrollPaneItemProperties & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
814
+ export type ScrollPaneItemProps = ScrollPaneItemProperties & {
815
+ style?: React.CSSProperties;
816
+ } & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
805
817
  export type ScrollPaneArrowProperties = {
806
818
  children: ReactNode;
807
819
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nimbus-ds/scroll-pane",
3
- "version": "1.1.1",
3
+ "version": "1.1.2",
4
4
  "description": "ScrollPane component handles responsive scrolls in lists that are overflowing inside a container.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
@@ -41,20 +41,20 @@
41
41
  "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
42
42
  },
43
43
  "peerDependencies": {
44
- "@nimbus-ds/styles": "^9.42.1",
45
- "react": "^16.8 || ^17.0 || ^18.0",
46
- "react-dom": "^16.8 || ^17.0 || ^18.0"
44
+ "@nimbus-ds/styles": "^9.50.0",
45
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
46
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
47
47
  },
48
48
  "dependencies": {
49
- "@nimbus-ds/box": "^4.3.2",
49
+ "@nimbus-ds/box": "^4.3.3",
50
50
  "react-indiana-drag-scroll": "^2.2.0"
51
51
  },
52
52
  "devDependencies": {
53
- "@nimbus-ds/button": "^2.10.0",
54
- "@nimbus-ds/card": "^3.1.2",
55
- "@nimbus-ds/icon": "^3.3.0",
56
- "@nimbus-ds/icons": "^1.14.0",
57
- "@nimbus-ds/text": "^6.6.0",
58
- "@nimbus-ds/webpack": "^1.7.0"
53
+ "@nimbus-ds/button": "^2.10.1",
54
+ "@nimbus-ds/card": "^3.1.3",
55
+ "@nimbus-ds/icon": "^3.3.1",
56
+ "@nimbus-ds/icons": "^1.15.1",
57
+ "@nimbus-ds/text": "^6.6.1",
58
+ "@nimbus-ds/webpack": "^1.7.1"
59
59
  }
60
60
  }