@expressive/ui 0.0.0-stage → 0.1.0

package/dist/popover/place.js

@@ -0,0 +1,32 @@
+//#region src/popover/place.ts
+/**
+* Center a box on the anchor's preferred side, flipping when only the other side fits, and keep it inside the
+* view. The arrow tracks the anchor's center while staying on the box.
+*/
+function place(options) {
+	const { anchor, width, height, view, side: prefer = "below", gap = 8, pad = 8, inset = 12 } = options;
+	const minLeft = view.left + pad;
+	const maxLeft = view.left + view.width - pad - width;
+	const center = anchor.left + anchor.width / 2;
+	const left = maxLeft < minLeft ? minLeft : Math.min(Math.max(center - width / 2, minLeft), maxLeft);
+	const below = anchor.top + anchor.height + gap;
+	const above = anchor.top - gap - height;
+	const fits = {
+		below: below + height <= view.top + view.height - pad,
+		above: above >= view.top + pad
+	};
+	const other = prefer == "below" ? "above" : "below";
+	const side = fits[prefer] || !fits[other] ? prefer : other;
+	const top = side == "below" ? below : Math.max(above, view.top + pad);
+	const edge = Math.min(inset, width / 2);
+	return {
+		left,
+		top,
+		side,
+		arrow: Math.min(Math.max(center - left, edge), width - edge)
+	};
+}
+
+//#endregion
+export { place };
+//# sourceMappingURL=place.js.map

package/dist/popover/place.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"place.js","names":[],"sources":["../../src/popover/place.ts"],"sourcesContent":["export interface Rect {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\nexport type Side = 'below' | 'above';\n\nexport interface Place {\n  left: number;\n  top: number;\n  side: Side;\n  /** Arrow center from the box's left edge. */\n  arrow: number;\n}\n\n/**\n * Center a box on the anchor's preferred side, flipping when only the other side fits, and keep it inside the\n * view. The arrow tracks the anchor's center while staying on the box.\n */\nexport function place(options: {\n  anchor: Rect;\n  width: number;\n  height: number;\n  view: Rect;\n  side?: Side;\n  gap?: number;\n  pad?: number;\n  inset?: number;\n}): Place {\n  const { anchor, width, height, view, side: prefer = 'below', gap = 8, pad = 8, inset = 12 } = options;\n\n  const minLeft = view.left + pad;\n  const maxLeft = view.left + view.width - pad - width;\n  const center = anchor.left + anchor.width / 2;\n  const left = maxLeft < minLeft ? minLeft : Math.min(Math.max(center - width / 2, minLeft), maxLeft);\n\n  const below = anchor.top + anchor.height + gap;\n  const above = anchor.top - gap - height;\n  const fits = {\n    below: below + height <= view.top + view.height - pad,\n    above: above >= view.top + pad\n  };\n  const other: Side = prefer == 'below' ? 'above' : 'below';\n  const side = fits[prefer] || !fits[other] ? prefer : other;\n  const top = side == 'below' ? below : Math.max(above, view.top + pad);\n\n  const edge = Math.min(inset, width / 2);\n  const arrow = Math.min(Math.max(center - left, edge), width - edge);\n\n  return { left, top, side, arrow };\n}\n"],"mappings":";;;;;AAqBA,SAAgB,MAAM,SASZ;CACR,MAAM,EAAE,QAAQ,OAAO,QAAQ,MAAM,MAAM,SAAS,SAAS,MAAM,GAAG,MAAM,GAAG,QAAQ,OAAO;CAE9F,MAAM,UAAU,KAAK,OAAO;CAC5B,MAAM,UAAU,KAAK,OAAO,KAAK,QAAQ,MAAM;CAC/C,MAAM,SAAS,OAAO,OAAO,OAAO,QAAQ;CAC5C,MAAM,OAAO,UAAU,UAAU,UAAU,KAAK,IAAI,KAAK,IAAI,SAAS,QAAQ,GAAG,QAAQ,EAAE,QAAQ;CAEnG,MAAM,QAAQ,OAAO,MAAM,OAAO,SAAS;CAC3C,MAAM,QAAQ,OAAO,MAAM,MAAM;CACjC,MAAM,OAAO;EACX,OAAO,QAAQ,UAAU,KAAK,MAAM,KAAK,SAAS;EAClD,OAAO,SAAS,KAAK,MAAM;EAC5B;CACD,MAAM,QAAc,UAAU,UAAU,UAAU;CAClD,MAAM,OAAO,KAAK,WAAW,CAAC,KAAK,SAAS,SAAS;CACrD,MAAM,MAAM,QAAQ,UAAU,QAAQ,KAAK,IAAI,OAAO,KAAK,MAAM,IAAI;CAErE,MAAM,OAAO,KAAK,IAAI,OAAO,QAAQ,EAAE;AAGvC,QAAO;EAAE;EAAM;EAAK;EAAM,OAFZ,KAAK,IAAI,KAAK,IAAI,SAAS,MAAM,KAAK,EAAE,QAAQ,KAAK;EAElC"}

package/dist/popover/popover.d.ts

@@ -0,0 +1,52 @@
+import { Popover as Popover$1 } from "./base.js";
+import { Component } from "@expressive/mvc";
+
+//#region src/popover/popover.d.ts
+declare namespace Popover {
+  type Place = Popover$1.Place;
+  type Side = Popover$1.Side;
+}
+/**
+ * Button that opens a panel anchored to it.
+ *
+ * The panel portals to the body, sits on the preferred `side` and flips when only the other fits, staying inside
+ * the viewport as it scrolls and resizes; its arrow tracks the button. Escape closes it and returns focus to the
+ * button; a press outside or focus leaving both closes it. Not modal - the page stays usable. Pieces - `Trigger`,
+ * `Layer`, `Panel`, `Arrow` - are function components reading `Popover.get()`, each styled on its own; pass one as a
+ * prop (`<Popover Arrow={…} />`) or assign it in a subclass to replace it. Stock pieces are statics. A replacement
+ * `Trigger` spreads `triggerProps`, a replacement `Panel` `panelProps`.
+ *
+ * @example
+ * <Popover label="Filters">
+ *   <Checkbox … />
+ * </Popover>
+ */
+declare class Popover extends Popover$1 {
+  static Trigger: () => Component.Node;
+  static Layer: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Panel: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Arrow: () => Component.Node;
+  Trigger: () => Component.Node;
+  Layer: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Panel: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Arrow: () => Component.Node;
+}
+//#endregion
+export { Popover };
+//# sourceMappingURL=popover.d.ts.map

package/dist/popover/popover.js

@@ -0,0 +1,104 @@
+import { Popover as Popover$1 } from "./base.js";
+import { Caret } from "../icons/caret.js";
+import { Portal, style } from "@expressive/dom";
+import { jsx, jsxs } from "@expressive/dom/jsx-runtime";
+
+//#region src/popover/popover.tsx
+const Trigger = () => {
+	const { label, open, triggerProps } = Popover$1.get();
+	return /* @__PURE__ */ jsxs("button", {
+		...triggerProps,
+		children: [label, /* @__PURE__ */ jsx(Caret, { _open: open })]
+	});
+};
+style(Trigger, {
+	display: "inline-flex",
+	alignItems: "center",
+	gap: "6px",
+	height: "36px",
+	padding: "0 10px 0 14px",
+	border: "1px solid var(--ui-line, #ccc)",
+	borderRadius: "6px",
+	background: "var(--ui-surface, #fff)",
+	color: "inherit",
+	font: "inherit",
+	cursor: "pointer",
+	":hover": { background: "var(--ui-highlight, #deebff)" },
+	":focus-visible": {
+		outline: "2px solid var(--ui-accent, #2684ff)",
+		outlineOffset: "2px"
+	},
+	_open: { transform: "rotate(180deg)" }
+});
+const Layer = ({ children }) => /* @__PURE__ */ jsx(Portal, {
+	into: "body",
+	children
+});
+const Panel = ({ children }) => /* @__PURE__ */ jsx("div", {
+	...Popover$1.get().panelProps,
+	children
+});
+style(Panel, {
+	position: "fixed",
+	zIndex: "1000",
+	boxSizing: "border-box",
+	maxWidth: "calc(100vw - 16px)",
+	padding: "12px 14px",
+	background: "var(--ui-surface, #fff)",
+	color: "inherit",
+	border: "1px solid var(--ui-line, #ccc)",
+	borderRadius: "8px",
+	boxShadow: "0 6px 24px rgb(0 0 0 / 0.12)",
+	outline: "0"
+});
+const Arrow = () => {
+	const { above, props } = Popover$1.get().arrowProps;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		_above: above
+	});
+};
+style(Arrow, {
+	position: "absolute",
+	top: "-6px",
+	width: "10px",
+	height: "10px",
+	background: "inherit",
+	borderTop: "1px solid var(--ui-line, #ccc)",
+	borderLeft: "1px solid var(--ui-line, #ccc)",
+	transform: "rotate(45deg)",
+	_above: {
+		top: "auto",
+		bottom: "-6px",
+		transform: "rotate(225deg)"
+	}
+});
+/**
+* Button that opens a panel anchored to it.
+*
+* The panel portals to the body, sits on the preferred `side` and flips when only the other fits, staying inside
+* the viewport as it scrolls and resizes; its arrow tracks the button. Escape closes it and returns focus to the
+* button; a press outside or focus leaving both closes it. Not modal - the page stays usable. Pieces - `Trigger`,
+* `Layer`, `Panel`, `Arrow` - are function components reading `Popover.get()`, each styled on its own; pass one as a
+* prop (`<Popover Arrow={…} />`) or assign it in a subclass to replace it. Stock pieces are statics. A replacement
+* `Trigger` spreads `triggerProps`, a replacement `Panel` `panelProps`.
+*
+* @example
+* <Popover label="Filters">
+*   <Checkbox … />
+* </Popover>
+*/
+var Popover = class extends Popover$1 {
+	static Trigger = Trigger;
+	static Layer = Layer;
+	static Panel = Panel;
+	static Arrow = Arrow;
+	Trigger = Trigger;
+	Layer = Layer;
+	Panel = Panel;
+	Arrow = Arrow;
+};
+
+//#endregion
+export { Popover };
+//# sourceMappingURL=popover.js.map

package/dist/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":["Base.Popover"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["/** @jsxImportSource @expressive/dom */\nimport { Component } from '@expressive/mvc';\nimport { Portal, style } from '@expressive/dom';\n\nimport { Caret } from '../icons';\nimport * as Base from './base';\n\ndeclare namespace Popover {\n  type Place = Base.Popover.Place;\n  type Side = Base.Popover.Side;\n}\n\nconst Trigger = (): Component.Node => {\n  const { label, open, triggerProps } = Base.Popover.get();\n\n  return (\n    <button {...triggerProps}>\n      {label}\n      <Caret _open={open} />\n    </button>\n  );\n};\n\nstyle(Trigger, {\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: '6px',\n  height: '36px',\n  padding: '0 10px 0 14px',\n  border: '1px solid var(--ui-line, #ccc)',\n  borderRadius: '6px',\n  background: 'var(--ui-surface, #fff)',\n  color: 'inherit',\n  font: 'inherit',\n  cursor: 'pointer',\n  ':hover': {\n    background: 'var(--ui-highlight, #deebff)'\n  },\n  ':focus-visible': {\n    outline: '2px solid var(--ui-accent, #2684ff)',\n    outlineOffset: '2px'\n  },\n  _open: {\n    transform: 'rotate(180deg)'\n  }\n});\n\nconst Layer = ({ children }: { children: Component.Node }): Component.Node => <Portal into=\"body\">{children}</Portal>;\n\nconst Panel = ({ children }: { children: Component.Node }): Component.Node => (\n  <div {...Base.Popover.get().panelProps}>{children}</div>\n);\n\nstyle(Panel, {\n  position: 'fixed',\n  zIndex: '1000',\n  boxSizing: 'border-box',\n  maxWidth: 'calc(100vw - 16px)',\n  padding: '12px 14px',\n  background: 'var(--ui-surface, #fff)',\n  color: 'inherit',\n  border: '1px solid var(--ui-line, #ccc)',\n  borderRadius: '8px',\n  boxShadow: '0 6px 24px rgb(0 0 0 / 0.12)',\n  outline: '0'\n});\n\nconst Arrow = (): Component.Node => {\n  const { above, props } = Base.Popover.get().arrowProps;\n\n  return <span {...props} _above={above} />;\n};\n\nstyle(Arrow, {\n  position: 'absolute',\n  top: '-6px',\n  width: '10px',\n  height: '10px',\n  background: 'inherit',\n  borderTop: '1px solid var(--ui-line, #ccc)',\n  borderLeft: '1px solid var(--ui-line, #ccc)',\n  transform: 'rotate(45deg)',\n  _above: {\n    top: 'auto',\n    bottom: '-6px',\n    transform: 'rotate(225deg)'\n  }\n});\n\n/**\n * Button that opens a panel anchored to it.\n *\n * The panel portals to the body, sits on the preferred `side` and flips when only the other fits, staying inside\n * the viewport as it scrolls and resizes; its arrow tracks the button. Escape closes it and returns focus to the\n * button; a press outside or focus leaving both closes it. Not modal - the page stays usable. Pieces - `Trigger`,\n * `Layer`, `Panel`, `Arrow` - are function components reading `Popover.get()`, each styled on its own; pass one as a\n * prop (`<Popover Arrow={…} />`) or assign it in a subclass to replace it. Stock pieces are statics. A replacement\n * `Trigger` spreads `triggerProps`, a replacement `Panel` `panelProps`.\n *\n * @example\n * <Popover label=\"Filters\">\n *   <Checkbox … />\n * </Popover>\n */\nclass Popover extends Base.Popover {\n  static Trigger = Trigger;\n  static Layer = Layer;\n  static Panel = Panel;\n  static Arrow = Arrow;\n\n  Trigger = Trigger;\n  Layer = Layer;\n  Panel = Panel;\n  Arrow = Arrow;\n}\n\nexport { Arrow, Layer, Panel, Popover, Trigger };\n"],"mappings":";;;;;;AAYA,MAAM,gBAAgC;CACpC,MAAM,EAAE,OAAO,MAAM,2BAA8B,KAAK;AAExD,QACE,qBAAC;EAAO,GAAI;aACT,OACD,oBAAC,SAAM,OAAO,OAAQ;GACf;;AAIb,MAAM,SAAS;CACb,SAAS;CACT,YAAY;CACZ,KAAK;CACL,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,cAAc;CACd,YAAY;CACZ,OAAO;CACP,MAAM;CACN,QAAQ;CACR,UAAU,EACR,YAAY,gCACb;CACD,kBAAkB;EAChB,SAAS;EACT,eAAe;EAChB;CACD,OAAO,EACL,WAAW,kBACZ;CACF,CAAC;AAEF,MAAM,SAAS,EAAE,eAA6D,oBAAC;CAAO,MAAK;CAAQ;EAAkB;AAErH,MAAM,SAAS,EAAE,eACf,oBAAC;CAAI,aAAiB,KAAK,CAAC;CAAa;EAAe;AAG1D,MAAM,OAAO;CACX,UAAU;CACV,QAAQ;CACR,WAAW;CACX,UAAU;CACV,SAAS;CACT,YAAY;CACZ,OAAO;CACP,QAAQ;CACR,cAAc;CACd,WAAW;CACX,SAAS;CACV,CAAC;AAEF,MAAM,cAA8B;CAClC,MAAM,EAAE,OAAO,oBAAuB,KAAK,CAAC;AAE5C,QAAO,oBAAC;EAAK,GAAI;EAAO,QAAQ;GAAS;;AAG3C,MAAM,OAAO;CACX,UAAU;CACV,KAAK;CACL,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,WAAW;CACX,YAAY;CACZ,WAAW;CACX,QAAQ;EACN,KAAK;EACL,QAAQ;EACR,WAAW;EACZ;CACF,CAAC;;;;;;;;;;;;;;;;AAiBF,IAAM,UAAN,cAAsBA,UAAa;CACjC,OAAO,UAAU;CACjB,OAAO,QAAQ;CACf,OAAO,QAAQ;CACf,OAAO,QAAQ;CAEf,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,QAAQ"}

package/dist/select/base.d.ts

@@ -0,0 +1,196 @@
+import { Component, Model, ref } from "@expressive/mvc";
+
+//#region src/select/base.d.ts
+declare namespace Select {
+  interface Option<T = unknown> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+  }
+  /** One option, or an array when `multi`. */
+  type Value = Option | Option[] | null;
+  type Key = Pick<KeyboardEvent, 'key' | 'shiftKey' | 'isComposing' | 'preventDefault' | 'stopPropagation'>;
+  /** Where the menu sits, in viewport pixels; `above` when it flipped over the control. */
+  interface Place {
+    left: number;
+    top: number;
+    width: number;
+    above: boolean;
+  }
+  type Wrap = (props: {
+    children: Component.Node;
+  }) => Component.Node;
+  type Each = (props: {
+    option: Option;
+  }) => Component.Node;
+  type Item = (props: {
+    option: Option;
+    index: number;
+  }) => Component.Node;
+  type Part = () => Component.Node;
+}
+/**
+ * Combobox behavior without a look: state, keyboard, announcements and ARIA, assembled from pieces.
+ *
+ * Every visible piece is a placeholder that throws when rendered - a skin assigns each one it renders.
+ * Pieces spread the matching `*Props` getter onto their element to stay accessible. `Layer` wraps the menu and renders
+ * in place by default; a skin replaces it to move the menu out of clipping containers, placed at `place`.
+ */
+declare class Select extends Component {
+  options: readonly Select.Option[];
+  value: Select.Value;
+  onChange?: (value: Select.Value) => void;
+  multi: boolean;
+  /** Whether Backspace and `clear` remove values. Defaults to `multi`. */
+  clearable?: boolean;
+  searchable: boolean;
+  disabled: boolean;
+  placeholder: string;
+  /** The input's id, for a `<label htmlFor>`; prefixes the listbox and option ids. */
+  id: string;
+  query: string;
+  open: boolean;
+  focused: boolean;
+  highlighted: number;
+  message: string;
+  input: ref.Object<HTMLInputElement>;
+  /** Where the menu sits, once measured. */
+  place?: Select.Place;
+  Root: Select.Wrap;
+  Control: Select.Wrap;
+  Values: Select.Wrap;
+  Chip: Select.Each;
+  Value: Select.Each;
+  Input: Select.Part;
+  Clear: Select.Part;
+  Toggle: Select.Part;
+  Layer: Select.Wrap;
+  Menu: Select.Wrap;
+  Option: Select.Item;
+  Empty: Select.Part;
+  Live: Select.Part;
+  constructor(...args: Model.Args);
+  get selection(): Select.Option[];
+  /** Options matching `query`, accent- and case-insensitive; skips disabled and, when `multi`, chosen ones. */
+  get filtered(): Select.Option[];
+  /** The highlighted option while open. */
+  get active(): Select.Option | undefined;
+  get canClear(): boolean;
+  /** Text for the `aria-live` region; empty while unfocused. */
+  get announcement(): string;
+  /** For the element wrapping values and buttons: a press anywhere focuses the input and opens. */
+  get controlProps(): {
+    ref: (element: HTMLElement | null) => void;
+    onMouseDown: (event: MouseEvent) => void;
+  };
+  get inputProps(): {
+    readonly ref: ref.Object<HTMLInputElement>;
+    readonly id: string;
+    readonly role: "combobox";
+    readonly 'aria-autocomplete': "list";
+    readonly 'aria-expanded': boolean;
+    readonly 'aria-controls': `${string}-listbox`;
+    readonly 'aria-activedescendant': string | undefined;
+    readonly autoComplete: "off";
+    readonly disabled: boolean;
+    readonly readOnly: boolean;
+    readonly placeholder: string;
+    readonly value: string;
+    readonly onInput: (event: Event) => void;
+    readonly onFocus: () => void;
+    readonly onBlur: () => void;
+    readonly onKeyDown: (event: Select.Key) => void;
+  };
+  get clearProps(): {
+    readonly type: "button";
+    readonly tabIndex: -1;
+    readonly 'aria-label': "Clear selection";
+    readonly onMouseDown: typeof hold;
+    readonly onClick: () => void;
+  };
+  get toggleProps(): {
+    readonly type: "button";
+    readonly tabIndex: -1;
+    readonly 'aria-label': "Hide options" | "Show options";
+    readonly onMouseDown: typeof hold;
+    readonly onClick: () => void;
+  };
+  /** For a chip's remove button. */
+  get removeProps(): (option: Select.Option) => {
+    readonly type: "button";
+    readonly tabIndex: -1;
+    readonly 'aria-label': `Remove ${string}`;
+    readonly onMouseDown: typeof hold;
+    readonly onClick: () => void;
+  };
+  /** For the menu: hidden at the origin until measured, then at `place`, as wide as the control. */
+  get menuProps(): {
+    readonly ref: (element: HTMLElement | null) => void;
+    readonly id: `${string}-listbox`;
+    readonly role: "listbox";
+    readonly 'aria-multiselectable': boolean;
+    readonly onMouseDown: typeof hold;
+    readonly style: {
+      left: string;
+      top: string;
+      width: string;
+      opacity?: undefined;
+    } | {
+      left: string;
+      top: string;
+      opacity: string;
+      width?: undefined;
+    };
+  };
+  /** For an option's element, with `active` and `selected` for styling. */
+  get optionProps(): (option: Select.Option, index: number) => {
+    active: boolean;
+    selected: boolean;
+    props: {
+      readonly ref: ((element: HTMLElement | null) => void) | undefined;
+      readonly id: `${string}-option-${number}`;
+      readonly role: "option";
+      readonly 'aria-selected': boolean;
+      readonly onMouseMove: () => number;
+      readonly onClick: () => void;
+    };
+  };
+  isSelected(option: Select.Option): boolean;
+  choose(option: Select.Option): void;
+  remove(option: Select.Option): void;
+  clear(): void;
+  search(query: string): void;
+  /** Open, highlighting the current choice - else the first option, or the last when `last`. */
+  show(last?: boolean): void;
+  hide(): void;
+  toggle(): void;
+  focus(): void;
+  blur(): void;
+  /**
+   * Arrows, Home/End, PageUp/PageDown move the highlight; Enter, Space and Tab choose;
+   * Escape closes; Backspace removes the last value.
+   *
+   * Calls `preventDefault` and `stopPropagation` on keys it consumes. Tab and Backspace pass through.
+   */
+  keyDown(event: Select.Key): void;
+  /** Focus the input and open, from a press anywhere on the control. */
+  press(event: MouseEvent): void;
+  /** Follow scroll and resize while open, keeping the menu at the control; returns the release. Defaults to `window`. */
+  protected listen(): () => void;
+  /** Where the menu fits by the control, or `undefined` before both mount. Defaults to the DOM's layout. */
+  protected measure(): Select.Place | undefined;
+  /** Re-measure and move the menu when its place changed; for a `listen` that follows layout. */
+  protected reposition(): void;
+  /** Ref for the control, in `controlProps`; the menu anchors to it. */
+  protected anchor(element: HTMLElement | null): void;
+  /** Ref for the menu, in `menuProps`; places it once mounted. */
+  protected mount(element: HTMLElement | null): void;
+  /** Ref for the highlighted option, in `optionProps`; keeps it in view. Defaults to `scrollIntoView`. */
+  protected reveal(element: HTMLElement | null): void;
+  private update;
+  render(): Component.Node;
+}
+declare function hold(event: MouseEvent): void;
+//#endregion
+export { Select };
+//# sourceMappingURL=base.d.ts.map