@atlaskit/menu 2.3.0 → 2.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +605 -600
- package/__perf__/custom.tsx +1 -1
- package/__perf__/utils/interaction-tasks.tsx +2 -2
- package/codemods/0.7.0-change-css-fn-prop.tsx +3 -2
- package/codemods/2.1.0-invalid-link-item-to-button-item.tsx +2 -1
- package/codemods/helpers/generic.tsx +4 -3
- package/dist/cjs/menu-item/button-item.js +4 -1
- package/dist/cjs/menu-item/custom-item.js +4 -1
- package/dist/cjs/menu-item/heading-item.js +6 -4
- package/dist/cjs/menu-item/link-item.js +2 -0
- package/dist/cjs/menu-item/skeleton-heading-item.js +4 -1
- package/dist/cjs/menu-item/skeleton-item.js +4 -1
- package/dist/cjs/menu-section/menu-group.js +3 -1
- package/dist/cjs/menu-section/section.js +4 -0
- package/dist/es2019/menu-item/button-item.js +4 -1
- package/dist/es2019/menu-item/custom-item.js +4 -1
- package/dist/es2019/menu-item/heading-item.js +6 -4
- package/dist/es2019/menu-item/link-item.js +2 -0
- package/dist/es2019/menu-item/skeleton-heading-item.js +4 -1
- package/dist/es2019/menu-item/skeleton-item.js +4 -1
- package/dist/es2019/menu-section/menu-group.js +3 -1
- package/dist/es2019/menu-section/section.js +4 -0
- package/dist/esm/menu-item/button-item.js +4 -1
- package/dist/esm/menu-item/custom-item.js +4 -1
- package/dist/esm/menu-item/heading-item.js +6 -4
- package/dist/esm/menu-item/link-item.js +2 -0
- package/dist/esm/menu-item/skeleton-heading-item.js +4 -1
- package/dist/esm/menu-item/skeleton-item.js +4 -1
- package/dist/esm/menu-section/menu-group.js +3 -1
- package/dist/esm/menu-section/section.js +4 -0
- package/dist/types/internal/components/skeleton-shimmer.d.ts +1 -1
- package/dist/types/types.d.ts +2 -2
- package/dist/types-ts4.5/internal/components/skeleton-shimmer.d.ts +1 -1
- package/dist/types-ts4.5/types.d.ts +2 -2
- package/package.json +4 -6
package/__perf__/custom.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { fireEvent } from '@testing-library/dom';
|
|
2
2
|
import {
|
|
3
|
-
InteractionTaskArgs,
|
|
4
|
-
PublicInteractionTask,
|
|
3
|
+
type InteractionTaskArgs,
|
|
4
|
+
type PublicInteractionTask,
|
|
5
5
|
} from 'storybook-addon-performance';
|
|
6
6
|
|
|
7
7
|
export const interactionTasks: PublicInteractionTask[] = [
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { NodePath } from 'ast-types/lib/node-path';
|
|
2
|
-
import
|
|
1
|
+
import { type NodePath } from 'ast-types/lib/node-path';
|
|
2
|
+
import type {
|
|
3
3
|
ASTPath,
|
|
4
|
+
default as core,
|
|
4
5
|
ImportDeclaration,
|
|
5
6
|
ImportDefaultSpecifier,
|
|
6
7
|
ImportSpecifier,
|
|
@@ -9,7 +10,7 @@ import core, {
|
|
|
9
10
|
Node,
|
|
10
11
|
Program,
|
|
11
12
|
} from 'jscodeshift';
|
|
12
|
-
import { Collection } from 'jscodeshift/src/Collection';
|
|
13
|
+
import { type Collection } from 'jscodeshift/src/Collection';
|
|
13
14
|
|
|
14
15
|
export type Nullable<T> = T | null;
|
|
15
16
|
|
|
@@ -50,7 +50,9 @@ function (props, ref) {
|
|
|
50
50
|
}
|
|
51
51
|
(0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
|
|
52
52
|
);
|
|
53
|
-
return (0, _react2.jsx)(_menuItemPrimitive.default
|
|
53
|
+
return (0, _react2.jsx)(_menuItemPrimitive.default
|
|
54
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
55
|
+
, (0, _extends2.default)({
|
|
54
56
|
className: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
|
|
55
57
|
}, rest, {
|
|
56
58
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
@@ -76,6 +78,7 @@ function (props, ref) {
|
|
|
76
78
|
return (0, _react2.jsx)("button", (0, _extends2.default)({
|
|
77
79
|
"data-testid": testId
|
|
78
80
|
}, rest, {
|
|
81
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
79
82
|
className: className,
|
|
80
83
|
ref: ref,
|
|
81
84
|
disabled: isDisabled,
|
|
@@ -55,7 +55,9 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
|
|
|
55
55
|
}
|
|
56
56
|
(0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
|
|
57
57
|
);
|
|
58
|
-
return (0, _react2.jsx)(_menuItemPrimitive.default
|
|
58
|
+
return (0, _react2.jsx)(_menuItemPrimitive.default
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
60
|
+
, (0, _extends2.default)({
|
|
59
61
|
className: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
|
|
60
62
|
}, rest, {
|
|
61
63
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
@@ -81,6 +83,7 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
|
|
|
81
83
|
return (0, _react2.jsx)(Component, (0, _extends2.default)({
|
|
82
84
|
"data-testid": testId
|
|
83
85
|
}, rest, {
|
|
86
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
84
87
|
className: className,
|
|
85
88
|
ref: ref,
|
|
86
89
|
draggable: false,
|
|
@@ -21,13 +21,13 @@ var itemHeadingFontSize = _typography.headingSizes.h100.size;
|
|
|
21
21
|
var headingStyles = (0, _react2.css)({
|
|
22
22
|
color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
|
|
23
23
|
paddingBlock: "var(--ds-space-0, 0px)",
|
|
24
|
-
paddingInline: "var(--ds-space-200, 16px)"
|
|
24
|
+
paddingInline: "var(--ds-space-200, 16px)",
|
|
25
|
+
textTransform: 'uppercase'
|
|
25
26
|
});
|
|
26
27
|
var baseHeadingStyles = (0, _react2.css)({
|
|
27
28
|
fontSize: itemHeadingFontSize,
|
|
28
29
|
fontWeight: "var(--ds-font-weight-bold, 700)",
|
|
29
|
-
lineHeight: itemHeadingContentHeight / itemHeadingFontSize
|
|
30
|
-
textTransform: 'uppercase'
|
|
30
|
+
lineHeight: itemHeadingContentHeight / itemHeadingFontSize
|
|
31
31
|
});
|
|
32
32
|
var tokenizedHeadingStyles = (0, _react2.css)({
|
|
33
33
|
font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
|
|
@@ -62,7 +62,9 @@ var HeadingItem = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
62
62
|
"aria-level": headingLevel,
|
|
63
63
|
"data-testid": testId,
|
|
64
64
|
"data-ds--menu--heading-item": true,
|
|
65
|
-
id: id
|
|
65
|
+
id: id
|
|
66
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
67
|
+
,
|
|
66
68
|
className: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
|
|
67
69
|
}, rest), children);
|
|
68
70
|
});
|
|
@@ -56,6 +56,7 @@ function (props, ref) {
|
|
|
56
56
|
(0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
|
|
57
57
|
);
|
|
58
58
|
return (0, _react2.jsx)(_menuItemPrimitive.default, (0, _extends2.default)({}, rest, {
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
59
60
|
className: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
|
|
60
61
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
61
62
|
,
|
|
@@ -81,6 +82,7 @@ function (props, ref) {
|
|
|
81
82
|
return (0, _react2.jsx)("a", (0, _extends2.default)({
|
|
82
83
|
"data-testid": testId
|
|
83
84
|
}, rest, {
|
|
85
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
84
86
|
className: className,
|
|
85
87
|
href: isDisabled ? undefined : href,
|
|
86
88
|
draggable: false
|
|
@@ -59,7 +59,10 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
|
|
|
59
59
|
}, function (_ref2) {
|
|
60
60
|
var className = _ref2.className;
|
|
61
61
|
return (0, _react.jsx)("div", {
|
|
62
|
-
|
|
62
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
63
|
+
className: className
|
|
64
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
65
|
+
,
|
|
63
66
|
style: {
|
|
64
67
|
'--width': width
|
|
65
68
|
},
|
|
@@ -113,7 +113,10 @@ var SkeletonItem = function SkeletonItem(_ref) {
|
|
|
113
113
|
}, function (_ref2) {
|
|
114
114
|
var className = _ref2.className;
|
|
115
115
|
return (0, _react.jsx)("div", {
|
|
116
|
-
|
|
116
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
117
|
+
className: className
|
|
118
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
119
|
+
,
|
|
117
120
|
style: {
|
|
118
121
|
'--width': width
|
|
119
122
|
},
|
|
@@ -53,7 +53,9 @@ var MenuGroup = function MenuGroup(_ref) {
|
|
|
53
53
|
},
|
|
54
54
|
css: baseStyles,
|
|
55
55
|
"data-testid": testId,
|
|
56
|
-
role: role
|
|
56
|
+
role: role
|
|
57
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
58
|
+
,
|
|
57
59
|
className: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
|
|
58
60
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
59
61
|
}, rest))));
|
|
@@ -109,11 +109,14 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
109
109
|
var UNSAFE_headingOverrides = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn;
|
|
110
110
|
var content = isList ? (0, _react2.jsx)("ul", {
|
|
111
111
|
style: {
|
|
112
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
112
113
|
margin: 0,
|
|
114
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
113
115
|
padding: 0
|
|
114
116
|
}
|
|
115
117
|
}, _react.Children.map(_react.Children.toArray(children), function (child, index) {
|
|
116
118
|
return (0, _react2.jsx)("li", {
|
|
119
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
117
120
|
style: {
|
|
118
121
|
listStyleType: 'none',
|
|
119
122
|
margin: 0,
|
|
@@ -130,6 +133,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
130
133
|
"aria-hidden": true
|
|
131
134
|
}, title), content) : (0, _react2.jsx)(_react.Fragment, null, content);
|
|
132
135
|
return (0, _react2.jsx)("div", (0, _extends2.default)({}, rest, {
|
|
136
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
133
137
|
className: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className,
|
|
134
138
|
id: id
|
|
135
139
|
// NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
|
|
@@ -44,7 +44,9 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
|
|
|
44
44
|
}
|
|
45
45
|
propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
|
|
46
46
|
);
|
|
47
|
-
return jsx(MenuItemPrimitive
|
|
47
|
+
return jsx(MenuItemPrimitive
|
|
48
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
49
|
+
, _extends({
|
|
48
50
|
className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
|
|
49
51
|
}, rest, {
|
|
50
52
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
@@ -70,6 +72,7 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
|
|
|
70
72
|
}) => jsx("button", _extends({
|
|
71
73
|
"data-testid": testId
|
|
72
74
|
}, rest, {
|
|
75
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
73
76
|
className: className,
|
|
74
77
|
ref: ref,
|
|
75
78
|
disabled: isDisabled,
|
|
@@ -49,7 +49,9 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
|
|
|
49
49
|
}
|
|
50
50
|
propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
|
|
51
51
|
);
|
|
52
|
-
return jsx(MenuItemPrimitive
|
|
52
|
+
return jsx(MenuItemPrimitive
|
|
53
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
54
|
+
, _extends({
|
|
53
55
|
className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
|
|
54
56
|
}, rest, {
|
|
55
57
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
@@ -75,6 +77,7 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
|
|
|
75
77
|
}) => jsx(Component, _extends({
|
|
76
78
|
"data-testid": testId
|
|
77
79
|
}, rest, {
|
|
80
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
78
81
|
className: className,
|
|
79
82
|
ref: ref,
|
|
80
83
|
draggable: false,
|
|
@@ -12,13 +12,13 @@ const itemHeadingFontSize = headingSizes.h100.size;
|
|
|
12
12
|
const headingStyles = css({
|
|
13
13
|
color: `var(--ds-text-subtle, ${N300})`,
|
|
14
14
|
paddingBlock: "var(--ds-space-0, 0px)",
|
|
15
|
-
paddingInline: "var(--ds-space-200, 16px)"
|
|
15
|
+
paddingInline: "var(--ds-space-200, 16px)",
|
|
16
|
+
textTransform: 'uppercase'
|
|
16
17
|
});
|
|
17
18
|
const baseHeadingStyles = css({
|
|
18
19
|
fontSize: itemHeadingFontSize,
|
|
19
20
|
fontWeight: "var(--ds-font-weight-bold, 700)",
|
|
20
|
-
lineHeight: itemHeadingContentHeight / itemHeadingFontSize
|
|
21
|
-
textTransform: 'uppercase'
|
|
21
|
+
lineHeight: itemHeadingContentHeight / itemHeadingFontSize
|
|
22
22
|
});
|
|
23
23
|
const tokenizedHeadingStyles = css({
|
|
24
24
|
font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
|
|
@@ -56,7 +56,9 @@ const HeadingItem = /*#__PURE__*/memo(({
|
|
|
56
56
|
"aria-level": headingLevel,
|
|
57
57
|
"data-testid": testId,
|
|
58
58
|
"data-ds--menu--heading-item": true,
|
|
59
|
-
id: id
|
|
59
|
+
id: id
|
|
60
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
61
|
+
,
|
|
60
62
|
className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
|
|
61
63
|
}, rest), children);
|
|
62
64
|
});
|
|
@@ -50,6 +50,7 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
|
|
|
50
50
|
propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
|
|
51
51
|
);
|
|
52
52
|
return jsx(MenuItemPrimitive, _extends({}, rest, {
|
|
53
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
53
54
|
className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
|
|
54
55
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
55
56
|
,
|
|
@@ -75,6 +76,7 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
|
|
|
75
76
|
}) => jsx("a", _extends({
|
|
76
77
|
"data-testid": testId
|
|
77
78
|
}, rest, {
|
|
79
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
78
80
|
className: className,
|
|
79
81
|
href: isDisabled ? undefined : href,
|
|
80
82
|
draggable: false
|
|
@@ -51,7 +51,10 @@ const SkeletonHeadingItem = ({
|
|
|
51
51
|
}, ({
|
|
52
52
|
className
|
|
53
53
|
}) => jsx("div", {
|
|
54
|
-
|
|
54
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
55
|
+
className: className
|
|
56
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
57
|
+
,
|
|
55
58
|
style: {
|
|
56
59
|
'--width': width
|
|
57
60
|
},
|
|
@@ -107,7 +107,10 @@ const SkeletonItem = ({
|
|
|
107
107
|
}, ({
|
|
108
108
|
className
|
|
109
109
|
}) => jsx("div", {
|
|
110
|
-
|
|
110
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
111
|
+
className: className
|
|
112
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
113
|
+
,
|
|
111
114
|
style: {
|
|
112
115
|
'--width': width
|
|
113
116
|
},
|
|
@@ -47,7 +47,9 @@ const MenuGroup = ({
|
|
|
47
47
|
},
|
|
48
48
|
css: baseStyles,
|
|
49
49
|
"data-testid": testId,
|
|
50
|
-
role: role
|
|
50
|
+
role: role
|
|
51
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
52
|
+
,
|
|
51
53
|
className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
|
|
52
54
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
53
55
|
}, rest))));
|
|
@@ -104,10 +104,13 @@ const Section = /*#__PURE__*/forwardRef(({
|
|
|
104
104
|
const UNSAFE_headingOverrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn;
|
|
105
105
|
const content = isList ? jsx("ul", {
|
|
106
106
|
style: {
|
|
107
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
107
108
|
margin: 0,
|
|
109
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
108
110
|
padding: 0
|
|
109
111
|
}
|
|
110
112
|
}, Children.map(Children.toArray(children), (child, index) => jsx("li", {
|
|
113
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
111
114
|
style: {
|
|
112
115
|
listStyleType: 'none',
|
|
113
116
|
margin: 0,
|
|
@@ -123,6 +126,7 @@ const Section = /*#__PURE__*/forwardRef(({
|
|
|
123
126
|
"aria-hidden": true
|
|
124
127
|
}, title), content) : jsx(Fragment, null, content);
|
|
125
128
|
return jsx("div", _extends({}, rest, {
|
|
129
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
126
130
|
className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className,
|
|
127
131
|
id: id
|
|
128
132
|
// NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
|
|
@@ -43,7 +43,9 @@ function (props, ref) {
|
|
|
43
43
|
}
|
|
44
44
|
propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
|
|
45
45
|
);
|
|
46
|
-
return jsx(MenuItemPrimitive
|
|
46
|
+
return jsx(MenuItemPrimitive
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
48
|
+
, _extends({
|
|
47
49
|
className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
|
|
48
50
|
}, rest, {
|
|
49
51
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
@@ -69,6 +71,7 @@ function (props, ref) {
|
|
|
69
71
|
return jsx("button", _extends({
|
|
70
72
|
"data-testid": testId
|
|
71
73
|
}, rest, {
|
|
74
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
72
75
|
className: className,
|
|
73
76
|
ref: ref,
|
|
74
77
|
disabled: isDisabled,
|
|
@@ -49,7 +49,9 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
|
49
49
|
}
|
|
50
50
|
propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
|
|
51
51
|
);
|
|
52
|
-
return jsx(MenuItemPrimitive
|
|
52
|
+
return jsx(MenuItemPrimitive
|
|
53
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
54
|
+
, _extends({
|
|
53
55
|
className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
|
|
54
56
|
}, rest, {
|
|
55
57
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
@@ -75,6 +77,7 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
|
75
77
|
return jsx(Component, _extends({
|
|
76
78
|
"data-testid": testId
|
|
77
79
|
}, rest, {
|
|
80
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
78
81
|
className: className,
|
|
79
82
|
ref: ref,
|
|
80
83
|
draggable: false,
|
|
@@ -14,13 +14,13 @@ var itemHeadingFontSize = headingSizes.h100.size;
|
|
|
14
14
|
var headingStyles = css({
|
|
15
15
|
color: "var(--ds-text-subtle, ".concat(N300, ")"),
|
|
16
16
|
paddingBlock: "var(--ds-space-0, 0px)",
|
|
17
|
-
paddingInline: "var(--ds-space-200, 16px)"
|
|
17
|
+
paddingInline: "var(--ds-space-200, 16px)",
|
|
18
|
+
textTransform: 'uppercase'
|
|
18
19
|
});
|
|
19
20
|
var baseHeadingStyles = css({
|
|
20
21
|
fontSize: itemHeadingFontSize,
|
|
21
22
|
fontWeight: "var(--ds-font-weight-bold, 700)",
|
|
22
|
-
lineHeight: itemHeadingContentHeight / itemHeadingFontSize
|
|
23
|
-
textTransform: 'uppercase'
|
|
23
|
+
lineHeight: itemHeadingContentHeight / itemHeadingFontSize
|
|
24
24
|
});
|
|
25
25
|
var tokenizedHeadingStyles = css({
|
|
26
26
|
font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
|
|
@@ -55,7 +55,9 @@ var HeadingItem = /*#__PURE__*/memo(function (_ref) {
|
|
|
55
55
|
"aria-level": headingLevel,
|
|
56
56
|
"data-testid": testId,
|
|
57
57
|
"data-ds--menu--heading-item": true,
|
|
58
|
-
id: id
|
|
58
|
+
id: id
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
60
|
+
,
|
|
59
61
|
className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
|
|
60
62
|
}, rest), children);
|
|
61
63
|
});
|
|
@@ -49,6 +49,7 @@ function (props, ref) {
|
|
|
49
49
|
propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
|
|
50
50
|
);
|
|
51
51
|
return jsx(MenuItemPrimitive, _extends({}, rest, {
|
|
52
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
52
53
|
className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
|
|
53
54
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
|
|
54
55
|
,
|
|
@@ -74,6 +75,7 @@ function (props, ref) {
|
|
|
74
75
|
return jsx("a", _extends({
|
|
75
76
|
"data-testid": testId
|
|
76
77
|
}, rest, {
|
|
78
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
77
79
|
className: className,
|
|
78
80
|
href: isDisabled ? undefined : href,
|
|
79
81
|
draggable: false
|
|
@@ -52,7 +52,10 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
|
|
|
52
52
|
}, function (_ref2) {
|
|
53
53
|
var className = _ref2.className;
|
|
54
54
|
return jsx("div", {
|
|
55
|
-
|
|
55
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
56
|
+
className: className
|
|
57
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
58
|
+
,
|
|
56
59
|
style: {
|
|
57
60
|
'--width': width
|
|
58
61
|
},
|
|
@@ -108,7 +108,10 @@ var SkeletonItem = function SkeletonItem(_ref) {
|
|
|
108
108
|
}, function (_ref2) {
|
|
109
109
|
var className = _ref2.className;
|
|
110
110
|
return jsx("div", {
|
|
111
|
-
|
|
111
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
112
|
+
className: className
|
|
113
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
114
|
+
,
|
|
112
115
|
style: {
|
|
113
116
|
'--width': width
|
|
114
117
|
},
|
|
@@ -46,7 +46,9 @@ var MenuGroup = function MenuGroup(_ref) {
|
|
|
46
46
|
},
|
|
47
47
|
css: baseStyles,
|
|
48
48
|
"data-testid": testId,
|
|
49
|
-
role: role
|
|
49
|
+
role: role
|
|
50
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
51
|
+
,
|
|
50
52
|
className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className
|
|
51
53
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
52
54
|
}, rest))));
|
|
@@ -102,11 +102,14 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
102
102
|
var UNSAFE_headingOverrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn;
|
|
103
103
|
var content = isList ? jsx("ul", {
|
|
104
104
|
style: {
|
|
105
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
105
106
|
margin: 0,
|
|
107
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
106
108
|
padding: 0
|
|
107
109
|
}
|
|
108
110
|
}, Children.map(Children.toArray(children), function (child, index) {
|
|
109
111
|
return jsx("li", {
|
|
112
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
110
113
|
style: {
|
|
111
114
|
listStyleType: 'none',
|
|
112
115
|
margin: 0,
|
|
@@ -123,6 +126,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
123
126
|
"aria-hidden": true
|
|
124
127
|
}, title), content) : jsx(Fragment, null, content);
|
|
125
128
|
return jsx("div", _extends({}, rest, {
|
|
129
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
126
130
|
className: getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : UNSAFE_className,
|
|
127
131
|
id: id
|
|
128
132
|
// NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
|
package/dist/types/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ComponentType, PropsWithChildren, ReactNode, Ref } from 'react';
|
|
2
|
-
import { CSSObject } from '@emotion/react';
|
|
1
|
+
import { type ComponentType, type PropsWithChildren, type ReactNode, type Ref } from 'react';
|
|
2
|
+
import { type CSSObject } from '@emotion/react';
|
|
3
3
|
import type { SpacingMode } from './internal/components/menu-context';
|
|
4
4
|
export interface RenderFunction<TProps = {}> {
|
|
5
5
|
(Component: ComponentType | string, props: TProps): React.ReactNode;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ComponentType, PropsWithChildren, ReactNode, Ref } from 'react';
|
|
2
|
-
import { CSSObject } from '@emotion/react';
|
|
1
|
+
import { type ComponentType, type PropsWithChildren, type ReactNode, type Ref } from 'react';
|
|
2
|
+
import { type CSSObject } from '@emotion/react';
|
|
3
3
|
import type { SpacingMode } from './internal/components/menu-context';
|
|
4
4
|
export interface RenderFunction<TProps = {}> {
|
|
5
5
|
(Component: ComponentType | string, props: TProps): React.ReactNode;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/menu",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.1",
|
|
4
4
|
"description": "A list of options to help users navigate, or perform actions.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -46,9 +46,9 @@
|
|
|
46
46
|
"@atlaskit/ds-lib": "^2.3.0",
|
|
47
47
|
"@atlaskit/focus-ring": "^1.4.0",
|
|
48
48
|
"@atlaskit/platform-feature-flags": "^0.2.0",
|
|
49
|
-
"@atlaskit/primitives": "^6.
|
|
49
|
+
"@atlaskit/primitives": "^6.4.0",
|
|
50
50
|
"@atlaskit/theme": "^12.8.0",
|
|
51
|
-
"@atlaskit/tokens": "^1.
|
|
51
|
+
"@atlaskit/tokens": "^1.49.0",
|
|
52
52
|
"@babel/runtime": "^7.0.0",
|
|
53
53
|
"@emotion/react": "^11.7.1"
|
|
54
54
|
},
|
|
@@ -61,7 +61,6 @@
|
|
|
61
61
|
"@af/integration-testing": "*",
|
|
62
62
|
"@af/visual-regression": "*",
|
|
63
63
|
"@atlaskit/visual-regression": "*",
|
|
64
|
-
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|
|
65
64
|
"@atlassian/feature-flags-test-utils": "*",
|
|
66
65
|
"@emotion/jest": "^11.8.0",
|
|
67
66
|
"@testing-library/dom": "^8.17.1",
|
|
@@ -131,6 +130,5 @@
|
|
|
131
130
|
"type": "boolean"
|
|
132
131
|
}
|
|
133
132
|
},
|
|
134
|
-
"homepage": "https://atlassian.design/components/menu/"
|
|
135
|
-
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
|
|
133
|
+
"homepage": "https://atlassian.design/components/menu/"
|
|
136
134
|
}
|