reshaped 4.0.0 → 4.0.1
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.
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +2 -2
- package/dist/components/Badge/Badge.js +3 -3
- package/dist/components/Badge/Badge.module.css +1 -1
- package/dist/components/Badge/tests/Badge.stories.js +4 -0
- package/dist/components/Flyout/Flyout.module.css +1 -1
- package/dist/components/Flyout/FlyoutContent.js +2 -2
- package/dist/components/ScrollArea/ScrollArea.js +12 -5
- package/dist/components/ScrollArea/ScrollArea.module.css +1 -1
- package/dist/components/ScrollArea/ScrollArea.types.d.ts +4 -0
- package/package.json +2 -2
|
@@ -21,9 +21,9 @@ const Badge = forwardRef((props, ref) => {
|
|
|
21
21
|
e.stopPropagation();
|
|
22
22
|
onDismiss?.();
|
|
23
23
|
};
|
|
24
|
-
return (
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
return (_jsx(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, as: as, touchHitbox: isActionable, children: _jsxs("span", { className: s.content, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize, className: s.icon }), hasText && (_jsx(Text, { variant: size === "large" ? "body-2" : "caption-1", weight: "medium", attributes: {
|
|
25
|
+
"aria-hidden": hidden ? "true" : undefined,
|
|
26
|
+
}, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize, className: s.icon }), onDismiss && (_jsx(Actionable, { onClick: handleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, touchHitbox: true, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }) }));
|
|
27
27
|
});
|
|
28
28
|
Badge.displayName = "Badge";
|
|
29
29
|
export default Badge;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-on-background-neutral);display:inline-flex;
|
|
1
|
+
.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-on-background-neutral);display:inline-flex;justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity,box-shadow,background-color;vertical-align:top}.root.--empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.content{align-items:center;display:inline-flex;gap:var(--rs-badge-gap)}.icon:first-child{margin-inline-start:calc(var(--rs-unit-x0-5) * -1)}.icon:last-child{margin-inline-end:calc(var(--rs-unit-x0-5) * -1)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.dismiss:last-child{margin-inline-end:calc(var(--rs-unit-x0-5) * -1)}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{--rs-badge-border-color:var(--rs-color-border-neutral-faded);background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1-5);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:calc(var(--rs-unit-x0-5) * 5);--rs-badge-line-height:var(--rs-line-height-body-2);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1-5)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);user-select:none;z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
|
|
@@ -109,6 +109,8 @@ exports.icon = {
|
|
|
109
109
|
Badge
|
|
110
110
|
</Badge_1.default>
|
|
111
111
|
<Badge_1.default icon={Plus_1.default} size="small"/>
|
|
112
|
+
{/* Test with touch hitbox */}
|
|
113
|
+
<Badge_1.default icon={Plus_1.default} size="small" rounded onClick={() => { }}/>
|
|
112
114
|
</View_1.default>
|
|
113
115
|
</storybook_1.Example.Item>
|
|
114
116
|
<storybook_1.Example.Item title="size: medium">
|
|
@@ -116,6 +118,7 @@ exports.icon = {
|
|
|
116
118
|
<Badge_1.default icon={Plus_1.default}>Badge</Badge_1.default>
|
|
117
119
|
<Badge_1.default endIcon={Plus_1.default}>Badge</Badge_1.default>
|
|
118
120
|
<Badge_1.default icon={Plus_1.default}/>
|
|
121
|
+
<Badge_1.default icon={Plus_1.default} rounded onClick={() => { }}/>
|
|
119
122
|
</View_1.default>
|
|
120
123
|
</storybook_1.Example.Item>
|
|
121
124
|
<storybook_1.Example.Item title="size: large">
|
|
@@ -127,6 +130,7 @@ exports.icon = {
|
|
|
127
130
|
Badge
|
|
128
131
|
</Badge_1.default>
|
|
129
132
|
<Badge_1.default icon={Plus_1.default} size="large"/>
|
|
133
|
+
<Badge_1.default icon={Plus_1.default} size="large" rounded onClick={() => { }}/>
|
|
130
134
|
</View_1.default>
|
|
131
135
|
</storybook_1.Example.Item>
|
|
132
136
|
</storybook_1.Example>),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.positioner{--rs-flyout-max-h:100%;--rs-flyout-max-w:100%;--rs-flyout-z-index:var(--rs-z-index-absolute);--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;display:flex;flex-direction:column;isolation:isolate;pointer-events:none;position:absolute;z-index:var(--rs-flyout-z-index)}.positioner.--hover{pointer-events:all}.positioner.--hover-disabled,.positioner.--hover-disabled .content{pointer-events:none}.content{backface-visibility:hidden;display:flex;flex-direction:column;flex-grow:1;height:100%;max-height:var(--rs-flyout-max-h);max-width:var(--rs-flyout-max-w);opacity:0;outline:none;pointer-events:all;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .content:focus{box-shadow:var(--rs-outline-shadow)}.
|
|
1
|
+
.positioner{--rs-flyout-max-h:100%;--rs-flyout-max-w:100%;--rs-flyout-z-index:var(--rs-z-index-absolute);--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;display:flex;flex-direction:column;isolation:isolate;pointer-events:none;position:absolute;z-index:var(--rs-flyout-z-index)}.positioner.--hover{pointer-events:all}.positioner.--hover-disabled,.positioner.--hover-disabled .content{pointer-events:none}.content{backface-visibility:hidden;display:flex;flex-direction:column;flex-grow:1;height:100%;max-height:var(--rs-flyout-max-h);max-width:var(--rs-flyout-max-w);opacity:0;outline:none;pointer-events:all;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .content:focus{box-shadow:var(--rs-outline-shadow)}.positioner.--width-trigger .content{transform:scale(1) translateY(var(--rs-unit-x2))}.positioner.--position-top,.positioner.--position-top-end,.positioner.--position-top-start{--rs-flyout-origin-y:100%}.positioner.--position-bottom,.positioner.--position-bottom-end,.positioner.--position-bottom-start{--rs-flyout-origin-y:0%}.positioner.--position-bottom-start,.positioner.--position-top-start{--rs-flyout-origin-x:0%}.positioner.--position-bottom-end,.positioner.--position-start,.positioner.--position-start-bottom,.positioner.--position-start-top,.positioner.--position-top-end{--rs-flyout-origin-x:100%}.positioner.--position-end,.positioner.--position-end-bottom,.positioner.--position-end-top{--rs-flyout-origin-x:0%}.positioner.--position-end-top,.positioner.--position-start-top{--rs-flyout-origin-y:0%}.positioner.--position-end-bottom,.positioner.--position-start-bottom{--rs-flyout-origin-y:100%}.positioner.--visible .content{opacity:1;transform:scale(1) translateY(0)}.positioner.--animated .content{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.positioner.--animated.--visible .content{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}
|
|
@@ -4,6 +4,7 @@ import React from "react";
|
|
|
4
4
|
import { classNames } from "@reshaped/utilities";
|
|
5
5
|
import Portal from "../_private/Portal/index.js";
|
|
6
6
|
import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
|
|
7
|
+
import ScrollArea from "../ScrollArea/index.js";
|
|
7
8
|
import { ContentProvider, useFlyoutContext } from "./Flyout.context.js";
|
|
8
9
|
import cooldown from "./utilities/cooldown.js";
|
|
9
10
|
import s from "./Flyout.module.css";
|
|
@@ -27,7 +28,6 @@ const FlyoutContent = (props) => {
|
|
|
27
28
|
(cooldown.status === "cooling" || !cooldown.timer || isSubmenu || triggerType !== "hover") &&
|
|
28
29
|
s["--animated"], position && s[`--position-${position}`], width === "trigger" && s["--width-trigger"], triggerType === "hover" && disableContentHover && s["--hover-disabled"]);
|
|
29
30
|
const contentClassNames = classNames(s.content, className, contentClassName, attributes?.className, contentAttributes?.className);
|
|
30
|
-
const scrollableClassNames = classNames(s.scrollable, scrollableClassName, scrollableAttributes?.className);
|
|
31
31
|
let role = attributes?.role || contentAttributes?.role;
|
|
32
32
|
if (triggerType === "hover") {
|
|
33
33
|
role = "tooltip";
|
|
@@ -48,7 +48,7 @@ const FlyoutContent = (props) => {
|
|
|
48
48
|
"--rs-flyout-max-h": contentMaxHeight,
|
|
49
49
|
"--rs-flyout-max-w": contentMaxWidth,
|
|
50
50
|
"--rs-flyout-z-index": contentZIndex,
|
|
51
|
-
}, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleContentMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...contentAttributes, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...contentAttributes?.style, ...attributes?.style }, className: contentClassNames, children: _jsx(
|
|
51
|
+
}, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleContentMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...contentAttributes, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...contentAttributes?.style, ...attributes?.style }, className: contentClassNames, children: _jsx(ScrollArea, { scrollableAttributes: scrollableAttributes, scrollableClassName: scrollableClassName, children: children }) }) }) }));
|
|
52
52
|
return (_jsx(Portal, { targetRef: shadowRootRef.current ? shadowRootRef : undefined, colorMode: colorMode, children: content }));
|
|
53
53
|
};
|
|
54
54
|
FlyoutContent.displayName = "Flyout.Content";
|
|
@@ -65,7 +65,7 @@ const ScrollAreaBar = (props) => {
|
|
|
65
65
|
}, ref: barRef, onClick: handleClick, onMouseDown: handleDragStart, "aria-hidden": "true", children: _jsx("div", { className: s.thumb }) }));
|
|
66
66
|
};
|
|
67
67
|
const ScrollArea = forwardRef((props, ref) => {
|
|
68
|
-
const { children, height, maxHeight, scrollbarDisplay = "hover", onScroll, className, attributes, } = props;
|
|
68
|
+
const { children, height, maxHeight, scrollbarDisplay = "hover", onScroll, className, attributes, scrollableAttributes, scrollableClassName, } = props;
|
|
69
69
|
const [scrollRatio, setScrollRatio] = React.useState({ x: 1, y: 1 });
|
|
70
70
|
const [scrollPosition, setScrollPosition] = React.useState({ x: 0, y: 0 });
|
|
71
71
|
const scrollableRef = React.useRef(null);
|
|
@@ -78,9 +78,14 @@ const ScrollArea = forwardRef((props, ref) => {
|
|
|
78
78
|
const scrollableEl = scrollableRef.current;
|
|
79
79
|
if (!scrollableEl)
|
|
80
80
|
return;
|
|
81
|
+
const { scrollLeft, scrollTop, clientWidth, clientHeight, scrollWidth, scrollHeight } = scrollableEl;
|
|
81
82
|
setScrollRatio({
|
|
82
|
-
x:
|
|
83
|
-
y:
|
|
83
|
+
x: scrollWidth === 0 ? 1 : Math.min(clientWidth / scrollWidth, 1),
|
|
84
|
+
y: scrollHeight === 0 ? 1 : Math.min(clientHeight / scrollHeight, 1),
|
|
85
|
+
});
|
|
86
|
+
setScrollPosition({
|
|
87
|
+
x: scrollWidth <= clientWidth ? 0 : scrollLeft / scrollWidth,
|
|
88
|
+
y: scrollHeight <= clientHeight ? 0 : scrollTop / scrollHeight,
|
|
84
89
|
});
|
|
85
90
|
}, []);
|
|
86
91
|
const handleScroll = (e) => {
|
|
@@ -123,14 +128,16 @@ const ScrollArea = forwardRef((props, ref) => {
|
|
|
123
128
|
updateScroll();
|
|
124
129
|
}, [updateScroll]);
|
|
125
130
|
useIsomorphicLayoutEffect(() => {
|
|
131
|
+
const scrollableEl = scrollableRef.current;
|
|
126
132
|
const contentEl = contentRef.current;
|
|
127
|
-
if (!contentEl)
|
|
133
|
+
if (!scrollableEl || !contentEl)
|
|
128
134
|
return;
|
|
129
135
|
const observer = new ResizeObserver(updateScroll);
|
|
136
|
+
observer.observe(scrollableEl);
|
|
130
137
|
observer.observe(contentEl);
|
|
131
138
|
return () => observer.disconnect();
|
|
132
139
|
}, [updateScroll]);
|
|
133
|
-
return (_jsxs("div", { ...attributes, ref: rootRef, className: rootClassNames, children: [_jsx("div", { className: scrollableClassNames, ref: scrollableRef, onScroll: handleScroll, style: { ...mixinStyles.variables }, children: _jsx("div", { className: s.content, ref: contentRef, children: children }) }), scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, position: scrollPosition.y })), scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, position: scrollPosition.x }))] }));
|
|
140
|
+
return (_jsxs("div", { ...attributes, ref: rootRef, className: rootClassNames, children: [_jsx("div", { className: scrollableClassNames, ref: scrollableRef, onScroll: handleScroll, style: { ...mixinStyles.variables }, children: _jsx("div", { ...scrollableAttributes, className: classNames(s.content, scrollableClassName), ref: contentRef, children: children }) }), scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, position: scrollPosition.y })), scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, position: scrollPosition.x }))] }));
|
|
134
141
|
});
|
|
135
142
|
ScrollArea.displayName = "ScrollArea";
|
|
136
143
|
export default ScrollArea;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{--rs-scroll-area-thumb-size:var(--rs-unit-x1);--rs-scroll-area-thumb-offset:var(--rs-unit-x1);height:100%;overflow:hidden;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){outline:var(--rs-outline)}.scrollable{height:100%;outline:none;overflow:auto;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{background-color:var(--rs-color-background-neutral-faded);height:100%;opacity:0;position:relative;width:100%}.thumb,.thumb:before{border-radius:var(--rs-radius-circular)}.thumb:before{background:var(--rs-color-foreground-neutral);content:"";display:block;opacity:.2;position:absolute
|
|
1
|
+
.root{--rs-scroll-area-thumb-size:var(--rs-unit-x1);--rs-scroll-area-thumb-offset:var(--rs-unit-x1);height:100%;overflow:hidden;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){outline:var(--rs-outline)}.scrollable{height:100%;outline:none;overflow:auto;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{background-color:var(--rs-color-background-neutral-faded);height:100%;opacity:0;position:relative;width:100%}.thumb,.thumb:before{border-radius:var(--rs-radius-circular);transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.thumb:before{background:var(--rs-color-foreground-neutral);content:"";display:block;opacity:.2;position:absolute}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{height:calc(var(--rs-scroll-area-ratio) * 100%);inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%}.--scrollbar-x{height:var(--rs-scroll-area-thumb-size);inset-block-end:0;inset-inline:0}.--scrollbar-x .thumb:before{height:100%;inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb,.--display-visible>.scrollbar .thumb{opacity:1}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}
|
|
@@ -18,6 +18,10 @@ export type Props = {
|
|
|
18
18
|
className?: ClassName;
|
|
19
19
|
/** Additional attributes for the root element */
|
|
20
20
|
attributes?: Attributes<"div">;
|
|
21
|
+
/** Additional attributes for the scrollable element */
|
|
22
|
+
scrollableAttributes?: Attributes<"div">;
|
|
23
|
+
/** Additional classname for the scrollable element */
|
|
24
|
+
scrollableClassName?: ClassName;
|
|
21
25
|
};
|
|
22
26
|
export type BarProps = {
|
|
23
27
|
ratio: number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.1",
|
|
4
4
|
"description": "Professionally crafted design system in React and Figma for building products of any scale and complexity",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"accessibility",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"csstype": "3.2.3",
|
|
73
73
|
"postcss-custom-media": "12.0.1",
|
|
74
74
|
"@reshaped/theming": "4.0.0",
|
|
75
|
-
"@reshaped/utilities": "4.0.
|
|
75
|
+
"@reshaped/utilities": "4.0.1"
|
|
76
76
|
},
|
|
77
77
|
"peerDependencies": {
|
|
78
78
|
"postcss": "^8",
|