@univerjs/design 1.0.0-beta.1 → 1.0.0-beta.2

package/lib/cjs/index.js

@@ -2501,9 +2501,12 @@ const FormDualColumnLayout = (props) => {
 * limitations under the License.
 */
 function Pager(props) {
-	const { className, value: current = 0, total: count = 0, loop, text: propText, onChange } = props;
+	const { className, value: current = 0, total: count = 0, loop, text: propText, previousButtonAriaLabel, nextButtonAriaLabel, onChange } = props;
+	const { locale } = (0, react.useContext)(ConfigContext);
 	const text = propText ?? `${current}/${count}`;
 	const hasValue = count > 0;
+	const previousButtonDisabled = !loop && current <= 1;
+	const nextButtonDisabled = !loop && current >= count;
 	const onClickLeftArrow = () => {
 		if (current === 1) {
 			if (loop) onChange === null || onChange === void 0 || onChange(count);
@@ -2520,23 +2523,33 @@ function Pager(props) {
 		children: hasValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				"data-u-comp": "pager-left-arrow",
-				className: "univer-inline-flex univer-size-4 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 univer-text-current hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600",
+				className: "univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 univer-text-current hover:univer-bg-gray-50 focus-visible:univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-primary-500 disabled:univer-cursor-default disabled:univer-opacity-40 dark:hover:!univer-bg-gray-600",
 				type: "button",
-				role: "button",
+				"aria-label": previousButtonAriaLabel ?? (locale === null || locale === void 0 ? void 0 : locale.Accessibility.previous) ?? "Previous",
+				disabled: previousButtonDisabled,
 				onClick: onClickLeftArrow,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, { className: "rtl:univer-rotate-180" })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, {
+					className: "rtl:univer-rotate-180",
+					"aria-hidden": "true"
+				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "univer-mx-1",
+				"aria-live": "polite",
+				"aria-atomic": "true",
 				children: text
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				"data-u-comp": "pager-right-arrow",
-				className: "univer-inline-flex univer-size-4 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 univer-text-current hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600",
+				className: "univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 univer-text-current hover:univer-bg-gray-50 focus-visible:univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-primary-500 disabled:univer-cursor-default disabled:univer-opacity-40 dark:hover:!univer-bg-gray-600",
 				type: "button",
-				role: "button",
+				"aria-label": nextButtonAriaLabel ?? (locale === null || locale === void 0 ? void 0 : locale.Accessibility.next) ?? "Next",
+				disabled: nextButtonDisabled,
 				onClick: onClickRightArrow,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "rtl:univer-rotate-180" })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, {
+					className: "rtl:univer-rotate-180",
+					"aria-hidden": "true"
+				})
 			})
 		] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-mx-1",
@@ -2562,40 +2575,83 @@ function Pager(props) {
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-const buttonClassName = `
-    univer-flex univer-cursor-pointer univer-items-center univer-justify-center univer-border-none
-    univer-bg-transparent univer-p-0 univer-text-current
-    hover:univer-text-gray-0
+const toolbarButtonClassName = `
+    !univer-border-transparent !univer-bg-transparent !univer-text-gray-300
+    hover:!univer-bg-gray-600 hover:!univer-text-gray-0
+    focus-visible:!univer-outline-none focus-visible:!univer-ring-2 focus-visible:!univer-ring-gray-0
+`;
+const focusableElementSelector = `
+    button:not([disabled]), [href], input:not([disabled]), select:not([disabled]),
+    textarea:not([disabled]), [tabindex]:not([tabindex="-1"])
 `;
 function Gallery(props) {
+	var _locale$Accessibility;
 	const { className, images, open, onOpenChange } = props;
-	const [isVisible, setIsVisible] = (0, react.useState)(false);
+	const [isVisible, setIsVisible] = (0, react.useState)(Boolean(open));
 	const [activeImageIndex, setActiveImageIndex] = (0, react.useState)(0);
 	const [zoomLevel, setZoomLevel] = (0, react.useState)(1);
 	const { direction, locale } = (0, react.useContext)(ConfigContext);
 	const dialogRef = (0, react.useRef)(null);
+	const closeButtonRef = (0, react.useRef)(null);
+	const previouslyFocusedElementRef = (0, react.useRef)(null);
 	const activeImage = images[activeImageIndex];
 	const hasPagination = images.length > 1;
+	const imageLabel = (locale === null || locale === void 0 || (_locale$Accessibility = locale.Accessibility.image) === null || _locale$Accessibility === void 0 ? void 0 : _locale$Accessibility.replace("{0}", String(activeImageIndex + 1)).replace("{1}", String(images.length))) ?? `Image ${activeImageIndex + 1} of ${images.length}`;
 	(0, react.useEffect)(() => {
-		if (open && dialogRef.current) dialogRef.current.focus();
+		const timer = setTimeout(() => {
+			var _previouslyFocusedEle;
+			setIsVisible(Boolean(open));
+			if (!open && ((_previouslyFocusedEle = previouslyFocusedElementRef.current) === null || _previouslyFocusedEle === void 0 ? void 0 : _previouslyFocusedEle.isConnected)) previouslyFocusedElementRef.current.focus();
+			if (!open) previouslyFocusedElementRef.current = null;
+		}, open ? 0 : 150);
+		return () => clearTimeout(timer);
 	}, [open]);
 	(0, react.useEffect)(() => {
+		var _closeButtonRef$curre;
 		if (!open) return;
-		const handler = (e) => {
-			if (e.key === "Escape") onOpenChange === null || onOpenChange === void 0 || onOpenChange(false);
+		previouslyFocusedElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		(_closeButtonRef$curre = closeButtonRef.current) === null || _closeButtonRef$curre === void 0 || _closeButtonRef$curre.focus();
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open && !isVisible) return;
+		const handler = (event) => {
+			if (event.key === "Escape" && open) {
+				event.preventDefault();
+				event.stopPropagation();
+				onOpenChange === null || onOpenChange === void 0 || onOpenChange(false);
+				return;
+			}
+			if (event.key !== "Tab" || !dialogRef.current) return;
+			const focusableElements = Array.from(dialogRef.current.querySelectorAll(focusableElementSelector));
+			if (focusableElements.length === 0) {
+				event.preventDefault();
+				dialogRef.current.focus();
+				return;
+			}
+			const firstElement = focusableElements[0];
+			const lastElement = focusableElements[focusableElements.length - 1];
+			const activeElement = document.activeElement;
+			if (event.shiftKey && (activeElement === firstElement || !dialogRef.current.contains(activeElement))) {
+				event.preventDefault();
+				lastElement.focus();
+			} else if (!event.shiftKey && (activeElement === lastElement || !dialogRef.current.contains(activeElement))) {
+				event.preventDefault();
+				firstElement.focus();
+			}
 		};
 		window.addEventListener("keydown", handler);
 		return () => window.removeEventListener("keydown", handler);
-	}, [open, onOpenChange]);
+	}, [
+		isVisible,
+		onOpenChange,
+		open
+	]);
 	(0, react.useEffect)(() => {
-		if (open) setIsVisible(true);
-		else {
-			const timer = setTimeout(() => {
-				setIsVisible(false);
-			}, 150);
-			return () => clearTimeout(timer);
-		}
-	}, [open]);
+		return () => {
+			var _previouslyFocusedEle2;
+			if ((_previouslyFocusedEle2 = previouslyFocusedElementRef.current) === null || _previouslyFocusedEle2 === void 0 ? void 0 : _previouslyFocusedEle2.isConnected) previouslyFocusedElementRef.current.focus();
+		};
+	}, []);
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		const handleWheel = (e) => {
@@ -2614,17 +2670,17 @@ function Gallery(props) {
 			setZoomLevel(1);
 			return;
 		}
-		const newZoomLevel = zoomLevel + ratio;
-		if (newZoomLevel < .5) return;
-		if (newZoomLevel > 2) return;
-		setZoomLevel(newZoomLevel);
+		setZoomLevel((previousZoomLevel) => Math.min(Math.max(.5, previousZoomLevel + ratio), 2));
+	}
+	function handleClose() {
+		onOpenChange === null || onOpenChange === void 0 || onOpenChange(false);
 	}
 	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-u-comp": "gallery",
 		dir: direction,
 		role: "dialog",
 		"aria-modal": "true",
-		"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.imageGallery,
+		"aria-label": (locale === null || locale === void 0 ? void 0 : locale.Accessibility.imageGallery) ?? "Image gallery",
 		tabIndex: -1,
 		ref: dialogRef,
 		className: clsx$1("univer-fixed univer-inset-0 univer-z-[1080] univer-flex univer-h-screen univer-w-screen univer-select-none univer-items-center univer-justify-center", {
@@ -2635,7 +2691,18 @@ function Gallery(props) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-absolute univer-inset-0 univer-size-full univer-bg-gray-900 univer-opacity-80",
 				"aria-hidden": "true",
-				onClick: () => onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false)
+				onClick: handleClose
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				ref: closeButtonRef,
+				"data-u-comp": "gallery-close",
+				type: "button",
+				variant: "ghost",
+				size: "icon",
+				"aria-label": (locale === null || locale === void 0 ? void 0 : locale.Accessibility.close) ?? "Close",
+				className: "univer-absolute univer-right-4 univer-top-4 univer-z-10 univer-size-10 univer-rounded-full !univer-border-gray-500 !univer-bg-gray-800 !univer-text-gray-0 hover:!univer-bg-gray-700 focus-visible:!univer-outline-none focus-visible:!univer-ring-2 focus-visible:!univer-ring-gray-0 rtl:univer-left-4 rtl:univer-right-auto",
+				onClick: handleClose,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, { "aria-hidden": "true" })
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-relative univer-flex univer-w-fit univer-items-center univer-justify-center",
@@ -2643,10 +2710,16 @@ function Gallery(props) {
 					className: "univer-h-full univer-w-full univer-object-contain univer-transition-transform univer-duration-300 univer-ease-out",
 					style: { transform: `scale(${zoomLevel})` },
 					src: activeImage,
-					alt: locale === null || locale === void 0 ? void 0 : locale.Accessibility.image.replace("{0}", String(activeImageIndex + 1)).replace("{1}", String(images.length)),
+					alt: imageLabel,
 					draggable: false
 				})
 			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "univer-sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: imageLabel
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
 				className: "univer-absolute univer-bottom-6 univer-left-1/2 univer-flex -univer-translate-x-1/2 univer-items-center univer-gap-3 univer-rounded-full univer-bg-gray-800 univer-px-6 univer-py-3 univer-text-gray-400 rtl:univer-flex-row-reverse",
 				children: [
@@ -2654,26 +2727,37 @@ function Gallery(props) {
 						className: "!univer-text-gray-400 [&_[data-u-comp=pager-left-arrow]:hover]:!univer-bg-gray-600 [&_[data-u-comp=pager-right-arrow]:hover]:!univer-bg-gray-600",
 						value: activeImageIndex + 1,
 						total: images.length,
+						previousButtonAriaLabel: (locale === null || locale === void 0 ? void 0 : locale.Accessibility.previous) ?? "Previous",
+						nextButtonAriaLabel: (locale === null || locale === void 0 ? void 0 : locale.Accessibility.next) ?? "Next",
 						onChange: (value) => setActiveImageIndex(value - 1)
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 						type: "button",
-						"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.zoomIn,
-						className: buttonClassName,
+						variant: "ghost",
+						size: "icon",
+						"aria-label": (locale === null || locale === void 0 ? void 0 : locale.Accessibility.zoomIn) ?? "Zoom in",
+						className: toolbarButtonClassName,
+						disabled: zoomLevel >= 2,
 						onClick: () => handleToggleZoom(.25),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ZoomInIcon, { "aria-hidden": "true" })
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 						type: "button",
-						"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.zoomOut,
-						className: buttonClassName,
+						variant: "ghost",
+						size: "icon",
+						"aria-label": (locale === null || locale === void 0 ? void 0 : locale.Accessibility.zoomOut) ?? "Zoom out",
+						className: toolbarButtonClassName,
+						disabled: zoomLevel <= .5,
 						onClick: () => handleToggleZoom(-.25),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ZoomOutIcon, { "aria-hidden": "true" })
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 						type: "button",
-						"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.resetZoom,
-						className: buttonClassName,
+						variant: "ghost",
+						size: "icon",
+						"aria-label": (locale === null || locale === void 0 ? void 0 : locale.Accessibility.resetZoom) ?? "Reset zoom",
+						className: toolbarButtonClassName,
+						disabled: zoomLevel === 1,
 						onClick: () => handleToggleZoom("reset"),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.OneToOneIcon, { "aria-hidden": "true" })
 					})

package/lib/cjs/locale/ar-SA.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "إغلاق الشارة",
+		close: "إغلاق",
+		previous: "السابق",
+		next: "التالي",
 		imageGallery: "معرض الصور",
 		image: "الصورة {0} من {1}",
 		zoomIn: "تكبير",

package/lib/cjs/locale/ca-ES.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "Tanca la insígnia",
+		close: "Tanca",
+		previous: "Anterior",
+		next: "Següent",
 		imageGallery: "Galeria d’imatges",
 		image: "Imatge {0} de {1}",
 		zoomIn: "Apropa",

package/lib/cjs/locale/de-DE.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "Badge schließen",
+		close: "Schließen",
+		previous: "Zurück",
+		next: "Weiter",
 		imageGallery: "Bildergalerie",
 		image: "Bild {0} von {1}",
 		zoomIn: "Vergrößern",

package/lib/cjs/locale/en-US.js

@@ -18,6 +18,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "Close badge",
+		close: "Close",
+		previous: "Previous",
+		next: "Next",
 		imageGallery: "Image gallery",
 		image: "Image {0} of {1}",
 		zoomIn: "Zoom in",

package/lib/cjs/locale/es-ES.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "Cerrar insignia",
+		close: "Cerrar",
+		previous: "Anterior",
+		next: "Siguiente",
 		imageGallery: "Galería de imágenes",
 		image: "Imagen {0} de {1}",
 		zoomIn: "Acercar",

package/lib/cjs/locale/fa-IR.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "بستن نشان",
+		close: "بستن",
+		previous: "قبلی",
+		next: "بعدی",
 		imageGallery: "گالری تصاویر",
 		image: "تصویر {0} از {1}",
 		zoomIn: "بزرگ‌نمایی",

package/lib/cjs/locale/fr-FR.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "Fermer le badge",
+		close: "Fermer",
+		previous: "Précédent",
+		next: "Suivant",
 		imageGallery: "Galerie d’images",
 		image: "Image {0} sur {1}",
 		zoomIn: "Zoom avant",

package/lib/cjs/locale/id-ID.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "Tutup lencana",
+		close: "Tutup",
+		previous: "Sebelumnya",
+		next: "Berikutnya",
 		imageGallery: "Galeri gambar",
 		image: "Gambar {0} dari {1}",
 		zoomIn: "Perbesar",

package/lib/cjs/locale/it-IT.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "Chiudi badge",
+		close: "Chiudi",
+		previous: "Precedente",
+		next: "Successivo",
 		imageGallery: "Galleria immagini",
 		image: "Immagine {0} di {1}",
 		zoomIn: "Ingrandisci",

package/lib/cjs/locale/ja-JP.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "バッジを閉じる",
+		close: "閉じる",
+		previous: "前へ",
+		next: "次へ",
 		imageGallery: "画像ギャラリー",
 		image: "画像 {0}/{1}",
 		zoomIn: "拡大",

package/lib/cjs/locale/ko-KR.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "배지 닫기",
+		close: "닫기",
+		previous: "이전",
+		next: "다음",
 		imageGallery: "이미지 갤러리",
 		image: "이미지 {0}/{1}",
 		zoomIn: "확대",

package/lib/cjs/locale/pl-PL.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "Zamknij plakietkę",
+		close: "Zamknij",
+		previous: "Poprzedni",
+		next: "Następny",
 		imageGallery: "Galeria obrazów",
 		image: "Obraz {0} z {1}",
 		zoomIn: "Powiększ",

package/lib/cjs/locale/pt-BR.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "Fechar selo",
+		close: "Fechar",
+		previous: "Anterior",
+		next: "Próximo",
 		imageGallery: "Galeria de imagens",
 		image: "Imagem {0} de {1}",
 		zoomIn: "Ampliar",

package/lib/cjs/locale/ru-RU.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "Закрыть метку",
+		close: "Закрыть",
+		previous: "Предыдущее",
+		next: "Следующее",
 		imageGallery: "Галерея изображений",
 		image: "Изображение {0} из {1}",
 		zoomIn: "Увеличить",

package/lib/cjs/locale/sk-SK.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "Zavrieť odznak",
+		close: "Zavrieť",
+		previous: "Predchádzajúci",
+		next: "Nasledujúci",
 		imageGallery: "Galéria obrázkov",
 		image: "Obrázok {0} z {1}",
 		zoomIn: "Priblížiť",

package/lib/cjs/locale/vi-VN.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "Đóng huy hiệu",
+		close: "Đóng",
+		previous: "Trước",
+		next: "Tiếp theo",
 		imageGallery: "Thư viện ảnh",
 		image: "Ảnh {0} trên {1}",
 		zoomIn: "Phóng to",

package/lib/cjs/locale/zh-CN.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "关闭徽章",
+		close: "关闭",
+		previous: "上一个",
+		next: "下一个",
 		imageGallery: "图片库",
 		image: "第 {0} 张图片，共 {1} 张",
 		zoomIn: "放大",

package/lib/cjs/locale/zh-HK.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "關閉徽章",
+		close: "關閉",
+		previous: "上一個",
+		next: "下一個",
 		imageGallery: "圖片庫",
 		image: "第 {0} 張圖片，共 {1} 張",
 		zoomIn: "放大",

package/lib/cjs/locale/zh-TW.js

@@ -3,6 +3,9 @@
 const locale = { design: {
 	Accessibility: {
 		closeBadge: "關閉徽章",
+		close: "關閉",
+		previous: "上一個",
+		next: "下一個",
 		imageGallery: "圖片庫",
 		image: "第 {0} 張圖片，共 {1} 張",
 		zoomIn: "放大",