@atlaskit/side-nav-items 1.9.0 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/ui/menu-item/container-avatar.js +1 -1
- package/dist/cjs/ui/menu-item/drag-and-drop/drag-preview.js +2 -2
- package/dist/cjs/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.js +1 -1
- package/dist/cjs/ui/menu-item/drag-handle/drag-handle.js +1 -1
- package/dist/cjs/ui/menu-item/drag-handle/lazy-drag-handle.js +43 -8
- package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-content.js +1 -1
- package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js +1 -1
- package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item.js +1 -1
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-body.js +1 -1
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-footer.js +1 -1
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-header.js +1 -1
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js +2 -2
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.js +1 -1
- package/dist/cjs/ui/menu-item/link-menu-item.js +1 -1
- package/dist/cjs/ui/menu-item/list-item.js +1 -1
- package/dist/cjs/ui/menu-item/list.js +1 -1
- package/dist/cjs/ui/menu-item/menu-item.js +2 -2
- package/dist/cjs/ui/menu-item/top-level-spacer.js +1 -1
- package/dist/cjs/ui/menu-section/divider.js +1 -1
- package/dist/cjs/ui/menu-section/menu-section-heading.js +1 -1
- package/dist/cjs/ui/skeleton/skeleton-menu-item.js +1 -1
- package/dist/cjs/ui/skeleton/skeleton-menu-section-heading.js +1 -1
- package/dist/es2019/ui/menu-item/container-avatar.js +1 -1
- package/dist/es2019/ui/menu-item/drag-and-drop/drag-preview.js +2 -2
- package/dist/es2019/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.js +1 -1
- package/dist/es2019/ui/menu-item/drag-handle/drag-handle.js +1 -1
- package/dist/es2019/ui/menu-item/drag-handle/lazy-drag-handle.js +35 -6
- package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-content.js +1 -1
- package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js +1 -1
- package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item.js +1 -1
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-body.js +1 -1
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-footer.js +1 -1
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-header.js +1 -1
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js +2 -2
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.js +1 -1
- package/dist/es2019/ui/menu-item/link-menu-item.js +1 -1
- package/dist/es2019/ui/menu-item/list-item.js +1 -1
- package/dist/es2019/ui/menu-item/list.js +1 -1
- package/dist/es2019/ui/menu-item/menu-item.js +2 -2
- package/dist/es2019/ui/menu-item/top-level-spacer.js +1 -1
- package/dist/es2019/ui/menu-section/divider.js +1 -1
- package/dist/es2019/ui/menu-section/menu-section-heading.js +1 -1
- package/dist/es2019/ui/skeleton/skeleton-menu-item.js +1 -1
- package/dist/es2019/ui/skeleton/skeleton-menu-section-heading.js +1 -1
- package/dist/esm/ui/menu-item/container-avatar.js +1 -1
- package/dist/esm/ui/menu-item/drag-and-drop/drag-preview.js +2 -2
- package/dist/esm/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.js +1 -1
- package/dist/esm/ui/menu-item/drag-handle/drag-handle.js +1 -1
- package/dist/esm/ui/menu-item/drag-handle/lazy-drag-handle.js +41 -8
- package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-content.js +1 -1
- package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js +1 -1
- package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item.js +1 -1
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-body.js +1 -1
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-footer.js +1 -1
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-header.js +1 -1
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js +2 -2
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.js +1 -1
- package/dist/esm/ui/menu-item/link-menu-item.js +1 -1
- package/dist/esm/ui/menu-item/list-item.js +1 -1
- package/dist/esm/ui/menu-item/list.js +1 -1
- package/dist/esm/ui/menu-item/menu-item.js +2 -2
- package/dist/esm/ui/menu-item/top-level-spacer.js +1 -1
- package/dist/esm/ui/menu-section/divider.js +1 -1
- package/dist/esm/ui/menu-section/menu-section-heading.js +1 -1
- package/dist/esm/ui/skeleton/skeleton-menu-item.js +1 -1
- package/dist/esm/ui/skeleton/skeleton-menu-section-heading.js +1 -1
- package/dist/types/ui/menu-item/drag-and-drop/drag-preview.d.ts +1 -1
- package/dist/types/ui/menu-item/drag-handle/lazy-drag-handle.d.ts +2 -4
- package/dist/types-ts4.5/ui/menu-item/drag-and-drop/drag-preview.d.ts +1 -1
- package/dist/types-ts4.5/ui/menu-item/drag-handle/lazy-drag-handle.d.ts +2 -4
- package/package.json +9 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/side-nav-items
|
|
2
2
|
|
|
3
|
+
## 1.10.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`7719c436631e8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7719c436631e8) -
|
|
8
|
+
The feature gate `platform-dst-side-nav-layering-fixes` has been cleaned up.
|
|
9
|
+
- Layers inside the side nav that are rendered to parent (`shouldRenderToParent`) will be layered
|
|
10
|
+
below the top nav and banner.
|
|
11
|
+
- Refactors have been made to the positioning and render location of the side nav panel splitter.
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 1.9.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* drag-preview.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* drag-preview.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
@@ -36,7 +36,7 @@ var dragPreviewStyles = {
|
|
|
36
36
|
* A drag preview for sidebar menu items.
|
|
37
37
|
*
|
|
38
38
|
* The limited API corresponds with the limited amount of information we
|
|
39
|
-
* want to show in drag previews.
|
|
39
|
+
* want to show in drag previews. Only essential information is shown.
|
|
40
40
|
*
|
|
41
41
|
* If no `elemBefore` is provided, then the `elemBefore` will automatically collapse.
|
|
42
42
|
* There is no need to pass in `COLLAPSE_ELEM_BEFORE`. We do this as there is no
|
|
@@ -6,15 +6,50 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.LazyDragHandle = void 0;
|
|
8
8
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
*/
|
|
15
|
-
var LazyDragHandle = exports.LazyDragHandle = /*#__PURE__*/(0, _react.lazy)(function () {
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
|
|
12
|
+
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" != (0, _typeof2.default)(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); }
|
|
13
|
+
var LazyDragHandleComponent = /*#__PURE__*/(0, _react.lazy)(function () {
|
|
16
14
|
return Promise.resolve().then(function () {
|
|
17
15
|
return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
|
|
18
16
|
'./drag-handle'));
|
|
19
17
|
});
|
|
20
|
-
});
|
|
18
|
+
});
|
|
19
|
+
var LazyDragHandle = exports.LazyDragHandle = (0, _platformFeatureFlagsReact.componentWithFG)('navx-4169-improve-gsn-code', LazyDragHandleNEW, LazyDragHandleComponent);
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* A wrapper around `React.lazy` that defers rendering until after the component has mounted.
|
|
23
|
+
*
|
|
24
|
+
* This avoids hydration errors because:
|
|
25
|
+
* - On the server: `Component` is `null`, so nothing is rendered.
|
|
26
|
+
* - On the first client render (hydration): `Component` is still `null`, matching the server HTML.
|
|
27
|
+
* - After mount: `useEffect` fires, sets the lazy component, and triggers a re-render
|
|
28
|
+
* that is scoped to this component only.
|
|
29
|
+
*
|
|
30
|
+
* This is preferable to using `<Suspense>` around `React.lazy` directly in the parent,
|
|
31
|
+
* because `<Suspense fallback={null}>` on the server renders nothing, but after hydration
|
|
32
|
+
* the lazy component will resolve and produce DOM that doesn't match the server HTML.
|
|
33
|
+
*
|
|
34
|
+
* By deferring to after mount, both server and initial client render agree on `null`,
|
|
35
|
+
* and the lazy import + Suspense only kicks in after hydration is complete.
|
|
36
|
+
*/
|
|
37
|
+
function LazyDragHandleNEW() {
|
|
38
|
+
var _useState = (0, _react.useState)(null),
|
|
39
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
40
|
+
Component = _useState2[0],
|
|
41
|
+
setComponent = _useState2[1];
|
|
42
|
+
(0, _react.useEffect)(function () {
|
|
43
|
+
// Using a function updater to store the component reference itself
|
|
44
|
+
// (not the result of calling it)
|
|
45
|
+
setComponent(function () {
|
|
46
|
+
return LazyDragHandleComponent;
|
|
47
|
+
});
|
|
48
|
+
}, []);
|
|
49
|
+
if (!Component) {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
|
|
53
|
+
fallback: null
|
|
54
|
+
}, /*#__PURE__*/_react.default.createElement(Component, null));
|
|
55
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -110,7 +110,7 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
|
|
|
110
110
|
* Not using the UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY variable from `@atlaskit/navigation-system`
|
|
111
111
|
* to avoid a circular dependency, as that package imports this one for re-exporting components.
|
|
112
112
|
*/
|
|
113
|
-
|
|
113
|
+
"min(calc(100vh - ".concat(FLYOUT_MENU_VERTICAL_OFFSET_PX, "px - var(--n_tNvM, 0px) - var(--n_bnrM, 0px)), ").concat(maxHeight, "px)")
|
|
114
114
|
);
|
|
115
115
|
}, [maxHeight]);
|
|
116
116
|
return /*#__PURE__*/_react.default.createElement(_experimental.PopupContent, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* menu-item.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* menu-item.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -303,7 +303,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
|
|
|
303
303
|
size: "small",
|
|
304
304
|
maxLines: 1,
|
|
305
305
|
ref: descriptionRef
|
|
306
|
-
}, description)), hasDragIndicator ? /*#__PURE__*/_react.default.createElement(_react.Suspense, {
|
|
306
|
+
}, description)), hasDragIndicator ? (0, _platformFeatureFlags.fg)('navx-4169-improve-gsn-code') ? /*#__PURE__*/_react.default.createElement(_lazyDragHandle.LazyDragHandle, null) : /*#__PURE__*/_react.default.createElement(_react.Suspense, {
|
|
307
307
|
fallback: null
|
|
308
308
|
}, /*#__PURE__*/_react.default.createElement(_lazyDragHandle.LazyDragHandle, null)) : null, dropIndicator);
|
|
309
309
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* container-avatar.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* container-avatar.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./container-avatar.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* drag-preview.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* drag-preview.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./drag-preview.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -30,7 +30,7 @@ const dragPreviewStyles = {
|
|
|
30
30
|
* A drag preview for sidebar menu items.
|
|
31
31
|
*
|
|
32
32
|
* The limited API corresponds with the limited amount of information we
|
|
33
|
-
* want to show in drag previews.
|
|
33
|
+
* want to show in drag previews. Only essential information is shown.
|
|
34
34
|
*
|
|
35
35
|
* If no `elemBefore` is provided, then the `elemBefore` will automatically collapse.
|
|
36
36
|
* There is no need to pass in `COLLAPSE_ELEM_BEFORE`. We do this as there is no
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* use-menu-item-drag-and-drop.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* use-menu-item-drag-and-drop.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
@@ -1,9 +1,38 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import React, { lazy, Suspense, useEffect, useState } from 'react';
|
|
2
|
+
import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
|
|
3
|
+
const LazyDragHandleComponent = /*#__PURE__*/lazy(() => {
|
|
4
|
+
return import( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
|
|
5
|
+
'./drag-handle');
|
|
6
|
+
});
|
|
7
|
+
export const LazyDragHandle = componentWithFG('navx-4169-improve-gsn-code', LazyDragHandleNEW, LazyDragHandleComponent);
|
|
4
8
|
|
|
5
9
|
/**
|
|
6
|
-
*
|
|
10
|
+
* A wrapper around `React.lazy` that defers rendering until after the component has mounted.
|
|
11
|
+
*
|
|
12
|
+
* This avoids hydration errors because:
|
|
13
|
+
* - On the server: `Component` is `null`, so nothing is rendered.
|
|
14
|
+
* - On the first client render (hydration): `Component` is still `null`, matching the server HTML.
|
|
15
|
+
* - After mount: `useEffect` fires, sets the lazy component, and triggers a re-render
|
|
16
|
+
* that is scoped to this component only.
|
|
17
|
+
*
|
|
18
|
+
* This is preferable to using `<Suspense>` around `React.lazy` directly in the parent,
|
|
19
|
+
* because `<Suspense fallback={null}>` on the server renders nothing, but after hydration
|
|
20
|
+
* the lazy component will resolve and produce DOM that doesn't match the server HTML.
|
|
21
|
+
*
|
|
22
|
+
* By deferring to after mount, both server and initial client render agree on `null`,
|
|
23
|
+
* and the lazy import + Suspense only kicks in after hydration is complete.
|
|
7
24
|
*/
|
|
8
|
-
|
|
9
|
-
|
|
25
|
+
function LazyDragHandleNEW() {
|
|
26
|
+
const [Component, setComponent] = useState(null);
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
// Using a function updater to store the component reference itself
|
|
29
|
+
// (not the result of calling it)
|
|
30
|
+
setComponent(() => LazyDragHandleComponent);
|
|
31
|
+
}, []);
|
|
32
|
+
if (!Component) {
|
|
33
|
+
return null;
|
|
34
|
+
}
|
|
35
|
+
return /*#__PURE__*/React.createElement(Suspense, {
|
|
36
|
+
fallback: null
|
|
37
|
+
}, /*#__PURE__*/React.createElement(Component, null));
|
|
38
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* expandable-menu-item-content.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* expandable-menu-item-content.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./expandable-menu-item-content.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import "./expandable-menu-item-trigger.compiled.css";
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* expandable-menu-item.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* expandable-menu-item.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./expandable-menu-item.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* flyout-header.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* flyout-header.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./flyout-header.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React, { useCallback, useContext } from 'react';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./flyout-menu-item-content.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React, { forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
|
|
@@ -100,7 +100,7 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
|
|
|
100
100
|
* Not using the UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY variable from `@atlaskit/navigation-system`
|
|
101
101
|
* to avoid a circular dependency, as that package imports this one for re-exporting components.
|
|
102
102
|
*/
|
|
103
|
-
|
|
103
|
+
`min(calc(100vh - ${FLYOUT_MENU_VERTICAL_OFFSET_PX}px - var(--n_tNvM, 0px) - var(--n_bnrM, 0px)), ${maxHeight}px)`, [maxHeight]);
|
|
104
104
|
return /*#__PURE__*/React.createElement(PopupContent, {
|
|
105
105
|
appearance: "UNSAFE_modal-below-sm",
|
|
106
106
|
onClose: handleClose,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* flyout-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* flyout-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./flyout-menu-item-trigger.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* menu-item.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* menu-item.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import "./menu-item.compiled.css";
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -293,7 +293,7 @@ const MenuItemBaseNoRef = ({
|
|
|
293
293
|
size: "small",
|
|
294
294
|
maxLines: 1,
|
|
295
295
|
ref: descriptionRef
|
|
296
|
-
}, description)), hasDragIndicator ? /*#__PURE__*/React.createElement(Suspense, {
|
|
296
|
+
}, description)), hasDragIndicator ? fg('navx-4169-improve-gsn-code') ? /*#__PURE__*/React.createElement(LazyDragHandle, null) : /*#__PURE__*/React.createElement(Suspense, {
|
|
297
297
|
fallback: null
|
|
298
298
|
}, /*#__PURE__*/React.createElement(LazyDragHandle, null)) : null, dropIndicator);
|
|
299
299
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* top-level-spacer.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* top-level-spacer.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./top-level-spacer.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* menu-section-heading.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* menu-section-heading.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./menu-section-heading.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* skeleton-menu-item.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* skeleton-menu-item.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./skeleton-menu-item.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* skeleton-menu-section-heading.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* skeleton-menu-section-heading.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./skeleton-menu-section-heading.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* container-avatar.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* container-avatar.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./container-avatar.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* drag-preview.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* drag-preview.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./drag-preview.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -29,7 +29,7 @@ var dragPreviewStyles = {
|
|
|
29
29
|
* A drag preview for sidebar menu items.
|
|
30
30
|
*
|
|
31
31
|
* The limited API corresponds with the limited amount of information we
|
|
32
|
-
* want to show in drag previews.
|
|
32
|
+
* want to show in drag previews. Only essential information is shown.
|
|
33
33
|
*
|
|
34
34
|
* If no `elemBefore` is provided, then the `elemBefore` will automatically collapse.
|
|
35
35
|
* There is no need to pass in `COLLAPSE_ELEM_BEFORE`. We do this as there is no
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* use-menu-item-drag-and-drop.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* use-menu-item-drag-and-drop.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
4
|
import * as React from 'react';
|
|
@@ -1,11 +1,44 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import {
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
+
import React, { lazy, Suspense, useEffect, useState } from 'react';
|
|
3
|
+
import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
|
|
4
|
+
var LazyDragHandleComponent = /*#__PURE__*/lazy(function () {
|
|
5
|
+
return import( /* webpackChunkName: "@atlaskit-internal_nav4-menu-item-drag-handle" */
|
|
6
|
+
'./drag-handle');
|
|
7
|
+
});
|
|
8
|
+
export var LazyDragHandle = componentWithFG('navx-4169-improve-gsn-code', LazyDragHandleNEW, LazyDragHandleComponent);
|
|
4
9
|
|
|
5
10
|
/**
|
|
6
|
-
*
|
|
11
|
+
* A wrapper around `React.lazy` that defers rendering until after the component has mounted.
|
|
12
|
+
*
|
|
13
|
+
* This avoids hydration errors because:
|
|
14
|
+
* - On the server: `Component` is `null`, so nothing is rendered.
|
|
15
|
+
* - On the first client render (hydration): `Component` is still `null`, matching the server HTML.
|
|
16
|
+
* - After mount: `useEffect` fires, sets the lazy component, and triggers a re-render
|
|
17
|
+
* that is scoped to this component only.
|
|
18
|
+
*
|
|
19
|
+
* This is preferable to using `<Suspense>` around `React.lazy` directly in the parent,
|
|
20
|
+
* because `<Suspense fallback={null}>` on the server renders nothing, but after hydration
|
|
21
|
+
* the lazy component will resolve and produce DOM that doesn't match the server HTML.
|
|
22
|
+
*
|
|
23
|
+
* By deferring to after mount, both server and initial client render agree on `null`,
|
|
24
|
+
* and the lazy import + Suspense only kicks in after hydration is complete.
|
|
7
25
|
*/
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
26
|
+
function LazyDragHandleNEW() {
|
|
27
|
+
var _useState = useState(null),
|
|
28
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
29
|
+
Component = _useState2[0],
|
|
30
|
+
setComponent = _useState2[1];
|
|
31
|
+
useEffect(function () {
|
|
32
|
+
// Using a function updater to store the component reference itself
|
|
33
|
+
// (not the result of calling it)
|
|
34
|
+
setComponent(function () {
|
|
35
|
+
return LazyDragHandleComponent;
|
|
36
|
+
});
|
|
37
|
+
}, []);
|
|
38
|
+
if (!Component) {
|
|
39
|
+
return null;
|
|
40
|
+
}
|
|
41
|
+
return /*#__PURE__*/React.createElement(Suspense, {
|
|
42
|
+
fallback: null
|
|
43
|
+
}, /*#__PURE__*/React.createElement(Component, null));
|
|
44
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* expandable-menu-item-content.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* expandable-menu-item-content.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./expandable-menu-item-content.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* expandable-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import "./expandable-menu-item-trigger.compiled.css";
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* expandable-menu-item.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* expandable-menu-item.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import "./expandable-menu-item.compiled.css";
|
|
4
4
|
import * as React from 'react';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* flyout-header.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* flyout-header.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./flyout-header.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React, { useCallback, useContext } from 'react';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* flyout-menu-item-content.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import "./flyout-menu-item-content.compiled.css";
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -101,7 +101,7 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
|
|
|
101
101
|
* Not using the UNSAFE_MAIN_BLOCK_START_FOR_LEGACY_PAGES_ONLY variable from `@atlaskit/navigation-system`
|
|
102
102
|
* to avoid a circular dependency, as that package imports this one for re-exporting components.
|
|
103
103
|
*/
|
|
104
|
-
|
|
104
|
+
"min(calc(100vh - ".concat(FLYOUT_MENU_VERTICAL_OFFSET_PX, "px - var(--n_tNvM, 0px) - var(--n_bnrM, 0px)), ").concat(maxHeight, "px)")
|
|
105
105
|
);
|
|
106
106
|
}, [maxHeight]);
|
|
107
107
|
return /*#__PURE__*/React.createElement(PopupContent, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* flyout-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* flyout-menu-item-trigger.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./flyout-menu-item-trigger.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* menu-item.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* menu-item.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
4
|
import "./menu-item.compiled.css";
|
|
@@ -294,7 +294,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
|
|
|
294
294
|
size: "small",
|
|
295
295
|
maxLines: 1,
|
|
296
296
|
ref: descriptionRef
|
|
297
|
-
}, description)), hasDragIndicator ? /*#__PURE__*/React.createElement(Suspense, {
|
|
297
|
+
}, description)), hasDragIndicator ? fg('navx-4169-improve-gsn-code') ? /*#__PURE__*/React.createElement(LazyDragHandle, null) : /*#__PURE__*/React.createElement(Suspense, {
|
|
298
298
|
fallback: null
|
|
299
299
|
}, /*#__PURE__*/React.createElement(LazyDragHandle, null)) : null, dropIndicator);
|
|
300
300
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* top-level-spacer.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* top-level-spacer.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./top-level-spacer.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* menu-section-heading.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* menu-section-heading.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./menu-section-heading.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* skeleton-menu-item.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* skeleton-menu-item.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./skeleton-menu-item.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* skeleton-menu-section-heading.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* skeleton-menu-section-heading.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./skeleton-menu-section-heading.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -8,7 +8,7 @@ import { type ReactNode } from 'react';
|
|
|
8
8
|
* A drag preview for sidebar menu items.
|
|
9
9
|
*
|
|
10
10
|
* The limited API corresponds with the limited amount of information we
|
|
11
|
-
* want to show in drag previews.
|
|
11
|
+
* want to show in drag previews. Only essential information is shown.
|
|
12
12
|
*
|
|
13
13
|
* If no `elemBefore` is provided, then the `elemBefore` will automatically collapse.
|
|
14
14
|
* There is no need to pass in `COLLAPSE_ELEM_BEFORE`. We do this as there is no
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
*/
|
|
4
|
-
export declare const LazyDragHandle: import("react").LazyExoticComponent<typeof import("./drag-handle").default>;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const LazyDragHandle: React.FC<React.RefAttributes<unknown>>;
|
|
@@ -8,7 +8,7 @@ import { type ReactNode } from 'react';
|
|
|
8
8
|
* A drag preview for sidebar menu items.
|
|
9
9
|
*
|
|
10
10
|
* The limited API corresponds with the limited amount of information we
|
|
11
|
-
* want to show in drag previews.
|
|
11
|
+
* want to show in drag previews. Only essential information is shown.
|
|
12
12
|
*
|
|
13
13
|
* If no `elemBefore` is provided, then the `elemBefore` will automatically collapse.
|
|
14
14
|
* There is no need to pass in `COLLAPSE_ELEM_BEFORE`. We do this as there is no
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
*/
|
|
4
|
-
export declare const LazyDragHandle: import("react").LazyExoticComponent<typeof import("./drag-handle").default>;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const LazyDragHandle: React.FC<React.RefAttributes<unknown>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/side-nav-items",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.0",
|
|
4
4
|
"description": "Menu items and elements for the side nav area.",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -33,16 +33,17 @@
|
|
|
33
33
|
"@atlaskit/avatar": "^25.8.0",
|
|
34
34
|
"@atlaskit/button": "^23.10.0",
|
|
35
35
|
"@atlaskit/css": "^0.19.0",
|
|
36
|
-
"@atlaskit/ds-lib": "^
|
|
36
|
+
"@atlaskit/ds-lib": "^6.0.0",
|
|
37
37
|
"@atlaskit/heading": "^5.3.0",
|
|
38
38
|
"@atlaskit/icon": "^32.0.0",
|
|
39
39
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
40
|
+
"@atlaskit/platform-feature-flags-react": "^0.4.0",
|
|
40
41
|
"@atlaskit/popup": "^4.13.0",
|
|
41
42
|
"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
|
|
42
43
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
|
|
43
44
|
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
|
|
44
45
|
"@atlaskit/primitives": "^18.0.0",
|
|
45
|
-
"@atlaskit/tokens": "^11.
|
|
46
|
+
"@atlaskit/tokens": "^11.1.0",
|
|
46
47
|
"@atlaskit/tooltip": "^20.14.0",
|
|
47
48
|
"@babel/runtime": "^7.0.0",
|
|
48
49
|
"@compiled/react": "^0.20.0",
|
|
@@ -57,10 +58,10 @@
|
|
|
57
58
|
"@af/integration-testing": "workspace:^",
|
|
58
59
|
"@af/visual-regression": "workspace:^",
|
|
59
60
|
"@atlaskit/app-provider": "^4.1.0",
|
|
60
|
-
"@atlaskit/lozenge": "^13.
|
|
61
|
-
"@atlaskit/navigation-system": "^6.
|
|
61
|
+
"@atlaskit/lozenge": "^13.5.0",
|
|
62
|
+
"@atlaskit/navigation-system": "^6.2.0",
|
|
62
63
|
"@atlaskit/ssr": "workspace:^",
|
|
63
|
-
"@atlassian/a11y-jest-testing": "^0.
|
|
64
|
+
"@atlassian/a11y-jest-testing": "^0.10.0",
|
|
64
65
|
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
65
66
|
"@atlassian/testing-library": "^0.4.0",
|
|
66
67
|
"@testing-library/react": "^16.3.0",
|
|
@@ -109,10 +110,10 @@
|
|
|
109
110
|
"platform_dst_nav4_flyout_menu_slots_close_button": {
|
|
110
111
|
"type": "boolean"
|
|
111
112
|
},
|
|
112
|
-
"
|
|
113
|
+
"platform_dst_nav4_flyoutmenuitem_render_to_parent": {
|
|
113
114
|
"type": "boolean"
|
|
114
115
|
},
|
|
115
|
-
"
|
|
116
|
+
"navx-4169-improve-gsn-code": {
|
|
116
117
|
"type": "boolean"
|
|
117
118
|
}
|
|
118
119
|
}
|