reshaped 2.11.4 → 2.11.6
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/CHANGELOG.md +5 -1
- package/bundle.css +1 -1
- package/bundle.js +9 -9
- package/components/Modal/tests/Modal.stories.js +1 -1
- package/components/Slider/Slider.module.css +1 -1
- package/components/Slider/SliderControlled.js +11 -5
- package/components/Slider/tests/Slider.stories.js +2 -4
- package/components/TextArea/TextArea.module.css +1 -1
- package/components/TextArea/tests/TextArea.stories.d.ts +1 -0
- package/components/TextArea/tests/TextArea.stories.js +7 -0
- package/components/_private/Expandable/Expandable.js +4 -4
- package/package.json +1 -1
|
@@ -49,7 +49,7 @@ const Demo = (props) => {
|
|
|
49
49
|
};
|
|
50
50
|
export const position = () => (<Example>
|
|
51
51
|
<Example.Item title="position: center">
|
|
52
|
-
<Demo position="center"/>
|
|
52
|
+
<Demo position="center" active/>
|
|
53
53
|
</Example.Item>
|
|
54
54
|
<Example.Item title="position: bottom">
|
|
55
55
|
<Demo position="bottom"/>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{align-items:center;cursor:pointer;display:flex;height:var(--rs-
|
|
1
|
+
.root{--rs-slider-overflow-gap:var(--rs-unit-x1);--rs-slider-thumb-size:var(--rs-unit-x4);align-items:center;cursor:pointer;display:flex;height:var(--rs-slider-thumb-size);position:relative;user-select:none;-webkit-tap-highlight-color:transparent;margin-inline:calc(var(--rs-slider-overflow-gap) * -1);overflow-x:clip;padding-inline:var(--rs-slider-overflow-gap)}.root:has(.thumb:hover,.thumb--active,.input:focus){overflow:visible}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);position:relative;width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{--rs-slider-tooltip-translate-x:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);font-variant-numeric:tabular-nums;left:50%;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;position:absolute;text-align:center;transform:translate(var(--rs-slider-tooltip-translate-x));transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumbs{inset-inline:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap))}.thumb,.thumbs{height:100%;position:absolute}.thumb{width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-slider-thumb-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-slider-thumb-size)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1;transform:translate(var(--rs-slider-tooltip-translate-x),calc(var(--rs-unit-x1) * -1.5))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(var(--rs-slider-tooltip-translate-x),calc(var(--rs-unit-x1) * -1.5))!important}.input:focus+.thumb:before{box-shadow:var(--rs-focus-shadow)}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
|
|
@@ -9,6 +9,7 @@ import { useFormControl } from "../FormControl/index.js";
|
|
|
9
9
|
import SliderThumb from "./SliderThumb.js";
|
|
10
10
|
import { applyStepToValue } from "./Slider.utilities.js";
|
|
11
11
|
import s from "./Slider.module.css";
|
|
12
|
+
const THUMB_SIZE = 16;
|
|
12
13
|
const getDragX = (event) => {
|
|
13
14
|
if (event instanceof MouseEvent)
|
|
14
15
|
return event.pageX || event.screenX;
|
|
@@ -37,8 +38,11 @@ const SliderControlled = (props) => {
|
|
|
37
38
|
if (!barRef.current)
|
|
38
39
|
return;
|
|
39
40
|
const barWidth = barRef.current.clientWidth;
|
|
40
|
-
|
|
41
|
-
|
|
41
|
+
// Move by half thumb size since it's a reserved space
|
|
42
|
+
const barX = barRef.current.getBoundingClientRect().left + THUMB_SIZE / 2;
|
|
43
|
+
const positionX = x - barX;
|
|
44
|
+
const thumbsAreaWidth = barWidth - THUMB_SIZE;
|
|
45
|
+
let percentage = positionX / thumbsAreaWidth;
|
|
42
46
|
if (rtl)
|
|
43
47
|
percentage = 1 - percentage;
|
|
44
48
|
let value = (max - min) * percentage + min;
|
|
@@ -148,7 +152,6 @@ const SliderControlled = (props) => {
|
|
|
148
152
|
return;
|
|
149
153
|
const x = getDragX(e);
|
|
150
154
|
const nextValue = getPositionValue(x);
|
|
151
|
-
positionTooltip(draggingId);
|
|
152
155
|
if (nextValue === undefined)
|
|
153
156
|
return;
|
|
154
157
|
// Switch to another id if thumbs overlap
|
|
@@ -172,12 +175,15 @@ const SliderControlled = (props) => {
|
|
|
172
175
|
handleMinChange,
|
|
173
176
|
maxId,
|
|
174
177
|
minId,
|
|
175
|
-
positionTooltip,
|
|
176
178
|
]);
|
|
177
179
|
React.useEffect(() => {
|
|
178
180
|
positionTooltip(minId);
|
|
179
181
|
positionTooltip(maxId);
|
|
180
182
|
}, [positionTooltip, minId, maxId]);
|
|
183
|
+
React.useEffect(() => {
|
|
184
|
+
positionTooltip(minId);
|
|
185
|
+
positionTooltip(maxId);
|
|
186
|
+
}, [minId, maxId, minValue, maxValue, positionTooltip]);
|
|
181
187
|
React.useEffect(() => {
|
|
182
188
|
window.addEventListener("mouseup", handleDragStop);
|
|
183
189
|
window.addEventListener("touchend", handleDragStop);
|
|
@@ -198,6 +204,6 @@ const SliderControlled = (props) => {
|
|
|
198
204
|
_jsxs("div", Object.assign({}, attributes, { className: rootClassNames, onMouseDown: handleMouseDown, onTouchStart: handleMouseDown, children: [_jsx("div", { className: s.bar, ref: barRef, children: _jsx("div", { className: s.selection, style: {
|
|
199
205
|
insetInlineStart: `${minPercentPosition || 0}%`,
|
|
200
206
|
width: `${maxPercentPosition - (minPercentPosition || 0)}%`,
|
|
201
|
-
} }) }), minValue !== undefined && minPercentPosition !== undefined && (_jsx(SliderThumb, { id: minId, active: minId === draggingId, name: name, disabled: disabled, onChange: handleMinChange, value: minValue, onDragStart: handleMinDragStart, position: minPercentPosition, max: max, min: min, ref: minRef, tooltipRef: minTooltipRef, renderValue: renderValue, step: step })), _jsx(SliderThumb, { id: maxId, active: maxId === draggingId, name: name, disabled: disabled, onChange: handleMaxChange, value: maxValue, onDragStart: handleMaxDragStart, position: maxPercentPosition, max: max, min: min, ref: maxRef, tooltipRef: maxTooltipRef, renderValue: renderValue, step: step })] })));
|
|
207
|
+
} }) }), _jsxs("div", { className: s.thumbs, children: [minValue !== undefined && minPercentPosition !== undefined && (_jsx(SliderThumb, { id: minId, active: minId === draggingId, name: name, disabled: disabled, onChange: handleMinChange, value: minValue, onDragStart: handleMinDragStart, position: minPercentPosition, max: max, min: min, ref: minRef, tooltipRef: minTooltipRef, renderValue: renderValue, step: step })), _jsx(SliderThumb, { id: maxId, active: maxId === draggingId, name: name, disabled: disabled, onChange: handleMaxChange, value: maxValue, onDragStart: handleMaxDragStart, position: maxPercentPosition, max: max, min: min, ref: maxRef, tooltipRef: maxTooltipRef, renderValue: renderValue, step: step })] })] })));
|
|
202
208
|
};
|
|
203
209
|
export default SliderControlled;
|
|
@@ -11,11 +11,9 @@ export default {
|
|
|
11
11
|
},
|
|
12
12
|
};
|
|
13
13
|
export const base = () => (<Example>
|
|
14
|
-
<
|
|
15
|
-
<Slider name="slider" defaultValue={30}/>
|
|
16
|
-
</Example.Item>
|
|
14
|
+
<Slider name="slider" defaultValue={100} renderValue={() => "$12345"}/>
|
|
17
15
|
<Example.Item title="range">
|
|
18
|
-
<Slider range name="slider" defaultMinValue={30} defaultMaxValue={
|
|
16
|
+
<Slider range name="slider" defaultMinValue={30} defaultMaxValue={100} renderValue={() => "Hundred more times"}/>
|
|
19
17
|
</Example.Item>
|
|
20
18
|
</Example>);
|
|
21
19
|
export const step = () => (<Example>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{display:grid;position:relative}.root:after{content:attr(data-rs-textarea-value) " ";visibility:hidden;white-space:pre-wrap}.input,.root:after{border:1px solid var(--rs-color-border-neutral);box-sizing:border-box;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);grid-area:1/1/2/2;padding:calc(var(--rs-p) - 1px);width:100
|
|
1
|
+
.root{display:grid;position:relative}.root:after{content:attr(data-rs-textarea-value) " ";visibility:hidden;white-space:pre-wrap}.input,.root:after{border:1px solid var(--rs-color-border-neutral);box-sizing:border-box;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);grid-area:1/1/2/2;padding:calc(var(--rs-p) - 1px);width:100%;word-break:break-word}.input{background:var(--rs-color-background-elevation-base);border-radius:var(--rs-unit-radius-small);color:var(--rs-color-foreground-neutral);outline:none;position:relative;z-index:1}.input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input[disabled]{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded .input{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded .input:focus{border-color:var(--rs-color-border-primary)}.root.--variant-headless .input{background:transparent;border-color:transparent}.root.--variant-headless .input:focus,.root.--variant-headless.--status-error .input,.root.--variant-headless.--status-error .input:focus{border-color:transparent;box-shadow:none}.root.--status-error .input{border-color:var(--rs-color-border-critical)}.root.--status-error .input:active,.root.--status-error .input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--resize-auto .input,.root.--resize-none .input{resize:none}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}
|
|
@@ -19,3 +19,4 @@ export declare const disabled: () => import("react").JSX.Element;
|
|
|
19
19
|
export declare const error: () => import("react").JSX.Element;
|
|
20
20
|
export declare const formControl: () => import("react").JSX.Element;
|
|
21
21
|
export declare const aligner: () => import("react").JSX.Element;
|
|
22
|
+
export declare const edgeCases: () => import("react").JSX.Element;
|
|
@@ -105,3 +105,10 @@ export const aligner = () => (<Example>
|
|
|
105
105
|
</View>
|
|
106
106
|
</Example.Item>
|
|
107
107
|
</Example>);
|
|
108
|
+
export const edgeCases = () => (<Example>
|
|
109
|
+
<Example.Item title="long value without breaks">
|
|
110
|
+
<TextArea name="hey" defaultValue={`<div style="position:relative;width:100%;padding-top:calc(150% + 72px)">
|
|
111
|
+
<iframe src="nskjdfdsdkjfsjkdfhbsjlhdfbsjlhfbs;jhbsdljfhsbljhfsbljhfbsjlfdhbsljhfbsdljhfbsljhfbslufbhsdlfds" />
|
|
112
|
+
</div>`} resize="auto"/>
|
|
113
|
+
</Example.Item>
|
|
114
|
+
</Example>);
|
|
@@ -6,21 +6,21 @@ import { classNames } from "../../../utilities/helpers.js";
|
|
|
6
6
|
import { onNextFrame } from "../../../utilities/animation.js";
|
|
7
7
|
const Expandable = (props) => {
|
|
8
8
|
const { children, active, attributes } = props;
|
|
9
|
-
const [
|
|
10
|
-
const rootClassNames = classNames(s.root, active &&
|
|
9
|
+
const [rendered, setRendered] = React.useState(active);
|
|
10
|
+
const rootClassNames = classNames(s.root, active && rendered && s["--active"], !active && !rendered && s["--hidden"]);
|
|
11
11
|
const handleTransitionEnd = (e) => {
|
|
12
12
|
if (e.propertyName !== "height")
|
|
13
13
|
return;
|
|
14
14
|
if (active)
|
|
15
15
|
return;
|
|
16
16
|
onNextFrame(() => {
|
|
17
|
-
|
|
17
|
+
setRendered(false);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
React.useEffect(() => {
|
|
21
21
|
if (!active)
|
|
22
22
|
return;
|
|
23
|
-
|
|
23
|
+
setRendered(active);
|
|
24
24
|
}, [active]);
|
|
25
25
|
return (_jsx("div", Object.assign({}, attributes, { className: rootClassNames, onTransitionEnd: handleTransitionEnd, role: "region", hidden: !active, children: _jsx("div", { className: s.inner, children: children }) })));
|
|
26
26
|
};
|
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": "2.11.
|
|
4
|
+
"version": "2.11.6",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|