@atlaskit/range 7.4.4 → 8.0.0

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 (16) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/afm-cc/tsconfig.json +4 -2
  3. package/afm-jira/tsconfig.json +29 -29
  4. package/afm-post-office/tsconfig.json +32 -29
  5. package/dist/cjs/styled.compiled.css +31 -0
  6. package/dist/cjs/styled.js +36 -105
  7. package/dist/es2019/styled.compiled.css +69 -0
  8. package/dist/es2019/styled.js +21 -141
  9. package/dist/esm/styled.compiled.css +31 -0
  10. package/dist/esm/styled.js +34 -107
  11. package/dist/types/range.d.ts +1 -1
  12. package/dist/types-ts4.5/range.d.ts +1 -1
  13. package/package.json +13 -9
  14. package/range/package.json +3 -1
  15. package/styled/package.json +3 -1
  16. package/theme/package.json +3 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @atlaskit/range
2
2
 
3
+ ## 8.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#172418](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/172418)
8
+ [`8a5e8d3d28432`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8a5e8d3d28432) -
9
+ Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
10
+ the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
11
+ use this version of `@atlaskit/range`, you will need to ensure that your bundler is configured to
12
+ handle `.css` imports correctly. Most bundlers come with built-in support for `.css` imports, so
13
+ you may not need to do anything. If you are using a different bundler, please refer to the
14
+ documentation for that bundler to understand how to handle `.css` imports. For more information on
15
+ the migration, please refer to
16
+ [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
17
+
18
+ ## 7.4.5
19
+
20
+ ### Patch Changes
21
+
22
+ - [#165531](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165531)
23
+ [`57f451bda8919`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57f451bda8919) -
24
+ Adds side-effect config to support Compiled css extraction in third-party apps
25
+
3
26
  ## 7.4.4
4
27
 
5
28
  ### Patch Changes
package/afm-cc/tsconfig.json CHANGED
@@ -5,8 +5,7 @@
5
5
  "target": "es5",
6
6
  "composite": true,
7
7
  "outDir": "../dist",
8
- "rootDir": "../",
9
- "baseUrl": "../"
8
+ "rootDir": "../"
10
9
  },
11
10
  "include": [
12
11
  "../src/**/*.ts",
@@ -18,6 +17,9 @@
18
17
  "../src/**/test.*"
19
18
  ],
20
19
  "references": [
20
+ {
21
+ "path": "../../css/afm-cc/tsconfig.json"
22
+ },
21
23
  {
22
24
  "path": "../../ds-lib/afm-cc/tsconfig.json"
23
25
  },
package/afm-jira/tsconfig.json CHANGED
@@ -1,30 +1,30 @@
1
1
  {
2
- "extends": "../../../../tsconfig.entry-points.jira.json",
3
- "compilerOptions": {
4
- "declaration": true,
5
- "target": "es5",
6
- "outDir": "../../../../../tsDist/@atlaskit__range/app",
7
- "composite": true,
8
- "rootDir": "../"
9
- },
10
- "include": [
11
- "../src/**/*.ts",
12
- "../src/**/*.tsx"
13
- ],
14
- "exclude": [
15
- "../src/**/__tests__/*",
16
- "../src/**/*.test.*",
17
- "../src/**/test.*"
18
- ],
19
- "references": [
20
- {
21
- "path": "../../ds-lib/afm-jira/tsconfig.json"
22
- },
23
- {
24
- "path": "../../theme/afm-jira/tsconfig.json"
25
- },
26
- {
27
- "path": "../../tokens/afm-jira/tsconfig.json"
28
- }
29
- ]
30
- }
2
+ "extends": "../../../../tsconfig.entry-points.jira.json",
3
+ "compilerOptions": {
4
+ "declaration": true,
5
+ "target": "es5",
6
+ "outDir": "../../../../../tsDist/@atlaskit__range/app",
7
+ "rootDir": "../",
8
+ "composite": true
9
+ },
10
+ "include": [
11
+ "../src/**/*.ts",
12
+ "../src/**/*.tsx"
13
+ ],
14
+ "exclude": [
15
+ "../src/**/__tests__/*",
16
+ "../src/**/*.test.*",
17
+ "../src/**/test.*"
18
+ ],
19
+ "references": [
20
+ {
21
+ "path": "../../ds-lib/afm-jira/tsconfig.json"
22
+ },
23
+ {
24
+ "path": "../../theme/afm-jira/tsconfig.json"
25
+ },
26
+ {
27
+ "path": "../../tokens/afm-jira/tsconfig.json"
28
+ }
29
+ ]
30
+ }
package/afm-post-office/tsconfig.json CHANGED
@@ -1,30 +1,33 @@
1
1
  {
2
- "extends": "../../../../tsconfig.entry-points.post-office.json",
3
- "compilerOptions": {
4
- "declaration": true,
5
- "target": "es5",
6
- "outDir": "../../../../../tsDist/@atlaskit__range/app",
7
- "composite": true,
8
- "rootDir": "../"
9
- },
10
- "include": [
11
- "../src/**/*.ts",
12
- "../src/**/*.tsx"
13
- ],
14
- "exclude": [
15
- "../src/**/__tests__/*",
16
- "../src/**/*.test.*",
17
- "../src/**/test.*"
18
- ],
19
- "references": [
20
- {
21
- "path": "../../ds-lib/afm-post-office/tsconfig.json"
22
- },
23
- {
24
- "path": "../../theme/afm-post-office/tsconfig.json"
25
- },
26
- {
27
- "path": "../../tokens/afm-post-office/tsconfig.json"
28
- }
29
- ]
30
- }
2
+ "extends": "../../../../tsconfig.entry-points.post-office.json",
3
+ "compilerOptions": {
4
+ "declaration": true,
5
+ "target": "es5",
6
+ "outDir": "../../../../../post-office/tsDist/@atlaskit__range/app",
7
+ "rootDir": "../",
8
+ "composite": true
9
+ },
10
+ "include": [
11
+ "../src/**/*.ts",
12
+ "../src/**/*.tsx"
13
+ ],
14
+ "exclude": [
15
+ "../src/**/__tests__/*",
16
+ "../src/**/*.test.*",
17
+ "../src/**/test.*"
18
+ ],
19
+ "references": [
20
+ {
21
+ "path": "../../css/afm-post-office/tsconfig.json"
22
+ },
23
+ {
24
+ "path": "../../ds-lib/afm-post-office/tsconfig.json"
25
+ },
26
+ {
27
+ "path": "../../theme/afm-post-office/tsconfig.json"
28
+ },
29
+ {
30
+ "path": "../../tokens/afm-post-office/tsconfig.json"
31
+ }
32
+ ]
33
+ }
package/dist/cjs/styled.compiled.css ADDED
@@ -0,0 +1,31 @@
1
+ ._108m1q5u::-moz-range-thumb{border-radius:var(--ds-border-radius-circle,50%)}
2
+ ._15raidpf::-moz-focus-outer{border:0}
3
+ ._1rf3g56u::-moz-range-thumb{outline:solid 2px var(--thumb-border)}
4
+ ._1yeu2hjt::-moz-range-thumb{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
5
+ ._1yq0glyw::-moz-range-thumb{border:none}
6
+ ._sidy4alp::-moz-range-thumb{background:var(--_171tp53)}
7
+ ._10o7tlke::-moz-range-thumb{cursor:pointer}
8
+ ._14h11gpr{--thumb-shadow:var(--_cghoza)}
9
+ ._15dpptpz{--track-bg:var(--_19g1tth)}
10
+ ._18lx1n8f{--track-fg:var(--_1eby16r)}
11
+ ._1a3g1xpu:hover._1a3g1xpu:not(._1a3g1xpu:disabled){--track-bg:var(--_rf9ekb)}
12
+ ._1bsb1osq{width:100%}
13
+ ._1fov13gf:disabled::-moz-range-progress, ._1vq313gf:disabled::-moz-range-thumb, ._34m613gf:disabled::-moz-range-track{cursor:not-allowed}
14
+ ._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
15
+ ._1kzeyh40::-moz-range-thumb{outline-offset:2px}
16
+ ._1mn57vkz::-moz-range-thumb{height:1pc}
17
+ ._1oqe1ik2::-moz-range-thumb{box-shadow:var(--thumb-shadow)}
18
+ ._39bbjiw3:hover._39bbjiw3:not(._39bbjiw3:disabled){--track-fg:var(--_14t3dsg)}
19
+ ._4t3i1ylp{height:40px}
20
+ ._5i7a13gf:disabled::-webkit-slider-runnable-track, ._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed}
21
+ ._bfhk18uv{background-color:initial}
22
+ ._c3i1y2jz:active._c3i1y2jz:not(._c3i1y2jz:disabled){--thumb-bg:var(--_1pam7of)}
23
+ ._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
24
+ ._g6ixjiw3:hover._g6ixjiw3:not(._g6ixjiw3:disabled){--thumb-bg:var(--_14t3dsg)}
25
+ ._j5dh13gf:disabled{cursor:not-allowed}
26
+ ._r7637vkz::-moz-range-thumb{width:1pc}
27
+ ._wstuglyw{-webkit-appearance:none}
28
+ ._1hvw1o36:focus{outline-width:medium}
29
+ ._49pcglyw:focus{outline-style:none}
30
+ ._nt751r31:focus{outline-color:currentColor}
31
+ ._164c3zdg:focus-visible{--thumb-border:var(--_xjqa3d)}
package/dist/cjs/styled.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* styled.tsx generated by @compiled/babel-plugin v0.32.2 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,134 +7,52 @@ Object.defineProperty(exports, "__esModule", {
6
7
  value: true
7
8
  });
8
9
  exports.Input = void 0;
10
+ require("./styled.compiled.css");
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var React = _react;
13
+ var _runtime = require("@compiled/react/runtime");
9
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
15
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
16
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
12
- var _react = require("react");
13
- var _react2 = require("@emotion/react");
14
- var theme = _interopRequireWildcard(require("./theme"));
17
+ var _colors = require("@atlaskit/theme/colors");
15
18
  var _excluded = ["valuePercent", "style"];
16
- var _hoverNotDisabled, _css;
17
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); }
18
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; }
19
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; }
20
- 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; } /**
21
- * @jsxRuntime classic
22
- * @jsx jsx
23
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
24
- var VAR_THUMB_BORDER_COLOR = '--thumb-border';
25
- var VAR_THUMB_SHADOW = '--thumb-shadow';
26
- var VAR_THUMB_BACKGROUND_COLOR = '--thumb-bg';
27
- var VAR_TRACK_BACKGROUND_COLOR = '--track-bg';
28
- var VAR_TRACK_FOREGROUND_COLOR = '--track-fg';
29
- var VAR_TRACK_FOREGROUND_WIDTH = '--track-fg-width';
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; }
30
23
  var sliderThumbStyles = {
31
24
  boxSizing: 'border-box',
32
- width: theme.thumb.size,
33
- height: theme.thumb.size,
25
+ width: 16,
26
+ height: 16,
34
27
  border: 'none',
35
- background: "var(".concat(VAR_THUMB_BACKGROUND_COLOR, ", ").concat(theme.thumb.background.default, ")"),
28
+ background: "var(--thumb-bg, ".concat("var(--ds-background-neutral-bold, ".concat(_colors.B400, ")"), ")"),
36
29
  // adapted from @atlaskit/focus-ring
37
- outline: "solid 2px var(".concat(VAR_THUMB_BORDER_COLOR, ")"),
30
+ outline: 'solid 2px var(--thumb-border)',
38
31
  outlineOffset: '2px',
39
32
  borderRadius: "var(--ds-border-radius-circle, 50%)",
40
- boxShadow: "var(".concat(VAR_THUMB_SHADOW, ")"),
33
+ boxShadow: 'var(--thumb-shadow)',
41
34
  cursor: 'pointer',
42
35
  // Different implicit behavior across browsers -> making it explicit.
43
- transition: "background-color ".concat(theme.transitionDuration, " ease-in-out")
36
+ transition: 'background-color 0.2s ease-in-out'
44
37
  };
45
38
  var sliderTrackStyles = {
46
- borderRadius: theme.track.borderRadius,
39
+ borderRadius: 2,
47
40
  border: 0,
48
41
  cursor: 'pointer',
49
- height: theme.track.height,
42
+ height: 4,
50
43
  width: '100%',
51
- transition: "background-color ".concat(theme.transitionDuration, " ease-in-out")
44
+ transition: 'background-color 0.2s ease-in-out'
52
45
  };
53
46
 
54
47
  // Styles are split per browser as they are implemented differently
55
48
  // Cannot consolidate as Chrome & Firefox don't recognise styles if they are grouped
56
49
  // with CSS selectors they don't recognise, e.g. &::-ms-thumb
57
50
  var browserStyles = {
58
- webkit: (0, _react2.css)({
59
- WebkitAppearance: 'none',
60
- // Hides the slider so that custom slider can be made
61
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
62
- '::-webkit-slider-thumb': _objectSpread(_objectSpread({}, sliderThumbStyles), {}, {
63
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
64
- marginBlockStart: -(theme.thumb.size - theme.track.height) / 2,
65
- WebkitAppearance: 'none'
66
- }),
67
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
68
- '::-webkit-slider-runnable-track': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
69
- /**
70
- * Webkit does not have separate properties for the background/foreground like firefox.
71
- * Instead we use background layering:
72
- * - The gray background is a simple background color.
73
- * - The blue foreground is a 'gradient' (to create a color block) that is sized to the progress.
74
- *
75
- * Individual properties have been used over the `background` shorthand for readability.
76
- */
77
- backgroundColor: "var(".concat(VAR_TRACK_BACKGROUND_COLOR, ")"),
78
- backgroundImage: "linear-gradient(var(".concat(VAR_TRACK_FOREGROUND_COLOR, "), var(").concat(VAR_TRACK_FOREGROUND_COLOR, "))"),
79
- backgroundRepeat: 'no-repeat',
80
- backgroundSize: "var(".concat(VAR_TRACK_FOREGROUND_WIDTH, ") 100%"),
81
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
82
- '[dir="rtl"] &': {
83
- backgroundPosition: 'right'
84
- }
85
- }),
86
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
87
- ':disabled': {
88
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
89
- '::-webkit-slider-thumb, ::-webkit-slider-runnable-track': {
90
- cursor: 'not-allowed'
91
- }
92
- }
93
- }),
94
- firefox: (0, _react2.css)({
95
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
96
- '::-moz-range-thumb': sliderThumbStyles,
97
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
98
- '::-moz-focus-outer': {
99
- border: 0
100
- },
101
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
102
- '::-moz-range-progress': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
103
- background: "var(".concat(VAR_TRACK_FOREGROUND_COLOR, ")")
104
- }),
105
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
106
- '::-moz-range-track': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
107
- background: "var(".concat(VAR_TRACK_BACKGROUND_COLOR, ")")
108
- }),
109
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
110
- ':disabled': {
111
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
112
- '::-moz-range-thumb, ::-moz-range-progress, ::-moz-range-track': {
113
- cursor: 'not-allowed'
114
- }
115
- }
116
- })
51
+ webkit: null,
52
+ firefox: null
117
53
  };
118
- var baseStyles = (0, _react2.css)({
119
- width: '100%',
120
- // Has a fixed width by default
121
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
122
- height: theme.input.height,
123
- // Otherwise thumb will collide with previous box element
124
- background: 'transparent',
125
- // Otherwise white
126
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
127
- ':focus': {
128
- outline: 'none'
129
- },
130
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
131
- ':disabled': {
132
- cursor: 'not-allowed',
133
- opacity: "var(--ds-opacity-disabled, 0.4)"
134
- }
135
- });
136
- var themeStyles = (0, _react2.css)((_css = {}, (0, _defineProperty2.default)(_css, VAR_THUMB_SHADOW, theme.thumb.boxShadow.default), (0, _defineProperty2.default)(_css, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.default), (0, _defineProperty2.default)(_css, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.default), (0, _defineProperty2.default)(_css, ':hover:not(:disabled)', (_hoverNotDisabled = {}, (0, _defineProperty2.default)(_hoverNotDisabled, VAR_THUMB_BACKGROUND_COLOR, theme.thumb.background.hovered), (0, _defineProperty2.default)(_hoverNotDisabled, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.hovered), (0, _defineProperty2.default)(_hoverNotDisabled, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.hovered), _hoverNotDisabled)), (0, _defineProperty2.default)(_css, ':active:not(:disabled)', (0, _defineProperty2.default)({}, VAR_THUMB_BACKGROUND_COLOR, theme.thumb.background.pressed)), (0, _defineProperty2.default)(_css, ':focus-visible', (0, _defineProperty2.default)({}, VAR_THUMB_BORDER_COLOR, theme.thumb.borderColor.focused)), _css));
54
+ var baseStyles = null;
55
+ var themeStyles = null;
137
56
 
138
57
  /**
139
58
  * __Input__
@@ -143,11 +62,23 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (props,
143
62
  var valuePercent = props.valuePercent,
144
63
  style = props.style,
145
64
  strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
146
- return (0, _react2.jsx)("input", (0, _extends2.default)({}, strippedProps, {
147
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
148
- style: (0, _defineProperty2.default)({}, VAR_TRACK_FOREGROUND_WIDTH, "".concat(valuePercent, "%")),
65
+ return /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, strippedProps, {
149
66
  ref: ref,
150
- css: [baseStyles, browserStyles.webkit, browserStyles.firefox, themeStyles]
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"]),
68
+ style: _objectSpread(_objectSpread({}, {
69
+ // We are creating a css variable to control the "progress" portion of the range input
70
+ // This avoids us needing to create a new css class for each new percentage value
71
+ '--track-fg-width': "".concat(valuePercent, "%")
72
+ }), {}, {
73
+ "--_171tp53": (0, _runtime.ix)("var(--thumb-bg, ".concat("var(--ds-background-neutral-bold, ".concat(_colors.B400, ")"), ")")),
74
+ "--_cghoza": (0, _runtime.ix)("var(--ds-UNSAFE-transparent, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")),
75
+ "--_19g1tth": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N30, ")")),
76
+ "--_1eby16r": (0, _runtime.ix)("var(--ds-background-neutral-bold, ".concat(_colors.B400, ")")),
77
+ "--_14t3dsg": (0, _runtime.ix)("var(--ds-background-neutral-bold-hovered, ".concat(_colors.B300, ")")),
78
+ "--_rf9ekb": (0, _runtime.ix)("var(--ds-background-neutral-hovered, ".concat(_colors.N40, ")")),
79
+ "--_1pam7of": (0, _runtime.ix)("var(--ds-background-neutral-bold-pressed, ".concat(_colors.B200, ")")),
80
+ "--_xjqa3d": (0, _runtime.ix)("var(--ds-border-focused, ".concat(_colors.B200, ")"))
81
+ })
151
82
  }));
152
83
  });
153
84
  Input.displayName = 'InputRange';
package/dist/es2019/styled.compiled.css ADDED
@@ -0,0 +1,69 @@
1
+ ._108m1q5u::-moz-range-thumb{border-radius:var(--ds-border-radius-circle,50%)}
2
+ ._10lridpf::-webkit-slider-runnable-track{border:0}
3
+ ._14pq2hce::-moz-range-track{background:var(--track-bg)}
4
+ ._15raidpf::-moz-focus-outer{border:0}
5
+ ._1gvoyh40::-moz-range-track{border-radius:2px}
6
+ ._1kdl1q5u::-webkit-slider-thumb{border-radius:var(--ds-border-radius-circle,50%)}
7
+ ._1nx42hjt::-moz-range-track{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
8
+ ._1rf3g56u::-moz-range-thumb{outline:solid 2px var(--thumb-border)}
9
+ ._1tcb2hjt::-moz-range-progress{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
10
+ ._1yeu2hjt::-moz-range-thumb{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
11
+ ._1yq0glyw::-moz-range-thumb{border:none}
12
+ ._1yxt1w6o::-moz-range-progress{background:var(--track-fg)}
13
+ ._1yz62hjt::-webkit-slider-thumb{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
14
+ ._37ywyh40::-moz-range-progress{border-radius:2px}
15
+ ._e8hnidpf::-moz-range-progress{border:0}
16
+ ._g6tdyh40::-webkit-slider-runnable-track{border-radius:2px}
17
+ ._h2ksglyw::-webkit-slider-thumb{border:none}
18
+ ._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
+ ._ru37idpf::-moz-range-track{border:0}
21
+ ._sidy5udg::-moz-range-thumb{background:var(--thumb-bg,var(--ds-background-neutral-bold,#0052cc))}
22
+ ._vi4t2hjt::-webkit-slider-runnable-track{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
23
+ ._10o7tlke::-moz-range-thumb{cursor:pointer}
24
+ ._142y1y44::-moz-range-track{height:4px}
25
+ ._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
+ ._15dp1yrq{--track-bg:var(--ds-background-neutral,#ebecf0)}
27
+ ._168l1y44::-webkit-slider-runnable-track{height:4px}
28
+ ._18k7yh40::-webkit-slider-thumb{outline-offset:2px}
29
+ ._18lxyvsn{--track-fg:var(--ds-background-neutral-bold,#0052cc)}
30
+ ._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
31
+ ._1a3ghkel:hover._1a3ghkel:not(._1a3ghkel:disabled){--track-bg:var(--ds-background-neutral-hovered,#dfe1e6)}
32
+ ._1bdkusvi::-webkit-slider-thumb{box-sizing:border-box}
33
+ ._1bsb1osq{width:100%}
34
+ ._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
35
+ ._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
36
+ ._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}
38
+ ._1g2h1osq::-webkit-slider-runnable-track{width:100%}
39
+ ._1g741hsc::-webkit-slider-runnable-track{background-image:linear-gradient(var(--track-fg),var(--track-fg))}
40
+ ._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
41
+ ._1j707vkz::-webkit-slider-thumb{height:1pc}
42
+ ._1kd21y44::-moz-range-progress{height:4px}
43
+ ._1kzeyh40::-moz-range-thumb{outline-offset:2px}
44
+ ._1mn57vkz::-moz-range-thumb{height:1pc}
45
+ ._1oqe1ik2::-moz-range-thumb{box-shadow:var(--thumb-shadow)}
46
+ ._1sdcyjp0::-webkit-slider-thumb{margin-block-start:-6px}
47
+ ._1ssqtlke::-moz-range-progress{cursor:pointer}
48
+ ._39bb1eo5:hover._39bb1eo5:not(._39bb1eo5:disabled){--track-fg:var(--ds-background-neutral-bold-hovered,#0065ff)}
49
+ ._4t3i1ylp{height:40px}
50
+ ._4w431ik2::-webkit-slider-thumb{box-shadow:var(--thumb-shadow)}
51
+ ._5i7a13gf:disabled::-webkit-slider-runnable-track, ._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed}
52
+ ._9u3f2hce::-webkit-slider-runnable-track{background-color:var(--track-bg)}
53
+ ._aoww1osq::-moz-range-progress{width:100%}
54
+ ._b3fmtlke::-moz-range-track{cursor:pointer}
55
+ ._bfhk18uv{background-color:initial}
56
+ ._c3i116ss:active._c3i116ss:not(._c3i116ss:disabled){--thumb-bg:var(--ds-background-neutral-bold-pressed,#2684ff)}
57
+ ._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
+ ._j5dh13gf:disabled{cursor:not-allowed}
60
+ ._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
61
+ ._r7637vkz::-moz-range-thumb{width:1pc}
62
+ ._u98z7vkz::-webkit-slider-thumb{width:1pc}
63
+ ._wstuglyw{-webkit-appearance:none}
64
+ ._yfyntlke::-webkit-slider-thumb{cursor:pointer}
65
+ [dir=rtl] ._1pli1osq::-webkit-slider-runnable-track{background-position:100%}
66
+ ._1hvw1o36:focus{outline-width:medium}
67
+ ._49pcglyw:focus{outline-style:none}
68
+ ._nt751r31:focus{outline-color:currentColor}
69
+ ._164c194a:focus-visible{--thumb-border:var(--ds-border-focused,#2684ff)}
package/dist/es2019/styled.js CHANGED
@@ -1,161 +1,43 @@
1
+ /* styled.tsx generated by @compiled/babel-plugin v0.32.2 */
1
2
  import _extends from "@babel/runtime/helpers/extends";
2
- /**
3
- * @jsxRuntime classic
4
- * @jsx jsx
5
- */
6
-
3
+ import "./styled.compiled.css";
4
+ import * as React from 'react';
5
+ import { ax, ix } from "@compiled/react/runtime";
7
6
  import { forwardRef } from 'react';
8
-
9
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
- import { css, jsx } from '@emotion/react';
11
- import * as theme from './theme';
12
- const VAR_THUMB_BORDER_COLOR = '--thumb-border';
13
- const VAR_THUMB_SHADOW = '--thumb-shadow';
14
- const VAR_THUMB_BACKGROUND_COLOR = '--thumb-bg';
15
- const VAR_TRACK_BACKGROUND_COLOR = '--track-bg';
16
- const VAR_TRACK_FOREGROUND_COLOR = '--track-fg';
17
- const VAR_TRACK_FOREGROUND_WIDTH = '--track-fg-width';
7
+ import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
18
8
  const sliderThumbStyles = {
19
9
  boxSizing: 'border-box',
20
- width: theme.thumb.size,
21
- height: theme.thumb.size,
10
+ width: 16,
11
+ height: 16,
22
12
  border: 'none',
23
- background: `var(${VAR_THUMB_BACKGROUND_COLOR}, ${theme.thumb.background.default})`,
13
+ background: `var(--thumb-bg, ${`var(--ds-background-neutral-bold, ${B400})`})`,
24
14
  // adapted from @atlaskit/focus-ring
25
- outline: `solid 2px var(${VAR_THUMB_BORDER_COLOR})`,
15
+ outline: 'solid 2px var(--thumb-border)',
26
16
  outlineOffset: '2px',
27
17
  borderRadius: "var(--ds-border-radius-circle, 50%)",
28
- boxShadow: `var(${VAR_THUMB_SHADOW})`,
18
+ boxShadow: 'var(--thumb-shadow)',
29
19
  cursor: 'pointer',
30
20
  // Different implicit behavior across browsers -> making it explicit.
31
- transition: `background-color ${theme.transitionDuration} ease-in-out`
21
+ transition: 'background-color 0.2s ease-in-out'
32
22
  };
33
23
  const sliderTrackStyles = {
34
- borderRadius: theme.track.borderRadius,
24
+ borderRadius: 2,
35
25
  border: 0,
36
26
  cursor: 'pointer',
37
- height: theme.track.height,
27
+ height: 4,
38
28
  width: '100%',
39
- transition: `background-color ${theme.transitionDuration} ease-in-out`
29
+ transition: 'background-color 0.2s ease-in-out'
40
30
  };
41
31
 
42
32
  // Styles are split per browser as they are implemented differently
43
33
  // Cannot consolidate as Chrome & Firefox don't recognise styles if they are grouped
44
34
  // with CSS selectors they don't recognise, e.g. &::-ms-thumb
45
35
  const browserStyles = {
46
- webkit: css({
47
- WebkitAppearance: 'none',
48
- // Hides the slider so that custom slider can be made
49
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
50
- '::-webkit-slider-thumb': {
51
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
52
- ...sliderThumbStyles,
53
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
54
- marginBlockStart: -(theme.thumb.size - theme.track.height) / 2,
55
- WebkitAppearance: 'none'
56
- },
57
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
58
- '::-webkit-slider-runnable-track': {
59
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
60
- ...sliderTrackStyles,
61
- /**
62
- * Webkit does not have separate properties for the background/foreground like firefox.
63
- * Instead we use background layering:
64
- * - The gray background is a simple background color.
65
- * - The blue foreground is a 'gradient' (to create a color block) that is sized to the progress.
66
- *
67
- * Individual properties have been used over the `background` shorthand for readability.
68
- */
69
- backgroundColor: `var(${VAR_TRACK_BACKGROUND_COLOR})`,
70
- backgroundImage: `linear-gradient(var(${VAR_TRACK_FOREGROUND_COLOR}), var(${VAR_TRACK_FOREGROUND_COLOR}))`,
71
- backgroundRepeat: 'no-repeat',
72
- backgroundSize: `var(${VAR_TRACK_FOREGROUND_WIDTH}) 100%`,
73
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
74
- '[dir="rtl"] &': {
75
- backgroundPosition: 'right'
76
- }
77
- },
78
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
79
- ':disabled': {
80
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
81
- '::-webkit-slider-thumb, ::-webkit-slider-runnable-track': {
82
- cursor: 'not-allowed'
83
- }
84
- }
85
- }),
86
- firefox: css({
87
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
88
- '::-moz-range-thumb': sliderThumbStyles,
89
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
90
- '::-moz-focus-outer': {
91
- border: 0
92
- },
93
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
94
- '::-moz-range-progress': {
95
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
96
- ...sliderTrackStyles,
97
- background: `var(${VAR_TRACK_FOREGROUND_COLOR})`
98
- },
99
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
100
- '::-moz-range-track': {
101
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
102
- ...sliderTrackStyles,
103
- background: `var(${VAR_TRACK_BACKGROUND_COLOR})`
104
- },
105
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
106
- ':disabled': {
107
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
108
- '::-moz-range-thumb, ::-moz-range-progress, ::-moz-range-track': {
109
- cursor: 'not-allowed'
110
- }
111
- }
112
- })
36
+ webkit: null,
37
+ firefox: null
113
38
  };
114
- const baseStyles = css({
115
- width: '100%',
116
- // Has a fixed width by default
117
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
118
- height: theme.input.height,
119
- // Otherwise thumb will collide with previous box element
120
- background: 'transparent',
121
- // Otherwise white
122
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
123
- ':focus': {
124
- outline: 'none'
125
- },
126
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
127
- ':disabled': {
128
- cursor: 'not-allowed',
129
- opacity: "var(--ds-opacity-disabled, 0.4)"
130
- }
131
- });
132
- const themeStyles = css({
133
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
134
- [VAR_THUMB_SHADOW]: theme.thumb.boxShadow.default,
135
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
136
- [VAR_TRACK_BACKGROUND_COLOR]: theme.track.background.default,
137
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
138
- [VAR_TRACK_FOREGROUND_COLOR]: theme.track.foreground.default,
139
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
140
- ':hover:not(:disabled)': {
141
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
142
- [VAR_THUMB_BACKGROUND_COLOR]: theme.thumb.background.hovered,
143
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
144
- [VAR_TRACK_BACKGROUND_COLOR]: theme.track.background.hovered,
145
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
146
- [VAR_TRACK_FOREGROUND_COLOR]: theme.track.foreground.hovered
147
- },
148
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
149
- ':active:not(:disabled)': {
150
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
151
- [VAR_THUMB_BACKGROUND_COLOR]: theme.thumb.background.pressed
152
- },
153
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
154
- ':focus-visible': {
155
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
156
- [VAR_THUMB_BORDER_COLOR]: theme.thumb.borderColor.focused
157
- }
158
- });
39
+ const baseStyles = null;
40
+ const themeStyles = null;
159
41
 
160
42
  /**
161
43
  * __Input__
@@ -167,16 +49,14 @@ export const Input = /*#__PURE__*/forwardRef((props, ref) => {
167
49
  style,
168
50
  ...strippedProps
169
51
  } = props;
170
- return jsx("input", _extends({}, strippedProps, {
171
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
52
+ return /*#__PURE__*/React.createElement("input", _extends({}, strippedProps, {
172
53
  style: {
173
54
  // We are creating a css variable to control the "progress" portion of the range input
174
55
  // This avoids us needing to create a new css class for each new percentage value
175
- [VAR_TRACK_FOREGROUND_WIDTH]: `${valuePercent}%`
176
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
56
+ '--track-fg-width': `${valuePercent}%`
177
57
  },
178
58
  ref: ref,
179
- css: [baseStyles, browserStyles.webkit, browserStyles.firefox, themeStyles]
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"])
180
60
  }));
181
61
  });
182
62
  Input.displayName = 'InputRange';
package/dist/esm/styled.compiled.css ADDED
@@ -0,0 +1,31 @@
1
+ ._108m1q5u::-moz-range-thumb{border-radius:var(--ds-border-radius-circle,50%)}
2
+ ._15raidpf::-moz-focus-outer{border:0}
3
+ ._1rf3g56u::-moz-range-thumb{outline:solid 2px var(--thumb-border)}
4
+ ._1yeu2hjt::-moz-range-thumb{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
5
+ ._1yq0glyw::-moz-range-thumb{border:none}
6
+ ._sidy4alp::-moz-range-thumb{background:var(--_171tp53)}
7
+ ._10o7tlke::-moz-range-thumb{cursor:pointer}
8
+ ._14h11gpr{--thumb-shadow:var(--_cghoza)}
9
+ ._15dpptpz{--track-bg:var(--_19g1tth)}
10
+ ._18lx1n8f{--track-fg:var(--_1eby16r)}
11
+ ._1a3g1xpu:hover._1a3g1xpu:not(._1a3g1xpu:disabled){--track-bg:var(--_rf9ekb)}
12
+ ._1bsb1osq{width:100%}
13
+ ._1fov13gf:disabled::-moz-range-progress, ._1vq313gf:disabled::-moz-range-thumb, ._34m613gf:disabled::-moz-range-track{cursor:not-allowed}
14
+ ._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
15
+ ._1kzeyh40::-moz-range-thumb{outline-offset:2px}
16
+ ._1mn57vkz::-moz-range-thumb{height:1pc}
17
+ ._1oqe1ik2::-moz-range-thumb{box-shadow:var(--thumb-shadow)}
18
+ ._39bbjiw3:hover._39bbjiw3:not(._39bbjiw3:disabled){--track-fg:var(--_14t3dsg)}
19
+ ._4t3i1ylp{height:40px}
20
+ ._5i7a13gf:disabled::-webkit-slider-runnable-track, ._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed}
21
+ ._bfhk18uv{background-color:initial}
22
+ ._c3i1y2jz:active._c3i1y2jz:not(._c3i1y2jz:disabled){--thumb-bg:var(--_1pam7of)}
23
+ ._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
24
+ ._g6ixjiw3:hover._g6ixjiw3:not(._g6ixjiw3:disabled){--thumb-bg:var(--_14t3dsg)}
25
+ ._j5dh13gf:disabled{cursor:not-allowed}
26
+ ._r7637vkz::-moz-range-thumb{width:1pc}
27
+ ._wstuglyw{-webkit-appearance:none}
28
+ ._1hvw1o36:focus{outline-width:medium}
29
+ ._49pcglyw:focus{outline-style:none}
30
+ ._nt751r31:focus{outline-color:currentColor}
31
+ ._164c3zdg:focus-visible{--thumb-border:var(--_xjqa3d)}
package/dist/esm/styled.js CHANGED
@@ -1,133 +1,48 @@
1
+ /* styled.tsx generated by @compiled/babel-plugin v0.32.2 */
1
2
  import _extends from "@babel/runtime/helpers/extends";
2
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
4
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
5
  var _excluded = ["valuePercent", "style"];
5
- var _hoverNotDisabled, _css;
6
+ import "./styled.compiled.css";
7
+ import * as React from 'react';
8
+ import { ax, ix } from "@compiled/react/runtime";
6
9
  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; }
7
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; }
8
- /**
9
- * @jsxRuntime classic
10
- * @jsx jsx
11
- */
12
-
13
11
  import { forwardRef } from 'react';
14
-
15
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
16
- import { css, jsx } from '@emotion/react';
17
- import * as theme from './theme';
18
- var VAR_THUMB_BORDER_COLOR = '--thumb-border';
19
- var VAR_THUMB_SHADOW = '--thumb-shadow';
20
- var VAR_THUMB_BACKGROUND_COLOR = '--thumb-bg';
21
- var VAR_TRACK_BACKGROUND_COLOR = '--track-bg';
22
- var VAR_TRACK_FOREGROUND_COLOR = '--track-fg';
23
- var VAR_TRACK_FOREGROUND_WIDTH = '--track-fg-width';
12
+ import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
24
13
  var sliderThumbStyles = {
25
14
  boxSizing: 'border-box',
26
- width: theme.thumb.size,
27
- height: theme.thumb.size,
15
+ width: 16,
16
+ height: 16,
28
17
  border: 'none',
29
- background: "var(".concat(VAR_THUMB_BACKGROUND_COLOR, ", ").concat(theme.thumb.background.default, ")"),
18
+ background: "var(--thumb-bg, ".concat("var(--ds-background-neutral-bold, ".concat(B400, ")"), ")"),
30
19
  // adapted from @atlaskit/focus-ring
31
- outline: "solid 2px var(".concat(VAR_THUMB_BORDER_COLOR, ")"),
20
+ outline: 'solid 2px var(--thumb-border)',
32
21
  outlineOffset: '2px',
33
22
  borderRadius: "var(--ds-border-radius-circle, 50%)",
34
- boxShadow: "var(".concat(VAR_THUMB_SHADOW, ")"),
23
+ boxShadow: 'var(--thumb-shadow)',
35
24
  cursor: 'pointer',
36
25
  // Different implicit behavior across browsers -> making it explicit.
37
- transition: "background-color ".concat(theme.transitionDuration, " ease-in-out")
26
+ transition: 'background-color 0.2s ease-in-out'
38
27
  };
39
28
  var sliderTrackStyles = {
40
- borderRadius: theme.track.borderRadius,
29
+ borderRadius: 2,
41
30
  border: 0,
42
31
  cursor: 'pointer',
43
- height: theme.track.height,
32
+ height: 4,
44
33
  width: '100%',
45
- transition: "background-color ".concat(theme.transitionDuration, " ease-in-out")
34
+ transition: 'background-color 0.2s ease-in-out'
46
35
  };
47
36
 
48
37
  // Styles are split per browser as they are implemented differently
49
38
  // Cannot consolidate as Chrome & Firefox don't recognise styles if they are grouped
50
39
  // with CSS selectors they don't recognise, e.g. &::-ms-thumb
51
40
  var browserStyles = {
52
- webkit: css({
53
- WebkitAppearance: 'none',
54
- // Hides the slider so that custom slider can be made
55
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
56
- '::-webkit-slider-thumb': _objectSpread(_objectSpread({}, sliderThumbStyles), {}, {
57
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
58
- marginBlockStart: -(theme.thumb.size - theme.track.height) / 2,
59
- WebkitAppearance: 'none'
60
- }),
61
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
62
- '::-webkit-slider-runnable-track': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
63
- /**
64
- * Webkit does not have separate properties for the background/foreground like firefox.
65
- * Instead we use background layering:
66
- * - The gray background is a simple background color.
67
- * - The blue foreground is a 'gradient' (to create a color block) that is sized to the progress.
68
- *
69
- * Individual properties have been used over the `background` shorthand for readability.
70
- */
71
- backgroundColor: "var(".concat(VAR_TRACK_BACKGROUND_COLOR, ")"),
72
- backgroundImage: "linear-gradient(var(".concat(VAR_TRACK_FOREGROUND_COLOR, "), var(").concat(VAR_TRACK_FOREGROUND_COLOR, "))"),
73
- backgroundRepeat: 'no-repeat',
74
- backgroundSize: "var(".concat(VAR_TRACK_FOREGROUND_WIDTH, ") 100%"),
75
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
76
- '[dir="rtl"] &': {
77
- backgroundPosition: 'right'
78
- }
79
- }),
80
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
81
- ':disabled': {
82
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
83
- '::-webkit-slider-thumb, ::-webkit-slider-runnable-track': {
84
- cursor: 'not-allowed'
85
- }
86
- }
87
- }),
88
- firefox: css({
89
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
90
- '::-moz-range-thumb': sliderThumbStyles,
91
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
92
- '::-moz-focus-outer': {
93
- border: 0
94
- },
95
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
96
- '::-moz-range-progress': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
97
- background: "var(".concat(VAR_TRACK_FOREGROUND_COLOR, ")")
98
- }),
99
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
100
- '::-moz-range-track': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
101
- background: "var(".concat(VAR_TRACK_BACKGROUND_COLOR, ")")
102
- }),
103
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
104
- ':disabled': {
105
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
106
- '::-moz-range-thumb, ::-moz-range-progress, ::-moz-range-track': {
107
- cursor: 'not-allowed'
108
- }
109
- }
110
- })
41
+ webkit: null,
42
+ firefox: null
111
43
  };
112
- var baseStyles = css({
113
- width: '100%',
114
- // Has a fixed width by default
115
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
116
- height: theme.input.height,
117
- // Otherwise thumb will collide with previous box element
118
- background: 'transparent',
119
- // Otherwise white
120
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
121
- ':focus': {
122
- outline: 'none'
123
- },
124
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
125
- ':disabled': {
126
- cursor: 'not-allowed',
127
- opacity: "var(--ds-opacity-disabled, 0.4)"
128
- }
129
- });
130
- var themeStyles = css((_css = {}, _defineProperty(_css, VAR_THUMB_SHADOW, theme.thumb.boxShadow.default), _defineProperty(_css, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.default), _defineProperty(_css, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.default), _defineProperty(_css, ':hover:not(:disabled)', (_hoverNotDisabled = {}, _defineProperty(_hoverNotDisabled, VAR_THUMB_BACKGROUND_COLOR, theme.thumb.background.hovered), _defineProperty(_hoverNotDisabled, VAR_TRACK_BACKGROUND_COLOR, theme.track.background.hovered), _defineProperty(_hoverNotDisabled, VAR_TRACK_FOREGROUND_COLOR, theme.track.foreground.hovered), _hoverNotDisabled)), _defineProperty(_css, ':active:not(:disabled)', _defineProperty({}, VAR_THUMB_BACKGROUND_COLOR, theme.thumb.background.pressed)), _defineProperty(_css, ':focus-visible', _defineProperty({}, VAR_THUMB_BORDER_COLOR, theme.thumb.borderColor.focused)), _css));
44
+ var baseStyles = null;
45
+ var themeStyles = null;
131
46
 
132
47
  /**
133
48
  * __Input__
@@ -137,11 +52,23 @@ export var Input = /*#__PURE__*/forwardRef(function (props, ref) {
137
52
  var valuePercent = props.valuePercent,
138
53
  style = props.style,
139
54
  strippedProps = _objectWithoutProperties(props, _excluded);
140
- return jsx("input", _extends({}, strippedProps, {
141
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
142
- style: _defineProperty({}, VAR_TRACK_FOREGROUND_WIDTH, "".concat(valuePercent, "%")),
55
+ return /*#__PURE__*/React.createElement("input", _extends({}, strippedProps, {
143
56
  ref: ref,
144
- css: [baseStyles, browserStyles.webkit, browserStyles.firefox, themeStyles]
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"]),
58
+ style: _objectSpread(_objectSpread({}, {
59
+ // We are creating a css variable to control the "progress" portion of the range input
60
+ // This avoids us needing to create a new css class for each new percentage value
61
+ '--track-fg-width': "".concat(valuePercent, "%")
62
+ }), {}, {
63
+ "--_171tp53": ix("var(--thumb-bg, ".concat("var(--ds-background-neutral-bold, ".concat(B400, ")"), ")")),
64
+ "--_cghoza": ix("var(--ds-UNSAFE-transparent, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")),
65
+ "--_19g1tth": ix("var(--ds-background-neutral, ".concat(N30, ")")),
66
+ "--_1eby16r": ix("var(--ds-background-neutral-bold, ".concat(B400, ")")),
67
+ "--_14t3dsg": ix("var(--ds-background-neutral-bold-hovered, ".concat(B300, ")")),
68
+ "--_rf9ekb": ix("var(--ds-background-neutral-hovered, ".concat(N40, ")")),
69
+ "--_1pam7of": ix("var(--ds-background-neutral-bold-pressed, ".concat(B200, ")")),
70
+ "--_xjqa3d": ix("var(--ds-border-focused, ".concat(B200, ")"))
71
+ })
145
72
  }));
146
73
  });
147
74
  Input.displayName = 'InputRange';
package/dist/types/range.d.ts CHANGED
@@ -46,5 +46,5 @@ export type RangeProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement
46
46
  * - [Code](https://atlassian.design/components/range/code)
47
47
  * - [Usage](https://atlassian.design/components/range/usage)
48
48
  */
49
- declare const Range: React.ForwardRefExoticComponent<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "disabled" | "required">, keyof OwnProps> & OwnProps & React.RefAttributes<HTMLInputElement>>;
49
+ declare const Range: React.ForwardRefExoticComponent<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "checked" | "required">, keyof OwnProps> & OwnProps & React.RefAttributes<HTMLInputElement>>;
50
50
  export default Range;
package/dist/types-ts4.5/range.d.ts CHANGED
@@ -46,5 +46,5 @@ export type RangeProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement
46
46
  * - [Code](https://atlassian.design/components/range/code)
47
47
  * - [Usage](https://atlassian.design/components/range/usage)
48
48
  */
49
- declare const Range: React.ForwardRefExoticComponent<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "disabled" | "required">, keyof OwnProps> & OwnProps & React.RefAttributes<HTMLInputElement>>;
49
+ declare const Range: React.ForwardRefExoticComponent<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "checked" | "required">, keyof OwnProps> & OwnProps & React.RefAttributes<HTMLInputElement>>;
50
50
  export default Range;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/range",
3
- "version": "7.4.4",
3
+ "version": "8.0.0",
4
4
  "description": "A range lets users choose an approximate value on a slider.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -12,32 +12,36 @@
12
12
  "module": "dist/esm/index.js",
13
13
  "module:es2019": "dist/es2019/index.js",
14
14
  "types": "dist/types/index.d.ts",
15
- "sideEffects": false,
15
+ "sideEffects": [
16
+ "**/*.compiled.css"
17
+ ],
16
18
  "atlaskit:src": "src/index.tsx",
17
19
  "atlassian": {
18
20
  "team": "Design System Team",
19
21
  "runReact18": true,
20
22
  "website": {
21
23
  "name": "Range",
22
- "category": "Components"
24
+ "category": "Forms and input"
23
25
  }
24
26
  },
25
27
  "dependencies": {
26
- "@atlaskit/ds-lib": "^3.1.0",
28
+ "@atlaskit/css": "^0.7.0",
29
+ "@atlaskit/ds-lib": "^3.3.0",
27
30
  "@atlaskit/theme": "^14.0.0",
28
- "@atlaskit/tokens": "^2.0.0",
31
+ "@atlaskit/tokens": "^2.4.0",
29
32
  "@babel/runtime": "^7.0.0",
30
- "@emotion/react": "^11.7.1"
33
+ "@compiled/react": "^0.18.1"
31
34
  },
32
35
  "peerDependencies": {
33
36
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
34
37
  },
35
38
  "devDependencies": {
36
39
  "@af/accessibility-testing": "*",
40
+ "@af/integration-testing": "*",
37
41
  "@af/visual-regression": "*",
38
- "@atlaskit/checkbox": "^15.0.0",
42
+ "@atlaskit/checkbox": "^15.2.0",
39
43
  "@atlaskit/ssr": "*",
40
- "@atlaskit/tooltip": "^18.8.0",
44
+ "@atlaskit/tooltip": "^18.9.0",
41
45
  "@atlaskit/visual-regression": "*",
42
46
  "@emotion/styled": "^11.0.0",
43
47
  "@testing-library/react": "^12.1.5",
@@ -45,7 +49,7 @@
45
49
  "jscodeshift": "^0.13.0",
46
50
  "lodash": "^4.17.21",
47
51
  "react-dom": "^16.8.0",
48
- "storybook-addon-performance": "^0.16.0",
52
+ "storybook-addon-performance": "^0.17.3",
49
53
  "typescript": "~5.4.2"
50
54
  },
51
55
  "keywords": [
package/range/package.json CHANGED
@@ -3,7 +3,9 @@
3
3
  "main": "../dist/cjs/range.js",
4
4
  "module": "../dist/esm/range.js",
5
5
  "module:es2019": "../dist/es2019/range.js",
6
- "sideEffects": false,
6
+ "sideEffects": [
7
+ "**/*.compiled.css"
8
+ ],
7
9
  "types": "../dist/types/range.d.ts",
8
10
  "typesVersions": {
9
11
  ">=4.5 <5.4": {
package/styled/package.json CHANGED
@@ -3,7 +3,9 @@
3
3
  "main": "../dist/cjs/styled.js",
4
4
  "module": "../dist/esm/styled.js",
5
5
  "module:es2019": "../dist/es2019/styled.js",
6
- "sideEffects": false,
6
+ "sideEffects": [
7
+ "**/*.compiled.css"
8
+ ],
7
9
  "types": "../dist/types/styled.d.ts",
8
10
  "typesVersions": {
9
11
  ">=4.5 <5.4": {
package/theme/package.json CHANGED
@@ -3,7 +3,9 @@
3
3
  "main": "../dist/cjs/theme.js",
4
4
  "module": "../dist/esm/theme.js",
5
5
  "module:es2019": "../dist/es2019/theme.js",
6
- "sideEffects": false,
6
+ "sideEffects": [
7
+ "**/*.compiled.css"
8
+ ],
7
9
  "types": "../dist/types/theme.d.ts",
8
10
  "typesVersions": {
9
11
  ">=4.5 <5.4": {