@mattermost/compass-ui 0.1.0-alpha.14 → 0.1.0-alpha.16

package/dist/utils/slot.d.ts

@@ -0,0 +1,46 @@
+import { ReactElement, ReactNode, Ref, RefCallback } from 'react';
+type PossibleRef<T> = Ref<T> | undefined;
+/** Composes multiple refs into a single callback ref. */
+export declare function composeRefs<T>(...refs: Array<PossibleRef<T>>): RefCallback<T>;
+/**
+ * Reads the ref from a React element across React 18 (`element.ref`) and
+ * React 19 (`element.props.ref`).
+ */
+export declare function getElementRef(element: ReactElement): Ref<unknown> | undefined;
+type AnyProps = Record<string, unknown>;
+/**
+ * Merges Slot (asChild host) props with the child's props.
+ * Child props win by default; event handlers are composed (child first;
+ * host skipped when the child called `preventDefault()`); `className` and
+ * `style` are merged.
+ */
+export declare function mergeSlotProps(slotProps: AnyProps, childProps: AnyProps): AnyProps;
+export interface RenderAsChildOptions {
+    /** Single React element to clone (e.g. `<a>` or `<Link>`). */
+    child: ReactNode;
+    /** Props owned by the host component (className, handlers, aria-*, …). */
+    props: AnyProps;
+    /** Forwarded ref from the host. */
+    ref?: Ref<unknown>;
+    /** Anatomy nodes that replace the child's children. */
+    content: ReactNode;
+    /** When true, apply disabled-link semantics. */
+    disabled?: boolean;
+    /** BEM disabled class (e.g. `button--disabled`). */
+    disabledClassName?: string;
+    /**
+     * When true, warn in development if the child already has children (they
+     * will be replaced). Use for hosts that own their full anatomy
+     * (IconButton, ActionButton). Leave false when the host wraps the child's
+     * text (Button label).
+     */
+    warnOnChildContent?: boolean;
+}
+/**
+ * Clones a single child element with merged host props, composed refs, and
+ * replacement content. Never forwards `type`. When `disabled`, sets
+ * `aria-disabled`, the disabled class, and blocks click / auxclick navigation.
+ */
+export declare function renderAsChild({ child, props, ref, content, disabled, disabledClassName, warnOnChildContent, }: RenderAsChildOptions): ReactElement | null;
+export {};
+//# sourceMappingURL=slot.d.ts.map

package/dist/utils/slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../src/utils/slot.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,GAAG,EACR,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAGf,KAAK,WAAW,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;AAWzC,yDAAyD;AACzD,wBAAgB,WAAW,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAM7E;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,SAAS,CAQ7E;AAED,KAAK,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAQxC;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,QAAQ,EACnB,UAAU,EAAE,QAAQ,GACnB,QAAQ,CAuCV;AAuBD,MAAM,WAAW,oBAAoB;IACnC,8DAA8D;IAC9D,KAAK,EAAE,SAAS,CAAC;IACjB,0EAA0E;IAC1E,KAAK,EAAE,QAAQ,CAAC;IAChB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACnB,uDAAuD;IACvD,OAAO,EAAE,SAAS,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,GAAG,EACH,OAAO,EACP,QAAgB,EAChB,iBAAiB,EACjB,kBAA0B,GAC3B,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CA6D5C"}

package/dist/utils/slot.js

@@ -0,0 +1,88 @@
+import { Children as h, isValidElement as g, cloneElement as C } from "react";
+import { mergeClassNames as m } from "./props.js";
+function N(e, t) {
+  typeof e == "function" ? e(t) : e != null && (e.current = t);
+}
+function R(...e) {
+  return (t) => {
+    for (const n of e)
+      N(n, t);
+  };
+}
+function v(e) {
+  var n;
+  const t = (n = e.props) == null ? void 0 : n.ref;
+  return t !== void 0 ? t : e.ref;
+}
+function E(e) {
+  var t;
+  return e.length > 2 && e.startsWith("on") && e[2] === ((t = e[2]) == null ? void 0 : t.toUpperCase());
+}
+function b(e, t) {
+  const n = { ...t };
+  for (const r of Object.keys(e)) {
+    const o = e[r], l = t[r];
+    E(r) ? typeof o == "function" && typeof l == "function" ? n[r] = (...c) => {
+      const s = c[0];
+      l(...c), s != null && s.defaultPrevented || o(...c);
+    } : typeof o == "function" && (n[r] = o) : r === "style" ? n.style = {
+      ...typeof o == "object" && o != null ? o : null,
+      ...typeof l == "object" && l != null ? l : null
+    } : r === "className" ? n.className = m(
+      typeof o == "string" ? o : void 0,
+      typeof l == "string" ? l : void 0
+    ) : r in t || (n[r] = o);
+  }
+  return n;
+}
+function y(e) {
+  return e == null || e === !1 || e === !0 ? !1 : typeof e == "string" ? e.length > 0 : Array.isArray(e) ? e.some(y) : !0;
+}
+function p(e) {
+  e.preventDefault(), e.stopPropagation();
+}
+function V({
+  child: e,
+  props: t,
+  ref: n,
+  content: r,
+  disabled: o = !1,
+  disabledClassName: l,
+  warnOnChildContent: c = !1
+}) {
+  const s = process.env.NODE_ENV !== "production";
+  let i = null;
+  try {
+    i = h.only(e);
+  } catch {
+    i = null;
+  }
+  if (!g(i))
+    return s && console.warn(
+      "asChild expects a single React element child (e.g. <a> or <Link>)."
+    ), null;
+  const u = i.props;
+  s && c && y(u.children) && console.warn(
+    `asChild replaces the child element's children with component anatomy. Pass an empty element (e.g. <a href="…" />).`
+  );
+  const f = { ...t };
+  delete f.type, o && (f["aria-disabled"] = !0, l && (f.className = m(
+    typeof f.className == "string" ? f.className : void 0,
+    l
+  )));
+  const a = b(f, u);
+  o && (a.onClick = p, a.onAuxClick = p);
+  const d = v(i);
+  return C(i, {
+    ...a,
+    ref: R(n, d),
+    children: r
+  });
+}
+export {
+  R as composeRefs,
+  v as getElementRef,
+  b as mergeSlotProps,
+  V as renderAsChild
+};
+//# sourceMappingURL=slot.js.map

package/dist/utils/slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.js","sources":["../../src/utils/slot.ts"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefCallback,\n} from 'react';\nimport { mergeClassNames } from '@/utils/props';\n\ntype PossibleRef<T> = Ref<T> | undefined;\n\n/** Assigns a value to a callback or object ref. */\nfunction setRef<T>(ref: PossibleRef<T>, value: T | null) {\n  if (typeof ref === 'function') {\n    ref(value);\n  } else if (ref != null) {\n    (ref as { current: T | null }).current = value;\n  }\n}\n\n/** Composes multiple refs into a single callback ref. */\nexport function composeRefs<T>(...refs: Array<PossibleRef<T>>): RefCallback<T> {\n  return (node) => {\n    for (const ref of refs) {\n      setRef(ref, node);\n    }\n  };\n}\n\n/**\n * Reads the ref from a React element across React 18 (`element.ref`) and\n * React 19 (`element.props.ref`).\n */\nexport function getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19: ref is a regular prop. React 18: ref is on the element.\n  const propsRef = (element.props as { ref?: Ref<unknown> } | null | undefined)\n    ?.ref;\n  if (propsRef !== undefined) {\n    return propsRef;\n  }\n  return (element as ReactElement & { ref?: Ref<unknown> }).ref;\n}\n\ntype AnyProps = Record<string, unknown>;\n\nfunction isHandlerKey(key: string): boolean {\n  return (\n    key.length > 2 && key.startsWith('on') && key[2] === key[2]?.toUpperCase()\n  );\n}\n\n/**\n * Merges Slot (asChild host) props with the child's props.\n * Child props win by default; event handlers are composed (child first;\n * host skipped when the child called `preventDefault()`); `className` and\n * `style` are merged.\n */\nexport function mergeSlotProps(\n  slotProps: AnyProps,\n  childProps: AnyProps,\n): AnyProps {\n  const override: AnyProps = { ...childProps };\n\n  for (const propName of Object.keys(slotProps)) {\n    const slotValue = slotProps[propName];\n    const childValue = childProps[propName];\n\n    if (isHandlerKey(propName)) {\n      if (typeof slotValue === 'function' && typeof childValue === 'function') {\n        override[propName] = (...args: unknown[]) => {\n          const event = args[0] as { defaultPrevented?: boolean } | undefined;\n          childValue(...args);\n          if (!event?.defaultPrevented) {\n            slotValue(...args);\n          }\n        };\n      } else if (typeof slotValue === 'function') {\n        override[propName] = slotValue;\n      }\n    } else if (propName === 'style') {\n      override.style = {\n        ...(typeof slotValue === 'object' && slotValue != null\n          ? (slotValue as CSSProperties)\n          : null),\n        ...(typeof childValue === 'object' && childValue != null\n          ? (childValue as CSSProperties)\n          : null),\n      };\n    } else if (propName === 'className') {\n      override.className = mergeClassNames(\n        typeof slotValue === 'string' ? slotValue : undefined,\n        typeof childValue === 'string' ? childValue : undefined,\n      );\n    } else if (!(propName in childProps)) {\n      override[propName] = slotValue;\n    }\n  }\n\n  return override;\n}\n\nfunction hasRenderableChildren(children: ReactNode): boolean {\n  if (children == null || children === false || children === true) {\n    return false;\n  }\n  if (typeof children === 'string') {\n    return children.length > 0;\n  }\n  if (Array.isArray(children)) {\n    return children.some(hasRenderableChildren);\n  }\n  return true;\n}\n\nfunction blockNavigation(event: {\n  preventDefault: () => void;\n  stopPropagation: () => void;\n}) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\nexport interface RenderAsChildOptions {\n  /** Single React element to clone (e.g. `<a>` or `<Link>`). */\n  child: ReactNode;\n  /** Props owned by the host component (className, handlers, aria-*, …). */\n  props: AnyProps;\n  /** Forwarded ref from the host. */\n  ref?: Ref<unknown>;\n  /** Anatomy nodes that replace the child's children. */\n  content: ReactNode;\n  /** When true, apply disabled-link semantics. */\n  disabled?: boolean;\n  /** BEM disabled class (e.g. `button--disabled`). */\n  disabledClassName?: string;\n  /**\n   * When true, warn in development if the child already has children (they\n   * will be replaced). Use for hosts that own their full anatomy\n   * (IconButton, ActionButton). Leave false when the host wraps the child's\n   * text (Button label).\n   */\n  warnOnChildContent?: boolean;\n}\n\n/**\n * Clones a single child element with merged host props, composed refs, and\n * replacement content. Never forwards `type`. When `disabled`, sets\n * `aria-disabled`, the disabled class, and blocks click / auxclick navigation.\n */\nexport function renderAsChild({\n  child,\n  props,\n  ref,\n  content,\n  disabled = false,\n  disabledClassName,\n  warnOnChildContent = false,\n}: RenderAsChildOptions): ReactElement | null {\n  const warn = process.env.NODE_ENV !== 'production';\n\n  let onlyChild: ReactNode = null;\n  try {\n    onlyChild = Children.only(child);\n  } catch {\n    onlyChild = null;\n  }\n\n  if (!isValidElement(onlyChild)) {\n    if (warn) {\n      console.warn(\n        'asChild expects a single React element child (e.g. <a> or <Link>).',\n      );\n    }\n    return null;\n  }\n\n  const childProps = onlyChild.props as AnyProps & { children?: ReactNode };\n\n  if (\n    warn &&\n    warnOnChildContent &&\n    hasRenderableChildren(childProps.children)\n  ) {\n    console.warn(\n      'asChild replaces the child element\\'s children with component anatomy. Pass an empty element (e.g. <a href=\"…\" />).',\n    );\n  }\n\n  // Strip `type` — on <a> it means MIME type, not button type.\n  const slotProps: AnyProps = { ...props };\n  delete slotProps.type;\n\n  if (disabled) {\n    slotProps['aria-disabled'] = true;\n    if (disabledClassName) {\n      slotProps.className = mergeClassNames(\n        typeof slotProps.className === 'string'\n          ? slotProps.className\n          : undefined,\n        disabledClassName,\n      );\n    }\n  }\n\n  const merged = mergeSlotProps(slotProps, childProps);\n\n  if (disabled) {\n    merged.onClick = blockNavigation;\n    merged.onAuxClick = blockNavigation;\n  }\n\n  const childRef = getElementRef(onlyChild);\n\n  return cloneElement(onlyChild, {\n    ...merged,\n    ref: composeRefs(ref, childRef),\n    children: content,\n  } as AnyProps);\n}\n"],"names":["setRef","ref","value","composeRefs","refs","node","getElementRef","element","propsRef","_a","isHandlerKey","key","mergeSlotProps","slotProps","childProps","override","propName","slotValue","childValue","args","event","mergeClassNames","hasRenderableChildren","children","blockNavigation","renderAsChild","child","props","content","disabled","disabledClassName","warnOnChildContent","warn","onlyChild","Children","isValidElement","merged","childRef","cloneElement"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mattermost/compass-ui",
-  "version": "0.1.0-alpha.14",
+  "version": "0.1.0-alpha.16",
   "description": "Compass design system UI components for Mattermost products",
   "repository": {
     "type": "git",
@@ -81,6 +81,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-router-dom": "^6.28.0",
     "sass": "^1.83.4",
     "simplebar-react": "^3.3.2",
     "storybook": "^8.6.14",
@@ -109,6 +110,9 @@
       "components/action-button": [
         "./dist/components/action-button/index.d.ts"
       ],
+      "components/admin-console-footer": [
+        "./dist/components/admin-console-footer/index.d.ts"
+      ],
       "components/admin-console-header": [
         "./dist/components/admin-console-header/index.d.ts"
       ],