@atlaskit/editor-toolbar 0.2.3 → 0.3.1

package/src/ui/ToolbarButtonGroup.tsx

@@ -1,12 +1,34 @@
-import React, { type ReactNode } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Children, Fragment, type ReactNode } from 'react';
+
+import { cssMap, jsx } from '@compiled/react';
 
-import { cssMap } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
 
 const styles = cssMap({
 	container: {
 		display: 'flex',
 	},
+	firstChild: {
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+		button: {
+			borderTopRightRadius: 0,
+			borderBottomRightRadius: 0,
+			paddingInline: token('space.050'),
+		},
+	},
+	lastChild: {
+		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+		button: {
+			borderTopLeftRadius: 0,
+			borderBottomLeftRadius: 0,
+			paddingInline: token('space.075'),
+		},
+	},
 });
 
 type ToolbarButtonGroupProps = {
@@ -14,5 +36,22 @@ type ToolbarButtonGroupProps = {
 };
 
 export const ToolbarButtonGroup = ({ children }: ToolbarButtonGroupProps) => {
-	return <Box xcss={styles.container}>{children}</Box>;
+	const items = Children.toArray(children);
+	const FirstChild = items.at(0);
+	const LastChild = items.at(-1);
+	const middleChildren = items.slice(1, -1);
+
+	return (
+		<Box xcss={styles.container}>
+			{items.length <= 1 ? (
+				children
+			) : (
+				<Fragment>
+					<div css={styles.firstChild}>{FirstChild}</div>
+					{middleChildren}
+					<div css={styles.lastChild}>{LastChild}</div>
+				</Fragment>
+			)}
+		</Box>
+	);
 };

package/src/ui/ToolbarDropdownItem.tsx

@@ -17,12 +17,14 @@ type TextStyle =
 
 const styles = cssMap({
 	toolbarDropdownItem: {
+		display: 'flex',
 		position: 'relative',
 		backgroundColor: token('color.background.neutral.subtle'),
 		width: '100%',
 		minHeight: '36px',
-		paddingLeft: token('space.150'),
-		paddingRight: token('space.150'),
+		minWidth: '230px',
+		paddingInline: token('space.200'),
+		paddingBlock: token('space.100'),
 		'&:focus-visible': {
 			outlineOffset: token('space.negative.025'),
 			borderRadius: token('border.radius'),

package/src/ui/ToolbarDropdownItemSection.tsx

@@ -1,19 +1,21 @@
 import React, { type ReactNode } from 'react';
 
-import { cssMap } from '@atlaskit/css';
-import { Box } from '@atlaskit/primitives/compiled';
-
-const styles = cssMap({
-	container: {
-		display: 'flex',
-		flexDirection: 'column',
-	},
-});
+import { DropdownItemGroup } from '@atlaskit/dropdown-menu';
 
 type ToolbarDropdownItemSectionProps = {
 	children?: ReactNode;
+	hasSeparator?: boolean;
+	title?: string;
 };
 
-export const ToolbarDropdownItemSection = ({ children }: ToolbarDropdownItemSectionProps) => {
-	return <Box xcss={styles.container}>{children}</Box>;
+export const ToolbarDropdownItemSection = ({
+	children,
+	hasSeparator,
+	title,
+}: ToolbarDropdownItemSectionProps) => {
+	return (
+		<DropdownItemGroup hasSeparator={hasSeparator} title={title}>
+			{children}
+		</DropdownItemGroup>
+	);
 };

package/src/ui/ToolbarDropdownMenu.tsx

@@ -1,30 +1,64 @@
-import React, { type ReactNode } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { type ReactNode, useCallback } from 'react';
 
-import DropdownMenu from '@atlaskit/dropdown-menu';
+import { jsx, cssMap } from '@compiled/react';
+
+import DropdownMenu, { type OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
+import { token } from '@atlaskit/tokens';
 
 import { useToolbarUI } from '../hooks/ui-context';
-import { type ToolbarButtonGroupLocation } from '../types';
 
 import { ToolbarButton } from './ToolbarButton';
+import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
+
+const styles = cssMap({
+	sectionMargin: {
+		marginBlock: token('space.050'),
+	},
+});
 
 type ToolbarDropdownMenuProps = {
 	iconBefore: React.ReactNode;
 	children?: ReactNode;
-	groupLocation?: ToolbarButtonGroupLocation;
 	isDisabled?: boolean;
 	testId?: string;
 	label?: string;
+	/**
+	 * Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
+	 */
+	hasSectionMargin?: boolean;
 };
 
-export const ToolbarDropdownMenu = ({
+const ToolbarDropdownMenuContent = ({
 	iconBefore,
-	groupLocation,
 	children,
 	isDisabled,
 	testId,
 	label,
 }: ToolbarDropdownMenuProps) => {
 	const { onDropdownOpenChanged } = useToolbarUI();
+	const { closeMenu, isOpen, openMenu } = useToolbarDropdownMenu();
+
+	const handleOpenChange = useCallback(
+		(args: OnOpenChangeArgs) => {
+			onDropdownOpenChanged(args);
+			if (!args.isOpen) {
+				closeMenu();
+			}
+		},
+		[closeMenu, onDropdownOpenChanged],
+	);
+
+	const handleClick = useCallback(() => {
+		if (!isOpen) {
+			openMenu();
+		} else {
+			closeMenu();
+		}
+	}, [closeMenu, openMenu, isOpen]);
 
 	return (
 		<DropdownMenu<HTMLButtonElement>
@@ -36,18 +70,43 @@ export const ToolbarDropdownMenu = ({
 					aria-haspopup={triggerProps['aria-haspopup']}
 					aria-controls={triggerProps['aria-controls']}
 					onBlur={triggerProps.onBlur}
-					onClick={triggerProps.onClick}
+					onClick={(e) => {
+						handleClick();
+						triggerProps.onClick && triggerProps.onClick(e);
+					}}
 					onFocus={triggerProps.onFocus}
 					testId={testId}
 					iconBefore={iconBefore}
-					groupLocation={groupLocation}
 					isDisabled={isDisabled}
 					label={label}
 				/>
 			)}
-			onOpenChange={onDropdownOpenChanged}
+			onOpenChange={handleOpenChange}
+			isOpen={isOpen}
 		>
 			{children}
 		</DropdownMenu>
 	);
 };
+
+export const ToolbarDropdownMenu = ({
+	iconBefore,
+	children,
+	isDisabled,
+	testId,
+	label,
+	hasSectionMargin = true,
+}: ToolbarDropdownMenuProps) => {
+	return (
+		<ToolbarDropdownMenuProvider>
+			<ToolbarDropdownMenuContent
+				iconBefore={iconBefore}
+				isDisabled={isDisabled}
+				testId={testId}
+				label={label}
+			>
+				<div css={hasSectionMargin && styles.sectionMargin}>{children}</div>
+			</ToolbarDropdownMenuContent>
+		</ToolbarDropdownMenuProvider>
+	);
+};

package/src/ui/ToolbarDropdownMenuContext.tsx

@@ -0,0 +1,44 @@
+import React, { createContext, useContext, useState } from 'react';
+
+interface ToolbarDropdownMenuContextValue {
+	openMenu: () => void;
+	closeMenu: () => void;
+	isOpen: boolean;
+}
+
+const ToolbarDropdownMenuContext = createContext<ToolbarDropdownMenuContextValue | undefined>(
+	undefined,
+);
+
+export const useToolbarDropdownMenu = () => {
+	const context = useContext(ToolbarDropdownMenuContext);
+	if (!context) {
+		throw new Error('useToolbarDropdownMenu must be used within ToolbarDropdownMenuProvider');
+	}
+	return context;
+};
+
+interface ToolbarDropdownMenuProviderProps {
+	children: React.ReactNode;
+}
+
+export const ToolbarDropdownMenuProvider = ({ children }: ToolbarDropdownMenuProviderProps) => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const openMenu = () => setIsOpen(true);
+	const closeMenu = () => {
+		setIsOpen(false);
+	};
+
+	const contextValue: ToolbarDropdownMenuContextValue = {
+		openMenu,
+		closeMenu,
+		isOpen,
+	};
+
+	return (
+		<ToolbarDropdownMenuContext.Provider value={contextValue}>
+			{children}
+		</ToolbarDropdownMenuContext.Provider>
+	);
+};

package/src/ui/ToolbarTooltip.tsx

@@ -4,7 +4,7 @@ import type { PositionType } from '@atlaskit/tooltip';
 import Tooltip from '@atlaskit/tooltip';
 
 type ToolbarTooltipProps = {
-	content: string;
+	content: React.ReactNode;
 	children: React.ReactNode;
 	position?: PositionType;
 };

package/dist/cjs/ui/ToolbarDropdownDivider.compiled.css

@@ -1,3 +0,0 @@
-._1doce4h9{border-bottom-width:var(--ds-border-width,1px)}
-._1il9nqa1{border-bottom-style:solid}
-._1o3imuej{border-bottom-color:var(--ds-border,#091e4224)}

package/dist/cjs/ui/ToolbarDropdownDivider.js

@@ -1,20 +0,0 @@
-/* ToolbarDropdownDivider.tsx generated by @compiled/babel-plugin v0.36.1 */
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToolbarDropdownDivider = void 0;
-require("./ToolbarDropdownDivider.compiled.css");
-var React = _interopRequireWildcard(require("react"));
-var _runtime = require("@compiled/react/runtime");
-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); }
-var styles = {
-  divider: "_1o3imuej _1il9nqa1 _1doce4h9"
-};
-var ToolbarDropdownDivider = exports.ToolbarDropdownDivider = function ToolbarDropdownDivider() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)([styles.divider])
-  });
-};

package/dist/cjs/ui/ToolbarDropdownItemSection.compiled.css

@@ -1,2 +0,0 @@
-._1e0c1txw{display:flex}
-._2lx21bp4{flex-direction:column}

package/dist/es2019/ui/ToolbarDropdownDivider.compiled.css

@@ -1,3 +0,0 @@
-._1doce4h9{border-bottom-width:var(--ds-border-width,1px)}
-._1il9nqa1{border-bottom-style:solid}
-._1o3imuej{border-bottom-color:var(--ds-border,#091e4224)}

package/dist/es2019/ui/ToolbarDropdownDivider.js

@@ -1,12 +0,0 @@
-/* ToolbarDropdownDivider.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./ToolbarDropdownDivider.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-const styles = {
-  divider: "_1o3imuej _1il9nqa1 _1doce4h9"
-};
-export const ToolbarDropdownDivider = () => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.divider])
-  });
-};

package/dist/es2019/ui/ToolbarDropdownItemSection.compiled.css

@@ -1,2 +0,0 @@
-._1e0c1txw{display:flex}
-._2lx21bp4{flex-direction:column}

package/dist/esm/ui/ToolbarDropdownDivider.compiled.css

@@ -1,3 +0,0 @@
-._1doce4h9{border-bottom-width:var(--ds-border-width,1px)}
-._1il9nqa1{border-bottom-style:solid}
-._1o3imuej{border-bottom-color:var(--ds-border,#091e4224)}

package/dist/esm/ui/ToolbarDropdownDivider.js

@@ -1,12 +0,0 @@
-/* ToolbarDropdownDivider.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./ToolbarDropdownDivider.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-var styles = {
-  divider: "_1o3imuej _1il9nqa1 _1doce4h9"
-};
-export var ToolbarDropdownDivider = function ToolbarDropdownDivider() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.divider])
-  });
-};

package/dist/esm/ui/ToolbarDropdownItemSection.compiled.css

@@ -1,2 +0,0 @@
-._1e0c1txw{display:flex}
-._2lx21bp4{flex-direction:column}

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

@@ -1 +0,0 @@
-export declare const ToolbarDropdownDivider: () => JSX.Element;

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

@@ -1 +0,0 @@
-export declare const ToolbarDropdownDivider: () => JSX.Element;

package/src/ui/ToolbarDropdownDivider.tsx

@@ -1,20 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@compiled/react';
-
-import { cssMap } from '@atlaskit/css';
-import { token } from '@atlaskit/tokens';
-
-const styles = cssMap({
-	divider: {
-		borderBottomColor: token('color.border'),
-		borderBottomStyle: 'solid',
-		borderBottomWidth: token('border.width'),
-	},
-});
-
-export const ToolbarDropdownDivider = () => {
-	return <div css={styles.divider} />;
-};