@cloudflare/component-arrow-swivel 5.0.0 → 6.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 (5) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/ArrowSwivel.d.ts +2 -0
  3. package/es/ArrowSwivel.js +12 -5
  4. package/lib/ArrowSwivel.js +13 -5
  5. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # Change Log
2
2
 
3
+ ## 6.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 1b7c5ab296: Move @cloudflare/component-icon to peerDeps for all consuming packages
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [1b7c5ab296]
12
+ - @cloudflare/component-icon@10.0.0
13
+
14
+ ## 5.1.0
15
+
16
+ ### Minor Changes
17
+
18
+ - ad0cb0ea48: Changes to support hover and focus states in sortable table header cells
19
+
3
20
  ## 5.0.0
4
21
 
5
22
  ### Patch Changes
package/dist/ArrowSwivel.d.ts CHANGED
@@ -5,12 +5,14 @@ declare type ICaretIconWrapperProps = {
5
5
  startAngle?: number;
6
6
  endAngle?: number;
7
7
  duration?: number;
8
+ display?: string;
8
9
  };
9
10
  export interface IArrowSwivelProps extends ICaretIconWrapperProps {
10
11
  onClick?: React.MouseEventHandler<HTMLSpanElement>;
11
12
  isActive?: boolean;
12
13
  color?: IIconProps['color'];
13
14
  size?: IIconProps['size'];
15
+ display?: string;
14
16
  }
15
17
  declare const ArrowSwivel: React.FC<IArrowSwivelProps>;
16
18
  export default ArrowSwivel;
package/es/ArrowSwivel.js CHANGED
@@ -7,12 +7,13 @@ var CaretIconWrapper = createComponent(_ref => {
7
7
  isActive,
8
8
  startAngle,
9
9
  endAngle,
10
- duration
10
+ duration,
11
+ display = 'inline-block'
11
12
  } = _ref;
12
13
  return {
13
14
  position: 'relative',
14
15
  top: '0.2rem',
15
- display: 'inline-block',
16
+ display,
16
17
  '& svg': {
17
18
  transform: "rotate(".concat(isActive ? endAngle : startAngle, "deg)"),
18
19
  transition: "transform ".concat(duration, "ms ease")
@@ -28,14 +29,19 @@ var ArrowSwivel = _ref2 => {
28
29
  endAngle = 90,
29
30
  duration = 200,
30
31
  color = 'blue.4',
31
- size
32
+ size,
33
+ display
32
34
  } = _ref2;
33
35
  return /*#__PURE__*/React.createElement(CaretIconWrapper, {
34
36
  startAngle: startAngle,
35
37
  endAngle: endAngle,
36
38
  onClick: onClick,
37
39
  isActive: isActive,
38
- duration: duration
40
+ duration: duration // Add arrowSwivel class so the wrapper can be targeted for hover and focus
41
+ // effects by the parent element's css.
42
+ ,
43
+ className: "arrowSwivel",
44
+ display: display
39
45
  }, /*#__PURE__*/React.createElement(Icon, {
40
46
  label: "caret-right",
41
47
  type: "caret-right",
@@ -51,7 +57,8 @@ ArrowSwivel.propTypes = {
51
57
  onClick: PropTypes.func,
52
58
  duration: PropTypes.number,
53
59
  color: PropTypes.string,
54
- size: PropTypes.string
60
+ size: PropTypes.string,
61
+ display: PropTypes.string
55
62
  };
56
63
  ArrowSwivel.defaultProps = {
57
64
  isActive: false,
package/lib/ArrowSwivel.js CHANGED
@@ -25,11 +25,13 @@ var CaretIconWrapper = (0, _styleContainer.createComponent)(function (_ref) {
25
25
  var isActive = _ref.isActive,
26
26
  startAngle = _ref.startAngle,
27
27
  endAngle = _ref.endAngle,
28
- duration = _ref.duration;
28
+ duration = _ref.duration,
29
+ _ref$display = _ref.display,
30
+ display = _ref$display === void 0 ? 'inline-block' : _ref$display;
29
31
  return {
30
32
  position: 'relative',
31
33
  top: '0.2rem',
32
- display: 'inline-block',
34
+ display: display,
33
35
  '& svg': {
34
36
  transform: "rotate(".concat(isActive ? endAngle : startAngle, "deg)"),
35
37
  transition: "transform ".concat(duration, "ms ease")
@@ -49,13 +51,18 @@ var ArrowSwivel = function ArrowSwivel(_ref2) {
49
51
  duration = _ref2$duration === void 0 ? 200 : _ref2$duration,
50
52
  _ref2$color = _ref2.color,
51
53
  color = _ref2$color === void 0 ? 'blue.4' : _ref2$color,
52
- size = _ref2.size;
54
+ size = _ref2.size,
55
+ display = _ref2.display;
53
56
  return /*#__PURE__*/React.createElement(CaretIconWrapper, {
54
57
  startAngle: startAngle,
55
58
  endAngle: endAngle,
56
59
  onClick: onClick,
57
60
  isActive: isActive,
58
- duration: duration
61
+ duration: duration // Add arrowSwivel class so the wrapper can be targeted for hover and focus
62
+ // effects by the parent element's css.
63
+ ,
64
+ className: "arrowSwivel",
65
+ display: display
59
66
  }, /*#__PURE__*/React.createElement(_componentIcon.Icon, {
60
67
  label: "caret-right",
61
68
  type: "caret-right",
@@ -71,7 +78,8 @@ ArrowSwivel.propTypes = {
71
78
  onClick: _propTypes.default.func,
72
79
  duration: _propTypes.default.number,
73
80
  color: _propTypes.default.string,
74
- size: _propTypes.default.string
81
+ size: _propTypes.default.string,
82
+ display: _propTypes.default.string
75
83
  };
76
84
  ArrowSwivel.defaultProps = {
77
85
  isActive: false,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cloudflare/component-arrow-swivel",
3
3
  "description": "",
4
- "version": "5.0.0",
4
+ "version": "6.0.0",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
7
7
  "author": "Sachin Fernandes <sachin@cloudflare.com>",
@@ -12,11 +12,11 @@
12
12
  "module": "es/index.js",
13
13
  "types": "./dist/index.d.ts"
14
14
  },
15
- "dependencies": {
16
- "@cloudflare/component-icon": "^9.0.0",
15
+ "devDependencies": {
17
16
  "prop-types": "^15.6.0"
18
17
  },
19
18
  "peerDependencies": {
19
+ "@cloudflare/component-icon": "^10.0.0",
20
20
  "@cloudflare/style-container": "^7.10.0",
21
21
  "react": "^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0"
22
22
  },