@cgi-learning-hub/ui 1.14.0-dev.1785338327 → 1.14.0-dev.1785420359

package/dist/tiptap/index.cjs.js

@@ -4373,6 +4373,7 @@ var Button = (0, react.forwardRef)(({ className, children, tooltip, showTooltip
 	const shortcuts = (0, react.useMemo)(() => parseShortcutKeys({ shortcutKeys }), [shortcutKeys]);
 	if (!tooltip || !showTooltip) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ToggleButton.default, {
 		size: "small",
+		color: "primary",
 		ref,
 		sx: {
 			border: "none",
@@ -4390,6 +4391,7 @@ var Button = (0, react.forwardRef)(({ className, children, tooltip, showTooltip
 		}] } },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_ToggleButton.default, {
 			size: "small",
+			color: "primary",
 			ref,
 			sx: {
 				border: "none",
@@ -5147,7 +5149,7 @@ var HeadingMenu = (0, react.forwardRef)(({ editor: providedEditor, levels = [
 		id: "heading-button",
 		value: "heading",
 		type: "button",
-		selected: isActive,
+		selected: isActive || open,
 		role: "button",
 		tabIndex: -1,
 		disabled: !canToggle,
@@ -5412,10 +5414,10 @@ var LinkMain = ({ url, setUrl, setLink, removeLink, openLink, isActive }) => {
 				autoComplete: "off",
 				autoCorrect: "off",
 				autoCapitalize: "off",
-				className: "tiptap-link-input",
 				sx: {
 					padding: ".25rem .625rem",
-					fontSize: "0.875rem"
+					fontSize: "0.875rem",
+					minWidth: "12rem"
 				}
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIconButton, {
@@ -5459,6 +5461,7 @@ var LinkPopover = (0, react.forwardRef)(({ editor: providedEditor, hideWhenUnava
 	const { editor } = useTiptapEditor(providedEditor);
 	const [anchorEl, setAnchorEl] = (0, react.useState)(null);
 	const internalRef = (0, react.useRef)(null);
+	const justSubmittedRef = (0, react.useRef)(false);
 	const { isVisible, canSet, isActive, url, setUrl, setLink, removeLink, openLink, label, Icon } = useLinkPopover({
 		editor,
 		hideWhenUnavailable,
@@ -5474,8 +5477,12 @@ var LinkPopover = (0, react.forwardRef)(({ editor: providedEditor, hideWhenUnava
 		onOpenChange?.(false);
 	}, [onOpenChange]);
 	const handleSetLink = (0, react.useCallback)(() => {
+		justSubmittedRef.current = true;
 		setLink();
 		setAnchorEl(null);
+		queueMicrotask(() => {
+			justSubmittedRef.current = false;
+		});
 	}, [setLink]);
 	const handleClick = (0, react.useCallback)((event) => {
 		onClick?.(event, !isActive);
@@ -5483,14 +5490,14 @@ var LinkPopover = (0, react.forwardRef)(({ editor: providedEditor, hideWhenUnava
 		setAnchorEl(event.currentTarget);
 	}, [onClick, anchorEl]);
 	(0, react.useEffect)(() => {
-		if (autoOpenOnLinkActive && isActive) setAnchorEl(internalRef.current);
+		if (autoOpenOnLinkActive && isActive && !justSubmittedRef.current) setAnchorEl(internalRef.current);
 	}, [autoOpenOnLinkActive, isActive]);
 	if (!isVisible) return null;
 	const open = Boolean(anchorEl);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkButton, {
 		value: "link",
 		disabled: !canSet,
-		selected: isActive,
+		selected: isActive || open,
 		"data-disabled": !canSet,
 		"aria-label": label,
 		tooltip: label,
@@ -6618,6 +6625,8 @@ var useToolbarNavigation = (toolbarRef) => {
 		if (!items.length) return;
 		const toolbar = toolbarRef.current;
 		if (!toolbar) return;
+		const activeEl = toolbar.ownerDocument.activeElement;
+		if (activeEl && !toolbar.contains(activeEl)) return;
 		const initialContainerTabIndex = initialContainerTabIndexRef.current;
 		const currentIndex = selectedIndex ?? -1;
 		if (initialContainerTabIndex != null) {

package/dist/tiptap/index.es.js

@@ -4360,6 +4360,7 @@ var Button = forwardRef(({ className, children, tooltip, showTooltip = true, sho
 	const shortcuts = useMemo(() => parseShortcutKeys({ shortcutKeys }), [shortcutKeys]);
 	if (!tooltip || !showTooltip) return /* @__PURE__ */ jsx(ToggleButton, {
 		size: "small",
+		color: "primary",
 		ref,
 		sx: {
 			border: "none",
@@ -4377,6 +4378,7 @@ var Button = forwardRef(({ className, children, tooltip, showTooltip = true, sho
 		}] } },
 		children: /* @__PURE__ */ jsx(ToggleButton, {
 			size: "small",
+			color: "primary",
 			ref,
 			sx: {
 				border: "none",
@@ -5134,7 +5136,7 @@ var HeadingMenu = forwardRef(({ editor: providedEditor, levels = [
 		id: "heading-button",
 		value: "heading",
 		type: "button",
-		selected: isActive,
+		selected: isActive || open,
 		role: "button",
 		tabIndex: -1,
 		disabled: !canToggle,
@@ -5399,10 +5401,10 @@ var LinkMain = ({ url, setUrl, setLink, removeLink, openLink, isActive }) => {
 				autoComplete: "off",
 				autoCorrect: "off",
 				autoCapitalize: "off",
-				className: "tiptap-link-input",
 				sx: {
 					padding: ".25rem .625rem",
-					fontSize: "0.875rem"
+					fontSize: "0.875rem",
+					minWidth: "12rem"
 				}
 			}),
 			/* @__PURE__ */ jsx(StyledIconButton, {
@@ -5446,6 +5448,7 @@ var LinkPopover = forwardRef(({ editor: providedEditor, hideWhenUnavailable = fa
 	const { editor } = useTiptapEditor(providedEditor);
 	const [anchorEl, setAnchorEl] = useState(null);
 	const internalRef = useRef(null);
+	const justSubmittedRef = useRef(false);
 	const { isVisible, canSet, isActive, url, setUrl, setLink, removeLink, openLink, label, Icon } = useLinkPopover({
 		editor,
 		hideWhenUnavailable,
@@ -5461,8 +5464,12 @@ var LinkPopover = forwardRef(({ editor: providedEditor, hideWhenUnavailable = fa
 		onOpenChange?.(false);
 	}, [onOpenChange]);
 	const handleSetLink = useCallback(() => {
+		justSubmittedRef.current = true;
 		setLink();
 		setAnchorEl(null);
+		queueMicrotask(() => {
+			justSubmittedRef.current = false;
+		});
 	}, [setLink]);
 	const handleClick = useCallback((event) => {
 		onClick?.(event, !isActive);
@@ -5470,14 +5477,14 @@ var LinkPopover = forwardRef(({ editor: providedEditor, hideWhenUnavailable = fa
 		setAnchorEl(event.currentTarget);
 	}, [onClick, anchorEl]);
 	useEffect(() => {
-		if (autoOpenOnLinkActive && isActive) setAnchorEl(internalRef.current);
+		if (autoOpenOnLinkActive && isActive && !justSubmittedRef.current) setAnchorEl(internalRef.current);
 	}, [autoOpenOnLinkActive, isActive]);
 	if (!isVisible) return null;
 	const open = Boolean(anchorEl);
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(LinkButton, {
 		value: "link",
 		disabled: !canSet,
-		selected: isActive,
+		selected: isActive || open,
 		"data-disabled": !canSet,
 		"aria-label": label,
 		tooltip: label,
@@ -6605,6 +6612,8 @@ var useToolbarNavigation = (toolbarRef) => {
 		if (!items.length) return;
 		const toolbar = toolbarRef.current;
 		if (!toolbar) return;
+		const activeEl = toolbar.ownerDocument.activeElement;
+		if (activeEl && !toolbar.contains(activeEl)) return;
 		const initialContainerTabIndex = initialContainerTabIndexRef.current;
 		const currentIndex = selectedIndex ?? -1;
 		if (initialContainerTabIndex != null) {

package/dist/ui.css

@@ -11,19 +11,7 @@
   --toastify-text-color-light: var(--theme-palette-text-primary);
   --toastify-text-color-dark: var(--theme-palette-common-white);
 }
-.tiptap-link-input {
-  font-size: 0.875rem;
-  border: none;
-  /* Clamp the input */
-  min-width: 12rem;
-  padding-right: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.tiptap-link-input:focus {
-  text-overflow: clip;
-  overflow: visible;
-}:root {
+:root {
   --tt-toolbar-height: 2.75rem;
   --tt-safe-area-bottom: env(safe-area-inset-bottom, 0px);
   --tt-toolbar-bg-color: var(--theme-palette-common-white);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cgi-learning-hub/ui",
-  "version": "1.14.0-dev.1785338327",
+  "version": "1.14.0-dev.1785420359",
   "description": "React component library for Hub's design system, built on Material UI with custom and extended components.",
   "keywords": [
     "cgi-learning-hub",