reshaped 2.11.3 → 2.11.5
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 +10 -10
- package/components/Modal/tests/Modal.stories.js +1 -1
- package/components/Slider/Slider.module.css +1 -1
- package/components/Slider/SliderControlled.js +16 -6
- package/components/Slider/tests/Slider.stories.js +1 -1
- 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/View/View.js +1 -1
- 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-unit-x4);user-select:none;-webkit-tap-highlight-color:transparent}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);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;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}.thumb,.
|
|
1
|
+
.root{align-items:center;cursor:pointer;display:flex;height:var(--rs-unit-x4);user-select:none;-webkit-tap-highlight-color:transparent}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);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:var(--rs-unit-x2)}.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-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-unit-x4)}.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}.--overflow{overflow:hidden}
|
|
@@ -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;
|
|
@@ -25,6 +26,7 @@ const SliderControlled = (props) => {
|
|
|
25
26
|
const minTooltipRef = React.useRef(null);
|
|
26
27
|
const maxTooltipRef = React.useRef(null);
|
|
27
28
|
const [draggingId, setDraggingId] = React.useState(null);
|
|
29
|
+
const [mounted, setMounted] = React.useState(false);
|
|
28
30
|
const [rtl] = useRTL();
|
|
29
31
|
const formControl = useFormControl();
|
|
30
32
|
const id = useElementId();
|
|
@@ -32,13 +34,16 @@ const SliderControlled = (props) => {
|
|
|
32
34
|
const minId = `${inputId}-min`;
|
|
33
35
|
const maxId = `${inputId}-max`;
|
|
34
36
|
const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled;
|
|
35
|
-
const rootClassNames = classNames(s.root, disabled && s["--disabled"], className);
|
|
37
|
+
const rootClassNames = classNames(s.root, disabled && s["--disabled"], !mounted && s["--overflow"], className);
|
|
36
38
|
const getPositionValue = React.useCallback((x) => {
|
|
37
39
|
if (!barRef.current)
|
|
38
40
|
return;
|
|
39
41
|
const barWidth = barRef.current.clientWidth;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
+
// Move by half thumb size since it's a reserved space
|
|
43
|
+
const barX = barRef.current.getBoundingClientRect().left + THUMB_SIZE / 2;
|
|
44
|
+
const positionX = x - barX;
|
|
45
|
+
const thumbsAreaWidth = barWidth - THUMB_SIZE;
|
|
46
|
+
let percentage = positionX / thumbsAreaWidth;
|
|
42
47
|
if (rtl)
|
|
43
48
|
percentage = 1 - percentage;
|
|
44
49
|
let value = (max - min) * percentage + min;
|
|
@@ -148,7 +153,6 @@ const SliderControlled = (props) => {
|
|
|
148
153
|
return;
|
|
149
154
|
const x = getDragX(e);
|
|
150
155
|
const nextValue = getPositionValue(x);
|
|
151
|
-
positionTooltip(draggingId);
|
|
152
156
|
if (nextValue === undefined)
|
|
153
157
|
return;
|
|
154
158
|
// Switch to another id if thumbs overlap
|
|
@@ -172,12 +176,15 @@ const SliderControlled = (props) => {
|
|
|
172
176
|
handleMinChange,
|
|
173
177
|
maxId,
|
|
174
178
|
minId,
|
|
175
|
-
positionTooltip,
|
|
176
179
|
]);
|
|
177
180
|
React.useEffect(() => {
|
|
178
181
|
positionTooltip(minId);
|
|
179
182
|
positionTooltip(maxId);
|
|
180
183
|
}, [positionTooltip, minId, maxId]);
|
|
184
|
+
React.useEffect(() => {
|
|
185
|
+
if (draggingId)
|
|
186
|
+
positionTooltip(draggingId);
|
|
187
|
+
}, [draggingId, minValue, maxValue, positionTooltip]);
|
|
181
188
|
React.useEffect(() => {
|
|
182
189
|
window.addEventListener("mouseup", handleDragStop);
|
|
183
190
|
window.addEventListener("touchend", handleDragStop);
|
|
@@ -190,6 +197,9 @@ const SliderControlled = (props) => {
|
|
|
190
197
|
window.removeEventListener("touchmove", handleDrag);
|
|
191
198
|
};
|
|
192
199
|
}, [handleDragStop, handleDrag]);
|
|
200
|
+
React.useEffect(() => {
|
|
201
|
+
setMounted(true);
|
|
202
|
+
}, []);
|
|
193
203
|
const minPercentPosition = minValue && getPercentPosition(minValue);
|
|
194
204
|
const maxPercentPosition = getPercentPosition(maxValue);
|
|
195
205
|
return (
|
|
@@ -198,6 +208,6 @@ const SliderControlled = (props) => {
|
|
|
198
208
|
_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
209
|
insetInlineStart: `${minPercentPosition || 0}%`,
|
|
200
210
|
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 })] })));
|
|
211
|
+
} }) }), _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
212
|
};
|
|
203
213
|
export default SliderControlled;
|
|
@@ -15,7 +15,7 @@ export const base = () => (<Example>
|
|
|
15
15
|
<Slider name="slider" defaultValue={30}/>
|
|
16
16
|
</Example.Item>
|
|
17
17
|
<Example.Item title="range">
|
|
18
|
-
<Slider range name="slider" defaultMinValue={30} defaultMaxValue={
|
|
18
|
+
<Slider range name="slider" defaultMinValue={30} defaultMaxValue={100} renderValue={() => "Hundred more times"}/>
|
|
19
19
|
</Example.Item>
|
|
20
20
|
</Example>);
|
|
21
21
|
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>);
|
package/components/View/View.js
CHANGED
|
@@ -127,7 +127,7 @@ const View = (props) => {
|
|
|
127
127
|
const key = child.key || index;
|
|
128
128
|
return (_createElement(Hidden, Object.assign({}, hiddenProps, { key: key }), (className) => renderItem({ className, child: hiddenChild, index: renderedIndex })));
|
|
129
129
|
}
|
|
130
|
-
if (child.type === React.Fragment) {
|
|
130
|
+
if (child.type === React.Fragment && React.Children.count(child.props.children) > 1) {
|
|
131
131
|
return child.props.children.map((child) => {
|
|
132
132
|
if (!child)
|
|
133
133
|
return null;
|
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.5",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|