@atlaskit/range 8.0.0 → 8.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/afm-jira/tsconfig.json +3 -0
  3. package/dist/cjs/styled.compiled.css +49 -8
  4. package/dist/cjs/styled.js +9 -34
  5. package/dist/es2019/styled.compiled.css +17 -14
  6. package/dist/es2019/styled.js +8 -33
  7. package/dist/esm/styled.compiled.css +49 -8
  8. package/dist/esm/styled.js +9 -34
  9. package/dist/types/styled.d.ts +0 -4
  10. package/dist/types-ts4.5/styled.d.ts +0 -4
  11. package/package.json +3 -3
  12. package/tsconfig.json +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/range
2
2
 
3
+ ## 8.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#100413](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100413)
8
+ [`e4d6f320b1650`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e4d6f320b1650) -
9
+ Fix styling of our @atlaskit/range component lost in v8.0.0 rendering the component invisible.
10
+
3
11
  ## 8.0.0
4
12
 
5
13
  ### Major Changes
package/afm-jira/tsconfig.json CHANGED
@@ -17,6 +17,9 @@
17
17
  "../src/**/test.*"
18
18
  ],
19
19
  "references": [
20
+ {
21
+ "path": "../../css/afm-jira/tsconfig.json"
22
+ },
20
23
  {
21
24
  "path": "../../ds-lib/afm-jira/tsconfig.json"
22
25
  },
package/dist/cjs/styled.compiled.css CHANGED
@@ -1,30 +1,71 @@
1
1
  ._108m1q5u::-moz-range-thumb{border-radius:var(--ds-border-radius-circle,50%)}
2
+ ._10lridpf::-webkit-slider-runnable-track{border:0}
2
3
  ._15raidpf::-moz-focus-outer{border:0}
4
+ ._1gvoyh40::-moz-range-track{border-radius:2px}
5
+ ._1kdl1q5u::-webkit-slider-thumb{border-radius:var(--ds-border-radius-circle,50%)}
6
+ ._1nx42hjt::-moz-range-track{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
3
7
  ._1rf3g56u::-moz-range-thumb{outline:solid 2px var(--thumb-border)}
8
+ ._1tcb2hjt::-moz-range-progress{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
4
9
  ._1yeu2hjt::-moz-range-thumb{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
5
10
  ._1yq0glyw::-moz-range-thumb{border:none}
6
- ._sidy4alp::-moz-range-thumb{background:var(--_171tp53)}
11
+ ._1yz62hjt::-webkit-slider-thumb{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
12
+ ._37ywyh40::-moz-range-progress{border-radius:2px}
13
+ ._e8hnidpf::-moz-range-progress{border:0}
14
+ ._g6tdyh40::-webkit-slider-runnable-track{border-radius:2px}
15
+ ._h2ksglyw::-webkit-slider-thumb{border:none}
16
+ ._m8f8g56u::-webkit-slider-thumb{outline:solid 2px var(--thumb-border)}
17
+ ._ru37idpf::-moz-range-track{border:0}
18
+ ._vi4t2hjt::-webkit-slider-runnable-track{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
7
19
  ._10o7tlke::-moz-range-thumb{cursor:pointer}
20
+ ._12el4alp::-moz-range-thumb{background-color:var(--_171tp53)}
21
+ ._142y1y44::-moz-range-track{height:4px}
8
22
  ._14h11gpr{--thumb-shadow:var(--_cghoza)}
9
23
  ._15dpptpz{--track-bg:var(--_19g1tth)}
24
+ ._168l1y44::-webkit-slider-runnable-track{height:4px}
25
+ ._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)}
10
26
  ._18lx1n8f{--track-fg:var(--_1eby16r)}
11
- ._1a3g1xpu:hover._1a3g1xpu:not(._1a3g1xpu:disabled){--track-bg:var(--_rf9ekb)}
27
+ ._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
28
+ ._1bdkusvi::-webkit-slider-thumb{box-sizing:border-box}
12
29
  ._1bsb1osq{width:100%}
13
- ._1fov13gf:disabled::-moz-range-progress, ._1vq313gf:disabled::-moz-range-thumb, ._34m613gf:disabled::-moz-range-track{cursor:not-allowed}
30
+ ._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
31
+ ._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
32
+ ._1esf4alp::-webkit-slider-thumb{background-color:var(--_171tp53)}
33
+ ._1f5t1osq::-moz-range-track{width:100%}
34
+ ._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed}
35
+ ._1g2h1osq::-webkit-slider-runnable-track{width:100%}
36
+ ._1g741hsc::-webkit-slider-runnable-track{background-image:linear-gradient(var(--track-fg),var(--track-fg))}
14
37
  ._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
15
- ._1kzeyh40::-moz-range-thumb{outline-offset:2px}
38
+ ._1j707vkz::-webkit-slider-thumb{height:1pc}
39
+ ._1jhcjiw3:hover:not(:disabled){--track-fg:var(--_14t3dsg)}
40
+ ._1kd21y44::-moz-range-progress{height:4px}
41
+ ._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)}
16
42
  ._1mn57vkz::-moz-range-thumb{height:1pc}
17
43
  ._1oqe1ik2::-moz-range-thumb{box-shadow:var(--thumb-shadow)}
18
- ._39bbjiw3:hover._39bbjiw3:not(._39bbjiw3:disabled){--track-fg:var(--_14t3dsg)}
44
+ ._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%}
45
+ ._1rucy2jz:active:not(:disabled){--thumb-bg:var(--_1pam7of)}
46
+ ._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)}
47
+ ._1ssqtlke::-moz-range-progress{cursor:pointer}
48
+ ._1vq313gf:disabled::-moz-range-thumb{cursor:not-allowed}
49
+ ._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed}
50
+ ._34m613gf:disabled::-moz-range-track{cursor:not-allowed}
19
51
  ._4t3i1ylp{height:40px}
20
- ._5i7a13gf:disabled::-webkit-slider-runnable-track, ._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed}
52
+ ._4w431ik2::-webkit-slider-thumb{box-shadow:var(--thumb-shadow)}
53
+ ._5i7a13gf:disabled::-webkit-slider-runnable-track{cursor:not-allowed}
54
+ ._9u3f2hce::-webkit-slider-runnable-track{background-color:var(--track-bg)}
55
+ ._aoww1osq::-moz-range-progress{width:100%}
56
+ ._b3fmtlke::-moz-range-track{cursor:pointer}
21
57
  ._bfhk18uv{background-color:initial}
22
- ._c3i1y2jz:active._c3i1y2jz:not(._c3i1y2jz:disabled){--thumb-bg:var(--_1pam7of)}
58
+ ._d7w62hce::-moz-range-track{background-color:var(--track-bg)}
23
59
  ._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
24
- ._g6ixjiw3:hover._g6ixjiw3:not(._g6ixjiw3:disabled){--thumb-bg:var(--_14t3dsg)}
25
60
  ._j5dh13gf:disabled{cursor:not-allowed}
61
+ ._jxarjiw3:hover:not(:disabled){--thumb-bg:var(--_14t3dsg)}
62
+ ._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
26
63
  ._r7637vkz::-moz-range-thumb{width:1pc}
64
+ ._u98z7vkz::-webkit-slider-thumb{width:1pc}
65
+ ._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)}
27
66
  ._wstuglyw{-webkit-appearance:none}
67
+ ._ydqg1xpu:hover:not(:disabled){--track-bg:var(--_rf9ekb)}
68
+ ._yfyntlke::-webkit-slider-thumb{cursor:pointer}
28
69
  ._1hvw1o36:focus{outline-width:medium}
29
70
  ._49pcglyw:focus{outline-style:none}
30
71
  ._nt751r31:focus{outline-color:currentColor}
package/dist/cjs/styled.js CHANGED
@@ -1,4 +1,4 @@
1
- /* styled.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /* styled.tsx generated by @compiled/babel-plugin v0.33.0 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -12,45 +12,20 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
16
15
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
16
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
17
17
  var _colors = require("@atlaskit/theme/colors");
18
18
  var _excluded = ["valuePercent", "style"];
19
19
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
20
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
21
21
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
22
22
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
23
- var sliderThumbStyles = {
24
- boxSizing: 'border-box',
25
- width: 16,
26
- height: 16,
27
- border: 'none',
28
- background: "var(--thumb-bg, ".concat("var(--ds-background-neutral-bold, ".concat(_colors.B400, ")"), ")"),
29
- // adapted from @atlaskit/focus-ring
30
- outline: 'solid 2px var(--thumb-border)',
31
- outlineOffset: '2px',
32
- borderRadius: "var(--ds-border-radius-circle, 50%)",
33
- boxShadow: 'var(--thumb-shadow)',
34
- cursor: 'pointer',
35
- // Different implicit behavior across browsers -> making it explicit.
36
- transition: 'background-color 0.2s ease-in-out'
37
- };
38
- var sliderTrackStyles = {
39
- borderRadius: 2,
40
- border: 0,
41
- cursor: 'pointer',
42
- height: 4,
43
- width: '100%',
44
- transition: 'background-color 0.2s ease-in-out'
45
- };
46
-
47
- // Styles are split per browser as they are implemented differently
48
- // Cannot consolidate as Chrome & Firefox don't recognise styles if they are grouped
49
- // with CSS selectors they don't recognise, e.g. &::-ms-thumb
50
- var browserStyles = {
51
- webkit: null,
52
- firefox: null
53
- };
23
+ // Styles are split up to avoid edge-cases with TS implementations between `css` and `cssMap` with some
24
+ // of these edge-case pseudo-selectors.
25
+ // Previously, in Emotion, these selectors weren't consolidated, eg. `&::webkit-thumb, &::moz-thumb`
26
+ // would not be parsed by either browser, but this may no longer be the case in Compiled
27
+ var webkitStyles = null;
28
+ var firefoxStyles = null;
54
29
  var baseStyles = null;
55
30
  var themeStyles = null;
56
31
 
@@ -64,7 +39,7 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (props,
64
39
  strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
65
40
  return /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, strippedProps, {
66
41
  ref: ref,
67
- className: (0, _runtime.ax)(["_1bsb1osq _4t3i1ylp _bfhk18uv _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _5i7a13gf _1yte13gf", "_g4ppusvi _r7637vkz _1mn57vkz _1yq0glyw _sidy4alp _1rf3g56u _1kzeyh40 _108m1q5u _1oqe1ik2 _10o7tlke _1yeu2hjt _15raidpf _1fov13gf _1vq313gf _34m613gf", "_14h11gpr _15dpptpz _18lx1n8f _g6ixjiw3 _1a3g1xpu _39bbjiw3 _c3i1y2jz _164c3zdg"]),
42
+ className: (0, _runtime.ax)(["_1bsb1osq _4t3i1ylp _bfhk18uv _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1q5u _m8f8g56u _1yz62hjt _1bdkusvi _u98z7vkz _1j707vkz _1esf4alp _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdyh40 _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1q5u _1rf3g56u _1yeu2hjt _g4ppusvi _r7637vkz _1mn57vkz _12el4alp _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywyh40 _1tcb2hjt _aoww1osq _1kd21y44 _vt2s1w6o _1ssqtlke _ru37idpf _1gvoyh40 _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11gpr _15dpptpz _18lx1n8f _jxarjiw3 _ydqg1xpu _1jhcjiw3 _1rucy2jz _164c3zdg"]),
68
43
  style: _objectSpread(_objectSpread({}, {
69
44
  // We are creating a css variable to control the "progress" portion of the range input
70
45
  // This avoids us needing to create a new css class for each new percentage value
package/dist/es2019/styled.compiled.css CHANGED
@@ -1,6 +1,5 @@
1
1
  ._108m1q5u::-moz-range-thumb{border-radius:var(--ds-border-radius-circle,50%)}
2
2
  ._10lridpf::-webkit-slider-runnable-track{border:0}
3
- ._14pq2hce::-moz-range-track{background:var(--track-bg)}
4
3
  ._15raidpf::-moz-focus-outer{border:0}
5
4
  ._1gvoyh40::-moz-range-track{border-radius:2px}
6
5
  ._1kdl1q5u::-webkit-slider-thumb{border-radius:var(--ds-border-radius-circle,50%)}
@@ -9,60 +8,64 @@
9
8
  ._1tcb2hjt::-moz-range-progress{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
10
9
  ._1yeu2hjt::-moz-range-thumb{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
11
10
  ._1yq0glyw::-moz-range-thumb{border:none}
12
- ._1yxt1w6o::-moz-range-progress{background:var(--track-fg)}
13
11
  ._1yz62hjt::-webkit-slider-thumb{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
14
12
  ._37ywyh40::-moz-range-progress{border-radius:2px}
15
13
  ._e8hnidpf::-moz-range-progress{border:0}
16
14
  ._g6tdyh40::-webkit-slider-runnable-track{border-radius:2px}
17
15
  ._h2ksglyw::-webkit-slider-thumb{border:none}
18
16
  ._m8f8g56u::-webkit-slider-thumb{outline:solid 2px var(--thumb-border)}
19
- ._m9xw5udg::-webkit-slider-thumb{background:var(--thumb-bg,var(--ds-background-neutral-bold,#0052cc))}
20
17
  ._ru37idpf::-moz-range-track{border:0}
21
- ._sidy5udg::-moz-range-thumb{background:var(--thumb-bg,var(--ds-background-neutral-bold,#0052cc))}
22
18
  ._vi4t2hjt::-webkit-slider-runnable-track{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
23
19
  ._10o7tlke::-moz-range-thumb{cursor:pointer}
20
+ ._12el5udg::-moz-range-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#0052cc))}
24
21
  ._142y1y44::-moz-range-track{height:4px}
25
22
  ._14h11uvs{--thumb-shadow:var(--ds-UNSAFE-transparent,0 4px 8px -2px rgba(9,30,66,.25),0 0 1px rgba(9,30,66,.31))}
26
23
  ._15dp1yrq{--track-bg:var(--ds-background-neutral,#ebecf0)}
27
24
  ._168l1y44::-webkit-slider-runnable-track{height:4px}
28
- ._18k7yh40::-webkit-slider-thumb{outline-offset:2px}
25
+ ._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)}
29
26
  ._18lxyvsn{--track-fg:var(--ds-background-neutral-bold,#0052cc)}
30
27
  ._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
31
- ._1a3ghkel:hover._1a3ghkel:not(._1a3ghkel:disabled){--track-bg:var(--ds-background-neutral-hovered,#dfe1e6)}
32
28
  ._1bdkusvi::-webkit-slider-thumb{box-sizing:border-box}
33
29
  ._1bsb1osq{width:100%}
34
30
  ._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
35
31
  ._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
32
+ ._1esf5udg::-webkit-slider-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#0052cc))}
36
33
  ._1f5t1osq::-moz-range-track{width:100%}
37
- ._1fov13gf:disabled::-moz-range-progress, ._1vq313gf:disabled::-moz-range-thumb, ._34m613gf:disabled::-moz-range-track{cursor:not-allowed}
34
+ ._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed}
38
35
  ._1g2h1osq::-webkit-slider-runnable-track{width:100%}
39
36
  ._1g741hsc::-webkit-slider-runnable-track{background-image:linear-gradient(var(--track-fg),var(--track-fg))}
40
37
  ._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
41
38
  ._1j707vkz::-webkit-slider-thumb{height:1pc}
39
+ ._1jhc1eo5:hover:not(:disabled){--track-fg:var(--ds-background-neutral-bold-hovered,#0065ff)}
42
40
  ._1kd21y44::-moz-range-progress{height:4px}
43
- ._1kzeyh40::-moz-range-thumb{outline-offset:2px}
41
+ ._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)}
44
42
  ._1mn57vkz::-moz-range-thumb{height:1pc}
45
43
  ._1oqe1ik2::-moz-range-thumb{box-shadow:var(--thumb-shadow)}
46
- ._1sdcyjp0::-webkit-slider-thumb{margin-block-start:-6px}
44
+ ._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%}
45
+ ._1ruc16ss:active:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-pressed,#2684ff)}
46
+ ._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)}
47
47
  ._1ssqtlke::-moz-range-progress{cursor:pointer}
48
- ._39bb1eo5:hover._39bb1eo5:not(._39bb1eo5:disabled){--track-fg:var(--ds-background-neutral-bold-hovered,#0065ff)}
48
+ ._1vq313gf:disabled::-moz-range-thumb{cursor:not-allowed}
49
+ ._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed}
50
+ ._34m613gf:disabled::-moz-range-track{cursor:not-allowed}
49
51
  ._4t3i1ylp{height:40px}
50
52
  ._4w431ik2::-webkit-slider-thumb{box-shadow:var(--thumb-shadow)}
51
- ._5i7a13gf:disabled::-webkit-slider-runnable-track, ._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed}
53
+ ._5i7a13gf:disabled::-webkit-slider-runnable-track{cursor:not-allowed}
52
54
  ._9u3f2hce::-webkit-slider-runnable-track{background-color:var(--track-bg)}
53
55
  ._aoww1osq::-moz-range-progress{width:100%}
54
56
  ._b3fmtlke::-moz-range-track{cursor:pointer}
55
57
  ._bfhk18uv{background-color:initial}
56
- ._c3i116ss:active._c3i116ss:not(._c3i116ss:disabled){--thumb-bg:var(--ds-background-neutral-bold-pressed,#2684ff)}
58
+ ._d7w62hce::-moz-range-track{background-color:var(--track-bg)}
57
59
  ._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
58
- ._g6ix1eo5:hover._g6ix1eo5:not(._g6ix1eo5:disabled){--thumb-bg:var(--ds-background-neutral-bold-hovered,#0065ff)}
59
60
  ._j5dh13gf:disabled{cursor:not-allowed}
61
+ ._jxar1eo5:hover:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-hovered,#0065ff)}
60
62
  ._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
61
63
  ._r7637vkz::-moz-range-thumb{width:1pc}
62
64
  ._u98z7vkz::-webkit-slider-thumb{width:1pc}
65
+ ._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)}
63
66
  ._wstuglyw{-webkit-appearance:none}
67
+ ._ydqghkel:hover:not(:disabled){--track-bg:var(--ds-background-neutral-hovered,#dfe1e6)}
64
68
  ._yfyntlke::-webkit-slider-thumb{cursor:pointer}
65
- [dir=rtl] ._1pli1osq::-webkit-slider-runnable-track{background-position:100%}
66
69
  ._1hvw1o36:focus{outline-width:medium}
67
70
  ._49pcglyw:focus{outline-style:none}
68
71
  ._nt751r31:focus{outline-color:currentColor}
package/dist/es2019/styled.js CHANGED
@@ -1,41 +1,16 @@
1
- /* styled.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /* styled.tsx generated by @compiled/babel-plugin v0.33.0 */
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import "./styled.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { forwardRef } from 'react';
7
7
  import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
8
- const sliderThumbStyles = {
9
- boxSizing: 'border-box',
10
- width: 16,
11
- height: 16,
12
- border: 'none',
13
- background: `var(--thumb-bg, ${`var(--ds-background-neutral-bold, ${B400})`})`,
14
- // adapted from @atlaskit/focus-ring
15
- outline: 'solid 2px var(--thumb-border)',
16
- outlineOffset: '2px',
17
- borderRadius: "var(--ds-border-radius-circle, 50%)",
18
- boxShadow: 'var(--thumb-shadow)',
19
- cursor: 'pointer',
20
- // Different implicit behavior across browsers -> making it explicit.
21
- transition: 'background-color 0.2s ease-in-out'
22
- };
23
- const sliderTrackStyles = {
24
- borderRadius: 2,
25
- border: 0,
26
- cursor: 'pointer',
27
- height: 4,
28
- width: '100%',
29
- transition: 'background-color 0.2s ease-in-out'
30
- };
31
-
32
- // Styles are split per browser as they are implemented differently
33
- // Cannot consolidate as Chrome & Firefox don't recognise styles if they are grouped
34
- // with CSS selectors they don't recognise, e.g. &::-ms-thumb
35
- const browserStyles = {
36
- webkit: null,
37
- firefox: null
38
- };
8
+ // Styles are split up to avoid edge-cases with TS implementations between `css` and `cssMap` with some
9
+ // of these edge-case pseudo-selectors.
10
+ // Previously, in Emotion, these selectors weren't consolidated, eg. `&::webkit-thumb, &::moz-thumb`
11
+ // would not be parsed by either browser, but this may no longer be the case in Compiled
12
+ const webkitStyles = null;
13
+ const firefoxStyles = null;
39
14
  const baseStyles = null;
40
15
  const themeStyles = null;
41
16
 
@@ -56,7 +31,7 @@ export const Input = /*#__PURE__*/forwardRef((props, ref) => {
56
31
  '--track-fg-width': `${valuePercent}%`
57
32
  },
58
33
  ref: ref,
59
- className: ax(["_1bsb1osq _4t3i1ylp _bfhk18uv _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _1bdkusvi _u98z7vkz _1j707vkz _h2ksglyw _m9xw5udg _m8f8g56u _18k7yh40 _1kdl1q5u _4w431ik2 _yfyntlke _1yz62hjt _1sdcyjp0 _1cdcglyw _g6tdyh40 _10lridpf _18tdtlke _168l1y44 _1g2h1osq _vi4t2hjt _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _1pli1osq _5i7a13gf _1yte13gf", "_g4ppusvi _r7637vkz _1mn57vkz _1yq0glyw _sidy5udg _1rf3g56u _1kzeyh40 _108m1q5u _1oqe1ik2 _10o7tlke _1yeu2hjt _15raidpf _37ywyh40 _e8hnidpf _1ssqtlke _1kd21y44 _aoww1osq _1tcb2hjt _1yxt1w6o _1gvoyh40 _ru37idpf _b3fmtlke _142y1y44 _1f5t1osq _1nx42hjt _14pq2hce _1fov13gf _1vq313gf _34m613gf", "_14h11uvs _15dp1yrq _18lxyvsn _g6ix1eo5 _1a3ghkel _39bb1eo5 _c3i116ss _164c194a"])
34
+ className: ax(["_1bsb1osq _4t3i1ylp _bfhk18uv _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1q5u _m8f8g56u _1yz62hjt _1bdkusvi _u98z7vkz _1j707vkz _1esf5udg _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdyh40 _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1q5u _1rf3g56u _1yeu2hjt _g4ppusvi _r7637vkz _1mn57vkz _12el5udg _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywyh40 _1tcb2hjt _aoww1osq _1kd21y44 _vt2s1w6o _1ssqtlke _ru37idpf _1gvoyh40 _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11uvs _15dp1yrq _18lxyvsn _jxar1eo5 _ydqghkel _1jhc1eo5 _1ruc16ss _164c194a"])
60
35
  }));
61
36
  });
62
37
  Input.displayName = 'InputRange';
package/dist/esm/styled.compiled.css CHANGED
@@ -1,30 +1,71 @@
1
1
  ._108m1q5u::-moz-range-thumb{border-radius:var(--ds-border-radius-circle,50%)}
2
+ ._10lridpf::-webkit-slider-runnable-track{border:0}
2
3
  ._15raidpf::-moz-focus-outer{border:0}
4
+ ._1gvoyh40::-moz-range-track{border-radius:2px}
5
+ ._1kdl1q5u::-webkit-slider-thumb{border-radius:var(--ds-border-radius-circle,50%)}
6
+ ._1nx42hjt::-moz-range-track{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
3
7
  ._1rf3g56u::-moz-range-thumb{outline:solid 2px var(--thumb-border)}
8
+ ._1tcb2hjt::-moz-range-progress{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
4
9
  ._1yeu2hjt::-moz-range-thumb{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
5
10
  ._1yq0glyw::-moz-range-thumb{border:none}
6
- ._sidy4alp::-moz-range-thumb{background:var(--_171tp53)}
11
+ ._1yz62hjt::-webkit-slider-thumb{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
12
+ ._37ywyh40::-moz-range-progress{border-radius:2px}
13
+ ._e8hnidpf::-moz-range-progress{border:0}
14
+ ._g6tdyh40::-webkit-slider-runnable-track{border-radius:2px}
15
+ ._h2ksglyw::-webkit-slider-thumb{border:none}
16
+ ._m8f8g56u::-webkit-slider-thumb{outline:solid 2px var(--thumb-border)}
17
+ ._ru37idpf::-moz-range-track{border:0}
18
+ ._vi4t2hjt::-webkit-slider-runnable-track{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
7
19
  ._10o7tlke::-moz-range-thumb{cursor:pointer}
20
+ ._12el4alp::-moz-range-thumb{background-color:var(--_171tp53)}
21
+ ._142y1y44::-moz-range-track{height:4px}
8
22
  ._14h11gpr{--thumb-shadow:var(--_cghoza)}
9
23
  ._15dpptpz{--track-bg:var(--_19g1tth)}
24
+ ._168l1y44::-webkit-slider-runnable-track{height:4px}
25
+ ._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)}
10
26
  ._18lx1n8f{--track-fg:var(--_1eby16r)}
11
- ._1a3g1xpu:hover._1a3g1xpu:not(._1a3g1xpu:disabled){--track-bg:var(--_rf9ekb)}
27
+ ._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
28
+ ._1bdkusvi::-webkit-slider-thumb{box-sizing:border-box}
12
29
  ._1bsb1osq{width:100%}
13
- ._1fov13gf:disabled::-moz-range-progress, ._1vq313gf:disabled::-moz-range-thumb, ._34m613gf:disabled::-moz-range-track{cursor:not-allowed}
30
+ ._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
31
+ ._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
32
+ ._1esf4alp::-webkit-slider-thumb{background-color:var(--_171tp53)}
33
+ ._1f5t1osq::-moz-range-track{width:100%}
34
+ ._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed}
35
+ ._1g2h1osq::-webkit-slider-runnable-track{width:100%}
36
+ ._1g741hsc::-webkit-slider-runnable-track{background-image:linear-gradient(var(--track-fg),var(--track-fg))}
14
37
  ._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
15
- ._1kzeyh40::-moz-range-thumb{outline-offset:2px}
38
+ ._1j707vkz::-webkit-slider-thumb{height:1pc}
39
+ ._1jhcjiw3:hover:not(:disabled){--track-fg:var(--_14t3dsg)}
40
+ ._1kd21y44::-moz-range-progress{height:4px}
41
+ ._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)}
16
42
  ._1mn57vkz::-moz-range-thumb{height:1pc}
17
43
  ._1oqe1ik2::-moz-range-thumb{box-shadow:var(--thumb-shadow)}
18
- ._39bbjiw3:hover._39bbjiw3:not(._39bbjiw3:disabled){--track-fg:var(--_14t3dsg)}
44
+ ._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%}
45
+ ._1rucy2jz:active:not(:disabled){--thumb-bg:var(--_1pam7of)}
46
+ ._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)}
47
+ ._1ssqtlke::-moz-range-progress{cursor:pointer}
48
+ ._1vq313gf:disabled::-moz-range-thumb{cursor:not-allowed}
49
+ ._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed}
50
+ ._34m613gf:disabled::-moz-range-track{cursor:not-allowed}
19
51
  ._4t3i1ylp{height:40px}
20
- ._5i7a13gf:disabled::-webkit-slider-runnable-track, ._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed}
52
+ ._4w431ik2::-webkit-slider-thumb{box-shadow:var(--thumb-shadow)}
53
+ ._5i7a13gf:disabled::-webkit-slider-runnable-track{cursor:not-allowed}
54
+ ._9u3f2hce::-webkit-slider-runnable-track{background-color:var(--track-bg)}
55
+ ._aoww1osq::-moz-range-progress{width:100%}
56
+ ._b3fmtlke::-moz-range-track{cursor:pointer}
21
57
  ._bfhk18uv{background-color:initial}
22
- ._c3i1y2jz:active._c3i1y2jz:not(._c3i1y2jz:disabled){--thumb-bg:var(--_1pam7of)}
58
+ ._d7w62hce::-moz-range-track{background-color:var(--track-bg)}
23
59
  ._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
24
- ._g6ixjiw3:hover._g6ixjiw3:not(._g6ixjiw3:disabled){--thumb-bg:var(--_14t3dsg)}
25
60
  ._j5dh13gf:disabled{cursor:not-allowed}
61
+ ._jxarjiw3:hover:not(:disabled){--thumb-bg:var(--_14t3dsg)}
62
+ ._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
26
63
  ._r7637vkz::-moz-range-thumb{width:1pc}
64
+ ._u98z7vkz::-webkit-slider-thumb{width:1pc}
65
+ ._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)}
27
66
  ._wstuglyw{-webkit-appearance:none}
67
+ ._ydqg1xpu:hover:not(:disabled){--track-bg:var(--_rf9ekb)}
68
+ ._yfyntlke::-webkit-slider-thumb{cursor:pointer}
28
69
  ._1hvw1o36:focus{outline-width:medium}
29
70
  ._49pcglyw:focus{outline-style:none}
30
71
  ._nt751r31:focus{outline-color:currentColor}
package/dist/esm/styled.js CHANGED
@@ -1,7 +1,7 @@
1
- /* styled.tsx generated by @compiled/babel-plugin v0.32.2 */
1
+ /* styled.tsx generated by @compiled/babel-plugin v0.33.0 */
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
- import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
5
  var _excluded = ["valuePercent", "style"];
6
6
  import "./styled.compiled.css";
7
7
  import * as React from 'react';
@@ -10,37 +10,12 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
10
10
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
11
11
  import { forwardRef } from 'react';
12
12
  import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
13
- var sliderThumbStyles = {
14
- boxSizing: 'border-box',
15
- width: 16,
16
- height: 16,
17
- border: 'none',
18
- background: "var(--thumb-bg, ".concat("var(--ds-background-neutral-bold, ".concat(B400, ")"), ")"),
19
- // adapted from @atlaskit/focus-ring
20
- outline: 'solid 2px var(--thumb-border)',
21
- outlineOffset: '2px',
22
- borderRadius: "var(--ds-border-radius-circle, 50%)",
23
- boxShadow: 'var(--thumb-shadow)',
24
- cursor: 'pointer',
25
- // Different implicit behavior across browsers -> making it explicit.
26
- transition: 'background-color 0.2s ease-in-out'
27
- };
28
- var sliderTrackStyles = {
29
- borderRadius: 2,
30
- border: 0,
31
- cursor: 'pointer',
32
- height: 4,
33
- width: '100%',
34
- transition: 'background-color 0.2s ease-in-out'
35
- };
36
-
37
- // Styles are split per browser as they are implemented differently
38
- // Cannot consolidate as Chrome & Firefox don't recognise styles if they are grouped
39
- // with CSS selectors they don't recognise, e.g. &::-ms-thumb
40
- var browserStyles = {
41
- webkit: null,
42
- firefox: null
43
- };
13
+ // Styles are split up to avoid edge-cases with TS implementations between `css` and `cssMap` with some
14
+ // of these edge-case pseudo-selectors.
15
+ // Previously, in Emotion, these selectors weren't consolidated, eg. `&::webkit-thumb, &::moz-thumb`
16
+ // would not be parsed by either browser, but this may no longer be the case in Compiled
17
+ var webkitStyles = null;
18
+ var firefoxStyles = null;
44
19
  var baseStyles = null;
45
20
  var themeStyles = null;
46
21
 
@@ -54,7 +29,7 @@ export var Input = /*#__PURE__*/forwardRef(function (props, ref) {
54
29
  strippedProps = _objectWithoutProperties(props, _excluded);
55
30
  return /*#__PURE__*/React.createElement("input", _extends({}, strippedProps, {
56
31
  ref: ref,
57
- className: ax(["_1bsb1osq _4t3i1ylp _bfhk18uv _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _5i7a13gf _1yte13gf", "_g4ppusvi _r7637vkz _1mn57vkz _1yq0glyw _sidy4alp _1rf3g56u _1kzeyh40 _108m1q5u _1oqe1ik2 _10o7tlke _1yeu2hjt _15raidpf _1fov13gf _1vq313gf _34m613gf", "_14h11gpr _15dpptpz _18lx1n8f _g6ixjiw3 _1a3g1xpu _39bbjiw3 _c3i1y2jz _164c3zdg"]),
32
+ className: ax(["_1bsb1osq _4t3i1ylp _bfhk18uv _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1q5u _m8f8g56u _1yz62hjt _1bdkusvi _u98z7vkz _1j707vkz _1esf4alp _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdyh40 _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1q5u _1rf3g56u _1yeu2hjt _g4ppusvi _r7637vkz _1mn57vkz _12el4alp _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywyh40 _1tcb2hjt _aoww1osq _1kd21y44 _vt2s1w6o _1ssqtlke _ru37idpf _1gvoyh40 _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11gpr _15dpptpz _18lx1n8f _jxarjiw3 _ydqg1xpu _1jhcjiw3 _1rucy2jz _164c3zdg"]),
58
33
  style: _objectSpread(_objectSpread({}, {
59
34
  // We are creating a css variable to control the "progress" portion of the range input
60
35
  // This avoids us needing to create a new css class for each new percentage value
package/dist/types/styled.d.ts CHANGED
@@ -1,7 +1,3 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  /// <reference types="react" />
6
2
  /**
7
3
  * __Input__
package/dist/types-ts4.5/styled.d.ts CHANGED
@@ -1,8 +1,4 @@
1
1
  /// <reference types="react" />
2
- /**
3
- * @jsxRuntime classic
4
- * @jsx jsx
5
- */
6
2
  /**
7
3
  * __Input__
8
4
  * Internal-only styled input component.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/range",
3
- "version": "8.0.0",
3
+ "version": "8.0.1",
4
4
  "description": "A range lets users choose an approximate value on a slider.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
28
28
  "@atlaskit/css": "^0.7.0",
29
29
  "@atlaskit/ds-lib": "^3.3.0",
30
30
  "@atlaskit/theme": "^14.0.0",
31
- "@atlaskit/tokens": "^2.4.0",
31
+ "@atlaskit/tokens": "^2.5.0",
32
32
  "@babel/runtime": "^7.0.0",
33
33
  "@compiled/react": "^0.18.1"
34
34
  },
@@ -41,7 +41,7 @@
41
41
  "@af/visual-regression": "*",
42
42
  "@atlaskit/checkbox": "^15.2.0",
43
43
  "@atlaskit/ssr": "*",
44
- "@atlaskit/tooltip": "^18.9.0",
44
+ "@atlaskit/tooltip": "^19.0.0",
45
45
  "@atlaskit/visual-regression": "*",
46
46
  "@emotion/styled": "^11.0.0",
47
47
  "@testing-library/react": "^12.1.5",
package/tsconfig.json CHANGED
@@ -14,6 +14,5 @@
14
14
  "./example-helpers/**/*.tsx"
15
15
  ],
16
16
  "compilerOptions": {
17
- "baseUrl": "./"
18
17
  }
19
18
  }