legacy.css 0.1.0

package/src/features/toast.ts

@@ -0,0 +1,216 @@
+import { isElement, isLegacyCollection } from "../internal";
+import type { LegacyRequiredApi, LegacyTarget, LegacyToastInput, LegacyToastOptions, LegacyToastPosition, LegacyToastType } from "../internal";
+const legacyToastPositions: LegacyToastPosition[] = ["top-left", "top-right", "bottom-left", "bottom-right"];
+const toastTimers = new WeakMap<Element, number>();
+function isToastPosition(position: unknown): position is LegacyToastPosition {
+  return typeof position === "string" && legacyToastPositions.includes(position as LegacyToastPosition);
+}
+
+export function installToast(legacy: LegacyRequiredApi): void {
+  function resolveToast(target: LegacyTarget): Element | null {
+    if (!target) {
+      return null;
+    }
+
+    if (isLegacyCollection(target)) {
+      return resolveToast(target[0]);
+    }
+
+    if (typeof target === "string") {
+      return document.querySelector(target);
+    }
+
+    if (isElement(target) && target.matches(".toast, [data-toast]")) {
+      return target;
+    }
+
+    return null;
+  }
+
+  function normalizeToastPosition(position: unknown): LegacyToastPosition {
+    return isToastPosition(position)
+      ? position
+      : "bottom-right";
+  }
+
+  function getToastRegion(position: unknown): HTMLElement {
+    const normalizedPosition = normalizeToastPosition(position);
+    let region = document.querySelector<HTMLElement>(
+      '[data-toast-region][data-position="' +
+        normalizedPosition +
+        '"], .toast-region[data-position="' +
+        normalizedPosition +
+        '"]'
+    );
+
+    if (region) {
+      return region;
+    }
+
+    region = document.createElement("div");
+    region.className = "toast-region";
+    region.dataset.position = normalizedPosition;
+    region.dataset.toastRegion = "";
+    region.setAttribute("aria-live", "polite");
+    region.setAttribute("aria-atomic", "false");
+    document.body.append(region);
+
+    return region;
+  }
+
+  function normalizeToastOptions(message: LegacyToastInput, options?: LegacyToastOptions): LegacyToastOptions {
+    if (message && typeof message === "object" && !("nodeType" in message) && !("jquery" in message)) {
+      return Object.assign({}, message);
+    }
+
+    return Object.assign({}, options, {
+      message: isLegacyCollection(message as LegacyTarget) ? (message as { 0?: Node })[0] : message,
+    });
+  }
+
+  function resolveToastContainer(target: LegacyTarget): Element | Document | null {
+    /* v8 ignore next -- public toast callers only resolve truthy container targets */
+    if (!target) {
+      return null;
+    }
+
+    if (isLegacyCollection(target)) {
+      return resolveToastContainer(target[0]);
+    }
+
+    if (typeof target === "string") {
+      return document.querySelector(target);
+    }
+
+    if (isElement(target)) {
+      return target;
+    }
+
+    return null;
+  }
+
+  function setToastContent(toast: HTMLElement, options: LegacyToastOptions): void {
+    const body = document.createElement("div");
+    body.className = "toast-body";
+
+    if (options.title) {
+      const title = document.createElement("strong");
+      title.className = "toast-title";
+      title.textContent = options.title;
+      body.append(title);
+    }
+
+    if (options.message && typeof options.message === "object" && "nodeType" in options.message) {
+      body.append(options.message);
+    } else {
+      const message = document.createElement("span");
+      message.textContent = options.message || "";
+      body.append(message);
+    }
+
+    toast.append(body);
+  }
+
+  function closeToastElement(toast: Element | null): Element | null {
+    if (!toast) {
+      return null;
+    }
+
+    const timer = toastTimers.get(toast);
+
+    if (timer) {
+      window.clearTimeout(timer);
+      toastTimers.delete(toast);
+    }
+
+    toast.dispatchEvent(new CustomEvent("toast:close", { bubbles: true }));
+    toast.remove();
+
+    return toast;
+  }
+
+  function showToast(message: LegacyToastInput, options?: LegacyToastOptions): HTMLElement | null {
+    const nextOptions = normalizeToastOptions(message, options);
+    const type: LegacyToastType = nextOptions.type &&
+      ["info", "success", "warning", "danger", "muted"].includes(nextOptions.type)
+      ? nextOptions.type
+      : "info";
+    const region = nextOptions.container
+      ? resolveToastContainer(nextOptions.container)
+      : getToastRegion(nextOptions.position);
+    const toast = document.createElement("section");
+    const duration =
+      typeof nextOptions.duration === "number" ? nextOptions.duration : 5000;
+
+    if (!region) {
+      return null;
+    }
+
+    toast.className = "toast";
+    toast.dataset.toast = "";
+    toast.setAttribute("role", type === "danger" ? "alert" : "status");
+
+    if (type !== "info") {
+      toast.classList.add("toast-" + type);
+    }
+
+    setToastContent(toast, nextOptions);
+
+    if (nextOptions.dismissible !== false) {
+      const closeButton = document.createElement("button");
+      closeButton.type = "button";
+      closeButton.className = "toast-close";
+      closeButton.setAttribute(
+        "aria-label",
+        nextOptions.closeLabel || "Close notification"
+      );
+      closeButton.textContent = nextOptions.closeText || "Close";
+      closeButton.addEventListener("click", function () {
+        closeToastElement(toast);
+      });
+      toast.append(closeButton);
+    }
+
+    region.append(toast);
+    toast.dispatchEvent(new CustomEvent("toast:show", { bubbles: true }));
+
+    if (duration > 0) {
+      toastTimers.set(
+        toast,
+        window.setTimeout(function () {
+          closeToastElement(toast);
+        }, duration)
+      );
+    }
+
+    return toast;
+  }
+
+  function clearToasts(target?: LegacyTarget): Element[] {
+    /* v8 ignore next -- public clear covers both document and resolved-container behavior */
+    const rootElement = target
+      ? resolveToastContainer(target)
+      : document;
+    const toasts: Element[] = rootElement
+      ? Array.from(rootElement.querySelectorAll(".toast, [data-toast]"))
+      : [];
+
+    toasts.forEach(closeToastElement);
+
+    return toasts;
+  }
+
+  legacy.toast = {
+    show(message, options) {
+      return showToast(message, options);
+    },
+    close(target) {
+      return closeToastElement(resolveToast(target));
+    },
+    clear(target) {
+      return clearToasts(target);
+    },
+  };
+
+
+}

package/src/forms.css

@@ -0,0 +1,57 @@
+form {
+  margin: 0 0 var(--legacy-space-4);
+}
+
+fieldset {
+  background: var(--legacy-surface-raised);
+  border: 1px solid var(--legacy-border);
+  margin: 0 0 var(--legacy-space-4);
+  padding: var(--legacy-space-3) var(--legacy-space-4) var(--legacy-space-4);
+}
+
+legend {
+  background: var(--legacy-primary);
+  border: 1px solid var(--legacy-primary-dark);
+  color: var(--legacy-primary-contrast);
+  font-weight: 700;
+  padding: var(--legacy-space-1) var(--legacy-space-2);
+}
+
+label {
+  display: inline-block;
+  font-weight: 700;
+  margin: var(--legacy-space-2) 0 var(--legacy-space-1);
+}
+
+input,
+select,
+textarea {
+  background: var(--legacy-control-bg);
+  border: 1px solid var(--legacy-border-dark);
+  border-radius: var(--legacy-radius);
+  color: var(--legacy-text);
+  display: block;
+  font: inherit;
+  max-width: 100%;
+  padding: 0.35rem 0.45rem;
+  width: 100%;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline-block;
+  margin-right: var(--legacy-space-1);
+  width: auto;
+}
+
+textarea {
+  min-height: 7rem;
+  resize: vertical;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: 2px solid var(--legacy-focus);
+  outline-offset: 1px;
+}

package/src/internal.ts

@@ -0,0 +1,210 @@
+export type LegacyTarget<T extends Element = Element> =
+  | string
+  | T
+  | { 0?: T; jquery?: unknown; nodeType?: number }
+  | null
+  | undefined;
+
+export type LegacyRequiredApi = {
+  [Key in keyof LegacyCssApi]-?: LegacyCssApi[Key];
+};
+
+export type LegacyFocusableElement = HTMLElement | SVGElement;
+export type LegacyPageToken = number | "ellipsis-start" | "ellipsis-end";
+export type LegacyPaginationAction = "previous" | "next" | "page";
+export type LegacyTheme = "light" | "dark";
+
+export interface LegacyDragdropState {
+  board: Element;
+  item: Element;
+  fromColumn: Element;
+  fromIndex: number;
+}
+
+export interface LegacyMultiselectState {
+  label: HTMLSpanElement;
+  menu: HTMLDivElement;
+  options: HTMLButtonElement[];
+  root: HTMLDivElement;
+  toggle: HTMLButtonElement;
+}
+
+export interface LegacyCloseEvent {
+  currentTarget: HTMLDialogElement;
+}
+
+export type LegacyToastType = "info" | "success" | "warning" | "danger" | "muted";
+export type LegacyToastPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export type LegacyPopoverPlacement = "top" | "right" | "bottom" | "left";
+
+export interface LegacyToastOptions {
+  closeLabel?: string;
+  closeText?: string;
+  container?: LegacyTarget;
+  dismissible?: boolean;
+  duration?: number;
+  message?: string | Node;
+  position?: LegacyToastPosition;
+  title?: string;
+  type?: LegacyToastType;
+}
+
+export type LegacyToastInput = LegacyToastOptions | string | Node | null | undefined;
+
+export interface LegacyDragdropPayload {
+  board: Element;
+  item: Element;
+  fromColumn: Element;
+  toColumn: Element | null;
+  fromColumnId: string | null;
+  toColumnId: string | null;
+  fromIndex: number;
+  toIndex: number;
+  originalEvent: Event;
+}
+
+export interface LegacyDragdropOptions {
+  onChangeColumn?: (this: Element, payload: LegacyDragdropPayload) => void;
+  onDrag?: (this: Element, payload: LegacyDragdropPayload | null) => void;
+  onDrop?: (this: Element, payload: LegacyDragdropPayload) => void;
+}
+
+export interface LegacyPaginationState {
+  page: number;
+  pageSize: number;
+  request: number;
+  result?: LegacyPaginationResult;
+}
+
+export interface LegacyPaginationResult {
+  items: unknown[];
+  page: number;
+  pageCount: number;
+  pageSize: number;
+  total: number;
+}
+
+export interface LegacyPaginationOptions {
+  data?: unknown[];
+  load?: (this: Element, state: { page: number; pageSize: number; offset: number }) => Promise<unknown> | unknown;
+  maxPages?: number;
+  pageSize?: number;
+  pageSizes?: number[];
+  renderItem?: (
+    item: unknown,
+    index: number,
+    state: LegacyPaginationResult
+  ) => Element | DocumentFragment | string | null | undefined;
+  target?: Element | null;
+}
+
+export interface LegacyPaginationSetupOptions extends Omit<LegacyPaginationOptions, "pageSizes" | "target"> {
+  pageSizes?: number[] | string;
+  target?: LegacyTarget | Element | null;
+}
+
+export interface LegacyPaginationPayload {
+  items?: unknown;
+  page?: unknown;
+  pageCount?: unknown;
+  pageSize?: unknown;
+  total?: unknown;
+}
+
+export interface LegacyCssApi {
+  theme?: {
+    apply(theme?: string | null): LegacyTheme;
+    get(): LegacyTheme;
+    set(theme: string): LegacyTheme;
+  };
+  dragdrop?: {
+    setup(target: LegacyTarget, options?: LegacyDragdropOptions): Element | null;
+  };
+  modal?: {
+    close(target: LegacyTarget<HTMLDialogElement>, returnValue?: string): HTMLDialogElement | null;
+    open(target: LegacyTarget<HTMLDialogElement>): HTMLDialogElement | null;
+    toggle(target: LegacyTarget<HTMLDialogElement>): HTMLDialogElement | null;
+  };
+  multiselect?: {
+    close(target: LegacyTarget): HTMLSelectElement | null;
+    open(target: LegacyTarget): HTMLSelectElement | null;
+    setup(target: LegacyTarget): HTMLSelectElement | null;
+    toggle(target: LegacyTarget): HTMLSelectElement | null;
+  };
+  pagination?: {
+    goTo(target: LegacyTarget, page: number | string): Element | null;
+    pageSize(target: LegacyTarget, pageSize: number | string): Element | null;
+    refresh(target: LegacyTarget): Element | null;
+    setup(target: LegacyTarget, options?: LegacyPaginationSetupOptions): Element | null;
+  };
+  popover?: {
+    close(target: LegacyTarget): Element | null;
+    open(target: LegacyTarget): Element | null;
+    setup(target: LegacyTarget): Element | null;
+    toggle(target: LegacyTarget): Element | null;
+  };
+  tabs?: {
+    select(target: LegacyTarget, index: number | string): Element | null;
+    setup(target: LegacyTarget): Element | null;
+  };
+  toast?: {
+    clear(target?: LegacyTarget): Element[];
+    close(target: LegacyTarget): Element | null;
+    show(message: LegacyToastInput, options?: LegacyToastOptions): HTMLElement | null;
+  };
+}
+
+export interface LegacyJQueryCollection {
+  each(callback: (this: Element) => void): LegacyJQueryCollection;
+  dragdrop?: (options?: LegacyDragdropOptions) => LegacyJQueryCollection;
+  modal?: (action?: string) => LegacyJQueryCollection;
+  multiselect?: (action?: string) => LegacyJQueryCollection;
+  pagination?: (action?: string | LegacyPaginationSetupOptions, value?: number | string) => LegacyJQueryCollection;
+  popover?: (action?: string) => LegacyJQueryCollection;
+  tabs?: (action?: string, index?: number | string) => LegacyJQueryCollection;
+  toast?: (action?: string | LegacyToastOptions) => LegacyJQueryCollection;
+}
+
+export interface LegacyJQuery {
+  (target?: unknown): LegacyJQueryCollection;
+  fn?: LegacyJQueryCollection;
+  theme?: (theme?: string) => LegacyTheme;
+  toast?: (message: LegacyToastInput, options?: LegacyToastOptions) => HTMLElement | null;
+}
+
+declare global {
+  interface Window {
+    LegacyCss?: LegacyCssApi;
+    jQuery?: LegacyJQuery;
+  }
+}
+
+export function isLegacyCollection<T extends Element>(target: LegacyTarget<T>): target is { 0?: T; jquery?: unknown } {
+  return typeof target === "object" && target !== null && "jquery" in target;
+}
+
+export function isElement(target: unknown): target is Element {
+  return (
+    typeof target === "object" &&
+    target !== null &&
+    "nodeType" in target &&
+    (target as { nodeType: number }).nodeType === 1
+  );
+}
+
+export function isSelectElement(target: unknown): target is HTMLSelectElement {
+  return isElement(target) && target.nodeName === "SELECT";
+}
+
+export function eventTargetElement(event: Event): Element | null {
+  return isElement(event.target) ? event.target : null;
+}
+
+export function currentTargetElement(event: Event): Element | null {
+  /* v8 ignore next -- browser component listeners always dispatch from elements */
+  return isElement(event.currentTarget) ? event.currentTarget : null;
+}
+
+export function listen(target: EventTarget, type: string, listener: EventListener): void {
+  target.addEventListener(type, listener);
+}

package/src/jquery.ts

@@ -0,0 +1,141 @@
+import type { LegacyJQuery, LegacyRequiredApi } from "./internal";
+
+export function installJQueryBridges(root: Window & { jQuery?: LegacyJQuery }, legacy: LegacyRequiredApi): void {
+  if (root.jQuery && root.jQuery.fn && !root.jQuery.fn.modal) {
+    root.jQuery.fn.modal = function (action) {
+      const method = action || "open";
+
+      return this.each(function () {
+        if (method === "close") {
+          legacy.modal.close(this);
+          return;
+        }
+
+        if (method === "toggle") {
+          legacy.modal.toggle(this);
+          return;
+        }
+
+        legacy.modal.open(this);
+      });
+    };
+  }
+
+  if (root.jQuery && !root.jQuery.toast) {
+    root.jQuery.toast = function (message, options) {
+      return legacy.toast.show(message, options);
+    };
+  }
+
+  if (root.jQuery && !root.jQuery.theme) {
+    root.jQuery.theme = function (theme) {
+      return theme === undefined ? legacy.theme.get() : legacy.theme.set(theme);
+    };
+  }
+
+  if (root.jQuery && root.jQuery.fn && !root.jQuery.fn.toast) {
+    root.jQuery.fn.toast = function (action) {
+      return this.each(function () {
+        if (action === "close") {
+          legacy.toast.close(this);
+          return;
+        }
+
+        /* v8 ignore next -- jQuery bridge accepts object options or default toast options */
+        legacy.toast.show(this, typeof action === "object" ? action : undefined);
+      });
+    };
+  }
+
+  if (root.jQuery && root.jQuery.fn && !root.jQuery.fn.tabs) {
+    root.jQuery.fn.tabs = function (action, index) {
+      return this.each(function () {
+        if (action === "select" && index !== undefined) {
+          legacy.tabs.select(this, index);
+          return;
+        }
+
+        legacy.tabs.setup(this);
+      });
+    };
+  }
+
+  if (root.jQuery && root.jQuery.fn && !root.jQuery.fn.popover) {
+    root.jQuery.fn.popover = function (action) {
+      return this.each(function () {
+        if (action === "open") {
+          legacy.popover.open(this);
+          return;
+        }
+
+        if (action === "close") {
+          legacy.popover.close(this);
+          return;
+        }
+
+        if (action === "toggle") {
+          legacy.popover.toggle(this);
+          return;
+        }
+
+        legacy.popover.setup(this);
+      });
+    };
+  }
+
+  if (root.jQuery && root.jQuery.fn && !root.jQuery.fn.dragdrop) {
+    root.jQuery.fn.dragdrop = function (options) {
+      return this.each(function () {
+        legacy.dragdrop.setup(this, options);
+      });
+    };
+  }
+
+  if (root.jQuery && root.jQuery.fn && !root.jQuery.fn.multiselect) {
+    root.jQuery.fn.multiselect = function (action) {
+      return this.each(function () {
+        if (action === "open") {
+          legacy.multiselect.open(this);
+          return;
+        }
+
+        if (action === "close") {
+          legacy.multiselect.close(this);
+          return;
+        }
+
+        if (action === "toggle") {
+          legacy.multiselect.toggle(this);
+          return;
+        }
+
+        legacy.multiselect.setup(this);
+      });
+    };
+  }
+
+  if (root.jQuery && root.jQuery.fn && !root.jQuery.fn.pagination) {
+    root.jQuery.fn.pagination = function (action, value) {
+      return this.each(function () {
+        if (action === "goTo" && value !== undefined) {
+          legacy.pagination.goTo(this, value);
+          return;
+        }
+
+        if (action === "pageSize" && value !== undefined) {
+          legacy.pagination.pageSize(this, value);
+          return;
+        }
+
+        if (action === "refresh") {
+          legacy.pagination.refresh(this);
+          return;
+        }
+
+        /* v8 ignore next -- jQuery bridge accepts object options or default setup options */
+        legacy.pagination.setup(this, typeof action === "object" ? action : undefined);
+      });
+    };
+  }
+
+}

package/src/legacy.css

@@ -0,0 +1,22 @@
+@import url("./variables.css");
+@import url("./base.css");
+@import url("./typography.css");
+@import url("./lists.css");
+@import url("./forms.css");
+@import url("./multiselect.css");
+@import url("./buttons.css");
+@import url("./toolbars.css");
+@import url("./tables.css");
+@import url("./navigation.css");
+@import url("./sidebar.css");
+@import url("./pagination.css");
+@import url("./panels.css");
+@import url("./modal.css");
+@import url("./popover.css");
+@import url("./tabs.css");
+@import url("./dragdrop.css");
+@import url("./progress.css");
+@import url("./alerts.css");
+@import url("./toast.css");
+@import url("./badges.css");
+@import url("./utilities.css");

package/src/legacy.ts

@@ -0,0 +1,31 @@
+import { installDragdrop } from "./features/dragdrop";
+import { installJQueryBridges } from "./jquery";
+import { installModal } from "./features/modal";
+import { installMultiselect } from "./features/multiselect";
+import { installPagination } from "./features/pagination";
+import { installPopover } from "./features/popover";
+import { installTabs } from "./features/tabs";
+import { installTheme } from "./features/theme";
+import { installToast } from "./features/toast";
+import type { LegacyRequiredApi } from "./internal";
+
+(function () {
+  const root = window;
+
+  /* v8 ignore next -- alternate startup path is preserving an existing namespace */
+  if (!root.LegacyCss) {
+    root.LegacyCss = {};
+  }
+
+  const legacy = root.LegacyCss as LegacyRequiredApi;
+
+  installTheme(legacy);
+  installModal(legacy);
+  installToast(legacy);
+  installPopover(legacy);
+  installTabs(legacy);
+  installDragdrop(legacy);
+  installMultiselect(legacy);
+  installPagination(legacy);
+  installJQueryBridges(root, legacy);
+})();

package/src/lists.css

@@ -0,0 +1,21 @@
+ul,
+ol {
+  margin: 0 0 var(--legacy-space-4) var(--legacy-space-6);
+  padding: 0;
+}
+
+li {
+  margin-bottom: var(--legacy-space-1);
+}
+
+dl {
+  margin: 0 0 var(--legacy-space-4);
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin: 0 0 var(--legacy-space-2) var(--legacy-space-4);
+}