@atlaskit/navigation-system 7.3.0 → 8.0.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 +11 -0
- package/constellation/layout/custom-theming.mdx +1 -1
- package/dist/cjs/context/skip-links/skip-links-context.js +2 -54
- package/dist/cjs/context/skip-links/use-skip-link-internal.js +45 -0
- package/dist/cjs/context/skip-links/use-skip-link.js +17 -0
- package/dist/cjs/context/top-nav-start/top-nav-start-attach-ref.js +10 -0
- package/dist/cjs/context/top-nav-start/top-nav-start-context-provider.js +4 -3
- package/dist/cjs/context/top-nav-start/top-nav-start-element.js +8 -0
- package/dist/cjs/entry-points/experimental/top-nav-button.js +8 -5
- package/dist/cjs/entry-points/layout/skip-links.js +4 -4
- package/dist/cjs/ui/page-layout/aside.js +6 -6
- package/dist/cjs/ui/page-layout/banner.js +8 -7
- package/dist/cjs/ui/page-layout/{hoist-utils.js → dangerously-hoist-css-var-to-document-root.js} +6 -25
- package/dist/cjs/ui/page-layout/hoist-css-var-to-local-grid.js +22 -0
- package/dist/cjs/ui/page-layout/main/main.js +4 -4
- package/dist/cjs/ui/page-layout/panel-splitter/get-pixel-width.js +13 -0
- package/dist/cjs/ui/page-layout/panel-splitter/{get-width.js → get-width-from-drag-location.js} +1 -12
- package/dist/cjs/ui/page-layout/panel-splitter/is-panel-splitter-drag-data.js +10 -0
- package/dist/cjs/ui/page-layout/panel-splitter/{context.js → on-double-click-context.js} +1 -9
- package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter-context.js +14 -0
- package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter-drag-symbol.js +7 -0
- package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.js +17 -19
- package/dist/cjs/ui/page-layout/panel-splitter/provider.js +2 -2
- package/dist/cjs/ui/page-layout/panel-splitter/side-nav-panel-splitter.js +4 -3
- package/dist/cjs/ui/page-layout/panel.js +8 -8
- package/dist/cjs/ui/page-layout/ribbon.js +4 -4
- package/dist/cjs/ui/page-layout/root.js +3 -3
- package/dist/cjs/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.js +3 -25
- package/dist/cjs/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-provider.js +16 -0
- package/dist/cjs/ui/page-layout/side-nav/set-side-nav-visibility-state.js +10 -0
- package/dist/cjs/ui/page-layout/side-nav/{element-context.js → side-nav-element-provider.js} +2 -14
- package/dist/cjs/ui/page-layout/side-nav/side-nav-ref-context.js +10 -0
- package/dist/cjs/ui/page-layout/side-nav/side-nav-toggle-button-attach-ref.js +10 -0
- package/dist/cjs/ui/page-layout/side-nav/side-nav-toggle-button-element.js +12 -0
- package/dist/cjs/ui/page-layout/side-nav/side-nav-visibility-state.js +12 -0
- package/dist/cjs/ui/page-layout/side-nav/side-nav.js +19 -18
- package/dist/cjs/ui/page-layout/side-nav/toggle-button-provider.js +4 -3
- package/dist/cjs/ui/page-layout/side-nav/toggle-button.js +8 -8
- package/dist/cjs/ui/page-layout/side-nav/use-expand-side-nav.js +2 -2
- package/dist/cjs/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.js +15 -0
- package/dist/cjs/ui/page-layout/side-nav/use-side-nav-ref.js +16 -0
- package/dist/cjs/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js +2 -2
- package/dist/cjs/ui/page-layout/side-nav/use-side-nav-visibility.js +2 -2
- package/dist/cjs/ui/page-layout/side-nav/use-toggle-side-nav.js +2 -2
- package/dist/cjs/ui/page-layout/side-nav/visibility-provider.js +4 -3
- package/dist/cjs/ui/page-layout/top-nav/top-nav-end.js +2 -2
- package/dist/cjs/ui/page-layout/top-nav/top-nav-start.js +5 -5
- package/dist/cjs/ui/page-layout/top-nav/top-nav.js +17 -15
- package/dist/cjs/ui/page-layout/{id-utils.js → use-layout-id.js} +2 -14
- package/dist/cjs/ui/page-layout/use-resizing-width-css-var-on-root-element.js +2 -2
- package/dist/cjs/ui/page-layout/use-skip-link-id.js +17 -0
- package/dist/cjs/ui/top-nav-items/app-switcher.js +2 -2
- package/dist/cjs/ui/top-nav-items/chat-button.js +2 -2
- package/dist/cjs/ui/top-nav-items/create-button.js +2 -2
- package/dist/cjs/ui/top-nav-items/end-item.js +2 -2
- package/dist/cjs/ui/top-nav-items/log-in.js +2 -2
- package/dist/cjs/ui/top-nav-items/search.js +2 -2
- package/dist/cjs/ui/top-nav-items/themed/button.js +12 -358
- package/dist/cjs/ui/top-nav-items/themed/get-custom-theme-styles.js +10 -10
- package/dist/cjs/ui/top-nav-items/themed/get-primitives-spread-props.js +39 -0
- package/dist/cjs/ui/top-nav-items/themed/icon-button.js +21 -0
- package/dist/cjs/ui/top-nav-items/themed/link-button.js +21 -0
- package/dist/cjs/ui/top-nav-items/themed/link-icon-button.js +21 -0
- package/dist/cjs/ui/top-nav-items/themed/palette-rgba.js +20 -0
- package/dist/cjs/ui/top-nav-items/themed/palette.js +1 -21
- package/dist/cjs/ui/top-nav-items/themed/search.js +1 -2
- package/dist/cjs/ui/top-nav-items/themed/{button.compiled.css → themed-anchor.compiled.css} +0 -1
- package/dist/cjs/ui/top-nav-items/themed/themed-anchor.js +76 -0
- package/dist/cjs/ui/top-nav-items/themed/themed-button.compiled.css +2 -0
- package/dist/cjs/ui/top-nav-items/themed/themed-button.js +40 -0
- package/dist/cjs/ui/top-nav-items/themed/themed-icon-button.js +85 -0
- package/dist/cjs/ui/top-nav-items/themed/themed-link-button.compiled.css +2 -0
- package/dist/cjs/ui/top-nav-items/themed/themed-link-button.js +45 -0
- package/dist/cjs/ui/top-nav-items/themed/themed-link-icon-button.js +83 -0
- package/dist/{esm/ui/top-nav-items/themed/button.compiled.css → cjs/ui/top-nav-items/themed/themed-pressable.compiled.css} +0 -1
- package/dist/cjs/ui/top-nav-items/themed/themed-pressable.js +64 -0
- package/dist/cjs/ui/top-nav-items/themed/types.js +5 -0
- package/dist/cjs/ui/top-nav-items/themed/use-custom-theme-new.js +53 -0
- package/dist/cjs/ui/top-nav-items/themed/use-custom-theme.js +0 -41
- package/dist/es2019/context/skip-links/skip-links-context.js +2 -54
- package/dist/es2019/context/skip-links/use-skip-link-internal.js +41 -0
- package/dist/es2019/context/skip-links/use-skip-link.js +12 -0
- package/dist/es2019/context/top-nav-start/top-nav-start-attach-ref.js +3 -0
- package/dist/es2019/context/top-nav-start/top-nav-start-context-provider.js +2 -1
- package/dist/es2019/context/top-nav-start/top-nav-start-element.js +2 -0
- package/dist/es2019/entry-points/experimental/top-nav-button.js +4 -1
- package/dist/es2019/entry-points/layout/skip-links.js +2 -2
- package/dist/es2019/ui/page-layout/aside.js +3 -3
- package/dist/es2019/ui/page-layout/banner.js +4 -3
- package/dist/es2019/ui/page-layout/{hoist-utils.js → dangerously-hoist-css-var-to-document-root.js} +0 -19
- package/dist/es2019/ui/page-layout/hoist-css-var-to-local-grid.js +15 -0
- package/dist/es2019/ui/page-layout/main/main.js +2 -2
- package/dist/es2019/ui/page-layout/panel-splitter/get-pixel-width.js +7 -0
- package/dist/es2019/ui/page-layout/panel-splitter/{get-width.js → get-width-from-drag-location.js} +0 -11
- package/dist/es2019/ui/page-layout/panel-splitter/is-panel-splitter-drag-data.js +4 -0
- package/dist/es2019/ui/page-layout/panel-splitter/{context.js → on-double-click-context.js} +0 -8
- package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter-context.js +9 -0
- package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter-drag-symbol.js +1 -0
- package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.js +12 -13
- package/dist/es2019/ui/page-layout/panel-splitter/provider.js +1 -1
- package/dist/es2019/ui/page-layout/panel-splitter/side-nav-panel-splitter.js +2 -1
- package/dist/es2019/ui/page-layout/panel.js +4 -4
- package/dist/es2019/ui/page-layout/ribbon.js +2 -2
- package/dist/es2019/ui/page-layout/root.js +2 -2
- package/dist/es2019/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.js +2 -22
- package/dist/es2019/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-provider.js +10 -0
- package/dist/es2019/ui/page-layout/side-nav/set-side-nav-visibility-state.js +3 -0
- package/dist/es2019/ui/page-layout/side-nav/side-nav-element-provider.js +10 -0
- package/dist/es2019/ui/page-layout/side-nav/side-nav-ref-context.js +4 -0
- package/dist/es2019/ui/page-layout/side-nav/side-nav-toggle-button-attach-ref.js +3 -0
- package/dist/es2019/ui/page-layout/side-nav/side-nav-toggle-button-element.js +7 -0
- package/dist/es2019/ui/page-layout/side-nav/{visibility-context.js → side-nav-visibility-state.js} +1 -7
- package/dist/es2019/ui/page-layout/side-nav/side-nav.js +9 -8
- package/dist/es2019/ui/page-layout/side-nav/toggle-button-provider.js +2 -1
- package/dist/es2019/ui/page-layout/side-nav/toggle-button.js +4 -4
- package/dist/es2019/ui/page-layout/side-nav/use-expand-side-nav.js +1 -1
- package/dist/es2019/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.js +10 -0
- package/dist/es2019/ui/page-layout/side-nav/use-side-nav-ref.js +11 -0
- package/dist/es2019/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js +1 -1
- package/dist/es2019/ui/page-layout/side-nav/use-side-nav-visibility.js +1 -1
- package/dist/es2019/ui/page-layout/side-nav/use-toggle-side-nav.js +1 -1
- package/dist/es2019/ui/page-layout/side-nav/visibility-provider.js +2 -2
- package/dist/es2019/ui/page-layout/top-nav/top-nav-end.js +1 -1
- package/dist/es2019/ui/page-layout/top-nav/top-nav-start.js +2 -2
- package/dist/es2019/ui/page-layout/top-nav/top-nav.js +11 -8
- package/dist/es2019/ui/page-layout/use-layout-id.js +15 -0
- package/dist/es2019/ui/page-layout/use-resizing-width-css-var-on-root-element.js +1 -1
- package/dist/es2019/ui/page-layout/{id-utils.js → use-skip-link-id.js} +0 -14
- package/dist/es2019/ui/top-nav-items/app-switcher.js +1 -1
- package/dist/es2019/ui/top-nav-items/chat-button.js +1 -1
- package/dist/es2019/ui/top-nav-items/create-button.js +1 -1
- package/dist/es2019/ui/top-nav-items/end-item.js +1 -1
- package/dist/es2019/ui/top-nav-items/log-in.js +1 -1
- package/dist/es2019/ui/top-nav-items/search.js +1 -1
- package/dist/es2019/ui/top-nav-items/themed/button.js +11 -347
- package/dist/es2019/ui/top-nav-items/themed/get-custom-theme-styles.js +28 -28
- package/dist/es2019/ui/top-nav-items/themed/get-primitives-spread-props.js +31 -0
- package/dist/es2019/ui/top-nav-items/themed/icon-button.js +12 -0
- package/dist/es2019/ui/top-nav-items/themed/link-button.js +12 -0
- package/dist/es2019/ui/top-nav-items/themed/link-icon-button.js +12 -0
- package/dist/es2019/ui/top-nav-items/themed/palette-rgba.js +14 -0
- package/dist/es2019/ui/top-nav-items/themed/palette.js +0 -20
- package/dist/es2019/ui/top-nav-items/themed/search.js +1 -2
- package/dist/es2019/ui/top-nav-items/themed/{button.compiled.css → themed-anchor.compiled.css} +0 -1
- package/dist/es2019/ui/top-nav-items/themed/themed-anchor.js +66 -0
- package/dist/es2019/ui/top-nav-items/themed/themed-button.compiled.css +2 -0
- package/dist/es2019/ui/top-nav-items/themed/themed-button.js +30 -0
- package/dist/es2019/ui/top-nav-items/themed/themed-icon-button.js +72 -0
- package/dist/es2019/ui/top-nav-items/themed/themed-link-button.compiled.css +2 -0
- package/dist/es2019/ui/top-nav-items/themed/themed-link-button.js +37 -0
- package/dist/es2019/ui/top-nav-items/themed/themed-link-icon-button.js +73 -0
- package/dist/es2019/ui/top-nav-items/themed/themed-pressable.compiled.css +68 -0
- package/dist/es2019/ui/top-nav-items/themed/themed-pressable.js +52 -0
- package/dist/es2019/ui/top-nav-items/themed/types.js +1 -0
- package/dist/es2019/ui/top-nav-items/themed/use-custom-theme-new.js +45 -0
- package/dist/es2019/ui/top-nav-items/themed/use-custom-theme.js +0 -38
- package/dist/esm/context/skip-links/skip-links-context.js +2 -54
- package/dist/esm/context/skip-links/use-skip-link-internal.js +39 -0
- package/dist/esm/context/skip-links/use-skip-link.js +12 -0
- package/dist/esm/context/top-nav-start/top-nav-start-attach-ref.js +3 -0
- package/dist/esm/context/top-nav-start/top-nav-start-context-provider.js +2 -1
- package/dist/esm/context/top-nav-start/top-nav-start-element.js +2 -0
- package/dist/esm/entry-points/experimental/top-nav-button.js +4 -1
- package/dist/esm/entry-points/layout/skip-links.js +2 -2
- package/dist/esm/ui/page-layout/aside.js +3 -3
- package/dist/esm/ui/page-layout/banner.js +4 -3
- package/dist/esm/ui/page-layout/dangerously-hoist-css-var-to-document-root.js +31 -0
- package/dist/esm/ui/page-layout/hoist-css-var-to-local-grid.js +16 -0
- package/dist/esm/ui/page-layout/main/main.js +2 -2
- package/dist/esm/ui/page-layout/panel-splitter/get-pixel-width.js +7 -0
- package/dist/esm/ui/page-layout/panel-splitter/{get-width.js → get-width-from-drag-location.js} +0 -11
- package/dist/esm/ui/page-layout/panel-splitter/is-panel-splitter-drag-data.js +4 -0
- package/dist/esm/ui/page-layout/panel-splitter/{context.js → on-double-click-context.js} +0 -8
- package/dist/esm/ui/page-layout/panel-splitter/panel-splitter-context.js +9 -0
- package/dist/esm/ui/page-layout/panel-splitter/panel-splitter-drag-symbol.js +1 -0
- package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.js +9 -10
- package/dist/esm/ui/page-layout/panel-splitter/provider.js +1 -1
- package/dist/esm/ui/page-layout/panel-splitter/side-nav-panel-splitter.js +2 -1
- package/dist/esm/ui/page-layout/panel.js +4 -4
- package/dist/esm/ui/page-layout/ribbon.js +2 -2
- package/dist/esm/ui/page-layout/root.js +2 -2
- package/dist/esm/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.js +2 -21
- package/dist/esm/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-provider.js +9 -0
- package/dist/esm/ui/page-layout/side-nav/set-side-nav-visibility-state.js +3 -0
- package/dist/esm/ui/page-layout/side-nav/side-nav-element-provider.js +9 -0
- package/dist/esm/ui/page-layout/side-nav/side-nav-ref-context.js +4 -0
- package/dist/esm/ui/page-layout/side-nav/side-nav-toggle-button-attach-ref.js +3 -0
- package/dist/esm/ui/page-layout/side-nav/side-nav-toggle-button-element.js +7 -0
- package/dist/esm/ui/page-layout/side-nav/{visibility-context.js → side-nav-visibility-state.js} +1 -7
- package/dist/esm/ui/page-layout/side-nav/side-nav.js +9 -8
- package/dist/esm/ui/page-layout/side-nav/toggle-button-provider.js +2 -1
- package/dist/esm/ui/page-layout/side-nav/toggle-button.js +4 -4
- package/dist/esm/ui/page-layout/side-nav/use-expand-side-nav.js +1 -1
- package/dist/esm/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.js +10 -0
- package/dist/esm/ui/page-layout/side-nav/use-side-nav-ref.js +11 -0
- package/dist/esm/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js +1 -1
- package/dist/esm/ui/page-layout/side-nav/use-side-nav-visibility.js +1 -1
- package/dist/esm/ui/page-layout/side-nav/use-toggle-side-nav.js +1 -1
- package/dist/esm/ui/page-layout/side-nav/visibility-provider.js +2 -2
- package/dist/esm/ui/page-layout/top-nav/top-nav-end.js +1 -1
- package/dist/esm/ui/page-layout/top-nav/top-nav-start.js +2 -2
- package/dist/esm/ui/page-layout/top-nav/top-nav.js +11 -8
- package/dist/esm/ui/page-layout/{id-utils.js → use-layout-id.js} +1 -12
- package/dist/esm/ui/page-layout/use-resizing-width-css-var-on-root-element.js +1 -1
- package/dist/esm/ui/page-layout/use-skip-link-id.js +12 -0
- package/dist/esm/ui/top-nav-items/app-switcher.js +1 -1
- package/dist/esm/ui/top-nav-items/chat-button.js +1 -1
- package/dist/esm/ui/top-nav-items/create-button.js +1 -1
- package/dist/esm/ui/top-nav-items/end-item.js +1 -1
- package/dist/esm/ui/top-nav-items/log-in.js +1 -1
- package/dist/esm/ui/top-nav-items/search.js +1 -1
- package/dist/esm/ui/top-nav-items/themed/button.js +11 -358
- package/dist/esm/ui/top-nav-items/themed/get-custom-theme-styles.js +9 -9
- package/dist/esm/ui/top-nav-items/themed/get-primitives-spread-props.js +32 -0
- package/dist/esm/ui/top-nav-items/themed/icon-button.js +12 -0
- package/dist/esm/ui/top-nav-items/themed/link-button.js +12 -0
- package/dist/esm/ui/top-nav-items/themed/link-icon-button.js +12 -0
- package/dist/esm/ui/top-nav-items/themed/palette-rgba.js +14 -0
- package/dist/esm/ui/top-nav-items/themed/palette.js +0 -20
- package/dist/esm/ui/top-nav-items/themed/search.js +1 -2
- package/dist/esm/ui/top-nav-items/themed/themed-anchor.compiled.css +68 -0
- package/dist/esm/ui/top-nav-items/themed/themed-anchor.js +69 -0
- package/dist/esm/ui/top-nav-items/themed/themed-button.compiled.css +2 -0
- package/dist/esm/ui/top-nav-items/themed/themed-button.js +31 -0
- package/dist/esm/ui/top-nav-items/themed/themed-icon-button.js +76 -0
- package/dist/esm/ui/top-nav-items/themed/themed-link-button.compiled.css +2 -0
- package/dist/esm/ui/top-nav-items/themed/themed-link-button.js +38 -0
- package/dist/esm/ui/top-nav-items/themed/themed-link-icon-button.js +77 -0
- package/dist/esm/ui/top-nav-items/themed/themed-pressable.compiled.css +68 -0
- package/dist/esm/ui/top-nav-items/themed/themed-pressable.js +55 -0
- package/dist/esm/ui/top-nav-items/themed/types.js +1 -0
- package/dist/esm/ui/top-nav-items/themed/use-custom-theme-new.js +46 -0
- package/dist/esm/ui/top-nav-items/themed/use-custom-theme.js +0 -39
- package/dist/types/context/skip-links/skip-links-context.d.ts +0 -27
- package/dist/types/context/skip-links/use-skip-link-internal.d.ts +10 -0
- package/dist/types/context/skip-links/use-skip-link.d.ts +18 -0
- package/dist/types/context/top-nav-start/top-nav-start-attach-ref.d.ts +1 -0
- package/dist/types/context/top-nav-start/top-nav-start-element.d.ts +1 -0
- package/dist/types/entry-points/experimental/top-nav-button.d.ts +4 -1
- package/dist/types/entry-points/layout/skip-links.d.ts +2 -2
- package/dist/types/ui/page-layout/dangerously-hoist-css-var-to-document-root.d.ts +8 -0
- package/dist/{types-ts4.5/ui/page-layout/hoist-utils.d.ts → types/ui/page-layout/hoist-css-var-to-local-grid.d.ts} +0 -11
- package/dist/types/ui/page-layout/panel-splitter/get-pixel-width.d.ts +4 -0
- package/dist/types/ui/page-layout/panel-splitter/get-width-from-drag-location.d.ts +8 -0
- package/dist/types/ui/page-layout/panel-splitter/is-panel-splitter-drag-data.d.ts +9 -0
- package/dist/types/ui/page-layout/panel-splitter/on-double-click-context.d.ts +8 -0
- package/dist/{types-ts4.5/ui/page-layout/panel-splitter/context.d.ts → types/ui/page-layout/panel-splitter/panel-splitter-context.d.ts} +0 -8
- package/dist/types/ui/page-layout/panel-splitter/panel-splitter-drag-symbol.d.ts +1 -0
- package/dist/types/ui/page-layout/panel-splitter/panel-splitter.d.ts +1 -10
- package/dist/types/ui/page-layout/panel-splitter/provider.d.ts +1 -1
- package/dist/types/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.d.ts +6 -11
- package/dist/types/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-provider.d.ts +5 -0
- package/dist/types/ui/page-layout/side-nav/set-side-nav-visibility-state.d.ts +3 -0
- package/dist/types/ui/page-layout/side-nav/side-nav-element-provider.d.ts +4 -0
- package/dist/types/ui/page-layout/side-nav/side-nav-ref-context.d.ts +2 -0
- package/dist/types/ui/page-layout/side-nav/side-nav-toggle-button-attach-ref.d.ts +1 -0
- package/dist/types/ui/page-layout/side-nav/side-nav-toggle-button-element.d.ts +5 -0
- package/dist/{types-ts4.5/ui/page-layout/side-nav/visibility-context.d.ts → types/ui/page-layout/side-nav/side-nav-visibility-state.d.ts} +0 -5
- package/dist/types/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.d.ts +5 -0
- package/dist/{types-ts4.5/ui/page-layout/side-nav/element-context.d.ts → types/ui/page-layout/side-nav/use-side-nav-ref.d.ts} +1 -4
- package/dist/types/ui/page-layout/top-nav/top-nav.d.ts +3 -4
- package/dist/{types-ts4.5/ui/page-layout/id-utils.d.ts → types/ui/page-layout/use-layout-id.d.ts} +0 -5
- package/dist/types/ui/page-layout/use-skip-link-id.d.ts +5 -0
- package/dist/types/ui/top-nav-items/themed/button.d.ts +5 -126
- package/dist/types/ui/top-nav-items/themed/get-primitives-spread-props.d.ts +16 -0
- package/dist/types/ui/top-nav-items/themed/icon-button.d.ts +7 -0
- package/dist/types/ui/top-nav-items/themed/link-button.d.ts +3 -0
- package/dist/types/ui/top-nav-items/themed/link-icon-button.d.ts +7 -0
- package/dist/types/ui/top-nav-items/themed/palette-rgba.d.ts +14 -0
- package/dist/types/ui/top-nav-items/themed/palette.d.ts +0 -20
- package/dist/types/ui/top-nav-items/themed/themed-anchor.d.ts +32 -0
- package/dist/types/ui/top-nav-items/themed/themed-button.d.ts +10 -0
- package/dist/types/ui/top-nav-items/themed/themed-icon-button.d.ts +10 -0
- package/dist/types/ui/top-nav-items/themed/themed-link-button.d.ts +16 -0
- package/dist/types/ui/top-nav-items/themed/themed-link-icon-button.d.ts +13 -0
- package/dist/types/ui/top-nav-items/themed/themed-pressable.d.ts +18 -0
- package/dist/types/ui/top-nav-items/themed/types.d.ts +54 -0
- package/dist/types/ui/top-nav-items/themed/use-custom-theme-new.d.ts +20 -0
- package/dist/types/ui/top-nav-items/themed/use-custom-theme.d.ts +0 -11
- package/dist/types-ts4.5/context/skip-links/skip-links-context.d.ts +0 -27
- package/dist/types-ts4.5/context/skip-links/use-skip-link-internal.d.ts +10 -0
- package/dist/types-ts4.5/context/skip-links/use-skip-link.d.ts +18 -0
- package/dist/types-ts4.5/context/top-nav-start/top-nav-start-attach-ref.d.ts +1 -0
- package/dist/types-ts4.5/context/top-nav-start/top-nav-start-element.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/experimental/top-nav-button.d.ts +4 -1
- package/dist/types-ts4.5/entry-points/layout/skip-links.d.ts +2 -2
- package/dist/types-ts4.5/ui/page-layout/dangerously-hoist-css-var-to-document-root.d.ts +8 -0
- package/dist/{types/ui/page-layout/hoist-utils.d.ts → types-ts4.5/ui/page-layout/hoist-css-var-to-local-grid.d.ts} +0 -11
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-pixel-width.d.ts +4 -0
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-width-from-drag-location.d.ts +8 -0
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/is-panel-splitter-drag-data.d.ts +9 -0
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/on-double-click-context.d.ts +8 -0
- package/dist/{types/ui/page-layout/panel-splitter/context.d.ts → types-ts4.5/ui/page-layout/panel-splitter/panel-splitter-context.d.ts} +0 -8
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/panel-splitter-drag-symbol.d.ts +1 -0
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/panel-splitter.d.ts +1 -10
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/provider.d.ts +1 -1
- package/dist/types-ts4.5/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-context.d.ts +6 -11
- package/dist/types-ts4.5/ui/page-layout/side-nav/is-side-nav-shortcut-enabled-provider.d.ts +5 -0
- package/dist/types-ts4.5/ui/page-layout/side-nav/set-side-nav-visibility-state.d.ts +3 -0
- package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-element-provider.d.ts +4 -0
- package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-ref-context.d.ts +2 -0
- package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-toggle-button-attach-ref.d.ts +1 -0
- package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-toggle-button-element.d.ts +5 -0
- package/dist/{types/ui/page-layout/side-nav/visibility-context.d.ts → types-ts4.5/ui/page-layout/side-nav/side-nav-visibility-state.d.ts} +0 -5
- package/dist/types-ts4.5/ui/page-layout/side-nav/use-is-side-nav-shortcut-enabled.d.ts +5 -0
- package/dist/{types/ui/page-layout/side-nav/element-context.d.ts → types-ts4.5/ui/page-layout/side-nav/use-side-nav-ref.d.ts} +1 -4
- package/dist/types-ts4.5/ui/page-layout/top-nav/top-nav.d.ts +3 -4
- package/dist/{types/ui/page-layout/id-utils.d.ts → types-ts4.5/ui/page-layout/use-layout-id.d.ts} +0 -5
- package/dist/types-ts4.5/ui/page-layout/use-skip-link-id.d.ts +5 -0
- package/dist/types-ts4.5/ui/top-nav-items/themed/button.d.ts +5 -126
- package/dist/types-ts4.5/ui/top-nav-items/themed/get-primitives-spread-props.d.ts +16 -0
- package/dist/types-ts4.5/ui/top-nav-items/themed/icon-button.d.ts +7 -0
- package/dist/types-ts4.5/ui/top-nav-items/themed/link-button.d.ts +3 -0
- package/dist/types-ts4.5/ui/top-nav-items/themed/link-icon-button.d.ts +7 -0
- package/dist/types-ts4.5/ui/top-nav-items/themed/palette-rgba.d.ts +14 -0
- package/dist/types-ts4.5/ui/top-nav-items/themed/palette.d.ts +0 -20
- package/dist/types-ts4.5/ui/top-nav-items/themed/themed-anchor.d.ts +32 -0
- package/dist/types-ts4.5/ui/top-nav-items/themed/themed-button.d.ts +10 -0
- package/dist/types-ts4.5/ui/top-nav-items/themed/themed-icon-button.d.ts +10 -0
- package/dist/types-ts4.5/ui/top-nav-items/themed/themed-link-button.d.ts +16 -0
- package/dist/types-ts4.5/ui/top-nav-items/themed/themed-link-icon-button.d.ts +13 -0
- package/dist/types-ts4.5/ui/top-nav-items/themed/themed-pressable.d.ts +18 -0
- package/dist/types-ts4.5/ui/top-nav-items/themed/types.d.ts +54 -0
- package/dist/types-ts4.5/ui/top-nav-items/themed/use-custom-theme-new.d.ts +20 -0
- package/dist/types-ts4.5/ui/top-nav-items/themed/use-custom-theme.d.ts +0 -11
- package/package.json +13 -13
- package/dist/cjs/context/top-nav-start/top-nav-start-context.js +0 -26
- package/dist/cjs/ui/page-layout/side-nav/toggle-button-context.js +0 -26
- package/dist/cjs/ui/page-layout/side-nav/visibility-context.js +0 -19
- package/dist/cjs/ui/top-nav-items/themed/migration.js +0 -53
- package/dist/es2019/context/top-nav-start/top-nav-start-context.js +0 -20
- package/dist/es2019/ui/page-layout/side-nav/element-context.js +0 -21
- package/dist/es2019/ui/page-layout/side-nav/toggle-button-context.js +0 -19
- package/dist/es2019/ui/top-nav-items/themed/migration.js +0 -45
- package/dist/esm/context/top-nav-start/top-nav-start-context.js +0 -20
- package/dist/esm/ui/page-layout/hoist-utils.js +0 -51
- package/dist/esm/ui/page-layout/side-nav/element-context.js +0 -20
- package/dist/esm/ui/page-layout/side-nav/toggle-button-context.js +0 -19
- package/dist/esm/ui/top-nav-items/themed/migration.js +0 -45
- package/dist/types/context/top-nav-start/top-nav-start-context.d.ts +0 -16
- package/dist/types/ui/page-layout/panel-splitter/get-width.d.ts +0 -16
- package/dist/types/ui/page-layout/side-nav/toggle-button-context.d.ts +0 -16
- package/dist/types/ui/top-nav-items/themed/migration.d.ts +0 -10
- package/dist/types-ts4.5/context/top-nav-start/top-nav-start-context.d.ts +0 -16
- package/dist/types-ts4.5/ui/page-layout/panel-splitter/get-width.d.ts +0 -16
- package/dist/types-ts4.5/ui/page-layout/side-nav/toggle-button-context.d.ts +0 -16
- package/dist/types-ts4.5/ui/top-nav-items/themed/migration.d.ts +0 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @atlassian/navigation-system
|
|
2
2
|
|
|
3
|
+
## 8.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [`90dc3406ea1eb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/90dc3406ea1eb) -
|
|
8
|
+
Renames `UNSAFE_theme` prop to `customTheme` on `TopNav` component.
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
3
14
|
## 7.3.0
|
|
4
15
|
|
|
5
16
|
### Minor Changes
|
|
@@ -10,7 +10,7 @@ import { CustomThemingParseRgbExample } from '../../examples/constellation/layou
|
|
|
10
10
|
import { CustomThemingParseHslExample } from '../../examples/constellation/layout/custom-theming--parse-hsl';
|
|
11
11
|
import { CustomThemingParseUserColorExample } from '../../examples/constellation/layout/custom-theming--parse-user-color';
|
|
12
12
|
|
|
13
|
-
Top navigation supports custom theming through the `
|
|
13
|
+
Top navigation supports custom theming through the `customTheme` prop.
|
|
14
14
|
|
|
15
15
|
Enable custom theming by providing both:
|
|
16
16
|
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.
|
|
7
|
+
exports.SkipLinksContext = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
10
10
|
/**
|
|
@@ -13,56 +13,4 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
|
13
13
|
var SkipLinksContext = exports.SkipLinksContext = /*#__PURE__*/(0, _react.createContext)({
|
|
14
14
|
registerSkipLink: _noop.default,
|
|
15
15
|
unregisterSkipLink: _noop.default
|
|
16
|
-
});
|
|
17
|
-
var useSkipLinks = function useSkipLinks() {
|
|
18
|
-
return (0, _react.useContext)(SkipLinksContext);
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Internal-only hook for registering skip links.
|
|
23
|
-
*
|
|
24
|
-
* `useSkipLink` is the public API wrapper of this.
|
|
25
|
-
*
|
|
26
|
-
* This private version exists for us to support `onBeforeNavigate` for the side nav use case,
|
|
27
|
-
* where we might need to expand it before moving focus, without having to support `onBeforeNavigate` publicly.
|
|
28
|
-
*/
|
|
29
|
-
var useSkipLinkInternal = exports.useSkipLinkInternal = function useSkipLinkInternal(_ref) {
|
|
30
|
-
var id = _ref.id,
|
|
31
|
-
label = _ref.label,
|
|
32
|
-
listIndex = _ref.listIndex,
|
|
33
|
-
onBeforeNavigate = _ref.onBeforeNavigate,
|
|
34
|
-
isHidden = _ref.isHidden;
|
|
35
|
-
var _useSkipLinks = useSkipLinks(),
|
|
36
|
-
registerSkipLink = _useSkipLinks.registerSkipLink,
|
|
37
|
-
unregisterSkipLink = _useSkipLinks.unregisterSkipLink;
|
|
38
|
-
(0, _react.useEffect)(function () {
|
|
39
|
-
if (isHidden) {
|
|
40
|
-
/**
|
|
41
|
-
* Skip links are hidden for slots with 0 height or width.
|
|
42
|
-
* They should not be registered.
|
|
43
|
-
*/
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
registerSkipLink({
|
|
47
|
-
id: id,
|
|
48
|
-
label: label,
|
|
49
|
-
listIndex: listIndex,
|
|
50
|
-
onBeforeNavigate: onBeforeNavigate,
|
|
51
|
-
isHidden: isHidden
|
|
52
|
-
});
|
|
53
|
-
return function () {
|
|
54
|
-
unregisterSkipLink(id);
|
|
55
|
-
};
|
|
56
|
-
}, [id, isHidden, label, listIndex, onBeforeNavigate, registerSkipLink, unregisterSkipLink]);
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* Call `useSkipLink` to register a skip link for important elements on the page.
|
|
61
|
-
*/
|
|
62
|
-
var useSkipLink = exports.useSkipLink = function useSkipLink(id, label, listIndex) {
|
|
63
|
-
useSkipLinkInternal({
|
|
64
|
-
id: id,
|
|
65
|
-
label: label,
|
|
66
|
-
listIndex: listIndex
|
|
67
|
-
});
|
|
68
|
-
};
|
|
16
|
+
});
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useSkipLinkInternal = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _skipLinksContext = require("./skip-links-context");
|
|
9
|
+
/**
|
|
10
|
+
* Internal-only hook for registering skip links.
|
|
11
|
+
*
|
|
12
|
+
* `useSkipLink` is the public API wrapper of this.
|
|
13
|
+
*
|
|
14
|
+
* This private version exists for us to support `onBeforeNavigate` for the side nav use case,
|
|
15
|
+
* where we might need to expand it before moving focus, without having to support `onBeforeNavigate` publicly.
|
|
16
|
+
*/
|
|
17
|
+
var useSkipLinkInternal = exports.useSkipLinkInternal = function useSkipLinkInternal(_ref) {
|
|
18
|
+
var id = _ref.id,
|
|
19
|
+
label = _ref.label,
|
|
20
|
+
listIndex = _ref.listIndex,
|
|
21
|
+
onBeforeNavigate = _ref.onBeforeNavigate,
|
|
22
|
+
isHidden = _ref.isHidden;
|
|
23
|
+
var _useContext = (0, _react.useContext)(_skipLinksContext.SkipLinksContext),
|
|
24
|
+
registerSkipLink = _useContext.registerSkipLink,
|
|
25
|
+
unregisterSkipLink = _useContext.unregisterSkipLink;
|
|
26
|
+
(0, _react.useEffect)(function () {
|
|
27
|
+
if (isHidden) {
|
|
28
|
+
/**
|
|
29
|
+
* Skip links are hidden for slots with 0 height or width.
|
|
30
|
+
* They should not be registered.
|
|
31
|
+
*/
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
registerSkipLink({
|
|
35
|
+
id: id,
|
|
36
|
+
label: label,
|
|
37
|
+
listIndex: listIndex,
|
|
38
|
+
onBeforeNavigate: onBeforeNavigate,
|
|
39
|
+
isHidden: isHidden
|
|
40
|
+
});
|
|
41
|
+
return function () {
|
|
42
|
+
unregisterSkipLink(id);
|
|
43
|
+
};
|
|
44
|
+
}, [id, isHidden, label, listIndex, onBeforeNavigate, registerSkipLink, unregisterSkipLink]);
|
|
45
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useSkipLink = void 0;
|
|
7
|
+
var _useSkipLinkInternal = require("./use-skip-link-internal");
|
|
8
|
+
/**
|
|
9
|
+
* Call `useSkipLink` to register a skip link for important elements on the page.
|
|
10
|
+
*/
|
|
11
|
+
var useSkipLink = exports.useSkipLink = function useSkipLink(id, label, listIndex) {
|
|
12
|
+
(0, _useSkipLinkInternal.useSkipLinkInternal)({
|
|
13
|
+
id: id,
|
|
14
|
+
label: label,
|
|
15
|
+
listIndex: listIndex
|
|
16
|
+
});
|
|
17
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.TopNavStartAttachRef = void 0;
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
10
|
+
var TopNavStartAttachRef = exports.TopNavStartAttachRef = /*#__PURE__*/(0, _react.createContext)(_noop.default);
|
|
@@ -8,7 +8,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.TopNavStartProvider = void 0;
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var
|
|
11
|
+
var _topNavStartAttachRef = require("./top-nav-start-attach-ref");
|
|
12
|
+
var _topNavStartElement = require("./top-nav-start-element");
|
|
12
13
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
13
14
|
/**
|
|
14
15
|
* Provider for the TopNavStart container element contexts.
|
|
@@ -29,9 +30,9 @@ var TopNavStartProvider = exports.TopNavStartProvider = function TopNavStartProv
|
|
|
29
30
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
30
31
|
element = _useState2[0],
|
|
31
32
|
setElement = _useState2[1];
|
|
32
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
33
|
+
return /*#__PURE__*/_react.default.createElement(_topNavStartElement.TopNavStartElement.Provider, {
|
|
33
34
|
value: element
|
|
34
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
35
|
+
}, /*#__PURE__*/_react.default.createElement(_topNavStartAttachRef.TopNavStartAttachRef.Provider, {
|
|
35
36
|
value: setElement
|
|
36
37
|
}, children));
|
|
37
38
|
};
|
|
@@ -6,25 +6,28 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
Object.defineProperty(exports, "TopNavButton", {
|
|
7
7
|
enumerable: true,
|
|
8
8
|
get: function get() {
|
|
9
|
-
return
|
|
9
|
+
return _button.Button;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
Object.defineProperty(exports, "TopNavIconButton", {
|
|
13
13
|
enumerable: true,
|
|
14
14
|
get: function get() {
|
|
15
|
-
return
|
|
15
|
+
return _iconButton.IconButton;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
Object.defineProperty(exports, "TopNavLinkButton", {
|
|
19
19
|
enumerable: true,
|
|
20
20
|
get: function get() {
|
|
21
|
-
return
|
|
21
|
+
return _linkButton.LinkButton;
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
24
|
Object.defineProperty(exports, "TopNavLinkIconButton", {
|
|
25
25
|
enumerable: true,
|
|
26
26
|
get: function get() {
|
|
27
|
-
return
|
|
27
|
+
return _linkIconButton.LinkIconButton;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
-
var
|
|
30
|
+
var _button = require("../../ui/top-nav-items/themed/button");
|
|
31
|
+
var _linkButton = require("../../ui/top-nav-items/themed/link-button");
|
|
32
|
+
var _iconButton = require("../../ui/top-nav-items/themed/icon-button");
|
|
33
|
+
var _linkIconButton = require("../../ui/top-nav-items/themed/link-icon-button");
|
|
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
Object.defineProperty(exports, "useSkipLink", {
|
|
7
7
|
enumerable: true,
|
|
8
8
|
get: function get() {
|
|
9
|
-
return
|
|
9
|
+
return _useSkipLink.useSkipLink;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
Object.defineProperty(exports, "useSkipLinkId", {
|
|
13
13
|
enumerable: true,
|
|
14
14
|
get: function get() {
|
|
15
|
-
return
|
|
15
|
+
return _useSkipLinkId.useSkipLinkId;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
-
var
|
|
19
|
-
var
|
|
18
|
+
var _useSkipLinkId = require("../../ui/page-layout/use-skip-link-id");
|
|
19
|
+
var _useSkipLink = require("../../context/skip-links/use-skip-link");
|
|
@@ -15,12 +15,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
15
15
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
16
16
|
var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
|
|
17
17
|
var _responsive = require("@atlaskit/primitives/responsive");
|
|
18
|
-
var
|
|
18
|
+
var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
|
|
19
19
|
var _constants = require("./constants");
|
|
20
|
+
var _dangerouslyHoistCssVarToDocumentRoot = require("./dangerously-hoist-css-var-to-document-root");
|
|
20
21
|
var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
|
|
21
|
-
var _hoistUtils = require("./hoist-utils");
|
|
22
|
-
var _idUtils = require("./id-utils");
|
|
23
22
|
var _provider = require("./panel-splitter/provider");
|
|
23
|
+
var _useLayoutId = require("./use-layout-id");
|
|
24
24
|
var _useResizingWidthCssVarOnRootElement = require("./use-resizing-width-css-var-on-root-element");
|
|
25
25
|
var _useSafeDefaultWidth = require("./use-safe-default-width");
|
|
26
26
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
@@ -76,7 +76,7 @@ function Aside(_ref) {
|
|
|
76
76
|
testId = _ref.testId,
|
|
77
77
|
providedId = _ref.id;
|
|
78
78
|
var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
|
|
79
|
-
var id = (0,
|
|
79
|
+
var id = (0, _useLayoutId.useLayoutId)({
|
|
80
80
|
providedId: providedId
|
|
81
81
|
});
|
|
82
82
|
var defaultWidth = (0, _useSafeDefaultWidth.useSafeDefaultWidth)({
|
|
@@ -90,7 +90,7 @@ function Aside(_ref) {
|
|
|
90
90
|
*
|
|
91
91
|
* Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
|
|
92
92
|
*/
|
|
93
|
-
(0,
|
|
93
|
+
(0, _useSkipLinkInternal.useSkipLinkInternal)({
|
|
94
94
|
id: id,
|
|
95
95
|
label: skipLinkLabel,
|
|
96
96
|
isHidden: defaultWidth === 0
|
|
@@ -142,7 +142,7 @@ function Aside(_ref) {
|
|
|
142
142
|
// ------ START UNSAFE STYLES ------
|
|
143
143
|
// These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
|
|
144
144
|
// When they aren't needed anymore we can delete them wholesale.
|
|
145
|
-
React.createElement(
|
|
145
|
+
React.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
|
|
146
146
|
variableName: _constants.UNSAFE_asideLayoutVar,
|
|
147
147
|
value: "0px",
|
|
148
148
|
mediaQuery: _responsive.media.above.md,
|
|
@@ -10,12 +10,13 @@ require("./banner.compiled.css");
|
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
var React = _react;
|
|
12
12
|
var _runtime = require("@compiled/react/runtime");
|
|
13
|
-
var
|
|
13
|
+
var _useSkipLinkInternal = require("../../context/skip-links/use-skip-link-internal");
|
|
14
14
|
var _useIsFhsEnabled = require("../fhs-rollout/use-is-fhs-enabled");
|
|
15
15
|
var _constants = require("./constants");
|
|
16
|
+
var _dangerouslyHoistCssVarToDocumentRoot = require("./dangerously-hoist-css-var-to-document-root");
|
|
17
|
+
var _hoistCssVarToLocalGrid = require("./hoist-css-var-to-local-grid");
|
|
16
18
|
var _hoistSlotSizesContext = require("./hoist-slot-sizes-context");
|
|
17
|
-
var
|
|
18
|
-
var _idUtils = require("./id-utils");
|
|
19
|
+
var _useLayoutId = require("./use-layout-id");
|
|
19
20
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
20
21
|
var styles = {
|
|
21
22
|
root: "_nd5ldkfm _1reo15vq _18m915vq _4t3iutvi _152tidpf _kqsw1if8 _1pbyegat",
|
|
@@ -37,7 +38,7 @@ function Banner(_ref) {
|
|
|
37
38
|
testId = _ref.testId,
|
|
38
39
|
providedId = _ref.id;
|
|
39
40
|
var dangerouslyHoistSlotSizes = (0, _react.useContext)(_hoistSlotSizesContext.DangerouslyHoistSlotSizes);
|
|
40
|
-
var id = (0,
|
|
41
|
+
var id = (0, _useLayoutId.useLayoutId)({
|
|
41
42
|
providedId: providedId
|
|
42
43
|
});
|
|
43
44
|
var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
|
|
@@ -45,7 +46,7 @@ function Banner(_ref) {
|
|
|
45
46
|
/**
|
|
46
47
|
* Don't show the skip link if the slot has 0 height.
|
|
47
48
|
*/
|
|
48
|
-
(0,
|
|
49
|
+
(0, _useSkipLinkInternal.useSkipLinkInternal)({
|
|
49
50
|
id: id,
|
|
50
51
|
label: skipLinkLabel,
|
|
51
52
|
isHidden: height === 0
|
|
@@ -55,7 +56,7 @@ function Banner(_ref) {
|
|
|
55
56
|
"data-layout-slot": true,
|
|
56
57
|
className: (0, _runtime.ax)([styles.root, isFhsEnabled && styles.fullHeightSidebar, xcss]),
|
|
57
58
|
"data-testid": testId
|
|
58
|
-
}, /*#__PURE__*/React.createElement(
|
|
59
|
+
}, /*#__PURE__*/React.createElement(_hoistCssVarToLocalGrid.HoistCssVarToLocalGrid, {
|
|
59
60
|
variableName: _constants.bannerMountedVar,
|
|
60
61
|
value: height
|
|
61
62
|
}), dangerouslyHoistSlotSizes &&
|
|
@@ -63,7 +64,7 @@ function Banner(_ref) {
|
|
|
63
64
|
// ------ START UNSAFE STYLES ------
|
|
64
65
|
// These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
|
|
65
66
|
// When they aren't needed anymore we can delete them wholesale.
|
|
66
|
-
React.createElement(
|
|
67
|
+
React.createElement(_dangerouslyHoistCssVarToDocumentRoot.DangerouslyHoistCssVarToDocumentRoot, {
|
|
67
68
|
variableName: _constants.UNSAFE_bannerVar,
|
|
68
69
|
value: height
|
|
69
70
|
})
|
package/dist/cjs/ui/page-layout/{hoist-utils.js → dangerously-hoist-css-var-to-document-root.js}
RENAMED
|
@@ -4,35 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.
|
|
7
|
+
exports.DangerouslyHoistCssVarToDocumentRoot = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _root = require("./root");
|
|
10
|
-
/**
|
|
11
|
-
* This is not ideal and shouldn't be used by anything outside of `<Banner>` and `<TopNav>`.
|
|
12
|
-
*
|
|
13
|
-
* This makes the other page layout elements aware that the banner and top bar have been mounted, provides them
|
|
14
|
-
* with their heights. This is needed to power the stick points of page layout elements like SideNav and Panel.
|
|
15
|
-
*
|
|
16
|
-
* We should clean this up once we have a better solution, such as moving the size props for banner and top bar into `Root`.
|
|
17
|
-
*/
|
|
18
|
-
var HoistCssVarToLocalGrid = exports.HoistCssVarToLocalGrid = function HoistCssVarToLocalGrid(_ref) {
|
|
19
|
-
var variableName = _ref.variableName,
|
|
20
|
-
value = _ref.value;
|
|
21
|
-
return /*#__PURE__*/_react.default.createElement("style", null, "#".concat(_root.gridRootId, " { ").concat(variableName, ": ").concat(value, "px }"));
|
|
22
|
-
};
|
|
23
9
|
var getCssStringValue = function getCssStringValue(value) {
|
|
24
10
|
return typeof value === 'number' ? "".concat(value, "px") : value;
|
|
25
11
|
};
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
var DangerouslyHoistCssVarToDocumentRoot = exports.DangerouslyHoistCssVarToDocumentRoot = function DangerouslyHoistCssVarToDocumentRoot(_ref2) {
|
|
32
|
-
var variableName = _ref2.variableName,
|
|
33
|
-
value = _ref2.value,
|
|
34
|
-
mediaQuery = _ref2.mediaQuery,
|
|
35
|
-
responsiveValue = _ref2.responsiveValue;
|
|
12
|
+
var DangerouslyHoistCssVarToDocumentRoot = exports.DangerouslyHoistCssVarToDocumentRoot = function DangerouslyHoistCssVarToDocumentRoot(_ref) {
|
|
13
|
+
var variableName = _ref.variableName,
|
|
14
|
+
value = _ref.value,
|
|
15
|
+
mediaQuery = _ref.mediaQuery,
|
|
16
|
+
responsiveValue = _ref.responsiveValue;
|
|
36
17
|
/**
|
|
37
18
|
* Note don't put multiple variables in multiple lines. eg
|
|
38
19
|
* <style>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.HoistCssVarToLocalGrid = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _root = require("./root");
|
|
10
|
+
/**
|
|
11
|
+
* This is not ideal and shouldn't be used by anything outside of `<Banner>` and `<TopNav>`.
|
|
12
|
+
*
|
|
13
|
+
* This makes the other page layout elements aware that the banner and top bar have been mounted, provides them
|
|
14
|
+
* with their heights. This is needed to power the stick points of page layout elements like SideNav and Panel.
|
|
15
|
+
*
|
|
16
|
+
* We should clean this up once we have a better solution, such as moving the size props for banner and top bar into `Root`.
|
|
17
|
+
*/
|
|
18
|
+
var HoistCssVarToLocalGrid = exports.HoistCssVarToLocalGrid = function HoistCssVarToLocalGrid(_ref) {
|
|
19
|
+
var variableName = _ref.variableName,
|
|
20
|
+
value = _ref.value;
|
|
21
|
+
return /*#__PURE__*/_react.default.createElement("style", null, "#".concat(_root.gridRootId, " { ").concat(variableName, ": ").concat(value, "px }"));
|
|
22
|
+
};
|
|
@@ -10,9 +10,9 @@ require("./main.compiled.css");
|
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
var React = _react;
|
|
12
12
|
var _runtime = require("@compiled/react/runtime");
|
|
13
|
-
var
|
|
13
|
+
var _useSkipLink = require("../../../context/skip-links/use-skip-link");
|
|
14
14
|
var _constants = require("../constants");
|
|
15
|
-
var
|
|
15
|
+
var _useLayoutId = require("../use-layout-id");
|
|
16
16
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
17
17
|
var mainElementStyles = {
|
|
18
18
|
root: "_nd5l1gzg _1reo1wug _18m91wug _19121cl4 _152timx3 _qwfh1wug _165teqxy _13wn1if8"
|
|
@@ -28,10 +28,10 @@ function Main(_ref) {
|
|
|
28
28
|
skipLinkLabel = _ref$skipLinkLabel === void 0 ? 'Main Content' : _ref$skipLinkLabel,
|
|
29
29
|
testId = _ref.testId,
|
|
30
30
|
providedId = _ref.id;
|
|
31
|
-
var id = (0,
|
|
31
|
+
var id = (0, _useLayoutId.useLayoutId)({
|
|
32
32
|
providedId: providedId
|
|
33
33
|
});
|
|
34
|
-
(0,
|
|
34
|
+
(0, _useSkipLink.useSkipLink)(id, skipLinkLabel);
|
|
35
35
|
return /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
36
36
|
id: id,
|
|
37
37
|
"data-layout-slot": true,
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getPixelWidth = void 0;
|
|
7
|
+
/**
|
|
8
|
+
* Returns the computed width of an element in pixels.
|
|
9
|
+
*/
|
|
10
|
+
var getPixelWidth = exports.getPixelWidth = function getPixelWidth(element) {
|
|
11
|
+
// Always returns an integer. Returns 0 if element is hidden / removed.
|
|
12
|
+
return element.offsetWidth;
|
|
13
|
+
};
|
package/dist/cjs/ui/page-layout/panel-splitter/{get-width.js → get-width-from-drag-location.js}
RENAMED
|
@@ -3,11 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.getWidthFromDragLocation =
|
|
7
|
-
/**
|
|
8
|
-
* ⚠️ Note: We are using the initial client location captured from the mousedown event, not from the dragstart event.
|
|
9
|
-
* Some browser extensions can cause the client locations (e.g. clientX) in the `dragstart` event to incorrectly return 0.
|
|
10
|
-
*/
|
|
6
|
+
exports.getWidthFromDragLocation = void 0;
|
|
11
7
|
var getWidthFromDragLocation = exports.getWidthFromDragLocation = function getWidthFromDragLocation(_ref) {
|
|
12
8
|
var initialWidth = _ref.initialWidth,
|
|
13
9
|
location = _ref.location,
|
|
@@ -25,11 +21,4 @@ var getWidthFromDragLocation = exports.getWidthFromDragLocation = function getWi
|
|
|
25
21
|
// Resize line is positioned at the inline-start (left) of the element.
|
|
26
22
|
// If the direction is left-to-right, the width will decrease when the mouse is moved to the right, and vice versa.
|
|
27
23
|
return direction === 'ltr' ? initialWidth - diffX : initialWidth + diffX;
|
|
28
|
-
};
|
|
29
|
-
/**
|
|
30
|
-
* Returns the computed width of an element in pixels.
|
|
31
|
-
*/
|
|
32
|
-
var getPixelWidth = exports.getPixelWidth = function getPixelWidth(element) {
|
|
33
|
-
// Always returns an integer. Returns 0 if element is hidden / removed.
|
|
34
|
-
return element.offsetWidth;
|
|
35
24
|
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.isPanelSplitterDragData = isPanelSplitterDragData;
|
|
7
|
+
var _panelSplitterDragSymbol = require("./panel-splitter-drag-symbol");
|
|
8
|
+
function isPanelSplitterDragData(data) {
|
|
9
|
+
return data[_panelSplitterDragSymbol.panelSplitterDragDataSymbol] === true;
|
|
10
|
+
}
|
|
@@ -3,16 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.OnDoubleClickContext = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
|
-
// Disabling the rule to allow for `Type` suffix, to differentiate from the Context object.
|
|
9
|
-
// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Context for the panel splitter. Only internally exported.
|
|
13
|
-
*/
|
|
14
|
-
var PanelSplitterContext = exports.PanelSplitterContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
15
|
-
|
|
16
8
|
/**
|
|
17
9
|
* Context for the panel splitter's double click handler. Only internally exported.
|
|
18
10
|
*
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.PanelSplitterContext = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
// Disabling the rule to allow for `Type` suffix, to differentiate from the Context object.
|
|
9
|
+
// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Context for the panel splitter. Only internally exported.
|
|
13
|
+
*/
|
|
14
|
+
var PanelSplitterContext = exports.PanelSplitterContext = /*#__PURE__*/(0, _react.createContext)(null);
|