@atlaskit/range 7.2.0 → 7.3.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 (17) hide show
  1. package/CHANGELOG.md +315 -307
  2. package/README.md +2 -1
  3. package/__perf__/default.tsx +1 -3
  4. package/__perf__/range.tsx +21 -26
  5. package/afm-jira/tsconfig.json +31 -0
  6. package/codemods/4.0.0-lite-mode.tsx +48 -73
  7. package/codemods/__tests__/4.0.0-lite-mode.tsx +21 -21
  8. package/constellation/index/examples.mdx +6 -3
  9. package/constellation/index/usage.mdx +14 -7
  10. package/dist/cjs/styled.js +20 -4
  11. package/dist/es2019/styled.js +38 -3
  12. package/dist/esm/styled.js +22 -3
  13. package/dist/types/styled.d.ts +3 -0
  14. package/dist/types-ts4.5/styled.d.ts +3 -0
  15. package/docs/0-intro.tsx +5 -4
  16. package/package.json +94 -96
  17. package/report.api.md +19 -24
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
- marginTop: -(theme.thumb.size - theme.track.height) / 2,
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/styled.d.ts CHANGED
@@ -1,3 +1,6 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ */
1
4
  /** @jsx jsx */
2
5
  /// <reference types="react" />
3
6
  /**
package/dist/types-ts4.5/styled.d.ts CHANGED
@@ -1,4 +1,7 @@
1
1
  /// <reference types="react" />
2
+ /**
3
+ * @jsxRuntime classic
4
+ */
2
5
  /** @jsx jsx */
3
6
  /**
4
7
  * __Input__
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
- <SectionMessage appearance="information">
9
- This component is now documented on{' '}
10
- <a href="https://atlassian.design/components">atlassian.design</a>
11
- </SectionMessage>
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
- "name": "@atlaskit/range",
3
- "version": "7.2.0",
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.7.0",
32
- "@atlaskit/tokens": "^1.44.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.1.0",
43
- "@atlaskit/ssr": "*",
44
- "@atlaskit/tooltip": "^18.3.0",
45
- "@atlaskit/visual-regression": "*",
46
- "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
47
- "@emotion/styled": "^11.0.0",
48
- "@testing-library/react": "^12.1.5",
49
- "@types/jscodeshift": "^0.11.0",
50
- "jscodeshift": "^0.13.0",
51
- "lodash": "^4.17.21",
52
- "react-dom": "^16.8.0",
53
- "storybook-addon-performance": "^0.16.0",
54
- "typescript": "~5.4.2"
55
- },
56
- "keywords": [
57
- "atlaskit",
58
- "react",
59
- "ui"
60
- ],
61
- "techstack": {
62
- "@atlassian/frontend": {
63
- "import-structure": "atlassian-conventions"
64
- },
65
- "@repo/internal": {
66
- "design-system": "v1",
67
- "dom-events": "use-bind-event-listener",
68
- "ui-components": "lite-mode",
69
- "analytics": "analytics-next",
70
- "design-tokens": [
71
- "color",
72
- "spacing"
73
- ],
74
- "deprecation": "no-deprecated-imports",
75
- "styling": [
76
- "emotion",
77
- "static"
78
- ]
79
- }
80
- },
81
- "typesVersions": {
82
- ">=4.5 <4.9": {
83
- "*": [
84
- "dist/types-ts4.5/*",
85
- "dist/types-ts4.5/index.d.ts"
86
- ]
87
- }
88
- },
89
- "homepage": "https://atlassian.design/components/range/",
90
- "af:exports": {
91
- ".": "./src/index.tsx",
92
- "./range": "./src/range.tsx",
93
- "./styled": "./src/styled.tsx",
94
- "./theme": "./src/theme.tsx"
95
- },
96
- "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
97
- }
2
+ "name": "@atlaskit/range",
3
+ "version": "7.3.0",
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.10.0",
32
+ "@atlaskit/tokens": "^1.51.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.4.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 [API Extractor](https://api-extractor.com/).
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
- Omit<
26
- Omit<
27
- React_2.InputHTMLAttributes<HTMLInputElement>,
28
- 'checked' | 'disabled' | 'required'
29
- >,
30
- keyof OwnProps
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
- defaultValue?: number;
40
- isDisabled?: boolean;
41
- max?: number;
42
- min?: number;
43
- onChange?: (value: number) => void;
44
- step?: number;
45
- testId?: string;
46
- value?: number;
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
- Omit<
52
- React_2.InputHTMLAttributes<HTMLInputElement>,
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
- "react": "^16.8.0"
64
+ "react": "^16.8.0"
70
65
  }
71
66
  ```
72
67