View Settings Panel

Usage

• Use ViewSettingsPanel for per-view configuration: name, layout, visible properties, filters, sorts and grouping.
• Pass height when the panel is docked in a layout with a fixed height; otherwise it sizes to its content.
• Apply each onChange patch to the view immediately; the panel has no Save step.
• Don’t use it for settings that apply to the whole database or workspace; use a settings page instead.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { useState } from 'react';
import { ViewSettingsPanel, createTasksSample } from '@krackedui/motion';

export function ViewSettingsDemo() {
  const [data] = useState(createTasksSample);
  const [view, setView] = useState(data.views[0]);
  return <ViewSettingsPanel collection={data.collection} view={view} onChange={(patch) => setView({ ...view, ...patch })} />;
}

Examples

Fixed height

Inside DatabaseView the panel is 627px tall; pass height to match your layout.

Composition

<ViewSettingsPanel>             // 290 wide, role="dialog" "View settings"
  header      → "View settings" · close
  name row    → icon button · view name input
  rows        → Layout › · Property visibility › · Filter › · Sort › · Group › · …   (SubmenuRow)
  "Data source settings" section
</ViewSettingsPanel>

API Reference

ViewSettingsPanel

Based on <div> and supports its props (except onChange). Adds:

Accessibility

• role="dialog" labelled "View settings"; Close and Change icon are labelled buttons; the name input is labelled "View name" (Enter commits).
• Rows: ArrowUp/ArrowDown and Enter/Space (useMenuKeys); submenu rows open their flyout to the right.