@nice2dev/ui-printing 1.2.1 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/ui-printing",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "React components for print management: template editor, template browser, print preview, print queue and print button",
   "keywords": [
     "printing",
@@ -47,10 +47,10 @@
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
-    "@nice2dev/ui": "^1.2.0"
+    "@nice2dev/ui": "^1.3.0"
   },
   "devDependencies": {
-    "@nice2dev/ui": "^1.2.1",
+    "@nice2dev/ui": "^1.3.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.7",
     "@vitejs/plugin-react": "^4.7.0",

package/src/print-button/NicePrintButton.tsx

@@ -139,7 +139,7 @@ export const NicePrintButton: React.FC<NicePrintButtonProps> = ({
                     >
                       {p.name}{' '}
                       {p.status === 'offline' || (!p.isOnline && p.status == null)
-                        ? '(Offline)'
+                        ? t('printing.offline', '(Offline)')
                         : p.status === 'busy'
                           ? `(${t('printing.printerBusyLabel', 'Busy')})`
                           : ''}
@@ -161,7 +161,7 @@ export const NicePrintButton: React.FC<NicePrintButtonProps> = ({
                               : s === 'busy'
                                 ? t('printing.printerBusyLabel', 'Busy')
                                 : s === 'offline'
-                                  ? 'Offline'
+                                  ? t('printing.offline2', 'Offline')
                                   : t('printing.printerError', 'Error')}
                           </span>
                         </>

package/src/print-preview/NicePrintPreview.tsx

@@ -1,5 +1,11 @@
-import { NiceIcon, useNiceTranslation } from '@nice2dev/ui';
-import React, { useState, useMemo, useEffect } from 'react';
+import {
+  NiceIcon,
+  useInputHints,
+  useIntent,
+  useNiceTranslation,
+  useOverlayFocus,
+} from '@nice2dev/ui';
+import React, { useState, useMemo, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import type {
@@ -259,18 +265,10 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
     if (!asPopup || !isOpen) {
       return;
     }
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        handleClose();
-      }
-    };
-    document.addEventListener('keydown', handler);
     document.body.style.overflow = 'hidden';
     return () => {
-      document.removeEventListener('keydown', handler);
       document.body.style.overflow = '';
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [asPopup, isOpen]);
 
   const dataList = useMemo(() => {
@@ -285,12 +283,53 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
 
   const currentData = dataList[entityIdx] ?? {};
 
+  // The popup holds focus; Escape / B close it — only the top overlay — and focus goes back to
+  // the opener (1.3.0, a document listener before). A pad: LB / RB between the records, LT / RT
+  // zoom.
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+  useOverlayFocus(dialogRef, { open: asPopup && isOpen, onClose: handleClose });
+  useIntent(
+    ['sectionPrev', 'sectionNext', 'pagePrev', 'pageNext'],
+    (d) => {
+      if (d.intent === 'sectionPrev' || d.intent === 'sectionNext') {
+        const by = d.intent === 'sectionNext' ? 1 : -1;
+        setEntityIdx((i) => Math.min(Math.max(i + by, 0), dataList.length - 1));
+      } else if (d.source === 'keyboard') {
+        return false;
+      } else {
+        const by = d.intent === 'pageNext' ? 0.1 : -0.1;
+        setZoom((z) => Math.min(2.5, Math.max(0.3, z + by)));
+      }
+    },
+    { ref: rootRef, enabled: !asPopup || isOpen },
+  );
+  useInputHints(
+    rootRef,
+    !asPopup || isOpen
+      ? [
+          ...(dataList.length > 1
+            ? [
+                {
+                  intent: 'sectionPrev' as const,
+                  label: t('printPreview.previousPage', 'Previous page'),
+                },
+                { intent: 'sectionNext' as const, label: t('printPreview.nextPage', 'Next page') },
+              ]
+            : []),
+          { intent: 'pageNext', label: t('printPreview.zoomIn', 'Zoom in') },
+          { intent: 'pagePrev', label: t('printPreview.zoomOut', 'Zoom out') },
+        ]
+      : [],
+  );
+
   if (asPopup && !isOpen) {
     return null;
   }
 
   const body = (
     <div
+      ref={rootRef}
       className={`${styles.root} ${theme === 'dark' ? styles.dark : ''} ${className ?? ''}`}
       style={style}
     >
@@ -303,8 +342,9 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
                 className={styles.navBtn}
                 disabled={entityIdx === 0}
                 onClick={() => setEntityIdx((i) => i - 1)}
+                aria-label={t('printPreview.previousPage', 'Previous page')}
               >
-                ‹
+                <NiceIcon name="chevron-left" size={14} />
               </button>
               <span className={styles.navLabel}>
                 {entityIdx + 1} / {dataList.length}
@@ -313,8 +353,9 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
                 className={styles.navBtn}
                 disabled={entityIdx >= dataList.length - 1}
                 onClick={() => setEntityIdx((i) => i + 1)}
+                aria-label={t('printPreview.nextPage', 'Next page')}
               >
-                ›
+                <NiceIcon name="chevron-right" size={14} />
               </button>
             </>
           )}
@@ -324,19 +365,28 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
         </div>
 
         <div className={styles.zoomBar}>
-          <button className={styles.zoomBtn} onClick={() => setZoom((z) => Math.max(0.3, z - 0.1))}>
-            −
+          <button
+            className={styles.zoomBtn}
+            onClick={() => setZoom((z) => Math.max(0.3, z - 0.1))}
+            aria-label={t('printPreview.zoomOut', 'Zoom out')}
+          >
+            <NiceIcon name="minus" size={14} />
           </button>
           <span className={styles.zoomLabel}>{Math.round(zoom * 100)}%</span>
-          <button className={styles.zoomBtn} onClick={() => setZoom((z) => Math.min(2.5, z + 0.1))}>
-            +
+          <button
+            className={styles.zoomBtn}
+            onClick={() => setZoom((z) => Math.min(2.5, z + 0.1))}
+            aria-label={t('printPreview.zoomIn', 'Zoom in')}
+          >
+            <NiceIcon name="plus" size={14} />
           </button>
           <button
             className={styles.zoomBtn}
             onClick={() => setZoom(0.8)}
             title={t('printing.fit', 'Fit')}
+            aria-label={t('printing.fit', 'Fit')}
           >
-            ⊡
+            <NiceIcon name="expand" size={14} />
           </button>
         </div>
 
@@ -370,7 +420,10 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
       <div className={styles.footerBar}>
         <span>{template.name}</span>
         <span>
-          {template.paperSize} · {template.orientation === 'portrait' ? 'Pion' : 'Poziom'}
+          {template.paperSize} ·{' '}
+          {template.orientation === 'portrait'
+            ? t('printing.portrait', 'Portrait')
+            : t('printing.landscape', 'Landscape')}
         </span>
         {template.sections.reduce((acc, s) => acc + s.fields.length, 0)}{' '}
         {t('printing.fields', 'fields')}
@@ -402,8 +455,10 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
       role="presentation"
     >
       <div
+        ref={dialogRef}
         role="dialog"
         aria-modal="true"
+        aria-label={template.name}
         style={{
           background: 'var(--nice-bg-elevated, var(--nice-bg-primary, #ffffff))',
           borderRadius: 12,

package/src/template-browser/NiceTemplateBrowser.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events -- modal overlay backdrops (Esc-on-parent provides keyboard close), selection rows in .map() accompanied by visible cursor:pointer styling and sibling buttons; full keyboard migration via useAccessibleClick + extracted subcomponents tracked in TODO_1.0.10 A2.3 */
-import { NiceIcon, useNiceTranslation } from '@nice2dev/ui';
+import { clickOnActivationKey, NiceIcon, useNiceTranslation } from '@nice2dev/ui';
 import React, { useState } from 'react';
 
 import type {
@@ -144,6 +143,9 @@ export const NiceTemplateBrowser: React.FC<NiceTemplateBrowserProps> = ({
       <div className={styles.grid}>
         {filtered.map((tpl) => (
           <div
+            role={onSelect ? 'button' : undefined}
+            tabIndex={onSelect ? 0 : undefined}
+            onKeyDown={onSelect ? clickOnActivationKey : undefined}
             key={tpl.id}
             className={`${styles.card} ${selectedId === tpl.id ? styles.cardSelected : ''}`}
             onClick={() => onSelect?.(tpl)}

package/src/template-editor/NiceTemplateEditor.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events -- modal overlay backdrops (Esc-on-parent provides keyboard close), selection rows in .map() accompanied by visible cursor:pointer styling and sibling buttons; full keyboard migration via useAccessibleClick + extracted subcomponents tracked in TODO_1.0.10 A2.3 */
-import { NiceAppShell, NiceIcon, useNiceTranslation } from '@nice2dev/ui';
+import { clickOnActivationKey, NiceAppShell, NiceIcon, useNiceTranslation } from '@nice2dev/ui';
 import type { NiceTranslateFn } from '@nice2dev/ui';
 import React, {
   useState,
@@ -286,6 +285,7 @@ const FieldElement: React.FC<FieldElementProps> = ({
   onResizeStart,
   readOnly,
 }) => {
+  const { t } = useNiceTranslation();
   const pos = field.position;
   const st = field.style;
   const mm = (v: number) => v * zoom * MM_TO_PX;
@@ -330,7 +330,12 @@ const FieldElement: React.FC<FieldElementProps> = ({
   };
 
   return (
-    <div style={baseStyle} onClick={onClick} onMouseDown={readOnly ? undefined : onDragStart}>
+    <div
+      role="presentation"
+      style={baseStyle}
+      onClick={onClick}
+      onMouseDown={readOnly ? undefined : onDragStart}
+    >
       {isLine ? (
         <div
           style={{
@@ -345,7 +350,7 @@ const FieldElement: React.FC<FieldElementProps> = ({
       ) : isBarcode ? (
         <div className={styles.fieldBarcodePlaceholder}>
           <NiceIcon name={field.type === 'qr' ? 'qr-code' : 'barcode'} size={14} />{' '}
-          {field.type === 'qr' ? 'QR' : 'Barcode'}
+          {field.type === 'qr' ? 'QR' : t('templateEditor.barcode', 'Barcode')}
         </div>
       ) : field.type === 'signature' ? (
         <div className={styles.fieldSignaturePlaceholder}>
@@ -899,6 +904,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
               <div className={styles.fieldList}>
                 {(filteredFields ?? []).map((f) => (
                   <div
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={clickOnActivationKey}
                     key={f.path}
                     className={styles.fieldItem}
                     draggable
@@ -953,6 +961,9 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                 .reverse()
                 .map((f) => (
                   <div
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={clickOnActivationKey}
                     key={f.id}
                     className={`${styles.layerItem} ${selectedIds.has(f.id) ? styles.layerItemSelected : ''}`}
                     onClick={() => onSelectField(f.id)}
@@ -1121,7 +1132,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                       {
                         id: uid(),
                         type: 'text',
-                        text: 'COPY',
+                        text: t('templateEditor.copy', 'COPY'),
                         opacity: 0.12,
                         angle: -45,
                         fontSize: 60,
@@ -1298,7 +1309,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
                       onUpdateTpl({ margins: { ...tpl.margins, [side]: +e.target.value } })
                     }
                   />
-                  <span className={styles.settingsUnit}>mm</span>
+                  <span className={styles.settingsUnit}>{t('templateEditor.mm', 'mm')}</span>
                 </div>
               ))}
             </div>
@@ -1409,8 +1420,8 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
               {[
                 { key: 'x' as const, label: 'X', unit: 'mm' },
                 { key: 'y' as const, label: 'Y', unit: 'mm' },
-                { key: 'width' as const, label: 'Szer.', unit: 'mm' },
-                { key: 'height' as const, label: 'Wys.', unit: 'mm' },
+                { key: 'width' as const, label: t('templateEditor.widthShort', 'W'), unit: 'mm' },
+                { key: 'height' as const, label: t('templateEditor.heightShort', 'H'), unit: 'mm' },
               ].map(({ key, label, unit }) => (
                 <div key={key} className={styles.posCell}>
                   <label className={styles.posLabel}>{label}</label>
@@ -1693,7 +1704,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
                   value={field.style.padding ?? 0}
                   onChange={(e) => s({ padding: +e.target.value })}
                 />
-                <span className={styles.styleUnit}>mm</span>
+                <span className={styles.styleUnit}>{t('templateEditor.mm', 'mm')}</span>
               </div>
               <div className={styles.styleRow}>
                 <label className={styles.styleLabel}>
@@ -1838,9 +1849,9 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
               >
                 <option value="eq">= {tr('printing.editor.opEqual', 'equal')}</option>
                 <option value="neq">≠ {tr('printing.editor.opNotEqual', 'not equal')}</option>
-                <option value="gt">&gt; wieksze</option>
-                <option value="lt">&lt; mniejsze</option>
-                <option value="contains">zawiera</option>
+                <option value="gt">{t('templateEditor.greaterThan', '> greater than')}</option>
+                <option value="lt">{t('templateEditor.lessThan', '< less than')}</option>
+                <option value="contains">{t('templateEditor.contains', 'contains')}</option>
               </select>
             </div>
             <div className={styles.styleRow}>
@@ -1906,6 +1917,7 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
   style,
   theme = 'light',
 }) => {
+  const { t } = useNiceTranslation();
   const [{ past, present: tpl, future }, dispatch] = useReducer(historyReducer, {
     past: [],
     present: initialTemplate ?? defaultTemplate(),
@@ -1984,7 +1996,7 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
             {
               id: uid(),
               type: 'text',
-              text: 'COPY',
+              text: t('templateEditor.copy', 'COPY'),
               opacity: 0.12,
               angle: -45,
               fontSize: 60,
@@ -2027,7 +2039,7 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
       onChange?.({ ...tpl, ...updated });
       setSelectedIds(new Set([field.id]));
     },
-    [tpl, activeSection, onChange],
+    [tpl, activeSection, onChange, t, tr, update],
   );
 
   // -- Drop from left panel --
@@ -2457,7 +2469,11 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
       }
     >
       {/* Canvas area */}
-      <div className={styles.canvasArea} onClick={() => setSelectedIds(new Set())}>
+      <div
+        role="presentation"
+        className={styles.canvasArea}
+        onClick={() => setSelectedIds(new Set())}
+      >
         {/* Test data bar */}
         {Array.isArray(sampleData) && sampleData.length > 0 && (
           <div className={styles.testDataBar}>
@@ -2488,7 +2504,11 @@ export const NiceTemplateEditor: React.FC<NiceTemplateEditorProps> = ({
         )}
 
         {/* Scrollable paper area */}
-        <div className={styles.paperScroll} onClick={(e) => e.stopPropagation()}>
+        <div
+          role="presentation"
+          className={styles.paperScroll}
+          onClick={(e) => e.stopPropagation()}
+        >
           <div className={styles.paperShadow} style={{ width: paperWPx, minHeight: paperHPx }}>
             {/* Margin guides */}
             <div