Synchronise latest changes

Author: Atlassian

packages/documentation/package.json

@@ -34,7 +34,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
     "@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^2.0.0",
-    "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.1.0",
     "@atlaskit/primitives": "^14.4.0",
     "@atlaskit/theme": "^18.0.0",
     "@atlaskit/tokens": "^4.7.0",

packages/react-drop-indicator/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/pragmatic-drag-and-drop-react-indicator
 
+## 3.1.0
+
+### Minor Changes
+
+- [#140214](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140214)
+  [`6903fb239a6ac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6903fb239a6ac) -
+  Exposing a `<Border>` drop indicator component. Currently `Border` is not documented while we
+  validate with internal usage.
+
 ## 3.0.2
 
 ### Patch Changes

packages/react-drop-indicator/examples/outline.tsx

@@ -12,7 +12,7 @@ import Heading from '@atlaskit/heading';
 import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 
-import Outline from '../src/internal/outline';
+import Border from '../src/internal/border';
 import { presetStrokeColors } from '../src/presets';
 
 const targetStyles = css({
@@ -47,7 +47,7 @@ function Target(options: Partial<Options>) {
 		// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
 		<div css={targetStyles} style={{ '--border-radius': borderRadius } as CSSProperties}>
 			Target
-			<Outline strokeColor={strokeColor} borderRadius={borderRadius} indent={indent} />
+			<Border strokeColor={strokeColor} borderRadius={borderRadius} indent={indent} />
 		</div>
 	);
 }

packages/react-drop-indicator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "An optional Pragmatic drag and drop package containing react components that provide a visual indication about what the user will achieve when the drop (eg lines)",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,6 +34,7 @@
   },
   "exports": {
     ".": "./src/index.ts",
+    "./border": "./src/border.tsx",
     "./box": "./src/box.tsx",
     "./types": "./src/types.ts",
     "./tree-item": "./src/tree-item.tsx"

packages/react-drop-indicator/src/border.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import type { Appearance, CSSSize } from './internal-types';
+import { Border } from './internal/border';
+import { presetStrokeColors } from './presets';
+
+export function DropIndicator({
+	appearance = 'default',
+	indent,
+}: {
+	appearance?: Appearance;
+	indent?: CSSSize;
+}) {
+	return <Border strokeColor={presetStrokeColors[appearance]} indent={indent} />;
+}
+
+// For React.lazy
+export default DropIndicator;

packages/react-drop-indicator/src/internal/outline.tsx renamed to packages/react-drop-indicator/src/internal/border.tsx

@@ -26,8 +26,7 @@ const styles = css({
 	borderRadius: 'var(--border-radius)',
 });
 
-// TODO: use `outline` or `border`?
-export function Outline({
+export function Border({
 	strokeColor = presetStrokeColors.default,
 	strokeWidth = presetStrokeWidth,
 	borderRadius = '3px', // TODO: update to border.radius (4px) token
@@ -55,4 +54,4 @@ export function Outline({
 }
 
 // For React.lazy
-export default Outline;
+export default Border;

packages/react-drop-indicator/src/tree-item.tsx

@@ -2,9 +2,8 @@ import React, { type ReactElement } from 'react';
 
 import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 
-import { Line } from './internal/line';
-import { Outline } from './internal/outline';
-import { presetStrokeColors } from './presets';
+import { DropIndicator as Border } from './border';
+import { DropIndicator as Line } from './box';
 
 export type DropIndicatorProps = {
 	instruction: Instruction;
@@ -18,22 +17,22 @@ function getElement({
 	isBlocked: boolean;
 }): ReactElement | null {
 	const indent = `${instruction.currentLevel * instruction.indentPerLevel}px`;
-	const strokeColor = presetStrokeColors[!isBlocked ? 'default' : 'warning'];
+	const appearance = isBlocked ? 'warning' : 'default';
 
 	if (instruction.type === 'reorder-above') {
-		return <Line edge="top" strokeColor={strokeColor} indent={indent} />;
+		return <Line edge="top" appearance={appearance} indent={indent} />;
 	}
 	if (instruction.type === 'reorder-below') {
-		return <Line edge="bottom" strokeColor={strokeColor} indent={indent} />;
+		return <Line edge="bottom" appearance={appearance} indent={indent} />;
 	}
 
 	if (instruction.type === 'make-child') {
-		return <Outline strokeColor={strokeColor} indent={indent} />;
+		return <Border appearance={appearance} indent={indent} />;
 	}
 
 	if (instruction.type === 'reparent') {
 		const reparentIndent = `${instruction.desiredLevel * instruction.indentPerLevel}px`;
-		return <Line edge="bottom" strokeColor={strokeColor} indent={reparentIndent} />;
+		return <Line edge="bottom" appearance={appearance} indent={reparentIndent} />;
 	}
 
 	return null;