@atlaskit/color-picker 5.3.11 → 5.3.12
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 +6 -0
- package/dist/cjs/components/ColorPaletteMenu.js +4 -3
- package/dist/cjs/components/ColorPicker.js +5 -2
- package/dist/cjs/components/Trigger.js +2 -1
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/messages.js +3 -2
- package/dist/es2019/components/ColorPaletteMenu.js +4 -3
- package/dist/es2019/components/ColorPicker.js +5 -2
- package/dist/es2019/components/Trigger.js +2 -1
- package/dist/es2019/index.js +2 -4
- package/dist/es2019/messages.js +3 -2
- package/dist/esm/components/ColorPaletteMenu.js +4 -3
- package/dist/esm/components/ColorPicker.js +5 -2
- package/dist/esm/components/Trigger.js +2 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/messages.js +3 -2
- package/dist/types/components/ColorPaletteMenu.d.ts +4 -4
- package/dist/types/components/ColorPicker.d.ts +7 -5
- package/dist/types/components/Trigger.d.ts +2 -1
- package/dist/types/index.d.ts +2 -1
- package/dist/types/messages.d.ts +2 -2
- package/dist/types/utils.d.ts +4 -3
- package/dist/types-ts4.5/components/ColorPaletteMenu.d.ts +4 -4
- package/dist/types-ts4.5/components/ColorPicker.d.ts +7 -5
- package/dist/types-ts4.5/components/Trigger.d.ts +2 -1
- package/dist/types-ts4.5/index.d.ts +2 -1
- package/dist/types-ts4.5/messages.d.ts +2 -2
- package/dist/types-ts4.5/utils.d.ts +4 -3
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -61,7 +61,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
|
|
|
61
61
|
attributes: {
|
|
62
62
|
componentName: 'color-picker',
|
|
63
63
|
packageName: "@atlaskit/color-picker",
|
|
64
|
-
packageVersion: "
|
|
64
|
+
packageVersion: "0.0.0-development"
|
|
65
65
|
}
|
|
66
66
|
})(createAnalyticsEvent);
|
|
67
67
|
}
|
|
@@ -143,11 +143,12 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
|
|
|
143
143
|
}));
|
|
144
144
|
})));
|
|
145
145
|
};
|
|
146
|
-
var
|
|
146
|
+
var _default_1 = (0, _analyticsNext.withAnalyticsContext)({
|
|
147
147
|
componentName: 'color-picker',
|
|
148
148
|
packageName: "@atlaskit/color-picker",
|
|
149
|
-
packageVersion: "
|
|
149
|
+
packageVersion: "0.0.0-development"
|
|
150
150
|
})((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
|
|
151
|
+
var _default = exports.default = _default_1;
|
|
151
152
|
var colorCardWrapperStyles = null;
|
|
152
153
|
var colorPaletteContainerStyles = null;
|
|
153
154
|
var colorPaletteContainerCompactStyles = null;
|
|
@@ -40,7 +40,7 @@ var defaultPopperProps = {
|
|
|
40
40
|
placement: 'bottom-start'
|
|
41
41
|
};
|
|
42
42
|
var packageName = "@atlaskit/color-picker";
|
|
43
|
-
var packageVersion = "
|
|
43
|
+
var packageVersion = "0.0.0-development";
|
|
44
44
|
var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
|
|
45
45
|
function ColorPickerWithoutAnalyticsBase() {
|
|
46
46
|
var _this;
|
|
@@ -113,6 +113,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
|
|
|
113
113
|
popperProps = _this$props$popperPro === void 0 ? defaultPopperProps : _this$props$popperPro,
|
|
114
114
|
_this$props$label = _this$props.label,
|
|
115
115
|
label = _this$props$label === void 0 ? 'Color picker' : _this$props$label,
|
|
116
|
+
tooltipContent = _this$props.tooltipContent,
|
|
116
117
|
triggerId = _this$props.triggerId,
|
|
117
118
|
selectedColourSwatchSize = _this$props.selectedColourSwatchSize,
|
|
118
119
|
_this$props$showDefau = _this$props.showDefaultSwatchColor,
|
|
@@ -135,6 +136,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
|
|
|
135
136
|
className: (0, _runtime.ax)(["_1e0c1o8l"])
|
|
136
137
|
}, /*#__PURE__*/_react.default.createElement(_Trigger.default, (0, _extends2.default)({}, value, {
|
|
137
138
|
label: fullLabel,
|
|
139
|
+
tooltipContent: tooltipContent,
|
|
138
140
|
expanded: isOpen,
|
|
139
141
|
swatchSize: selectedColourSwatchSize,
|
|
140
142
|
isDisabled: isDisabledSelectedSwatch,
|
|
@@ -169,9 +171,10 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
|
|
|
169
171
|
}]);
|
|
170
172
|
}(_react.default.Component);
|
|
171
173
|
var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = (0, _reactIntlNext.injectIntl)(ColorPickerWithoutAnalyticsBase);
|
|
172
|
-
var
|
|
174
|
+
var _default_1 = (0, _analyticsNext.withAnalyticsContext)({
|
|
173
175
|
componentName: 'color-picker',
|
|
174
176
|
packageName: packageName,
|
|
175
177
|
packageVersion: packageVersion
|
|
176
178
|
})((0, _analyticsNext.withAnalyticsEvents)()(ColorPickerWithoutAnalytics));
|
|
179
|
+
var _default = exports.default = _default_1;
|
|
177
180
|
var colorCardWrapperStyles = null;
|
|
@@ -22,6 +22,7 @@ var ColorCard = function ColorCard(_ref) {
|
|
|
22
22
|
swatchSize = _ref$swatchSize === void 0 ? 'default' : _ref$swatchSize,
|
|
23
23
|
isDisabled = _ref.isDisabled,
|
|
24
24
|
id = _ref.id,
|
|
25
|
+
tooltipContent = _ref.tooltipContent,
|
|
25
26
|
_ref$variant = _ref.variant,
|
|
26
27
|
variant = _ref$variant === void 0 ? 'fill' : _ref$variant;
|
|
27
28
|
var handleMouseDown = (0, _react.useCallback)(function (event) {
|
|
@@ -40,7 +41,7 @@ var ColorCard = function ColorCard(_ref) {
|
|
|
40
41
|
backgroundColor: value || 'transparent'
|
|
41
42
|
};
|
|
42
43
|
return /*#__PURE__*/React.createElement(_tooltip.default, {
|
|
43
|
-
content: label
|
|
44
|
+
content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : label
|
|
44
45
|
}, /*#__PURE__*/React.createElement("button", {
|
|
45
46
|
disabled: isDisabled,
|
|
46
47
|
onClick: handleClick,
|
package/dist/cjs/index.js
CHANGED
|
@@ -27,6 +27,6 @@ var _ColorPicker = _interopRequireWildcard(require("./components/ColorPicker"));
|
|
|
27
27
|
var _types = require("./types");
|
|
28
28
|
var _ColorPaletteMenu = _interopRequireWildcard(require("./components/ColorPaletteMenu"));
|
|
29
29
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
30
|
-
var Compact = exports.Compact = _types.Mode.Compact
|
|
31
|
-
|
|
30
|
+
var Compact = exports.Compact = _types.Mode.Compact;
|
|
31
|
+
var Standard = exports.Standard = _types.Mode.Standard;
|
|
32
32
|
var _default = exports.default = _ColorPicker.default;
|
package/dist/cjs/messages.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _reactIntlNext = require("react-intl-next");
|
|
8
|
-
var
|
|
8
|
+
var _default_1 = (0, _reactIntlNext.defineMessages)({
|
|
9
9
|
colorPickerAriaLabel: {
|
|
10
10
|
id: 'jira.color-picker.src.color-picker-aria-label',
|
|
11
11
|
defaultMessage: '{color} selected, {message}',
|
|
@@ -16,4 +16,5 @@ var _default = exports.default = (0, _reactIntlNext.defineMessages)({
|
|
|
16
16
|
defaultMessage: 'Color picker list',
|
|
17
17
|
description: 'This text is used as aria-label text for the listbox element in color picker component'
|
|
18
18
|
}
|
|
19
|
-
});
|
|
19
|
+
});
|
|
20
|
+
var _default = exports.default = _default_1;
|
|
@@ -42,7 +42,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
|
|
|
42
42
|
attributes: {
|
|
43
43
|
componentName: 'color-picker',
|
|
44
44
|
packageName: "@atlaskit/color-picker",
|
|
45
|
-
packageVersion: "
|
|
45
|
+
packageVersion: "0.0.0-development"
|
|
46
46
|
}
|
|
47
47
|
})(createAnalyticsEvent);
|
|
48
48
|
}
|
|
@@ -117,11 +117,12 @@ export const ColorPaletteMenuWithoutAnalytics = ({
|
|
|
117
117
|
variant: variant
|
|
118
118
|
})))));
|
|
119
119
|
};
|
|
120
|
-
|
|
120
|
+
const _default_1 = withAnalyticsContext({
|
|
121
121
|
componentName: 'color-picker',
|
|
122
122
|
packageName: "@atlaskit/color-picker",
|
|
123
|
-
packageVersion: "
|
|
123
|
+
packageVersion: "0.0.0-development"
|
|
124
124
|
})(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
|
|
125
|
+
export default _default_1;
|
|
125
126
|
const colorCardWrapperStyles = null;
|
|
126
127
|
const colorPaletteContainerStyles = null;
|
|
127
128
|
const colorPaletteContainerCompactStyles = null;
|
|
@@ -25,7 +25,7 @@ const defaultPopperProps = {
|
|
|
25
25
|
placement: 'bottom-start'
|
|
26
26
|
};
|
|
27
27
|
const packageName = "@atlaskit/color-picker";
|
|
28
|
-
const packageVersion = "
|
|
28
|
+
const packageVersion = "0.0.0-development";
|
|
29
29
|
class ColorPickerWithoutAnalyticsBase extends React.Component {
|
|
30
30
|
constructor(...args) {
|
|
31
31
|
super(...args);
|
|
@@ -89,6 +89,7 @@ class ColorPickerWithoutAnalyticsBase extends React.Component {
|
|
|
89
89
|
cols,
|
|
90
90
|
popperProps = defaultPopperProps,
|
|
91
91
|
label = 'Color picker',
|
|
92
|
+
tooltipContent,
|
|
92
93
|
triggerId,
|
|
93
94
|
selectedColourSwatchSize,
|
|
94
95
|
showDefaultSwatchColor = true,
|
|
@@ -111,6 +112,7 @@ class ColorPickerWithoutAnalyticsBase extends React.Component {
|
|
|
111
112
|
className: ax(["_1e0c1o8l"])
|
|
112
113
|
}, /*#__PURE__*/React.createElement(Trigger, _extends({}, value, {
|
|
113
114
|
label: fullLabel,
|
|
115
|
+
tooltipContent: tooltipContent,
|
|
114
116
|
expanded: isOpen,
|
|
115
117
|
swatchSize: selectedColourSwatchSize,
|
|
116
118
|
isDisabled: isDisabledSelectedSwatch,
|
|
@@ -143,9 +145,10 @@ class ColorPickerWithoutAnalyticsBase extends React.Component {
|
|
|
143
145
|
}
|
|
144
146
|
}
|
|
145
147
|
export const ColorPickerWithoutAnalytics = injectIntl(ColorPickerWithoutAnalyticsBase);
|
|
146
|
-
|
|
148
|
+
const _default_1 = withAnalyticsContext({
|
|
147
149
|
componentName: 'color-picker',
|
|
148
150
|
packageName,
|
|
149
151
|
packageVersion
|
|
150
152
|
})(withAnalyticsEvents()(ColorPickerWithoutAnalytics));
|
|
153
|
+
export default _default_1;
|
|
151
154
|
const colorCardWrapperStyles = null;
|
|
@@ -12,6 +12,7 @@ const ColorCard = ({
|
|
|
12
12
|
swatchSize = 'default',
|
|
13
13
|
isDisabled,
|
|
14
14
|
id,
|
|
15
|
+
tooltipContent,
|
|
15
16
|
variant = 'fill'
|
|
16
17
|
}) => {
|
|
17
18
|
const handleMouseDown = useCallback(event => {
|
|
@@ -30,7 +31,7 @@ const ColorCard = ({
|
|
|
30
31
|
backgroundColor: value || 'transparent'
|
|
31
32
|
};
|
|
32
33
|
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
33
|
-
content: label
|
|
34
|
+
content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : label
|
|
34
35
|
}, /*#__PURE__*/React.createElement("button", {
|
|
35
36
|
disabled: isDisabled,
|
|
36
37
|
onClick: handleClick,
|
package/dist/es2019/index.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import ColorPicker from './components/ColorPicker';
|
|
2
2
|
import { Mode } from './types';
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
Standard
|
|
6
|
-
} = Mode;
|
|
3
|
+
const Compact = Mode.Compact;
|
|
4
|
+
const Standard = Mode.Standard;
|
|
7
5
|
export { ColorPickerWithoutAnalytics } from './components/ColorPicker';
|
|
8
6
|
export { ColorPaletteMenuWithoutAnalytics } from './components/ColorPaletteMenu';
|
|
9
7
|
export default ColorPicker;
|
package/dist/es2019/messages.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineMessages } from 'react-intl-next';
|
|
2
|
-
|
|
2
|
+
const _default_1 = defineMessages({
|
|
3
3
|
colorPickerAriaLabel: {
|
|
4
4
|
id: 'jira.color-picker.src.color-picker-aria-label',
|
|
5
5
|
defaultMessage: '{color} selected, {message}',
|
|
@@ -10,4 +10,5 @@ export default defineMessages({
|
|
|
10
10
|
defaultMessage: 'Color picker list',
|
|
11
11
|
description: 'This text is used as aria-label text for the listbox element in color picker component'
|
|
12
12
|
}
|
|
13
|
-
});
|
|
13
|
+
});
|
|
14
|
+
export default _default_1;
|
|
@@ -52,7 +52,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
|
|
|
52
52
|
attributes: {
|
|
53
53
|
componentName: 'color-picker',
|
|
54
54
|
packageName: "@atlaskit/color-picker",
|
|
55
|
-
packageVersion: "
|
|
55
|
+
packageVersion: "0.0.0-development"
|
|
56
56
|
}
|
|
57
57
|
})(createAnalyticsEvent);
|
|
58
58
|
}
|
|
@@ -134,11 +134,12 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
|
|
|
134
134
|
}));
|
|
135
135
|
})));
|
|
136
136
|
};
|
|
137
|
-
|
|
137
|
+
var _default_1 = withAnalyticsContext({
|
|
138
138
|
componentName: 'color-picker',
|
|
139
139
|
packageName: "@atlaskit/color-picker",
|
|
140
|
-
packageVersion: "
|
|
140
|
+
packageVersion: "0.0.0-development"
|
|
141
141
|
})(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
|
|
142
|
+
export default _default_1;
|
|
142
143
|
var colorCardWrapperStyles = null;
|
|
143
144
|
var colorPaletteContainerStyles = null;
|
|
144
145
|
var colorPaletteContainerCompactStyles = null;
|
|
@@ -32,7 +32,7 @@ var defaultPopperProps = {
|
|
|
32
32
|
placement: 'bottom-start'
|
|
33
33
|
};
|
|
34
34
|
var packageName = "@atlaskit/color-picker";
|
|
35
|
-
var packageVersion = "
|
|
35
|
+
var packageVersion = "0.0.0-development";
|
|
36
36
|
var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
|
|
37
37
|
function ColorPickerWithoutAnalyticsBase() {
|
|
38
38
|
var _this;
|
|
@@ -105,6 +105,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
|
|
|
105
105
|
popperProps = _this$props$popperPro === void 0 ? defaultPopperProps : _this$props$popperPro,
|
|
106
106
|
_this$props$label = _this$props.label,
|
|
107
107
|
label = _this$props$label === void 0 ? 'Color picker' : _this$props$label,
|
|
108
|
+
tooltipContent = _this$props.tooltipContent,
|
|
108
109
|
triggerId = _this$props.triggerId,
|
|
109
110
|
selectedColourSwatchSize = _this$props.selectedColourSwatchSize,
|
|
110
111
|
_this$props$showDefau = _this$props.showDefaultSwatchColor,
|
|
@@ -127,6 +128,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
|
|
|
127
128
|
className: ax(["_1e0c1o8l"])
|
|
128
129
|
}, /*#__PURE__*/React.createElement(Trigger, _extends({}, value, {
|
|
129
130
|
label: fullLabel,
|
|
131
|
+
tooltipContent: tooltipContent,
|
|
130
132
|
expanded: isOpen,
|
|
131
133
|
swatchSize: selectedColourSwatchSize,
|
|
132
134
|
isDisabled: isDisabledSelectedSwatch,
|
|
@@ -161,9 +163,10 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
|
|
|
161
163
|
}]);
|
|
162
164
|
}(React.Component);
|
|
163
165
|
export var ColorPickerWithoutAnalytics = injectIntl(ColorPickerWithoutAnalyticsBase);
|
|
164
|
-
|
|
166
|
+
var _default_1 = withAnalyticsContext({
|
|
165
167
|
componentName: 'color-picker',
|
|
166
168
|
packageName: packageName,
|
|
167
169
|
packageVersion: packageVersion
|
|
168
170
|
})(withAnalyticsEvents()(ColorPickerWithoutAnalytics));
|
|
171
|
+
export default _default_1;
|
|
169
172
|
var colorCardWrapperStyles = null;
|
|
@@ -13,6 +13,7 @@ var ColorCard = function ColorCard(_ref) {
|
|
|
13
13
|
swatchSize = _ref$swatchSize === void 0 ? 'default' : _ref$swatchSize,
|
|
14
14
|
isDisabled = _ref.isDisabled,
|
|
15
15
|
id = _ref.id,
|
|
16
|
+
tooltipContent = _ref.tooltipContent,
|
|
16
17
|
_ref$variant = _ref.variant,
|
|
17
18
|
variant = _ref$variant === void 0 ? 'fill' : _ref$variant;
|
|
18
19
|
var handleMouseDown = useCallback(function (event) {
|
|
@@ -31,7 +32,7 @@ var ColorCard = function ColorCard(_ref) {
|
|
|
31
32
|
backgroundColor: value || 'transparent'
|
|
32
33
|
};
|
|
33
34
|
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
34
|
-
content: label
|
|
35
|
+
content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : label
|
|
35
36
|
}, /*#__PURE__*/React.createElement("button", {
|
|
36
37
|
disabled: isDisabled,
|
|
37
38
|
onClick: handleClick,
|
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import ColorPicker from './components/ColorPicker';
|
|
2
2
|
import { Mode } from './types';
|
|
3
|
-
var Compact = Mode.Compact
|
|
4
|
-
|
|
3
|
+
var Compact = Mode.Compact;
|
|
4
|
+
var Standard = Mode.Standard;
|
|
5
5
|
export { ColorPickerWithoutAnalytics } from './components/ColorPicker';
|
|
6
6
|
export { ColorPaletteMenuWithoutAnalytics } from './components/ColorPaletteMenu';
|
|
7
7
|
export default ColorPicker;
|
package/dist/esm/messages.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineMessages } from 'react-intl-next';
|
|
2
|
-
|
|
2
|
+
var _default_1 = defineMessages({
|
|
3
3
|
colorPickerAriaLabel: {
|
|
4
4
|
id: 'jira.color-picker.src.color-picker-aria-label',
|
|
5
5
|
defaultMessage: '{color} selected, {message}',
|
|
@@ -10,4 +10,5 @@ export default defineMessages({
|
|
|
10
10
|
defaultMessage: 'Color picker list',
|
|
11
11
|
description: 'This text is used as aria-label text for the listbox element in color picker component'
|
|
12
12
|
}
|
|
13
|
-
});
|
|
13
|
+
});
|
|
14
|
+
export default _default_1;
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
* @jsxRuntime classic
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
|
-
import { type KeyboardEvent, type MouseEvent, type Ref } from 'react';
|
|
5
|
+
import { type KeyboardEvent, type MouseEvent, type Ref, type ForwardRefExoticComponent, type RefAttributes } from 'react';
|
|
6
6
|
import { Mode, type Palette, type ColorCardVariant } from '../types';
|
|
7
|
-
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
7
|
+
import { type UIAnalyticsEvent, type WithAnalyticsEventsProps, type WithContextProps } from '@atlaskit/analytics-next';
|
|
8
8
|
export type Props = {
|
|
9
9
|
/** the toggle that decides if the selected color will be automatically focused on load */
|
|
10
10
|
autoFocus?: boolean;
|
|
@@ -34,5 +34,5 @@ export type Props = {
|
|
|
34
34
|
variant?: ColorCardVariant;
|
|
35
35
|
};
|
|
36
36
|
export declare const ColorPaletteMenuWithoutAnalytics: ({ autoFocus, isFocusLockEnabled, isInsideMenu, createAnalyticsEvent, onChange, palette, selectedColor, checkMarkColor, label, cols, mode, initialFocusRef, variant, }: Props) => JSX.Element;
|
|
37
|
-
declare const
|
|
38
|
-
export default
|
|
37
|
+
declare const _default_1: ForwardRefExoticComponent<Omit<Omit<Props, keyof WithAnalyticsEventsProps> & RefAttributes<any> & WithContextProps, "ref"> & RefAttributes<any>>;
|
|
38
|
+
export default _default_1;
|
|
@@ -5,7 +5,8 @@
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { type PopupSelectProps } from '@atlaskit/select';
|
|
7
7
|
import { type Palette, type SwatchSize, type ColorCardVariant } from '../types';
|
|
8
|
-
import type
|
|
8
|
+
import { type WithAnalyticsEventsProps, type WithContextProps } from '@atlaskit/analytics-next';
|
|
9
|
+
import type { WithIntlProps, WrappedComponentProps } from 'react-intl-next';
|
|
9
10
|
export interface Props {
|
|
10
11
|
/** color of checkmark on selected color */
|
|
11
12
|
checkMarkColor?: string;
|
|
@@ -33,15 +34,16 @@ export interface Props {
|
|
|
33
34
|
showDefaultSwatchColor?: boolean;
|
|
34
35
|
/** Test ID */
|
|
35
36
|
testId?: string;
|
|
37
|
+
tooltipContent?: string;
|
|
36
38
|
/** trigger id for accessability labelling */
|
|
37
39
|
triggerId?: string;
|
|
38
40
|
/** Display filled or outline variant of the color */
|
|
39
41
|
variant?: ColorCardVariant;
|
|
40
42
|
}
|
|
41
|
-
export declare const ColorPickerWithoutAnalytics: React.FC<
|
|
43
|
+
export declare const ColorPickerWithoutAnalytics: React.FC<WithIntlProps<Props & WrappedComponentProps>> & {
|
|
42
44
|
WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
|
|
43
45
|
};
|
|
44
|
-
declare const
|
|
46
|
+
declare const _default_1: React.ForwardRefExoticComponent<Omit<Omit<Omit<Props & WrappedComponentProps, "intl"> & {
|
|
45
47
|
forwardedRef?: React.Ref<any>;
|
|
46
|
-
}, keyof
|
|
47
|
-
export default
|
|
48
|
+
}, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & WithContextProps, "ref"> & React.RefAttributes<any>>;
|
|
49
|
+
export default _default_1;
|
|
@@ -6,8 +6,9 @@ export interface Props {
|
|
|
6
6
|
label?: string;
|
|
7
7
|
onClick?: () => void;
|
|
8
8
|
swatchSize?: SwatchSize;
|
|
9
|
+
tooltipContent?: string;
|
|
9
10
|
value: string;
|
|
10
11
|
variant?: ColorCardVariant;
|
|
11
12
|
}
|
|
12
|
-
declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, id, variant, }: Props) => JSX.Element;
|
|
13
|
+
declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, id, tooltipContent, variant, }: Props) => JSX.Element;
|
|
13
14
|
export default ColorCard;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import ColorPicker from './components/ColorPicker';
|
|
2
2
|
import { Mode } from './types';
|
|
3
|
-
declare const Compact: Mode
|
|
3
|
+
declare const Compact: Mode.Compact;
|
|
4
|
+
declare const Standard: Mode.Standard;
|
|
4
5
|
export { ColorPickerWithoutAnalytics } from './components/ColorPicker';
|
|
5
6
|
export type { Props as ColorPickerProps } from './components/ColorPicker';
|
|
6
7
|
export { ColorPaletteMenuWithoutAnalytics } from './components/ColorPaletteMenu';
|
package/dist/types/messages.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const
|
|
1
|
+
declare const _default_1: {
|
|
2
2
|
colorPickerAriaLabel: {
|
|
3
3
|
id: string;
|
|
4
4
|
defaultMessage: string;
|
|
@@ -10,4 +10,4 @@ declare const _default: {
|
|
|
10
10
|
description: string;
|
|
11
11
|
};
|
|
12
12
|
};
|
|
13
|
-
export default
|
|
13
|
+
export default _default_1;
|
package/dist/types/utils.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { type MemoizedFn } from 'memoize-one';
|
|
2
|
+
import { Mode, type Color, type Palette } from './types';
|
|
2
3
|
export declare const getWidth: (cols: number, mode?: Mode) => number;
|
|
3
|
-
export declare const getOptions:
|
|
4
|
+
export declare const getOptions: MemoizedFn<(palette: Palette, selectedColor?: string, showDefaultSwatchColor?: boolean) => {
|
|
4
5
|
options: Palette;
|
|
5
|
-
value:
|
|
6
|
+
value: Color;
|
|
6
7
|
focusedItemIndex: number;
|
|
7
8
|
}>;
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
* @jsxRuntime classic
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
|
-
import { type KeyboardEvent, type MouseEvent, type Ref } from 'react';
|
|
5
|
+
import { type KeyboardEvent, type MouseEvent, type Ref, type ForwardRefExoticComponent, type RefAttributes } from 'react';
|
|
6
6
|
import { Mode, type Palette, type ColorCardVariant } from '../types';
|
|
7
|
-
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
7
|
+
import { type UIAnalyticsEvent, type WithAnalyticsEventsProps, type WithContextProps } from '@atlaskit/analytics-next';
|
|
8
8
|
export type Props = {
|
|
9
9
|
/** the toggle that decides if the selected color will be automatically focused on load */
|
|
10
10
|
autoFocus?: boolean;
|
|
@@ -34,5 +34,5 @@ export type Props = {
|
|
|
34
34
|
variant?: ColorCardVariant;
|
|
35
35
|
};
|
|
36
36
|
export declare const ColorPaletteMenuWithoutAnalytics: ({ autoFocus, isFocusLockEnabled, isInsideMenu, createAnalyticsEvent, onChange, palette, selectedColor, checkMarkColor, label, cols, mode, initialFocusRef, variant, }: Props) => JSX.Element;
|
|
37
|
-
declare const
|
|
38
|
-
export default
|
|
37
|
+
declare const _default_1: ForwardRefExoticComponent<Omit<Omit<Props, keyof WithAnalyticsEventsProps> & RefAttributes<any> & WithContextProps, "ref"> & RefAttributes<any>>;
|
|
38
|
+
export default _default_1;
|
|
@@ -5,7 +5,8 @@
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { type PopupSelectProps } from '@atlaskit/select';
|
|
7
7
|
import { type Palette, type SwatchSize, type ColorCardVariant } from '../types';
|
|
8
|
-
import type
|
|
8
|
+
import { type WithAnalyticsEventsProps, type WithContextProps } from '@atlaskit/analytics-next';
|
|
9
|
+
import type { WithIntlProps, WrappedComponentProps } from 'react-intl-next';
|
|
9
10
|
export interface Props {
|
|
10
11
|
/** color of checkmark on selected color */
|
|
11
12
|
checkMarkColor?: string;
|
|
@@ -33,15 +34,16 @@ export interface Props {
|
|
|
33
34
|
showDefaultSwatchColor?: boolean;
|
|
34
35
|
/** Test ID */
|
|
35
36
|
testId?: string;
|
|
37
|
+
tooltipContent?: string;
|
|
36
38
|
/** trigger id for accessability labelling */
|
|
37
39
|
triggerId?: string;
|
|
38
40
|
/** Display filled or outline variant of the color */
|
|
39
41
|
variant?: ColorCardVariant;
|
|
40
42
|
}
|
|
41
|
-
export declare const ColorPickerWithoutAnalytics: React.FC<
|
|
43
|
+
export declare const ColorPickerWithoutAnalytics: React.FC<WithIntlProps<Props & WrappedComponentProps>> & {
|
|
42
44
|
WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
|
|
43
45
|
};
|
|
44
|
-
declare const
|
|
46
|
+
declare const _default_1: React.ForwardRefExoticComponent<Omit<Omit<Omit<Props & WrappedComponentProps, "intl"> & {
|
|
45
47
|
forwardedRef?: React.Ref<any>;
|
|
46
|
-
}, keyof
|
|
47
|
-
export default
|
|
48
|
+
}, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & WithContextProps, "ref"> & React.RefAttributes<any>>;
|
|
49
|
+
export default _default_1;
|
|
@@ -6,8 +6,9 @@ export interface Props {
|
|
|
6
6
|
label?: string;
|
|
7
7
|
onClick?: () => void;
|
|
8
8
|
swatchSize?: SwatchSize;
|
|
9
|
+
tooltipContent?: string;
|
|
9
10
|
value: string;
|
|
10
11
|
variant?: ColorCardVariant;
|
|
11
12
|
}
|
|
12
|
-
declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, id, variant, }: Props) => JSX.Element;
|
|
13
|
+
declare const ColorCard: ({ value, label, expanded, onClick, swatchSize, isDisabled, id, tooltipContent, variant, }: Props) => JSX.Element;
|
|
13
14
|
export default ColorCard;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import ColorPicker from './components/ColorPicker';
|
|
2
2
|
import { Mode } from './types';
|
|
3
|
-
declare const Compact: Mode
|
|
3
|
+
declare const Compact: Mode.Compact;
|
|
4
|
+
declare const Standard: Mode.Standard;
|
|
4
5
|
export { ColorPickerWithoutAnalytics } from './components/ColorPicker';
|
|
5
6
|
export type { Props as ColorPickerProps } from './components/ColorPicker';
|
|
6
7
|
export { ColorPaletteMenuWithoutAnalytics } from './components/ColorPaletteMenu';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const
|
|
1
|
+
declare const _default_1: {
|
|
2
2
|
colorPickerAriaLabel: {
|
|
3
3
|
id: string;
|
|
4
4
|
defaultMessage: string;
|
|
@@ -10,4 +10,4 @@ declare const _default: {
|
|
|
10
10
|
description: string;
|
|
11
11
|
};
|
|
12
12
|
};
|
|
13
|
-
export default
|
|
13
|
+
export default _default_1;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { type MemoizedFn } from 'memoize-one';
|
|
2
|
+
import { Mode, type Color, type Palette } from './types';
|
|
2
3
|
export declare const getWidth: (cols: number, mode?: Mode) => number;
|
|
3
|
-
export declare const getOptions:
|
|
4
|
+
export declare const getOptions: MemoizedFn<(palette: Palette, selectedColor?: string, showDefaultSwatchColor?: boolean) => {
|
|
4
5
|
options: Palette;
|
|
5
|
-
value:
|
|
6
|
+
value: Color;
|
|
6
7
|
focusedItemIndex: number;
|
|
7
8
|
}>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/color-picker",
|
|
3
|
-
"version": "5.3.
|
|
3
|
+
"version": "5.3.12",
|
|
4
4
|
"description": "Jira Color Picker Component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"@atlaskit/icon": "^34.0.0",
|
|
34
34
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
35
35
|
"@atlaskit/select": "^21.10.0",
|
|
36
|
-
"@atlaskit/tokens": "^
|
|
36
|
+
"@atlaskit/tokens": "^12.0.0",
|
|
37
37
|
"@atlaskit/tooltip": "^21.1.0",
|
|
38
38
|
"@babel/runtime": "^7.0.0",
|
|
39
39
|
"@compiled/react": "^0.20.0",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"@af/integration-testing": "workspace:^",
|
|
49
49
|
"@af/visual-regression": "workspace:^",
|
|
50
50
|
"@atlaskit/primitives": "^18.1.0",
|
|
51
|
-
"@atlaskit/theme": "^
|
|
51
|
+
"@atlaskit/theme": "^23.0.0",
|
|
52
52
|
"@testing-library/react": "^16.3.0",
|
|
53
53
|
"@testing-library/user-event": "^14.4.3",
|
|
54
54
|
"ast-types": "^0.13.3",
|