@clicoh/orion-library 1.2.0-beta.24 → 1.2.0-beta.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/assets/css/expresivo.css +136 -11
  2. package/dist/components/01-atoms/CodeBlock/CodeBlock.d.ts +19 -5
  3. package/dist/components/01-atoms/CodeBlock/CodeBlock.d.ts.map +1 -1
  4. package/dist/components/01-atoms/CodeBlock/CodeBlock.jsx +41 -9
  5. package/dist/components/01-atoms/CodeBlock/CodeBlock.jsx.map +1 -1
  6. package/dist/components/01-atoms/MultiSelect/MultiSelect.d.ts +25 -4
  7. package/dist/components/01-atoms/MultiSelect/MultiSelect.d.ts.map +1 -1
  8. package/dist/components/01-atoms/MultiSelect/MultiSelect.jsx +39 -5
  9. package/dist/components/01-atoms/MultiSelect/MultiSelect.jsx.map +1 -1
  10. package/dist/components/01-atoms/MultiSelect/index.d.ts +1 -1
  11. package/dist/components/01-atoms/MultiSelect/index.d.ts.map +1 -1
  12. package/dist/components/01-atoms/Select/Select.d.ts +1 -1
  13. package/dist/components/01-atoms/Select/Select.jsx +1 -1
  14. package/dist/components/01-atoms/Select/SelectList.d.ts +4 -0
  15. package/dist/components/01-atoms/Select/SelectList.d.ts.map +1 -1
  16. package/dist/components/01-atoms/Select/SelectList.jsx +8 -2
  17. package/dist/components/01-atoms/Select/SelectList.jsx.map +1 -1
  18. package/dist/components/02-molecules/Accordion/AccordionSection.d.ts +17 -1
  19. package/dist/components/02-molecules/Accordion/AccordionSection.d.ts.map +1 -1
  20. package/dist/components/02-molecules/Accordion/AccordionSection.jsx +46 -5
  21. package/dist/components/02-molecules/Accordion/AccordionSection.jsx.map +1 -1
  22. package/dist/components/02-molecules/DatePicker/DatePicker.d.ts +14 -1
  23. package/dist/components/02-molecules/DatePicker/DatePicker.d.ts.map +1 -1
  24. package/dist/components/02-molecules/DatePicker/DatePicker.jsx +18 -5
  25. package/dist/components/02-molecules/DatePicker/DatePicker.jsx.map +1 -1
  26. package/dist/components/02-molecules/ImageViewer/ImageViewer.d.ts +45 -4
  27. package/dist/components/02-molecules/ImageViewer/ImageViewer.d.ts.map +1 -1
  28. package/dist/components/02-molecules/ImageViewer/ImageViewer.jsx +106 -52
  29. package/dist/components/02-molecules/ImageViewer/ImageViewer.jsx.map +1 -1
  30. package/dist/components/02-molecules/ImageViewer/ImageViewerDocument.d.ts +16 -5
  31. package/dist/components/02-molecules/ImageViewer/ImageViewerDocument.d.ts.map +1 -1
  32. package/dist/components/02-molecules/ImageViewer/ImageViewerDocument.jsx +30 -13
  33. package/dist/components/02-molecules/ImageViewer/ImageViewerDocument.jsx.map +1 -1
  34. package/dist/components/02-molecules/Table/Table.d.ts +28 -1
  35. package/dist/components/02-molecules/Table/Table.d.ts.map +1 -1
  36. package/dist/components/02-molecules/Table/Table.jsx +119 -64
  37. package/dist/components/02-molecules/Table/Table.jsx.map +1 -1
  38. package/dist/components/02-molecules/Table/index.d.ts +1 -1
  39. package/dist/components/02-molecules/Table/index.d.ts.map +1 -1
  40. package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts +3 -1
  41. package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.d.ts.map +1 -1
  42. package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx +7 -3
  43. package/dist/components/04-templates/DashboardTemplate/DashboardTemplate.jsx.map +1 -1
  44. package/dist/components/04-templates/LoginTemplate/LoginForm.d.ts +5 -2
  45. package/dist/components/04-templates/LoginTemplate/LoginForm.d.ts.map +1 -1
  46. package/dist/components/04-templates/LoginTemplate/LoginForm.jsx +3 -2
  47. package/dist/components/04-templates/LoginTemplate/LoginForm.jsx.map +1 -1
  48. package/expresivo/ExpCollapseToggle/ExpCollapseToggle.d.ts +6 -2
  49. package/expresivo/ExpCollapseToggle/ExpCollapseToggle.d.ts.map +1 -1
  50. package/expresivo/ExpCollapseToggle/ExpCollapseToggle.jsx +5 -3
  51. package/expresivo/ExpCollapseToggle/ExpCollapseToggle.jsx.map +1 -1
  52. package/expresivo/ExpLadder/ExpLadder.d.ts +2 -1
  53. package/expresivo/ExpLadder/ExpLadder.d.ts.map +1 -1
  54. package/expresivo/ExpLadder/ExpLadder.jsx +7 -4
  55. package/expresivo/ExpLadder/ExpLadder.jsx.map +1 -1
  56. package/expresivo/ExpMascot/ExpMascot.d.ts +6 -2
  57. package/expresivo/ExpMascot/ExpMascot.d.ts.map +1 -1
  58. package/expresivo/ExpMascot/ExpMascot.jsx +6 -3
  59. package/expresivo/ExpMascot/ExpMascot.jsx.map +1 -1
  60. package/expresivo/ExpPageHero/ExpPageHero.d.ts +21 -5
  61. package/expresivo/ExpPageHero/ExpPageHero.d.ts.map +1 -1
  62. package/expresivo/ExpPageHero/ExpPageHero.jsx +28 -8
  63. package/expresivo/ExpPageHero/ExpPageHero.jsx.map +1 -1
  64. package/expresivo/ExpPageHero/index.d.ts +1 -1
  65. package/expresivo/ExpPageHero/index.d.ts.map +1 -1
  66. package/expresivo/ExpPillButton/ExpPillButton.d.ts +8 -4
  67. package/expresivo/ExpPillButton/ExpPillButton.d.ts.map +1 -1
  68. package/expresivo/ExpPillButton/ExpPillButton.jsx +42 -12
  69. package/expresivo/ExpPillButton/ExpPillButton.jsx.map +1 -1
  70. package/expresivo/ExpPillButton/index.d.ts +1 -1
  71. package/expresivo/ExpPillButton/index.d.ts.map +1 -1
  72. package/expresivo/ExpTabs/ExpTabs.d.ts +52 -0
  73. package/expresivo/ExpTabs/ExpTabs.d.ts.map +1 -0
  74. package/expresivo/ExpTabs/ExpTabs.jsx +105 -0
  75. package/expresivo/ExpTabs/ExpTabs.jsx.map +1 -0
  76. package/expresivo/ExpTabs/index.d.ts +3 -0
  77. package/expresivo/ExpTabs/index.d.ts.map +1 -0
  78. package/expresivo/ExpTabs/index.js +2 -0
  79. package/expresivo/ExpTabs/index.js.map +1 -0
  80. package/expresivo/index.d.ts +1 -0
  81. package/expresivo/index.d.ts.map +1 -1
  82. package/expresivo/index.js +1 -0
  83. package/expresivo/index.js.map +1 -1
  84. package/package.json +1 -1
@@ -4,7 +4,7 @@ import { useEffect, useId, useRef, useState, } from 'react';
4
4
  import { createPortal } from 'react-dom';
5
5
  import { MdFullscreen, MdFullscreenExit, MdOpenInNew, MdRotateRight, MdZoomIn, MdZoomOut, } from 'react-icons/md';
6
6
  import { Each, Show } from '../../00-base';
7
- import { List, Paragraph } from '../../01-atoms';
7
+ import { IconButton, List, Paragraph, Tooltip } from '../../01-atoms';
8
8
  import { TabItem } from '../Tab/TabItem';
9
9
  import { ImageViewerDocument, } from './ImageViewerDocument';
10
10
  import { IMAGE_VIEWER_IMAGE_ATTRIBUTE, ImageViewerImage, } from './ImageViewerImage';
@@ -30,7 +30,11 @@ const PAN_DIRECTIONS = {
30
30
  ArrowUp: { x: 0, y: 1 },
31
31
  ArrowDown: { x: 0, y: -1 },
32
32
  };
33
- const TOOL_CLASSNAME = 'hover:bg-gray-5 focus-visible:ring-lavender disabled:text-gray-3 dark:disabled:text-gray-1 dark:hover:bg-gray-1 flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm text-lg text-black focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:hover:bg-transparent dark:text-white';
33
+ /**
34
+ * The "open in a new tab" action is a link, so it cannot be an `IconButton`;
35
+ * it copies its look and gets the same `Tooltip`.
36
+ */
37
+ const LINK_ACTION_CLASSNAME = 'text-gray-1 dark:text-gray-5 focus-visible:ring-lavender dark:focus-visible:ring-lavender-dark flex items-center justify-center rounded-sm p-2 text-base transition-colors hover:bg-black hover:text-white focus-visible:ring-2 focus-visible:outline-none dark:hover:bg-white dark:hover:text-black';
34
38
  /**
35
39
  * How far the images may leave the center before their edge enters the pane:
36
40
  * half the overflow on each axis, none when the image already fits. Read from
@@ -89,6 +93,19 @@ const clampOffset = (offset, bounds) => ({
89
93
  * allow CORS; when it cannot be loaded, the view shows its description and
90
94
  * the same link.
91
95
  *
96
+ * `tabsPlacement="toolbar"` folds the tabs into the toolbar: one bar on top,
97
+ * tabs on the left and actions on the right. With no tabs and a PDF of several
98
+ * pages, the pager takes that left side instead of floating over the page.
99
+ * Every toolbar action shows its label as a tooltip, in both placements.
100
+ *
101
+ * A single view has no tabs unless `showSingleTab` is set: then its tab is
102
+ * drawn in either placement, so a one-sided file reads like the views of a
103
+ * two-sided one. Being a tab, a PDF with it keeps its pager over the page.
104
+ *
105
+ * A view without `src` keeps its tab and draws its `emptyContent` in the frame
106
+ * instead — a side that was never uploaded, for instance. With nothing to
107
+ * inspect, the toolbar actions are disabled.
108
+ *
92
109
  * @component
93
110
  * @example
94
111
  * const [viewId, setViewId] = useState('front');
@@ -148,10 +165,34 @@ const clampOffset = (offset, bounds) => ({
148
165
  * }}
149
166
  * />
150
167
  *
168
+ * @example
169
+ * <ImageViewer
170
+ * tabsPlacement="toolbar"
171
+ * views={[
172
+ * { id: 'front', label: 'Front', src: '/front.jpg', alt: 'Document front' },
173
+ * {
174
+ * id: 'back',
175
+ * label: 'Back',
176
+ * alt: 'Document back',
177
+ * emptyContent: <p>Not uploaded yet</p>,
178
+ * },
179
+ * ]}
180
+ * labels={labels}
181
+ * />
182
+ *
183
+ * @example
184
+ * <ImageViewer
185
+ * showSingleTab
186
+ * views={[{ id: 'front', label: 'Front', src: '/front.jpg', alt: 'Document front' }]}
187
+ * labels={labels}
188
+ * />
189
+ *
151
190
  * @param {Object} props - The properties of the ImageViewer component.
152
- * @param {TImageView[]} props.views - Files to display. In `tabs`, more than one renders a tab per view; in `split`, a pane per view. A view's optional `indicator` sits after its label and becomes part of the tab's accessible name, so give it its own (for an icon, `role="img"` and `aria-label`). In `tabs` with a single view there are no tabs, so no indicator is shown. A view's optional `crop` (`left`, `top`, `width`, `height` as fractions from 0 to 1 of the image) shows only that region; a crop outside the image is clamped to it, and one with no area left falls back to the whole image. A view's `type` is `image` unless set to `pdf`; `crop` is ignored on a `pdf`.
153
- * @param {TImageViewerLabels} props.labels - Accessible names of the toolbar actions. With `pdf` views, `openDocument` names the action that opens the original file in a new tab, and `previousPage` / `nextPage` name the pager of a document with several pages; without the pair, only the first page is reachable.
191
+ * @param {TImageView[]} props.views - Files to display. In `tabs`, more than one renders a tab per view; in `split`, a pane per view. A view's optional `indicator` sits after its label and becomes part of the tab's accessible name, so give it its own (for an icon, `role="img"` and `aria-label`). In `tabs` with a single view there are no tabs, so no indicator is shown, unless `showSingleTab` is set. A view's optional `crop` (`left`, `top`, `width`, `height` as fractions from 0 to 1 of the image) shows only that region; a crop outside the image is clamped to it, and one with no area left falls back to the whole image. A view's `type` is `image` unless set to `pdf`; `crop` is ignored on a `pdf`. A view without `src` draws its optional `emptyContent` in the frame (or its pane, in `split`) instead of a file.
192
+ * @param {TImageViewerLabels} props.labels - Accessible names of the toolbar actions, also shown as their tooltips. With `pdf` views, `openDocument` names the action that opens the original file in a new tab, and `previousPage` / `nextPage` name the pager of a document with several pages; without the pair, only the first page is reachable. `pageStatus(page, pageCount)` writes the pager text (for instance `Page 2 of 5`); without it the pager reads `2 / 5`.
154
193
  * @param {TImageViewerLayout} [props.layout='tabs'] - `tabs` shows one view at a time; `split` shows every view at once, one pane each.
194
+ * @param {TImageViewerTabsPlacement} [props.tabsPlacement='below'] - `below` puts the tabs in their own row under the toolbar; `toolbar` puts them on the left of the toolbar, after the title, and also moves the pager of a several-page PDF there when there are no tabs. Ignored in `split`.
195
+ * @param {boolean} [props.showSingleTab=false] - Draws the tab of a single view, in either `tabsPlacement`. With two or more views it changes nothing. Ignored in `split`.
155
196
  * @param {ReactNode} [props.title] - Optional heading rendered on the left of the toolbar.
156
197
  * @param {ReactNode} [props.emptyState] - Content rendered when there is no image.
157
198
  * @param {string} [props.activeId] - Id of the view to show. Makes the viewer controlled; an id that matches no view falls back to the first one. Ignored in `split`.
@@ -160,11 +201,12 @@ const clampOffset = (offset, bounds) => ({
160
201
  *
161
202
  * @returns {ReactNode} The rendered ImageViewer component.
162
203
  */
163
- export function ImageViewer({ views, labels, layout = 'tabs', title, emptyState, activeId, onViewChange, ...restProps }) {
204
+ export function ImageViewer({ views, labels, layout = 'tabs', tabsPlacement = 'below', showSingleTab = false, title, emptyState, activeId, onViewChange, ...restProps }) {
164
205
  const [internalIndex, setInternalIndex] = useState(0);
165
206
  const [transform, setTransform] = useState(INITIAL_TRANSFORM);
166
207
  const [isFullscreen, setIsFullscreen] = useState(false);
167
208
  const [isDragging, setIsDragging] = useState(false);
209
+ const [pagerSlot, setPagerSlot] = useState(null);
168
210
  const panelRef = useRef(null);
169
211
  const dragRef = useRef(null);
170
212
  const generatedId = useId();
@@ -196,12 +238,16 @@ export function ImageViewer({ views, labels, layout = 'tabs', title, emptyState,
196
238
  const activeView = views[activeIndex] ?? views[0];
197
239
  const hasView = Boolean(activeView);
198
240
  const isSplit = layout === 'split';
199
- const hasTabs = !isSplit && views.length > 1;
241
+ const hasTabs = !isSplit && (views.length > 1 || (showSingleTab && views.length === 1));
242
+ const isToolbarPlacement = !isSplit && tabsPlacement === 'toolbar';
243
+ const hasToolbarTabs = isToolbarPlacement && hasTabs;
200
244
  const shownViews = isSplit ? views : activeView ? [activeView] : [];
245
+ const hasContent = shownViews.some(({ src }) => Boolean(src));
201
246
  const documentHref = !isSplit && activeView?.type === 'pdf' ? activeView.src : undefined;
247
+ const hasToolbarPager = isToolbarPlacement && !hasTabs && !!documentHref;
202
248
  const panelLabel = shownViews.map(({ alt }) => alt).join(', ') || undefined;
203
249
  const { zoom, rotation, offset } = transform;
204
- const canPan = hasView && zoom > MIN_ZOOM;
250
+ const canPan = hasContent && zoom > MIN_ZOOM;
205
251
  const imageStyle = {
206
252
  transform: `translate(${offset.x}px, ${offset.y}px) rotate(${rotation}deg) scale(${zoom})`,
207
253
  };
@@ -263,12 +309,18 @@ export function ImageViewer({ views, labels, layout = 'tabs', title, emptyState,
263
309
  };
264
310
  /**
265
311
  * Los controles que viven sobre la imagen (el paginador de un PDF) deben
266
- * recibir su clic: capturar el puntero aqui se lo quitaria.
312
+ * recibir su clic: capturar el puntero aqui se lo quitaria. El paginador en
313
+ * la barra llega por un portal, asi que React propaga sus eventos al panel
314
+ * aunque no este dentro de el en el DOM.
267
315
  */
268
- const isControl = (target) => target instanceof Element && target.closest('button, a') !== null;
316
+ const isControl = (target, panel) => target instanceof Element &&
317
+ (target.closest('button, a') !== null || !panel.contains(target));
269
318
  const startDrag = (event) => {
270
- if (!canPan || event.button !== 0 || isControl(event.target))
319
+ if (!canPan ||
320
+ event.button !== 0 ||
321
+ isControl(event.target, event.currentTarget)) {
271
322
  return;
323
+ }
272
324
  event.currentTarget.setPointerCapture(event.pointerId);
273
325
  dragRef.current = {
274
326
  pointerId: event.pointerId,
@@ -309,58 +361,60 @@ export function ImageViewer({ views, labels, layout = 'tabs', title, emptyState,
309
361
  }, bounds),
310
362
  }));
311
363
  };
312
- const renderView = (view) => (<Show key={view.id}>
313
- <Show.When isTrue={view.type === 'pdf'}>
314
- <ImageViewerDocument src={view.src} alt={view.alt} style={imageStyle} isAnimated={!isDragging} labels={labels} onPageChange={recenter}/>
315
- </Show.When>
316
- <Show.Else>
317
- <ImageViewerImage src={view.src} alt={view.alt} crop={view.crop} style={imageStyle} isAnimated={!isDragging}/>
318
- </Show.Else>
319
- </Show>);
364
+ const renderView = ({ id, src, alt, type, crop, emptyContent, }) => {
365
+ if (!src) {
366
+ return (<div key={id} className="flex h-full w-full items-center justify-center">
367
+ {emptyContent}
368
+ </div>);
369
+ }
370
+ return (<Show key={id}>
371
+ <Show.When isTrue={type === 'pdf'}>
372
+ <ImageViewerDocument src={src} alt={alt} style={imageStyle} isAnimated={!isDragging} labels={labels} pagerContainer={hasToolbarPager ? pagerSlot : undefined} onPageChange={recenter}/>
373
+ </Show.When>
374
+ <Show.Else>
375
+ <ImageViewerImage src={src} alt={alt} crop={crop} style={imageStyle} isAnimated={!isDragging}/>
376
+ </Show.Else>
377
+ </Show>);
378
+ };
379
+ const tabList = (<List role="tablist" aria-orientation="horizontal" orientation="horizontal" className={clsx('gap-6', hasToolbarTabs
380
+ ? 'min-w-0 self-stretch overflow-x-auto'
381
+ : 'border-gray-5 dark:border-gray-1 flex-none items-end border-b px-4')}>
382
+ <Each of={views} render={({ id, label, indicator }, index) => (<li key={id} role="presentation" className={hasToolbarTabs ? 'flex flex-none self-stretch' : undefined}>
383
+ <TabItem id={`${generatedId}-tab-${index}`} aria-controls={`${generatedId}-panel`} aria-selected={index === activeIndex} tabIndex={index === activeIndex ? 0 : -1} isActive={index === activeIndex} onClick={() => selectView(index)} className={hasToolbarTabs ? 'h-full' : 'pb-2'}>
384
+ <span className="inline-flex items-center gap-1.5">
385
+ {label}
386
+ {!!indicator && (<span className="flex flex-none items-center">
387
+ {indicator}
388
+ </span>)}
389
+ </span>
390
+ </TabItem>
391
+ </li>)}/>
392
+ </List>);
320
393
  const frame = (<section {...restProps} className={clsx('border-gray-5 dark:border-gray-1 flex min-h-0 flex-col overflow-hidden rounded-lg border', isFullscreen ? 'h-full w-full bg-white dark:bg-black' : undefined, !isFullscreen ? restProps.className : undefined)}>
321
- <div className="border-gray-5 bg-gray-6 dark:border-gray-1 dark:bg-black-1 flex flex-none items-center justify-between gap-4 border-b px-4 py-3">
394
+ <div className={clsx('border-gray-5 bg-gray-6 dark:border-gray-1 dark:bg-black-1 flex flex-none justify-between gap-4 border-b px-4', hasToolbarTabs ? 'min-h-14 items-stretch' : 'items-center py-3')}>
322
395
  <Show>
323
396
  <Show.When isTrue={Boolean(title)}>
324
- <Paragraph size="subtitle-1" className="dark:text-white">
397
+ <Paragraph size="subtitle-1" className="self-center dark:text-white">
325
398
  {title}
326
399
  </Paragraph>
327
400
  </Show.When>
328
401
  </Show>
329
- <div className="ml-auto flex items-center gap-1.5">
330
- {!!documentHref && !!labels.openDocument && (<a href={documentHref} target="_blank" rel="noopener noreferrer" aria-label={labels.openDocument} className={TOOL_CLASSNAME}>
331
- <MdOpenInNew aria-hidden="true"/>
332
- </a>)}
333
- <button type="button" aria-label={labels.zoomOut} disabled={!hasView || zoom <= MIN_ZOOM} onClick={() => changeZoom(-ZOOM_STEP)} className={TOOL_CLASSNAME}>
334
- <MdZoomOut aria-hidden="true"/>
335
- </button>
336
- <button type="button" aria-label={labels.zoomIn} disabled={!hasView || zoom >= MAX_ZOOM} onClick={() => changeZoom(ZOOM_STEP)} className={TOOL_CLASSNAME}>
337
- <MdZoomIn aria-hidden="true"/>
338
- </button>
339
- <button type="button" aria-label={labels.rotate} disabled={!hasView} onClick={rotate} className={TOOL_CLASSNAME}>
340
- <MdRotateRight aria-hidden="true"/>
341
- </button>
342
- <button type="button" aria-label={isFullscreen ? labels.exitFullscreen : labels.enterFullscreen} aria-pressed={isFullscreen} disabled={!hasView} onClick={toggleFullscreen} className={TOOL_CLASSNAME}>
343
- {isFullscreen ? (<MdFullscreenExit aria-hidden="true"/>) : (<MdFullscreen aria-hidden="true"/>)}
344
- </button>
402
+ {!!hasToolbarTabs && tabList}
403
+ {!!hasToolbarPager && (<div ref={setPagerSlot} className="flex items-center gap-1"/>)}
404
+ <div className="ml-auto flex flex-none items-center gap-1 self-center">
405
+ {!!documentHref && !!labels.openDocument && (<Tooltip message={labels.openDocument}>
406
+ <a href={documentHref} target="_blank" rel="noopener noreferrer" aria-label={labels.openDocument} className={LINK_ACTION_CLASSNAME}>
407
+ <MdOpenInNew aria-hidden="true"/>
408
+ </a>
409
+ </Tooltip>)}
410
+ <IconButton icon={<MdZoomOut />} label={labels.zoomOut} disabled={!hasContent || zoom <= MIN_ZOOM} onClick={() => changeZoom(-ZOOM_STEP)}/>
411
+ <IconButton icon={<MdZoomIn />} label={labels.zoomIn} disabled={!hasContent || zoom >= MAX_ZOOM} onClick={() => changeZoom(ZOOM_STEP)}/>
412
+ <IconButton icon={<MdRotateRight />} label={labels.rotate} disabled={!hasContent} onClick={rotate}/>
413
+ <IconButton icon={isFullscreen ? <MdFullscreenExit /> : <MdFullscreen />} label={isFullscreen ? labels.exitFullscreen : labels.enterFullscreen} aria-pressed={isFullscreen} disabled={!hasContent && !isFullscreen} onClick={toggleFullscreen}/>
345
414
  </div>
346
415
  </div>
347
416
 
348
- <Show>
349
- <Show.When isTrue={hasTabs}>
350
- <List role="tablist" aria-orientation="horizontal" orientation="horizontal" className="border-gray-5 dark:border-gray-1 flex-none items-end gap-6 border-b px-4">
351
- <Each of={views} render={({ id, label, indicator }, index) => (<li key={id} role="presentation">
352
- <TabItem id={`${generatedId}-tab-${index}`} aria-controls={`${generatedId}-panel`} aria-selected={index === activeIndex} tabIndex={index === activeIndex ? 0 : -1} isActive={index === activeIndex} onClick={() => selectView(index)} className="pb-2">
353
- <span className="inline-flex items-center gap-1.5">
354
- {label}
355
- {!!indicator && (<span className="flex flex-none items-center">
356
- {indicator}
357
- </span>)}
358
- </span>
359
- </TabItem>
360
- </li>)}/>
361
- </List>
362
- </Show.When>
363
- </Show>
417
+ {!!hasTabs && !hasToolbarTabs && tabList}
364
418
 
365
419
  <div ref={panelRef} id={`${generatedId}-panel`} role={hasTabs ? 'tabpanel' : 'group'} aria-labelledby={hasTabs ? `${generatedId}-tab-${activeIndex}` : undefined} aria-label={hasTabs ? undefined : panelLabel} tabIndex={canPan ? 0 : undefined} onPointerDown={startDrag} onPointerMove={moveDrag} onPointerUp={endDrag} onPointerCancel={endDrag} onKeyDown={panWithKeyboard} className={clsx('bg-gray-7 dark:bg-black-2 focus-visible:ring-lavender flex min-h-0 flex-1 items-center justify-center overflow-hidden p-5 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset', canPan && 'touch-none select-none', canPan && (isDragging ? 'cursor-grabbing' : 'cursor-grab'))}>
366
420
  <Show>
@@ -1 +1 @@
1
- {"version":3,"file":"ImageViewer.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/ImageViewer/ImageViewer.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ImageViewer.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/ImageViewer/ImageViewer.tsx"],"names":[],"mappings":"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"}
@@ -3,6 +3,7 @@ export type TImageViewerDocumentLabels = {
3
3
  openDocument?: string;
4
4
  previousPage?: string;
5
5
  nextPage?: string;
6
+ pageStatus?: (page: number, pageCount: number) => string;
6
7
  };
7
8
  type ImageViewerDocumentProps = {
8
9
  src: string;
@@ -10,6 +11,7 @@ type ImageViewerDocumentProps = {
10
11
  style: CSSProperties;
11
12
  isAnimated: boolean;
12
13
  labels: TImageViewerDocumentLabels;
14
+ pagerContainer?: HTMLElement | null;
13
15
  onPageChange?: () => void;
14
16
  };
15
17
  /**
@@ -19,9 +21,12 @@ type ImageViewerDocumentProps = {
19
21
  *
20
22
  * A document with several pages gets a pager over the page, when
21
23
  * `labels.previousPage` and `labels.nextPage` are given; without them only
22
- * the first page is reachable, since the buttons would have no name.
24
+ * the first page is reachable, since the buttons would have no name. With
25
+ * `pagerContainer` the pager is rendered inside that element instead, such as
26
+ * the viewer's toolbar.
23
27
  *
24
- * While the document or the page loads it shows a spinner. When the file
28
+ * While the document or the page loads it shows a spinner; the pager stays
29
+ * while another page loads, so the focus does not leave it. When the file
25
30
  * cannot be fetched or parsed it shows the description and, with
26
31
  * `labels.openDocument`, a link that opens the file in a new tab.
27
32
  *
@@ -34,7 +39,12 @@ type ImageViewerDocumentProps = {
34
39
  * alt="Insurance policy"
35
40
  * style={{ transform: 'translate(0px, 0px) rotate(0deg) scale(1)' }}
36
41
  * isAnimated
37
- * labels={{ openDocument: 'Open PDF', previousPage: 'Previous page', nextPage: 'Next page' }}
42
+ * labels={{
43
+ * openDocument: 'Open PDF',
44
+ * previousPage: 'Previous page',
45
+ * nextPage: 'Next page',
46
+ * pageStatus: (page, pageCount) => `Page ${page} of ${pageCount}`,
47
+ * }}
38
48
  * />
39
49
  *
40
50
  * @param {Object} props - The properties of the ImageViewerDocument component.
@@ -42,11 +52,12 @@ type ImageViewerDocumentProps = {
42
52
  * @param {string} props.alt - Accessible description of the document.
43
53
  * @param {CSSProperties} props.style - Pan, zoom and rotation computed by the viewer.
44
54
  * @param {boolean} props.isAnimated - Eases the transform; off while the user drags.
45
- * @param {TImageViewerDocumentLabels} props.labels - `openDocument` names the fallback link; `previousPage` and `nextPage` name the pager buttons.
55
+ * @param {TImageViewerDocumentLabels} props.labels - `openDocument` names the fallback link; `previousPage` and `nextPage` name the pager buttons; `pageStatus(page, pageCount)` writes the pager text, `page / pageCount` without it.
56
+ * @param {HTMLElement | null} [props.pagerContainer] - Element that receives the pager instead of the page. `null` while that element mounts, which renders no pager yet.
46
57
  * @param {() => void} [props.onPageChange] - Called after the user moves to another page, so the viewer can recenter.
47
58
  *
48
59
  * @returns {ReactNode} The rendered document.
49
60
  */
50
- export declare function ImageViewerDocument({ src, alt, style, isAnimated, labels, onPageChange, }: ImageViewerDocumentProps): ReactNode;
61
+ export declare function ImageViewerDocument({ src, alt, style, isAnimated, labels, pagerContainer, onPageChange, }: ImageViewerDocumentProps): ReactNode;
51
62
  export {};
52
63
  //# sourceMappingURL=ImageViewerDocument.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ImageViewerDocument.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/ImageViewer/ImageViewerDocument.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM3D,MAAM,MAAM,0BAA0B,GAAG;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,aAAa,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,0BAA0B,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,GAAG,EACH,KAAK,EACL,UAAU,EACV,MAAM,EACN,YAAY,GACb,EAAE,wBAAwB,GAAG,SAAS,CA2EtC"}
1
+ {"version":3,"file":"ImageViewerDocument.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/ImageViewer/ImageViewerDocument.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO3D,MAAM,MAAM,0BAA0B,GAAG;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1D,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,aAAa,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,0BAA0B,CAAC;IACnC,cAAc,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,GAAG,EACH,KAAK,EACL,UAAU,EACV,MAAM,EACN,cAAc,EACd,YAAY,GACb,EAAE,wBAAwB,GAAG,SAAS,CA0FtC"}
@@ -1,4 +1,5 @@
1
1
  'use client';
2
+ import { createPortal } from 'react-dom';
2
3
  import { MdChevronLeft, MdChevronRight, MdPictureAsPdf } from 'react-icons/md';
3
4
  import { IconButton, Paragraph, Spinner } from '../../01-atoms';
4
5
  import { ImageViewerImage } from './ImageViewerImage';
@@ -10,9 +11,12 @@ import { usePdfPages } from './usePdfPages';
10
11
  *
11
12
  * A document with several pages gets a pager over the page, when
12
13
  * `labels.previousPage` and `labels.nextPage` are given; without them only
13
- * the first page is reachable, since the buttons would have no name.
14
+ * the first page is reachable, since the buttons would have no name. With
15
+ * `pagerContainer` the pager is rendered inside that element instead, such as
16
+ * the viewer's toolbar.
14
17
  *
15
- * While the document or the page loads it shows a spinner. When the file
18
+ * While the document or the page loads it shows a spinner; the pager stays
19
+ * while another page loads, so the focus does not leave it. When the file
16
20
  * cannot be fetched or parsed it shows the description and, with
17
21
  * `labels.openDocument`, a link that opens the file in a new tab.
18
22
  *
@@ -25,7 +29,12 @@ import { usePdfPages } from './usePdfPages';
25
29
  * alt="Insurance policy"
26
30
  * style={{ transform: 'translate(0px, 0px) rotate(0deg) scale(1)' }}
27
31
  * isAnimated
28
- * labels={{ openDocument: 'Open PDF', previousPage: 'Previous page', nextPage: 'Next page' }}
32
+ * labels={{
33
+ * openDocument: 'Open PDF',
34
+ * previousPage: 'Previous page',
35
+ * nextPage: 'Next page',
36
+ * pageStatus: (page, pageCount) => `Page ${page} of ${pageCount}`,
37
+ * }}
29
38
  * />
30
39
  *
31
40
  * @param {Object} props - The properties of the ImageViewerDocument component.
@@ -33,12 +42,13 @@ import { usePdfPages } from './usePdfPages';
33
42
  * @param {string} props.alt - Accessible description of the document.
34
43
  * @param {CSSProperties} props.style - Pan, zoom and rotation computed by the viewer.
35
44
  * @param {boolean} props.isAnimated - Eases the transform; off while the user drags.
36
- * @param {TImageViewerDocumentLabels} props.labels - `openDocument` names the fallback link; `previousPage` and `nextPage` name the pager buttons.
45
+ * @param {TImageViewerDocumentLabels} props.labels - `openDocument` names the fallback link; `previousPage` and `nextPage` name the pager buttons; `pageStatus(page, pageCount)` writes the pager text, `page / pageCount` without it.
46
+ * @param {HTMLElement | null} [props.pagerContainer] - Element that receives the pager instead of the page. `null` while that element mounts, which renders no pager yet.
37
47
  * @param {() => void} [props.onPageChange] - Called after the user moves to another page, so the viewer can recenter.
38
48
  *
39
49
  * @returns {ReactNode} The rendered document.
40
50
  */
41
- export function ImageViewerDocument({ src, alt, style, isAnimated, labels, onPageChange, }) {
51
+ export function ImageViewerDocument({ src, alt, style, isAnimated, labels, pagerContainer, onPageChange, }) {
42
52
  const { status, pageCount, pageIndex, pageSrc, goToPage } = usePdfPages(src);
43
53
  if (status === 'error') {
44
54
  return (<div className="flex h-full w-full flex-col items-center justify-center gap-2 px-4 text-center">
@@ -51,7 +61,7 @@ export function ImageViewerDocument({ src, alt, style, isAnimated, labels, onPag
51
61
  </a>)}
52
62
  </div>);
53
63
  }
54
- if (!pageSrc)
64
+ if (!pageSrc && pageCount === 0)
55
65
  return <Spinner label={alt}/>;
56
66
  const hasSeveralPages = pageCount > 1;
57
67
  const pagerLabels = hasSeveralPages && labels.previousPage && labels.nextPage
@@ -60,19 +70,26 @@ export function ImageViewerDocument({ src, alt, style, isAnimated, labels, onPag
60
70
  const pageAlt = hasSeveralPages
61
71
  ? `${alt} · ${pageIndex + 1}/${pageCount}`
62
72
  : alt;
73
+ const pageStatus = labels.pageStatus?.(pageIndex + 1, pageCount) ??
74
+ `${pageIndex + 1} / ${pageCount}`;
75
+ const isPagerOutside = pagerContainer !== undefined;
63
76
  const changePage = (index) => {
64
77
  goToPage(index);
65
78
  onPageChange?.();
66
79
  };
80
+ const pager = pagerLabels ? (<>
81
+ <IconButton icon={<MdChevronLeft />} label={pagerLabels.previous} disabled={pageIndex === 0} onClick={() => changePage(pageIndex - 1)} className="rounded-full"/>
82
+ <Paragraph size="body-2" aria-live="polite" className="min-w-10 text-center whitespace-nowrap tabular-nums dark:text-white">
83
+ {pageStatus}
84
+ </Paragraph>
85
+ <IconButton icon={<MdChevronRight />} label={pagerLabels.next} disabled={pageIndex === pageCount - 1} onClick={() => changePage(pageIndex + 1)} className="rounded-full"/>
86
+ </>) : null;
67
87
  return (<div className="relative flex h-full w-full items-center justify-center">
68
- <ImageViewerImage src={pageSrc} alt={pageAlt} style={style} isAnimated={isAnimated}/>
69
- {!!pagerLabels && (<div className="border-gray-5 dark:border-gray-1 dark:bg-black-1/90 absolute bottom-3 left-1/2 flex -translate-x-1/2 items-center gap-1 rounded-full border bg-white/90 px-1.5 py-1 shadow-md backdrop-blur-sm">
70
- <IconButton icon={<MdChevronLeft />} label={pagerLabels.previous} disabled={pageIndex === 0} onClick={() => changePage(pageIndex - 1)} className="rounded-full"/>
71
- <Paragraph size="body-2" aria-live="polite" className="min-w-10 text-center tabular-nums dark:text-white">
72
- {`${pageIndex + 1} / ${pageCount}`}
73
- </Paragraph>
74
- <IconButton icon={<MdChevronRight />} label={pagerLabels.next} disabled={pageIndex === pageCount - 1} onClick={() => changePage(pageIndex + 1)} className="rounded-full"/>
88
+ {pageSrc ? (<ImageViewerImage src={pageSrc} alt={pageAlt} style={style} isAnimated={isAnimated}/>) : (<Spinner label={pageAlt}/>)}
89
+ {!!pager && !isPagerOutside && (<div className="border-gray-5 dark:border-gray-1 dark:bg-black-1/90 absolute bottom-3 left-1/2 flex -translate-x-1/2 items-center gap-1 rounded-full border bg-white/90 px-1.5 py-1 shadow-md backdrop-blur-sm">
90
+ {pager}
75
91
  </div>)}
92
+ {!!pager && !!pagerContainer && createPortal(pager, pagerContainer)}
76
93
  </div>);
77
94
  }
78
95
  //# sourceMappingURL=ImageViewerDocument.jsx.map
@@ -1 +1 @@
1
- {"version":3,"file":"ImageViewerDocument.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/ImageViewer/ImageViewerDocument.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ImageViewerDocument.jsx","sourceRoot":"","sources":["../../../../src/components/02-molecules/ImageViewer/ImageViewerDocument.tsx"],"names":[],"mappings":"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"}
@@ -9,6 +9,17 @@ export type TableItemWithTemplate = {
9
9
  export type TableCellValue = TablePrimitive | TableItemWithTemplate;
10
10
  export type TableItem = Record<string, TableCellValue>;
11
11
  export type TableItemSelection = Record<string, TableItem>;
12
+ /** Content that a row opens under itself, across every column. */
13
+ export type TableRowDetail = {
14
+ /** Content shown under the row while it is open. */
15
+ render: (item: TableItem) => ReactNode;
16
+ /** Values of the `id` column of the open rows. */
17
+ openIds: TablePrimitive[];
18
+ /** Called when the user opens or closes a row. */
19
+ onToggle: (item: TableItem) => void;
20
+ /** Accessible name and tooltip of the toggle of a row. */
21
+ toggleLabel: (item: TableItem) => string;
22
+ };
12
23
  type TableNotSelectableProps = {
13
24
  headers: {
14
25
  key: string;
@@ -31,6 +42,7 @@ type TableNotSelectableProps = {
31
42
  selectAllLabel?: string;
32
43
  getRowSelectionLabel?: (item: TableItem) => string;
33
44
  getRowActionLabel?: (item: TableItem) => string;
45
+ rowDetail?: TableRowDetail;
34
46
  } & HTMLAttributes<HTMLDivElement>;
35
47
  type TableSelectablePropsMultiple = {
36
48
  selectable?: true;
@@ -74,6 +86,20 @@ export type TableActions = ButtonHTMLAttributes<HTMLButtonElement> & {
74
86
  * numberOfRows={10}
75
87
  * />
76
88
  *
89
+ * @example
90
+ * // Rows that open a detail under themselves
91
+ * <Table
92
+ * headers={[{ key: 'name', title: 'Name' }]}
93
+ * id="id"
94
+ * data={rows}
95
+ * rowDetail={{
96
+ * render: (item) => <Details id={item.id} />,
97
+ * openIds: open,
98
+ * onToggle: (item) => toggle(item.id),
99
+ * toggleLabel: (item) => `Details of ${item.name}`,
100
+ * }}
101
+ * />
102
+ *
77
103
  * @param {Object} props - The properties for the Table component.
78
104
  * @param {Array<{ key: string, title: string | ReactNode }>} props.headers - The headers of the table.
79
105
  * @param {string} props.id - The unique identifier for each row.
@@ -88,10 +114,11 @@ export type TableActions = ButtonHTMLAttributes<HTMLButtonElement> & {
88
114
  * @param {boolean} [props.loading=false] - Whether the table is in a loading state.
89
115
  * @param {number} [props.numberOfRows=10] - The number of rows to display when loading.
90
116
  * @param {ReactNode} [props.empty=<TableEmpty />] - Content shown when `data` is empty.
117
+ * @param {TableRowDetail} [props.rowDetail] - Content each row opens under itself, across every column. Adds a chevron toggle at the end of the row; a click on the row toggles it too, instead of calling `action`.
91
118
  * @param {Object} restProps - Additional properties for the container div.
92
119
  *
93
120
  * @returns {ReactNode} The rendered Table component.
94
121
  */
95
- export declare function Table({ headers, id, data, action, actions, selectable, multiple, currentSelection, setCurrentSelection, tableProps, loading, numberOfRows, footer, empty, tableName, selectAllLabel, getRowSelectionLabel, getRowActionLabel, ...restProps }: TableProps): ReactNode;
122
+ export declare function Table({ headers, id, data, action, actions, selectable, multiple, currentSelection, setCurrentSelection, tableProps, loading, numberOfRows, footer, empty, tableName, selectAllLabel, getRowSelectionLabel, getRowActionLabel, rowDetail, ...restProps }: TableProps): ReactNode;
96
123
  export {};
97
124
  //# sourceMappingURL=Table.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Table/Table.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/02-molecules/Table/Table.tsx"],"names":[],"mappings":"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"}