@atlaskit/editor-toolbar 0.5.1 → 0.6.1

package/dist/types/ui/Toolbar.d.ts

@@ -1,4 +1,5 @@
 import React, { type ReactNode } from 'react';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
 type ToolbarProps = {
     children?: ReactNode;
     /**
@@ -12,8 +13,9 @@ type ToolbarProps = {
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
  */
 export declare const Toolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
+type PrimaryToolbarProps = ToolbarProps & ResponsiveContainerProps;
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar
  */
-export declare const PrimaryToolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
+export declare const PrimaryToolbar: ({ children, label, reducedBreakpoints }: PrimaryToolbarProps) => React.JSX.Element;
 export {};

package/dist/types/ui/ToolbarDropdownMenu.d.ts

@@ -5,6 +5,10 @@
 import React, { type ReactNode } from 'react';
 type ToolbarDropdownMenuProps = {
     children?: ReactNode;
+    /**
+     * Enforeces a max height of 320px for menus - when menu is larger a scroll is introduced
+     */
+    enableMaxHeight?: boolean;
     /**
      * Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
      */
@@ -14,5 +18,5 @@ type ToolbarDropdownMenuProps = {
     label?: string;
     testId?: string;
 };
-export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, }: ToolbarDropdownMenuProps) => JSX.Element;
+export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, enableMaxHeight, }: ToolbarDropdownMenuProps) => JSX.Element;
 export {};

package/dist/types/ui/ToolbarDropdownMenuContext.d.ts

@@ -4,7 +4,9 @@ interface ToolbarDropdownMenuContextValue {
     isOpen: boolean;
     openMenu: () => void;
 }
-export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextValue;
+export declare const useToolbarDropdownMenuOld: () => ToolbarDropdownMenuContextValue;
+export declare const useToolbarDropdownMenuNew: () => ToolbarDropdownMenuContextValue | undefined;
+export declare const useToolbarDropdownMenu: (...args: never[]) => ToolbarDropdownMenuContextValue | undefined;
 interface ToolbarDropdownMenuProviderProps {
     children: React.ReactNode;
 }

package/dist/types-ts4.5/index.d.ts

@@ -9,7 +9,9 @@ export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
 export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
-export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
+export { useToolbarDropdownMenu, ToolbarDropdownMenuProvider, } from './ui/ToolbarDropdownMenuContext';
+export { ResponsiveContainer } from './ui/ResponsiveContainer';
+export { Show } from './ui/Show';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';

package/dist/types-ts4.5/ui/ResponsiveContainer.d.ts

@@ -0,0 +1,54 @@
+import React, { type ReactNode } from 'react';
+export type ResponsiveContainerProps = {
+    children: ReactNode;
+    /**
+     * This flag changes the breakpoint definitions, which reduces them to cater for smaller editor widths.
+     *
+     * Usages - for smaller editors such as comments
+     */
+    reducedBreakpoints?: boolean;
+};
+/**
+ * A responsive container that enables container query-based responsive design using CSS container queries.
+ * This component establishes a containment context named 'toolbar-container' that child components can
+ * reference for responsive behavior based on the container's width rather than the viewport width.
+ *
+ * The container defines breakpoints at:
+ * - sm: 410px
+ * - md: 476px
+ * - lg: 768px
+ * - xl: 1024px
+ *
+ * @example
+ * Basic usage with Show component for responsive visibility:
+ * ```tsx
+ * <ResponsiveContainer>
+ *   <Show above="md">
+ *     <Button>Only visible when container is wider than 476px</Button>
+ *   </Show>
+ *   <Show below="sm">
+ *     <Icon>Only visible when container is narrower than 410px</Icon>
+ *   </Show>
+ * </ResponsiveContainer>
+ * ```
+ *
+ * @example
+ * Combining multiple Show components for different breakpoints:
+ * ```tsx
+ * <ResponsiveContainer>
+ *   <Show above="lg">
+ *     <FullToolbar />
+ *   </Show>
+ *   <Show below="lg" above="md">
+ *     <CompactToolbar />
+ *   </Show>
+ *   <Show below="md">
+ *     <MinimalToolbar />
+ *   </Show>
+ * </ResponsiveContainer>
+ * ```
+ *
+ * @param children - React nodes to render within the responsive container context
+ * @returns A Box component with container query styles applied
+ */
+export declare const ResponsiveContainer: ({ children, reducedBreakpoints }: ResponsiveContainerProps) => React.JSX.Element;

package/dist/types-ts4.5/ui/Show.d.ts

@@ -0,0 +1,22 @@
+import React, { type ReactNode } from 'react';
+type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+type AboveProp = {
+    above: Breakpoint;
+    below?: never;
+};
+type BelowProp = {
+    above?: never;
+    below: Breakpoint;
+};
+type ShowProps = {
+    children: ReactNode;
+} & (AboveProp | BelowProp);
+/**
+ * Conditionally renders children based on responsive breakpoints.
+ * Use either `above` or `below` prop to control visibility.
+ *
+ * *note:* This component must be an ancestor of a ResponsiveContainer component to work correctly
+ * as it relies on CSS container queries.
+ */
+export declare const Show: ({ children, above, below }: ShowProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/Toolbar.d.ts

@@ -1,4 +1,5 @@
 import React, { type ReactNode } from 'react';
+import type { ResponsiveContainerProps } from './ResponsiveContainer';
 type ToolbarProps = {
     children?: ReactNode;
     /**
@@ -12,8 +13,9 @@ type ToolbarProps = {
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
  */
 export declare const Toolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
+type PrimaryToolbarProps = ToolbarProps & ResponsiveContainerProps;
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar
  */
-export declare const PrimaryToolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
+export declare const PrimaryToolbar: ({ children, label, reducedBreakpoints }: PrimaryToolbarProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/ToolbarDropdownMenu.d.ts

@@ -5,6 +5,10 @@
 import React, { type ReactNode } from 'react';
 type ToolbarDropdownMenuProps = {
     children?: ReactNode;
+    /**
+     * Enforeces a max height of 320px for menus - when menu is larger a scroll is introduced
+     */
+    enableMaxHeight?: boolean;
     /**
      * Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
      */
@@ -14,5 +18,5 @@ type ToolbarDropdownMenuProps = {
     label?: string;
     testId?: string;
 };
-export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, }: ToolbarDropdownMenuProps) => JSX.Element;
+export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, enableMaxHeight, }: ToolbarDropdownMenuProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/ToolbarDropdownMenuContext.d.ts

@@ -4,7 +4,9 @@ interface ToolbarDropdownMenuContextValue {
     isOpen: boolean;
     openMenu: () => void;
 }
-export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextValue;
+export declare const useToolbarDropdownMenuOld: () => ToolbarDropdownMenuContextValue;
+export declare const useToolbarDropdownMenuNew: () => ToolbarDropdownMenuContextValue | undefined;
+export declare const useToolbarDropdownMenu: (...args: never[]) => ToolbarDropdownMenuContextValue | undefined;
 interface ToolbarDropdownMenuProviderProps {
     children: React.ReactNode;
 }

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.5.1",
+	"version": "0.6.1",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -28,9 +28,10 @@
 		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/icon-lab": "^5.7.0",
 		"@atlaskit/logo": "^19.7.0",
+		"@atlaskit/platform-feature-flags-react": "^0.3.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/primitives": "^14.12.0",
-		"@atlaskit/tmp-editor-statsig": "^11.9.0",
+		"@atlaskit/tmp-editor-statsig": "^11.12.0",
 		"@atlaskit/tokens": "^6.1.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",