@atlaskit/color-picker 3.2.21 → 3.2.23
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 +13 -0
- package/afm-cc/tsconfig.json +3 -0
- package/afm-jira/tsconfig.json +0 -3
- package/dist/cjs/components/ColorCard.js +45 -17
- package/dist/cjs/components/ColorPaletteMenu.js +65 -19
- package/dist/cjs/components/ColorPicker.js +4 -2
- package/dist/cjs/components/Trigger.js +4 -2
- package/dist/cjs/components/components.js +2 -1
- package/dist/es2019/components/ColorCard.js +48 -20
- package/dist/es2019/components/ColorPaletteMenu.js +40 -8
- package/dist/es2019/components/ColorPicker.js +4 -2
- package/dist/es2019/components/Trigger.js +4 -2
- package/dist/es2019/components/components.js +2 -1
- package/dist/esm/components/ColorCard.js +46 -18
- package/dist/esm/components/ColorPaletteMenu.js +56 -10
- package/dist/esm/components/ColorPicker.js +4 -2
- package/dist/esm/components/Trigger.js +4 -2
- package/dist/esm/components/components.js +2 -1
- package/dist/types/components/ColorCard.d.ts +11 -3
- package/dist/types/components/ColorPaletteMenu.d.ts +0 -4
- package/dist/types/components/ColorPicker.d.ts +3 -1
- package/dist/types/components/Trigger.d.ts +2 -1
- package/dist/types-ts4.5/components/ColorCard.d.ts +11 -3
- package/dist/types-ts4.5/components/ColorPaletteMenu.d.ts +0 -4
- package/dist/types-ts4.5/components/ColorPicker.d.ts +3 -1
- package/dist/types-ts4.5/components/Trigger.d.ts +2 -1
- package/package.json +16 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/color-picker
|
|
2
2
|
|
|
3
|
+
## 3.2.23
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`4dc0d700605ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4dc0d700605ab) -
|
|
8
|
+
added keyboard navigation to color palette menu
|
|
9
|
+
|
|
10
|
+
## 3.2.22
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 3.2.21
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
package/afm-cc/tsconfig.json
CHANGED
package/afm-jira/tsconfig.json
CHANGED
|
@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
|
|
12
12
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
13
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
14
|
var _constants = require("../constants");
|
|
14
15
|
var _react2 = require("@emotion/react");
|
|
15
16
|
var _colors = require("@atlaskit/theme/colors");
|
|
@@ -23,7 +24,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
23
24
|
|
|
24
25
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
25
26
|
|
|
26
|
-
var ColorCard = function
|
|
27
|
+
var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRef) {
|
|
27
28
|
var value = props.value,
|
|
28
29
|
label = props.label,
|
|
29
30
|
selected = props.selected,
|
|
@@ -32,7 +33,8 @@ var ColorCard = function ColorCard(props) {
|
|
|
32
33
|
checkMarkColor = _props$checkMarkColor === void 0 ? _colors.N0 : _props$checkMarkColor,
|
|
33
34
|
isTabbing = props.isTabbing,
|
|
34
35
|
onClick = props.onClick,
|
|
35
|
-
onKeyDown = props.onKeyDown
|
|
36
|
+
onKeyDown = props.onKeyDown,
|
|
37
|
+
onTabPress = props.onTabPress;
|
|
36
38
|
var ref = (0, _react.useRef)(null);
|
|
37
39
|
var handleMouseDown = (0, _react.useCallback)(function (event) {
|
|
38
40
|
event.preventDefault();
|
|
@@ -43,28 +45,54 @@ var ColorCard = function ColorCard(props) {
|
|
|
43
45
|
onClick(value);
|
|
44
46
|
}
|
|
45
47
|
}, [onClick, value]);
|
|
48
|
+
var handleKeyDownOld = (0, _react.useCallback)(function (event) {
|
|
49
|
+
var key = event.key;
|
|
50
|
+
if ((isTabbing === undefined || isTabbing) && onClick && (key === _constants.KEY_ENTER || key === _constants.KEY_SPACE)) {
|
|
51
|
+
event.preventDefault();
|
|
52
|
+
if (isTabbing) {
|
|
53
|
+
event.stopPropagation();
|
|
54
|
+
}
|
|
55
|
+
onClick(value);
|
|
56
|
+
}
|
|
57
|
+
}, [isTabbing, onClick, value]);
|
|
46
58
|
var handleKeyDown = (0, _react.useCallback)(function (event) {
|
|
47
59
|
var key = event.key;
|
|
48
|
-
if (
|
|
60
|
+
if (key === 'Tab') {
|
|
61
|
+
onTabPress === null || onTabPress === void 0 || onTabPress(event.shiftKey);
|
|
62
|
+
}
|
|
63
|
+
if ((isTabbing === undefined || isTabbing) && (key === _constants.KEY_ENTER || key === _constants.KEY_SPACE)) {
|
|
49
64
|
event.preventDefault();
|
|
50
65
|
if (isTabbing) {
|
|
51
66
|
event.stopPropagation();
|
|
52
67
|
}
|
|
53
|
-
|
|
68
|
+
onClick === null || onClick === void 0 || onClick(value);
|
|
54
69
|
}
|
|
55
|
-
|
|
70
|
+
onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
|
|
71
|
+
}, [isTabbing, onTabPress, onClick, onKeyDown, value]);
|
|
72
|
+
|
|
73
|
+
// TODO: Remove this useEffect when the feature flag 'platform_color_palette_menu_timeline_bar_a11y' is cleaned up
|
|
56
74
|
(0, _react.useEffect)(function () {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
e.
|
|
61
|
-
|
|
75
|
+
if (!(0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y')) {
|
|
76
|
+
var refCurrent = ref.current;
|
|
77
|
+
var handleTabKey = function handleTabKey(e) {
|
|
78
|
+
if (e.key === 'Tab') {
|
|
79
|
+
e.stopPropagation();
|
|
80
|
+
e.preventDefault();
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
refCurrent === null || refCurrent === void 0 || refCurrent.addEventListener('keydown', handleTabKey);
|
|
84
|
+
return function () {
|
|
85
|
+
refCurrent === null || refCurrent === void 0 || refCurrent.removeEventListener('keydown', handleTabKey);
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
}, []);
|
|
89
|
+
(0, _react.useImperativeHandle)(componentRef, function () {
|
|
90
|
+
return {
|
|
91
|
+
focus: function focus() {
|
|
92
|
+
var _ref$current;
|
|
93
|
+
(_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
|
|
62
94
|
}
|
|
63
95
|
};
|
|
64
|
-
refCurrent === null || refCurrent === void 0 || refCurrent.addEventListener('keydown', handleKeyDown);
|
|
65
|
-
return function () {
|
|
66
|
-
refCurrent === null || refCurrent === void 0 || refCurrent.removeEventListener('keydown', handleKeyDown);
|
|
67
|
-
};
|
|
68
96
|
}, []);
|
|
69
97
|
return (0, _react2.jsx)(_tooltip.default, {
|
|
70
98
|
content: label
|
|
@@ -74,8 +102,8 @@ var ColorCard = function ColorCard(props) {
|
|
|
74
102
|
css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
|
|
75
103
|
onClick: handleClick,
|
|
76
104
|
onMouseDown: handleMouseDown,
|
|
77
|
-
onKeyDown: handleKeyDown,
|
|
78
|
-
role:
|
|
105
|
+
onKeyDown: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? handleKeyDown : handleKeyDownOld,
|
|
106
|
+
role: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? 'menuitemradio' : 'radio',
|
|
79
107
|
"aria-checked": selected,
|
|
80
108
|
"aria-label": label,
|
|
81
109
|
tabIndex: 0,
|
|
@@ -94,7 +122,7 @@ var ColorCard = function ColorCard(props) {
|
|
|
94
122
|
label: ""
|
|
95
123
|
})))));
|
|
96
124
|
});
|
|
97
|
-
};
|
|
125
|
+
});
|
|
98
126
|
var _default = exports.default = ColorCard;
|
|
99
127
|
var colorCardOptionTabbingStyles = (0, _react2.css)({
|
|
100
128
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
@@ -5,11 +5,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.ColorPaletteMenuWithoutAnalytics = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
+
var _react = require("react");
|
|
8
11
|
var _types = require("../types");
|
|
9
12
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
10
13
|
var _ColorCard = _interopRequireDefault(require("./ColorCard"));
|
|
14
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
15
|
var _utils = require("../utils");
|
|
12
|
-
var
|
|
16
|
+
var _react2 = require("@emotion/react");
|
|
13
17
|
var _colors = require("@atlaskit/theme/colors");
|
|
14
18
|
/**
|
|
15
19
|
* @jsxRuntime classic
|
|
@@ -39,12 +43,15 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
|
|
|
39
43
|
attributes: {
|
|
40
44
|
componentName: 'color-picker',
|
|
41
45
|
packageName: "@atlaskit/color-picker",
|
|
42
|
-
packageVersion: "3.2.
|
|
46
|
+
packageVersion: "3.2.23"
|
|
43
47
|
}
|
|
44
48
|
})(createAnalyticsEvent);
|
|
45
49
|
}
|
|
46
50
|
return undefined;
|
|
47
51
|
};
|
|
52
|
+
var colorCardRefs = (0, _react.useMemo)(function () {
|
|
53
|
+
return [];
|
|
54
|
+
}, []);
|
|
48
55
|
var handleChange = function handleChange(value) {
|
|
49
56
|
onChange(value, changeAnalyticsCaller());
|
|
50
57
|
};
|
|
@@ -52,9 +59,43 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
|
|
|
52
59
|
options = _getOptions.options,
|
|
53
60
|
selectedValue = _getOptions.value;
|
|
54
61
|
var fullLabel = "".concat(label, ", ").concat(selectedValue.label, " selected");
|
|
55
|
-
|
|
62
|
+
var _useState = (0, _react.useState)(selectedValue.value ? options.findIndex(function (_ref2) {
|
|
63
|
+
var value = _ref2.value;
|
|
64
|
+
return value === selectedValue.value;
|
|
65
|
+
}) : 0),
|
|
66
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
67
|
+
focusedIndex = _useState2[0],
|
|
68
|
+
setFocusedIndex = _useState2[1];
|
|
69
|
+
(0, _react.useEffect)(function () {
|
|
70
|
+
var _colorCardRefs$focuse;
|
|
71
|
+
(_colorCardRefs$focuse = colorCardRefs[focusedIndex]) === null || _colorCardRefs$focuse === void 0 || _colorCardRefs$focuse.focus();
|
|
72
|
+
}, [focusedIndex, colorCardRefs]);
|
|
73
|
+
var handleKeyDown = (0, _react.useCallback)(function (event) {
|
|
74
|
+
var numItems = options.length;
|
|
75
|
+
switch (event.key) {
|
|
76
|
+
case 'ArrowRight':
|
|
77
|
+
case 'ArrowDown':
|
|
78
|
+
setFocusedIndex(function (prevIndex) {
|
|
79
|
+
return (prevIndex + 1) % numItems;
|
|
80
|
+
});
|
|
81
|
+
break;
|
|
82
|
+
case 'ArrowLeft':
|
|
83
|
+
case 'ArrowUp':
|
|
84
|
+
setFocusedIndex(function (prevIndex) {
|
|
85
|
+
return (prevIndex - 1 + numItems) % numItems;
|
|
86
|
+
});
|
|
87
|
+
break;
|
|
88
|
+
default:
|
|
89
|
+
break;
|
|
90
|
+
}
|
|
91
|
+
}, [setFocusedIndex, options]);
|
|
92
|
+
var onTabPress = function onTabPress() {
|
|
93
|
+
var backwards = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
94
|
+
setFocusedIndex(backwards ? 0 : options.length - 1);
|
|
95
|
+
};
|
|
96
|
+
return (0, _react2.jsx)("div", {
|
|
56
97
|
"aria-label": fullLabel,
|
|
57
|
-
role:
|
|
98
|
+
role: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup'
|
|
58
99
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
59
100
|
,
|
|
60
101
|
css: [colorPaletteMenuStyles, mode === _types.Mode.Standard && colorPaletteMenuStandardStyles],
|
|
@@ -62,52 +103,57 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
|
|
|
62
103
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
63
104
|
width: "".concat((0, _utils.getWidth)(cols, mode), "px")
|
|
64
105
|
}
|
|
65
|
-
}, (0,
|
|
106
|
+
}, (0, _react2.jsx)("div", {
|
|
66
107
|
css: [colorPaletteContainerStyles,
|
|
67
108
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
68
109
|
mode === _types.Mode.Compact && colorPaletteContainerCompactStyles]
|
|
69
|
-
}, options.map(function (
|
|
70
|
-
var label =
|
|
71
|
-
value =
|
|
72
|
-
return (0,
|
|
110
|
+
}, options.map(function (_ref3, index) {
|
|
111
|
+
var label = _ref3.label,
|
|
112
|
+
value = _ref3.value;
|
|
113
|
+
return (0, _react2.jsx)("div", {
|
|
73
114
|
css: colorCardWrapperStyles,
|
|
74
115
|
key: value
|
|
75
|
-
}, (0,
|
|
116
|
+
}, (0, _react2.jsx)(_ColorCard.default, (0, _extends2.default)({
|
|
76
117
|
label: label,
|
|
77
118
|
value: value,
|
|
78
119
|
checkMarkColor: checkMarkColor,
|
|
79
120
|
isOption: true,
|
|
80
121
|
selected: value === selectedValue.value,
|
|
81
|
-
onClick: handleChange
|
|
82
|
-
|
|
83
|
-
|
|
122
|
+
onClick: handleChange
|
|
123
|
+
}, (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') && {
|
|
124
|
+
ref: function ref(_ref4) {
|
|
125
|
+
return colorCardRefs[index] = _ref4;
|
|
126
|
+
},
|
|
127
|
+
onTabPress: onTabPress,
|
|
128
|
+
onKeyDown: handleKeyDown
|
|
129
|
+
})));
|
|
84
130
|
})));
|
|
85
131
|
};
|
|
86
132
|
var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
|
|
87
133
|
componentName: 'color-picker',
|
|
88
134
|
packageName: "@atlaskit/color-picker",
|
|
89
|
-
packageVersion: "3.2.
|
|
135
|
+
packageVersion: "3.2.23"
|
|
90
136
|
})((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
|
|
91
|
-
var colorCardWrapperStyles = (0,
|
|
137
|
+
var colorCardWrapperStyles = (0, _react2.css)({
|
|
92
138
|
display: 'flex',
|
|
93
139
|
margin: "var(--ds-space-025, 2px)",
|
|
94
140
|
height: "var(--ds-space-400, 32px)"
|
|
95
141
|
});
|
|
96
|
-
var colorPaletteContainerStyles = (0,
|
|
142
|
+
var colorPaletteContainerStyles = (0, _react2.css)({
|
|
97
143
|
display: 'flex',
|
|
98
144
|
flexWrap: 'wrap',
|
|
99
145
|
padding: "var(--ds-space-050, 4px)"
|
|
100
146
|
});
|
|
101
|
-
var colorPaletteContainerCompactStyles = (0,
|
|
147
|
+
var colorPaletteContainerCompactStyles = (0, _react2.css)({
|
|
102
148
|
padding: "var(--ds-space-0, 0)"
|
|
103
149
|
});
|
|
104
|
-
var colorPaletteMenuStyles = (0,
|
|
150
|
+
var colorPaletteMenuStyles = (0, _react2.css)({
|
|
105
151
|
display: 'flex',
|
|
106
152
|
position: 'relative',
|
|
107
153
|
margin: "var(--ds-space-0, 0)",
|
|
108
154
|
backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")")
|
|
109
155
|
});
|
|
110
|
-
var colorPaletteMenuStandardStyles = (0,
|
|
156
|
+
var colorPaletteMenuStandardStyles = (0, _react2.css)({
|
|
111
157
|
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
112
158
|
boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N40, ", 0 0 8px ").concat(_colors.N40), ")")
|
|
113
159
|
});
|
|
@@ -42,7 +42,7 @@ var defaultPopperProps = {
|
|
|
42
42
|
placement: 'bottom-start'
|
|
43
43
|
};
|
|
44
44
|
var packageName = "@atlaskit/color-picker";
|
|
45
|
-
var packageVersion = "3.2.
|
|
45
|
+
var packageVersion = "3.2.23";
|
|
46
46
|
var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
|
|
47
47
|
(0, _inherits2.default)(ColorPickerWithoutAnalyticsBase, _React$Component);
|
|
48
48
|
var _super = _createSuper(ColorPickerWithoutAnalyticsBase);
|
|
@@ -116,6 +116,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
|
|
|
116
116
|
popperProps = _this$props$popperPro === void 0 ? defaultPopperProps : _this$props$popperPro,
|
|
117
117
|
_this$props$label = _this$props.label,
|
|
118
118
|
label = _this$props$label === void 0 ? 'Color picker' : _this$props$label,
|
|
119
|
+
triggerId = _this$props.triggerId,
|
|
119
120
|
selectedColourSwatchSize = _this$props.selectedColourSwatchSize,
|
|
120
121
|
_this$props$showDefau = _this$props.showDefaultSwatchColor,
|
|
121
122
|
showDefaultSwatchColor = _this$props$showDefau === void 0 ? true : _this$props$showDefau,
|
|
@@ -136,7 +137,8 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
|
|
|
136
137
|
label: fullLabel,
|
|
137
138
|
expanded: isOpen,
|
|
138
139
|
swatchSize: selectedColourSwatchSize,
|
|
139
|
-
isDisabled: isDisabledSelectedSwatch
|
|
140
|
+
isDisabled: isDisabledSelectedSwatch,
|
|
141
|
+
id: triggerId
|
|
140
142
|
})));
|
|
141
143
|
},
|
|
142
144
|
popperProps: popperProps,
|
|
@@ -23,7 +23,8 @@ var ColorCard = function ColorCard(_ref) {
|
|
|
23
23
|
onClick = _ref.onClick,
|
|
24
24
|
_ref$swatchSize = _ref.swatchSize,
|
|
25
25
|
swatchSize = _ref$swatchSize === void 0 ? 'default' : _ref$swatchSize,
|
|
26
|
-
isDisabled = _ref.isDisabled
|
|
26
|
+
isDisabled = _ref.isDisabled,
|
|
27
|
+
id = _ref.id;
|
|
27
28
|
var handleMouseDown = (0, _react.useCallback)(function (event) {
|
|
28
29
|
event.preventDefault();
|
|
29
30
|
}, []);
|
|
@@ -44,7 +45,8 @@ var ColorCard = function ColorCard(_ref) {
|
|
|
44
45
|
"aria-label": label,
|
|
45
46
|
"aria-expanded": expanded,
|
|
46
47
|
"aria-haspopup": true,
|
|
47
|
-
type: "button"
|
|
48
|
+
type: "button",
|
|
49
|
+
id: id
|
|
48
50
|
}, (0, _react2.jsx)("span", {
|
|
49
51
|
css: colorCardWrapperStyles
|
|
50
52
|
}, (0, _react2.jsx)("span", {
|
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.Placeholder = exports.Option = exports.MenuList = exports.DropdownIndicator = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
9
10
|
var _ColorCard = _interopRequireDefault(require("./ColorCard"));
|
|
10
11
|
var _utils = require("../utils");
|
|
11
12
|
var _react = require("@emotion/react");
|
|
@@ -22,7 +23,7 @@ var MenuList = exports.MenuList = function MenuList(props) {
|
|
|
22
23
|
children = props.children;
|
|
23
24
|
return (0, _react.jsx)("div", {
|
|
24
25
|
css: colorPaletteContainerStyles,
|
|
25
|
-
role:
|
|
26
|
+
role: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup',
|
|
26
27
|
style: {
|
|
27
28
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
28
29
|
maxWidth: cols ? (0, _utils.getWidth)(cols) : undefined
|
|
@@ -3,15 +3,16 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
3
3
|
* @jsxRuntime classic
|
|
4
4
|
* @jsx jsx
|
|
5
5
|
*/
|
|
6
|
-
import React, { useCallback, useEffect, useRef } from 'react';
|
|
6
|
+
import React, { useCallback, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
|
|
7
7
|
import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
|
|
8
8
|
import Tooltip from '@atlaskit/tooltip';
|
|
9
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
10
|
import { KEY_ENTER, KEY_SPACE } from '../constants';
|
|
10
11
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
11
12
|
import { css, jsx } from '@emotion/react';
|
|
12
13
|
import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
|
|
13
14
|
import { mergeRefs } from 'use-callback-ref';
|
|
14
|
-
const ColorCard = props => {
|
|
15
|
+
const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
|
|
15
16
|
const {
|
|
16
17
|
value,
|
|
17
18
|
label,
|
|
@@ -20,7 +21,8 @@ const ColorCard = props => {
|
|
|
20
21
|
checkMarkColor = N0,
|
|
21
22
|
isTabbing,
|
|
22
23
|
onClick,
|
|
23
|
-
onKeyDown
|
|
24
|
+
onKeyDown,
|
|
25
|
+
onTabPress
|
|
24
26
|
} = props;
|
|
25
27
|
const ref = useRef(null);
|
|
26
28
|
const handleMouseDown = useCallback(event => {
|
|
@@ -32,31 +34,57 @@ const ColorCard = props => {
|
|
|
32
34
|
onClick(value);
|
|
33
35
|
}
|
|
34
36
|
}, [onClick, value]);
|
|
37
|
+
const handleKeyDownOld = useCallback(event => {
|
|
38
|
+
const {
|
|
39
|
+
key
|
|
40
|
+
} = event;
|
|
41
|
+
if ((isTabbing === undefined || isTabbing) && onClick && (key === KEY_ENTER || key === KEY_SPACE)) {
|
|
42
|
+
event.preventDefault();
|
|
43
|
+
if (isTabbing) {
|
|
44
|
+
event.stopPropagation();
|
|
45
|
+
}
|
|
46
|
+
onClick(value);
|
|
47
|
+
}
|
|
48
|
+
}, [isTabbing, onClick, value]);
|
|
35
49
|
const handleKeyDown = useCallback(event => {
|
|
36
50
|
const {
|
|
37
51
|
key
|
|
38
52
|
} = event;
|
|
39
|
-
if (
|
|
53
|
+
if (key === 'Tab') {
|
|
54
|
+
onTabPress === null || onTabPress === void 0 ? void 0 : onTabPress(event.shiftKey);
|
|
55
|
+
}
|
|
56
|
+
if ((isTabbing === undefined || isTabbing) && (key === KEY_ENTER || key === KEY_SPACE)) {
|
|
40
57
|
event.preventDefault();
|
|
41
58
|
if (isTabbing) {
|
|
42
59
|
event.stopPropagation();
|
|
43
60
|
}
|
|
44
|
-
|
|
61
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(value);
|
|
45
62
|
}
|
|
46
|
-
|
|
63
|
+
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
64
|
+
}, [isTabbing, onTabPress, onClick, onKeyDown, value]);
|
|
65
|
+
|
|
66
|
+
// TODO: Remove this useEffect when the feature flag 'platform_color_palette_menu_timeline_bar_a11y' is cleaned up
|
|
47
67
|
useEffect(() => {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
e.
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
68
|
+
if (!fg('platform_color_palette_menu_timeline_bar_a11y')) {
|
|
69
|
+
const refCurrent = ref.current;
|
|
70
|
+
const handleTabKey = e => {
|
|
71
|
+
if (e.key === 'Tab') {
|
|
72
|
+
e.stopPropagation();
|
|
73
|
+
e.preventDefault();
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
refCurrent === null || refCurrent === void 0 ? void 0 : refCurrent.addEventListener('keydown', handleTabKey);
|
|
77
|
+
return () => {
|
|
78
|
+
refCurrent === null || refCurrent === void 0 ? void 0 : refCurrent.removeEventListener('keydown', handleTabKey);
|
|
79
|
+
};
|
|
80
|
+
}
|
|
59
81
|
}, []);
|
|
82
|
+
useImperativeHandle(componentRef, () => ({
|
|
83
|
+
focus: () => {
|
|
84
|
+
var _ref$current;
|
|
85
|
+
(_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
|
|
86
|
+
}
|
|
87
|
+
}), []);
|
|
60
88
|
return jsx(Tooltip, {
|
|
61
89
|
content: label
|
|
62
90
|
}, tooltipProps => {
|
|
@@ -65,8 +93,8 @@ const ColorCard = props => {
|
|
|
65
93
|
css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
|
|
66
94
|
onClick: handleClick,
|
|
67
95
|
onMouseDown: handleMouseDown,
|
|
68
|
-
onKeyDown: handleKeyDown,
|
|
69
|
-
role:
|
|
96
|
+
onKeyDown: fg('platform_color_palette_menu_timeline_bar_a11y') ? handleKeyDown : handleKeyDownOld,
|
|
97
|
+
role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'menuitemradio' : 'radio',
|
|
70
98
|
"aria-checked": selected,
|
|
71
99
|
"aria-label": label,
|
|
72
100
|
tabIndex: 0,
|
|
@@ -85,7 +113,7 @@ const ColorCard = props => {
|
|
|
85
113
|
label: ""
|
|
86
114
|
})))));
|
|
87
115
|
});
|
|
88
|
-
};
|
|
116
|
+
});
|
|
89
117
|
export default ColorCard;
|
|
90
118
|
const colorCardOptionTabbingStyles = css({
|
|
91
119
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
1
2
|
/**
|
|
2
3
|
* @jsxRuntime classic
|
|
3
4
|
* @jsx jsx
|
|
4
5
|
*/
|
|
6
|
+
import { useState, useCallback, useEffect, useMemo } from 'react';
|
|
5
7
|
import { Mode } from '../types';
|
|
6
8
|
import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
7
9
|
import ColorCard from './ColorCard';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
11
|
import { getOptions, getWidth } from '../utils';
|
|
9
12
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
13
|
import { css, jsx } from '@emotion/react';
|
|
@@ -28,12 +31,13 @@ export const ColorPaletteMenuWithoutAnalytics = ({
|
|
|
28
31
|
attributes: {
|
|
29
32
|
componentName: 'color-picker',
|
|
30
33
|
packageName: "@atlaskit/color-picker",
|
|
31
|
-
packageVersion: "3.2.
|
|
34
|
+
packageVersion: "3.2.23"
|
|
32
35
|
}
|
|
33
36
|
})(createAnalyticsEvent);
|
|
34
37
|
}
|
|
35
38
|
return undefined;
|
|
36
39
|
};
|
|
40
|
+
const colorCardRefs = useMemo(() => [], []);
|
|
37
41
|
const handleChange = value => {
|
|
38
42
|
onChange(value, changeAnalyticsCaller());
|
|
39
43
|
};
|
|
@@ -42,9 +46,34 @@ export const ColorPaletteMenuWithoutAnalytics = ({
|
|
|
42
46
|
value: selectedValue
|
|
43
47
|
} = getOptions(palette, selectedColor);
|
|
44
48
|
const fullLabel = `${label}, ${selectedValue.label} selected`;
|
|
49
|
+
const [focusedIndex, setFocusedIndex] = useState(selectedValue.value ? options.findIndex(({
|
|
50
|
+
value
|
|
51
|
+
}) => value === selectedValue.value) : 0);
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
var _colorCardRefs$focuse;
|
|
54
|
+
(_colorCardRefs$focuse = colorCardRefs[focusedIndex]) === null || _colorCardRefs$focuse === void 0 ? void 0 : _colorCardRefs$focuse.focus();
|
|
55
|
+
}, [focusedIndex, colorCardRefs]);
|
|
56
|
+
const handleKeyDown = useCallback(event => {
|
|
57
|
+
const numItems = options.length;
|
|
58
|
+
switch (event.key) {
|
|
59
|
+
case 'ArrowRight':
|
|
60
|
+
case 'ArrowDown':
|
|
61
|
+
setFocusedIndex(prevIndex => (prevIndex + 1) % numItems);
|
|
62
|
+
break;
|
|
63
|
+
case 'ArrowLeft':
|
|
64
|
+
case 'ArrowUp':
|
|
65
|
+
setFocusedIndex(prevIndex => (prevIndex - 1 + numItems) % numItems);
|
|
66
|
+
break;
|
|
67
|
+
default:
|
|
68
|
+
break;
|
|
69
|
+
}
|
|
70
|
+
}, [setFocusedIndex, options]);
|
|
71
|
+
const onTabPress = (backwards = false) => {
|
|
72
|
+
setFocusedIndex(backwards ? 0 : options.length - 1);
|
|
73
|
+
};
|
|
45
74
|
return jsx("div", {
|
|
46
75
|
"aria-label": fullLabel,
|
|
47
|
-
role:
|
|
76
|
+
role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup'
|
|
48
77
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
49
78
|
,
|
|
50
79
|
css: [colorPaletteMenuStyles, mode === Mode.Standard && colorPaletteMenuStandardStyles],
|
|
@@ -59,23 +88,26 @@ export const ColorPaletteMenuWithoutAnalytics = ({
|
|
|
59
88
|
}, options.map(({
|
|
60
89
|
label,
|
|
61
90
|
value
|
|
62
|
-
}) => jsx("div", {
|
|
91
|
+
}, index) => jsx("div", {
|
|
63
92
|
css: colorCardWrapperStyles,
|
|
64
93
|
key: value
|
|
65
|
-
}, jsx(ColorCard, {
|
|
94
|
+
}, jsx(ColorCard, _extends({
|
|
66
95
|
label: label,
|
|
67
96
|
value: value,
|
|
68
97
|
checkMarkColor: checkMarkColor,
|
|
69
98
|
isOption: true,
|
|
70
99
|
selected: value === selectedValue.value,
|
|
71
|
-
onClick: handleChange
|
|
72
|
-
|
|
73
|
-
|
|
100
|
+
onClick: handleChange
|
|
101
|
+
}, fg('platform_color_palette_menu_timeline_bar_a11y') && {
|
|
102
|
+
ref: ref => colorCardRefs[index] = ref,
|
|
103
|
+
onTabPress,
|
|
104
|
+
onKeyDown: handleKeyDown
|
|
105
|
+
}))))));
|
|
74
106
|
};
|
|
75
107
|
export default withAnalyticsContext({
|
|
76
108
|
componentName: 'color-picker',
|
|
77
109
|
packageName: "@atlaskit/color-picker",
|
|
78
|
-
packageVersion: "3.2.
|
|
110
|
+
packageVersion: "3.2.23"
|
|
79
111
|
})(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
|
|
80
112
|
const colorCardWrapperStyles = css({
|
|
81
113
|
display: 'flex',
|
|
@@ -26,7 +26,7 @@ const defaultPopperProps = {
|
|
|
26
26
|
placement: 'bottom-start'
|
|
27
27
|
};
|
|
28
28
|
const packageName = "@atlaskit/color-picker";
|
|
29
|
-
const packageVersion = "3.2.
|
|
29
|
+
const packageVersion = "3.2.23";
|
|
30
30
|
class ColorPickerWithoutAnalyticsBase extends React.Component {
|
|
31
31
|
constructor(...args) {
|
|
32
32
|
super(...args);
|
|
@@ -90,6 +90,7 @@ class ColorPickerWithoutAnalyticsBase extends React.Component {
|
|
|
90
90
|
cols,
|
|
91
91
|
popperProps = defaultPopperProps,
|
|
92
92
|
label = 'Color picker',
|
|
93
|
+
triggerId,
|
|
93
94
|
selectedColourSwatchSize,
|
|
94
95
|
showDefaultSwatchColor = true,
|
|
95
96
|
isDisabledSelectedSwatch,
|
|
@@ -111,7 +112,8 @@ class ColorPickerWithoutAnalyticsBase extends React.Component {
|
|
|
111
112
|
label: fullLabel,
|
|
112
113
|
expanded: isOpen,
|
|
113
114
|
swatchSize: selectedColourSwatchSize,
|
|
114
|
-
isDisabled: isDisabledSelectedSwatch
|
|
115
|
+
isDisabled: isDisabledSelectedSwatch,
|
|
116
|
+
id: triggerId
|
|
115
117
|
}))),
|
|
116
118
|
popperProps: popperProps,
|
|
117
119
|
maxMenuWidth: "auto",
|
|
@@ -13,7 +13,8 @@ const ColorCard = ({
|
|
|
13
13
|
expanded,
|
|
14
14
|
onClick,
|
|
15
15
|
swatchSize = 'default',
|
|
16
|
-
isDisabled
|
|
16
|
+
isDisabled,
|
|
17
|
+
id
|
|
17
18
|
}) => {
|
|
18
19
|
const handleMouseDown = useCallback(event => {
|
|
19
20
|
event.preventDefault();
|
|
@@ -35,7 +36,8 @@ const ColorCard = ({
|
|
|
35
36
|
"aria-label": label,
|
|
36
37
|
"aria-expanded": expanded,
|
|
37
38
|
"aria-haspopup": true,
|
|
38
|
-
type: "button"
|
|
39
|
+
type: "button",
|
|
40
|
+
id: id
|
|
39
41
|
}, jsx("span", {
|
|
40
42
|
css: colorCardWrapperStyles
|
|
41
43
|
}, jsx("span", {
|
|
@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
4
4
|
* @jsx jsx
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
8
|
import ColorCard from './ColorCard';
|
|
8
9
|
import { getWidth } from '../utils';
|
|
9
10
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
@@ -18,7 +19,7 @@ export const MenuList = props => {
|
|
|
18
19
|
} = props;
|
|
19
20
|
return jsx("div", {
|
|
20
21
|
css: colorPaletteContainerStyles,
|
|
21
|
-
role:
|
|
22
|
+
role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup',
|
|
22
23
|
style: {
|
|
23
24
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
24
25
|
maxWidth: cols ? getWidth(cols) : undefined
|
|
@@ -3,15 +3,16 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
3
3
|
* @jsxRuntime classic
|
|
4
4
|
* @jsx jsx
|
|
5
5
|
*/
|
|
6
|
-
import React, { useCallback, useEffect, useRef } from 'react';
|
|
6
|
+
import React, { useCallback, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
|
|
7
7
|
import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
|
|
8
8
|
import Tooltip from '@atlaskit/tooltip';
|
|
9
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
10
|
import { KEY_ENTER, KEY_SPACE } from '../constants';
|
|
10
11
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
11
12
|
import { css, jsx } from '@emotion/react';
|
|
12
13
|
import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
|
|
13
14
|
import { mergeRefs } from 'use-callback-ref';
|
|
14
|
-
var ColorCard = function
|
|
15
|
+
var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
|
|
15
16
|
var value = props.value,
|
|
16
17
|
label = props.label,
|
|
17
18
|
selected = props.selected,
|
|
@@ -20,7 +21,8 @@ var ColorCard = function ColorCard(props) {
|
|
|
20
21
|
checkMarkColor = _props$checkMarkColor === void 0 ? N0 : _props$checkMarkColor,
|
|
21
22
|
isTabbing = props.isTabbing,
|
|
22
23
|
onClick = props.onClick,
|
|
23
|
-
onKeyDown = props.onKeyDown
|
|
24
|
+
onKeyDown = props.onKeyDown,
|
|
25
|
+
onTabPress = props.onTabPress;
|
|
24
26
|
var ref = useRef(null);
|
|
25
27
|
var handleMouseDown = useCallback(function (event) {
|
|
26
28
|
event.preventDefault();
|
|
@@ -31,28 +33,54 @@ var ColorCard = function ColorCard(props) {
|
|
|
31
33
|
onClick(value);
|
|
32
34
|
}
|
|
33
35
|
}, [onClick, value]);
|
|
36
|
+
var handleKeyDownOld = useCallback(function (event) {
|
|
37
|
+
var key = event.key;
|
|
38
|
+
if ((isTabbing === undefined || isTabbing) && onClick && (key === KEY_ENTER || key === KEY_SPACE)) {
|
|
39
|
+
event.preventDefault();
|
|
40
|
+
if (isTabbing) {
|
|
41
|
+
event.stopPropagation();
|
|
42
|
+
}
|
|
43
|
+
onClick(value);
|
|
44
|
+
}
|
|
45
|
+
}, [isTabbing, onClick, value]);
|
|
34
46
|
var handleKeyDown = useCallback(function (event) {
|
|
35
47
|
var key = event.key;
|
|
36
|
-
if (
|
|
48
|
+
if (key === 'Tab') {
|
|
49
|
+
onTabPress === null || onTabPress === void 0 || onTabPress(event.shiftKey);
|
|
50
|
+
}
|
|
51
|
+
if ((isTabbing === undefined || isTabbing) && (key === KEY_ENTER || key === KEY_SPACE)) {
|
|
37
52
|
event.preventDefault();
|
|
38
53
|
if (isTabbing) {
|
|
39
54
|
event.stopPropagation();
|
|
40
55
|
}
|
|
41
|
-
|
|
56
|
+
onClick === null || onClick === void 0 || onClick(value);
|
|
42
57
|
}
|
|
43
|
-
|
|
58
|
+
onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
|
|
59
|
+
}, [isTabbing, onTabPress, onClick, onKeyDown, value]);
|
|
60
|
+
|
|
61
|
+
// TODO: Remove this useEffect when the feature flag 'platform_color_palette_menu_timeline_bar_a11y' is cleaned up
|
|
44
62
|
useEffect(function () {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
e.
|
|
49
|
-
|
|
63
|
+
if (!fg('platform_color_palette_menu_timeline_bar_a11y')) {
|
|
64
|
+
var refCurrent = ref.current;
|
|
65
|
+
var handleTabKey = function handleTabKey(e) {
|
|
66
|
+
if (e.key === 'Tab') {
|
|
67
|
+
e.stopPropagation();
|
|
68
|
+
e.preventDefault();
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
refCurrent === null || refCurrent === void 0 || refCurrent.addEventListener('keydown', handleTabKey);
|
|
72
|
+
return function () {
|
|
73
|
+
refCurrent === null || refCurrent === void 0 || refCurrent.removeEventListener('keydown', handleTabKey);
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
}, []);
|
|
77
|
+
useImperativeHandle(componentRef, function () {
|
|
78
|
+
return {
|
|
79
|
+
focus: function focus() {
|
|
80
|
+
var _ref$current;
|
|
81
|
+
(_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
|
|
50
82
|
}
|
|
51
83
|
};
|
|
52
|
-
refCurrent === null || refCurrent === void 0 || refCurrent.addEventListener('keydown', handleKeyDown);
|
|
53
|
-
return function () {
|
|
54
|
-
refCurrent === null || refCurrent === void 0 || refCurrent.removeEventListener('keydown', handleKeyDown);
|
|
55
|
-
};
|
|
56
84
|
}, []);
|
|
57
85
|
return jsx(Tooltip, {
|
|
58
86
|
content: label
|
|
@@ -62,8 +90,8 @@ var ColorCard = function ColorCard(props) {
|
|
|
62
90
|
css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
|
|
63
91
|
onClick: handleClick,
|
|
64
92
|
onMouseDown: handleMouseDown,
|
|
65
|
-
onKeyDown: handleKeyDown,
|
|
66
|
-
role:
|
|
93
|
+
onKeyDown: fg('platform_color_palette_menu_timeline_bar_a11y') ? handleKeyDown : handleKeyDownOld,
|
|
94
|
+
role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'menuitemradio' : 'radio',
|
|
67
95
|
"aria-checked": selected,
|
|
68
96
|
"aria-label": label,
|
|
69
97
|
tabIndex: 0,
|
|
@@ -82,7 +110,7 @@ var ColorCard = function ColorCard(props) {
|
|
|
82
110
|
label: ""
|
|
83
111
|
})))));
|
|
84
112
|
});
|
|
85
|
-
};
|
|
113
|
+
});
|
|
86
114
|
export default ColorCard;
|
|
87
115
|
var colorCardOptionTabbingStyles = css({
|
|
88
116
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
1
3
|
/**
|
|
2
4
|
* @jsxRuntime classic
|
|
3
5
|
* @jsx jsx
|
|
4
6
|
*/
|
|
7
|
+
import { useState, useCallback, useEffect, useMemo } from 'react';
|
|
5
8
|
import { Mode } from '../types';
|
|
6
9
|
import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
7
10
|
import ColorCard from './ColorCard';
|
|
11
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
12
|
import { getOptions, getWidth } from '../utils';
|
|
9
13
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
14
|
import { css, jsx } from '@emotion/react';
|
|
@@ -30,12 +34,15 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
|
|
|
30
34
|
attributes: {
|
|
31
35
|
componentName: 'color-picker',
|
|
32
36
|
packageName: "@atlaskit/color-picker",
|
|
33
|
-
packageVersion: "3.2.
|
|
37
|
+
packageVersion: "3.2.23"
|
|
34
38
|
}
|
|
35
39
|
})(createAnalyticsEvent);
|
|
36
40
|
}
|
|
37
41
|
return undefined;
|
|
38
42
|
};
|
|
43
|
+
var colorCardRefs = useMemo(function () {
|
|
44
|
+
return [];
|
|
45
|
+
}, []);
|
|
39
46
|
var handleChange = function handleChange(value) {
|
|
40
47
|
onChange(value, changeAnalyticsCaller());
|
|
41
48
|
};
|
|
@@ -43,9 +50,43 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
|
|
|
43
50
|
options = _getOptions.options,
|
|
44
51
|
selectedValue = _getOptions.value;
|
|
45
52
|
var fullLabel = "".concat(label, ", ").concat(selectedValue.label, " selected");
|
|
53
|
+
var _useState = useState(selectedValue.value ? options.findIndex(function (_ref2) {
|
|
54
|
+
var value = _ref2.value;
|
|
55
|
+
return value === selectedValue.value;
|
|
56
|
+
}) : 0),
|
|
57
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
58
|
+
focusedIndex = _useState2[0],
|
|
59
|
+
setFocusedIndex = _useState2[1];
|
|
60
|
+
useEffect(function () {
|
|
61
|
+
var _colorCardRefs$focuse;
|
|
62
|
+
(_colorCardRefs$focuse = colorCardRefs[focusedIndex]) === null || _colorCardRefs$focuse === void 0 || _colorCardRefs$focuse.focus();
|
|
63
|
+
}, [focusedIndex, colorCardRefs]);
|
|
64
|
+
var handleKeyDown = useCallback(function (event) {
|
|
65
|
+
var numItems = options.length;
|
|
66
|
+
switch (event.key) {
|
|
67
|
+
case 'ArrowRight':
|
|
68
|
+
case 'ArrowDown':
|
|
69
|
+
setFocusedIndex(function (prevIndex) {
|
|
70
|
+
return (prevIndex + 1) % numItems;
|
|
71
|
+
});
|
|
72
|
+
break;
|
|
73
|
+
case 'ArrowLeft':
|
|
74
|
+
case 'ArrowUp':
|
|
75
|
+
setFocusedIndex(function (prevIndex) {
|
|
76
|
+
return (prevIndex - 1 + numItems) % numItems;
|
|
77
|
+
});
|
|
78
|
+
break;
|
|
79
|
+
default:
|
|
80
|
+
break;
|
|
81
|
+
}
|
|
82
|
+
}, [setFocusedIndex, options]);
|
|
83
|
+
var onTabPress = function onTabPress() {
|
|
84
|
+
var backwards = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
85
|
+
setFocusedIndex(backwards ? 0 : options.length - 1);
|
|
86
|
+
};
|
|
46
87
|
return jsx("div", {
|
|
47
88
|
"aria-label": fullLabel,
|
|
48
|
-
role:
|
|
89
|
+
role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup'
|
|
49
90
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
50
91
|
,
|
|
51
92
|
css: [colorPaletteMenuStyles, mode === Mode.Standard && colorPaletteMenuStandardStyles],
|
|
@@ -57,27 +98,32 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
|
|
|
57
98
|
css: [colorPaletteContainerStyles,
|
|
58
99
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
59
100
|
mode === Mode.Compact && colorPaletteContainerCompactStyles]
|
|
60
|
-
}, options.map(function (
|
|
61
|
-
var label =
|
|
62
|
-
value =
|
|
101
|
+
}, options.map(function (_ref3, index) {
|
|
102
|
+
var label = _ref3.label,
|
|
103
|
+
value = _ref3.value;
|
|
63
104
|
return jsx("div", {
|
|
64
105
|
css: colorCardWrapperStyles,
|
|
65
106
|
key: value
|
|
66
|
-
}, jsx(ColorCard, {
|
|
107
|
+
}, jsx(ColorCard, _extends({
|
|
67
108
|
label: label,
|
|
68
109
|
value: value,
|
|
69
110
|
checkMarkColor: checkMarkColor,
|
|
70
111
|
isOption: true,
|
|
71
112
|
selected: value === selectedValue.value,
|
|
72
|
-
onClick: handleChange
|
|
73
|
-
|
|
74
|
-
|
|
113
|
+
onClick: handleChange
|
|
114
|
+
}, fg('platform_color_palette_menu_timeline_bar_a11y') && {
|
|
115
|
+
ref: function ref(_ref4) {
|
|
116
|
+
return colorCardRefs[index] = _ref4;
|
|
117
|
+
},
|
|
118
|
+
onTabPress: onTabPress,
|
|
119
|
+
onKeyDown: handleKeyDown
|
|
120
|
+
})));
|
|
75
121
|
})));
|
|
76
122
|
};
|
|
77
123
|
export default withAnalyticsContext({
|
|
78
124
|
componentName: 'color-picker',
|
|
79
125
|
packageName: "@atlaskit/color-picker",
|
|
80
|
-
packageVersion: "3.2.
|
|
126
|
+
packageVersion: "3.2.23"
|
|
81
127
|
})(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
|
|
82
128
|
var colorCardWrapperStyles = css({
|
|
83
129
|
display: 'flex',
|
|
@@ -34,7 +34,7 @@ var defaultPopperProps = {
|
|
|
34
34
|
placement: 'bottom-start'
|
|
35
35
|
};
|
|
36
36
|
var packageName = "@atlaskit/color-picker";
|
|
37
|
-
var packageVersion = "3.2.
|
|
37
|
+
var packageVersion = "3.2.23";
|
|
38
38
|
var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
|
|
39
39
|
_inherits(ColorPickerWithoutAnalyticsBase, _React$Component);
|
|
40
40
|
var _super = _createSuper(ColorPickerWithoutAnalyticsBase);
|
|
@@ -108,6 +108,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
|
|
|
108
108
|
popperProps = _this$props$popperPro === void 0 ? defaultPopperProps : _this$props$popperPro,
|
|
109
109
|
_this$props$label = _this$props.label,
|
|
110
110
|
label = _this$props$label === void 0 ? 'Color picker' : _this$props$label,
|
|
111
|
+
triggerId = _this$props.triggerId,
|
|
111
112
|
selectedColourSwatchSize = _this$props.selectedColourSwatchSize,
|
|
112
113
|
_this$props$showDefau = _this$props.showDefaultSwatchColor,
|
|
113
114
|
showDefaultSwatchColor = _this$props$showDefau === void 0 ? true : _this$props$showDefau,
|
|
@@ -128,7 +129,8 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
|
|
|
128
129
|
label: fullLabel,
|
|
129
130
|
expanded: isOpen,
|
|
130
131
|
swatchSize: selectedColourSwatchSize,
|
|
131
|
-
isDisabled: isDisabledSelectedSwatch
|
|
132
|
+
isDisabled: isDisabledSelectedSwatch,
|
|
133
|
+
id: triggerId
|
|
132
134
|
})));
|
|
133
135
|
},
|
|
134
136
|
popperProps: popperProps,
|
|
@@ -14,7 +14,8 @@ var ColorCard = function ColorCard(_ref) {
|
|
|
14
14
|
onClick = _ref.onClick,
|
|
15
15
|
_ref$swatchSize = _ref.swatchSize,
|
|
16
16
|
swatchSize = _ref$swatchSize === void 0 ? 'default' : _ref$swatchSize,
|
|
17
|
-
isDisabled = _ref.isDisabled
|
|
17
|
+
isDisabled = _ref.isDisabled,
|
|
18
|
+
id = _ref.id;
|
|
18
19
|
var handleMouseDown = useCallback(function (event) {
|
|
19
20
|
event.preventDefault();
|
|
20
21
|
}, []);
|
|
@@ -35,7 +36,8 @@ var ColorCard = function ColorCard(_ref) {
|
|
|
35
36
|
"aria-label": label,
|
|
36
37
|
"aria-expanded": expanded,
|
|
37
38
|
"aria-haspopup": true,
|
|
38
|
-
type: "button"
|
|
39
|
+
type: "button",
|
|
40
|
+
id: id
|
|
39
41
|
}, jsx("span", {
|
|
40
42
|
css: colorCardWrapperStyles
|
|
41
43
|
}, jsx("span", {
|
|
@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
4
4
|
* @jsx jsx
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
8
|
import ColorCard from './ColorCard';
|
|
8
9
|
import { getWidth } from '../utils';
|
|
9
10
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
@@ -14,7 +15,7 @@ export var MenuList = function MenuList(props) {
|
|
|
14
15
|
children = props.children;
|
|
15
16
|
return jsx("div", {
|
|
16
17
|
css: colorPaletteContainerStyles,
|
|
17
|
-
role:
|
|
18
|
+
role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup',
|
|
18
19
|
style: {
|
|
19
20
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
20
21
|
maxWidth: cols ? getWidth(cols) : undefined
|
|
@@ -1,14 +1,22 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import React, { type KeyboardEventHandler } from 'react';
|
|
2
6
|
export interface Props {
|
|
3
7
|
value: string;
|
|
4
8
|
label: string;
|
|
5
9
|
onClick?: (value: string) => void;
|
|
6
|
-
onKeyDown?:
|
|
10
|
+
onKeyDown?: KeyboardEventHandler<HTMLElement>;
|
|
7
11
|
checkMarkColor?: string;
|
|
8
12
|
selected?: boolean;
|
|
9
13
|
focused?: boolean;
|
|
10
14
|
isOption?: boolean;
|
|
11
15
|
isTabbing?: boolean;
|
|
16
|
+
onTabPress?: (backwards: boolean) => void;
|
|
12
17
|
}
|
|
13
|
-
|
|
18
|
+
export type ColorCardRef = {
|
|
19
|
+
focus: () => void;
|
|
20
|
+
};
|
|
21
|
+
declare const ColorCard: React.ForwardRefExoticComponent<Props & React.RefAttributes<ColorCardRef>>;
|
|
14
22
|
export default ColorCard;
|
|
@@ -9,6 +9,8 @@ import type { WrappedComponentProps } from 'react-intl-next';
|
|
|
9
9
|
export interface Props {
|
|
10
10
|
/** color picker button label */
|
|
11
11
|
label?: string;
|
|
12
|
+
/** trigger id for accessability labelling */
|
|
13
|
+
triggerId?: string;
|
|
12
14
|
/** list of available colors */
|
|
13
15
|
palette: Palette;
|
|
14
16
|
/** selected color */
|
|
@@ -33,5 +35,5 @@ export interface Props {
|
|
|
33
35
|
export declare const ColorPickerWithoutAnalytics: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
|
|
34
36
|
WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
|
|
35
37
|
};
|
|
36
|
-
declare const _default: React.ForwardRefExoticComponent<Pick<Omit<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch" | "forwardedRef"> & React.RefAttributes<any>>;
|
|
38
|
+
declare const _default: React.ForwardRefExoticComponent<Pick<Omit<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "triggerId" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch" | "forwardedRef"> & React.RefAttributes<any>>;
|
|
37
39
|
export default _default;
|
|
@@ -7,6 +7,7 @@ export interface Props {
|
|
|
7
7
|
expanded?: boolean;
|
|
8
8
|
swatchSize?: SwatchSize;
|
|
9
9
|
isDisabled?: boolean;
|
|
10
|
+
id?: string;
|
|
10
11
|
}
|
|
11
|
-
declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, }: Props) => jsx.JSX.Element;
|
|
12
|
+
declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, id, }: Props) => jsx.JSX.Element;
|
|
12
13
|
export default ColorCard;
|
|
@@ -1,14 +1,22 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import React, { type KeyboardEventHandler } from 'react';
|
|
2
6
|
export interface Props {
|
|
3
7
|
value: string;
|
|
4
8
|
label: string;
|
|
5
9
|
onClick?: (value: string) => void;
|
|
6
|
-
onKeyDown?:
|
|
10
|
+
onKeyDown?: KeyboardEventHandler<HTMLElement>;
|
|
7
11
|
checkMarkColor?: string;
|
|
8
12
|
selected?: boolean;
|
|
9
13
|
focused?: boolean;
|
|
10
14
|
isOption?: boolean;
|
|
11
15
|
isTabbing?: boolean;
|
|
16
|
+
onTabPress?: (backwards: boolean) => void;
|
|
12
17
|
}
|
|
13
|
-
|
|
18
|
+
export type ColorCardRef = {
|
|
19
|
+
focus: () => void;
|
|
20
|
+
};
|
|
21
|
+
declare const ColorCard: React.ForwardRefExoticComponent<Props & React.RefAttributes<ColorCardRef>>;
|
|
14
22
|
export default ColorCard;
|
|
@@ -9,6 +9,8 @@ import type { WrappedComponentProps } from 'react-intl-next';
|
|
|
9
9
|
export interface Props {
|
|
10
10
|
/** color picker button label */
|
|
11
11
|
label?: string;
|
|
12
|
+
/** trigger id for accessability labelling */
|
|
13
|
+
triggerId?: string;
|
|
12
14
|
/** list of available colors */
|
|
13
15
|
palette: Palette;
|
|
14
16
|
/** selected color */
|
|
@@ -33,5 +35,5 @@ export interface Props {
|
|
|
33
35
|
export declare const ColorPickerWithoutAnalytics: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
|
|
34
36
|
WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
|
|
35
37
|
};
|
|
36
|
-
declare const _default: React.ForwardRefExoticComponent<Pick<Omit<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch" | "forwardedRef"> & React.RefAttributes<any>>;
|
|
38
|
+
declare const _default: React.ForwardRefExoticComponent<Pick<Omit<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "triggerId" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch" | "forwardedRef"> & React.RefAttributes<any>>;
|
|
37
39
|
export default _default;
|
|
@@ -7,6 +7,7 @@ export interface Props {
|
|
|
7
7
|
expanded?: boolean;
|
|
8
8
|
swatchSize?: SwatchSize;
|
|
9
9
|
isDisabled?: boolean;
|
|
10
|
+
id?: string;
|
|
10
11
|
}
|
|
11
|
-
declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, }: Props) => jsx.JSX.Element;
|
|
12
|
+
declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, id, }: Props) => jsx.JSX.Element;
|
|
12
13
|
export default ColorCard;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/color-picker",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.23",
|
|
4
4
|
"description": "Jira Color Picker Component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -29,15 +29,17 @@
|
|
|
29
29
|
],
|
|
30
30
|
"website": {
|
|
31
31
|
"name": "Color Picker"
|
|
32
|
-
}
|
|
32
|
+
},
|
|
33
|
+
"runReact18": true
|
|
33
34
|
},
|
|
34
35
|
"dependencies": {
|
|
35
|
-
"@atlaskit/analytics-next": "^
|
|
36
|
-
"@atlaskit/icon": "^22.
|
|
37
|
-
"@atlaskit/
|
|
38
|
-
"@atlaskit/
|
|
39
|
-
"@atlaskit/
|
|
40
|
-
"@atlaskit/
|
|
36
|
+
"@atlaskit/analytics-next": "^10.1.0",
|
|
37
|
+
"@atlaskit/icon": "^22.12.0",
|
|
38
|
+
"@atlaskit/platform-feature-flags": "0.3.0",
|
|
39
|
+
"@atlaskit/select": "^17.13.0",
|
|
40
|
+
"@atlaskit/theme": "^12.12.0",
|
|
41
|
+
"@atlaskit/tokens": "^1.58.0",
|
|
42
|
+
"@atlaskit/tooltip": "^18.7.0",
|
|
41
43
|
"@babel/runtime": "^7.0.0",
|
|
42
44
|
"@emotion/react": "^11.7.1",
|
|
43
45
|
"memoize-one": "^6.0.0",
|
|
@@ -49,7 +51,7 @@
|
|
|
49
51
|
},
|
|
50
52
|
"devDependencies": {
|
|
51
53
|
"@af/visual-regression": "*",
|
|
52
|
-
"@atlaskit/primitives": "^
|
|
54
|
+
"@atlaskit/primitives": "^12.0.0",
|
|
53
55
|
"@atlaskit/visual-regression": "*",
|
|
54
56
|
"@testing-library/react": "^12.1.5",
|
|
55
57
|
"@testing-library/user-event": "^14.4.3",
|
|
@@ -75,5 +77,10 @@
|
|
|
75
77
|
"spacing"
|
|
76
78
|
]
|
|
77
79
|
}
|
|
80
|
+
},
|
|
81
|
+
"platform-feature-flags": {
|
|
82
|
+
"platform_color_palette_menu_timeline_bar_a11y": {
|
|
83
|
+
"type": "boolean"
|
|
84
|
+
}
|
|
78
85
|
}
|
|
79
86
|
}
|