@atlaskit/editor-toolbar 0.3.0 → 0.3.1

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,27 +1,39 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { type ReactNode, useCallback } from 'react';
 
+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;
-	isOpen?: boolean;
-	onOpenChange?: (args: OnOpenChangeArgs) => void;
+	/**
+	 * Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
+	 */
+	hasSectionMargin?: boolean;
 };
 
 const ToolbarDropdownMenuContent = ({
 	iconBefore,
-	groupLocation,
 	children,
 	isDisabled,
 	testId,
@@ -30,12 +42,15 @@ const ToolbarDropdownMenuContent = ({
 	const { onDropdownOpenChanged } = useToolbarUI();
 	const { closeMenu, isOpen, openMenu } = useToolbarDropdownMenu();
 
-	const handleOpenChange = useCallback((args: OnOpenChangeArgs) => {
-		onDropdownOpenChanged(args);
-		if (!args.isOpen) {
-			closeMenu();
-		}
-	}, [closeMenu, onDropdownOpenChanged]);
+	const handleOpenChange = useCallback(
+		(args: OnOpenChangeArgs) => {
+			onDropdownOpenChanged(args);
+			if (!args.isOpen) {
+				closeMenu();
+			}
+		},
+		[closeMenu, onDropdownOpenChanged],
+	);
 
 	const handleClick = useCallback(() => {
 		if (!isOpen) {
@@ -62,7 +77,6 @@ const ToolbarDropdownMenuContent = ({
 					onFocus={triggerProps.onFocus}
 					testId={testId}
 					iconBefore={iconBefore}
-					groupLocation={groupLocation}
 					isDisabled={isDisabled}
 					label={label}
 				/>
@@ -77,22 +91,21 @@ const ToolbarDropdownMenuContent = ({
 
 export const ToolbarDropdownMenu = ({
 	iconBefore,
-	groupLocation,
 	children,
 	isDisabled,
 	testId,
 	label,
+	hasSectionMargin = true,
 }: ToolbarDropdownMenuProps) => {
 	return (
 		<ToolbarDropdownMenuProvider>
 			<ToolbarDropdownMenuContent
 				iconBefore={iconBefore}
-				groupLocation={groupLocation}
 				isDisabled={isDisabled}
 				testId={testId}
 				label={label}
 			>
-				{children}
+				<div css={hasSectionMargin && styles.sectionMargin}>{children}</div>
 			</ToolbarDropdownMenuContent>
 		</ToolbarDropdownMenuProvider>
 	);

package/src/ui/ToolbarDropdownMenuContext.tsx

@@ -6,7 +6,9 @@ interface ToolbarDropdownMenuContextValue {
 	isOpen: boolean;
 }
 
-const ToolbarDropdownMenuContext = createContext<ToolbarDropdownMenuContextValue | undefined>(undefined);
+const ToolbarDropdownMenuContext = createContext<ToolbarDropdownMenuContextValue | undefined>(
+	undefined,
+);
 
 export const useToolbarDropdownMenu = () => {
 	const context = useContext(ToolbarDropdownMenuContext);
@@ -20,9 +22,7 @@ interface ToolbarDropdownMenuProviderProps {
 	children: React.ReactNode;
 }
 
-export const ToolbarDropdownMenuProvider = ({
-	children,
-}: ToolbarDropdownMenuProviderProps) => {
+export const ToolbarDropdownMenuProvider = ({ children }: ToolbarDropdownMenuProviderProps) => {
 	const [isOpen, setIsOpen] = useState(false);
 
 	const openMenu = () => setIsOpen(true);

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} />;
-};