@cube-dev/ui-kit 0.114.0 → 0.116.0

package/dist/components/layout/ResizablePanel.js

@@ -0,0 +1,278 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { tasty } from "../../tasty/tasty.js";
+import { mergeProps as mergeProps$1 } from "../../utils/react/mergeProps.js";
+import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
+import { useEvent } from "../../_internal/hooks/use-event.js";
+import { useDebouncedValue } from "../../_internal/hooks/use-debounced-value.js";
+import { _Panel } from "./Panel.js";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useHover, useMove } from "react-aria";
+import { useResizeObserver } from "@react-aria/utils";
+
+//#region src/components/layout/ResizablePanel.tsx
+const HandlerElement = tasty({
+	qa: "ResizeHandler",
+	styles: {
+		width: {
+			"": "initial",
+			horizontal: "9px",
+			"disabled & horizontal": "1bw"
+		},
+		height: {
+			"": "9px",
+			horizontal: "initial",
+			"disabled & !horizontal": "1bw"
+		},
+		top: {
+			"": 0,
+			"[data-direction=\"top\"]": "initial"
+		},
+		bottom: {
+			"": 0,
+			"[data-direction=\"bottom\"]": "initial"
+		},
+		right: {
+			"": 0,
+			"[data-direction=\"right\"]": "initial"
+		},
+		left: {
+			"": 0,
+			"[data-direction=\"left\"]": "initial"
+		},
+		transform: {
+			"[data-direction=\"top\"]": "translate(0, ($size-compensation - $visual-size))",
+			"[data-direction=\"right\"]": "translate(($visual-size - $size-compensation), 0)",
+			"[data-direction=\"bottom\"]": "translate(0, ($visual-size - $size-compensation))",
+			"[data-direction=\"left\"]": "translate(($size-compensation - $visual-size), 0)"
+		},
+		position: "absolute",
+		zIndex: 1,
+		cursor: {
+			"": "row-resize",
+			horizontal: "col-resize",
+			disabled: "not-allowed"
+		},
+		padding: 0,
+		boxSizing: "border-box",
+		transition: "theme",
+		"--size-compensation": {
+			"": "6px",
+			disabled: "1bw"
+		},
+		Track: {
+			width: {
+				"": "initial",
+				horizontal: "3px",
+				"disabled & horizontal": "1px"
+			},
+			height: {
+				"": "3px",
+				horizontal: "initial",
+				"disabled & !horizontal": "1px"
+			},
+			position: "absolute",
+			inset: {
+				"": "3px 0",
+				horizontal: "0 3px",
+				disabled: "0 0"
+			},
+			fill: {
+				"": "#border",
+				"(hovered | drag) & !disabled": "#purple-03"
+			},
+			transition: "theme",
+			outline: {
+				"": "1bw #primary-text.0",
+				drag: "1bw #primary-text"
+			},
+			outlineOffset: 1
+		},
+		Drag: {
+			display: "grid",
+			gap: "2bw",
+			flow: {
+				"": "row",
+				horizontal: "column"
+			},
+			gridColumns: {
+				"": "3px 3px 3px 3px 3px",
+				horizontal: "auto"
+			},
+			gridRows: {
+				"": "auto",
+				horizontal: "3px 3px 3px 3px 3px"
+			},
+			width: {
+				"": "auto",
+				horizontal: "1px"
+			},
+			height: {
+				"": "1px",
+				horizontal: "auto"
+			},
+			inset: {
+				"": "4px 50% auto auto",
+				horizontal: "50% 4px auto auto"
+			},
+			transform: {
+				"": "translate(-50%, 0)",
+				horizontal: "translate(0, -50%)"
+			},
+			position: "absolute",
+			transition: "theme"
+		},
+		DragPart: {
+			radius: true,
+			fill: {
+				"": "#dark-03",
+				"hovered | drag": "#dark-02",
+				disabled: "#dark-04"
+			}
+		}
+	}
+});
+const Handler = (props) => {
+	const { direction = "right", isDisabled, ...otherProps } = props;
+	const { hoverProps, isHovered } = useHover({});
+	const isHorizontal = direction === "left" || direction === "right";
+	return /* @__PURE__ */ jsxs(HandlerElement, {
+		...mergeProps$1(hoverProps, {
+			mods: {
+				hovered: useDebouncedValue(isHovered, 150),
+				horizontal: isHorizontal,
+				disabled: isDisabled
+			},
+			"data-direction": direction
+		}, otherProps),
+		children: [/* @__PURE__ */ jsx("div", { "data-element": "Track" }), !isDisabled ? /* @__PURE__ */ jsxs("div", {
+			"data-element": "Drag",
+			children: [
+				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
+				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
+				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
+				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" }),
+				/* @__PURE__ */ jsx("div", { "data-element": "DragPart" })
+			]
+		}) : null]
+	});
+};
+const StyledPanel = tasty(_Panel, { styles: {
+	flexGrow: 0,
+	width: {
+		"": "$min-size $size $max-size",
+		"[data-direction=\"top\"] | [data-direction=\"bottom\"]": "initial"
+	},
+	height: {
+		"": "$min-size $size $max-size",
+		"[data-direction=\"left\"] | [data-direction=\"right\"]": "initial"
+	},
+	placeSelf: "stretch",
+	touchAction: "none",
+	"$indent-compensation": {
+		"": "3px",
+		disabled: "1bw"
+	}
+} });
+function ResizablePanel(props, ref) {
+	const timerRef = useRef(null);
+	const isControllable = typeof props.size === "number";
+	const { isDisabled, direction = "right", size: providedSize, onSizeChange, minSize = 200, maxSize = isControllable ? void 0 : "min(50%, 400px)", ...restProps } = props;
+	const [isDragging, setIsDragging] = useState(false);
+	const isHorizontal = direction === "left" || direction === "right";
+	ref = useCombinedRefs(ref);
+	const onResize = useEvent(() => {
+		if (ref?.current) {
+			const offsetProp = isHorizontal ? "offsetWidth" : "offsetHeight";
+			const containerSize = ref.current[offsetProp];
+			if (Math.abs(containerSize - size) < 1 && !isDisabled) setVisualSize(size);
+			else setVisualSize(containerSize);
+		}
+	});
+	useResizeObserver({
+		ref,
+		onResize
+	});
+	function clamp(size) {
+		if (typeof maxSize === "number") size = Math.min(maxSize, size);
+		if (typeof minSize === "number" || !minSize) size = Math.max(minSize || 0, size);
+		return Math.max(size, 0);
+	}
+	let [size, setSize] = useState(providedSize != null ? clamp(providedSize) : 200);
+	let [visualSize, setVisualSize] = useState(null);
+	let { moveProps } = useMove({
+		onMoveStart(e) {
+			if (isDisabled) return;
+			setIsDragging(true);
+			const offsetProp = isHorizontal ? "offsetWidth" : "offsetHeight";
+			if (ref.current && Math.abs(ref.current[offsetProp] - size) >= 1) setSize(Math.round(ref.current[offsetProp]));
+		},
+		onMove(e) {
+			setSize((size) => {
+				if (isDisabled) return size;
+				if (e.pointerType === "keyboard") return size;
+				size += isHorizontal ? e.deltaX * (direction === "right" ? 1 : -1) : e.deltaY * (direction === "bottom" ? 1 : -1);
+				return size;
+			});
+		},
+		onMoveEnd(e) {
+			setIsDragging(false);
+			setSize((size) => clamp(Math.round(size)));
+		}
+	});
+	const notifyChange = useEvent(() => {
+		setSize((size) => {
+			if (providedSize && Math.abs(providedSize - size) > .5) return providedSize;
+			return size;
+		});
+	});
+	useEffect(() => {
+		onResize();
+	}, [size, isDisabled]);
+	useEffect(() => {
+		if (!isDragging && visualSize != null && (providedSize == null || Math.abs(providedSize - visualSize) > .5)) onSizeChange?.(Math.round(visualSize));
+	}, [visualSize, isDragging]);
+	useEffect(() => {
+		timerRef.current = setTimeout(notifyChange, 500);
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, [providedSize]);
+	const mods = useMemo(() => {
+		return {
+			drag: isDragging,
+			horizontal: isHorizontal,
+			disabled: isDisabled
+		};
+	}, [
+		isDragging,
+		isHorizontal,
+		isDisabled
+	]);
+	return /* @__PURE__ */ jsx(StyledPanel, {
+		ref,
+		"data-direction": direction,
+		mods,
+		extra: /* @__PURE__ */ jsx(Handler, {
+			isDisabled: isDisabled || visualSize == null,
+			direction,
+			...moveProps,
+			mods
+		}),
+		...mergeProps$1(restProps, {
+			style: {
+				"--size": `${size}px`,
+				"--visual-size": `${visualSize}px`,
+				"--min-size": typeof minSize === "number" ? `${minSize}px` : minSize,
+				"--max-size": typeof maxSize === "number" ? `${maxSize}px` : maxSize
+			},
+			innerStyles: { margin: `$indent-compensation ${direction}` }
+		})
+	});
+}
+const _ResizablePanel = forwardRef(ResizablePanel);
+_ResizablePanel.displayName = "ResizablePanel";
+
+//#endregion
+export { _ResizablePanel };
+//# sourceMappingURL=ResizablePanel.js.map

package/dist/components/layout/ResizablePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizablePanel.js","names":["mergeProps","Panel"],"sources":["../../../src/components/layout/ResizablePanel.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport {\n  ForwardedRef,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useHover, useMove } from 'react-aria';\n\nimport { useDebouncedValue, useEvent } from '../../_internal/hooks';\nimport { BasePropsWithoutChildren, Styles, tasty } from '../../tasty/index';\nimport { mergeProps, useCombinedRefs } from '../../utils/react';\n\nimport { CubePanelProps, Panel } from './Panel';\n\ntype Direction = 'top' | 'right' | 'bottom' | 'left';\n\nexport interface CubeResizablePanelProps extends CubePanelProps {\n  handlerStyles?: Styles;\n  direction: Direction;\n  size?: number;\n  onSizeChange?: (size: number) => void;\n  minSize?: string | number;\n  maxSize?: string | number;\n  isDisabled?: boolean;\n}\n\nconst HandlerElement = tasty({\n  qa: 'ResizeHandler',\n  styles: {\n    // The real size is slightly bigger than the visual one.\n    width: {\n      '': 'initial',\n      horizontal: '9px',\n      'disabled & horizontal': '1bw',\n    },\n    height: {\n      '': '9px',\n      horizontal: 'initial',\n      'disabled & !horizontal': '1bw',\n    },\n    top: {\n      '': 0,\n      '[data-direction=\"top\"]': 'initial',\n    },\n    bottom: {\n      '': 0,\n      '[data-direction=\"bottom\"]': 'initial',\n    },\n    right: {\n      '': 0,\n      '[data-direction=\"right\"]': 'initial',\n    },\n    left: {\n      '': 0,\n      '[data-direction=\"left\"]': 'initial',\n    },\n    // Transform requires a separate visual size property to respect size boundaries\n    transform: {\n      '[data-direction=\"top\"]':\n        'translate(0, ($size-compensation - $visual-size))',\n      '[data-direction=\"right\"]':\n        'translate(($visual-size - $size-compensation), 0)',\n      '[data-direction=\"bottom\"]':\n        'translate(0, ($visual-size - $size-compensation))',\n      '[data-direction=\"left\"]':\n        'translate(($size-compensation - $visual-size), 0)',\n    },\n    position: 'absolute',\n    zIndex: 1,\n    cursor: {\n      '': 'row-resize',\n      horizontal: 'col-resize',\n      disabled: 'not-allowed',\n    },\n    padding: 0,\n    boxSizing: 'border-box',\n    transition: 'theme',\n    '--size-compensation': {\n      '': '6px',\n      disabled: '1bw',\n    },\n\n    Track: {\n      width: {\n        '': 'initial',\n        horizontal: '3px',\n        'disabled & horizontal': '1px',\n      },\n      height: {\n        '': '3px',\n        horizontal: 'initial',\n        'disabled & !horizontal': '1px',\n      },\n      position: 'absolute',\n      inset: {\n        '': '3px 0',\n        horizontal: '0 3px',\n        disabled: '0 0',\n      },\n      fill: {\n        '': '#border',\n        '(hovered | drag) & !disabled': '#purple-03',\n      },\n      transition: 'theme',\n      outline: {\n        '': '1bw #primary-text.0',\n        drag: '1bw #primary-text',\n      },\n      outlineOffset: 1,\n    },\n\n    Drag: {\n      display: 'grid',\n      gap: '2bw',\n      flow: {\n        '': 'row',\n        horizontal: 'column',\n      },\n      gridColumns: {\n        '': '3px 3px 3px 3px 3px',\n        horizontal: 'auto',\n      },\n      gridRows: {\n        '': 'auto',\n        horizontal: '3px 3px 3px 3px 3px',\n      },\n      width: {\n        '': 'auto',\n        horizontal: '1px',\n      },\n      height: {\n        '': '1px',\n        horizontal: 'auto',\n      },\n      inset: {\n        '': '4px 50% auto auto',\n        horizontal: '50% 4px auto auto',\n      },\n      transform: {\n        '': 'translate(-50%, 0)',\n        horizontal: 'translate(0, -50%)',\n      },\n      position: 'absolute',\n      transition: 'theme',\n    },\n\n    DragPart: {\n      radius: true,\n      fill: {\n        '': '#dark-03',\n        'hovered | drag': '#dark-02',\n        disabled: '#dark-04',\n      },\n    },\n  },\n});\n\ninterface HandlerProps extends BasePropsWithoutChildren {\n  direction: Direction;\n}\n\nconst Handler = (props: HandlerProps) => {\n  const { direction = 'right', isDisabled, ...otherProps } = props;\n  const { hoverProps, isHovered } = useHover({});\n  const isHorizontal = direction === 'left' || direction === 'right';\n  const localIsHovered = useDebouncedValue(isHovered, 150);\n\n  return (\n    <HandlerElement\n      {...mergeProps(\n        hoverProps,\n        {\n          mods: {\n            hovered: localIsHovered,\n            horizontal: isHorizontal,\n            disabled: isDisabled,\n          },\n          'data-direction': direction,\n        },\n        otherProps,\n      )}\n    >\n      <div data-element=\"Track\" />\n      {!isDisabled ? (\n        <div data-element=\"Drag\">\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n          <div data-element=\"DragPart\" />\n        </div>\n      ) : null}\n    </HandlerElement>\n  );\n};\n\nconst StyledPanel = tasty(Panel, {\n  styles: {\n    flexGrow: 0,\n    width: {\n      '': '$min-size $size $max-size',\n      '[data-direction=\"top\"] | [data-direction=\"bottom\"]': 'initial',\n    },\n    height: {\n      '': '$min-size $size $max-size',\n      '[data-direction=\"left\"] | [data-direction=\"right\"]': 'initial',\n    },\n    placeSelf: 'stretch',\n    touchAction: 'none',\n\n    '$indent-compensation': {\n      '': '3px',\n      disabled: '1bw',\n    },\n  },\n});\n\nfunction ResizablePanel(\n  props: CubeResizablePanelProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const timerRef = useRef<ReturnType<typeof setTimeout>>(null);\n  const isControllable = typeof props.size === 'number';\n  const {\n    isDisabled,\n    direction = 'right',\n    size: providedSize,\n    onSizeChange,\n    minSize = 200,\n    maxSize = isControllable ? undefined : 'min(50%, 400px)',\n    ...restProps\n  } = props;\n  const [isDragging, setIsDragging] = useState(false);\n  const isHorizontal = direction === 'left' || direction === 'right';\n\n  ref = useCombinedRefs(ref);\n\n  const onResize = useEvent(() => {\n    if (ref?.current) {\n      const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';\n      const containerSize = ref.current[offsetProp];\n\n      if (Math.abs(containerSize - size) < 1 && !isDisabled) {\n        setVisualSize(size);\n      } else {\n        setVisualSize(containerSize);\n      }\n    }\n  });\n\n  useResizeObserver({\n    ref,\n    onResize,\n  });\n\n  function clamp(size: number) {\n    if (typeof maxSize === 'number') {\n      size = Math.min(maxSize, size);\n    }\n\n    if (typeof minSize === 'number' || !minSize) {\n      size = Math.max((minSize as number) || 0, size);\n    }\n\n    return Math.max(size, 0);\n  }\n\n  let [size, setSize] = useState<number>(\n    providedSize != null ? clamp(providedSize) : 200,\n  );\n  let [visualSize, setVisualSize] = useState<number | null>(null);\n\n  let { moveProps } = useMove({\n    onMoveStart(e) {\n      if (isDisabled) {\n        return;\n      }\n\n      setIsDragging(true);\n\n      const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';\n\n      if (ref.current && Math.abs(ref.current[offsetProp] - size) >= 1) {\n        setSize(Math.round(ref.current[offsetProp]));\n      }\n    },\n    onMove(e) {\n      setSize((size) => {\n        if (isDisabled) {\n          return size;\n        }\n\n        if (e.pointerType === 'keyboard') {\n          return size;\n        }\n\n        size += isHorizontal\n          ? e.deltaX * (direction === 'right' ? 1 : -1)\n          : e.deltaY * (direction === 'bottom' ? 1 : -1);\n\n        return size;\n      });\n    },\n    onMoveEnd(e) {\n      setIsDragging(false);\n      setSize((size) => clamp(Math.round(size)));\n    },\n  });\n\n  // Since we sync provided size and the local one in two ways,\n  // we need a way to prevent infinite loop in some cases.\n  // We will run this in setTimeout and make sure it will get the most recent state.\n  const notifyChange = useEvent(() => {\n    setSize((size) => {\n      if (providedSize && Math.abs(providedSize - size) > 0.5) {\n        return providedSize;\n      }\n\n      return size;\n    });\n  });\n\n  useEffect(() => {\n    onResize();\n  }, [size, isDisabled]);\n\n  useEffect(() => {\n    if (\n      !isDragging &&\n      visualSize != null &&\n      (providedSize == null || Math.abs(providedSize - visualSize) > 0.5)\n    ) {\n      onSizeChange?.(Math.round(visualSize));\n    }\n  }, [visualSize, isDragging]);\n\n  useEffect(() => {\n    timerRef.current = setTimeout(notifyChange, 500);\n\n    return () => {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n      }\n    };\n  }, [providedSize]);\n\n  const mods = useMemo(() => {\n    return {\n      drag: isDragging,\n      horizontal: isHorizontal,\n      disabled: isDisabled,\n    };\n  }, [isDragging, isHorizontal, isDisabled]);\n\n  return (\n    <StyledPanel\n      ref={ref}\n      data-direction={direction}\n      mods={mods}\n      extra={\n        <Handler\n          isDisabled={isDisabled || visualSize == null}\n          direction={direction}\n          {...moveProps}\n          mods={mods}\n        />\n      }\n      {...mergeProps(restProps, {\n        style: {\n          // We set the current size further via width/min-width/max-width styles to respect size boundaries\n          '--size': `${size}px`,\n          // We use a separate visual size to paint the handler for a smoother experience\n          '--visual-size': `${visualSize}px`,\n          '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,\n          '--max-size': typeof maxSize === 'number' ? `${maxSize}px` : maxSize,\n        },\n        innerStyles: {\n          // The panel inner space compensation for the handler\n          margin: `$indent-compensation ${direction}`,\n        },\n      })}\n    />\n  );\n}\n\nconst _ResizablePanel = forwardRef(ResizablePanel);\n\n_ResizablePanel.displayName = 'ResizablePanel';\n\nexport { _ResizablePanel as ResizablePanel };\n"],"mappings":";;;;;;;;;;;;;AA6BA,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,QAAQ;EAEN,OAAO;GACL,IAAI;GACJ,YAAY;GACZ,yBAAyB;GAC1B;EACD,QAAQ;GACN,IAAI;GACJ,YAAY;GACZ,0BAA0B;GAC3B;EACD,KAAK;GACH,IAAI;GACJ,4BAA0B;GAC3B;EACD,QAAQ;GACN,IAAI;GACJ,+BAA6B;GAC9B;EACD,OAAO;GACL,IAAI;GACJ,8BAA4B;GAC7B;EACD,MAAM;GACJ,IAAI;GACJ,6BAA2B;GAC5B;EAED,WAAW;GACT,4BACE;GACF,8BACE;GACF,+BACE;GACF,6BACE;GACH;EACD,UAAU;EACV,QAAQ;EACR,QAAQ;GACN,IAAI;GACJ,YAAY;GACZ,UAAU;GACX;EACD,SAAS;EACT,WAAW;EACX,YAAY;EACZ,uBAAuB;GACrB,IAAI;GACJ,UAAU;GACX;EAED,OAAO;GACL,OAAO;IACL,IAAI;IACJ,YAAY;IACZ,yBAAyB;IAC1B;GACD,QAAQ;IACN,IAAI;IACJ,YAAY;IACZ,0BAA0B;IAC3B;GACD,UAAU;GACV,OAAO;IACL,IAAI;IACJ,YAAY;IACZ,UAAU;IACX;GACD,MAAM;IACJ,IAAI;IACJ,gCAAgC;IACjC;GACD,YAAY;GACZ,SAAS;IACP,IAAI;IACJ,MAAM;IACP;GACD,eAAe;GAChB;EAED,MAAM;GACJ,SAAS;GACT,KAAK;GACL,MAAM;IACJ,IAAI;IACJ,YAAY;IACb;GACD,aAAa;IACX,IAAI;IACJ,YAAY;IACb;GACD,UAAU;IACR,IAAI;IACJ,YAAY;IACb;GACD,OAAO;IACL,IAAI;IACJ,YAAY;IACb;GACD,QAAQ;IACN,IAAI;IACJ,YAAY;IACb;GACD,OAAO;IACL,IAAI;IACJ,YAAY;IACb;GACD,WAAW;IACT,IAAI;IACJ,YAAY;IACb;GACD,UAAU;GACV,YAAY;GACb;EAED,UAAU;GACR,QAAQ;GACR,MAAM;IACJ,IAAI;IACJ,kBAAkB;IAClB,UAAU;IACX;GACF;EACF;CACF,CAAC;AAMF,MAAM,WAAW,UAAwB;CACvC,MAAM,EAAE,YAAY,SAAS,YAAY,GAAG,eAAe;CAC3D,MAAM,EAAE,YAAY,cAAc,SAAS,EAAE,CAAC;CAC9C,MAAM,eAAe,cAAc,UAAU,cAAc;AAG3D,QACE,qBAAC;EACC,GAAIA,aACF,YACA;GACE,MAAM;IACJ,SARa,kBAAkB,WAAW,IAAI;IAS9C,YAAY;IACZ,UAAU;IACX;GACD,kBAAkB;GACnB,EACD,WACD;aAED,oBAAC,SAAI,gBAAa,UAAU,EAC3B,CAAC,aACA,qBAAC;GAAI,gBAAa;;IAChB,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;IAC/B,oBAAC,SAAI,gBAAa,aAAa;;IAC3B,GACJ;GACW;;AAIrB,MAAM,cAAc,MAAMC,QAAO,EAC/B,QAAQ;CACN,UAAU;CACV,OAAO;EACL,IAAI;EACJ,0DAAsD;EACvD;CACD,QAAQ;EACN,IAAI;EACJ,0DAAsD;EACvD;CACD,WAAW;CACX,aAAa;CAEb,wBAAwB;EACtB,IAAI;EACJ,UAAU;EACX;CACF,EACF,CAAC;AAEF,SAAS,eACP,OACA,KACA;CACA,MAAM,WAAW,OAAsC,KAAK;CAC5D,MAAM,iBAAiB,OAAO,MAAM,SAAS;CAC7C,MAAM,EACJ,YACA,YAAY,SACZ,MAAM,cACN,cACA,UAAU,KACV,UAAU,iBAAiB,SAAY,mBACvC,GAAG,cACD;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,eAAe,cAAc,UAAU,cAAc;AAE3D,OAAM,gBAAgB,IAAI;CAE1B,MAAM,WAAW,eAAe;AAC9B,MAAI,KAAK,SAAS;GAChB,MAAM,aAAa,eAAe,gBAAgB;GAClD,MAAM,gBAAgB,IAAI,QAAQ;AAElC,OAAI,KAAK,IAAI,gBAAgB,KAAK,GAAG,KAAK,CAAC,WACzC,eAAc,KAAK;OAEnB,eAAc,cAAc;;GAGhC;AAEF,mBAAkB;EAChB;EACA;EACD,CAAC;CAEF,SAAS,MAAM,MAAc;AAC3B,MAAI,OAAO,YAAY,SACrB,QAAO,KAAK,IAAI,SAAS,KAAK;AAGhC,MAAI,OAAO,YAAY,YAAY,CAAC,QAClC,QAAO,KAAK,IAAK,WAAsB,GAAG,KAAK;AAGjD,SAAO,KAAK,IAAI,MAAM,EAAE;;CAG1B,IAAI,CAAC,MAAM,WAAW,SACpB,gBAAgB,OAAO,MAAM,aAAa,GAAG,IAC9C;CACD,IAAI,CAAC,YAAY,iBAAiB,SAAwB,KAAK;CAE/D,IAAI,EAAE,cAAc,QAAQ;EAC1B,YAAY,GAAG;AACb,OAAI,WACF;AAGF,iBAAc,KAAK;GAEnB,MAAM,aAAa,eAAe,gBAAgB;AAElD,OAAI,IAAI,WAAW,KAAK,IAAI,IAAI,QAAQ,cAAc,KAAK,IAAI,EAC7D,SAAQ,KAAK,MAAM,IAAI,QAAQ,YAAY,CAAC;;EAGhD,OAAO,GAAG;AACR,YAAS,SAAS;AAChB,QAAI,WACF,QAAO;AAGT,QAAI,EAAE,gBAAgB,WACpB,QAAO;AAGT,YAAQ,eACJ,EAAE,UAAU,cAAc,UAAU,IAAI,MACxC,EAAE,UAAU,cAAc,WAAW,IAAI;AAE7C,WAAO;KACP;;EAEJ,UAAU,GAAG;AACX,iBAAc,MAAM;AACpB,YAAS,SAAS,MAAM,KAAK,MAAM,KAAK,CAAC,CAAC;;EAE7C,CAAC;CAKF,MAAM,eAAe,eAAe;AAClC,WAAS,SAAS;AAChB,OAAI,gBAAgB,KAAK,IAAI,eAAe,KAAK,GAAG,GAClD,QAAO;AAGT,UAAO;IACP;GACF;AAEF,iBAAgB;AACd,YAAU;IACT,CAAC,MAAM,WAAW,CAAC;AAEtB,iBAAgB;AACd,MACE,CAAC,cACD,cAAc,SACb,gBAAgB,QAAQ,KAAK,IAAI,eAAe,WAAW,GAAG,IAE/D,gBAAe,KAAK,MAAM,WAAW,CAAC;IAEvC,CAAC,YAAY,WAAW,CAAC;AAE5B,iBAAgB;AACd,WAAS,UAAU,WAAW,cAAc,IAAI;AAEhD,eAAa;AACX,OAAI,SAAS,QACX,cAAa,SAAS,QAAQ;;IAGjC,CAAC,aAAa,CAAC;CAElB,MAAM,OAAO,cAAc;AACzB,SAAO;GACL,MAAM;GACN,YAAY;GACZ,UAAU;GACX;IACA;EAAC;EAAY;EAAc;EAAW,CAAC;AAE1C,QACE,oBAAC;EACM;EACL,kBAAgB;EACV;EACN,OACE,oBAAC;GACC,YAAY,cAAc,cAAc;GAC7B;GACX,GAAI;GACE;IACN;EAEJ,GAAID,aAAW,WAAW;GACxB,OAAO;IAEL,UAAU,GAAG,KAAK;IAElB,iBAAiB,GAAG,WAAW;IAC/B,cAAc,OAAO,YAAY,WAAW,GAAG,QAAQ,MAAM;IAC7D,cAAc,OAAO,YAAY,WAAW,GAAG,QAAQ,MAAM;IAC9D;GACD,aAAa,EAEX,QAAQ,wBAAwB,aACjC;GACF,CAAC;GACF;;AAIN,MAAM,kBAAkB,WAAW,eAAe;AAElD,gBAAgB,cAAc"}

package/dist/components/layout/Space.d.ts

@@ -0,0 +1,13 @@
+
+import { AllBaseProps, ContainerStyleProps } from "../../tasty/types.js";
+import "../../tasty/index.js";
+import * as react from "react";
+
+//#region src/components/layout/Space.d.ts
+interface CubeSpaceProps extends AllBaseProps, ContainerStyleProps {
+  direction?: 'vertical' | 'horizontal';
+}
+declare const Space: react.ForwardRefExoticComponent<CubeSpaceProps & react.RefAttributes<unknown>>;
+//#endregion
+export { CubeSpaceProps, Space };
+//# sourceMappingURL=Space.d.ts.map

package/dist/components/layout/Space.js

@@ -0,0 +1,38 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { extractStyles } from "../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
+import { tasty } from "../../tasty/tasty.js";
+import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/layout/Space.tsx
+const SpaceElement = tasty({ styles: {
+	display: "flex",
+	gap: true,
+	flow: {
+		"": "row",
+		vertical: "column"
+	},
+	placeItems: {
+		"": "center stretch",
+		vertical: "stretch"
+	}
+} });
+const Space = forwardRef(function Space(props, ref) {
+	const { mods, direction, ...otherProps } = props;
+	const styles = extractStyles(otherProps, CONTAINER_STYLES);
+	return /* @__PURE__ */ jsx(SpaceElement, {
+		...filterBaseProps(otherProps, { eventProps: true }),
+		ref,
+		mods: {
+			vertical: direction === "vertical" || otherProps.flow === "column" || styles.flow === "column",
+			...mods
+		},
+		styles
+	});
+});
+
+//#endregion
+export { Space };
+//# sourceMappingURL=Space.js.map

package/dist/components/layout/Space.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Space.js","names":[],"sources":["../../../src/components/layout/Space.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '../../tasty';\n\nconst SpaceElement = tasty({\n  styles: {\n    display: 'flex',\n    gap: true,\n    flow: {\n      '': 'row',\n      vertical: 'column',\n    },\n    placeItems: {\n      '': 'center stretch',\n      vertical: 'stretch',\n    },\n  },\n});\n\nexport interface CubeSpaceProps extends AllBaseProps, ContainerStyleProps {\n  direction?: 'vertical' | 'horizontal';\n}\n\nexport const Space = forwardRef(function Space(props: CubeSpaceProps, ref) {\n  const { mods, direction, ...otherProps } = props;\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  return (\n    <SpaceElement\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      ref={ref}\n      mods={{\n        vertical:\n          direction === 'vertical' ||\n          otherProps.flow === 'column' ||\n          styles.flow === 'column',\n        ...mods,\n      }}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;AAWA,MAAM,eAAe,MAAM,EACzB,QAAQ;CACN,SAAS;CACT,KAAK;CACL,MAAM;EACJ,IAAI;EACJ,UAAU;EACX;CACD,YAAY;EACV,IAAI;EACJ,UAAU;EACX;CACF,EACF,CAAC;AAMF,MAAa,QAAQ,WAAW,SAAS,MAAM,OAAuB,KAAK;CACzE,MAAM,EAAE,MAAM,WAAW,GAAG,eAAe;CAC3C,MAAM,SAAS,cAAc,YAAY,iBAAiB;AAE1D,QACE,oBAAC;EACC,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;EAChD;EACL,MAAM;GACJ,UACE,cAAc,cACd,WAAW,SAAS,YACpB,OAAO,SAAS;GAClB,GAAG;GACJ;EACO;GACR;EAEJ"}

package/dist/components/layout/Suffix.d.ts

@@ -0,0 +1,15 @@
+
+import { BaseProps, ContainerStyleProps } from "../../tasty/types.js";
+import "../../tasty/index.js";
+import * as react from "react";
+import { CSSProperties } from "react";
+
+//#region src/components/layout/Suffix.d.ts
+interface CubeSuffixProps extends BaseProps, ContainerStyleProps {
+  onWidthChange?: Function;
+  outerGap?: CSSProperties['gap'];
+}
+declare const Suffix: react.ForwardRefExoticComponent<CubeSuffixProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CubeSuffixProps, Suffix };
+//# sourceMappingURL=Suffix.d.ts.map

package/dist/components/layout/Suffix.js

@@ -0,0 +1,49 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { extractStyles, parseStyle } from "../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../tasty/styles/list.js";
+import { tasty } from "../../tasty/tasty.js";
+import { filterBaseProps } from "../../tasty/utils/filter-base-props.js";
+import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
+import { forwardRef, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/layout/Suffix.tsx
+const SuffixElement = tasty({
+	element: "Suffix",
+	styles: {
+		position: "absolute",
+		display: "grid",
+		placeContent: "stretch",
+		placeItems: "center",
+		flow: "column",
+		gap: 0,
+		right: "$suffix-gap",
+		top: "$suffix-gap",
+		bottom: "$suffix-gap",
+		color: "#dark-02",
+		height: "(100% - (2 * $suffix-gap))"
+	}
+});
+const Suffix = forwardRef(function Suffix(allProps, outerRef) {
+	let { onWidthChange, outerGap = "1bw", children, ...props } = allProps;
+	const styles = extractStyles(props, CONTAINER_STYLES);
+	const ref = useCombinedRefs(outerRef);
+	useEffect(() => {
+		if (ref && ref.current && onWidthChange) onWidthChange(ref.current.offsetWidth);
+	}, [
+		children,
+		ref,
+		onWidthChange
+	]);
+	return /* @__PURE__ */ jsx(SuffixElement, {
+		...filterBaseProps(props, { eventProps: true }),
+		ref,
+		styles,
+		style: { "--suffix-gap": parseStyle(outerGap).output },
+		children
+	});
+});
+
+//#endregion
+export { Suffix };
+//# sourceMappingURL=Suffix.js.map

package/dist/components/layout/Suffix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Suffix.js","names":[],"sources":["../../../src/components/layout/Suffix.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, useEffect } from 'react';\n\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '../../tasty';\nimport { useCombinedRefs } from '../../utils/react';\n\nconst SuffixElement = tasty({\n  element: 'Suffix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    right: '$suffix-gap',\n    top: '$suffix-gap',\n    bottom: '$suffix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $suffix-gap))',\n  },\n});\n\nexport interface CubeSuffixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Suffix = forwardRef<HTMLDivElement, CubeSuffixProps>(\n  function Suffix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useEffect(() => {\n      if (ref && ref.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <SuffixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          '--suffix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </SuffixElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAaA,MAAM,gBAAgB,MAAM;CAC1B,SAAS;CACT,QAAQ;EACN,UAAU;EACV,SAAS;EACT,cAAc;EACd,YAAY;EACZ,MAAM;EACN,KAAK;EACL,OAAO;EACP,KAAK;EACL,QAAQ;EACR,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAOF,MAAa,SAAS,WACpB,SAAS,OAAO,UAAU,UAAU;CAClC,IAAI,EAAE,eAAe,WAAW,OAAO,UAAU,GAAG,UAAU;CAC9D,MAAM,SAAS,cAAc,OAAO,iBAAiB;CACrD,MAAM,MAAM,gBAAgB,SAAS;AAErC,iBAAgB;AACd,MAAI,OAAO,IAAI,WAAW,cACxB,eAAc,IAAI,QAAQ,YAAY;IAEvC;EAAC;EAAU;EAAK;EAAc,CAAC;AAElC,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;EACR,OAAO,EACL,gBAAgB,WAAW,SAAS,CAAC,QACtC;EAEA;GACa;EAGrB"}

package/dist/components/navigation/Tabs/DraggableTabList.js

@@ -0,0 +1,73 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useCallback, useMemo } from "react";
+import { ListDropTargetDelegate, ListKeyboardDelegate, useDraggableCollection, useDroppableCollection } from "react-aria";
+import { useDraggableCollectionState, useDroppableCollectionState } from "react-stately";
+
+//#region src/components/navigation/Tabs/DraggableTabList.tsx
+const getAllowedDropOperations = () => ["move"];
+/**
+* Component that enables drag-and-drop reordering for tabs.
+*
+* This component encapsulates all drag/drop hook calls, ensuring they're only
+* called when reordering is actually enabled. It uses the render prop pattern
+* to pass the drag/drop states to its children.
+*/
+function DraggableTabList({ state, listRef, orderedKeys, onReorder, children }) {
+	const handleReorder = useEvent((e) => {
+		if (!onReorder) return;
+		const { target, keys: movableKeys } = e;
+		const { dropPosition, key: targetKey } = target;
+		const movableKey = [...movableKeys][0];
+		const movableIndex = orderedKeys.indexOf(movableKey);
+		const targetIndex = orderedKeys.indexOf(String(targetKey));
+		if (movableIndex === -1 || targetIndex === -1) return;
+		onReorder(movableIndex !== targetIndex ? orderedKeys.reduce((arr, key, i) => {
+			if (i === movableIndex) return arr;
+			if (i === targetIndex) if (dropPosition === "before") {
+				arr.push(movableKey);
+				arr.push(key);
+			} else {
+				arr.push(key);
+				arr.push(movableKey);
+			}
+			else arr.push(key);
+			return arr;
+		}, []) : orderedKeys);
+	});
+	const getItems = useCallback((keys) => {
+		return [...keys].map((key) => {
+			const item = state.collection.getItem(key);
+			return { "text/plain": item?.textValue || String(key) };
+		});
+	}, [state.collection]);
+	const dragState = useDraggableCollectionState({
+		collection: state.collection,
+		selectionManager: state.selectionManager,
+		getItems,
+		getAllowedDropOperations
+	});
+	useDraggableCollection({
+		getItems,
+		getAllowedDropOperations
+	}, dragState, listRef);
+	const dropState = useDroppableCollectionState({
+		collection: state.collection,
+		selectionManager: state.selectionManager,
+		onReorder: handleReorder
+	});
+	const { collectionProps } = useDroppableCollection({
+		keyboardDelegate: useMemo(() => new ListKeyboardDelegate(state.collection, state.disabledKeys, listRef), [
+			state.collection,
+			state.disabledKeys,
+			listRef
+		]),
+		dropTargetDelegate: useMemo(() => new ListDropTargetDelegate(state.collection, listRef, { orientation: "horizontal" }), [state.collection, listRef]),
+		onReorder: handleReorder
+	}, dropState, listRef);
+	return children(dragState, dropState, collectionProps);
+}
+
+//#endregion
+export { DraggableTabList };
+//# sourceMappingURL=DraggableTabList.js.map

package/dist/components/navigation/Tabs/DraggableTabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableTabList.js","names":[],"sources":["../../../../src/components/navigation/Tabs/DraggableTabList.tsx"],"sourcesContent":["import { ReactNode, RefObject, useCallback, useMemo } from 'react';\nimport {\n  DragItem,\n  DroppableCollectionReorderEvent,\n  ListDropTargetDelegate,\n  ListKeyboardDelegate,\n  useDraggableCollection,\n  useDroppableCollection,\n} from 'react-aria';\nimport {\n  DraggableCollectionState,\n  DroppableCollectionState,\n  TabListState,\n  useDraggableCollectionState,\n  useDroppableCollectionState,\n} from 'react-stately';\n\nimport { useEvent } from '../../../_internal/hooks';\n\nimport type { DropOperation, Key } from '@react-types/shared';\n\n// Stable function reference to avoid re-renders in drag/drop hooks\nconst getAllowedDropOperations = (): DropOperation[] => ['move'];\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface DraggableTabListProps {\n  /** Tab list state from React Stately */\n  state: TabListState<object>;\n  /** Ref to the tab list container */\n  listRef: RefObject<HTMLDivElement | null>;\n  /** Current ordered keys */\n  orderedKeys: string[];\n  /** Callback when tabs are reordered */\n  onReorder?: (newOrder: string[]) => void;\n  /** Render function that receives drag/drop states */\n  children: (\n    dragState: DraggableCollectionState,\n    dropState: DroppableCollectionState,\n    collectionProps: Record<string, unknown>,\n  ) => ReactNode;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Component that enables drag-and-drop reordering for tabs.\n *\n * This component encapsulates all drag/drop hook calls, ensuring they're only\n * called when reordering is actually enabled. It uses the render prop pattern\n * to pass the drag/drop states to its children.\n */\nexport function DraggableTabList({\n  state,\n  listRef,\n  orderedKeys,\n  onReorder,\n  children,\n}: DraggableTabListProps) {\n  // Handle reorder event from drag-and-drop\n  const handleReorder = useEvent((e: DroppableCollectionReorderEvent) => {\n    if (!onReorder) return;\n\n    const { target, keys: movableKeys } = e;\n    const { dropPosition, key: targetKey } = target;\n    const movableKey = [...movableKeys][0] as string;\n\n    const movableIndex = orderedKeys.indexOf(movableKey);\n    const targetIndex = orderedKeys.indexOf(String(targetKey));\n\n    if (movableIndex === -1 || targetIndex === -1) return;\n\n    // Reorder keys\n    const newKeys =\n      movableIndex !== targetIndex\n        ? orderedKeys.reduce((arr, key, i) => {\n            // Skip the key we are moving\n            if (i === movableIndex) {\n              return arr;\n            }\n\n            // Insert the movable key at the target position\n            if (i === targetIndex) {\n              if (dropPosition === 'before') {\n                arr.push(movableKey);\n                arr.push(key);\n              } else {\n                // 'after' or 'on' - treat 'on' as 'after' since tabs are linear\n                arr.push(key);\n                arr.push(movableKey);\n              }\n            } else {\n              arr.push(key);\n            }\n\n            return arr;\n          }, [] as string[])\n        : orderedKeys;\n\n    onReorder(newKeys);\n  });\n\n  // Get items for draggable collection\n  const getItems = useCallback(\n    (keys: Set<Key>): DragItem[] => {\n      return [...keys].map((key) => {\n        const item = state.collection.getItem(key);\n        return {\n          'text/plain': item?.textValue || String(key),\n        };\n      });\n    },\n    [state.collection],\n  );\n\n  // Setup drag state for the collection\n  const dragState = useDraggableCollectionState({\n    collection: state.collection,\n    selectionManager: state.selectionManager,\n    getItems,\n    getAllowedDropOperations,\n  });\n\n  // Enable the draggable collection\n  useDraggableCollection(\n    {\n      getItems,\n      getAllowedDropOperations,\n    },\n    dragState,\n    listRef,\n  );\n\n  // Setup drop state for the collection\n  const dropState = useDroppableCollectionState({\n    collection: state.collection,\n    selectionManager: state.selectionManager,\n    onReorder: handleReorder,\n  });\n\n  // Create delegates for drop handling\n  const keyboardDelegate = useMemo(\n    () =>\n      new ListKeyboardDelegate(state.collection, state.disabledKeys, listRef),\n    [state.collection, state.disabledKeys, listRef],\n  );\n\n  const dropTargetDelegate = useMemo(\n    () =>\n      new ListDropTargetDelegate(state.collection, listRef, {\n        orientation: 'horizontal',\n      }),\n    [state.collection, listRef],\n  );\n\n  const { collectionProps } = useDroppableCollection(\n    {\n      keyboardDelegate,\n      dropTargetDelegate,\n      onReorder: handleReorder,\n    },\n    dropState,\n    listRef,\n  );\n\n  return children(dragState, dropState, collectionProps);\n}\n"],"mappings":";;;;;;;AAsBA,MAAM,iCAAkD,CAAC,OAAO;;;;;;;;AAkChE,SAAgB,iBAAiB,EAC/B,OACA,SACA,aACA,WACA,YACwB;CAExB,MAAM,gBAAgB,UAAU,MAAuC;AACrE,MAAI,CAAC,UAAW;EAEhB,MAAM,EAAE,QAAQ,MAAM,gBAAgB;EACtC,MAAM,EAAE,cAAc,KAAK,cAAc;EACzC,MAAM,aAAa,CAAC,GAAG,YAAY,CAAC;EAEpC,MAAM,eAAe,YAAY,QAAQ,WAAW;EACpD,MAAM,cAAc,YAAY,QAAQ,OAAO,UAAU,CAAC;AAE1D,MAAI,iBAAiB,MAAM,gBAAgB,GAAI;AA6B/C,YAzBE,iBAAiB,cACb,YAAY,QAAQ,KAAK,KAAK,MAAM;AAElC,OAAI,MAAM,aACR,QAAO;AAIT,OAAI,MAAM,YACR,KAAI,iBAAiB,UAAU;AAC7B,QAAI,KAAK,WAAW;AACpB,QAAI,KAAK,IAAI;UACR;AAEL,QAAI,KAAK,IAAI;AACb,QAAI,KAAK,WAAW;;OAGtB,KAAI,KAAK,IAAI;AAGf,UAAO;KACN,EAAE,CAAa,GAClB,YAEY;GAClB;CAGF,MAAM,WAAW,aACd,SAA+B;AAC9B,SAAO,CAAC,GAAG,KAAK,CAAC,KAAK,QAAQ;GAC5B,MAAM,OAAO,MAAM,WAAW,QAAQ,IAAI;AAC1C,UAAO,EACL,cAAc,MAAM,aAAa,OAAO,IAAI,EAC7C;IACD;IAEJ,CAAC,MAAM,WAAW,CACnB;CAGD,MAAM,YAAY,4BAA4B;EAC5C,YAAY,MAAM;EAClB,kBAAkB,MAAM;EACxB;EACA;EACD,CAAC;AAGF,wBACE;EACE;EACA;EACD,EACD,WACA,QACD;CAGD,MAAM,YAAY,4BAA4B;EAC5C,YAAY,MAAM;EAClB,kBAAkB,MAAM;EACxB,WAAW;EACZ,CAAC;CAiBF,MAAM,EAAE,oBAAoB,uBAC1B;EACE,kBAhBqB,cAErB,IAAI,qBAAqB,MAAM,YAAY,MAAM,cAAc,QAAQ,EACzE;GAAC,MAAM;GAAY,MAAM;GAAc;GAAQ,CAChD;EAaG,oBAXuB,cAEvB,IAAI,uBAAuB,MAAM,YAAY,SAAS,EACpD,aAAa,cACd,CAAC,EACJ,CAAC,MAAM,YAAY,QAAQ,CAC5B;EAMG,WAAW;EACZ,EACD,WACA,QACD;AAED,QAAO,SAAS,WAAW,WAAW,gBAAgB"}

package/dist/components/navigation/Tabs/EditableTitle.js

@@ -0,0 +1,100 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { EditableTitleInputElement, HiddenMeasure } from "./styled.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTextField } from "react-aria";
+
+//#region src/components/navigation/Tabs/EditableTitle.tsx
+/**
+* Inline editable title component for tab labels.
+*
+* When not editing, displays the title as a span with double-click to edit.
+* When editing, displays an auto-sizing input field.
+*/
+function EditableTitle({ title, isEditing, editValue, onEditValueChange, onStartEditing, onSubmit, onCancel }) {
+	const inputRef = useRef(null);
+	const measureRef = useRef(null);
+	const [inputWidth, setInputWidth] = useState(null);
+	const justEnteredEditModeRef = useRef(false);
+	const { inputProps } = useTextField({
+		"aria-label": "Edit tab title",
+		value: editValue,
+		onChange: onEditValueChange
+	}, inputRef);
+	useLayoutEffect(() => {
+		if (isEditing && inputRef.current) {
+			const input = inputRef.current;
+			justEnteredEditModeRef.current = true;
+			input.focus();
+			requestAnimationFrame(() => {
+				input.select();
+				requestAnimationFrame(() => {
+					requestAnimationFrame(() => {
+						justEnteredEditModeRef.current = false;
+					});
+				});
+			});
+		} else justEnteredEditModeRef.current = false;
+	}, [isEditing]);
+	useLayoutEffect(() => {
+		if (isEditing && measureRef.current) {
+			const width = measureRef.current.scrollWidth;
+			setInputWidth(width);
+		}
+	}, [isEditing, editValue]);
+	const handleKeyDown = useEvent((e) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			onSubmit();
+		} else if (e.key === "Escape") {
+			e.preventDefault();
+			onCancel();
+		} else if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === " " || e.key === "Delete" || e.key === "Backspace") e.stopPropagation();
+	});
+	const handleBlur = useEvent(() => {
+		if (justEnteredEditModeRef.current) {
+			requestAnimationFrame(() => {
+				inputRef.current?.focus();
+				inputRef.current?.select();
+			});
+			return;
+		}
+		onSubmit();
+	});
+	const handleDoubleClick = useEvent((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		onStartEditing();
+	});
+	if (isEditing) {
+		const mergedProps = {
+			...inputProps,
+			onKeyDown: (e) => {
+				handleKeyDown(e);
+				inputProps.onKeyDown?.(e);
+			},
+			onBlur: (e) => {
+				handleBlur();
+				inputProps.onBlur?.(e);
+			}
+		};
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HiddenMeasure, {
+			ref: measureRef,
+			"aria-hidden": "true",
+			children: editValue || " "
+		}), /* @__PURE__ */ jsx(EditableTitleInputElement, {
+			...mergedProps,
+			ref: inputRef,
+			tokens: { "$input-width": inputWidth ? `${inputWidth}px` : "auto" }
+		})] });
+	}
+	return /* @__PURE__ */ jsx("span", {
+		onDoubleClick: handleDoubleClick,
+		children: title
+	});
+}
+
+//#endregion
+export { EditableTitle };
+//# sourceMappingURL=EditableTitle.js.map

package/dist/components/navigation/Tabs/EditableTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableTitle.js","names":[],"sources":["../../../../src/components/navigation/Tabs/EditableTitle.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { useEvent } from '../../../_internal/hooks';\n\nimport { EditableTitleInputElement, HiddenMeasure } from './styled';\n\nimport type { FocusEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface EditableTitleProps {\n  /** The current title to display (when not editing) */\n  title: ReactNode;\n  /** Whether the title is currently being edited */\n  isEditing: boolean;\n  /** Current edit input value */\n  editValue: string;\n  /** Callback when edit value changes */\n  onEditValueChange: (value: string) => void;\n  /** Callback to start editing (e.g., on double-click) */\n  onStartEditing: () => void;\n  /** Callback when editing is submitted (Enter or blur) */\n  onSubmit: () => void;\n  /** Callback when editing is cancelled (Escape) */\n  onCancel: () => void;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Inline editable title component for tab labels.\n *\n * When not editing, displays the title as a span with double-click to edit.\n * When editing, displays an auto-sizing input field.\n */\nexport function EditableTitle({\n  title,\n  isEditing,\n  editValue,\n  onEditValueChange,\n  onStartEditing,\n  onSubmit,\n  onCancel,\n}: EditableTitleProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const measureRef = useRef<HTMLSpanElement>(null);\n  const [inputWidth, setInputWidth] = useState<number | null>(null);\n  const justEnteredEditModeRef = useRef(false);\n\n  // React Aria text field hook\n  const { inputProps } = useTextField(\n    {\n      'aria-label': 'Edit tab title',\n      value: editValue,\n      onChange: onEditValueChange,\n    },\n    inputRef,\n  );\n\n  // Focus and select input when entering edit mode\n  useLayoutEffect(() => {\n    if (isEditing && inputRef.current) {\n      const input = inputRef.current;\n\n      // Set flag to ignore immediate blur events\n      justEnteredEditModeRef.current = true;\n\n      input.focus();\n      // Use requestAnimationFrame to ensure selection happens after focus\n      requestAnimationFrame(() => {\n        input.select();\n        // Clear the flag after focus is established (allow 2 frames for menu to fully close)\n        requestAnimationFrame(() => {\n          requestAnimationFrame(() => {\n            justEnteredEditModeRef.current = false;\n          });\n        });\n      });\n    } else {\n      justEnteredEditModeRef.current = false;\n    }\n  }, [isEditing]);\n\n  // Measure text width and update input width\n  useLayoutEffect(() => {\n    if (isEditing && measureRef.current) {\n      const width = measureRef.current.scrollWidth;\n      setInputWidth(width);\n    }\n  }, [isEditing, editValue]);\n\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      onSubmit();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      onCancel();\n    } else if (\n      e.key === 'ArrowLeft' ||\n      e.key === 'ArrowRight' ||\n      e.key === ' ' ||\n      e.key === 'Delete' ||\n      e.key === 'Backspace'\n    ) {\n      // Stop propagation to prevent tab navigation/deletion while editing\n      e.stopPropagation();\n    }\n  });\n\n  const handleBlur = useEvent(() => {\n    // Ignore blur events immediately after entering edit mode (menu closing causes focus loss)\n    if (justEnteredEditModeRef.current) {\n      // Re-focus the input since something else stole focus\n      requestAnimationFrame(() => {\n        inputRef.current?.focus();\n        inputRef.current?.select();\n      });\n      return;\n    }\n    // Submit on blur\n    onSubmit();\n  });\n\n  const handleDoubleClick = useEvent((e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    onStartEditing();\n  });\n\n  if (isEditing) {\n    // Merge our handlers with React Aria's inputProps\n    const mergedProps = {\n      ...inputProps,\n      onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => {\n        handleKeyDown(e);\n        inputProps.onKeyDown?.(e);\n      },\n      onBlur: (e: FocusEvent<HTMLInputElement>) => {\n        handleBlur();\n        inputProps.onBlur?.(e);\n      },\n    };\n\n    return (\n      <>\n        <HiddenMeasure ref={measureRef} aria-hidden=\"true\">\n          {editValue || ' '}\n        </HiddenMeasure>\n        <EditableTitleInputElement\n          {...mergedProps}\n          ref={inputRef}\n          tokens={{ '$input-width': inputWidth ? `${inputWidth}px` : 'auto' }}\n        />\n      </>\n    );\n  }\n\n  return <span onDoubleClick={handleDoubleClick}>{title}</span>;\n}\n"],"mappings":";;;;;;;;;;;;;;AAwCA,SAAgB,cAAc,EAC5B,OACA,WACA,WACA,mBACA,gBACA,UACA,YACqB;CACrB,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,aAAa,OAAwB,KAAK;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAwB,KAAK;CACjE,MAAM,yBAAyB,OAAO,MAAM;CAG5C,MAAM,EAAE,eAAe,aACrB;EACE,cAAc;EACd,OAAO;EACP,UAAU;EACX,EACD,SACD;AAGD,uBAAsB;AACpB,MAAI,aAAa,SAAS,SAAS;GACjC,MAAM,QAAQ,SAAS;AAGvB,0BAAuB,UAAU;AAEjC,SAAM,OAAO;AAEb,+BAA4B;AAC1B,UAAM,QAAQ;AAEd,gCAA4B;AAC1B,iCAA4B;AAC1B,6BAAuB,UAAU;OACjC;MACF;KACF;QAEF,wBAAuB,UAAU;IAElC,CAAC,UAAU,CAAC;AAGf,uBAAsB;AACpB,MAAI,aAAa,WAAW,SAAS;GACnC,MAAM,QAAQ,WAAW,QAAQ;AACjC,iBAAc,MAAM;;IAErB,CAAC,WAAW,UAAU,CAAC;CAE1B,MAAM,gBAAgB,UAAU,MAAqB;AACnD,MAAI,EAAE,QAAQ,SAAS;AACrB,KAAE,gBAAgB;AAClB,aAAU;aACD,EAAE,QAAQ,UAAU;AAC7B,KAAE,gBAAgB;AAClB,aAAU;aAEV,EAAE,QAAQ,eACV,EAAE,QAAQ,gBACV,EAAE,QAAQ,OACV,EAAE,QAAQ,YACV,EAAE,QAAQ,YAGV,GAAE,iBAAiB;GAErB;CAEF,MAAM,aAAa,eAAe;AAEhC,MAAI,uBAAuB,SAAS;AAElC,+BAA4B;AAC1B,aAAS,SAAS,OAAO;AACzB,aAAS,SAAS,QAAQ;KAC1B;AACF;;AAGF,YAAU;GACV;CAEF,MAAM,oBAAoB,UAAU,MAAkB;AACpD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,kBAAgB;GAChB;AAEF,KAAI,WAAW;EAEb,MAAM,cAAc;GAClB,GAAG;GACH,YAAY,MAAuC;AACjD,kBAAc,EAAE;AAChB,eAAW,YAAY,EAAE;;GAE3B,SAAS,MAAoC;AAC3C,gBAAY;AACZ,eAAW,SAAS,EAAE;;GAEzB;AAED,SACE,8CACE,oBAAC;GAAc,KAAK;GAAY,eAAY;aACzC,aAAa;IACA,EAChB,oBAAC;GACC,GAAI;GACJ,KAAK;GACL,QAAQ,EAAE,gBAAgB,aAAa,GAAG,WAAW,MAAM,QAAQ;IACnE,IACD;;AAIP,QAAO,oBAAC;EAAK,eAAe;YAAoB;GAAa"}