@ixfx/components 0.7.1 → 0.7.3

package/bundle/index.js

@@ -4048,6 +4048,99 @@ var ListSelectionController = class {
 	}
 };
 //#endregion
+//#region src/interaction/tree-keyboard-controller.ts
+var TreeKeyboardNavController = class {
+	constructor(host, tickled, config) {
+		this.handleKeyDown = (event) => {
+			if (this.disableKeyboardNavigation()) return;
+			const { key } = event;
+			if ([
+				`ArrowDown`,
+				`ArrowUp`,
+				`ArrowLeft`,
+				`ArrowRight`,
+				`Enter`,
+				`Escape`
+			].includes(key)) this.tickled.setInputMode(`keyboard`);
+			switch (key) {
+				case `ArrowDown`:
+					event.preventDefault();
+					this.#handleArrowDown();
+					break;
+				case `ArrowUp`:
+					event.preventDefault();
+					this.#handleArrowUp();
+					break;
+				case `ArrowRight`:
+					event.preventDefault();
+					this.#handleArrowRight();
+					break;
+				case `ArrowLeft`:
+					event.preventDefault();
+					this.#handleArrowLeft();
+					break;
+				case `Enter`:
+					event.preventDefault();
+					this.#handleEnter();
+					break;
+				case `Escape`:
+					event.preventDefault();
+					this.callbacks.onEscape?.();
+			}
+		};
+		this.host = host;
+		this.tickled = tickled;
+		this.callbacks = config.callbacks;
+		this.disableKeyboardNavigation = config.disableKeyboardNavigation ?? (() => false);
+		host.addController(this);
+	}
+	hostConnected() {}
+	hostDisconnected() {}
+	#handleArrowDown() {
+		this.tickled.handleKeyboardNavigation(`next`);
+	}
+	#handleArrowUp() {
+		this.tickled.handleKeyboardNavigation(`previous`);
+	}
+	#handleArrowRight() {
+		const currentId = this.tickled.tickledId;
+		if (!currentId) return;
+		if (this.callbacks.isLeaf(currentId)) return;
+		if (!this.callbacks.isExpanded(currentId)) {
+			this.callbacks.onExpand(currentId);
+			this.tickled.setTickled(currentId);
+		} else {
+			const items = this.callbacks.getItems();
+			const currentIdx = items.findIndex((item) => item.id === currentId);
+			if (currentIdx !== -1 && currentIdx + 1 < items.length) {
+				const nextItem = items[currentIdx + 1];
+				if (nextItem.enabled !== false) this.tickled.setTickled(nextItem.id);
+			}
+		}
+	}
+	#handleArrowLeft() {
+		const currentId = this.tickled.tickledId;
+		if (!currentId) return;
+		if (this.callbacks.isLeaf(currentId)) {
+			const parentId = this.callbacks.getParentId?.(currentId);
+			if (parentId) {
+				this.tickled.setTickled(parentId);
+				if (this.callbacks.isExpanded(parentId)) this.callbacks.onCollapse(parentId);
+			}
+		} else if (this.callbacks.isExpanded(currentId)) this.callbacks.onCollapse(currentId);
+		else {
+			const parentId = this.callbacks.getParentId?.(currentId);
+			if (parentId) this.tickled.setTickled(parentId);
+		}
+	}
+	#handleEnter() {
+		const currentId = this.tickled.tickledId;
+		if (!currentId) return;
+		this.callbacks.onActivate(currentId);
+		this.callbacks.onSelect?.(currentId);
+	}
+};
+//#endregion
 //#region src/menu/menu-container.ts
 let MenuContainer = class MenuContainer extends i {
 	constructor(..._args) {
@@ -10018,8 +10111,8 @@ let MenuCheckItem = class MenuCheckItem extends i {
     }
 
     .check {
-      width: 16px;
-      margin-right: var(--space-s);
+      width: 1em;
+      margin-left: var(--space-xs);
       font-size: var(--text-m);
       color: var(--accent);
     }
@@ -10539,8 +10632,8 @@ let MenuRadioItem = class MenuRadioItem extends i {
     }
 
     .radio {
-      width: 16px;
-      margin-right: var(--space-s);
+      width: 1em;
+      margin-left: var(--space-xs);
       font-size: var(--text-m);
       color: var(--accent);
     }
@@ -12497,6 +12590,28 @@ let DetailListElement = class DetailListElement extends i {
 			return true;
 		});
 	}
+	/**
+	* Set the column width to fit the widest visible item.
+	*
+	* This is opt-in; detail lists continue to use `--detail-list-column-width`
+	* (or its 220px fallback) until this method is called. The measured value is
+	* set directly on this element, so it takes precedence over an inherited
+	* value. Returns the applied width in pixels, or 0 when there are no items.
+	*/
+	async fitColumnWidth() {
+		await this.updateComplete;
+		const items = this._getVisibleItems();
+		if (items.length === 0) return 0;
+		const previousWidth = this.style.getPropertyValue(`--detail-list-column-width`);
+		const previousPriority = this.style.getPropertyPriority(`--detail-list-column-width`);
+		this.style.setProperty(`--detail-list-column-width`, `max-content`);
+		const width = Math.ceil(Math.max(...items.map((item) => item.getBoundingClientRect().width)));
+		if (previousWidth) this.style.setProperty(`--detail-list-column-width`, previousWidth, previousPriority);
+		else this.style.removeProperty(`--detail-list-column-width`);
+		this.style.setProperty(`--detail-list-column-width`, `${width}px`);
+		this.#scheduleGeometry();
+		return width;
+	}
 	_isCheckable(item) {
 		if (this.interactionMode !== `checked`) return true;
 		return !item.hasAttribute(`not-checked`);
@@ -12658,8 +12773,8 @@ let DetailListElement = class DetailListElement extends i {
       overflow: hidden;
       box-sizing: border-box;
       outline: none;
-      --ixfx-detail-list-item-padding:
-        var(--ixfx-detail-list-item-padding, var(--detail-list-item-padding, 0 var(--space-m, 8px)));
+      --_detail-list-item-padding:
+        var(--ixfx-detail-list-item-padding, var(--detail-list-item-padding, 0 var(--space-xs, 3px)));
     }
 
     :host(:focus-visible) {
@@ -12706,7 +12821,7 @@ let DetailListElement = class DetailListElement extends i {
       flex: none;
       width: var(--detail-list-column-width, 220px);
       height: var(--detail-list-item-height, 28px);
-      padding: var(--ixfx-detail-list-item-padding);
+      padding: var(--_detail-list-item-padding);
       cursor: pointer;
       user-select: none;
       transition: background var(--transition, 0.1s ease-out),
@@ -12972,7 +13087,9 @@ function onKeyDown(event) {
 	endDrag();
 }
 function findDropZone(drag, clientX, clientY) {
+	const sourceIsolated = drag.sourceHost.isolated;
 	for (const host of dragHosts) {
+		if (sourceIsolated && host !== drag.sourceHost) continue;
 		const zone = host.computeDropZone(clientX, clientY, drag.panelId, drag.kind);
 		if (zone !== null) return zone;
 	}
@@ -13308,11 +13425,27 @@ function insertBeside(root, targetPath, direction, newNode, side) {
 * the caller's reference stays valid. Returns true on success.
 */
 function wrapRoot(root, direction, newNode, side) {
-	replaceNodeContents(root, createSplit(direction, side === `before` ? [newNode, root] : [root, newNode]));
+	const inner = cloneNodeShallow(root);
+	replaceNodeContents(root, createSplit(direction, side === `before` ? [newNode, inner] : [inner, newNode]));
 	normalize(root);
 	return true;
 }
 /**
+* Detached copy of `node` (own arrays copied) so it can become a child of a
+* wrapper that then replaces `node` in place.
+*/
+function cloneNodeShallow(node) {
+	if (isStack(node)) return {
+		...node,
+		panels: [...node.panels]
+	};
+	return {
+		...node,
+		children: [...node.children],
+		sizes: [...node.sizes]
+	};
+}
+/**
 * Remove the stack at `stackPath` from the tree. Its panels are moved into
 * `fallbackStack` (if given and still attached) so they are not silently
 * lost; otherwise they are dropped from the model (elements return to the
@@ -16037,6 +16170,7 @@ let DockHostElement = class DockHostElement extends i {
 		super(..._args);
 		this.layout = null;
 		this.accepts = `tabs horizontal vertical`;
+		this.isolated = false;
 		this._model = createStack([]);
 		this._pool = [];
 		this._dropZone = null;
@@ -17328,6 +17462,10 @@ __decorate([property({
 	type: String,
 	attribute: `accepts`
 })], DockHostElement.prototype, "accepts", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `isolated`
+})], DockHostElement.prototype, "isolated", void 0);
 __decorate([property({ attribute: false })], DockHostElement.prototype, "canAccept", void 0);
 __decorate([state()], DockHostElement.prototype, "_model", void 0);
 __decorate([state()], DockHostElement.prototype, "_pool", void 0);
@@ -17823,6 +17961,11 @@ function WheelNudgeMixin(superClass) {
 			if (root && root.activeElement !== null) return true;
 			return false;
 		}
+		/**
+		* Apply one wheel tick. No-op by default — consumers override this to run
+		* their arrow-key step math (see {@link WheelNudgeConsumer}).
+		*/
+		_applyWheelDelta(_direction, _event) {}
 	}
 	__decorate([property({
 		type: Boolean,
@@ -36488,6 +36631,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createElementIncrSearch, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isSplit, isStack, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, readBaseColour, registerFontIcon, registerIcon, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, timelineStyles, toSnapshot, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createElementIncrSearch, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, readBaseColour, registerFontIcon, registerIcon, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map