@stll/workspace-ui 0.11.23 → 0.12.1

package/README.md

@@ -24,12 +24,12 @@ Use the explicit subpaths for focused modules:
 ```tsx
 import { ConditionBuilder } from "@stll/workspace-ui/conditions";
 import { FieldValue } from "@stll/workspace-ui/field-value";
-import { SortChips } from "@stll/workspace-ui/sorts";
-import { WorkspaceViewSwitcher } from "@stll/workspace-ui/view-switcher";
 import {
   ResponsiveActionToolbar,
   ResponsiveActionToolbarItem,
 } from "@stll/workspace-ui/responsive-action-toolbar";
+import { SortChips } from "@stll/workspace-ui/sorts";
+import { WorkspaceViewSwitcher } from "@stll/workspace-ui/view-switcher";
 ```
 
 The package also exposes a root entry for code that uses several workspace

package/dist/index.d.ts

@@ -12,7 +12,6 @@ import { SortChips, SortChipsLabels, SortChipsProps, SortDescriptor, SortablePro
 import { TableSkeletonRows } from "./table-skeleton-rows.js";
 import { CreateWorkspaceKanbanSchemaParams, KANBAN_EMPTY_GROUP_VISIBILITIES, KANBAN_SAVED_VIEW_STATE_VERSION, KanbanBoardPresentation, KanbanEmptyGroupVisibility, KanbanPresentedBand, KanbanPresentedLane, KanbanSavedAxisState, KanbanSavedGroupAxisState, KanbanSavedGroupReference, KanbanSavedSubgroupState, KanbanSavedViewState, KanbanSavedViewStateV1, ResolveWorkspaceKanbanViewParams, ResolvedWorkspaceKanbanView, WorkspaceKanbanBuiltInGroupLabel, WorkspaceKanbanGroupingChoice, WorkspaceKanbanGroupingPickerLabels, WorkspaceKanbanGroupingPickerProps, WorkspaceKanbanProperty, createWorkspaceKanbanSchema, getWorkspaceKanbanGroupingChoices, normalizeKanbanSavedViewState, presentKanbanBoard, resolveWorkspaceKanbanView } from "./kanban-view.js";
 import { WorkspaceKanbanGroupingPicker } from "./kanban-grouping-picker.js";
-import { WorkspaceViewDirection, WorkspaceViewDropPosition, reorderWorkspaceViewIds, toWorkspaceViewDropPosition } from "./view-switcher.logic.js";
 import { WorkspaceViewSwitcher, WorkspaceViewSwitcherEditing, WorkspaceViewSwitcherItem, WorkspaceViewSwitcherProps, WorkspaceViewSwitcherReorder } from "./view-switcher.js";
 import { WorkspaceFrame, WorkspaceFrameEndRail, WorkspaceFrameInspector, WorkspaceFrameNavigation, WorkspaceFrameNavigationItem, WorkspaceFrameProps, WorkspaceFrameTopBar } from "./workspace-frame.js";
-export { type ApplyCalculationSelectionParams, CONDITION_OPERATORS, type CalculationFormatters, CalculationKindPicker, type CalculationKindPickerProps, type CalculationLabels, CalculationPicker, type CalculationPickerProps, type CalculationProperty, type CalculationResult, type CalculationSelection, CalculationSummary, type CalculationSummaryProps, type ColorVariants, ColumnCalculation, ConditionBuilder, type ConditionBuilderLabels, type ConditionCapabilities, type ConditionOperator, type CreateWorkspaceKanbanSchemaParams, FIELD_CONTENT_TYPES, type FieldContent, type FieldOption, type FieldOptionChoice, FieldValue, type FieldValueType, type FormatCalculationParams, type FormattedCalculation, type FormulaCellRenderCtx, type GenericProperty, IntFieldValue, KANBAN_EMPTY_GROUP_VISIBILITIES, KANBAN_SAVED_VIEW_STATE_VERSION, type KanbanBoardPresentation, type KanbanEmptyGroupVisibility, type KanbanPresentedBand, type KanbanPresentedLane, type KanbanSavedAxisState, type KanbanSavedGroupAxisState, type KanbanSavedGroupReference, type KanbanSavedSubgroupState, type KanbanSavedViewState, type KanbanSavedViewStateV1, MoneyFieldValue, type OptionColor, PersonFieldValue, PropertyIcon, type PropertyIconType, type ResolveWorkspaceKanbanViewParams, type ResolvedWorkspaceKanbanView, SortChips, type SortChipsLabels, type SortChipsProps, type SortDescriptor, type SortableProperty, TableSkeletonRows, type UseCalculationParams, type ValueEditorKind, type ValueEditorRenderCtx, type WorkspaceCalculationLabels, type WorkspaceFieldContent, WorkspaceFrame, type WorkspaceFrameEndRail, type WorkspaceFrameInspector, type WorkspaceFrameNavigation, type WorkspaceFrameNavigationItem, type WorkspaceFrameProps, type WorkspaceFrameTopBar, type WorkspaceKanbanBuiltInGroupLabel, type WorkspaceKanbanGroupingChoice, WorkspaceKanbanGroupingPicker, type WorkspaceKanbanGroupingPickerLabels, type WorkspaceKanbanGroupingPickerProps, type WorkspaceKanbanProperty, type WorkspaceViewDirection, type WorkspaceViewDropPosition, WorkspaceViewSwitcher, type WorkspaceViewSwitcherEditing, type WorkspaceViewSwitcherItem, type WorkspaceViewSwitcherProps, type WorkspaceViewSwitcherReorder, appendChild, applyCalculationSelection, asGroup, buildLeaf, createWorkspaceKanbanSchema, emptyColor, fieldForNode, formatCalculationResult, getClipFieldValueLabel, getWorkspaceKanbanGroupingChoices, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, normalizeKanbanSavedViewState, operandsEqual, operatorsFor, optionColors, presentKanbanBoard, removeChild, reorderWorkspaceViewIds, replaceChild, resolveOptionColor, resolveWorkspaceKanbanView, sortDirectionHint, toWorkspaceViewDropPosition, useCalculation, valueEditorFor };
+export { type ApplyCalculationSelectionParams, CONDITION_OPERATORS, type CalculationFormatters, CalculationKindPicker, type CalculationKindPickerProps, type CalculationLabels, CalculationPicker, type CalculationPickerProps, type CalculationProperty, type CalculationResult, type CalculationSelection, CalculationSummary, type CalculationSummaryProps, type ColorVariants, ColumnCalculation, ConditionBuilder, type ConditionBuilderLabels, type ConditionCapabilities, type ConditionOperator, type CreateWorkspaceKanbanSchemaParams, FIELD_CONTENT_TYPES, type FieldContent, type FieldOption, type FieldOptionChoice, FieldValue, type FieldValueType, type FormatCalculationParams, type FormattedCalculation, type FormulaCellRenderCtx, type GenericProperty, IntFieldValue, KANBAN_EMPTY_GROUP_VISIBILITIES, KANBAN_SAVED_VIEW_STATE_VERSION, type KanbanBoardPresentation, type KanbanEmptyGroupVisibility, type KanbanPresentedBand, type KanbanPresentedLane, type KanbanSavedAxisState, type KanbanSavedGroupAxisState, type KanbanSavedGroupReference, type KanbanSavedSubgroupState, type KanbanSavedViewState, type KanbanSavedViewStateV1, MoneyFieldValue, type OptionColor, PersonFieldValue, PropertyIcon, type PropertyIconType, type ResolveWorkspaceKanbanViewParams, type ResolvedWorkspaceKanbanView, SortChips, type SortChipsLabels, type SortChipsProps, type SortDescriptor, type SortableProperty, TableSkeletonRows, type UseCalculationParams, type ValueEditorKind, type ValueEditorRenderCtx, type WorkspaceCalculationLabels, type WorkspaceFieldContent, WorkspaceFrame, type WorkspaceFrameEndRail, type WorkspaceFrameInspector, type WorkspaceFrameNavigation, type WorkspaceFrameNavigationItem, type WorkspaceFrameProps, type WorkspaceFrameTopBar, type WorkspaceKanbanBuiltInGroupLabel, type WorkspaceKanbanGroupingChoice, WorkspaceKanbanGroupingPicker, type WorkspaceKanbanGroupingPickerLabels, type WorkspaceKanbanGroupingPickerProps, type WorkspaceKanbanProperty, WorkspaceViewSwitcher, type WorkspaceViewSwitcherEditing, type WorkspaceViewSwitcherItem, type WorkspaceViewSwitcherProps, type WorkspaceViewSwitcherReorder, appendChild, applyCalculationSelection, asGroup, buildLeaf, createWorkspaceKanbanSchema, emptyColor, fieldForNode, formatCalculationResult, getClipFieldValueLabel, getWorkspaceKanbanGroupingChoices, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, normalizeKanbanSavedViewState, operandsEqual, operatorsFor, optionColors, presentKanbanBoard, removeChild, replaceChild, resolveOptionColor, resolveWorkspaceKanbanView, sortDirectionHint, useCalculation, valueEditorFor };

package/dist/index.js

@@ -12,7 +12,6 @@ import { TableSkeletonRows } from "./table-skeleton-rows.js";
 import { FIELD_CONTENT_TYPES } from "./types.js";
 import { KANBAN_EMPTY_GROUP_VISIBILITIES, KANBAN_SAVED_VIEW_STATE_VERSION, createWorkspaceKanbanSchema, getWorkspaceKanbanGroupingChoices, normalizeKanbanSavedViewState, presentKanbanBoard, resolveWorkspaceKanbanView } from "./kanban-view.js";
 import { WorkspaceKanbanGroupingPicker } from "./kanban-grouping-picker.js";
-import { reorderWorkspaceViewIds, toWorkspaceViewDropPosition } from "./view-switcher.logic.js";
 import { WorkspaceViewSwitcher } from "./view-switcher.js";
 import { WorkspaceFrame } from "./workspace-frame.js";
-export { CONDITION_OPERATORS, CalculationKindPicker, CalculationPicker, CalculationSummary, ColumnCalculation, ConditionBuilder, FIELD_CONTENT_TYPES, FieldValue, IntFieldValue, KANBAN_EMPTY_GROUP_VISIBILITIES, KANBAN_SAVED_VIEW_STATE_VERSION, MoneyFieldValue, PersonFieldValue, PropertyIcon, SortChips, TableSkeletonRows, WorkspaceFrame, WorkspaceKanbanGroupingPicker, WorkspaceViewSwitcher, appendChild, applyCalculationSelection, asGroup, buildLeaf, createWorkspaceKanbanSchema, emptyColor, fieldForNode, formatCalculationResult, getClipFieldValueLabel, getWorkspaceKanbanGroupingChoices, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, normalizeKanbanSavedViewState, operandsEqual, operatorsFor, optionColors, presentKanbanBoard, removeChild, reorderWorkspaceViewIds, replaceChild, resolveOptionColor, resolveWorkspaceKanbanView, sortDirectionHint, toWorkspaceViewDropPosition, useCalculation, valueEditorFor };
+export { CONDITION_OPERATORS, CalculationKindPicker, CalculationPicker, CalculationSummary, ColumnCalculation, ConditionBuilder, FIELD_CONTENT_TYPES, FieldValue, IntFieldValue, KANBAN_EMPTY_GROUP_VISIBILITIES, KANBAN_SAVED_VIEW_STATE_VERSION, MoneyFieldValue, PersonFieldValue, PropertyIcon, SortChips, TableSkeletonRows, WorkspaceFrame, WorkspaceKanbanGroupingPicker, WorkspaceViewSwitcher, appendChild, applyCalculationSelection, asGroup, buildLeaf, createWorkspaceKanbanSchema, emptyColor, fieldForNode, formatCalculationResult, getClipFieldValueLabel, getWorkspaceKanbanGroupingChoices, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, normalizeKanbanSavedViewState, operandsEqual, operatorsFor, optionColors, presentKanbanBoard, removeChild, replaceChild, resolveOptionColor, resolveWorkspaceKanbanView, sortDirectionHint, useCalculation, valueEditorFor };

package/dist/view-switcher.d.ts

@@ -1,4 +1,4 @@
-import { WorkspaceViewDirection } from "./view-switcher.logic.js";
+import { InlineDirection } from "@stll/ui/inline-reorder";
 //#region src/view-switcher.d.ts
 export type WorkspaceViewSwitcherItem = {
   id: string;
@@ -17,7 +17,7 @@ export type WorkspaceViewSwitcherReorder<View> = {
 export type WorkspaceViewSwitcherProps<View extends WorkspaceViewSwitcherItem> = {
   activeViewId: string;
   ariaLabel: string;
-  direction: WorkspaceViewDirection;
+  direction: InlineDirection;
   reorder: WorkspaceViewSwitcherReorder<View> | null;
   views: readonly View[];
   addControl?: React.ReactNode;

package/dist/view-switcher.js

@@ -1,14 +1,16 @@
 "use client";
-import { reorderWorkspaceViewIds, toWorkspaceViewDropPosition } from "./view-switcher.logic.js";
 import { Button } from "@stll/ui/button";
 import { EllipsisVerticalIcon } from "@stll/ui/icons";
 import { Menu, MenuPopup, MenuTrigger } from "@stll/ui/menu";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@stll/ui/utils";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge/attach-closest-edge";
+import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge/extract-closest-edge";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/utils/combine";
+import { InlineDropIndicator } from "@stll/ui/inline-drop-indicator";
+import { reorderInlineIds, toInlineDropPosition } from "@stll/ui/inline-reorder";
 import { TOOLBAR_ROW_HEIGHT } from "@stll/ui/inspector";
 import { Tabs, TabsList, TabsTab } from "@stll/ui/tabs";
 //#region src/view-switcher.tsx
@@ -64,7 +66,7 @@ const WorkspaceViewSwitcher = ({ activeViewId, ariaLabel, direction, reorder, vi
 		stripContainer
 	]);
 	const handleReorder = (draggedId, targetId, position) => {
-		const reordered = reorderWorkspaceViewIds({
+		const reordered = reorderInlineIds({
 			ids: views.map((view) => view.id),
 			draggedId,
 			targetId,
@@ -151,12 +153,12 @@ const WorkspaceViewTab = ({ actions, canReorder, direction, getDragData, getDrop
 				allowedEdges: ["left", "right"]
 			}),
 			getIsSticky: () => true,
-			onDrag: ({ self }) => setDropPosition(toWorkspaceViewDropPosition(extractClosestEdge(self.data), direction)),
+			onDrag: ({ self }) => setDropPosition(toInlineDropPosition(extractClosestEdge(self.data), direction)),
 			onDragLeave: () => setDropPosition(null),
 			onDrop: ({ source, self }) => {
 				setDropPosition(null);
 				const draggedId = source.data[VIEW_DRAG_ID];
-				const position = toWorkspaceViewDropPosition(extractClosestEdge(self.data), direction);
+				const position = toInlineDropPosition(extractClosestEdge(self.data), direction);
 				if (typeof draggedId === "string" && position) reorder(draggedId, view.id, position);
 			}
 		}));
@@ -175,10 +177,7 @@ const WorkspaceViewTab = ({ actions, canReorder, direction, getDragData, getDrop
 		className: "relative flex h-full items-center",
 		ref: setTabContainer,
 		children: [
-			dropPosition !== null && /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				className: cn("bg-primary pointer-events-none absolute inset-y-1 z-20 w-0.5 rounded-full", dropPosition === "before" ? "start-0" : "end-0")
-			}),
+			/* @__PURE__ */ jsx(InlineDropIndicator, { position: dropPosition }),
 			/* @__PURE__ */ jsxs(TabsTab, {
 				className: cn("h-full pt-2 sm:h-full", reserveActionSpace ? "pe-6.5" : void 0),
 				onContextMenu: (event) => onContextMenu?.(view, event),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/workspace-ui",
-  "version": "0.11.23",
+  "version": "0.12.1",
   "description": "Reusable workspace presentation components and view helpers for Stella.",
   "keywords": [
     "calculations",
@@ -94,10 +94,6 @@
     "./workspace-frame": {
       "types": "./dist/workspace-frame.d.ts",
       "import": "./dist/workspace-frame.js"
-    },
-    "./view-switcher-logic": {
-      "types": "./dist/view-switcher.logic.d.ts",
-      "import": "./dist/view-switcher.logic.js"
     }
   },
   "publishConfig": {
@@ -108,7 +104,7 @@
     "build": "tsdown",
     "pack:dry-run": "bun pm pack --dry-run",
     "test": "bun test src",
-    "typecheck": "bun ../../packages/scripts/src/tsc-native.ts --noEmit",
+    "typecheck": "bun check --no-pretty --all --project=tsconfig.json",
     "lint": "cd ../.. && bun --bun oxlint -c oxlint.config.ts --report-unused-disable-directives-severity=error --type-aware --type-check packages/workspace-ui",
     "lint:fix": "cd ../.. && bun --bun oxlint -c oxlint.config.ts --type-aware --fix packages/workspace-ui",
     "format": "bun ../../scripts/run-oxfmt.ts .",
@@ -119,30 +115,30 @@
     "@stll/calculations": "^0.1.2",
     "@stll/conditions": "^0.4.0",
     "@stll/money": "^0.3.1",
-    "@stll/ui": "^0.43.0",
+    "@stll/ui": "^0.45.0",
     "better-result": "3.0.1",
     "temporal-polyfill": "1.0.5",
     "use-intl": "4.14.8"
   },
   "devDependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.2.2",
+    "@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^3.0.0",
     "@base-ui/react": "1.8.0",
     "@stll/property-testing": "0.0.0",
     "@stll/typescript-config": "0.0.0",
-    "@tanstack/react-table": "9.2.4",
+    "@tanstack/react-table": "9.2.6",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.7",
-    "bun-types": "1.4.2",
+    "bun-types": "1.4.3",
     "fast-check": "^4.10.2",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "tailwindcss": "4.3.3",
     "tsdown": "0.23.0"
   },
   "peerDependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.2.2",
+    "@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^3.0.0",
     "@base-ui/react": "^1.7.0",
     "@tanstack/react-table": "^9.1.2",
     "@types/react": ">=19",

package/dist/view-switcher.logic.d.ts

@@ -1,13 +0,0 @@
-import { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/types";
-//#region src/view-switcher.logic.d.ts
-export type WorkspaceViewDirection = "ltr" | "rtl";
-export type WorkspaceViewDropPosition = "before" | "after";
-export declare const toWorkspaceViewDropPosition: (edge: Edge | null, direction: WorkspaceViewDirection) => WorkspaceViewDropPosition | null;
-type ReorderWorkspaceViewIdsParams = {
-  ids: readonly string[];
-  draggedId: string;
-  targetId: string;
-  position: WorkspaceViewDropPosition;
-};
-export declare const reorderWorkspaceViewIds: ({ ids, draggedId, targetId, position }: ReorderWorkspaceViewIdsParams) => string[] | null;
-//#endregion

package/dist/view-switcher.logic.js

@@ -1,14 +0,0 @@
-//#region src/view-switcher.logic.ts
-const toWorkspaceViewDropPosition = (edge, direction) => {
-	if (edge !== "left" && edge !== "right") return null;
-	return (direction === "rtl" ? edge === "left" : edge === "right") ? "after" : "before";
-};
-const reorderWorkspaceViewIds = ({ ids, draggedId, targetId, position }) => {
-	if (draggedId === targetId || !ids.includes(draggedId) || !ids.includes(targetId)) return null;
-	const withoutDragged = ids.filter((id) => id !== draggedId);
-	const targetIndex = withoutDragged.indexOf(targetId);
-	const reordered = withoutDragged.toSpliced(position === "after" ? targetIndex + 1 : targetIndex, 0, draggedId);
-	return reordered.every((id, index) => id === ids[index]) ? null : reordered;
-};
-//#endregion
-export { reorderWorkspaceViewIds, toWorkspaceViewDropPosition };