@oscarpalmer/oui 0.14.0 → 0.16.0

package/dist/js/splitter.js

@@ -0,0 +1,211 @@
+import { clamp } from "@oscarpalmer/atoms/number";
+import { on, getPosition } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+class OuiSplitterElement extends HTMLElement {
+  #splitter;
+  constructor() {
+    super();
+    const panels = [...this.children].filter(
+      (child) => child instanceof HTMLElement
+    );
+    if (panels.length !== 2) {
+      throw new Error("oui-splitter must have exactly two panels.");
+    }
+    this.#splitter = new Splitter(this, panels);
+  }
+  connectedCallback() {
+    if (this.#splitter.types.auto) {
+      observer.observe(this);
+    }
+  }
+  disconnectedCallback() {
+    if (this.#splitter.types.auto) {
+      observer.unobserve(this);
+    }
+  }
+}
+class Splitter {
+  constructor(element, panels) {
+    this.element = element;
+    this.panels = panels;
+    this.handle = createHandle();
+    this.rectangle = element.getBoundingClientRect();
+    this.separator = createSeparator();
+    this.separator.append(this.handle);
+    panels[0].insertAdjacentElement("afterend", this.separator);
+    mapped.set(element, this);
+    mapped.set(this.handle, this);
+    setSize(this, this.flex.value);
+    this.types = getTypes(this);
+    if (this.types.horizontal) {
+      this.element.setAttribute("oui-splitter-horizontal", "");
+    }
+  }
+  flex = {
+    previous: 0.5,
+    value: 0.5
+  };
+  handle;
+  rectangle;
+  separator;
+  types;
+}
+function createHandle() {
+  const handle = document.createElement("span");
+  handle.tabIndex = 0;
+  handle.setAttribute("aria-label", "Resize panels");
+  handle.setAttribute("oui-splitter-handle", "");
+  return handle;
+}
+function createSeparator() {
+  const separator = document.createElement("div");
+  separator.setAttribute("oui-splitter-separator", "");
+  return separator;
+}
+function getFlex(splitter2, value) {
+  const { height, left, top, width } = splitter2.rectangle;
+  const offset = value - (splitter2.types.horizontal ? top : left);
+  const fraction = offset / (splitter2.types.horizontal ? height : width);
+  return clamp(fraction, 0.1, 0.9);
+}
+function getTypes(splitter2, width, height) {
+  const type = splitter2.element.getAttribute("type")?.trim() ?? "";
+  if (type === "horizontal") {
+    return {
+      auto: false,
+      horizontal: true
+    };
+  }
+  if (type === "auto") {
+    return {
+      auto: true,
+      horizontal: (height ?? splitter2.rectangle.height) > (width ?? splitter2.rectangle.width)
+    };
+  }
+  return {
+    auto: false,
+    horizontal: false
+  };
+}
+function onEnd(reset) {
+  if (splitter != null) {
+    splitter.handle.removeAttribute("oui-splitter-active");
+    splitter.separator.removeAttribute("oui-splitter-active");
+    if (reset) {
+      setSize(splitter, splitter.flex.previous);
+    } else {
+      splitter.flex.previous = splitter.flex.value;
+    }
+  }
+  splitter = void 0;
+}
+function onKeydown(event) {
+  switch (true) {
+    case allKeys.has(event.key):
+      onNavigate(event);
+      break;
+    case event.key === "Escape":
+      onEnd(true);
+      break;
+  }
+}
+function onMousedown(event) {
+  splitter = mapped.get(
+    findAncestor(
+      event.target,
+      "[oui-splitter-handle]"
+    )
+  );
+  if (splitter == null) {
+    return;
+  }
+  splitter.handle.setAttribute("oui-splitter-active", "");
+  splitter.separator.setAttribute("oui-splitter-active", "");
+  splitter.rectangle = splitter.element.getBoundingClientRect();
+}
+function onMousemove(event) {
+  if (splitter == null) {
+    return;
+  }
+  const position = getPosition(event);
+  if (position != null) {
+    splitter.flex.value = getFlex(
+      splitter,
+      splitter.types.horizontal ? position.y : position.x
+    );
+    setSize(splitter, splitter.flex.value);
+  }
+}
+function onMouseup() {
+  if (splitter != null) {
+    onEnd(false);
+  }
+}
+function onNavigate(event) {
+  const splitter2 = mapped.get(
+    findAncestor(
+      event.target,
+      "[oui-splitter-handle]"
+    )
+  );
+  if (splitter2 == null) {
+    return;
+  }
+  if (absoluteKeys.has(event.key)) {
+    setSize(splitter2, event.key === "End" ? 0.9 : 0.1, true);
+    return;
+  }
+  if (splitter2.types.horizontal && !horizontalKeys.has(event.key) || !splitter2.types.horizontal && !verticalKeys.has(event.key)) {
+    return;
+  }
+  const modifier = negativeKeys.has(event.key) ? -1 : 1;
+  setSize(splitter2, splitter2.flex.value + modifier * 0.05, true);
+}
+function onObservation(entries) {
+  if (frame != null) {
+    cancelAnimationFrame(frame);
+  }
+  frame = requestAnimationFrame(() => {
+    for (const entry of entries) {
+      const splitter2 = mapped.get(entry.target);
+      if (splitter2 == null) {
+        return;
+      }
+      splitter2.types = getTypes(
+        splitter2,
+        entry.contentRect.width,
+        entry.contentRect.height
+      );
+      if (splitter2.types.horizontal) {
+        splitter2.element.setAttribute("oui-splitter-horizontal", "");
+      } else {
+        splitter2.element.removeAttribute("oui-splitter-horizontal");
+      }
+    }
+    frame = void 0;
+  });
+}
+function setSize(splitter2, size, previous) {
+  splitter2.flex.value = size;
+  if (previous) {
+    splitter2.flex.previous = size;
+  }
+  splitter2.element.style.setProperty("--oui-splitter-size", `${size}`);
+}
+const absoluteKeys = /* @__PURE__ */ new Set(["End", "Home"]);
+const horizontalKeys = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);
+const mapped = /* @__PURE__ */ new WeakMap();
+const observer = new ResizeObserver(onObservation);
+const negativeKeys = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
+const verticalKeys = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight"]);
+const allKeys = /* @__PURE__ */ new Set([...absoluteKeys, ...horizontalKeys, ...verticalKeys]);
+let frame;
+let splitter;
+customElements.define("oui-splitter", OuiSplitterElement);
+on(document, "keydown", onKeydown);
+on(document, "mousedown", onMousedown);
+on(document, "mousemove", onMousemove);
+on(document, "mouseup", onMouseup);
+export {
+  OuiSplitterElement
+};

package/dist/js/tooltip.cjs

@@ -112,7 +112,7 @@ function initialize(tooltip) {
         element,
         event$1,
         () => {
-          floatable.activate(floatable$1, active, 250);
+          floatable.activate(floatable$1, active, void 0, 250);
         },
         {
           signal: abortController.signal
@@ -124,7 +124,7 @@ function initialize(tooltip) {
         element,
         event$1,
         () => {
-          floatable.deactivate(floatable$1, active, 250);
+          floatable.deactivate(floatable$1, active, void 0, 250);
         },
         {
           signal: abortController.signal
@@ -138,7 +138,6 @@ function removeTooltip(element) {
   tooltips.delete(element);
 }
 function reset(anchor, attributes) {
-  console.log("reset", anchor, attributes);
   if (attributes.ariaDescribedby == null) {
     anchor.removeAttribute("aria-describedby");
   } else {

package/dist/js/tooltip.js

@@ -111,7 +111,7 @@ function initialize(tooltip) {
         element,
         event,
         () => {
-          activate(floatable, active, 250);
+          activate(floatable, active, void 0, 250);
         },
         {
           signal: abortController.signal
@@ -123,7 +123,7 @@ function initialize(tooltip) {
         element,
         event,
         () => {
-          deactivate(floatable, active, 250);
+          deactivate(floatable, active, void 0, 250);
         },
         {
           signal: abortController.signal
@@ -137,7 +137,6 @@ function removeTooltip(element) {
   tooltips.delete(element);
 }
 function reset(anchor, attributes) {
-  console.log("reset", anchor, attributes);
   if (attributes.ariaDescribedby == null) {
     anchor.removeAttribute("aria-describedby");
   } else {

package/package.json

@@ -41,12 +41,32 @@
 		},
 		"./focus-trap": {
 			"import": {
-				"types": "./types/focus-trap.d.ts",
-				"default": "./dist/js/focus-trap.js"
+				"types": "./types/focus-trap/standalone.d.ts",
+				"default": "./dist/js/focus-trap/standalone.js"
 			},
 			"require": {
-				"types": "./types/focus-trap.d.cts",
-				"default": "./dist/js/focus-trap.cjs"
+				"types": "./types/focus-trap/standalone.d.cts",
+				"default": "./dist/js/focus-trap/standalone.cjs"
+			}
+		},
+		"./popover": {
+			"import": {
+				"types": "./types/popover.d.ts",
+				"default": "./dist/js/popover.js"
+			},
+			"require": {
+				"types": "./types/popover.d.cts",
+				"default": "./dist/js/popover.cjs"
+			}
+		},
+		"./splitter": {
+			"import": {
+				"types": "./types/splitter.d.ts",
+				"default": "./dist/js/splitter.js"
+			},
+			"require": {
+				"types": "./types/splitter.d.cts",
+				"default": "./dist/js/splitter.cjs"
 			}
 		},
 		"./tooltip": {
@@ -94,5 +114,5 @@
 	},
 	"type": "module",
 	"types": "types/index.d.cts",
-	"version": "0.14.0"
+	"version": "0.16.0"
 }

package/src/css/button.scss

@@ -58,9 +58,6 @@
 		--oui-foreground-percentage: 12.5%;
 
 		font-size: 0.75em;
-		font-weight: bold;
-		letter-spacing: 0.1em;
-		text-transform: uppercase;
 	}
 
 	:where(&:focus-visible) {

package/src/css/popover.scss

@@ -0,0 +1,9 @@
+@use 'mixins.scss' as mixins;
+
+:where([oui-popover-content]) {
+	@include mixins.shadowOverlay;
+
+	padding: 1rem;
+	background-color: var(--oui-absolute);
+	border-radius: 0.5rem;
+}

package/src/css/splitter.scss

@@ -0,0 +1,87 @@
+@use 'mixins.scss' as mixins;
+
+oui-splitter {
+	:where(&) {
+		display: flex;
+		flex-flow: row nowrap;
+		flex: 1;
+	}
+
+	:where(& > :first-child) {
+		flex: var(--oui-splitter-size, .5);
+	}
+
+	:where(& > :last-child) {
+		flex: calc(1 - var(--oui-splitter-size, .5));
+	}
+}
+
+:where([oui-splitter-separator]) {
+	width: .25rem;
+	background-color: rgba(0, 0, 0, 0.1);
+	border-radius: .25rem;
+	position: relative;
+	transition: background .125s ease-in-out;
+}
+
+:where([oui-splitter-separator]:has([oui-splitter-handle]:focus)),
+:where([oui-splitter-separator]:has([oui-splitter-handle]:hover)),
+:where([oui-splitter-separator][oui-splitter-active]) {
+	background-color: rgba(0, 0, 255, .1);
+}
+
+:where([oui-splitter-handle]) {
+	width: 2rem;
+	height: 4rem;
+	padding: .875rem;
+	position: absolute;
+	inset: 50% auto auto 50%;
+	transform: translate3d(-50%, -50%, 0);
+	cursor: ew-resize;
+
+	&:focus {
+		outline: none;
+	}
+
+	&::after {
+		content: '';
+		width: 100%;
+		height: 100%;
+		display: block;
+		background-color: rgba(0, 0, 0, 0.25);
+		outline: .25rem solid transparent;
+		outline-offset: .25rem;
+		border-radius: .25rem;
+		transition: background .125s ease-in-out, outline .125s ease-in-out;
+	}
+}
+
+:where([oui-splitter-handle]:focus),
+:where([oui-splitter-handle]:hover),
+:where([oui-splitter-handle][oui-splitter-active]) {
+	&::after {
+		background-color: rgba(0, 0, 255, .25);
+	}
+}
+
+:where([oui-splitter-handle]:focus-visible)::after {
+	outline-color: rgba(0, 0, 255, .25);
+}
+
+oui-splitter[type='horizontal' i],
+oui-splitter[oui-splitter-horizontal] {
+	:where(&) {
+		flex-flow: column nowrap;
+	}
+
+	:where(& [oui-splitter-separator]) {
+		width: 100%;
+		height: .25rem;
+	}
+
+	:where(& [oui-splitter-handle]) {
+		width: 4rem;
+		height: 2rem;
+		cursor: ns-resize;
+	}
+}

package/src/css/tooltip.scss

@@ -15,7 +15,4 @@
 	background-color: var(--oui-absolute);
 	border-radius: 0.25rem;
 	font-size: 0.875rem;
-	position: fixed;
-	inset: 0 auto auto 0;
-	z-index: 10;
 }

package/src/js/floatable.ts

@@ -1,27 +1,30 @@
 export class Floatable {
-	activate: number | undefined;
-	active = false;
-	deactivate: number | undefined;
-	frame: DOMHighResTimeStamp | undefined;
-
-	constructor(
-		public anchor: HTMLElement,
-		public content: HTMLElement,
-	) {}
-
-	destroy(): void {
-		this.activate = undefined;
-		this.deactivate = undefined;
-		this.frame = undefined;
-
-		this.anchor = undefined as never;
-		this.content = undefined as never;
+		activate: number | undefined;
+		active = false;
+		deactivate: number | undefined;
+		frame: DOMHighResTimeStamp | undefined;
+
+		constructor(
+			public anchor: HTMLElement,
+			public content: HTMLElement,
+		) {
+			setStyles(content);
+		}
+
+		destroy(): void {
+			this.activate = undefined;
+			this.deactivate = undefined;
+			this.frame = undefined;
+
+			this.anchor = undefined as never;
+			this.content = undefined as never;
+		}
 	}
-}
 
 export function activate(
 	floatable: Floatable,
 	active: Set<Floatable>,
+	order?: Floatable[],
 	time?: number,
 ): void {
 	stop(floatable);
@@ -31,10 +34,10 @@ export function activate(
 	}
 
 	if (time == null || time === 0) {
-		onActivate(floatable, active);
+		onActivate(floatable, active, order);
 	} else {
 		floatable.activate = +setTimeout(() => {
-			onActivate(floatable, active);
+			onActivate(floatable, active, order);
 		}, time);
 	}
 }
@@ -42,6 +45,7 @@ export function activate(
 export function deactivate(
 	floatable: Floatable,
 	active: Set<Floatable>,
+	order?: Floatable[],
 	time?: number,
 ): void {
 	stop(floatable);
@@ -51,10 +55,10 @@ export function deactivate(
 	}
 
 	if (time == null || time === 0) {
-		onDeactivate(floatable, active);
+		onDeactivate(floatable, active, order);
 	} else {
 		floatable.deactivate = +setTimeout(() => {
-			onDeactivate(floatable, active);
+			onDeactivate(floatable, active, order);
 		}, time);
 	}
 }
@@ -106,11 +110,19 @@ function getY(anchor: DOMRect, content: DOMRect): number {
 	return anchor.top + (anchor.height - content.height) / 2;
 }
 
-function onActivate(floatable: Floatable, active: Set<Floatable>): void {
+function onActivate(
+	floatable: Floatable,
+	active: Set<Floatable>,
+	order?: Floatable[],
+): void {
 	floatable.active = true;
 
 	active.add(floatable);
 
+	if (order != null) {
+		order.push(floatable);
+	}
+
 	document.body.append(floatable.content);
 
 	floatable.content.hidden = false;
@@ -118,11 +130,21 @@ function onActivate(floatable: Floatable, active: Set<Floatable>): void {
 	update(floatable);
 }
 
-function onDeactivate(floatable: Floatable, active: Set<Floatable>): void {
+function onDeactivate(
+	floatable: Floatable,
+	active: Set<Floatable>,
+	order?: Floatable[],
+): void {
 	floatable.active = false;
 
 	active.delete(floatable);
 
+	const index = order?.indexOf(floatable) ?? -1;
+
+	if (index > -1) {
+		order?.splice(index, 1);
+	}
+
 	floatable.content.hidden = true;
 
 	floatable.anchor.insertAdjacentElement('afterend', floatable.content);
@@ -144,6 +166,12 @@ function update(floatable: Floatable): void {
 	floatable.frame = requestAnimationFrame(run);
 }
 
+function setStyles(content: HTMLElement): void {
+	content.style.position = 'fixed';
+	content.style.inset = '0 auto auto 0';
+	content.style.zIndex = '10';
+}
+
 function stop(floatable: Floatable): void {
 	if (floatable.frame != null) {
 		cancelAnimationFrame(floatable.frame);
@@ -165,4 +193,4 @@ function stop(floatable: Floatable): void {
 //
 
 const margin =
-	Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 4;
+	Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10) / 2;