reshaped 3.3.12 → 3.3.13

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 (16) hide show
  1. package/CHANGELOG.md +3 -0
  2. package/dist/bundle.css +1 -1
  3. package/dist/bundle.d.ts +1 -1
  4. package/dist/bundle.js +11 -11
  5. package/dist/components/Carousel/Carousel.js +52 -4
  6. package/dist/components/Carousel/Carousel.types.d.ts +4 -0
  7. package/dist/components/Carousel/tests/Carousel.stories.d.ts +20 -4
  8. package/dist/components/Carousel/tests/Carousel.stories.js +195 -102
  9. package/dist/components/Container/Container.module.css +1 -1
  10. package/dist/components/Table/index.d.ts +1 -1
  11. package/dist/components/Table/tests/Table.stories.d.ts +5 -5
  12. package/dist/components/Table/tests/Table.test.stories.d.ts +5 -5
  13. package/dist/index.d.ts +1 -1
  14. package/package.json +32 -32
  15. package/dist/components/Carousel/tests/Carousel.test.stories.d.ts +0 -17
  16. package/dist/components/Carousel/tests/Carousel.test.stories.js +0 -52
package/dist/components/Carousel/Carousel.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import React from "react";
4
- import { classNames, responsiveVariables, responsiveClassNames, debounceHandler, } from "../../utilities/helpers.js";
4
+ import { classNames, responsiveVariables, responsiveClassNames, throttleHandler, } from "../../utilities/helpers.js";
5
5
  import View from "../View/index.js";
6
6
  import useRTL from "../../hooks/useRTL.js";
7
7
  import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
@@ -9,7 +9,9 @@ import CarouselControl from "./CarouselControl.js";
9
9
  import * as T from "./Carousel.types.js";
10
10
  import s from "./Carousel.module.css";
11
11
  const Carousel = (props) => {
12
- const { children, gap = 3, visibleItems, bleed, navigationDisplay, instanceRef, className, attributes, } = props;
12
+ const { children, gap = 3, visibleItems, bleed, navigationDisplay, onChange, instanceRef, className, attributes, } = props;
13
+ const currentIndexRef = React.useRef(0);
14
+ const itemRefs = React.useRef([]);
13
15
  const [mounted, setMounted] = React.useState(false);
14
16
  const [scrollPosition, setScrollPosition] = React.useState(0);
15
17
  const [isRTL] = useRTL();
@@ -21,9 +23,20 @@ const Carousel = (props) => {
21
23
  });
22
24
  }
23
25
  const rootClassNames = classNames(s.root, className, ...responsiveClassNames(s, "--bleed", typeof bleed === "number" ? true : bleedClassNames));
24
- const handleScroll = debounceHandler((event) => {
26
+ const handleItemRef = (el, index) => {
27
+ itemRefs.current[index] = el;
28
+ // TODO: Enable in React v19 since it introduced refs cleanup
29
+ // return () => {
30
+ // itemRefs.current[index] = null;
31
+ // };
32
+ };
33
+ const handleScroll = throttleHandler((event) => {
25
34
  const el = event.target;
35
+ const firstVisibleIndex = getFirstVisibleIndex();
26
36
  setScrollPosition(el.scrollLeft);
37
+ if (currentIndexRef.current !== firstVisibleIndex)
38
+ onChange?.({ index: firstVisibleIndex });
39
+ currentIndexRef.current = firstVisibleIndex;
27
40
  }, 16);
28
41
  const getItemsGap = () => {
29
42
  const style = getComputedStyle(scrollElRef.current);
@@ -31,6 +44,40 @@ const Carousel = (props) => {
31
44
  const xGap = style.gap.split(" ")[0];
32
45
  return Number(xGap.replace("px", ""));
33
46
  };
47
+ const getFirstVisibleIndex = () => {
48
+ let resultIndex = 0;
49
+ let sizeCalc = 0;
50
+ const scrollEl = scrollElRef.current;
51
+ if (!scrollEl)
52
+ return resultIndex;
53
+ const scrollValue = isRTL ? -scrollEl.scrollLeft : scrollEl.scrollLeft;
54
+ const gap = getItemsGap();
55
+ itemRefs.current.some((el, index) => {
56
+ if (!el)
57
+ return false;
58
+ const visible = sizeCalc + el.clientWidth / 2 >= scrollValue;
59
+ if (visible) {
60
+ resultIndex = index;
61
+ return true;
62
+ }
63
+ sizeCalc += el?.clientWidth + gap;
64
+ return false;
65
+ });
66
+ return resultIndex;
67
+ };
68
+ const navigateTo = (index) => {
69
+ const scrollEl = scrollElRef.current;
70
+ const el = itemRefs.current[index];
71
+ if (!el)
72
+ return;
73
+ scrollEl.scrollTo({
74
+ // Browsers mirror offsetLeft value but we need to also keep the target element on the other side of the container
75
+ // so adding addition calculations for the width of the content outside the target el
76
+ left: isRTL ? el.offsetLeft - (scrollEl.clientWidth - el.clientWidth) : el.offsetLeft,
77
+ top: 0,
78
+ behavior: "smooth",
79
+ });
80
+ };
34
81
  const navigateRight = () => {
35
82
  const scrollEl = scrollElRef.current;
36
83
  scrollEl.scrollBy({
@@ -52,6 +99,7 @@ const Carousel = (props) => {
52
99
  React.useImperativeHandle(instanceRef, () => ({
53
100
  navigateBack,
54
101
  navigateForward,
102
+ navigateTo,
55
103
  }));
56
104
  /**
57
105
  * Changing flag here since scroll ref changing won't rerender the controls and show them after SSR
@@ -63,6 +111,6 @@ const Carousel = (props) => {
63
111
  ...responsiveVariables("--rs-carousel-items", visibleItems),
64
112
  ...responsiveVariables("--rs-carousel-bleed", bleed),
65
113
  ...attributes?.style,
66
- }, children: [navigationDisplay !== "hidden" && (_jsxs(_Fragment, { children: [_jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.back, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateBack, mounted: mounted }), _jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.forward, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateForward, mounted: mounted })] })), _jsx(View, { as: "ul", direction: "row", wrap: false, gap: gap, className: s.scroll, attributes: { ref: scrollElRef, onScroll: handleScroll }, children: React.Children.map(children, (child) => (_jsx(View.Item, { className: s.item, as: "li", children: child }))) })] }));
114
+ }, children: [navigationDisplay !== "hidden" && (_jsxs(_Fragment, { children: [_jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.back, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateBack, mounted: mounted }), _jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.forward, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateForward, mounted: mounted })] })), _jsx(View, { as: "ul", direction: "row", wrap: false, gap: gap, className: s.scroll, attributes: { ref: scrollElRef, onScroll: handleScroll }, children: React.Children.map(children, (child, index) => (_jsx(View.Item, { className: s.item, as: "li", attributes: { ref: (el) => handleItemRef(el, index) }, children: child }))) })] }));
67
115
  };
68
116
  export default Carousel;
package/dist/components/Carousel/Carousel.types.d.ts CHANGED
@@ -3,6 +3,7 @@ import type * as G from "../../types/global";
3
3
  export type Instance = {
4
4
  navigateBack: () => void;
5
5
  navigateForward: () => void;
6
+ navigateTo: (index: number) => void;
6
7
  } | undefined;
7
8
  export declare enum ControlType {
8
9
  back = "back",
@@ -23,6 +24,9 @@ export type Props = {
23
24
  bleed?: G.Responsive<number>;
24
25
  navigationDisplay?: "hidden";
25
26
  instanceRef?: React.Ref<Instance>;
27
+ onChange?: (args: {
28
+ index: number;
29
+ }) => void;
26
30
  className?: G.ClassName;
27
31
  attributes?: G.Attributes<"div">;
28
32
  };
package/dist/components/Carousel/tests/Carousel.stories.d.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  import React from "react";
2
+ import { StoryObj } from "@storybook/react";
3
+ import { fn } from "@storybook/test";
2
4
  declare const _default: {
3
5
  title: string;
4
6
  component: (props: import("./..").CarouselProps) => React.JSX.Element;
@@ -12,7 +14,21 @@ declare const _default: {
12
14
  };
13
15
  };
14
16
  export default _default;
15
- export declare const visibleItems: () => React.JSX.Element;
16
- export declare const gap: () => React.JSX.Element;
17
- export declare const bleed: () => React.JSX.Element;
18
- export declare const navigation: () => React.JSX.Element;
17
+ export declare const base: StoryObj;
18
+ export declare const visibleItems: {
19
+ name: string;
20
+ render: () => React.JSX.Element;
21
+ };
22
+ export declare const gap: {
23
+ name: string;
24
+ render: () => React.JSX.Element;
25
+ };
26
+ export declare const bleed: {
27
+ name: string;
28
+ render: () => React.JSX.Element;
29
+ };
30
+ export declare const navigationDisplay: StoryObj;
31
+ export declare const instanceRef: StoryObj<{
32
+ handleChange: ReturnType<typeof fn>;
33
+ }>;
34
+ export declare const className: StoryObj;
package/dist/components/Carousel/tests/Carousel.stories.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import { expect, fn, userEvent, waitFor } from "@storybook/test";
2
3
  import { Example, Placeholder } from "../../../utilities/storybook/index.js";
3
4
  import Carousel from "../index.js";
4
5
  import Button from "../../Button/index.js";
@@ -16,116 +17,208 @@ export default {
16
17
  },
17
18
  },
18
19
  };
19
- export const visibleItems = () => (<Example>
20
- <Example.Item title="visibleItems: 3">
21
- <Carousel visibleItems={3}>
22
- <Placeholder h={100}/>
23
- <Placeholder h={100}/>
24
- <Placeholder h={100}/>
25
- <Placeholder h={100}/>
26
- <Placeholder h={100}/>
27
- <Placeholder h={100}/>
28
- </Carousel>
29
- </Example.Item>
20
+ export const base = {
21
+ name: "base",
22
+ render: () => (<Carousel attributes={{ "data-testid": "test-id" }} visibleItems={3}>
23
+ <Placeholder h={100}>Content</Placeholder>
24
+ <Placeholder h={100}>Content</Placeholder>
25
+ <Placeholder h={100}>Content</Placeholder>
26
+ <Placeholder h={100}>Content</Placeholder>
27
+ <Placeholder h={100}>Content</Placeholder>
28
+ <Placeholder h={100}>Content</Placeholder>
29
+ </Carousel>),
30
+ play: async ({ canvas }) => {
31
+ const root = canvas.getByTestId("test-id");
32
+ const items = canvas.getAllByText("Content");
33
+ const buttons = root.querySelectorAll("button");
34
+ expect(root).toBeInTheDocument();
35
+ expect(root.tagName).toBe("SECTION");
36
+ expect(items).toHaveLength(6);
37
+ expect(buttons).toHaveLength(2);
38
+ },
39
+ };
40
+ export const visibleItems = {
41
+ name: "visibleItems",
42
+ render: () => (<Example>
43
+ <Example.Item title="visibleItems: 3">
44
+ <Carousel visibleItems={3}>
45
+ <Placeholder h={100}/>
46
+ <Placeholder h={100}/>
47
+ <Placeholder h={100}/>
48
+ <Placeholder h={100}/>
49
+ <Placeholder h={100}/>
50
+ <Placeholder h={100}/>
51
+ </Carousel>
52
+ </Example.Item>
30
53
 
31
- <Example.Item title={["responsive visibleItems", "[s] 2", "[m+] 3"]}>
32
- <Carousel visibleItems={{ s: 2, m: 3 }}>
33
- <Placeholder h={100}/>
34
- <Placeholder h={100}/>
35
- <Placeholder h={100}/>
36
- <Placeholder h={100}/>
37
- <Placeholder h={100}/>
38
- <Placeholder h={100}/>
39
- </Carousel>
40
- </Example.Item>
54
+ <Example.Item title={["responsive visibleItems", "s: 2, m+ 3"]}>
55
+ <Carousel visibleItems={{ s: 2, m: 3 }}>
56
+ <Placeholder h={100}/>
57
+ <Placeholder h={100}/>
58
+ <Placeholder h={100}/>
59
+ <Placeholder h={100}/>
60
+ <Placeholder h={100}/>
61
+ <Placeholder h={100}/>
62
+ </Carousel>
63
+ </Example.Item>
41
64
 
42
- <Example.Item title="visibleItems: auto">
43
- <Carousel>
44
- <Placeholder h={100}/>
45
- <Placeholder h={100} w={200}/>
46
- <Placeholder h={100} w={300}/>
47
- <Placeholder h={100}/>
48
- <Placeholder h={100}/>
49
- <Placeholder h={100}/>
50
- </Carousel>
51
- </Example.Item>
52
- </Example>);
53
- export const gap = () => (<Example>
54
- <Example.Item title="gap: 2, visibleItems 3">
55
- <Carousel visibleItems={3} gap={2}>
56
- <Placeholder h={100}/>
57
- <Placeholder h={100}/>
58
- <Placeholder h={100}/>
59
- <Placeholder h={100}/>
60
- <Placeholder h={100}/>
61
- <Placeholder h={100}/>
62
- </Carousel>
63
- </Example.Item>
65
+ <Example.Item title="visibleItems: auto">
66
+ <Carousel>
67
+ <Placeholder h={100}/>
68
+ <Placeholder h={100} w={200}/>
69
+ <Placeholder h={100} w={300}/>
70
+ <Placeholder h={100}/>
71
+ <Placeholder h={100}/>
72
+ <Placeholder h={100}/>
73
+ </Carousel>
74
+ </Example.Item>
75
+ </Example>),
76
+ };
77
+ export const gap = {
78
+ name: "gap",
79
+ render: () => (<Example>
80
+ <Example.Item title="gap: 2, visibleItems 3">
81
+ <Carousel visibleItems={3} gap={2}>
82
+ <Placeholder h={100}/>
83
+ <Placeholder h={100}/>
84
+ <Placeholder h={100}/>
85
+ <Placeholder h={100}/>
86
+ <Placeholder h={100}/>
87
+ <Placeholder h={100}/>
88
+ </Carousel>
89
+ </Example.Item>
64
90
 
65
- <Example.Item title={["responsive gap, visibleItems: 3", "[s] 2", "[l] 8"]}>
66
- <Carousel visibleItems={3} gap={{ s: 2, l: 8 }}>
67
- <Placeholder h={100}/>
68
- <Placeholder h={100}/>
69
- <Placeholder h={100}/>
70
- <Placeholder h={100}/>
71
- <Placeholder h={100}/>
72
- <Placeholder h={100}/>
73
- </Carousel>
74
- </Example.Item>
75
- </Example>);
76
- export const bleed = () => (<Example>
77
- <Example.Item title="bleed: 4, visibleItems: 3">
78
- <Carousel visibleItems={3} bleed={4}>
79
- <Placeholder h={100}/>
80
- <Placeholder h={100}/>
81
- <Placeholder h={100}/>
82
- <Placeholder h={100}/>
83
- <Placeholder h={100}/>
84
- <Placeholder h={100}/>
85
- </Carousel>
86
- </Example.Item>
91
+ <Example.Item title={["gap: responsive, visibleItems: 3", "s: 2, l: 8"]}>
92
+ <Carousel visibleItems={3} gap={{ s: 2, l: 8 }}>
93
+ <Placeholder h={100}/>
94
+ <Placeholder h={100}/>
95
+ <Placeholder h={100}/>
96
+ <Placeholder h={100}/>
97
+ <Placeholder h={100}/>
98
+ <Placeholder h={100}/>
99
+ </Carousel>
100
+ </Example.Item>
101
+ </Example>),
102
+ };
103
+ export const bleed = {
104
+ name: "bleed",
105
+ render: () => (<Example>
106
+ <Example.Item title="bleed: 4, visibleItems: 3">
107
+ <Carousel visibleItems={3} bleed={4}>
108
+ <Placeholder h={100}/>
109
+ <Placeholder h={100}/>
110
+ <Placeholder h={100}/>
111
+ <Placeholder h={100}/>
112
+ <Placeholder h={100}/>
113
+ <Placeholder h={100}/>
114
+ </Carousel>
115
+ </Example.Item>
87
116
 
88
- <Example.Item title={["responsive bleed, visibleItems: 3", "[s] 4, [l+] 0"]}>
89
- <Carousel visibleItems={3} bleed={{ s: 4, l: 0 }}>
90
- <Placeholder h={100}/>
91
- <Placeholder h={100}/>
92
- <Placeholder h={100}/>
93
- <Placeholder h={100}/>
94
- <Placeholder h={100}/>
95
- <Placeholder h={100}/>
96
- </Carousel>
97
- </Example.Item>
98
- </Example>);
99
- const RefDemo = () => {
100
- const carouselRef = React.useRef(null);
101
- return (<View gap={3}>
102
- <View gap={3} direction="row">
103
- <Button onClick={() => carouselRef.current?.navigateBack()}>Back</Button>
104
- <Button onClick={() => carouselRef.current?.navigateForward()}>Forward</Button>
105
- </View>
106
- <Carousel visibleItems={2} instanceRef={carouselRef} navigationDisplay="hidden">
117
+ <Example.Item title={["responsive bleed, visibleItems: 3", "[s] 4, [l+] 0"]}>
118
+ <Carousel visibleItems={3} bleed={{ s: 4, l: 0 }}>
119
+ <Placeholder h={100}/>
120
+ <Placeholder h={100}/>
121
+ <Placeholder h={100}/>
122
+ <Placeholder h={100}/>
123
+ <Placeholder h={100}/>
124
+ <Placeholder h={100}/>
125
+ </Carousel>
126
+ </Example.Item>
127
+ </Example>),
128
+ };
129
+ export const navigationDisplay = {
130
+ name: "navigationDisplay",
131
+ render: () => (<Example>
132
+ <Example.Item title="navigationDisplay: hidden">
133
+ <Carousel visibleItems={3} navigationDisplay="hidden" attributes={{ "data-testid": "test-id" }}>
134
+ <Placeholder h={100}/>
135
+ <Placeholder h={100}/>
136
+ <Placeholder h={100}/>
137
+ <Placeholder h={100}/>
138
+ <Placeholder h={100}/>
139
+ <Placeholder h={100}/>
140
+ </Carousel>
141
+ </Example.Item>
142
+ </Example>),
143
+ play: async ({ canvas }) => {
144
+ const root = canvas.getByTestId("test-id");
145
+ const buttons = root.querySelectorAll("button");
146
+ expect(buttons).toHaveLength(0);
147
+ },
148
+ };
149
+ export const instanceRef = {
150
+ name: "instanceRef, onChange",
151
+ args: {
152
+ handleChange: fn(),
153
+ },
154
+ render: (args) => {
155
+ const carouselRef = React.useRef(null);
156
+ const [index, setIndex] = React.useState(0);
157
+ return (<Example>
158
+ <Example.Item title="instanceRef, onChange">
159
+ <View gap={3}>
160
+ <View gap={3} direction="row" align="center">
161
+ <Button onClick={() => carouselRef.current?.navigateBack()}>Back</Button>
162
+ <Button onClick={() => carouselRef.current?.navigateForward()}>Forward</Button>
163
+ <Button onClick={() => carouselRef.current?.navigateTo(3)}>To 3</Button>
164
+ <View.Item>Index: {index}</View.Item>
165
+ </View>
166
+ <Carousel visibleItems={2} instanceRef={carouselRef} navigationDisplay="hidden" onChange={(changeArgs) => {
167
+ args.handleChange(changeArgs);
168
+ setIndex(changeArgs.index);
169
+ }}>
170
+ <Placeholder h={100}>Item 0</Placeholder>
171
+ <Placeholder h={100}>Item 1</Placeholder>
172
+ <Placeholder h={100}>Item 2</Placeholder>
173
+ <Placeholder h={100}>Item 3</Placeholder>
174
+ <Placeholder h={100}>Item 4</Placeholder>
175
+ <Placeholder h={100}>Item 5</Placeholder>
176
+ </Carousel>
177
+ </View>
178
+ </Example.Item>
179
+ </Example>);
180
+ },
181
+ play: async ({ canvas, args }) => {
182
+ const buttons = canvas.getAllByRole("button");
183
+ const backButton = buttons[0];
184
+ const forwardButton = buttons[1];
185
+ const toButton = buttons[2];
186
+ await userEvent.click(forwardButton);
187
+ await waitFor(() => {
188
+ expect(args.handleChange).toHaveBeenCalledWith({ index: 1 });
189
+ expect(args.handleChange).toHaveBeenCalledWith({ index: 2 });
190
+ expect(args.handleChange).not.toHaveBeenCalledWith({ index: 3 });
191
+ });
192
+ args.handleChange.mockClear();
193
+ await userEvent.click(backButton);
194
+ await waitFor(() => {
195
+ expect(args.handleChange).toHaveBeenCalledWith({ index: 0 });
196
+ expect(args.handleChange).toHaveBeenCalledWith({ index: 1 });
197
+ });
198
+ args.handleChange.mockClear();
199
+ await userEvent.click(toButton);
200
+ await waitFor(() => {
201
+ expect(args.handleChange).toHaveBeenCalledWith({ index: 1 });
202
+ expect(args.handleChange).toHaveBeenCalledWith({ index: 2 });
203
+ expect(args.handleChange).toHaveBeenCalledWith({ index: 3 });
204
+ });
205
+ },
206
+ };
207
+ export const className = {
208
+ name: "className, attributes",
209
+ render: () => (<div data-testid="root">
210
+ <Carousel visibleItems={2} className="test-classname" attributes={{ id: "test-id" }}>
211
+ <Placeholder h={100}>Item 0</Placeholder>
107
212
  <Placeholder h={100}>Item 1</Placeholder>
108
213
  <Placeholder h={100}>Item 2</Placeholder>
109
214
  <Placeholder h={100}>Item 3</Placeholder>
110
215
  <Placeholder h={100}>Item 4</Placeholder>
111
216
  <Placeholder h={100}>Item 5</Placeholder>
112
- <Placeholder h={100}>Item 6</Placeholder>
113
217
  </Carousel>
114
- </View>);
218
+ </div>),
219
+ play: async ({ canvas }) => {
220
+ const root = canvas.getByTestId("root").firstChild;
221
+ expect(root).toHaveClass("test-classname");
222
+ expect(root).toHaveAttribute("id", "test-id");
223
+ },
115
224
  };
116
- export const navigation = () => (<Example>
117
- <Example.Item title="navigation: hidden">
118
- <Carousel visibleItems={3} navigationDisplay="hidden">
119
- <Placeholder h={100}/>
120
- <Placeholder h={100}/>
121
- <Placeholder h={100}/>
122
- <Placeholder h={100}/>
123
- <Placeholder h={100}/>
124
- <Placeholder h={100}/>
125
- </Carousel>
126
- </Example.Item>
127
-
128
- <Example.Item title="navigation: external">
129
- <RefDemo />
130
- </Example.Item>
131
- </Example>);
package/dist/components/Container/Container.module.css CHANGED
@@ -1 +1 @@
1
- .root{box-sizing:content-box;margin:0 auto}
1
+ .root{margin:0 auto}
package/dist/components/Table/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export { default } from "./Table";
2
- export type { Props as TableProps } from "./Table.types";
2
+ export type { Props as TableProps, HeadProps as TableHeadProps, BodyProps as TableBodyProps, RowProps as TableRowProps, CellProps as TableCellProps, HeadingProps as TableHeadingProps, } from "./Table.types";
package/dist/components/Table/tests/Table.stories.d.ts CHANGED
@@ -3,11 +3,11 @@ declare const _default: {
3
3
  title: string;
4
4
  component: {
5
5
  (props: import("./..").TableProps): React.JSX.Element;
6
- Cell: (props: import("../Table.types").CellProps) => React.JSX.Element;
7
- Heading: (props: import("../Table.types").HeadingProps) => React.JSX.Element;
8
- Row: (props: import("../Table.types").RowProps) => React.JSX.Element;
9
- Body: (props: import("../Table.types").BodyProps) => React.JSX.Element;
10
- Head: (props: import("../Table.types").HeadProps) => React.JSX.Element;
6
+ Cell: (props: import("./..").TableCellProps) => React.JSX.Element;
7
+ Heading: (props: import("./..").TableHeadingProps) => React.JSX.Element;
8
+ Row: (props: import("./..").TableRowProps) => React.JSX.Element;
9
+ Body: (props: import("./..").TableBodyProps) => React.JSX.Element;
10
+ Head: (props: import("./..").TableHeadProps) => React.JSX.Element;
11
11
  };
12
12
  parameters: {
13
13
  iframe: {
package/dist/components/Table/tests/Table.test.stories.d.ts CHANGED
@@ -3,11 +3,11 @@ declare const _default: {
3
3
  title: string;
4
4
  component: {
5
5
  (props: import("./..").TableProps): import("react").JSX.Element;
6
- Cell: (props: import("../Table.types").CellProps) => import("react").JSX.Element;
7
- Heading: (props: import("../Table.types").HeadingProps) => import("react").JSX.Element;
8
- Row: (props: import("../Table.types").RowProps) => import("react").JSX.Element;
9
- Body: (props: import("../Table.types").BodyProps) => import("react").JSX.Element;
10
- Head: (props: import("../Table.types").HeadProps) => import("react").JSX.Element;
6
+ Cell: (props: import("./..").TableCellProps) => import("react").JSX.Element;
7
+ Heading: (props: import("./..").TableHeadingProps) => import("react").JSX.Element;
8
+ Row: (props: import("./..").TableRowProps) => import("react").JSX.Element;
9
+ Body: (props: import("./..").TableBodyProps) => import("react").JSX.Element;
10
+ Head: (props: import("./..").TableHeadProps) => import("react").JSX.Element;
11
11
  };
12
12
  parameters: {
13
13
  iframe: {
package/dist/index.d.ts CHANGED
@@ -96,7 +96,7 @@ export type { StepperProps } from "./components/Stepper";
96
96
  export { default as Switch } from "./components/Switch";
97
97
  export type { SwitchProps } from "./components/Switch";
98
98
  export { default as Table } from "./components/Table";
99
- export type { TableProps } from "./components/Table";
99
+ export type { TableProps, TableBodyProps, TableHeadProps, TableHeadingProps, TableCellProps, TableRowProps, } from "./components/Table";
100
100
  export { default as Tabs } from "./components/Tabs";
101
101
  export type { TabsProps } from "./components/Tabs";
102
102
  export { default as Text } from "./components/Text";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "reshaped",
3
3
  "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
4
- "version": "3.3.12",
4
+ "version": "3.3.13",
5
5
  "license": "MIT",
6
6
  "email": "hello@reshaped.so",
7
7
  "homepage": "https://reshaped.so",
@@ -96,31 +96,31 @@
96
96
  "defaults and not IE 11"
97
97
  ],
98
98
  "devDependencies": {
99
- "@commitlint/cli": "19.6.0",
100
- "@commitlint/config-conventional": "19.6.0",
99
+ "@commitlint/cli": "19.7.1",
100
+ "@commitlint/config-conventional": "19.7.1",
101
101
  "@commitlint/types": "19.5.0",
102
102
  "@eslint/js": "9.16.0",
103
- "@size-limit/preset-big-lib": "11.1.6",
104
- "@storybook/addon-a11y": "8.5.2",
105
- "@storybook/addon-actions": "8.5.2",
106
- "@storybook/addon-controls": "8.5.2",
107
- "@storybook/addon-docs": "8.5.2",
108
- "@storybook/addon-storysource": "8.5.2",
109
- "@storybook/experimental-addon-test": "8.5.2",
110
- "@storybook/react": "8.5.2",
111
- "@storybook/react-vite": "8.5.2",
103
+ "@size-limit/preset-big-lib": "11.2.0",
104
+ "@storybook/addon-a11y": "8.6.2",
105
+ "@storybook/addon-actions": "8.6.2",
106
+ "@storybook/addon-controls": "8.6.2",
107
+ "@storybook/addon-docs": "8.6.2",
108
+ "@storybook/addon-storysource": "8.6.2",
109
+ "@storybook/experimental-addon-test": "8.6.2",
110
+ "@storybook/react": "8.6.2",
111
+ "@storybook/react-vite": "8.6.2",
112
112
  "@types/culori": "2.1.1",
113
113
  "@types/events": "3.0.3",
114
- "@types/node": "22.10.1",
115
- "@types/react": "19.0.8",
116
- "@types/react-dom": "19.0.3",
114
+ "@types/node": "22.13.5",
115
+ "@types/react": "19.0.10",
116
+ "@types/react-dom": "19.0.4",
117
117
  "@typescript-eslint/eslint-plugin": "7.18.0",
118
118
  "@typescript-eslint/parser": "7.18.0",
119
119
  "@vitejs/plugin-react": "4.3.4",
120
- "@vitest/browser": "2.1.8",
121
- "@vitest/coverage-istanbul": "2.1.8",
122
- "@vitest/coverage-v8": "2.1.8",
123
- "chromatic": "11.19.0",
120
+ "@vitest/browser": "3.0.7",
121
+ "@vitest/coverage-istanbul": "3.0.7",
122
+ "@vitest/coverage-v8": "3.0.7",
123
+ "chromatic": "11.26.1",
124
124
  "cz-conventional-changelog": "3.3.0",
125
125
  "eslint": "8.57.1",
126
126
  "eslint-config-prettier": "9.1.0",
@@ -130,29 +130,29 @@
130
130
  "eslint-plugin-react": "7.37.2",
131
131
  "eslint-plugin-react-hooks": "5.0.0",
132
132
  "globals": "15.12.0",
133
- "lefthook": "1.8.4",
134
- "playwright": "1.49.1",
135
- "postcss": "8.4.49",
133
+ "lefthook": "1.11.2",
134
+ "playwright": "1.50.1",
135
+ "postcss": "8.5.3",
136
136
  "postcss-cli": "11.0.0",
137
137
  "postcss-each": "1.1.0",
138
138
  "postcss-nested": "7.0.2",
139
- "prettier": "3.4.1",
139
+ "prettier": "3.5.2",
140
140
  "react": "18",
141
141
  "react-dom": "18",
142
142
  "react-shadow": "20.5.0",
143
143
  "resolve-tspaths": "0.8.23",
144
- "size-limit": "11.1.6",
145
- "storybook": "8.5.2",
146
- "stylelint": "16.11.0",
144
+ "size-limit": "11.2.0",
145
+ "storybook": "8.6.2",
146
+ "stylelint": "16.14.1",
147
147
  "stylelint-config-prettier": "9.0.5",
148
- "stylelint-config-standard": "36.0.1",
148
+ "stylelint-config-standard": "37.0.0",
149
149
  "ts-node": "10.9.2",
150
- "typescript": "5.7.2",
150
+ "typescript": "5.7.3",
151
151
  "typescript-eslint": "8.16.0",
152
- "vite": "6.0.1",
153
- "vite-tsconfig-paths": "5.1.3",
154
- "vitest": "2.1.8",
155
- "vitest-browser-react": "0.0.4"
152
+ "vite": "6.2.0",
153
+ "vite-tsconfig-paths": "5.1.4",
154
+ "vitest": "3.0.7",
155
+ "vitest-browser-react": "0.1.1"
156
156
  },
157
157
  "peerDependencies": {
158
158
  "postcss": "^8",
package/dist/components/Carousel/tests/Carousel.test.stories.d.ts DELETED
@@ -1,17 +0,0 @@
1
- import { StoryObj } from "@storybook/react";
2
- declare const _default: {
3
- title: string;
4
- component: (props: import("./..").CarouselProps) => import("react").JSX.Element;
5
- parameters: {
6
- iframe: {
7
- url: string;
8
- };
9
- chromatic: {
10
- disableSnapshot: boolean;
11
- };
12
- };
13
- };
14
- export default _default;
15
- export declare const render: StoryObj;
16
- export declare const navigationDisplay: StoryObj;
17
- export declare const className: StoryObj;