@equinor/eds-core-react 0.34.0 → 0.35.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/eds-core-react.cjs +54 -62
- package/dist/esm/components/Autocomplete/Autocomplete.js +1 -1
- package/dist/esm/components/Autocomplete/Option.js +1 -1
- package/dist/esm/components/Icon/Icon.js +8 -3
- package/dist/esm/components/SideSheet/SideSheet.js +6 -10
- package/dist/esm/components/Slider/Slider.js +37 -43
- package/dist/esm/components/Typography/Typography.js +1 -4
- package/dist/types/components/SideSheet/SideSheet.d.ts +2 -2
- package/package.json +4 -4
- package/dist/types/test/index.d.ts +0 -1
- package/dist/types/test/withAnchorEl.d.ts +0 -5
package/dist/eds-core-react.cjs
CHANGED
|
@@ -1305,10 +1305,7 @@ var StyledTypography$1 = styled__default.default.p.withConfig({
|
|
|
1305
1305
|
});
|
|
1306
1306
|
}, function (_ref3) {
|
|
1307
1307
|
var $lines = _ref3.$lines;
|
|
1308
|
-
return (
|
|
1309
|
-
//https://caniuse.com/#feat=css-line-clamp
|
|
1310
|
-
$lines > 0 && styled.css(["&{display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}"], $lines)
|
|
1311
|
-
);
|
|
1308
|
+
return $lines && styled.css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], $lines);
|
|
1312
1309
|
}, function (_ref4) {
|
|
1313
1310
|
var $link = _ref4.$link;
|
|
1314
1311
|
return $link && styled.css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.outlineTemplate(link.states.focus.outline), edsUtils.outlineTemplate(link.states.focus.outline));
|
|
@@ -2753,7 +2750,6 @@ var Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref5, ref) {
|
|
|
2753
2750
|
'aria-hidden': true
|
|
2754
2751
|
};
|
|
2755
2752
|
var pathProps = {
|
|
2756
|
-
d: icon.svgPathData,
|
|
2757
2753
|
$height: icon.height ? parseInt(icon.height) : size,
|
|
2758
2754
|
$size: size || parseInt(icon.height)
|
|
2759
2755
|
};
|
|
@@ -2774,9 +2770,15 @@ var Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref5, ref) {
|
|
|
2774
2770
|
children: [title && /*#__PURE__*/jsxRuntime.jsx("title", {
|
|
2775
2771
|
id: titleId,
|
|
2776
2772
|
children: title
|
|
2777
|
-
}),
|
|
2773
|
+
}), Array.isArray(icon.svgPathData) ? icon.svgPathData.map(function (pathData) {
|
|
2774
|
+
return /*#__PURE__*/jsxRuntime.jsx(StyledPath$2, _objectSpread__default.default(_objectSpread__default.default({}, pathProps), {}, {
|
|
2775
|
+
d: pathData
|
|
2776
|
+
}), pathData);
|
|
2777
|
+
}) : /*#__PURE__*/jsxRuntime.jsx(StyledPath$2, _objectSpread__default.default(_objectSpread__default.default({
|
|
2778
2778
|
"data-testid": "eds-icon-path"
|
|
2779
|
-
}, pathProps)
|
|
2779
|
+
}, pathProps), {}, {
|
|
2780
|
+
d: icon.svgPathData
|
|
2781
|
+
}))]
|
|
2780
2782
|
}));
|
|
2781
2783
|
});
|
|
2782
2784
|
|
|
@@ -4467,30 +4469,26 @@ var StyledSideSheet = styled__default.default.div.withConfig({
|
|
|
4467
4469
|
var Header$1 = styled__default.default.div.withConfig({
|
|
4468
4470
|
displayName: "SideSheet__Header",
|
|
4469
4471
|
componentId: "sc-wkzlnn-1"
|
|
4470
|
-
})(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;"]);
|
|
4472
|
+
})(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;& > button{margin-left:auto;}"]);
|
|
4471
4473
|
var SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet(_ref2, ref) {
|
|
4472
4474
|
var _ref2$variant = _ref2.variant,
|
|
4473
4475
|
variant = _ref2$variant === void 0 ? 'medium' : _ref2$variant,
|
|
4474
4476
|
width = _ref2.width,
|
|
4475
|
-
|
|
4476
|
-
title = _ref2$title === void 0 ? '' : _ref2$title,
|
|
4477
|
+
title = _ref2.title,
|
|
4477
4478
|
children = _ref2.children,
|
|
4478
|
-
|
|
4479
|
-
open = _ref2$open === void 0 ? true : _ref2$open,
|
|
4479
|
+
open = _ref2.open,
|
|
4480
4480
|
onClose = _ref2.onClose,
|
|
4481
4481
|
rest = _objectWithoutProperties__default.default(_ref2, _excluded$H);
|
|
4482
4482
|
var props = _objectSpread__default.default(_objectSpread__default.default({}, rest), {}, {
|
|
4483
4483
|
ref: ref,
|
|
4484
4484
|
width: width || variants[variant]
|
|
4485
4485
|
});
|
|
4486
|
-
|
|
4487
|
-
// Controller must set open={false} when pressing the close button
|
|
4488
4486
|
return open && /*#__PURE__*/jsxRuntime.jsxs(StyledSideSheet, _objectSpread__default.default(_objectSpread__default.default({}, props), {}, {
|
|
4489
|
-
children: [/*#__PURE__*/jsxRuntime.jsxs(Header$1, {
|
|
4490
|
-
children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
|
|
4487
|
+
children: [(title || onClose) && /*#__PURE__*/jsxRuntime.jsxs(Header$1, {
|
|
4488
|
+
children: [title && /*#__PURE__*/jsxRuntime.jsx(Typography, {
|
|
4491
4489
|
variant: "h2",
|
|
4492
4490
|
children: title
|
|
4493
|
-
}), /*#__PURE__*/jsxRuntime.jsx(Button$1, {
|
|
4491
|
+
}), onClose && /*#__PURE__*/jsxRuntime.jsx(Button$1, {
|
|
4494
4492
|
variant: "ghost_icon",
|
|
4495
4493
|
onClick: onClose,
|
|
4496
4494
|
title: "Close",
|
|
@@ -5082,6 +5080,7 @@ var RangeWrapper = styled__default.default.div.attrs(function (_ref) {
|
|
|
5082
5080
|
$valB = _ref.$valB,
|
|
5083
5081
|
$disabled = _ref.$disabled,
|
|
5084
5082
|
$hideActiveTrack = _ref.$hideActiveTrack,
|
|
5083
|
+
$labelAlwaysOn = _ref.$labelAlwaysOn,
|
|
5085
5084
|
style = _ref.style;
|
|
5086
5085
|
return {
|
|
5087
5086
|
'data-disabled': $disabled ? true : null,
|
|
@@ -5090,6 +5089,7 @@ var RangeWrapper = styled__default.default.div.attrs(function (_ref) {
|
|
|
5090
5089
|
'--b': $valB,
|
|
5091
5090
|
'--min': $min,
|
|
5092
5091
|
'--max': $max,
|
|
5092
|
+
'--showTooltip': $labelAlwaysOn ? 1 : 0,
|
|
5093
5093
|
'--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
|
|
5094
5094
|
'--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background
|
|
5095
5095
|
}, style)
|
|
@@ -5097,27 +5097,24 @@ var RangeWrapper = styled__default.default.div.attrs(function (_ref) {
|
|
|
5097
5097
|
}).withConfig({
|
|
5098
5098
|
displayName: "Slider__RangeWrapper",
|
|
5099
5099
|
componentId: "sc-n1grrg-0"
|
|
5100
|
-
})(["
|
|
5101
|
-
var $
|
|
5102
|
-
return styled.css({
|
|
5103
|
-
'--showTooltip': $labelAlwaysOn ? 1 : 0
|
|
5104
|
-
});
|
|
5105
|
-
}, wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, fakeTrackBgHover, function (_ref3) {
|
|
5106
|
-
var $touchNavigation = _ref3.$touchNavigation;
|
|
5100
|
+
})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}&:where(:hover,:has(:focus-visible)){> output{--showTooltip:1;}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::before,&::after{background:var(--background-hover);}}}", ";"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, fakeTrackBgHover, function (_ref2) {
|
|
5101
|
+
var $touchNavigation = _ref2.$touchNavigation;
|
|
5107
5102
|
return $touchNavigation && styled.css(["& > input[type='range']{pointer-events:none;}& > input[type='range']::-webkit-slider-thumb{pointer-events:auto;}& > input[type='range']::-moz-range-thumb{pointer-events:auto;}"]);
|
|
5108
5103
|
});
|
|
5109
|
-
var Wrapper = styled__default.default.div.attrs(function (
|
|
5110
|
-
var $min =
|
|
5111
|
-
$max =
|
|
5112
|
-
value =
|
|
5113
|
-
disabled =
|
|
5114
|
-
$hideActiveTrack =
|
|
5115
|
-
|
|
5104
|
+
var Wrapper = styled__default.default.div.attrs(function (_ref3) {
|
|
5105
|
+
var $min = _ref3.$min,
|
|
5106
|
+
$max = _ref3.$max,
|
|
5107
|
+
value = _ref3.value,
|
|
5108
|
+
disabled = _ref3.disabled,
|
|
5109
|
+
$hideActiveTrack = _ref3.$hideActiveTrack,
|
|
5110
|
+
$labelAlwaysOn = _ref3.$labelAlwaysOn,
|
|
5111
|
+
style = _ref3.style;
|
|
5116
5112
|
return {
|
|
5117
5113
|
style: _objectSpread__default.default({
|
|
5118
5114
|
'--min': $min,
|
|
5119
5115
|
'--max': $max,
|
|
5120
5116
|
'--value': value,
|
|
5117
|
+
'--showTooltip': $labelAlwaysOn ? 1 : 0,
|
|
5121
5118
|
'--background': disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
|
|
5122
5119
|
'--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background
|
|
5123
5120
|
}, style)
|
|
@@ -5125,12 +5122,7 @@ var Wrapper = styled__default.default.div.attrs(function (_ref4) {
|
|
|
5125
5122
|
}).withConfig({
|
|
5126
5123
|
displayName: "Slider__Wrapper",
|
|
5127
5124
|
componentId: "sc-n1grrg-1"
|
|
5128
|
-
})(["
|
|
5129
|
-
var $labelAlwaysOn = _ref5.$labelAlwaysOn;
|
|
5130
|
-
return styled.css({
|
|
5131
|
-
'--showTooltip': $labelAlwaysOn ? 1 : 0
|
|
5132
|
-
});
|
|
5133
|
-
}, wrapperGrid, fakeTrackBg, trackFill, fakeTrackBgHover);
|
|
5125
|
+
})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}&:where(:hover,:has(:focus-visible)){> output{--showTooltip:1;}}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:var(--background-hover);}}}"], wrapperGrid, fakeTrackBg, trackFill, fakeTrackBgHover);
|
|
5134
5126
|
var WrapperGroupLabel = styled__default.default.div.withConfig({
|
|
5135
5127
|
displayName: "Slider__WrapperGroupLabel",
|
|
5136
5128
|
componentId: "sc-n1grrg-2"
|
|
@@ -5138,33 +5130,33 @@ var WrapperGroupLabel = styled__default.default.div.withConfig({
|
|
|
5138
5130
|
var WrapperGroupLabelDots = styled__default.default(WrapperGroupLabel).withConfig({
|
|
5139
5131
|
displayName: "Slider__WrapperGroupLabelDots",
|
|
5140
5132
|
componentId: "sc-n1grrg-3"
|
|
5141
|
-
})(["&:before,&:after{content:' ';display:block;position:absolute;width:", ";height:", ";background:", ";", "
|
|
5133
|
+
})(["&:before,&:after{content:' ';display:block;position:absolute;width:", ";height:", ";background:", ";", ";bottom:", ";left:0;}&:after{right:0;left:auto;}"], dot.width, dot.height, slider.background, edsUtils.bordersTemplate(dot.border), dot.spacings.bottom);
|
|
5142
5134
|
var SrOnlyLabel = styled__default.default.label.withConfig({
|
|
5143
5135
|
displayName: "Slider__SrOnlyLabel",
|
|
5144
5136
|
componentId: "sc-n1grrg-4"
|
|
5145
5137
|
})(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
|
|
5146
|
-
var Slider = /*#__PURE__*/react.forwardRef(function Slider(
|
|
5147
|
-
var
|
|
5148
|
-
min =
|
|
5149
|
-
|
|
5150
|
-
max =
|
|
5151
|
-
|
|
5152
|
-
value =
|
|
5153
|
-
outputFunction =
|
|
5154
|
-
onChange =
|
|
5155
|
-
onChangeCommitted =
|
|
5156
|
-
|
|
5157
|
-
minMaxDots =
|
|
5158
|
-
|
|
5159
|
-
minMaxValues =
|
|
5160
|
-
labelAlwaysOn =
|
|
5161
|
-
|
|
5162
|
-
step =
|
|
5163
|
-
disabled =
|
|
5164
|
-
hideActiveTrack =
|
|
5165
|
-
ariaLabelledby =
|
|
5166
|
-
ariaLabelledbyNative =
|
|
5167
|
-
rest = _objectWithoutProperties__default.default(
|
|
5138
|
+
var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref4, ref) {
|
|
5139
|
+
var _ref4$min = _ref4.min,
|
|
5140
|
+
min = _ref4$min === void 0 ? 0 : _ref4$min,
|
|
5141
|
+
_ref4$max = _ref4.max,
|
|
5142
|
+
max = _ref4$max === void 0 ? 100 : _ref4$max,
|
|
5143
|
+
_ref4$value = _ref4.value,
|
|
5144
|
+
value = _ref4$value === void 0 ? [40, 60] : _ref4$value,
|
|
5145
|
+
outputFunction = _ref4.outputFunction,
|
|
5146
|
+
onChange = _ref4.onChange,
|
|
5147
|
+
onChangeCommitted = _ref4.onChangeCommitted,
|
|
5148
|
+
_ref4$minMaxDots = _ref4.minMaxDots,
|
|
5149
|
+
minMaxDots = _ref4$minMaxDots === void 0 ? true : _ref4$minMaxDots,
|
|
5150
|
+
_ref4$minMaxValues = _ref4.minMaxValues,
|
|
5151
|
+
minMaxValues = _ref4$minMaxValues === void 0 ? true : _ref4$minMaxValues,
|
|
5152
|
+
labelAlwaysOn = _ref4.labelAlwaysOn,
|
|
5153
|
+
_ref4$step = _ref4.step,
|
|
5154
|
+
step = _ref4$step === void 0 ? 1 : _ref4$step,
|
|
5155
|
+
disabled = _ref4.disabled,
|
|
5156
|
+
hideActiveTrack = _ref4.hideActiveTrack,
|
|
5157
|
+
ariaLabelledby = _ref4.ariaLabelledby,
|
|
5158
|
+
ariaLabelledbyNative = _ref4['aria-labelledby'],
|
|
5159
|
+
rest = _objectWithoutProperties__default.default(_ref4, _excluded$C);
|
|
5168
5160
|
var isNumber = !Array.isArray(value);
|
|
5169
5161
|
var isRangeSlider = !isNumber && value.length === 2;
|
|
5170
5162
|
var parsedValue = isNumber ? [value] : value;
|
|
@@ -8416,7 +8408,7 @@ var Label = styled__default.default.span.withConfig({
|
|
|
8416
8408
|
})(function (_ref2) {
|
|
8417
8409
|
var theme = _ref2.theme,
|
|
8418
8410
|
$multiline = _ref2.$multiline;
|
|
8419
|
-
return styled.css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;"], edsUtils.spacingsTemplate(theme.entities.label.spacings), $multiline ? 'normal' : 'nowrap', $multiline ? 'initial' : 'hidden');
|
|
8411
|
+
return styled.css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;@supports (-moz-appearance:none){overflow:", ";}"], edsUtils.spacingsTemplate(theme.entities.label.spacings), $multiline ? 'normal' : 'nowrap', $multiline ? 'initial' : 'hidden', $multiline ? 'initial' : 'clip');
|
|
8420
8412
|
});
|
|
8421
8413
|
function AutocompleteOptionInner(props, ref) {
|
|
8422
8414
|
var value = props.value,
|
|
@@ -8467,7 +8459,7 @@ var StyledList = styled__default.default(List$1).withConfig({
|
|
|
8467
8459
|
componentId: "sc-yvif0e-1"
|
|
8468
8460
|
})(function (_ref) {
|
|
8469
8461
|
var theme = _ref.theme;
|
|
8470
|
-
return styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border));
|
|
8462
|
+
return styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;@supports (-moz-appearance:none){scrollbar-width:thin;}"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border));
|
|
8471
8463
|
});
|
|
8472
8464
|
var HelperText = styled__default.default(TextfieldHelperText).withConfig({
|
|
8473
8465
|
displayName: "Autocomplete__HelperText",
|
|
@@ -33,7 +33,7 @@ var StyledList = styled(List).withConfig({
|
|
|
33
33
|
componentId: "sc-yvif0e-1"
|
|
34
34
|
})(function (_ref) {
|
|
35
35
|
var theme = _ref.theme;
|
|
36
|
-
return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
|
|
36
|
+
return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;@supports (-moz-appearance:none){scrollbar-width:thin;}"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
|
|
37
37
|
});
|
|
38
38
|
var HelperText = styled(TextfieldHelperText).withConfig({
|
|
39
39
|
displayName: "Autocomplete__HelperText",
|
|
@@ -24,7 +24,7 @@ var Label = styled.span.withConfig({
|
|
|
24
24
|
})(function (_ref2) {
|
|
25
25
|
var theme = _ref2.theme,
|
|
26
26
|
$multiline = _ref2.$multiline;
|
|
27
|
-
return css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;"], spacingsTemplate(theme.entities.label.spacings), $multiline ? 'normal' : 'nowrap', $multiline ? 'initial' : 'hidden');
|
|
27
|
+
return css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;@supports (-moz-appearance:none){overflow:", ";}"], spacingsTemplate(theme.entities.label.spacings), $multiline ? 'normal' : 'nowrap', $multiline ? 'initial' : 'hidden', $multiline ? 'initial' : 'clip');
|
|
28
28
|
});
|
|
29
29
|
function AutocompleteOptionInner(props, ref) {
|
|
30
30
|
var value = props.value,
|
|
@@ -86,7 +86,6 @@ var Icon = /*#__PURE__*/forwardRef(function Icon(_ref5, ref) {
|
|
|
86
86
|
'aria-hidden': true
|
|
87
87
|
};
|
|
88
88
|
var pathProps = {
|
|
89
|
-
d: icon.svgPathData,
|
|
90
89
|
$height: icon.height ? parseInt(icon.height) : size,
|
|
91
90
|
$size: size || parseInt(icon.height)
|
|
92
91
|
};
|
|
@@ -107,9 +106,15 @@ var Icon = /*#__PURE__*/forwardRef(function Icon(_ref5, ref) {
|
|
|
107
106
|
children: [title && /*#__PURE__*/jsx("title", {
|
|
108
107
|
id: titleId,
|
|
109
108
|
children: title
|
|
110
|
-
}),
|
|
109
|
+
}), Array.isArray(icon.svgPathData) ? icon.svgPathData.map(function (pathData) {
|
|
110
|
+
return /*#__PURE__*/jsx(StyledPath, _objectSpread(_objectSpread({}, pathProps), {}, {
|
|
111
|
+
d: pathData
|
|
112
|
+
}), pathData);
|
|
113
|
+
}) : /*#__PURE__*/jsx(StyledPath, _objectSpread(_objectSpread({
|
|
111
114
|
"data-testid": "eds-icon-path"
|
|
112
|
-
}, pathProps)
|
|
115
|
+
}, pathProps), {}, {
|
|
116
|
+
d: icon.svgPathData
|
|
117
|
+
}))]
|
|
113
118
|
}));
|
|
114
119
|
});
|
|
115
120
|
|
|
@@ -25,30 +25,26 @@ var StyledSideSheet = styled.div.withConfig({
|
|
|
25
25
|
var Header = styled.div.withConfig({
|
|
26
26
|
displayName: "SideSheet__Header",
|
|
27
27
|
componentId: "sc-wkzlnn-1"
|
|
28
|
-
})(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;"]);
|
|
28
|
+
})(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;& > button{margin-left:auto;}"]);
|
|
29
29
|
var SideSheet = /*#__PURE__*/forwardRef(function SideSheet(_ref2, ref) {
|
|
30
30
|
var _ref2$variant = _ref2.variant,
|
|
31
31
|
variant = _ref2$variant === void 0 ? 'medium' : _ref2$variant,
|
|
32
32
|
width = _ref2.width,
|
|
33
|
-
|
|
34
|
-
title = _ref2$title === void 0 ? '' : _ref2$title,
|
|
33
|
+
title = _ref2.title,
|
|
35
34
|
children = _ref2.children,
|
|
36
|
-
|
|
37
|
-
open = _ref2$open === void 0 ? true : _ref2$open,
|
|
35
|
+
open = _ref2.open,
|
|
38
36
|
onClose = _ref2.onClose,
|
|
39
37
|
rest = _objectWithoutProperties(_ref2, _excluded);
|
|
40
38
|
var props = _objectSpread(_objectSpread({}, rest), {}, {
|
|
41
39
|
ref: ref,
|
|
42
40
|
width: width || variants[variant]
|
|
43
41
|
});
|
|
44
|
-
|
|
45
|
-
// Controller must set open={false} when pressing the close button
|
|
46
42
|
return open && /*#__PURE__*/jsxs(StyledSideSheet, _objectSpread(_objectSpread({}, props), {}, {
|
|
47
|
-
children: [/*#__PURE__*/jsxs(Header, {
|
|
48
|
-
children: [/*#__PURE__*/jsx(Typography, {
|
|
43
|
+
children: [(title || onClose) && /*#__PURE__*/jsxs(Header, {
|
|
44
|
+
children: [title && /*#__PURE__*/jsx(Typography, {
|
|
49
45
|
variant: "h2",
|
|
50
46
|
children: title
|
|
51
|
-
}), /*#__PURE__*/jsx(Button, {
|
|
47
|
+
}), onClose && /*#__PURE__*/jsx(Button, {
|
|
52
48
|
variant: "ghost_icon",
|
|
53
49
|
onClick: onClose,
|
|
54
50
|
title: "Close",
|
|
@@ -28,6 +28,7 @@ var RangeWrapper = styled.div.attrs(function (_ref) {
|
|
|
28
28
|
$valB = _ref.$valB,
|
|
29
29
|
$disabled = _ref.$disabled,
|
|
30
30
|
$hideActiveTrack = _ref.$hideActiveTrack,
|
|
31
|
+
$labelAlwaysOn = _ref.$labelAlwaysOn,
|
|
31
32
|
style = _ref.style;
|
|
32
33
|
return {
|
|
33
34
|
'data-disabled': $disabled ? true : null,
|
|
@@ -36,6 +37,7 @@ var RangeWrapper = styled.div.attrs(function (_ref) {
|
|
|
36
37
|
'--b': $valB,
|
|
37
38
|
'--min': $min,
|
|
38
39
|
'--max': $max,
|
|
40
|
+
'--showTooltip': $labelAlwaysOn ? 1 : 0,
|
|
39
41
|
'--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
|
|
40
42
|
'--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background
|
|
41
43
|
}, style)
|
|
@@ -43,27 +45,24 @@ var RangeWrapper = styled.div.attrs(function (_ref) {
|
|
|
43
45
|
}).withConfig({
|
|
44
46
|
displayName: "Slider__RangeWrapper",
|
|
45
47
|
componentId: "sc-n1grrg-0"
|
|
46
|
-
})(["
|
|
47
|
-
var $
|
|
48
|
-
return css({
|
|
49
|
-
'--showTooltip': $labelAlwaysOn ? 1 : 0
|
|
50
|
-
});
|
|
51
|
-
}, wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, fakeTrackBgHover, function (_ref3) {
|
|
52
|
-
var $touchNavigation = _ref3.$touchNavigation;
|
|
48
|
+
})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}&:where(:hover,:has(:focus-visible)){> output{--showTooltip:1;}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::before,&::after{background:var(--background-hover);}}}", ";"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, fakeTrackBgHover, function (_ref2) {
|
|
49
|
+
var $touchNavigation = _ref2.$touchNavigation;
|
|
53
50
|
return $touchNavigation && css(["& > input[type='range']{pointer-events:none;}& > input[type='range']::-webkit-slider-thumb{pointer-events:auto;}& > input[type='range']::-moz-range-thumb{pointer-events:auto;}"]);
|
|
54
51
|
});
|
|
55
|
-
var Wrapper = styled.div.attrs(function (
|
|
56
|
-
var $min =
|
|
57
|
-
$max =
|
|
58
|
-
value =
|
|
59
|
-
disabled =
|
|
60
|
-
$hideActiveTrack =
|
|
61
|
-
|
|
52
|
+
var Wrapper = styled.div.attrs(function (_ref3) {
|
|
53
|
+
var $min = _ref3.$min,
|
|
54
|
+
$max = _ref3.$max,
|
|
55
|
+
value = _ref3.value,
|
|
56
|
+
disabled = _ref3.disabled,
|
|
57
|
+
$hideActiveTrack = _ref3.$hideActiveTrack,
|
|
58
|
+
$labelAlwaysOn = _ref3.$labelAlwaysOn,
|
|
59
|
+
style = _ref3.style;
|
|
62
60
|
return {
|
|
63
61
|
style: _objectSpread({
|
|
64
62
|
'--min': $min,
|
|
65
63
|
'--max': $max,
|
|
66
64
|
'--value': value,
|
|
65
|
+
'--showTooltip': $labelAlwaysOn ? 1 : 0,
|
|
67
66
|
'--background': disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
|
|
68
67
|
'--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background
|
|
69
68
|
}, style)
|
|
@@ -71,12 +70,7 @@ var Wrapper = styled.div.attrs(function (_ref4) {
|
|
|
71
70
|
}).withConfig({
|
|
72
71
|
displayName: "Slider__Wrapper",
|
|
73
72
|
componentId: "sc-n1grrg-1"
|
|
74
|
-
})(["
|
|
75
|
-
var $labelAlwaysOn = _ref5.$labelAlwaysOn;
|
|
76
|
-
return css({
|
|
77
|
-
'--showTooltip': $labelAlwaysOn ? 1 : 0
|
|
78
|
-
});
|
|
79
|
-
}, wrapperGrid, fakeTrackBg, trackFill, fakeTrackBgHover);
|
|
73
|
+
})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}&:where(:hover,:has(:focus-visible)){> output{--showTooltip:1;}}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:var(--background-hover);}}}"], wrapperGrid, fakeTrackBg, trackFill, fakeTrackBgHover);
|
|
80
74
|
var WrapperGroupLabel = styled.div.withConfig({
|
|
81
75
|
displayName: "Slider__WrapperGroupLabel",
|
|
82
76
|
componentId: "sc-n1grrg-2"
|
|
@@ -84,33 +78,33 @@ var WrapperGroupLabel = styled.div.withConfig({
|
|
|
84
78
|
var WrapperGroupLabelDots = styled(WrapperGroupLabel).withConfig({
|
|
85
79
|
displayName: "Slider__WrapperGroupLabelDots",
|
|
86
80
|
componentId: "sc-n1grrg-3"
|
|
87
|
-
})(["&:before,&:after{content:' ';display:block;position:absolute;width:", ";height:", ";background:", ";", "
|
|
81
|
+
})(["&:before,&:after{content:' ';display:block;position:absolute;width:", ";height:", ";background:", ";", ";bottom:", ";left:0;}&:after{right:0;left:auto;}"], dot.width, dot.height, slider.background, bordersTemplate(dot.border), dot.spacings.bottom);
|
|
88
82
|
var SrOnlyLabel = styled.label.withConfig({
|
|
89
83
|
displayName: "Slider__SrOnlyLabel",
|
|
90
84
|
componentId: "sc-n1grrg-4"
|
|
91
85
|
})(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
|
|
92
|
-
var Slider = /*#__PURE__*/forwardRef(function Slider(
|
|
93
|
-
var
|
|
94
|
-
min =
|
|
95
|
-
|
|
96
|
-
max =
|
|
97
|
-
|
|
98
|
-
value =
|
|
99
|
-
outputFunction =
|
|
100
|
-
onChange =
|
|
101
|
-
onChangeCommitted =
|
|
102
|
-
|
|
103
|
-
minMaxDots =
|
|
104
|
-
|
|
105
|
-
minMaxValues =
|
|
106
|
-
labelAlwaysOn =
|
|
107
|
-
|
|
108
|
-
step =
|
|
109
|
-
disabled =
|
|
110
|
-
hideActiveTrack =
|
|
111
|
-
ariaLabelledby =
|
|
112
|
-
ariaLabelledbyNative =
|
|
113
|
-
rest = _objectWithoutProperties(
|
|
86
|
+
var Slider = /*#__PURE__*/forwardRef(function Slider(_ref4, ref) {
|
|
87
|
+
var _ref4$min = _ref4.min,
|
|
88
|
+
min = _ref4$min === void 0 ? 0 : _ref4$min,
|
|
89
|
+
_ref4$max = _ref4.max,
|
|
90
|
+
max = _ref4$max === void 0 ? 100 : _ref4$max,
|
|
91
|
+
_ref4$value = _ref4.value,
|
|
92
|
+
value = _ref4$value === void 0 ? [40, 60] : _ref4$value,
|
|
93
|
+
outputFunction = _ref4.outputFunction,
|
|
94
|
+
onChange = _ref4.onChange,
|
|
95
|
+
onChangeCommitted = _ref4.onChangeCommitted,
|
|
96
|
+
_ref4$minMaxDots = _ref4.minMaxDots,
|
|
97
|
+
minMaxDots = _ref4$minMaxDots === void 0 ? true : _ref4$minMaxDots,
|
|
98
|
+
_ref4$minMaxValues = _ref4.minMaxValues,
|
|
99
|
+
minMaxValues = _ref4$minMaxValues === void 0 ? true : _ref4$minMaxValues,
|
|
100
|
+
labelAlwaysOn = _ref4.labelAlwaysOn,
|
|
101
|
+
_ref4$step = _ref4.step,
|
|
102
|
+
step = _ref4$step === void 0 ? 1 : _ref4$step,
|
|
103
|
+
disabled = _ref4.disabled,
|
|
104
|
+
hideActiveTrack = _ref4.hideActiveTrack,
|
|
105
|
+
ariaLabelledby = _ref4.ariaLabelledby,
|
|
106
|
+
ariaLabelledbyNative = _ref4['aria-labelledby'],
|
|
107
|
+
rest = _objectWithoutProperties(_ref4, _excluded);
|
|
114
108
|
var isNumber = !Array.isArray(value);
|
|
115
109
|
var isRangeSlider = !isNumber && value.length === 2;
|
|
116
110
|
var parsedValue = isNumber ? [value] : value;
|
|
@@ -63,10 +63,7 @@ var StyledTypography = styled.p.withConfig({
|
|
|
63
63
|
});
|
|
64
64
|
}, function (_ref3) {
|
|
65
65
|
var $lines = _ref3.$lines;
|
|
66
|
-
return (
|
|
67
|
-
//https://caniuse.com/#feat=css-line-clamp
|
|
68
|
-
$lines > 0 && css(["&{display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}"], $lines)
|
|
69
|
-
);
|
|
66
|
+
return $lines && css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], $lines);
|
|
70
67
|
}, function (_ref4) {
|
|
71
68
|
var $link = _ref4.$link;
|
|
72
69
|
return $link && css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], outlineTemplate(link.states.focus.outline), outlineTemplate(link.states.focus.outline));
|
|
@@ -7,7 +7,7 @@ export type SideSheetProps = {
|
|
|
7
7
|
/** OnClick function (close) */
|
|
8
8
|
onClose?: (Event: any) => void;
|
|
9
9
|
/** Open / close Side Sheet */
|
|
10
|
-
open
|
|
10
|
+
open: boolean;
|
|
11
11
|
/** Override width of Side Sheet */
|
|
12
12
|
width?: string;
|
|
13
13
|
} & HTMLAttributes<HTMLDivElement>;
|
|
@@ -19,7 +19,7 @@ export declare const SideSheet: import("react").ForwardRefExoticComponent<{
|
|
|
19
19
|
/** OnClick function (close) */
|
|
20
20
|
onClose?: (Event: any) => void;
|
|
21
21
|
/** Open / close Side Sheet */
|
|
22
|
-
open
|
|
22
|
+
open: boolean;
|
|
23
23
|
/** Override width of Side Sheet */
|
|
24
24
|
width?: string;
|
|
25
25
|
} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@equinor/eds-core-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.35.1",
|
|
4
4
|
"description": "The React implementation of the Equinor Design System",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"**/*.css"
|
|
@@ -85,9 +85,9 @@
|
|
|
85
85
|
"@floating-ui/react": "^0.26.2",
|
|
86
86
|
"@tanstack/react-virtual": "3.0.0-beta.54",
|
|
87
87
|
"downshift": "^8.2.3",
|
|
88
|
-
"@equinor/eds-icons": "^0.
|
|
89
|
-
"@equinor/eds-
|
|
90
|
-
"@equinor/eds-
|
|
88
|
+
"@equinor/eds-icons": "^0.20.0",
|
|
89
|
+
"@equinor/eds-utils": "0.8.3",
|
|
90
|
+
"@equinor/eds-tokens": "0.9.2"
|
|
91
91
|
},
|
|
92
92
|
"engines": {
|
|
93
93
|
"pnpm": ">=4",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './withAnchorEl';
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
2
|
-
import { RenderOptions, RenderResult } from '@testing-library/react';
|
|
3
|
-
declare const customRender: (ui: React.ReactElement, options?: Omit<RenderOptions, 'queries'>) => RenderResult;
|
|
4
|
-
export * from '@testing-library/react';
|
|
5
|
-
export { customRender as render };
|