@atlaskit/range 7.2.0 → 7.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +323 -307
- package/README.md +2 -1
- package/__perf__/default.tsx +1 -3
- package/__perf__/range.tsx +21 -26
- package/afm-jira/tsconfig.json +30 -0
- package/codemods/4.0.0-lite-mode.tsx +48 -73
- package/codemods/__tests__/4.0.0-lite-mode.tsx +21 -21
- package/constellation/index/examples.mdx +6 -3
- package/constellation/index/usage.mdx +14 -7
- package/dist/cjs/range.js +13 -2
- package/dist/cjs/styled.js +20 -4
- package/dist/es2019/range.js +13 -2
- package/dist/es2019/styled.js +38 -3
- package/dist/esm/range.js +13 -2
- package/dist/esm/styled.js +22 -3
- package/dist/types/range.d.ts +11 -2
- package/dist/types/styled.d.ts +3 -0
- package/dist/types-ts4.5/range.d.ts +11 -2
- package/dist/types-ts4.5/styled.d.ts +3 -0
- package/docs/0-intro.tsx +5 -4
- package/package.json +94 -96
- package/report.api.md +19 -24
package/dist/es2019/styled.js
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
/**
|
|
3
|
+
* @jsxRuntime classic
|
|
4
|
+
*/
|
|
2
5
|
/** @jsx jsx */
|
|
3
6
|
|
|
4
7
|
import { forwardRef } from 'react';
|
|
8
|
+
|
|
9
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
5
10
|
import { css, jsx } from '@emotion/react';
|
|
6
11
|
import * as theme from './theme';
|
|
7
12
|
const VAR_THUMB_BORDER_COLOR = '--thumb-border';
|
|
@@ -41,13 +46,17 @@ const browserStyles = {
|
|
|
41
46
|
webkit: css({
|
|
42
47
|
WebkitAppearance: 'none',
|
|
43
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
|
|
44
50
|
'::-webkit-slider-thumb': {
|
|
51
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
45
52
|
...sliderThumbStyles,
|
|
46
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
47
|
-
|
|
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,
|
|
48
55
|
WebkitAppearance: 'none'
|
|
49
56
|
},
|
|
57
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
50
58
|
'::-webkit-slider-runnable-track': {
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
51
60
|
...sliderTrackStyles,
|
|
52
61
|
/**
|
|
53
62
|
* Webkit does not have separate properties for the background/foreground like firefox.
|
|
@@ -61,31 +70,41 @@ const browserStyles = {
|
|
|
61
70
|
backgroundImage: `linear-gradient(var(${VAR_TRACK_FOREGROUND_COLOR}), var(${VAR_TRACK_FOREGROUND_COLOR}))`,
|
|
62
71
|
backgroundRepeat: 'no-repeat',
|
|
63
72
|
backgroundSize: `var(${VAR_TRACK_FOREGROUND_WIDTH}) 100%`,
|
|
64
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
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
|
|
65
74
|
'[dir="rtl"] &': {
|
|
66
75
|
backgroundPosition: 'right'
|
|
67
76
|
}
|
|
68
77
|
},
|
|
78
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
69
79
|
':disabled': {
|
|
80
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
70
81
|
'::-webkit-slider-thumb, ::-webkit-slider-runnable-track': {
|
|
71
82
|
cursor: 'not-allowed'
|
|
72
83
|
}
|
|
73
84
|
}
|
|
74
85
|
}),
|
|
75
86
|
firefox: css({
|
|
87
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
76
88
|
'::-moz-range-thumb': sliderThumbStyles,
|
|
89
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
77
90
|
'::-moz-focus-outer': {
|
|
78
91
|
border: 0
|
|
79
92
|
},
|
|
93
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
80
94
|
'::-moz-range-progress': {
|
|
95
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
81
96
|
...sliderTrackStyles,
|
|
82
97
|
background: `var(${VAR_TRACK_FOREGROUND_COLOR})`
|
|
83
98
|
},
|
|
99
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
84
100
|
'::-moz-range-track': {
|
|
101
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
85
102
|
...sliderTrackStyles,
|
|
86
103
|
background: `var(${VAR_TRACK_BACKGROUND_COLOR})`
|
|
87
104
|
},
|
|
105
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
88
106
|
':disabled': {
|
|
107
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
89
108
|
'::-moz-range-thumb, ::-moz-range-progress, ::-moz-range-track': {
|
|
90
109
|
cursor: 'not-allowed'
|
|
91
110
|
}
|
|
@@ -95,31 +114,45 @@ const browserStyles = {
|
|
|
95
114
|
const baseStyles = css({
|
|
96
115
|
width: '100%',
|
|
97
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
|
|
98
118
|
height: theme.input.height,
|
|
99
119
|
// Otherwise thumb will collide with previous box element
|
|
100
120
|
background: 'transparent',
|
|
101
121
|
// Otherwise white
|
|
122
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
102
123
|
':focus': {
|
|
103
124
|
outline: 'none'
|
|
104
125
|
},
|
|
126
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
105
127
|
':disabled': {
|
|
106
128
|
cursor: 'not-allowed',
|
|
107
129
|
opacity: "var(--ds-opacity-disabled, 0.4)"
|
|
108
130
|
}
|
|
109
131
|
});
|
|
110
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
|
|
111
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
|
|
112
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
|
|
113
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
|
|
114
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
|
|
115
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
|
|
116
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
|
|
117
146
|
[VAR_TRACK_FOREGROUND_COLOR]: theme.track.foreground.hovered
|
|
118
147
|
},
|
|
148
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
119
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
|
|
120
151
|
[VAR_THUMB_BACKGROUND_COLOR]: theme.thumb.background.pressed
|
|
121
152
|
},
|
|
153
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
122
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
|
|
123
156
|
[VAR_THUMB_BORDER_COLOR]: theme.thumb.borderColor.focused
|
|
124
157
|
}
|
|
125
158
|
});
|
|
@@ -135,10 +168,12 @@ export const Input = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
135
168
|
...strippedProps
|
|
136
169
|
} = props;
|
|
137
170
|
return jsx("input", _extends({}, strippedProps, {
|
|
171
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
138
172
|
style: {
|
|
139
173
|
// We are creating a css variable to control the "progress" portion of the range input
|
|
140
174
|
// This avoids us needing to create a new css class for each new percentage value
|
|
141
175
|
[VAR_TRACK_FOREGROUND_WIDTH]: `${valuePercent}%`
|
|
176
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
142
177
|
},
|
|
143
178
|
ref: ref,
|
|
144
179
|
css: [baseStyles, browserStyles.webkit, browserStyles.firefox, themeStyles]
|
package/dist/esm/range.js
CHANGED
|
@@ -31,7 +31,17 @@ var getRoundedPercentValue = function getRoundedPercentValue(value, min, max, st
|
|
|
31
31
|
return percent;
|
|
32
32
|
};
|
|
33
33
|
var noop = __noop;
|
|
34
|
-
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* __Range__
|
|
37
|
+
*
|
|
38
|
+
* A range lets users choose an approximate value on a slider.
|
|
39
|
+
*
|
|
40
|
+
* - [Examples](https://atlassian.design/components/range/examples)
|
|
41
|
+
* - [Code](https://atlassian.design/components/range/code)
|
|
42
|
+
* - [Usage](https://atlassian.design/components/range/usage)
|
|
43
|
+
*/
|
|
44
|
+
var Range = /*#__PURE__*/forwardRef(function Range(props, ref) {
|
|
35
45
|
var _props$isDisabled = props.isDisabled,
|
|
36
46
|
isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
|
|
37
47
|
_props$defaultValue = props.defaultValue,
|
|
@@ -73,4 +83,5 @@ export default /*#__PURE__*/forwardRef(function Range(props, ref) {
|
|
|
73
83
|
valuePercent: valuePercent,
|
|
74
84
|
"data-testid": testId
|
|
75
85
|
}, spreadProps));
|
|
76
|
-
});
|
|
86
|
+
});
|
|
87
|
+
export default Range;
|
package/dist/esm/styled.js
CHANGED
|
@@ -5,9 +5,14 @@ var _excluded = ["valuePercent", "style"];
|
|
|
5
5
|
var _hoverNotDisabled, _css;
|
|
6
6
|
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
7
|
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
|
+
*/
|
|
8
11
|
/** @jsx jsx */
|
|
9
12
|
|
|
10
13
|
import { forwardRef } from 'react';
|
|
14
|
+
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
11
16
|
import { css, jsx } from '@emotion/react';
|
|
12
17
|
import * as theme from './theme';
|
|
13
18
|
var VAR_THUMB_BORDER_COLOR = '--thumb-border';
|
|
@@ -47,11 +52,13 @@ var browserStyles = {
|
|
|
47
52
|
webkit: css({
|
|
48
53
|
WebkitAppearance: 'none',
|
|
49
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
|
|
50
56
|
'::-webkit-slider-thumb': _objectSpread(_objectSpread({}, sliderThumbStyles), {}, {
|
|
51
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
|
|
52
|
-
|
|
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,
|
|
53
59
|
WebkitAppearance: 'none'
|
|
54
60
|
}),
|
|
61
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
55
62
|
'::-webkit-slider-runnable-track': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
|
|
56
63
|
/**
|
|
57
64
|
* Webkit does not have separate properties for the background/foreground like firefox.
|
|
@@ -65,29 +72,37 @@ var browserStyles = {
|
|
|
65
72
|
backgroundImage: "linear-gradient(var(".concat(VAR_TRACK_FOREGROUND_COLOR, "), var(").concat(VAR_TRACK_FOREGROUND_COLOR, "))"),
|
|
66
73
|
backgroundRepeat: 'no-repeat',
|
|
67
74
|
backgroundSize: "var(".concat(VAR_TRACK_FOREGROUND_WIDTH, ") 100%"),
|
|
68
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
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
|
|
69
76
|
'[dir="rtl"] &': {
|
|
70
77
|
backgroundPosition: 'right'
|
|
71
78
|
}
|
|
72
79
|
}),
|
|
80
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
73
81
|
':disabled': {
|
|
82
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
74
83
|
'::-webkit-slider-thumb, ::-webkit-slider-runnable-track': {
|
|
75
84
|
cursor: 'not-allowed'
|
|
76
85
|
}
|
|
77
86
|
}
|
|
78
87
|
}),
|
|
79
88
|
firefox: css({
|
|
89
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
80
90
|
'::-moz-range-thumb': sliderThumbStyles,
|
|
91
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
81
92
|
'::-moz-focus-outer': {
|
|
82
93
|
border: 0
|
|
83
94
|
},
|
|
95
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
84
96
|
'::-moz-range-progress': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
|
|
85
97
|
background: "var(".concat(VAR_TRACK_FOREGROUND_COLOR, ")")
|
|
86
98
|
}),
|
|
99
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
87
100
|
'::-moz-range-track': _objectSpread(_objectSpread({}, sliderTrackStyles), {}, {
|
|
88
101
|
background: "var(".concat(VAR_TRACK_BACKGROUND_COLOR, ")")
|
|
89
102
|
}),
|
|
103
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
90
104
|
':disabled': {
|
|
105
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
91
106
|
'::-moz-range-thumb, ::-moz-range-progress, ::-moz-range-track': {
|
|
92
107
|
cursor: 'not-allowed'
|
|
93
108
|
}
|
|
@@ -97,13 +112,16 @@ var browserStyles = {
|
|
|
97
112
|
var baseStyles = css({
|
|
98
113
|
width: '100%',
|
|
99
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
|
|
100
116
|
height: theme.input.height,
|
|
101
117
|
// Otherwise thumb will collide with previous box element
|
|
102
118
|
background: 'transparent',
|
|
103
119
|
// Otherwise white
|
|
120
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
104
121
|
':focus': {
|
|
105
122
|
outline: 'none'
|
|
106
123
|
},
|
|
124
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
107
125
|
':disabled': {
|
|
108
126
|
cursor: 'not-allowed',
|
|
109
127
|
opacity: "var(--ds-opacity-disabled, 0.4)"
|
|
@@ -120,6 +138,7 @@ export var Input = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
120
138
|
style = props.style,
|
|
121
139
|
strippedProps = _objectWithoutProperties(props, _excluded);
|
|
122
140
|
return jsx("input", _extends({}, strippedProps, {
|
|
141
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
123
142
|
style: _defineProperty({}, VAR_TRACK_FOREGROUND_WIDTH, "".concat(valuePercent, "%")),
|
|
124
143
|
ref: ref,
|
|
125
144
|
css: [baseStyles, browserStyles.webkit, browserStyles.firefox, themeStyles]
|
package/dist/types/range.d.ts
CHANGED
|
@@ -37,5 +37,14 @@ export type OwnProps = {
|
|
|
37
37
|
};
|
|
38
38
|
type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
39
39
|
export type RangeProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'required' | 'checked'>, OwnProps>;
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
/**
|
|
41
|
+
* __Range__
|
|
42
|
+
*
|
|
43
|
+
* A range lets users choose an approximate value on a slider.
|
|
44
|
+
*
|
|
45
|
+
* - [Examples](https://atlassian.design/components/range/examples)
|
|
46
|
+
* - [Code](https://atlassian.design/components/range/code)
|
|
47
|
+
* - [Usage](https://atlassian.design/components/range/usage)
|
|
48
|
+
*/
|
|
49
|
+
declare const Range: React.ForwardRefExoticComponent<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "disabled" | "required">, keyof OwnProps> & OwnProps & React.RefAttributes<HTMLInputElement>>;
|
|
50
|
+
export default Range;
|
package/dist/types/styled.d.ts
CHANGED
|
@@ -37,5 +37,14 @@ export type OwnProps = {
|
|
|
37
37
|
};
|
|
38
38
|
type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
39
39
|
export type RangeProps = Combine<Omit<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'required' | 'checked'>, OwnProps>;
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
/**
|
|
41
|
+
* __Range__
|
|
42
|
+
*
|
|
43
|
+
* A range lets users choose an approximate value on a slider.
|
|
44
|
+
*
|
|
45
|
+
* - [Examples](https://atlassian.design/components/range/examples)
|
|
46
|
+
* - [Code](https://atlassian.design/components/range/code)
|
|
47
|
+
* - [Usage](https://atlassian.design/components/range/usage)
|
|
48
|
+
*/
|
|
49
|
+
declare const Range: React.ForwardRefExoticComponent<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "disabled" | "required">, keyof OwnProps> & OwnProps & React.RefAttributes<HTMLInputElement>>;
|
|
50
|
+
export default Range;
|
package/docs/0-intro.tsx
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import { md } from '@atlaskit/docs';
|
|
4
|
+
import Link from '@atlaskit/link';
|
|
4
5
|
import SectionMessage from '@atlaskit/section-message';
|
|
5
6
|
|
|
6
7
|
export default md`
|
|
7
8
|
${(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
<SectionMessage appearance="information">
|
|
10
|
+
This component is now documented on{' '}
|
|
11
|
+
<Link href="https://atlassian.design/components/range">atlassian.design</Link>
|
|
12
|
+
</SectionMessage>
|
|
12
13
|
)}
|
|
13
14
|
`;
|
package/package.json
CHANGED
|
@@ -1,97 +1,95 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
|
|
97
|
-
}
|
|
2
|
+
"name": "@atlaskit/range",
|
|
3
|
+
"version": "7.3.1",
|
|
4
|
+
"description": "A range lets users choose an approximate value on a slider.",
|
|
5
|
+
"publishConfig": {
|
|
6
|
+
"registry": "https://registry.npmjs.org/"
|
|
7
|
+
},
|
|
8
|
+
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
9
|
+
"author": "Atlassian Pty Ltd",
|
|
10
|
+
"license": "Apache-2.0",
|
|
11
|
+
"main": "dist/cjs/index.js",
|
|
12
|
+
"module": "dist/esm/index.js",
|
|
13
|
+
"module:es2019": "dist/es2019/index.js",
|
|
14
|
+
"types": "dist/types/index.d.ts",
|
|
15
|
+
"sideEffects": false,
|
|
16
|
+
"atlaskit:src": "src/index.tsx",
|
|
17
|
+
"atlassian": {
|
|
18
|
+
"team": "Design System Team",
|
|
19
|
+
"runReact18": true,
|
|
20
|
+
"productPushConsumption": [
|
|
21
|
+
"jira"
|
|
22
|
+
],
|
|
23
|
+
"releaseModel": "continuous",
|
|
24
|
+
"website": {
|
|
25
|
+
"name": "Range",
|
|
26
|
+
"category": "Components"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
"dependencies": {
|
|
30
|
+
"@atlaskit/ds-lib": "^2.3.0",
|
|
31
|
+
"@atlaskit/theme": "^12.11.0",
|
|
32
|
+
"@atlaskit/tokens": "^1.54.0",
|
|
33
|
+
"@babel/runtime": "^7.0.0",
|
|
34
|
+
"@emotion/react": "^11.7.1"
|
|
35
|
+
},
|
|
36
|
+
"peerDependencies": {
|
|
37
|
+
"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
|
|
38
|
+
},
|
|
39
|
+
"devDependencies": {
|
|
40
|
+
"@af/accessibility-testing": "*",
|
|
41
|
+
"@af/visual-regression": "*",
|
|
42
|
+
"@atlaskit/checkbox": "^13.5.0",
|
|
43
|
+
"@atlaskit/ssr": "*",
|
|
44
|
+
"@atlaskit/tooltip": "^18.5.0",
|
|
45
|
+
"@atlaskit/visual-regression": "*",
|
|
46
|
+
"@emotion/styled": "^11.0.0",
|
|
47
|
+
"@testing-library/react": "^12.1.5",
|
|
48
|
+
"@types/jscodeshift": "^0.11.0",
|
|
49
|
+
"jscodeshift": "^0.13.0",
|
|
50
|
+
"lodash": "^4.17.21",
|
|
51
|
+
"react-dom": "^16.8.0",
|
|
52
|
+
"storybook-addon-performance": "^0.16.0",
|
|
53
|
+
"typescript": "~5.4.2"
|
|
54
|
+
},
|
|
55
|
+
"keywords": [
|
|
56
|
+
"atlaskit",
|
|
57
|
+
"react",
|
|
58
|
+
"ui"
|
|
59
|
+
],
|
|
60
|
+
"techstack": {
|
|
61
|
+
"@atlassian/frontend": {
|
|
62
|
+
"import-structure": "atlassian-conventions"
|
|
63
|
+
},
|
|
64
|
+
"@repo/internal": {
|
|
65
|
+
"design-system": "v1",
|
|
66
|
+
"dom-events": "use-bind-event-listener",
|
|
67
|
+
"ui-components": "lite-mode",
|
|
68
|
+
"analytics": "analytics-next",
|
|
69
|
+
"design-tokens": [
|
|
70
|
+
"color",
|
|
71
|
+
"spacing"
|
|
72
|
+
],
|
|
73
|
+
"deprecation": "no-deprecated-imports",
|
|
74
|
+
"styling": [
|
|
75
|
+
"emotion",
|
|
76
|
+
"static"
|
|
77
|
+
]
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
"typesVersions": {
|
|
81
|
+
">=4.5 <4.9": {
|
|
82
|
+
"*": [
|
|
83
|
+
"dist/types-ts4.5/*",
|
|
84
|
+
"dist/types-ts4.5/index.d.ts"
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
"homepage": "https://atlassian.design/components/range/",
|
|
89
|
+
"af:exports": {
|
|
90
|
+
".": "./src/index.tsx",
|
|
91
|
+
"./range": "./src/range.tsx",
|
|
92
|
+
"./styled": "./src/styled.tsx",
|
|
93
|
+
"./theme": "./src/theme.tsx"
|
|
94
|
+
}
|
|
95
|
+
}
|
package/report.api.md
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
## API Report File for "@atlaskit/range"
|
|
4
4
|
|
|
5
|
-
> Do not edit this file. This report is auto-generated using
|
|
5
|
+
> Do not edit this file. This report is auto-generated using
|
|
6
|
+
> [API Extractor](https://api-extractor.com/).
|
|
6
7
|
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
7
8
|
|
|
8
9
|
### Table of contents
|
|
@@ -22,37 +23,31 @@ type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
|
22
23
|
|
|
23
24
|
// @public (undocumented)
|
|
24
25
|
const _default: React_2.ForwardRefExoticComponent<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
> &
|
|
32
|
-
OwnProps &
|
|
33
|
-
React_2.RefAttributes<HTMLInputElement>
|
|
26
|
+
Omit<
|
|
27
|
+
Omit<React_2.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'disabled' | 'required'>,
|
|
28
|
+
keyof OwnProps
|
|
29
|
+
> &
|
|
30
|
+
OwnProps &
|
|
31
|
+
React_2.RefAttributes<HTMLInputElement>
|
|
34
32
|
>;
|
|
35
33
|
export default _default;
|
|
36
34
|
|
|
37
35
|
// @public (undocumented)
|
|
38
36
|
type OwnProps = {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
37
|
+
defaultValue?: number;
|
|
38
|
+
isDisabled?: boolean;
|
|
39
|
+
max?: number;
|
|
40
|
+
min?: number;
|
|
41
|
+
onChange?: (value: number) => void;
|
|
42
|
+
step?: number;
|
|
43
|
+
testId?: string;
|
|
44
|
+
value?: number;
|
|
47
45
|
};
|
|
48
46
|
|
|
49
47
|
// @public (undocumented)
|
|
50
48
|
export type RangeProps = Combine<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
'checked' | 'disabled' | 'required'
|
|
54
|
-
>,
|
|
55
|
-
OwnProps
|
|
49
|
+
Omit<React_2.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'disabled' | 'required'>,
|
|
50
|
+
OwnProps
|
|
56
51
|
>;
|
|
57
52
|
|
|
58
53
|
// (No @packageDocumentation comment for this package)
|
|
@@ -66,7 +61,7 @@ export type RangeProps = Combine<
|
|
|
66
61
|
|
|
67
62
|
```json
|
|
68
63
|
{
|
|
69
|
-
|
|
64
|
+
"react": "^16.8.0"
|
|
70
65
|
}
|
|
71
66
|
```
|
|
72
67
|
|