@liberation-data/desk 0.1.0 → 0.3.0

package/src/react/index.ts

@@ -36,6 +36,10 @@ export type {
   TextFieldProps,
   ToggleProps,
 } from './controls.js'
+export { Pane, Toolbar } from './pane.js'
+export type { PaneProps, ToolbarProps } from './pane.js'
+export { InfoTip } from './infoTip.js'
+export type { InfoTipProps } from './infoTip.js'
 export { Checklist, useTasks } from './tasks.js'
 export { localSetupStore, useSetupProgress } from './setupProgress.js'
 export type { SetupProgress, SetupProgressOptions, SetupRecord, SetupStore } from './setupProgress.js'
@@ -59,6 +63,10 @@ export type { ComposerProps, Message, ThreadProps } from './conversation.js'
 export { Alert, Popover, Sheet, ToastProvider, useToast } from './overlays.js'
 export type { AlertProps, PopoverProps, PopoverTriggerProps, SheetProps, Toast, ToastInput } from './overlays.js'
 export { MenuBar, menuAction, menuCommand, menuHeader, menuSeparator, windowMenuItems } from './MenuBar.js'
+export { useContextMenu } from './contextMenu.js'
+export type { ContextMenuOptions, ContextMenuResult, ContextMenuTargetProps } from './contextMenu.js'
 export type { Menu, MenuBarProps, MenuItem } from './MenuBar.js'
-export { Dock, dockItem, dockSeparator, dockStack } from './Dock.js'
-export type { DockEntry, DockItem, DockProps, DockStack } from './Dock.js'
+export { IconView } from './iconView.js'
+export type { IconViewItem, IconViewProps } from './iconView.js'
+export { Dock, DOCK_ITEM, dockItem, dockSeparator, dockStack } from './Dock.js'
+export type { DockEntry, DockItem, DockPins, DockProps, DockStack } from './Dock.js'

package/src/react/infoTip.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import type { ReactNode } from 'react'
+import { Popover } from './overlays.js'
+
+/*
+ * What a view would explain if asked. A window that opens with a paragraph makes everyone read it
+ * every time to reach the thing they came for; the same words behind an (i) are there for whoever
+ * has the question, once.
+ *
+ * Only for explanation. A warning, or anything that changes what someone is about to do, belongs
+ * in front of them — hiding that behind a disclosure is how it goes unread.
+ */
+
+export interface InfoTipProps {
+  /** What it explains, e.g. "About these logs" — the button's name and the popover's. */
+  readonly label: string
+  readonly children: ReactNode
+  readonly placement?: 'below' | 'above'
+  readonly align?: 'start' | 'end'
+  readonly className?: string
+}
+
+export function InfoTip({ label, children, placement = 'below', align = 'start', className }: InfoTipProps) {
+  const [open, setOpen] = useState(false)
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      label={label}
+      placement={placement}
+      align={align}
+      trigger={props => (
+        <button
+          {...props}
+          ref={props.ref}
+          type="button"
+          className={['desk-infotip', className].filter(Boolean).join(' ')}
+          aria-label={label}
+          data-open={open || undefined}
+        >
+          <span aria-hidden="true">i</span>
+        </button>
+      )}
+    >
+      <div className="desk-infotip-body">{children}</div>
+    </Popover>
+  )
+}

package/src/react/pane.tsx

@@ -0,0 +1,65 @@
+import type { Ref, UIEvent, ReactNode } from 'react'
+
+/*
+ * The inside of a window: a row of controls that stays put, and content that scrolls under it.
+ *
+ * A window is a fixed height, so something inside it has to give. When the content simply grows,
+ * the window grows with it and the whole thing scrolls — the toolbar leaves with it, and a log or a
+ * table has to be scrolled past to reach anything below. A pane fills the window instead and scrolls
+ * only its middle, so the controls stay where the pointer left them.
+ */
+
+export interface ToolbarProps {
+  /** Controls, in reading order. Anything given `className="desk-grow"` takes the spare room. */
+  readonly children: ReactNode
+  /** Pushed to the trailing end: what acts on everything here, or the state of it. */
+  readonly trailing?: ReactNode
+  /** Names the row for assistive technology when it holds more than one thing: "Log controls". */
+  readonly label?: string
+  readonly className?: string
+}
+
+/** One aligned row of controls. Every item sits on the same centre line, whatever its height. */
+export function Toolbar({ children, trailing, label, className }: ToolbarProps) {
+  return (
+    <div
+      {...(label ? { role: 'group', 'aria-label': label } : {})}
+      className={['desk-toolbar', className].filter(Boolean).join(' ')}
+    >
+      {children}
+      {trailing != null && <div className="desk-toolbar-trailing">{trailing}</div>}
+    </div>
+  )
+}
+
+export interface PaneProps {
+  /** Stays put at the top: a Toolbar, usually. */
+  readonly header?: ReactNode
+  /** Stays put at the bottom: a count, a status line, the buttons of a form. */
+  readonly footer?: ReactNode
+  /** Fills what is left and scrolls, on its own. */
+  readonly children: ReactNode
+  /** The scrolling part is the thing being read, so it can be named and reached by the keyboard. */
+  readonly label?: string
+  /** The scrolling element itself: for reading where it sits, or sending it to the bottom. */
+  readonly bodyRef?: Ref<HTMLDivElement>
+  readonly onScroll?: (event: UIEvent<HTMLDivElement>) => void
+  readonly className?: string
+}
+
+export function Pane({ header, footer, children, label, bodyRef, onScroll, className }: PaneProps) {
+  return (
+    <div className={['desk-pane', className].filter(Boolean).join(' ')}>
+      {header != null && <div className="desk-pane-header">{header}</div>}
+      <div
+        ref={bodyRef}
+        className="desk-pane-body"
+        onScroll={onScroll}
+        {...(label ? { role: 'region', 'aria-label': label, tabIndex: 0 } : {})}
+      >
+        {children}
+      </div>
+      {footer != null && <div className="desk-pane-footer">{footer}</div>}
+    </div>
+  )
+}