@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.
@@ -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
- }), /*#__PURE__*/jsxRuntime.jsx(StyledPath$2, _objectSpread__default.default({
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
- _ref2$title = _ref2.title,
4476
- title = _ref2$title === void 0 ? '' : _ref2$title,
4477
+ title = _ref2.title,
4477
4478
  children = _ref2.children,
4478
- _ref2$open = _ref2.open,
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
- })(["", ";--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));}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::before,&::after{background:var(--background-hover);}}}&:where(:hover,:has(:focus-visible)){--showTooltip:1;}", ";"], function (_ref2) {
5101
- var $labelAlwaysOn = _ref2.$labelAlwaysOn;
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 (_ref4) {
5110
- var $min = _ref4.$min,
5111
- $max = _ref4.$max,
5112
- value = _ref4.value,
5113
- disabled = _ref4.disabled,
5114
- $hideActiveTrack = _ref4.$hideActiveTrack,
5115
- style = _ref4.style;
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
- })(["", ";--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;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:var(--background-hover);}}}&:where(:hover,:has(:focus-visible)){--showTooltip:1;}"], function (_ref5) {
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:", ";", " bottom:", ";left:0;}&:after{right:0;left:auto;}"], dot.width, dot.height, slider.background, edsUtils.bordersTemplate(dot.border), dot.spacings.bottom);
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(_ref6, ref) {
5147
- var _ref6$min = _ref6.min,
5148
- min = _ref6$min === void 0 ? 0 : _ref6$min,
5149
- _ref6$max = _ref6.max,
5150
- max = _ref6$max === void 0 ? 100 : _ref6$max,
5151
- _ref6$value = _ref6.value,
5152
- value = _ref6$value === void 0 ? [40, 60] : _ref6$value,
5153
- outputFunction = _ref6.outputFunction,
5154
- onChange = _ref6.onChange,
5155
- onChangeCommitted = _ref6.onChangeCommitted,
5156
- _ref6$minMaxDots = _ref6.minMaxDots,
5157
- minMaxDots = _ref6$minMaxDots === void 0 ? true : _ref6$minMaxDots,
5158
- _ref6$minMaxValues = _ref6.minMaxValues,
5159
- minMaxValues = _ref6$minMaxValues === void 0 ? true : _ref6$minMaxValues,
5160
- labelAlwaysOn = _ref6.labelAlwaysOn,
5161
- _ref6$step = _ref6.step,
5162
- step = _ref6$step === void 0 ? 1 : _ref6$step,
5163
- disabled = _ref6.disabled,
5164
- hideActiveTrack = _ref6.hideActiveTrack,
5165
- ariaLabelledby = _ref6.ariaLabelledby,
5166
- ariaLabelledbyNative = _ref6['aria-labelledby'],
5167
- rest = _objectWithoutProperties__default.default(_ref6, _excluded$C);
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
- }), /*#__PURE__*/jsx(StyledPath, _objectSpread({
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
- _ref2$title = _ref2.title,
34
- title = _ref2$title === void 0 ? '' : _ref2$title,
33
+ title = _ref2.title,
35
34
  children = _ref2.children,
36
- _ref2$open = _ref2.open,
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
- })(["", ";--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));}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::before,&::after{background:var(--background-hover);}}}&:where(:hover,:has(:focus-visible)){--showTooltip:1;}", ";"], function (_ref2) {
47
- var $labelAlwaysOn = _ref2.$labelAlwaysOn;
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 (_ref4) {
56
- var $min = _ref4.$min,
57
- $max = _ref4.$max,
58
- value = _ref4.value,
59
- disabled = _ref4.disabled,
60
- $hideActiveTrack = _ref4.$hideActiveTrack,
61
- style = _ref4.style;
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
- })(["", ";--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;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:var(--background-hover);}}}&:where(:hover,:has(:focus-visible)){--showTooltip:1;}"], function (_ref5) {
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:", ";", " bottom:", ";left:0;}&:after{right:0;left:auto;}"], dot.width, dot.height, slider.background, bordersTemplate(dot.border), dot.spacings.bottom);
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(_ref6, ref) {
93
- var _ref6$min = _ref6.min,
94
- min = _ref6$min === void 0 ? 0 : _ref6$min,
95
- _ref6$max = _ref6.max,
96
- max = _ref6$max === void 0 ? 100 : _ref6$max,
97
- _ref6$value = _ref6.value,
98
- value = _ref6$value === void 0 ? [40, 60] : _ref6$value,
99
- outputFunction = _ref6.outputFunction,
100
- onChange = _ref6.onChange,
101
- onChangeCommitted = _ref6.onChangeCommitted,
102
- _ref6$minMaxDots = _ref6.minMaxDots,
103
- minMaxDots = _ref6$minMaxDots === void 0 ? true : _ref6$minMaxDots,
104
- _ref6$minMaxValues = _ref6.minMaxValues,
105
- minMaxValues = _ref6$minMaxValues === void 0 ? true : _ref6$minMaxValues,
106
- labelAlwaysOn = _ref6.labelAlwaysOn,
107
- _ref6$step = _ref6.step,
108
- step = _ref6$step === void 0 ? 1 : _ref6$step,
109
- disabled = _ref6.disabled,
110
- hideActiveTrack = _ref6.hideActiveTrack,
111
- ariaLabelledby = _ref6.ariaLabelledby,
112
- ariaLabelledbyNative = _ref6['aria-labelledby'],
113
- rest = _objectWithoutProperties(_ref6, _excluded);
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?: boolean;
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?: boolean;
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.34.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.19.3",
89
- "@equinor/eds-tokens": "0.9.2",
90
- "@equinor/eds-utils": "0.8.3"
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 };