@atlaskit/page-layout 4.3.1 → 4.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (185) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/common/constants.js +19 -0
  3. package/dist/cjs/common/get-grid-state-from-storage.js +13 -0
  4. package/dist/cjs/common/get-left-panel-width.js +13 -0
  5. package/dist/cjs/common/get-left-sidebar-percentage.js +17 -0
  6. package/dist/cjs/common/get-page-layout-slot-css-selector.js +10 -0
  7. package/dist/cjs/common/get-page-layout-slot-selector.js +12 -0
  8. package/dist/cjs/common/merge-grid-state-into-storage.js +22 -0
  9. package/dist/cjs/common/remove-from-grid-state-in-storage.js +18 -0
  10. package/dist/cjs/common/resolve-dimension.js +16 -0
  11. package/dist/cjs/components/resize-control/index.js +7 -6
  12. package/dist/cjs/components/skip-links/skip-link-components.js +11 -174
  13. package/dist/cjs/components/skip-links/skip-link-wrapper.js +130 -0
  14. package/dist/cjs/components/skip-links/skip-link.js +63 -0
  15. package/dist/cjs/components/skip-links/use-custom-skip-link.js +5 -0
  16. package/dist/cjs/components/slots/banner-slot.js +6 -3
  17. package/dist/cjs/components/slots/content.js +2 -0
  18. package/dist/cjs/components/slots/internal/left-sidebar-outer.js +2 -2
  19. package/dist/cjs/components/slots/left-panel.js +6 -3
  20. package/dist/cjs/components/slots/left-sidebar-without-resize.js +4 -2
  21. package/dist/cjs/components/slots/left-sidebar.js +10 -6
  22. package/dist/cjs/components/slots/main.js +4 -2
  23. package/dist/cjs/components/slots/page-layout.js +6 -0
  24. package/dist/cjs/components/slots/right-panel.js +6 -3
  25. package/dist/cjs/components/slots/right-sidebar.js +6 -3
  26. package/dist/cjs/components/slots/top-navigation.js +6 -3
  27. package/dist/cjs/controllers/index.js +6 -3
  28. package/dist/cjs/controllers/sidebar-resize-context.js +2 -50
  29. package/dist/cjs/controllers/sidebar-resize-controller.js +2 -2
  30. package/dist/cjs/controllers/skip-link-context.js +3 -13
  31. package/dist/cjs/controllers/skip-link-controller.js +2 -2
  32. package/dist/cjs/controllers/skip-links-context.js +15 -0
  33. package/dist/cjs/controllers/use-left-sidebar-flyout-lock.js +49 -0
  34. package/dist/cjs/controllers/use-page-layout-grid.js +4 -3
  35. package/dist/cjs/controllers/use-page-layout-resize.js +20 -0
  36. package/dist/cjs/controllers/use-skip-links.js +11 -0
  37. package/dist/cjs/entry-points/sidebar-resize-context.js +4 -3
  38. package/dist/es2019/common/constants.js +19 -0
  39. package/dist/es2019/common/get-grid-state-from-storage.js +6 -0
  40. package/dist/es2019/common/get-left-panel-width.js +7 -0
  41. package/dist/es2019/common/get-left-sidebar-percentage.js +11 -0
  42. package/dist/es2019/common/get-page-layout-slot-css-selector.js +2 -0
  43. package/dist/es2019/common/get-page-layout-slot-selector.js +4 -0
  44. package/dist/es2019/common/merge-grid-state-into-storage.js +14 -0
  45. package/dist/es2019/common/remove-from-grid-state-in-storage.js +11 -0
  46. package/dist/es2019/common/resolve-dimension.js +8 -0
  47. package/dist/es2019/components/resize-control/index.js +2 -1
  48. package/dist/es2019/components/skip-links/skip-link-components.js +2 -165
  49. package/dist/es2019/components/skip-links/skip-link-wrapper.js +114 -0
  50. package/dist/es2019/components/skip-links/skip-link.js +54 -0
  51. package/dist/es2019/components/skip-links/use-custom-skip-link.js +6 -0
  52. package/dist/es2019/components/slots/banner-slot.js +4 -1
  53. package/dist/es2019/components/slots/content.js +2 -0
  54. package/dist/es2019/components/slots/internal/left-sidebar-outer.js +1 -1
  55. package/dist/es2019/components/slots/left-panel.js +4 -1
  56. package/dist/es2019/components/slots/left-sidebar-without-resize.js +3 -1
  57. package/dist/es2019/components/slots/left-sidebar.js +5 -1
  58. package/dist/es2019/components/slots/main.js +3 -1
  59. package/dist/es2019/components/slots/page-layout.js +6 -0
  60. package/dist/es2019/components/slots/right-panel.js +4 -1
  61. package/dist/es2019/components/slots/right-sidebar.js +4 -1
  62. package/dist/es2019/components/slots/top-navigation.js +4 -1
  63. package/dist/es2019/controllers/index.js +5 -2
  64. package/dist/es2019/controllers/sidebar-resize-context.js +2 -45
  65. package/dist/es2019/controllers/sidebar-resize-controller.js +1 -1
  66. package/dist/es2019/controllers/skip-link-context.js +2 -9
  67. package/dist/es2019/controllers/skip-link-controller.js +1 -1
  68. package/dist/es2019/controllers/skip-links-context.js +8 -0
  69. package/dist/es2019/controllers/use-left-sidebar-flyout-lock.js +39 -0
  70. package/dist/es2019/controllers/use-page-layout-grid.js +2 -1
  71. package/dist/es2019/controllers/use-page-layout-resize.js +12 -0
  72. package/dist/es2019/controllers/use-skip-links.js +3 -0
  73. package/dist/es2019/entry-points/sidebar-resize-context.js +2 -1
  74. package/dist/esm/common/constants.js +19 -0
  75. package/dist/esm/common/get-grid-state-from-storage.js +6 -0
  76. package/dist/esm/common/get-left-panel-width.js +7 -0
  77. package/dist/esm/common/get-left-sidebar-percentage.js +11 -0
  78. package/dist/esm/common/get-page-layout-slot-css-selector.js +4 -0
  79. package/dist/esm/common/get-page-layout-slot-selector.js +5 -0
  80. package/dist/esm/common/merge-grid-state-into-storage.js +15 -0
  81. package/dist/esm/common/remove-from-grid-state-in-storage.js +11 -0
  82. package/dist/esm/common/resolve-dimension.js +10 -0
  83. package/dist/esm/components/resize-control/index.js +2 -1
  84. package/dist/esm/components/skip-links/skip-link-components.js +2 -179
  85. package/dist/esm/components/skip-links/skip-link-wrapper.js +127 -0
  86. package/dist/esm/components/skip-links/skip-link.js +55 -0
  87. package/dist/esm/components/skip-links/use-custom-skip-link.js +6 -0
  88. package/dist/esm/components/slots/banner-slot.js +4 -1
  89. package/dist/esm/components/slots/content.js +2 -0
  90. package/dist/esm/components/slots/internal/left-sidebar-outer.js +1 -1
  91. package/dist/esm/components/slots/left-panel.js +4 -1
  92. package/dist/esm/components/slots/left-sidebar-without-resize.js +3 -1
  93. package/dist/esm/components/slots/left-sidebar.js +5 -1
  94. package/dist/esm/components/slots/main.js +3 -1
  95. package/dist/esm/components/slots/page-layout.js +6 -0
  96. package/dist/esm/components/slots/right-panel.js +4 -1
  97. package/dist/esm/components/slots/right-sidebar.js +4 -1
  98. package/dist/esm/components/slots/top-navigation.js +4 -1
  99. package/dist/esm/controllers/index.js +5 -2
  100. package/dist/esm/controllers/sidebar-resize-context.js +2 -50
  101. package/dist/esm/controllers/sidebar-resize-controller.js +1 -1
  102. package/dist/esm/controllers/skip-link-context.js +2 -11
  103. package/dist/esm/controllers/skip-link-controller.js +1 -1
  104. package/dist/esm/controllers/skip-links-context.js +8 -0
  105. package/dist/esm/controllers/use-left-sidebar-flyout-lock.js +43 -0
  106. package/dist/esm/controllers/use-page-layout-grid.js +2 -1
  107. package/dist/esm/controllers/use-page-layout-resize.js +13 -0
  108. package/dist/esm/controllers/use-skip-links.js +5 -0
  109. package/dist/esm/entry-points/sidebar-resize-context.js +2 -1
  110. package/dist/types/common/constants.d.ts +18 -0
  111. package/dist/types/common/get-grid-state-from-storage.d.ts +1 -0
  112. package/dist/types/common/get-left-panel-width.d.ts +1 -0
  113. package/dist/types/common/get-left-sidebar-percentage.d.ts +1 -0
  114. package/dist/types/common/get-page-layout-slot-css-selector.d.ts +1 -0
  115. package/dist/types/common/get-page-layout-slot-selector.d.ts +3 -0
  116. package/dist/types/common/merge-grid-state-into-storage.d.ts +1 -0
  117. package/dist/types/common/remove-from-grid-state-in-storage.d.ts +1 -0
  118. package/dist/types/common/resolve-dimension.d.ts +2 -0
  119. package/dist/types/common/types.d.ts +14 -2
  120. package/dist/types/components/resize-control/types.d.ts +1 -1
  121. package/dist/types/components/skip-links/skip-link-components.d.ts +2 -20
  122. package/dist/types/components/skip-links/skip-link-wrapper.d.ts +14 -0
  123. package/dist/types/components/skip-links/skip-link.d.ts +10 -0
  124. package/dist/types/components/skip-links/use-custom-skip-link.d.ts +5 -0
  125. package/dist/types/components/slots/banner-slot.d.ts +2 -0
  126. package/dist/types/components/slots/content.d.ts +2 -0
  127. package/dist/types/components/slots/left-panel.d.ts +2 -0
  128. package/dist/types/components/slots/left-sidebar-without-resize.d.ts +2 -0
  129. package/dist/types/components/slots/left-sidebar.d.ts +2 -0
  130. package/dist/types/components/slots/main.d.ts +2 -0
  131. package/dist/types/components/slots/page-layout.d.ts +2 -0
  132. package/dist/types/components/slots/right-panel.d.ts +2 -0
  133. package/dist/types/components/slots/right-sidebar.d.ts +2 -0
  134. package/dist/types/components/slots/top-navigation.d.ts +2 -0
  135. package/dist/types/controllers/index.d.ts +5 -2
  136. package/dist/types/controllers/sidebar-resize-context.d.ts +1 -39
  137. package/dist/types/controllers/skip-link-context.d.ts +1 -4
  138. package/dist/types/controllers/skip-links-context.d.ts +3 -0
  139. package/dist/types/controllers/types.d.ts +13 -0
  140. package/dist/types/controllers/use-left-sidebar-flyout-lock.d.ts +20 -0
  141. package/dist/types/controllers/use-page-layout-resize.d.ts +16 -0
  142. package/dist/types/controllers/use-skip-links.d.ts +2 -0
  143. package/dist/types/entry-points/sidebar-resize-context.d.ts +3 -2
  144. package/dist/types/index.d.ts +2 -1
  145. package/dist/types-ts4.5/common/constants.d.ts +18 -0
  146. package/dist/types-ts4.5/common/get-grid-state-from-storage.d.ts +1 -0
  147. package/dist/types-ts4.5/common/get-left-panel-width.d.ts +1 -0
  148. package/dist/types-ts4.5/common/get-left-sidebar-percentage.d.ts +1 -0
  149. package/dist/types-ts4.5/common/get-page-layout-slot-css-selector.d.ts +1 -0
  150. package/dist/types-ts4.5/common/get-page-layout-slot-selector.d.ts +3 -0
  151. package/dist/types-ts4.5/common/merge-grid-state-into-storage.d.ts +1 -0
  152. package/dist/types-ts4.5/common/remove-from-grid-state-in-storage.d.ts +1 -0
  153. package/dist/types-ts4.5/common/resolve-dimension.d.ts +2 -0
  154. package/dist/types-ts4.5/common/types.d.ts +14 -2
  155. package/dist/types-ts4.5/components/resize-control/types.d.ts +1 -1
  156. package/dist/types-ts4.5/components/skip-links/skip-link-components.d.ts +2 -20
  157. package/dist/types-ts4.5/components/skip-links/skip-link-wrapper.d.ts +14 -0
  158. package/dist/types-ts4.5/components/skip-links/skip-link.d.ts +10 -0
  159. package/dist/types-ts4.5/components/skip-links/use-custom-skip-link.d.ts +5 -0
  160. package/dist/types-ts4.5/components/slots/banner-slot.d.ts +2 -0
  161. package/dist/types-ts4.5/components/slots/content.d.ts +2 -0
  162. package/dist/types-ts4.5/components/slots/left-panel.d.ts +2 -0
  163. package/dist/types-ts4.5/components/slots/left-sidebar-without-resize.d.ts +2 -0
  164. package/dist/types-ts4.5/components/slots/left-sidebar.d.ts +2 -0
  165. package/dist/types-ts4.5/components/slots/main.d.ts +2 -0
  166. package/dist/types-ts4.5/components/slots/page-layout.d.ts +2 -0
  167. package/dist/types-ts4.5/components/slots/right-panel.d.ts +2 -0
  168. package/dist/types-ts4.5/components/slots/right-sidebar.d.ts +2 -0
  169. package/dist/types-ts4.5/components/slots/top-navigation.d.ts +2 -0
  170. package/dist/types-ts4.5/controllers/index.d.ts +5 -2
  171. package/dist/types-ts4.5/controllers/sidebar-resize-context.d.ts +1 -39
  172. package/dist/types-ts4.5/controllers/skip-link-context.d.ts +1 -4
  173. package/dist/types-ts4.5/controllers/skip-links-context.d.ts +3 -0
  174. package/dist/types-ts4.5/controllers/types.d.ts +13 -0
  175. package/dist/types-ts4.5/controllers/use-left-sidebar-flyout-lock.d.ts +20 -0
  176. package/dist/types-ts4.5/controllers/use-page-layout-resize.d.ts +16 -0
  177. package/dist/types-ts4.5/controllers/use-skip-links.d.ts +2 -0
  178. package/dist/types-ts4.5/entry-points/sidebar-resize-context.d.ts +3 -2
  179. package/dist/types-ts4.5/index.d.ts +2 -1
  180. package/package.json +8 -8
  181. package/dist/cjs/common/utils.js +0 -66
  182. package/dist/es2019/common/utils.js +0 -55
  183. package/dist/esm/common/utils.js +0 -60
  184. package/dist/types/common/utils.d.ts +0 -12
  185. package/dist/types-ts4.5/common/utils.d.ts +0 -12
@@ -7,6 +7,8 @@ import type { SlotWidthProps } from '../../common/types';
7
7
  *
8
8
  * - [Examples](https://atlassian.design/components/page-layout/examples)
9
9
  * - [Code](https://atlassian.design/components/page-layout/code)
10
+ *
11
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
10
12
  */
11
13
  declare const Main: (props: SlotWidthProps) => jsx.JSX.Element;
12
14
  export default Main;
@@ -7,6 +7,8 @@ import type { PageLayoutProps } from '../../common/types';
7
7
  *
8
8
  * - [Examples](https://atlassian.design/components/page-layout/examples)
9
9
  * - [Code](https://atlassian.design/components/page-layout/code)
10
+ *
11
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
10
12
  */
11
13
  declare const PageLayout: ({ skipLinksLabel, children, testId, onLeftSidebarExpand, onLeftSidebarCollapse, }: PageLayoutProps) => jsx.JSX.Element;
12
14
  export default PageLayout;
@@ -7,6 +7,8 @@ import type { SlotWidthProps } from '../../common/types';
7
7
  *
8
8
  * - [Examples](https://atlassian.design/components/page-layout/examples)
9
9
  * - [Code](https://atlassian.design/components/page-layout/code)
10
+ *
11
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
10
12
  */
11
13
  declare const RightPanel: (props: SlotWidthProps) => jsx.JSX.Element;
12
14
  export default RightPanel;
@@ -7,6 +7,8 @@ import type { SlotWidthProps } from '../../common/types';
7
7
  *
8
8
  * - [Examples](https://atlassian.design/components/page-layout/examples)
9
9
  * - [Code](https://atlassian.design/components/page-layout/code)
10
+ *
11
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
10
12
  */
11
13
  declare const RightSidebar: (props: SlotWidthProps) => jsx.JSX.Element;
12
14
  export default RightSidebar;
@@ -7,6 +7,8 @@ import type { SlotHeightProps } from '../../common/types';
7
7
  *
8
8
  * - [Examples](https://atlassian.design/components/page-layout/examples)
9
9
  * - [Code](https://atlassian.design/components/page-layout/code)
10
+ *
11
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
10
12
  */
11
13
  declare const TopNavigation: (props: SlotHeightProps) => jsx.JSX.Element;
12
14
  export default TopNavigation;
@@ -1,6 +1,9 @@
1
1
  export type { SkipLinkData } from './types';
2
2
  export { default as publishGridState } from './use-page-layout-grid';
3
- export { SidebarResizeContext, usePageLayoutResize, useLeftSidebarFlyoutLock, } from './sidebar-resize-context';
3
+ export { SidebarResizeContext } from './sidebar-resize-context';
4
+ export { usePageLayoutResize } from './use-page-layout-resize';
5
+ export { useLeftSidebarFlyoutLock } from './use-left-sidebar-flyout-lock';
4
6
  export { SidebarResizeController } from './sidebar-resize-controller';
5
- export { useSkipLinks, useSkipLink } from './skip-link-context';
7
+ export { useSkipLink } from './skip-link-context';
8
+ export { useSkipLinks } from './use-skip-links';
6
9
  export { SkipLinksController } from './skip-link-controller';
@@ -1,14 +1,5 @@
1
1
  import { type Context, type KeyboardEvent, type MouseEvent } from 'react';
2
- export type LeftSidebarState = {
3
- isFlyoutOpen: boolean;
4
- isResizing: boolean;
5
- isLeftSidebarCollapsed: boolean;
6
- leftSidebarWidth: number;
7
- lastLeftSidebarWidth: number;
8
- flyoutLockCount: number;
9
- isFixed: boolean;
10
- hasInit: boolean;
11
- };
2
+ import { type LeftSidebarState } from './types';
12
3
  export type SidebarResizeContextValue = {
13
4
  isLeftSidebarCollapsed: boolean;
14
5
  expandLeftSidebar: () => void;
@@ -22,32 +13,3 @@ export type SidebarResizeContextValue = {
22
13
  setLeftSidebarState: (value: LeftSidebarState | ((prevState: LeftSidebarState) => LeftSidebarState)) => void;
23
14
  };
24
15
  export declare const SidebarResizeContext: Context<SidebarResizeContextValue>;
25
- export declare const usePageLayoutResize: () => {
26
- isLeftSidebarCollapsed: boolean;
27
- expandLeftSidebar: () => void;
28
- collapseLeftSidebar: (event?: MouseEvent | KeyboardEvent, collapseWithoutTransition?: boolean) => void;
29
- /**
30
- * Conditionally expands or collapses the left sidebar based on the current state.
31
- * This is aware of our flyout mode in mobile as well.
32
- */
33
- toggleLeftSidebar: (event?: MouseEvent | KeyboardEvent, collapseWithoutTransition?: boolean) => void;
34
- leftSidebarState: LeftSidebarState;
35
- };
36
- /**
37
- * _**WARNING:**_ This hook is intended as a temporary solution and
38
- * is likely to be removed in a future version of page-layout.
39
- *
40
- * ---
41
- *
42
- * This hook will prevent the left sidebar from automatically collapsing
43
- * when it is in a flyout state.
44
- *
45
- * The intended use case for this hook is to allow popup menus in the
46
- * left sidebar to be usable while it is in a flyout state.
47
- *
48
- * ## Usage
49
- * The intended usage is to use this hook within the popup component
50
- * you are rendering. This way the left sidebar will be locked for
51
- * as long as the popup is open.
52
- */
53
- export declare const useLeftSidebarFlyoutLock: () => void;
@@ -1,5 +1,2 @@
1
- import { type Context } from 'react';
2
- import { type SkipLinkContextProps, type SkipLinkData } from './types';
3
- export declare const SkipLinksContext: Context<SkipLinkContextProps>;
4
- export declare const useSkipLinks: () => SkipLinkContextProps;
1
+ import { type SkipLinkData } from './types';
5
2
  export declare const useSkipLink: (id?: SkipLinkData["id"], skipLinkTitle?: SkipLinkData["skipLinkTitle"]) => void;
@@ -0,0 +1,3 @@
1
+ import { type Context } from 'react';
2
+ import { type SkipLinkContextProps } from './types';
3
+ export declare const SkipLinksContext: Context<SkipLinkContextProps>;
@@ -17,3 +17,16 @@ export type SkipLinkData = {
17
17
  */
18
18
  listIndex?: number;
19
19
  };
20
+ /**
21
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
22
+ */
23
+ export type LeftSidebarState = {
24
+ isFlyoutOpen: boolean;
25
+ isResizing: boolean;
26
+ isLeftSidebarCollapsed: boolean;
27
+ leftSidebarWidth: number;
28
+ lastLeftSidebarWidth: number;
29
+ flyoutLockCount: number;
30
+ isFixed: boolean;
31
+ hasInit: boolean;
32
+ };
@@ -0,0 +1,20 @@
1
+ /**
2
+ * _**WARNING:**_ This hook is intended as a temporary solution and
3
+ * is likely to be removed in a future version of page-layout.
4
+ *
5
+ * ---
6
+ *
7
+ * This hook will prevent the left sidebar from automatically collapsing
8
+ * when it is in a flyout state.
9
+ *
10
+ * The intended use case for this hook is to allow popup menus in the
11
+ * left sidebar to be usable while it is in a flyout state.
12
+ *
13
+ * ## Usage
14
+ * The intended usage is to use this hook within the popup component
15
+ * you are rendering. This way the left sidebar will be locked for
16
+ * as long as the popup is open.
17
+ *
18
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
19
+ */
20
+ export declare const useLeftSidebarFlyoutLock: () => void;
@@ -0,0 +1,16 @@
1
+ import { type KeyboardEvent, type MouseEvent } from 'react';
2
+ import { type LeftSidebarState } from './types';
3
+ /**
4
+ * @deprecated `@atlaskit/page-layout` is deprecated. Use `@atlaskit/navigation-system` instead.
5
+ */
6
+ export declare const usePageLayoutResize: () => {
7
+ isLeftSidebarCollapsed: boolean;
8
+ expandLeftSidebar: () => void;
9
+ collapseLeftSidebar: (event?: MouseEvent | KeyboardEvent, collapseWithoutTransition?: boolean) => void;
10
+ /**
11
+ * Conditionally expands or collapses the left sidebar based on the current state.
12
+ * This is aware of our flyout mode in mobile as well.
13
+ */
14
+ toggleLeftSidebar: (event?: MouseEvent | KeyboardEvent, collapseWithoutTransition?: boolean) => void;
15
+ leftSidebarState: LeftSidebarState;
16
+ };
@@ -0,0 +1,2 @@
1
+ import { type SkipLinkContextProps } from './types';
2
+ export declare const useSkipLinks: () => SkipLinkContextProps;
@@ -1,2 +1,3 @@
1
- export { usePageLayoutResize, useLeftSidebarFlyoutLock, } from '../controllers/sidebar-resize-context';
2
- export type { LeftSidebarState } from '../controllers/sidebar-resize-context';
1
+ export { usePageLayoutResize } from '../controllers/use-page-layout-resize';
2
+ export { useLeftSidebarFlyoutLock } from '../controllers/use-left-sidebar-flyout-lock';
3
+ export type { LeftSidebarState } from '../controllers/types';
@@ -1,4 +1,5 @@
1
1
  export { PageLayout, Main, Content, RightSidebar, LeftSidebar, LeftSidebarWithoutResize, RightPanel, LeftPanel, Banner, TopNavigation, useCustomSkipLink, } from './components';
2
2
  export { LEFT_PANEL_WIDTH, RIGHT_PANEL_WIDTH, BANNER_HEIGHT, TOP_NAVIGATION_HEIGHT, LEFT_SIDEBAR_WIDTH, RIGHT_SIDEBAR_WIDTH, } from './common/constants';
3
3
  export { usePageLayoutResize, useLeftSidebarFlyoutLock } from './controllers';
4
- export type { SlotHeightProps, SlotWidthProps, Dimensions, LeftSidebarState, PageLayoutProps, } from './common/types';
4
+ export type { SlotHeightProps, SlotWidthProps, Dimensions, PageLayoutProps } from './common/types';
5
+ export type { LeftSidebarState } from './controllers/types';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/page-layout",
3
- "version": "4.3.1",
3
+ "version": "4.3.2",
4
4
  "description": "A collection of components which let you compose an application's page layout.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -37,17 +37,17 @@
37
37
  "name": "Page layout",
38
38
  "category": "Layout and structure",
39
39
  "status": {
40
- "type": "intent-to-deprecate",
41
- "description": "We are planning on deprecating Page layout. We recommend using Navigation system instead. [View Navigation system documentation](/components/navigation-system)"
40
+ "type": "deprecated",
41
+ "description": "This package is deprecated. Use our new [navigation system](/components/navigation-system)."
42
42
  }
43
43
  }
44
44
  },
45
45
  "homepage": "https://atlassian.design/components/page-layout/",
46
46
  "dependencies": {
47
47
  "@atlaskit/ds-lib": "^7.0.0",
48
- "@atlaskit/icon": "^34.3.0",
48
+ "@atlaskit/icon": "^34.5.0",
49
49
  "@atlaskit/link": "^3.4.0",
50
- "@atlaskit/motion": "^6.0.0",
50
+ "@atlaskit/motion": "^6.2.0",
51
51
  "@atlaskit/platform-feature-flags": "^1.1.0",
52
52
  "@atlaskit/primitives": "^19.0.0",
53
53
  "@atlaskit/tokens": "^13.0.0",
@@ -66,12 +66,12 @@
66
66
  "@atlaskit/atlassian-navigation": "^5.7.0",
67
67
  "@atlaskit/button": "^23.11.0",
68
68
  "@atlaskit/docs": "^11.8.0",
69
- "@atlaskit/logo": "^20.0.0",
69
+ "@atlaskit/logo": "^20.1.0",
70
70
  "@atlaskit/menu": "^8.5.0",
71
- "@atlaskit/popup": "^4.16.0",
71
+ "@atlaskit/popup": "^4.19.0",
72
72
  "@atlaskit/section-message": "^8.12.0",
73
73
  "@atlaskit/side-navigation": "^11.2.0",
74
- "@atlaskit/tooltip": "^21.2.0",
74
+ "@atlaskit/tooltip": "^22.2.0",
75
75
  "@atlassian/react-compiler-gating": "workspace:^",
76
76
  "@atlassian/ssr-tests": "workspace:^",
77
77
  "@testing-library/react": "^16.3.0",
@@ -1,66 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.resolveDimension = exports.removeFromGridStateInStorage = exports.mergeGridStateIntoStorage = exports.getPageLayoutSlotSelector = exports.getPageLayoutSlotCSSSelector = exports.getLeftSidebarPercentage = exports.getLeftPanelWidth = exports.getGridStateFromStorage = void 0;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
10
- var _constants = require("./constants");
11
- var _safeLocalStorage = _interopRequireDefault(require("./safe-local-storage"));
12
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
13
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
14
- var mergeGridStateIntoStorage = exports.mergeGridStateIntoStorage = function mergeGridStateIntoStorage(key, value) {
15
- var storageValue = JSON.parse((0, _safeLocalStorage.default)().getItem(_constants.PAGE_LAYOUT_LS_KEY) || '{}');
16
- if (value !== null && (0, _typeof2.default)(value) === 'object') {
17
- storageValue[key] = _objectSpread(_objectSpread({}, storageValue[key]), value);
18
- } else {
19
- storageValue[key] = value;
20
- }
21
- (0, _safeLocalStorage.default)().setItem(_constants.PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
22
- };
23
- var getGridStateFromStorage = exports.getGridStateFromStorage = function getGridStateFromStorage(key) {
24
- var storageValue = JSON.parse((0, _safeLocalStorage.default)().getItem(_constants.PAGE_LAYOUT_LS_KEY) || '{}');
25
- return storageValue[key];
26
- };
27
- var removeFromGridStateInStorage = exports.removeFromGridStateInStorage = function removeFromGridStateInStorage(key, secondKey) {
28
- var storageValue = JSON.parse((0, _safeLocalStorage.default)().getItem(_constants.PAGE_LAYOUT_LS_KEY) || '{}');
29
- if (secondKey && storageValue[key]) {
30
- delete storageValue[key][secondKey];
31
- } else {
32
- delete storageValue[key];
33
- }
34
- (0, _safeLocalStorage.default)().setItem(_constants.PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
35
- };
36
- var resolveDimension = exports.resolveDimension = function resolveDimension(key) {
37
- var dimension = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
38
- var shouldPersist = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
39
- if (shouldPersist) {
40
- var cachedGridState = getGridStateFromStorage('gridState');
41
- return cachedGridState && Object.keys(cachedGridState).length > 0 && cachedGridState[key] ? cachedGridState[key] : dimension;
42
- }
43
- return dimension;
44
- };
45
- var getLeftPanelWidth = exports.getLeftPanelWidth = function getLeftPanelWidth() {
46
- if (typeof window === 'undefined') {
47
- return 0;
48
- }
49
- return parseInt(window.getComputedStyle(document.documentElement).getPropertyValue("--".concat(_constants.LEFT_PANEL_WIDTH)), 10) || 0;
50
- };
51
- var getLeftSidebarPercentage = exports.getLeftSidebarPercentage = function getLeftSidebarPercentage(currentWidth, maxWidth) {
52
- var total = (currentWidth - _constants.DEFAULT_LEFT_SIDEBAR_WIDTH) / (maxWidth - _constants.DEFAULT_LEFT_SIDEBAR_WIDTH);
53
- if (total < 0) {
54
- return 0;
55
- }
56
- if (total > 1) {
57
- return 100;
58
- }
59
- return Math.floor(total * 100);
60
- };
61
- var getPageLayoutSlotSelector = exports.getPageLayoutSlotSelector = function getPageLayoutSlotSelector(slotName) {
62
- return (0, _defineProperty2.default)({}, _constants.PAGE_LAYOUT_SLOT_SELECTOR, slotName);
63
- };
64
- var getPageLayoutSlotCSSSelector = exports.getPageLayoutSlotCSSSelector = function getPageLayoutSlotCSSSelector(slotName) {
65
- return "[".concat(_constants.PAGE_LAYOUT_SLOT_SELECTOR, "='").concat(slotName, "']");
66
- };
@@ -1,55 +0,0 @@
1
- import { DEFAULT_LEFT_SIDEBAR_WIDTH, LEFT_PANEL_WIDTH, PAGE_LAYOUT_LS_KEY, PAGE_LAYOUT_SLOT_SELECTOR } from './constants';
2
- import safeLocalStorage from './safe-local-storage';
3
- const mergeGridStateIntoStorage = (key, value) => {
4
- const storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
5
- if (value !== null && typeof value === 'object') {
6
- storageValue[key] = {
7
- ...storageValue[key],
8
- ...value
9
- };
10
- } else {
11
- storageValue[key] = value;
12
- }
13
- safeLocalStorage().setItem(PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
14
- };
15
- const getGridStateFromStorage = key => {
16
- const storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
17
- return storageValue[key];
18
- };
19
- const removeFromGridStateInStorage = (key, secondKey) => {
20
- const storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
21
- if (secondKey && storageValue[key]) {
22
- delete storageValue[key][secondKey];
23
- } else {
24
- delete storageValue[key];
25
- }
26
- safeLocalStorage().setItem(PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
27
- };
28
- const resolveDimension = (key, dimension = 0, shouldPersist = false) => {
29
- if (shouldPersist) {
30
- const cachedGridState = getGridStateFromStorage('gridState');
31
- return cachedGridState && Object.keys(cachedGridState).length > 0 && cachedGridState[key] ? cachedGridState[key] : dimension;
32
- }
33
- return dimension;
34
- };
35
- const getLeftPanelWidth = () => {
36
- if (typeof window === 'undefined') {
37
- return 0;
38
- }
39
- return parseInt(window.getComputedStyle(document.documentElement).getPropertyValue(`--${LEFT_PANEL_WIDTH}`), 10) || 0;
40
- };
41
- const getLeftSidebarPercentage = (currentWidth, maxWidth) => {
42
- const total = (currentWidth - DEFAULT_LEFT_SIDEBAR_WIDTH) / (maxWidth - DEFAULT_LEFT_SIDEBAR_WIDTH);
43
- if (total < 0) {
44
- return 0;
45
- }
46
- if (total > 1) {
47
- return 100;
48
- }
49
- return Math.floor(total * 100);
50
- };
51
- const getPageLayoutSlotSelector = slotName => ({
52
- [PAGE_LAYOUT_SLOT_SELECTOR]: slotName
53
- });
54
- const getPageLayoutSlotCSSSelector = slotName => `[${PAGE_LAYOUT_SLOT_SELECTOR}='${slotName}']`;
55
- export { mergeGridStateIntoStorage, getGridStateFromStorage, removeFromGridStateInStorage, resolveDimension, getLeftPanelWidth, getLeftSidebarPercentage, getPageLayoutSlotSelector, getPageLayoutSlotCSSSelector };
@@ -1,60 +0,0 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- import _typeof from "@babel/runtime/helpers/typeof";
3
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
- import { DEFAULT_LEFT_SIDEBAR_WIDTH, LEFT_PANEL_WIDTH, PAGE_LAYOUT_LS_KEY, PAGE_LAYOUT_SLOT_SELECTOR } from './constants';
6
- import safeLocalStorage from './safe-local-storage';
7
- var mergeGridStateIntoStorage = function mergeGridStateIntoStorage(key, value) {
8
- var storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
9
- if (value !== null && _typeof(value) === 'object') {
10
- storageValue[key] = _objectSpread(_objectSpread({}, storageValue[key]), value);
11
- } else {
12
- storageValue[key] = value;
13
- }
14
- safeLocalStorage().setItem(PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
15
- };
16
- var getGridStateFromStorage = function getGridStateFromStorage(key) {
17
- var storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
18
- return storageValue[key];
19
- };
20
- var removeFromGridStateInStorage = function removeFromGridStateInStorage(key, secondKey) {
21
- var storageValue = JSON.parse(safeLocalStorage().getItem(PAGE_LAYOUT_LS_KEY) || '{}');
22
- if (secondKey && storageValue[key]) {
23
- delete storageValue[key][secondKey];
24
- } else {
25
- delete storageValue[key];
26
- }
27
- safeLocalStorage().setItem(PAGE_LAYOUT_LS_KEY, JSON.stringify(storageValue));
28
- };
29
- var resolveDimension = function resolveDimension(key) {
30
- var dimension = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
31
- var shouldPersist = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
32
- if (shouldPersist) {
33
- var cachedGridState = getGridStateFromStorage('gridState');
34
- return cachedGridState && Object.keys(cachedGridState).length > 0 && cachedGridState[key] ? cachedGridState[key] : dimension;
35
- }
36
- return dimension;
37
- };
38
- var getLeftPanelWidth = function getLeftPanelWidth() {
39
- if (typeof window === 'undefined') {
40
- return 0;
41
- }
42
- return parseInt(window.getComputedStyle(document.documentElement).getPropertyValue("--".concat(LEFT_PANEL_WIDTH)), 10) || 0;
43
- };
44
- var getLeftSidebarPercentage = function getLeftSidebarPercentage(currentWidth, maxWidth) {
45
- var total = (currentWidth - DEFAULT_LEFT_SIDEBAR_WIDTH) / (maxWidth - DEFAULT_LEFT_SIDEBAR_WIDTH);
46
- if (total < 0) {
47
- return 0;
48
- }
49
- if (total > 1) {
50
- return 100;
51
- }
52
- return Math.floor(total * 100);
53
- };
54
- var getPageLayoutSlotSelector = function getPageLayoutSlotSelector(slotName) {
55
- return _defineProperty({}, PAGE_LAYOUT_SLOT_SELECTOR, slotName);
56
- };
57
- var getPageLayoutSlotCSSSelector = function getPageLayoutSlotCSSSelector(slotName) {
58
- return "[".concat(PAGE_LAYOUT_SLOT_SELECTOR, "='").concat(slotName, "']");
59
- };
60
- export { mergeGridStateIntoStorage, getGridStateFromStorage, removeFromGridStateInStorage, resolveDimension, getLeftPanelWidth, getLeftSidebarPercentage, getPageLayoutSlotSelector, getPageLayoutSlotCSSSelector };
@@ -1,12 +0,0 @@
1
- import type { DimensionNames } from './types';
2
- declare const mergeGridStateIntoStorage: (key: string, value: any) => void;
3
- declare const getGridStateFromStorage: (key: string) => any;
4
- declare const removeFromGridStateInStorage: (key: string, secondKey?: string) => void;
5
- declare const resolveDimension: (key: DimensionNames, dimension?: number, shouldPersist?: boolean) => any;
6
- declare const getLeftPanelWidth: () => number;
7
- declare const getLeftSidebarPercentage: (currentWidth: number, maxWidth: number) => number;
8
- declare const getPageLayoutSlotSelector: (slotName: string) => {
9
- "data-ds--page-layout--slot": string;
10
- };
11
- declare const getPageLayoutSlotCSSSelector: (slotName: string) => string;
12
- export { mergeGridStateIntoStorage, getGridStateFromStorage, removeFromGridStateInStorage, resolveDimension, getLeftPanelWidth, getLeftSidebarPercentage, getPageLayoutSlotSelector, getPageLayoutSlotCSSSelector, };
@@ -1,12 +0,0 @@
1
- import type { DimensionNames } from './types';
2
- declare const mergeGridStateIntoStorage: (key: string, value: any) => void;
3
- declare const getGridStateFromStorage: (key: string) => any;
4
- declare const removeFromGridStateInStorage: (key: string, secondKey?: string) => void;
5
- declare const resolveDimension: (key: DimensionNames, dimension?: number, shouldPersist?: boolean) => any;
6
- declare const getLeftPanelWidth: () => number;
7
- declare const getLeftSidebarPercentage: (currentWidth: number, maxWidth: number) => number;
8
- declare const getPageLayoutSlotSelector: (slotName: string) => {
9
- "data-ds--page-layout--slot": string;
10
- };
11
- declare const getPageLayoutSlotCSSSelector: (slotName: string) => string;
12
- export { mergeGridStateIntoStorage, getGridStateFromStorage, removeFromGridStateInStorage, resolveDimension, getLeftPanelWidth, getLeftSidebarPercentage, getPageLayoutSlotSelector, getPageLayoutSlotCSSSelector, };