@atlaskit/side-nav-items 1.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 +1 -0
- package/LICENSE.md +11 -0
- package/README.md +5 -0
- package/button-menu-item/package.json +17 -0
- package/container-avatar/package.json +17 -0
- package/dist/cjs/entry-points/button-menu-item.js +19 -0
- package/dist/cjs/entry-points/container-avatar.js +12 -0
- package/dist/cjs/entry-points/drag-and-drop/drag-handle.js +12 -0
- package/dist/cjs/entry-points/drag-and-drop/drag-preview.js +12 -0
- package/dist/cjs/entry-points/drag-and-drop/drop-indicator.js +12 -0
- package/dist/cjs/entry-points/drag-and-drop/group-drop-indicator.js +12 -0
- package/dist/cjs/entry-points/drag-and-drop/hitbox.js +18 -0
- package/dist/cjs/entry-points/drag-and-drop/use-menu-item-drag-and-drop.js +12 -0
- package/dist/cjs/entry-points/expandable-menu-item.js +33 -0
- package/dist/cjs/entry-points/flyout-menu-item.js +54 -0
- package/dist/cjs/entry-points/link-menu-item.js +19 -0
- package/dist/cjs/entry-points/menu-list-item.js +12 -0
- package/dist/cjs/entry-points/menu-list.js +12 -0
- package/dist/cjs/entry-points/menu-section.js +26 -0
- package/dist/cjs/entry-points/top-level-spacer.js +12 -0
- package/dist/cjs/index.js +5 -0
- package/dist/cjs/ui/menu-item/button-menu-item.js +66 -0
- package/dist/cjs/ui/menu-item/constants.js +21 -0
- package/dist/cjs/ui/menu-item/container-avatar.compiled.css +4 -0
- package/dist/cjs/ui/menu-item/container-avatar.js +34 -0
- package/dist/cjs/ui/menu-item/drag-and-drop/drag-preview.compiled.css +9 -0
- package/dist/cjs/ui/menu-item/drag-and-drop/drag-preview.js +65 -0
- package/dist/cjs/ui/menu-item/drag-and-drop/drop-indicator.js +12 -0
- package/dist/cjs/ui/menu-item/drag-and-drop/group-drop-indicator.js +12 -0
- package/dist/cjs/ui/menu-item/drag-and-drop/hitbox.js +18 -0
- package/dist/cjs/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.js +202 -0
- package/dist/cjs/ui/menu-item/drag-handle/drag-handle.compiled.css +9 -0
- package/dist/cjs/ui/menu-item/drag-handle/drag-handle.js +28 -0
- package/dist/cjs/ui/menu-item/drag-handle/lazy-drag-handle.js +20 -0
- package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-content.compiled.css +2 -0
- package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-content.js +50 -0
- package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-context.js +64 -0
- package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-level-context.js +14 -0
- package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css +14 -0
- package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js +150 -0
- package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item.compiled.css +1 -0
- package/dist/cjs/ui/menu-item/expandable-menu-item/expandable-menu-item.js +69 -0
- package/dist/cjs/ui/menu-item/flyout-menu-item/close-button.js +33 -0
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-body.compiled.css +11 -0
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-body.js +38 -0
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-footer.compiled.css +5 -0
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-footer.js +29 -0
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-header.compiled.css +11 -0
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-header.js +54 -0
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-content.compiled.css +8 -0
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js +223 -0
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-context.js +58 -0
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.compiled.css +2 -0
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.js +68 -0
- package/dist/cjs/ui/menu-item/flyout-menu-item/flyout-menu-item.js +76 -0
- package/dist/cjs/ui/menu-item/link-menu-item.compiled.css +1 -0
- package/dist/cjs/ui/menu-item/link-menu-item.js +81 -0
- package/dist/cjs/ui/menu-item/list-item.js +30 -0
- package/dist/cjs/ui/menu-item/list.js +40 -0
- package/dist/cjs/ui/menu-item/menu-item-signals.js +11 -0
- package/dist/cjs/ui/menu-item/menu-item.compiled.css +101 -0
- package/dist/cjs/ui/menu-item/menu-item.js +394 -0
- package/dist/cjs/ui/menu-item/menu-list-item.js +18 -0
- package/dist/cjs/ui/menu-item/menu-list.js +14 -0
- package/dist/cjs/ui/menu-item/top-level-spacer.compiled.css +1 -0
- package/dist/cjs/ui/menu-item/top-level-spacer.js +46 -0
- package/dist/cjs/ui/menu-item/types.js +5 -0
- package/dist/cjs/ui/menu-item/use-scroll-menu-item-into-view.js +70 -0
- package/dist/cjs/ui/menu-section/divider.compiled.css +4 -0
- package/dist/cjs/ui/menu-section/divider.js +32 -0
- package/dist/cjs/ui/menu-section/menu-section-context.js +19 -0
- package/dist/cjs/ui/menu-section/menu-section-heading.compiled.css +4 -0
- package/dist/cjs/ui/menu-section/menu-section-heading.js +30 -0
- package/dist/cjs/ui/menu-section/menu-section.js +49 -0
- package/dist/es2019/entry-points/button-menu-item.js +2 -0
- package/dist/es2019/entry-points/container-avatar.js +1 -0
- package/dist/es2019/entry-points/drag-and-drop/drag-handle.js +1 -0
- package/dist/es2019/entry-points/drag-and-drop/drag-preview.js +1 -0
- package/dist/es2019/entry-points/drag-and-drop/drop-indicator.js +1 -0
- package/dist/es2019/entry-points/drag-and-drop/group-drop-indicator.js +1 -0
- package/dist/es2019/entry-points/drag-and-drop/hitbox.js +1 -0
- package/dist/es2019/entry-points/drag-and-drop/use-menu-item-drag-and-drop.js +1 -0
- package/dist/es2019/entry-points/expandable-menu-item.js +4 -0
- package/dist/es2019/entry-points/flyout-menu-item.js +7 -0
- package/dist/es2019/entry-points/link-menu-item.js +2 -0
- package/dist/es2019/entry-points/menu-list-item.js +1 -0
- package/dist/es2019/entry-points/menu-list.js +1 -0
- package/dist/es2019/entry-points/menu-section.js +3 -0
- package/dist/es2019/entry-points/top-level-spacer.js +1 -0
- package/dist/es2019/index.js +3 -0
- package/dist/es2019/ui/menu-item/button-menu-item.js +59 -0
- package/dist/es2019/ui/menu-item/constants.js +15 -0
- package/dist/es2019/ui/menu-item/container-avatar.compiled.css +4 -0
- package/dist/es2019/ui/menu-item/container-avatar.js +25 -0
- package/dist/es2019/ui/menu-item/drag-and-drop/drag-preview.compiled.css +9 -0
- package/dist/es2019/ui/menu-item/drag-and-drop/drag-preview.js +60 -0
- package/dist/es2019/ui/menu-item/drag-and-drop/drop-indicator.js +7 -0
- package/dist/es2019/ui/menu-item/drag-and-drop/group-drop-indicator.js +7 -0
- package/dist/es2019/ui/menu-item/drag-and-drop/hitbox.js +7 -0
- package/dist/es2019/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.js +192 -0
- package/dist/es2019/ui/menu-item/drag-handle/drag-handle.compiled.css +9 -0
- package/dist/es2019/ui/menu-item/drag-handle/drag-handle.js +19 -0
- package/dist/es2019/ui/menu-item/drag-handle/lazy-drag-handle.js +9 -0
- package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-content.compiled.css +2 -0
- package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-content.js +43 -0
- package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-context.js +53 -0
- package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-level-context.js +9 -0
- package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css +14 -0
- package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js +141 -0
- package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item.compiled.css +1 -0
- package/dist/es2019/ui/menu-item/expandable-menu-item/expandable-menu-item.js +54 -0
- package/dist/es2019/ui/menu-item/flyout-menu-item/close-button.js +25 -0
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-body.compiled.css +11 -0
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-body.js +33 -0
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-footer.compiled.css +5 -0
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-footer.js +24 -0
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-header.compiled.css +11 -0
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-header.js +47 -0
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-content.compiled.css +8 -0
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js +211 -0
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-context.js +45 -0
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.compiled.css +2 -0
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.js +57 -0
- package/dist/es2019/ui/menu-item/flyout-menu-item/flyout-menu-item.js +61 -0
- package/dist/es2019/ui/menu-item/link-menu-item.compiled.css +1 -0
- package/dist/es2019/ui/menu-item/link-menu-item.js +73 -0
- package/dist/es2019/ui/menu-item/list-item.js +23 -0
- package/dist/es2019/ui/menu-item/list.js +33 -0
- package/dist/es2019/ui/menu-item/menu-item-signals.js +5 -0
- package/dist/es2019/ui/menu-item/menu-item.compiled.css +101 -0
- package/dist/es2019/ui/menu-item/menu-item.js +383 -0
- package/dist/es2019/ui/menu-item/menu-list-item.js +12 -0
- package/dist/es2019/ui/menu-item/menu-list.js +9 -0
- package/dist/es2019/ui/menu-item/top-level-spacer.compiled.css +1 -0
- package/dist/es2019/ui/menu-item/top-level-spacer.js +38 -0
- package/dist/es2019/ui/menu-item/types.js +1 -0
- package/dist/es2019/ui/menu-item/use-scroll-menu-item-into-view.js +64 -0
- package/dist/es2019/ui/menu-section/divider.compiled.css +4 -0
- package/dist/es2019/ui/menu-section/divider.js +22 -0
- package/dist/es2019/ui/menu-section/menu-section-context.js +13 -0
- package/dist/es2019/ui/menu-section/menu-section-heading.compiled.css +4 -0
- package/dist/es2019/ui/menu-section/menu-section-heading.js +23 -0
- package/dist/es2019/ui/menu-section/menu-section.js +42 -0
- package/dist/esm/entry-points/button-menu-item.js +2 -0
- package/dist/esm/entry-points/container-avatar.js +1 -0
- package/dist/esm/entry-points/drag-and-drop/drag-handle.js +1 -0
- package/dist/esm/entry-points/drag-and-drop/drag-preview.js +1 -0
- package/dist/esm/entry-points/drag-and-drop/drop-indicator.js +1 -0
- package/dist/esm/entry-points/drag-and-drop/group-drop-indicator.js +1 -0
- package/dist/esm/entry-points/drag-and-drop/hitbox.js +1 -0
- package/dist/esm/entry-points/drag-and-drop/use-menu-item-drag-and-drop.js +1 -0
- package/dist/esm/entry-points/expandable-menu-item.js +4 -0
- package/dist/esm/entry-points/flyout-menu-item.js +7 -0
- package/dist/esm/entry-points/link-menu-item.js +2 -0
- package/dist/esm/entry-points/menu-list-item.js +1 -0
- package/dist/esm/entry-points/menu-list.js +1 -0
- package/dist/esm/entry-points/menu-section.js +3 -0
- package/dist/esm/entry-points/top-level-spacer.js +1 -0
- package/dist/esm/index.js +3 -0
- package/dist/esm/ui/menu-item/button-menu-item.js +58 -0
- package/dist/esm/ui/menu-item/constants.js +15 -0
- package/dist/esm/ui/menu-item/container-avatar.compiled.css +4 -0
- package/dist/esm/ui/menu-item/container-avatar.js +26 -0
- package/dist/esm/ui/menu-item/drag-and-drop/drag-preview.compiled.css +9 -0
- package/dist/esm/ui/menu-item/drag-and-drop/drag-preview.js +58 -0
- package/dist/esm/ui/menu-item/drag-and-drop/drop-indicator.js +7 -0
- package/dist/esm/ui/menu-item/drag-and-drop/group-drop-indicator.js +7 -0
- package/dist/esm/ui/menu-item/drag-and-drop/hitbox.js +7 -0
- package/dist/esm/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.js +193 -0
- package/dist/esm/ui/menu-item/drag-handle/drag-handle.compiled.css +9 -0
- package/dist/esm/ui/menu-item/drag-handle/drag-handle.js +19 -0
- package/dist/esm/ui/menu-item/drag-handle/lazy-drag-handle.js +11 -0
- package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-content.compiled.css +2 -0
- package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-content.js +42 -0
- package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-context.js +57 -0
- package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-level-context.js +9 -0
- package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.compiled.css +14 -0
- package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.js +141 -0
- package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item.compiled.css +1 -0
- package/dist/esm/ui/menu-item/expandable-menu-item/expandable-menu-item.js +60 -0
- package/dist/esm/ui/menu-item/flyout-menu-item/close-button.js +26 -0
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-body.compiled.css +11 -0
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-body.js +31 -0
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-footer.compiled.css +5 -0
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-footer.js +22 -0
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-header.compiled.css +11 -0
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-header.js +45 -0
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-content.compiled.css +8 -0
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-content.js +214 -0
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-context.js +51 -0
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.compiled.css +2 -0
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.js +59 -0
- package/dist/esm/ui/menu-item/flyout-menu-item/flyout-menu-item.js +67 -0
- package/dist/esm/ui/menu-item/link-menu-item.compiled.css +1 -0
- package/dist/esm/ui/menu-item/link-menu-item.js +72 -0
- package/dist/esm/ui/menu-item/list-item.js +22 -0
- package/dist/esm/ui/menu-item/list.js +32 -0
- package/dist/esm/ui/menu-item/menu-item-signals.js +5 -0
- package/dist/esm/ui/menu-item/menu-item.compiled.css +101 -0
- package/dist/esm/ui/menu-item/menu-item.js +385 -0
- package/dist/esm/ui/menu-item/menu-list-item.js +12 -0
- package/dist/esm/ui/menu-item/menu-list.js +9 -0
- package/dist/esm/ui/menu-item/top-level-spacer.compiled.css +1 -0
- package/dist/esm/ui/menu-item/top-level-spacer.js +38 -0
- package/dist/esm/ui/menu-item/types.js +1 -0
- package/dist/esm/ui/menu-item/use-scroll-menu-item-into-view.js +63 -0
- package/dist/esm/ui/menu-section/divider.compiled.css +4 -0
- package/dist/esm/ui/menu-section/divider.js +24 -0
- package/dist/esm/ui/menu-section/menu-section-context.js +13 -0
- package/dist/esm/ui/menu-section/menu-section-heading.compiled.css +4 -0
- package/dist/esm/ui/menu-section/menu-section-heading.js +22 -0
- package/dist/esm/ui/menu-section/menu-section.js +42 -0
- package/dist/types/entry-points/button-menu-item.d.ts +3 -0
- package/dist/types/entry-points/container-avatar.d.ts +1 -0
- package/dist/types/entry-points/drag-and-drop/drag-handle.d.ts +1 -0
- package/dist/types/entry-points/drag-and-drop/drag-preview.d.ts +1 -0
- package/dist/types/entry-points/drag-and-drop/drop-indicator.d.ts +1 -0
- package/dist/types/entry-points/drag-and-drop/group-drop-indicator.d.ts +1 -0
- package/dist/types/entry-points/drag-and-drop/hitbox.d.ts +1 -0
- package/dist/types/entry-points/drag-and-drop/use-menu-item-drag-and-drop.d.ts +1 -0
- package/dist/types/entry-points/expandable-menu-item.d.ts +4 -0
- package/dist/types/entry-points/flyout-menu-item.d.ts +7 -0
- package/dist/types/entry-points/link-menu-item.d.ts +3 -0
- package/dist/types/entry-points/menu-list-item.d.ts +1 -0
- package/dist/types/entry-points/menu-list.d.ts +1 -0
- package/dist/types/entry-points/menu-section.d.ts +3 -0
- package/dist/types/entry-points/top-level-spacer.d.ts +1 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/ui/menu-item/button-menu-item.d.ts +42 -0
- package/dist/types/ui/menu-item/constants.d.ts +15 -0
- package/dist/types/ui/menu-item/container-avatar.d.ts +18 -0
- package/dist/types/ui/menu-item/drag-and-drop/drag-preview.d.ts +24 -0
- package/dist/types/ui/menu-item/drag-and-drop/drop-indicator.d.ts +6 -0
- package/dist/types/ui/menu-item/drag-and-drop/group-drop-indicator.d.ts +6 -0
- package/dist/types/ui/menu-item/drag-and-drop/hitbox.d.ts +6 -0
- package/dist/types/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.d.ts +62 -0
- package/dist/types/ui/menu-item/drag-handle/drag-handle.d.ts +6 -0
- package/dist/types/ui/menu-item/drag-handle/lazy-drag-handle.d.ts +4 -0
- package/dist/types/ui/menu-item/expandable-menu-item/expandable-menu-item-content.d.ts +17 -0
- package/dist/types/ui/menu-item/expandable-menu-item/expandable-menu-item-context.d.ts +36 -0
- package/dist/types/ui/menu-item/expandable-menu-item/expandable-menu-item-level-context.d.ts +4 -0
- package/dist/types/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.d.ts +65 -0
- package/dist/types/ui/menu-item/expandable-menu-item/expandable-menu-item.d.ts +65 -0
- package/dist/types/ui/menu-item/flyout-menu-item/close-button.d.ts +34 -0
- package/dist/types/ui/menu-item/flyout-menu-item/flyout-body.d.ts +38 -0
- package/dist/types/ui/menu-item/flyout-menu-item/flyout-footer.d.ts +25 -0
- package/dist/types/ui/menu-item/flyout-menu-item/flyout-header.d.ts +35 -0
- package/dist/types/ui/menu-item/flyout-menu-item/flyout-menu-item-content.d.ts +39 -0
- package/dist/types/ui/menu-item/flyout-menu-item/flyout-menu-item-context.d.ts +38 -0
- package/dist/types/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.d.ts +46 -0
- package/dist/types/ui/menu-item/flyout-menu-item/flyout-menu-item.d.ts +52 -0
- package/dist/types/ui/menu-item/link-menu-item.d.ts +22 -0
- package/dist/types/ui/menu-item/list-item.d.ts +27 -0
- package/dist/types/ui/menu-item/list.d.ts +28 -0
- package/dist/types/ui/menu-item/menu-item-signals.d.ts +6 -0
- package/dist/types/ui/menu-item/menu-item.d.ts +51 -0
- package/dist/types/ui/menu-item/menu-list-item.d.ts +11 -0
- package/dist/types/ui/menu-item/menu-list.d.ts +8 -0
- package/dist/types/ui/menu-item/top-level-spacer.d.ts +20 -0
- package/dist/types/ui/menu-item/types.d.ts +164 -0
- package/dist/types/ui/menu-item/use-scroll-menu-item-into-view.d.ts +12 -0
- package/dist/types/ui/menu-section/divider.d.ts +6 -0
- package/dist/types/ui/menu-section/menu-section-context.d.ts +6 -0
- package/dist/types/ui/menu-section/menu-section-heading.d.ts +16 -0
- package/dist/types/ui/menu-section/menu-section.d.ts +41 -0
- package/dist/types-ts4.5/entry-points/button-menu-item.d.ts +3 -0
- package/dist/types-ts4.5/entry-points/container-avatar.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/drag-and-drop/drag-handle.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/drag-and-drop/drag-preview.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/drag-and-drop/drop-indicator.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/drag-and-drop/group-drop-indicator.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/drag-and-drop/hitbox.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/drag-and-drop/use-menu-item-drag-and-drop.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/expandable-menu-item.d.ts +4 -0
- package/dist/types-ts4.5/entry-points/flyout-menu-item.d.ts +7 -0
- package/dist/types-ts4.5/entry-points/link-menu-item.d.ts +3 -0
- package/dist/types-ts4.5/entry-points/menu-list-item.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/menu-list.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/menu-section.d.ts +3 -0
- package/dist/types-ts4.5/entry-points/top-level-spacer.d.ts +1 -0
- package/dist/types-ts4.5/index.d.ts +1 -0
- package/dist/types-ts4.5/ui/menu-item/button-menu-item.d.ts +42 -0
- package/dist/types-ts4.5/ui/menu-item/constants.d.ts +15 -0
- package/dist/types-ts4.5/ui/menu-item/container-avatar.d.ts +18 -0
- package/dist/types-ts4.5/ui/menu-item/drag-and-drop/drag-preview.d.ts +24 -0
- package/dist/types-ts4.5/ui/menu-item/drag-and-drop/drop-indicator.d.ts +6 -0
- package/dist/types-ts4.5/ui/menu-item/drag-and-drop/group-drop-indicator.d.ts +6 -0
- package/dist/types-ts4.5/ui/menu-item/drag-and-drop/hitbox.d.ts +6 -0
- package/dist/types-ts4.5/ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop.d.ts +62 -0
- package/dist/types-ts4.5/ui/menu-item/drag-handle/drag-handle.d.ts +6 -0
- package/dist/types-ts4.5/ui/menu-item/drag-handle/lazy-drag-handle.d.ts +4 -0
- package/dist/types-ts4.5/ui/menu-item/expandable-menu-item/expandable-menu-item-content.d.ts +17 -0
- package/dist/types-ts4.5/ui/menu-item/expandable-menu-item/expandable-menu-item-context.d.ts +36 -0
- package/dist/types-ts4.5/ui/menu-item/expandable-menu-item/expandable-menu-item-level-context.d.ts +4 -0
- package/dist/types-ts4.5/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.d.ts +65 -0
- package/dist/types-ts4.5/ui/menu-item/expandable-menu-item/expandable-menu-item.d.ts +65 -0
- package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/close-button.d.ts +34 -0
- package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-body.d.ts +38 -0
- package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-footer.d.ts +25 -0
- package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-header.d.ts +35 -0
- package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-menu-item-content.d.ts +39 -0
- package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-menu-item-context.d.ts +38 -0
- package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.d.ts +46 -0
- package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-menu-item.d.ts +52 -0
- package/dist/types-ts4.5/ui/menu-item/link-menu-item.d.ts +22 -0
- package/dist/types-ts4.5/ui/menu-item/list-item.d.ts +27 -0
- package/dist/types-ts4.5/ui/menu-item/list.d.ts +28 -0
- package/dist/types-ts4.5/ui/menu-item/menu-item-signals.d.ts +6 -0
- package/dist/types-ts4.5/ui/menu-item/menu-item.d.ts +51 -0
- package/dist/types-ts4.5/ui/menu-item/menu-list-item.d.ts +11 -0
- package/dist/types-ts4.5/ui/menu-item/menu-list.d.ts +8 -0
- package/dist/types-ts4.5/ui/menu-item/top-level-spacer.d.ts +20 -0
- package/dist/types-ts4.5/ui/menu-item/types.d.ts +164 -0
- package/dist/types-ts4.5/ui/menu-item/use-scroll-menu-item-into-view.d.ts +12 -0
- package/dist/types-ts4.5/ui/menu-section/divider.d.ts +6 -0
- package/dist/types-ts4.5/ui/menu-section/menu-section-context.d.ts +6 -0
- package/dist/types-ts4.5/ui/menu-section/menu-section-heading.d.ts +16 -0
- package/dist/types-ts4.5/ui/menu-section/menu-section.d.ts +41 -0
- package/drag-and-drop/drag-handle/package.json +17 -0
- package/drag-and-drop/drag-preview/package.json +17 -0
- package/drag-and-drop/drop-indicator/package.json +17 -0
- package/drag-and-drop/group-drop-indicator/package.json +17 -0
- package/drag-and-drop/hitbox/package.json +17 -0
- package/drag-and-drop/use-menu-item-drag-and-drop/package.json +17 -0
- package/expandable-menu-item/package.json +17 -0
- package/flyout-menu-item/package.json +17 -0
- package/link-menu-item/package.json +17 -0
- package/menu-list/package.json +17 -0
- package/menu-list-item/package.json +17 -0
- package/menu-section/package.json +17 -0
- package/package.json +121 -0
- package/top-level-spacer/package.json +17 -0
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type ReactNode } from 'react';
|
|
6
|
+
import { type COLLAPSE_ELEM_BEFORE_TYPE } from '../menu-item-signals';
|
|
7
|
+
import type { MenuItemCommonProps, MenuItemOnClick } from '../types';
|
|
8
|
+
export type FlyoutMenuItemTriggerProps = MenuItemCommonProps & {
|
|
9
|
+
/**
|
|
10
|
+
* `ReactNode` to be placed visually before the `children`.
|
|
11
|
+
*
|
|
12
|
+
* This `ReactNode` will be rendered visually on top of the main
|
|
13
|
+
* interactive element for the menu item. If this element does not
|
|
14
|
+
* contain an interactive element (`button` or `a`) then `pointer-events`
|
|
15
|
+
* will be set to `none` on this slot so that users can click through
|
|
16
|
+
* this element onto the main interactive element of the menu item.
|
|
17
|
+
*
|
|
18
|
+
* If you want to collapse the `elemBefore` so it takes up no space,
|
|
19
|
+
* then pass in the `COLLAPSE_ELEM_BEFORE` symbol. Keep in mind that
|
|
20
|
+
* collapsing the `elemBefore` can break visual alignment and
|
|
21
|
+
* will make it difficult for users to visually distinguish levels
|
|
22
|
+
* in the side navigation.
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
*
|
|
26
|
+
* ```tsx
|
|
27
|
+
* <FlyoutMenuItemTrigger elemBefore={<HomeIcon label="home" />}>Home</FlyoutMenuItemTrigger>
|
|
28
|
+
*
|
|
29
|
+
* // collapse the elemBefore
|
|
30
|
+
* <FlyoutMenuItemTrigger elemBefore={COLLAPSE_ELEM_BEFORE}>Home</FlyoutMenuItemTrigger>
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
elemBefore?: ReactNode | COLLAPSE_ELEM_BEFORE_TYPE;
|
|
34
|
+
/**
|
|
35
|
+
* Called when the user has clicked on the trigger.
|
|
36
|
+
*
|
|
37
|
+
* If you are controlling the open state of the flyout menu, use this to update your state.
|
|
38
|
+
*/
|
|
39
|
+
onClick?: MenuItemOnClick<HTMLButtonElement>;
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* __FlyoutMenuItemTrigger__
|
|
43
|
+
*
|
|
44
|
+
* The button that toggles the flyout menu.
|
|
45
|
+
*/
|
|
46
|
+
export declare const FlyoutMenuItemTrigger: React.ForwardRefExoticComponent<React.PropsWithoutRef<FlyoutMenuItemTriggerProps> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
|
+
export type FlyoutMenuItemProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Should contain `FlyoutMenuItemTrigger` and `FlyoutMenuItemContent`.
|
|
5
|
+
*/
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* ID that is assigned to the popup container element and used to associate the trigger with the content.
|
|
9
|
+
*/
|
|
10
|
+
id?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Whether the flyout menu is open by default.
|
|
13
|
+
*
|
|
14
|
+
* You can use this to set the default expansion state without needing to entirely control the state.
|
|
15
|
+
*/
|
|
16
|
+
isDefaultOpen?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Allows to control the open state of the flyout externally.
|
|
19
|
+
*
|
|
20
|
+
* If you are controlling the state, you should update your state using:
|
|
21
|
+
* - `onClick` on the `FlyoutMenuItemTrigger`
|
|
22
|
+
* - `onClose` on the `FlyoutMenuItemContent`
|
|
23
|
+
*/
|
|
24
|
+
isOpen?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Callback that is called when the flyout menu is opened or closed.
|
|
27
|
+
*
|
|
28
|
+
* Can be used for analytics purposes when you are not controlling the state yourself.
|
|
29
|
+
*/
|
|
30
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* __FlyoutMenuItem__
|
|
34
|
+
*
|
|
35
|
+
* Displays content in a flyout menu, triggered by a button.
|
|
36
|
+
*
|
|
37
|
+
* The top-level component that contains the trigger and content of a flyout menu.
|
|
38
|
+
*
|
|
39
|
+
* Usage example:
|
|
40
|
+
* ```tsx
|
|
41
|
+
* <FlyoutMenuItem>
|
|
42
|
+
* <FlyoutMenuItemTrigger>Trigger</FlyoutMenuItemTrigger>
|
|
43
|
+
* <FlyoutMenuItemContent>
|
|
44
|
+
* <MenuList>
|
|
45
|
+
* <ButtonMenuItem>Item 1</ButtonMenuItem>
|
|
46
|
+
* <ButtonMenuItem>Item 2</ButtonMenuItem>
|
|
47
|
+
* </MenuList>
|
|
48
|
+
* </FlyoutMenuItemContent>
|
|
49
|
+
* </FlyoutMenuItem>
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
export declare const FlyoutMenuItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<FlyoutMenuItemProps> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { RouterLinkComponentProps } from '@atlaskit/app-provider';
|
|
2
|
+
import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
|
|
3
|
+
export type LinkMenuItemProps<RouterLinkConfig extends Record<string, any> = never> = MenuItemLinkOrButtonCommonProps & RouterLinkComponentProps<RouterLinkConfig> & {
|
|
4
|
+
/**
|
|
5
|
+
* Whether the menu item is selected.
|
|
6
|
+
*/
|
|
7
|
+
isSelected?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Called when the user has clicked on the trigger content.
|
|
10
|
+
*/
|
|
11
|
+
onClick?: MenuItemOnClick<HTMLAnchorElement>;
|
|
12
|
+
/**
|
|
13
|
+
* The native `target` attribute for the anchor element.
|
|
14
|
+
*/
|
|
15
|
+
target?: HTMLAnchorElement['target'];
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* LinkMenuItem
|
|
19
|
+
*
|
|
20
|
+
* A menu item link. It should be used within a `ul`.
|
|
21
|
+
*/
|
|
22
|
+
export declare const LinkMenuItem: <RouterLinkConfig extends Record<string, any> = never>(props: LinkMenuItemProps<RouterLinkConfig> & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type ReactNode } from 'react';
|
|
6
|
+
import type { StrictXCSSProp } from '@atlaskit/css';
|
|
7
|
+
type ListItemProps = {
|
|
8
|
+
/**
|
|
9
|
+
* The contents of the list item.
|
|
10
|
+
*/
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
|
|
14
|
+
*/
|
|
15
|
+
testId?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Bounded style overrides.
|
|
18
|
+
*/
|
|
19
|
+
xcss?: StrictXCSSProp<'display' | 'scrollMarginInline', never>;
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* __List item__
|
|
23
|
+
*
|
|
24
|
+
* A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
|
|
25
|
+
*/
|
|
26
|
+
export declare const ListItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<ListItemProps> & React.RefAttributes<HTMLDivElement>>;
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type ReactNode } from 'react';
|
|
6
|
+
import { type XCSSProp } from '@compiled/react';
|
|
7
|
+
export type ListProps = {
|
|
8
|
+
/**
|
|
9
|
+
* The contents of the list. Should contain list items.
|
|
10
|
+
*/
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
|
|
14
|
+
*/
|
|
15
|
+
testId?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Bounded style overrides.
|
|
18
|
+
*/
|
|
19
|
+
xcss?: XCSSProp<'alignItems' | 'display' | 'gap' | 'paddingInlineStart' | 'padding', never>;
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* __List__
|
|
23
|
+
*
|
|
24
|
+
* A an element with the role of `list` for semantically grouping list items.
|
|
25
|
+
*
|
|
26
|
+
* This is the internal primitive used by other external components in the navigation system.
|
|
27
|
+
*/
|
|
28
|
+
export declare const List: React.ForwardRefExoticComponent<React.PropsWithoutRef<ListProps> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxFrag
|
|
3
|
+
* @jsxRuntime classic
|
|
4
|
+
* @jsx jsx
|
|
5
|
+
*/
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
|
|
8
|
+
/**
|
|
9
|
+
* This is being _internally_ exported so it can be used in other menu item wrapper components, like
|
|
10
|
+
* ExpandableMenuItemTrigger.
|
|
11
|
+
*
|
|
12
|
+
* This selector is used to apply hover styling on the menu item if it contains an open nested popup.
|
|
13
|
+
* It's looking for a popup trigger with `aria-hasexpanded` and `aria-haspopup` attributes. The
|
|
14
|
+
* reason for targeting the _trigger_ instead of the popup itself, is the popup might be rendered
|
|
15
|
+
* outside the menu item, e.g. if rendered in a portal.
|
|
16
|
+
*
|
|
17
|
+
* An alternative solution might involve wrapping it with a popup context and listening to the popup
|
|
18
|
+
* events through it (and applying the hover style when the popup is open). Exploring this has been
|
|
19
|
+
* captured in [BLU-3354](https://jplat.atlassian.net/browse/BLU-3354).
|
|
20
|
+
*/
|
|
21
|
+
export declare const nestedOpenPopupCSSSelector = "&:has([aria-expanded=\"true\"][aria-haspopup=\"true\"])";
|
|
22
|
+
/**
|
|
23
|
+
* Includes all props that are used by any menu item, as MenuItembase is the base component for all menu item components.
|
|
24
|
+
*
|
|
25
|
+
* We also include additional `aria` props to support the menu item being a trigger for the FlyoutMenuItem popup and for the
|
|
26
|
+
* expanded content for ExpandableMenuItem.
|
|
27
|
+
*/
|
|
28
|
+
type MenuItemBaseProps<T extends HTMLAnchorElement | HTMLButtonElement> = MenuItemLinkOrButtonCommonProps & {
|
|
29
|
+
ariaControls?: string;
|
|
30
|
+
ariaExpanded?: boolean;
|
|
31
|
+
ariaHasPopup?: boolean | 'dialog';
|
|
32
|
+
href?: string | Record<string, any>;
|
|
33
|
+
/**
|
|
34
|
+
* ID attribute, passed to the interactive element (anchor/button). This is not publicly exposed, and is currently only
|
|
35
|
+
* used internally by `ExpandableMenuItemTrigger` for the `aria-labelledby` attribute.
|
|
36
|
+
*/
|
|
37
|
+
id?: string;
|
|
38
|
+
isDisabled?: boolean;
|
|
39
|
+
onClick?: MenuItemOnClick<T>;
|
|
40
|
+
target?: HTMLAnchorElement['target'];
|
|
41
|
+
};
|
|
42
|
+
/**
|
|
43
|
+
* __MenuItemBase__
|
|
44
|
+
*
|
|
45
|
+
* The base menu item component used to compose ButtonMenuItem and LinkMenuItem.
|
|
46
|
+
*
|
|
47
|
+
* It contains a type argument `<T>`, to specify the type of the interactive element (`button` or `a`).
|
|
48
|
+
* This can be inferred from the type of the `onClick` prop.
|
|
49
|
+
*/
|
|
50
|
+
export declare const MenuItemBase: <T extends HTMLAnchorElement | HTMLButtonElement>(props: MenuItemBaseProps<T> & React.RefAttributes<T>) => React.ReactElement | null;
|
|
51
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { ListItem } from './list-item';
|
|
6
|
+
/**
|
|
7
|
+
* __Menu list item__
|
|
8
|
+
*
|
|
9
|
+
* A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
|
|
10
|
+
*/
|
|
11
|
+
export declare const MenuListItem: typeof ListItem;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type ListProps } from './list';
|
|
2
|
+
/**
|
|
3
|
+
* __Menu list__
|
|
4
|
+
*
|
|
5
|
+
* An [unordered list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) with visual styles removed,
|
|
6
|
+
* for semantically grouping list items.
|
|
7
|
+
*/
|
|
8
|
+
export declare const MenuList: React.ForwardRefExoticComponent<Omit<ListProps, 'xcss'> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Use this component to create visual separation between the:
|
|
7
|
+
*
|
|
8
|
+
* - global app shortcut section
|
|
9
|
+
* - 'more' button menu item
|
|
10
|
+
* - starred spaces (in Confluence)
|
|
11
|
+
*
|
|
12
|
+
* Only use this component in the top level of the menu,
|
|
13
|
+
* and exercise caution when using it in new situations.
|
|
14
|
+
*
|
|
15
|
+
* This component exists to fulfil product design requirements but has not yet
|
|
16
|
+
* been consolidated into the wider navigation system.
|
|
17
|
+
*
|
|
18
|
+
* It may not exist in the future when global apps are no longer in the side navigation.
|
|
19
|
+
*/
|
|
20
|
+
export declare function TopLevelSpacer(): JSX.Element;
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
import type React from 'react';
|
|
2
|
+
import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
|
+
import { type COLLAPSE_ELEM_BEFORE_TYPE } from './menu-item-signals';
|
|
4
|
+
export type MenuItemOnClick<T extends HTMLAnchorElement | HTMLButtonElement> = (event: React.MouseEvent<T>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
5
|
+
/**
|
|
6
|
+
* Props shared across _all_ menu item components:
|
|
7
|
+
* - MenuItemBase
|
|
8
|
+
* - LinkMenuItem
|
|
9
|
+
* - ButtonMenuItem
|
|
10
|
+
* - ExpandableMenuItemTrigger
|
|
11
|
+
* - FlyoutMenuItemTrigger
|
|
12
|
+
*/
|
|
13
|
+
export type MenuItemCommonProps = {
|
|
14
|
+
/**
|
|
15
|
+
* The main textual content and label of the menu item.
|
|
16
|
+
*
|
|
17
|
+
* The content will be truncated to fit into the side nav in one line.
|
|
18
|
+
*
|
|
19
|
+
* **Note:** Placing non-textual content (such as lozenges) can cause unexpected truncation behavior.
|
|
20
|
+
* Use the provided slot props such as `elemBefore` or `elemAfter` for non-textual content instead.
|
|
21
|
+
*/
|
|
22
|
+
children: React.ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* A slot to render drop indicators for drag and drop operations on the menu item.
|
|
25
|
+
*/
|
|
26
|
+
dropIndicator?: React.ReactNode;
|
|
27
|
+
/**
|
|
28
|
+
* Whether this menu item can be dragged. Add a drag handle to this item.
|
|
29
|
+
* You are responsible for wiring up drag and drop to the menu item.
|
|
30
|
+
*
|
|
31
|
+
*
|
|
32
|
+
* - Please be sure to make the MenuItem `ref` the `draggable` element
|
|
33
|
+
* - See our navigation drag and drop guidelines for more technical details
|
|
34
|
+
*/
|
|
35
|
+
hasDragIndicator?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
|
|
38
|
+
*/
|
|
39
|
+
interactionName?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Disable tooltip for menu item content. This should only be done when there is some other way
|
|
42
|
+
* to display the full menu content and description of a menu item close by (eg with another popup)
|
|
43
|
+
*/
|
|
44
|
+
isContentTooltipDisabled?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Whether the element is being dragged. Will apply "dragging" styles to
|
|
47
|
+
* menu item.
|
|
48
|
+
*/
|
|
49
|
+
isDragging?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Indicates that the menu item is selected.
|
|
52
|
+
*/
|
|
53
|
+
isSelected?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
|
|
56
|
+
*/
|
|
57
|
+
testId?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Exposes the visually complete menu item, including:
|
|
60
|
+
*
|
|
61
|
+
* - the main interactive element (exposed through `ref`)
|
|
62
|
+
* - any `elemBefore`, `elemAfter`, `actions`, or `actionsOnHover`
|
|
63
|
+
*
|
|
64
|
+
* This specifically excludes the wrapping list item,
|
|
65
|
+
* which is also exposed through either:
|
|
66
|
+
* - the `listItemRef` prop for LinkMenuItem and ButtonMenuItem
|
|
67
|
+
* - the `ref` prop for FlyoutMenuItem and ExpandableMenuItem
|
|
68
|
+
*/
|
|
69
|
+
visualContentRef?: React.Ref<HTMLDivElement>;
|
|
70
|
+
};
|
|
71
|
+
/**
|
|
72
|
+
* Menu item grid slots. These are used in:
|
|
73
|
+
* - MenuItemBase
|
|
74
|
+
* - LinkMenuItem
|
|
75
|
+
* - ButtonMenuItem
|
|
76
|
+
* - ExpandableMenuItemTrigger
|
|
77
|
+
*/
|
|
78
|
+
export type MenuItemSlots = {
|
|
79
|
+
/**
|
|
80
|
+
* `ReactNode` to be placed visually after the `children`.
|
|
81
|
+
*
|
|
82
|
+
* It is intended for additional actions (e.g. IconButtons).
|
|
83
|
+
*
|
|
84
|
+
* They will not be rendered when the menu item is disabled.
|
|
85
|
+
*/
|
|
86
|
+
actions?: React.ReactNode;
|
|
87
|
+
/**
|
|
88
|
+
* `ReactNode` to be placed visually after the `children` and will
|
|
89
|
+
* only be displayed on hover or focus.
|
|
90
|
+
*
|
|
91
|
+
* It is intended for additional actions (e.g. IconButtons).
|
|
92
|
+
*
|
|
93
|
+
* This `ReactNode` will replace `elemAfter` on hover or focus.
|
|
94
|
+
*
|
|
95
|
+
* They will not be rendered when the menu item is disabled.
|
|
96
|
+
*
|
|
97
|
+
* This `ReactNode` will be rendered visually on top of the main
|
|
98
|
+
* interactive element for the menu item. If this element does not
|
|
99
|
+
* contain an interactive element (`button` or `a`) then `pointer-events`
|
|
100
|
+
* will be set to `none` on this slot so that users can click through
|
|
101
|
+
* this element onto the main interactive element of the menu item.
|
|
102
|
+
*/
|
|
103
|
+
actionsOnHover?: React.ReactNode;
|
|
104
|
+
/**
|
|
105
|
+
* `ReactNode` to be placed visually after the `children`.
|
|
106
|
+
*
|
|
107
|
+
* It is intended for static content (e.g. a `Lozenge`).
|
|
108
|
+
*
|
|
109
|
+
* If both `elemAfter` and `actionsOnHover` are provided, `elemAfter` will
|
|
110
|
+
* not be displayed when the item is hovered over or expanded. This is
|
|
111
|
+
* because the `actionsOnHover` will be displayed instead.
|
|
112
|
+
*
|
|
113
|
+
* This `ReactNode` will be rendered visually on top of the main
|
|
114
|
+
* interactive element for the menu item. If this element does not
|
|
115
|
+
* contain an interactive element (`button` or `a`) then `pointer-events`
|
|
116
|
+
* will be set to `none` on this slot so that users can click through
|
|
117
|
+
* this element onto the main interactive element of the menu item.
|
|
118
|
+
*/
|
|
119
|
+
elemAfter?: React.ReactNode;
|
|
120
|
+
/**
|
|
121
|
+
* `ReactNode` to be placed visually before the `children`.
|
|
122
|
+
*
|
|
123
|
+
* This `ReactNode` will be rendered visually on top of the main
|
|
124
|
+
* interactive element for the menu item. If this element does not
|
|
125
|
+
* contain an interactive element (`button` or `a`) then `pointer-events`
|
|
126
|
+
* will be set to `none` on this slot so that users can click through
|
|
127
|
+
* this element onto the main interactive element of the menu item.
|
|
128
|
+
*
|
|
129
|
+
* If you want to collapse the `elemBefore` so it takes up no space,
|
|
130
|
+
* then pass in the `COLLAPSE_ELEM_BEFORE` symbol. Keep in mind that
|
|
131
|
+
* collapsing the `elemBefore` can break visual alignment and
|
|
132
|
+
* will make it difficult for users to visually distinguish levels
|
|
133
|
+
* in the side navigation.
|
|
134
|
+
*
|
|
135
|
+
* @example
|
|
136
|
+
*
|
|
137
|
+
* ```tsx
|
|
138
|
+
* <MenuItemButton elemBefore={<HomeIcon label="home" />}>Home</MenuItemButton>
|
|
139
|
+
*
|
|
140
|
+
* // collapse the elemBefore
|
|
141
|
+
* <MenuItemButton elemBefore={COLLAPSE_ELEM_BEFORE}>Home</MenuItemButton>
|
|
142
|
+
* ```
|
|
143
|
+
*/
|
|
144
|
+
elemBefore?: React.ReactNode | COLLAPSE_ELEM_BEFORE_TYPE;
|
|
145
|
+
};
|
|
146
|
+
/**
|
|
147
|
+
* Props shared across:
|
|
148
|
+
* - MenuItemBase
|
|
149
|
+
* - LinkMenuItem
|
|
150
|
+
* - ButtonMenuItem
|
|
151
|
+
*/
|
|
152
|
+
export type MenuItemLinkOrButtonCommonProps = MenuItemCommonProps & MenuItemSlots & {
|
|
153
|
+
/**
|
|
154
|
+
* Additional textual content for the menu item.
|
|
155
|
+
* It is displayed underneath the main content.
|
|
156
|
+
*/
|
|
157
|
+
description?: string;
|
|
158
|
+
/**
|
|
159
|
+
* Exposes the `<div role="listitem">` element that wraps the entire item.
|
|
160
|
+
*
|
|
161
|
+
* This is the root element rendered by the component.
|
|
162
|
+
*/
|
|
163
|
+
listItemRef?: React.Ref<HTMLDivElement>;
|
|
164
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Scrolls the element into view once it is selected, and once all its ancestors (expandable
|
|
3
|
+
* parent menu items) are expanded.
|
|
4
|
+
*
|
|
5
|
+
* Once that has happened, we don't want to scroll it into view again until it has been unselected.
|
|
6
|
+
* This is to prevent the menu item from being scrolled into view again if the user collapses a
|
|
7
|
+
* parent and then expands it again, without changing what menu item is selected.
|
|
8
|
+
*/
|
|
9
|
+
export declare function useScrollMenuItemIntoView({ elementRef, isSelected, }: {
|
|
10
|
+
elementRef: React.RefObject<HTMLDivElement>;
|
|
11
|
+
isSelected: boolean;
|
|
12
|
+
}): void;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Context for the current menu section. It holds a unique ID for the section, used for associating the section heading
|
|
3
|
+
* as an accessible label for the group.
|
|
4
|
+
*/
|
|
5
|
+
export declare const MenuSectionContext: import("react").Context<string | null>;
|
|
6
|
+
export declare const useMenuSectionContext: () => string;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { type ReactNode } from 'react';
|
|
6
|
+
/**
|
|
7
|
+
* __MenuSectionHeading__
|
|
8
|
+
*
|
|
9
|
+
* The label for the menu section group.
|
|
10
|
+
*/
|
|
11
|
+
export declare const MenuSectionHeading: ({ children, }: {
|
|
12
|
+
/**
|
|
13
|
+
* The text of the heading.
|
|
14
|
+
*/
|
|
15
|
+
children: ReactNode;
|
|
16
|
+
}) => JSX.Element;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
type MenuSectionProps = {
|
|
3
|
+
/**
|
|
4
|
+
* The contents of the menu section.
|
|
5
|
+
* Should contain a `MenuSectionHeading`, and a `Divider` if appropriate.
|
|
6
|
+
*/
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Wraps the `MenuSection` in a `MenuListItem` so that it can validly be the child of a `MenuList`
|
|
10
|
+
*
|
|
11
|
+
* In the future this will become the default behavior, and the prop will be removed.
|
|
12
|
+
*/
|
|
13
|
+
isMenuListItem?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
|
|
16
|
+
*
|
|
17
|
+
* It is applied to the outer rendered element.
|
|
18
|
+
*
|
|
19
|
+
* Right now, it is only applied when `isMenuListItem:true`
|
|
20
|
+
*/
|
|
21
|
+
testId?: string;
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* __MenuSection__
|
|
25
|
+
*
|
|
26
|
+
* A composable component for grouping menu items, along with a heading (`MenuSectionHeading`) and a divider (`Divider`).
|
|
27
|
+
*
|
|
28
|
+
* Usage example:
|
|
29
|
+
* ```tsx
|
|
30
|
+
* <MenuSection>
|
|
31
|
+
* <MenuSectionHeading>Section heading</MenuSectionHeading>
|
|
32
|
+
* <MenuList>
|
|
33
|
+
* <MenuItem>Item 1</MenuItem>
|
|
34
|
+
* <MenuItem>Item 2</MenuItem>
|
|
35
|
+
* </MenuList>
|
|
36
|
+
* <Divider />
|
|
37
|
+
* </MenuSection>
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
export declare const MenuSection: ({ children, testId, isMenuListItem, }: MenuSectionProps) => JSX.Element;
|
|
41
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ContainerAvatar, type ContainerAvatarProps } from '../ui/menu-item/container-avatar';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { LazyDragHandle } from '../../ui/menu-item/drag-handle/lazy-drag-handle';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DragPreview } from '../../ui/menu-item/drag-and-drop/drag-preview';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DropIndicator, type Instruction, type Operation, } from '../../ui/menu-item/drag-and-drop/drop-indicator';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { GroupDropIndicator } from '../../ui/menu-item/drag-and-drop/group-drop-indicator';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { attachInstruction, extractInstruction, type Availability, type Operation, type Instruction, } from '../../ui/menu-item/drag-and-drop/hitbox';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useMenuItemDragAndDrop, type TMenuItemDragAndDropState, } from '../../ui/menu-item/drag-and-drop/use-menu-item-drag-and-drop';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { ExpandableMenuItem, type ExpandableMenuItemProps, } from '../ui/menu-item/expandable-menu-item/expandable-menu-item';
|
|
2
|
+
export { ExpandableMenuItemTrigger, type ExpandableMenuItemTriggerProps, } from '../ui/menu-item/expandable-menu-item/expandable-menu-item-trigger';
|
|
3
|
+
export { ExpandableMenuItemContent, type ExpandableMenuItemContentProps, } from '../ui/menu-item/expandable-menu-item/expandable-menu-item-content';
|
|
4
|
+
export { useIsExpanded } from '../ui/menu-item/expandable-menu-item/expandable-menu-item-context';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { FlyoutMenuItem, type FlyoutMenuItemProps, } from '../ui/menu-item/flyout-menu-item/flyout-menu-item';
|
|
2
|
+
export { FlyoutBody, type FlyoutBodyProps } from '../ui/menu-item/flyout-menu-item/flyout-body';
|
|
3
|
+
export { FlyoutMenuItemContent, type FlyoutMenuItemContentProps, } from '../ui/menu-item/flyout-menu-item/flyout-menu-item-content';
|
|
4
|
+
export { FlyoutFooter, type FlyoutFooterProps, } from '../ui/menu-item/flyout-menu-item/flyout-footer';
|
|
5
|
+
export { FlyoutHeader, type FlyoutHeaderProps, } from '../ui/menu-item/flyout-menu-item/flyout-header';
|
|
6
|
+
export { COLLAPSE_ELEM_BEFORE } from '../ui/menu-item/menu-item-signals';
|
|
7
|
+
export { FlyoutMenuItemTrigger, type FlyoutMenuItemTriggerProps, } from '../ui/menu-item/flyout-menu-item/flyout-menu-item-trigger';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { MenuListItem } from '../ui/menu-item/menu-list-item';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { MenuList } from '../ui/menu-item/menu-list';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { TopLevelSpacer } from '../ui/menu-item/top-level-spacer';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { MenuItemLinkOrButtonCommonProps, MenuItemOnClick } from './types';
|
|
3
|
+
export type ButtonMenuItemProps = MenuItemLinkOrButtonCommonProps & {
|
|
4
|
+
/**
|
|
5
|
+
* Identifies the popup element that this element controls when it is used as a popup trigger.
|
|
6
|
+
* Should match the `id` of the popup content for screen readers to understand the relationship.
|
|
7
|
+
*/
|
|
8
|
+
'aria-controls'?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Announces to assistive technology whether the popup is currently open or closed,
|
|
11
|
+
* when this element is used as a popup trigger.
|
|
12
|
+
*/
|
|
13
|
+
'aria-expanded'?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Informs assistive technology that this element triggers a popup.
|
|
16
|
+
*/
|
|
17
|
+
'aria-haspopup'?: boolean | 'dialog';
|
|
18
|
+
/**
|
|
19
|
+
* We are not using a discriminated union to enforce that the `actions` and `actionsOnHover`
|
|
20
|
+
* props are not used when `isDisabled` is true due to ergonomic type issues with `boolean`
|
|
21
|
+
* types (as oppposed to literal `true` or `false` types), e.g. if a conditional boolean
|
|
22
|
+
* variable is passed to `isDisabled`.
|
|
23
|
+
*/
|
|
24
|
+
/**
|
|
25
|
+
* Whether the menu item is disabled.
|
|
26
|
+
*
|
|
27
|
+
* When disabled, content in the `actions` and `actionsOnHover` props will not be rendered.
|
|
28
|
+
*
|
|
29
|
+
* The menu item will not be interactive and will not respond to hover or focus.
|
|
30
|
+
*/
|
|
31
|
+
isDisabled?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Called when the user has clicked on the trigger content.
|
|
34
|
+
*/
|
|
35
|
+
onClick?: MenuItemOnClick<HTMLButtonElement>;
|
|
36
|
+
};
|
|
37
|
+
/**
|
|
38
|
+
* __ButtonMenuItem__
|
|
39
|
+
*
|
|
40
|
+
* A menu item button. It should be used within a `ul`, as it renders a list item.
|
|
41
|
+
*/
|
|
42
|
+
export declare const ButtonMenuItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<ButtonMenuItemProps> & React.RefAttributes<HTMLButtonElement>>;
|