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

package/dist/components/right-sidebar-header/RightSidebarHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"RightSidebarHeader.js","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","CloseIcon"],"mappings":"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"}
+{"version":3,"file":"RightSidebarHeader.js","sources":["../../../src/components/right-sidebar-header/RightSidebarHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport ArrowBackIosIcon from '@mattermost/compass-icons/components/arrow-back-ios';\nimport ArrowCollapseIcon from '@mattermost/compass-icons/components/arrow-collapse';\nimport ArrowExpandIcon from '@mattermost/compass-icons/components/arrow-expand';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DockWindowIcon from '@mattermost/compass-icons/components/dock-window';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport type { TagType } from '@/components/tag/Tag';\nimport styles from './RightSidebarHeader.module.scss';\n\nexport interface RightSidebarHeaderProps {\n  /** Primary title text. Accepts translated nodes (e.g. `<FormattedMessage/>`). */\n  title: ReactNode;\n  /** Secondary title shown to the right of a vertical divider (e.g. parent channel name). */\n  secondaryTitle?: ReactNode;\n  /** Optional tag rendered next to the title (e.g. \"BETA\"). */\n  tag?: ReactNode;\n  /** Tag visual style. Default: Info. */\n  tagType?: TagType;\n  /** Optional leading element shown before the title — typically a `UserAvatar` or an icon. When passing an icon, use `<Icon glyph={<SomeIcon />} size=\"20\" />` to align with the title text. */\n  leadingIcon?: ReactNode;\n  /** When set, shows a back button and calls this on click. */\n  onBack?: () => void;\n  /** Accessible name for the back button. Default: \"Back\". */\n  backLabel?: string;\n  /** When set, shows an expand/collapse button and calls this on click. */\n  onExpand?: () => void;\n  /** When true, the expand button shows the collapse icon. Requires `onExpand`. */\n  expanded?: boolean;\n  /** Accessible name for the expand button while collapsed. Default: \"Expand\". */\n  expandLabel?: string;\n  /** Accessible name for the expand button while expanded. Default: \"Collapse\". */\n  collapseLabel?: string;\n  /** When set, shows a pop out button (open in a new window) between expand and close, and calls this on click. */\n  onPopout?: () => void;\n  /** Accessible name for the pop out button. Default: \"Open in new window\". */\n  popoutLabel?: string;\n  /** When set, shows a close button and calls this on click. */\n  onClose?: () => void;\n  /** Accessible name for the close button. Default: \"Close\". */\n  closeLabel?: string;\n  /** Optional inline action label (e.g. \"Follow\"). Accepts translated nodes. */\n  actionLabel?: ReactNode;\n  /** Click handler for the action label. */\n  onActionClick?: () => void;\n  /** When true, the action button shows in its active state. */\n  actionActive?: boolean;\n  className?: string;\n}\n\nexport default function RightSidebarHeader({\n  title,\n  secondaryTitle,\n  tag,\n  tagType = 'info',\n  leadingIcon,\n  onBack,\n  backLabel = 'Back',\n  onExpand,\n  expanded = false,\n  expandLabel = 'Expand',\n  collapseLabel = 'Collapse',\n  onPopout,\n  popoutLabel = 'Open in new window',\n  onClose,\n  closeLabel = 'Close',\n  actionLabel,\n  onActionClick,\n  actionActive = false,\n  className = '',\n}: RightSidebarHeaderProps) {\n  const rootClass = [styles['right-sidebar-header'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['right-sidebar-header__left']}>\n        <div className={styles['right-sidebar-header__primary']}>\n          {onBack && (\n            <IconButton\n              className={styles['right-sidebar-header__back']}\n              size=\"small\"\n              aria-label={backLabel}\n              onClick={onBack}\n              icon={<Icon size=\"16\" glyph={<ArrowBackIosIcon />} />}\n            />\n          )}\n          {leadingIcon && (\n            <span className={styles['right-sidebar-header__leading-icon']}>\n              {leadingIcon}\n            </span>\n          )}\n          <span className={styles['right-sidebar-header__title']}>{title}</span>\n          {tag && (\n            <span className={styles['right-sidebar-header__tag']}>\n              <Tag\n                label={tag}\n                type={tagType}\n                size=\"x-small\"\n                casing=\"all-caps\"\n              />\n            </span>\n          )}\n        </div>\n        {secondaryTitle && (\n          <div className={styles['right-sidebar-header__secondary']}>\n            <span className={styles['right-sidebar-header__secondary-text']}>\n              {secondaryTitle}\n            </span>\n          </div>\n        )}\n      </div>\n\n      <div className={styles['right-sidebar-header__actions']}>\n        {actionLabel && (\n          <button\n            type=\"button\"\n            className={[\n              styles['right-sidebar-header__action'],\n              actionActive\n                ? styles['right-sidebar-header__action--active']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onActionClick}\n            aria-pressed={actionActive ? true : undefined}\n          >\n            {actionLabel}\n          </button>\n        )}\n        {onExpand && (\n          <IconButton\n            size=\"small\"\n            aria-label={expanded ? collapseLabel : expandLabel}\n            onClick={onExpand}\n            icon={\n              <Icon\n                size=\"16\"\n                glyph={expanded ? <ArrowCollapseIcon /> : <ArrowExpandIcon />}\n              />\n            }\n          />\n        )}\n        {onPopout && (\n          <IconButton\n            size=\"small\"\n            aria-label={popoutLabel}\n            onClick={onPopout}\n            icon={<Icon size=\"16\" glyph={<DockWindowIcon />} />}\n          />\n        )}\n        {onClose && (\n          <IconButton\n            size=\"small\"\n            aria-label={closeLabel}\n            onClick={onClose}\n            icon={<Icon size=\"16\" glyph={<CloseIcon />} />}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["RightSidebarHeader","title","secondaryTitle","tag","tagType","leadingIcon","onBack","backLabel","onExpand","expanded","expandLabel","collapseLabel","onPopout","popoutLabel","onClose","closeLabel","actionLabel","onActionClick","actionActive","className","rootClass","styles","jsxs","jsx","IconButton","Icon","ArrowBackIosIcon","Tag","ArrowCollapseIcon","ArrowExpandIcon","DockWindowIcon","CloseIcon"],"mappings":"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"}

package/dist/utils/slot.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),d=require("./props.cjs");function R(e,t){typeof e=="function"?e(t):e!=null&&(e.current=t)}function y(...e){return t=>{for(const n of e)R(n,t)}}function g(e){var n;const t=(n=e.props)==null?void 0:n.ref;return t!==void 0?t:e.ref}function v(e){var t;return e.length>2&&e.startsWith("on")&&e[2]===((t=e[2])==null?void 0:t.toUpperCase())}function h(e,t){const n={...t};for(const r of Object.keys(e)){const o=e[r],s=t[r];v(r)?typeof o=="function"&&typeof s=="function"?n[r]=(...c)=>{const l=c[0];s(...c),l!=null&&l.defaultPrevented||o(...c)}:typeof o=="function"&&(n[r]=o):r==="style"?n.style={...typeof o=="object"&&o!=null?o:null,...typeof s=="object"&&s!=null?s:null}:r==="className"?n.className=d.mergeClassNames(typeof o=="string"?o:void 0,typeof s=="string"?s:void 0):r in t||(n[r]=o)}return n}function C(e){return e==null||e===!1||e===!0?!1:typeof e=="string"?e.length>0:Array.isArray(e)?e.some(C):!0}function m(e){e.preventDefault(),e.stopPropagation()}function b({child:e,props:t,ref:n,content:r,disabled:o=!1,disabledClassName:s,warnOnChildContent:c=!1}){const l=process.env.NODE_ENV!=="production";let i=null;try{i=u.Children.only(e)}catch{i=null}if(!u.isValidElement(i))return l&&console.warn("asChild expects a single React element child (e.g. <a> or <Link>)."),null;const p=i.props;l&&c&&C(p.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,s&&(f.className=d.mergeClassNames(typeof f.className=="string"?f.className:void 0,s)));const a=h(f,p);o&&(a.onClick=m,a.onAuxClick=m);const N=g(i);return u.cloneElement(i,{...a,ref:y(n,N),children:r})}exports.composeRefs=y;exports.getElementRef=g;exports.mergeSlotProps=h;exports.renderAsChild=b;
+//# sourceMappingURL=slot.cjs.map

package/dist/utils/slot.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.cjs","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/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.15",
   "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",