@olenbetong/appframe-ds 1.8.0 → 1.9.0

package/src/sortable/DropIndicator.css

@@ -1,51 +1,51 @@
-:root {
-	--ob-drop-indicator-thickness: 0.125rem;
-	--ob-drop-indicator-color: #3f3fa3;
-	--ob-drop-indicator-terminal-size: 0.75rem;
-}
-
-.ObDropIndicator-root {
-	position: absolute;
-	z-index: 10;
-
-	display: flex;
-	align-items: center;
-
-	pointer-events: none;
-
-	&::before {
-		content: "";
-
-		border: var(--ob-drop-indicator-thickness) solid var(--ob-drop-indicator-color);
-		border-radius: 50%;
-
-		width: var(--ob-drop-indicator-terminal-size);
-		height: var(--ob-drop-indicator-terminal-size);
-	}
-
-	&::after {
-		content: "";
-
-		height: var(--ob-drop-indicator-thickness);
-		flex-grow: 1;
-		background-color: var(--ob-drop-indicator-color);
-	}
-
-	&.ObDropIndicator-top,
-	&.ObDropIndicator-bottom {
-		height: var(--ob-drop-indicator-thickness);
-
-		left: calc(-1 * var(--ob-drop-indicator-terminal-size) / 2);
-		width: calc(100% + var(--ob-drop-indicator-terminal-size) / 2);
-	}
-
-	&.ObDropIndicator-top {
-		top: var(--ob-drop-indicator-gap, 0rem);
-		transform: translateY(calc(var(--ob-drop-indicator-thickness) / -2));
-	}
-
-	&.ObDropIndicator-bottom {
-		bottom: var(--ob-drop-indicator-gap, 0rem);
-		transform: translateY(calc(var(--ob-drop-indicator-thickness) / 2));
-	}
-}
+:root {
+	--ob-drop-indicator-thickness: 0.125rem;
+	--ob-drop-indicator-color: #3f3fa3;
+	--ob-drop-indicator-terminal-size: 0.75rem;
+}
+
+.ObDropIndicator-root {
+	position: absolute;
+	z-index: 10;
+
+	display: flex;
+	align-items: center;
+
+	pointer-events: none;
+
+	&::before {
+		content: "";
+
+		border: var(--ob-drop-indicator-thickness) solid var(--ob-drop-indicator-color);
+		border-radius: 50%;
+
+		width: var(--ob-drop-indicator-terminal-size);
+		height: var(--ob-drop-indicator-terminal-size);
+	}
+
+	&::after {
+		content: "";
+
+		height: var(--ob-drop-indicator-thickness);
+		flex-grow: 1;
+		background-color: var(--ob-drop-indicator-color);
+	}
+
+	&.ObDropIndicator-top,
+	&.ObDropIndicator-bottom {
+		height: var(--ob-drop-indicator-thickness);
+
+		left: calc(-1 * var(--ob-drop-indicator-terminal-size) / 2);
+		width: calc(100% + var(--ob-drop-indicator-terminal-size) / 2);
+	}
+
+	&.ObDropIndicator-top {
+		top: var(--ob-drop-indicator-gap, 0rem);
+		transform: translateY(calc(var(--ob-drop-indicator-thickness) / -2));
+	}
+
+	&.ObDropIndicator-bottom {
+		bottom: var(--ob-drop-indicator-gap, 0rem);
+		transform: translateY(calc(var(--ob-drop-indicator-thickness) / 2));
+	}
+}

package/src/sortable/DropIndicator.tsx

@@ -1,27 +1,27 @@
-import "./DropIndicator.css";
-
-import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/types";
-import clsx from "clsx";
-import type { CSSProperties } from "react";
-
-export type DropIndicatorProps = {
-	/** Which edge of the item the dragged item will be dropped on */
-	edge: Edge;
-	/** Distance from the edge, e.g. to account for a gap between items */
-	gap?: string;
-	className?: string;
-};
-
-/**
- * Line rendered on the edge of a list item to show where a dragged item will
- * be placed. Must be rendered inside a positioned (`position: relative`)
- * element, normally the list item itself.
- */
-export function DropIndicator({ edge, gap, className }: DropIndicatorProps) {
-	return (
-		<div
-			className={clsx("ObDropIndicator-root", `ObDropIndicator-${edge}`, className)}
-			style={{ "--ob-drop-indicator-gap": gap ?? "0rem" } as CSSProperties}
-		/>
-	);
-}
+import "./DropIndicator.css";
+
+import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/types";
+import clsx from "clsx";
+import type { CSSProperties } from "react";
+
+export type DropIndicatorProps = {
+	/** Which edge of the item the dragged item will be dropped on */
+	edge: Edge;
+	/** Distance from the edge, e.g. to account for a gap between items */
+	gap?: string;
+	className?: string;
+};
+
+/**
+ * Line rendered on the edge of a list item to show where a dragged item will
+ * be placed. Must be rendered inside a positioned (`position: relative`)
+ * element, normally the list item itself.
+ */
+export function DropIndicator({ edge, gap, className }: DropIndicatorProps) {
+	return (
+		<div
+			className={clsx("ObDropIndicator-root", `ObDropIndicator-${edge}`, className)}
+			style={{ "--ob-drop-indicator-gap": gap ?? "0rem" } as CSSProperties}
+		/>
+	);
+}

package/src/sortable/SortableItemList.css

@@ -1,21 +1,21 @@
-.ObSortableItemList-item {
-	position: relative;
-
-	&.ObSortableItemList-dragging {
-		outline: 3px dashed;
-		outline-offset: -3px;
-	}
-}
-
-.ObSortableItemList-handle {
-	cursor: grab;
-	flex-shrink: 0;
-}
-
-.ObSortableItemList-handle:active {
-	cursor: grabbing;
-}
-
-.ObSortableItemList-empty {
-	color: var(--ds-color-neutral-text-subtle, #666);
-}
+.ObSortableItemList-item {
+	position: relative;
+
+	&.ObSortableItemList-dragging {
+		outline: 3px dashed;
+		outline-offset: -3px;
+	}
+}
+
+.ObSortableItemList-handle {
+	cursor: grab;
+	flex-shrink: 0;
+}
+
+.ObSortableItemList-handle:active {
+	cursor: grabbing;
+}
+
+.ObSortableItemList-empty {
+	color: var(--ds-color-neutral-text-subtle, #666);
+}