@womp/kookie-ui 0.23.0 → 0.24.0

package/src/components/alert-dialog.tsx

@@ -11,172 +11,76 @@ import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 
 import type { AlertDialogContentOwnProps } from './alert-dialog.props.js';
-import type {
-  ComponentPropsWithout,
-  RemovedProps,
-  ComponentPropsAs,
-} from '../helpers/component-props.js';
+import type { ComponentPropsWithout, RemovedProps, ComponentPropsAs } from '../helpers/component-props.js';
 
-interface AlertDialogRootProps
-  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root> {}
-const AlertDialogRoot: React.FC<AlertDialogRootProps> = (props) => (
-  <AlertDialogPrimitive.Root {...props} />
-);
+interface AlertDialogRootProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root> {}
+const AlertDialogRoot: React.FC<AlertDialogRootProps> = (props) => <AlertDialogPrimitive.Root {...props} />;
 AlertDialogRoot.displayName = 'AlertDialog.Root';
 
 type AlertDialogTriggerElement = React.ElementRef<typeof AlertDialogPrimitive.Trigger>;
-interface AlertDialogTriggerProps
-  extends ComponentPropsWithout<typeof AlertDialogPrimitive.Trigger, RemovedProps> {}
-const AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <AlertDialogPrimitive.Trigger {...props} ref={forwardedRef} asChild>
-      {requireReactElement(children)}
-    </AlertDialogPrimitive.Trigger>
-  ),
-);
+interface AlertDialogTriggerProps extends ComponentPropsWithout<typeof AlertDialogPrimitive.Trigger, RemovedProps> {}
+const AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(({ children, ...props }, forwardedRef) => (
+  <AlertDialogPrimitive.Trigger {...props} ref={forwardedRef} asChild>
+    {requireReactElement(children)}
+  </AlertDialogPrimitive.Trigger>
+));
 AlertDialogTrigger.displayName = 'AlertDialog.Trigger';
 
 // Split once at module scope. `extractProps` memoises on the identity of the
 // prop def objects it is handed, so rebuilding these per render would recompile
 // them on every render.
-const {
-  align: alignPropDef,
-  ...contentPropDefs
-} = alertDialogContentPropDefs;
+const { align: alignPropDef, ...contentPropDefs } = alertDialogContentPropDefs;
 const alignPropDefs = { align: alignPropDef };
 
 type AlertDialogContentElement = React.ElementRef<typeof AlertDialogPrimitive.Content>;
-interface AlertDialogContentProps
-  extends ComponentPropsWithout<typeof AlertDialogPrimitive.Content, RemovedProps>,
-    AlertDialogContentOwnProps {
+interface AlertDialogContentProps extends ComponentPropsWithout<typeof AlertDialogPrimitive.Content, RemovedProps>, AlertDialogContentOwnProps {
   container?: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Portal>['container'];
 }
-const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
-  ({ align, ...ownProps }, forwardedRef) => {
-    const props = useThemeSizeProps(ownProps, contentPropDefs.size);
-    const { className: alignClassName } = extractProps({ align }, alignPropDefs);
-
-    const {
-      className,
-      forceMount,
-      container,
-      ...contentProps
-    } = extractProps(props, contentPropDefs);
-
-    // Focus management
-    const contentRef = React.useRef<HTMLDivElement>(null);
-    const combinedRef = React.useMemo(
-      () => (node: HTMLDivElement | null) => {
-        contentRef.current = node;
-        if (typeof forwardedRef === 'function') {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      },
-      [forwardedRef],
-    );
-
-    // Focus trap effect
-    React.useEffect(() => {
-      // SSR safety - only run on client
-      if (typeof window === 'undefined') return;
-
-      const content = contentRef.current;
-      if (!content) return;
-
-      const focusableElements = content.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-      );
-
-      if (focusableElements.length === 0) return;
-
-      const firstElement = focusableElements[0] as HTMLElement;
-      const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
-
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key === 'Tab') {
-          if (event.shiftKey) {
-            if (document.activeElement === firstElement) {
-              event.preventDefault();
-              lastElement.focus();
-            }
-          } else {
-            if (document.activeElement === lastElement) {
-              event.preventDefault();
-              firstElement.focus();
-            }
-          }
-        }
-      };
-
-      content.addEventListener('keydown', handleKeyDown);
-
-      // Focus first element when dialog opens
-      firstElement.focus();
-
-      return () => {
-        content.removeEventListener('keydown', handleKeyDown);
-      };
-    }, []);
-
-    return (
-      <AlertDialogPrimitive.Portal container={container} forceMount={forceMount}>
-        <Theme asChild>
-          <AlertDialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-AlertDialogOverlay">
-            <div className="kui-BaseDialogScroll kui-AlertDialogScroll">
-              <div
-                className={`kui-BaseDialogScrollPadding kui-AlertDialogScrollPadding ${alignClassName}`}
-              >
-                <AlertDialogPrimitive.Content
-                  {...contentProps}
-                  ref={combinedRef}
-                  className={classNames('kui-BaseDialogContent', 'kui-AlertDialogContent', className)}
-                  tabIndex={-1}
-                  role="alertdialog"
-                  aria-modal="true"
-                  aria-describedby="alert-dialog-description"
-                  onCloseAutoFocus={(event) => {
-                    // Prevent default focus behavior
-                    event.preventDefault();
-                    // Restore pointer-events to body (Radix UI fix for issue #1241)
-                    document.body.style.pointerEvents = '';
-                  }}
-                />
-                {/* ARIA live region for screen reader announcements */}
-                <div
-                  aria-live="assertive"
-                  aria-atomic="true"
-                  className="kui-sr-only"
-                  id="alert-dialog-announcement"
-                />
-              </div>
+const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(({ align, ...ownProps }, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, contentPropDefs.size);
+  const { className: alignClassName } = extractProps({ align }, alignPropDefs);
+
+  const { className, forceMount, container, onCloseAutoFocus, ...contentProps } = extractProps(props, contentPropDefs);
+
+  return (
+    <AlertDialogPrimitive.Portal container={container} forceMount={forceMount}>
+      <Theme asChild>
+        <AlertDialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-AlertDialogOverlay">
+          <div className="kui-BaseDialogScroll kui-AlertDialogScroll">
+            <div className={`kui-BaseDialogScrollPadding kui-AlertDialogScrollPadding ${alignClassName}`}>
+              <AlertDialogPrimitive.Content
+                {...contentProps}
+                ref={forwardedRef}
+                className={classNames('kui-BaseDialogContent', 'kui-AlertDialogContent', className)}
+                aria-modal="true"
+                onCloseAutoFocus={(event) => {
+                  // Radix returns focus to the trigger unless the caller prevents it.
+                  onCloseAutoFocus?.(event);
+                  // Restore pointer-events to body (Radix UI fix for issue #1241)
+                  document.body.style.pointerEvents = '';
+                }}
+              />
             </div>
-          </AlertDialogPrimitive.Overlay>
-        </Theme>
-      </AlertDialogPrimitive.Portal>
-    );
-  },
-);
+          </div>
+        </AlertDialogPrimitive.Overlay>
+      </Theme>
+    </AlertDialogPrimitive.Portal>
+  );
+});
 AlertDialogContent.displayName = 'AlertDialog.Content';
 
 type AlertDialogTitleElement = React.ElementRef<typeof Heading>;
 type AlertDialogTitleProps = ComponentPropsWithout<typeof Heading, 'asChild'>;
-const AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(
-  (props, forwardedRef) => (
-    <AlertDialogPrimitive.Title asChild>
-      <Heading size="5" trim="start" {...props} asChild={false} ref={forwardedRef} />
-    </AlertDialogPrimitive.Title>
-  ),
-);
+const AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>((props, forwardedRef) => (
+  <AlertDialogPrimitive.Title asChild>
+    <Heading size="5" trim="start" {...props} asChild={false} ref={forwardedRef} />
+  </AlertDialogPrimitive.Title>
+));
 AlertDialogTitle.displayName = 'AlertDialog.Title';
 
 type AlertDialogDescriptionElement = HTMLParagraphElement;
 type AlertDialogDescriptionProps = ComponentPropsAs<typeof Text, 'p'>;
-const AlertDialogDescription = React.forwardRef<
-  AlertDialogDescriptionElement,
-  AlertDialogDescriptionProps
->((props, forwardedRef) => (
+const AlertDialogDescription = React.forwardRef<AlertDialogDescriptionElement, AlertDialogDescriptionProps>((props, forwardedRef) => (
   <AlertDialogPrimitive.Description asChild>
     <Text as="p" size="3" {...props} asChild={false} ref={forwardedRef} />
   </AlertDialogPrimitive.Description>
@@ -184,27 +88,21 @@ const AlertDialogDescription = React.forwardRef<
 AlertDialogDescription.displayName = 'AlertDialog.Description';
 
 type AlertDialogActionElement = React.ElementRef<typeof AlertDialogPrimitive.Action>;
-interface AlertDialogActionProps
-  extends ComponentPropsWithout<typeof AlertDialogPrimitive.Action, RemovedProps> {}
-const AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <AlertDialogPrimitive.Action {...props} ref={forwardedRef} asChild>
-      {requireReactElement(children)}
-    </AlertDialogPrimitive.Action>
-  ),
-);
+interface AlertDialogActionProps extends ComponentPropsWithout<typeof AlertDialogPrimitive.Action, RemovedProps> {}
+const AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(({ children, ...props }, forwardedRef) => (
+  <AlertDialogPrimitive.Action {...props} ref={forwardedRef} asChild>
+    {requireReactElement(children)}
+  </AlertDialogPrimitive.Action>
+));
 AlertDialogAction.displayName = 'AlertDialog.Action';
 
 type AlertDialogCancelElement = React.ElementRef<typeof AlertDialogPrimitive.Cancel>;
-interface AlertDialogCancelProps
-  extends ComponentPropsWithout<typeof AlertDialogPrimitive.Cancel, RemovedProps> {}
-const AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <AlertDialogPrimitive.Cancel {...props} ref={forwardedRef} asChild>
-      {requireReactElement(children)}
-    </AlertDialogPrimitive.Cancel>
-  ),
-);
+interface AlertDialogCancelProps extends ComponentPropsWithout<typeof AlertDialogPrimitive.Cancel, RemovedProps> {}
+const AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(({ children, ...props }, forwardedRef) => (
+  <AlertDialogPrimitive.Cancel {...props} ref={forwardedRef} asChild>
+    {requireReactElement(children)}
+  </AlertDialogPrimitive.Cancel>
+));
 AlertDialogCancel.displayName = 'AlertDialog.Cancel';
 
 export {

package/src/components/avatar.props.tsx

@@ -20,6 +20,11 @@ const avatarPropDefs = {
    * Cannot be used together with `badge`.
    */
   status: { type: 'enum', values: accentColors, default: undefined },
+  /**
+   * The words the status dot stands for, such as "Online". A screen reader reads them with the
+   * avatar. Without it the dot is hidden from screen readers.
+   */
+  statusLabel: { type: 'string', default: undefined },
   /**
    * Custom badge content. Renders at the bottom-right corner.
    * Cannot be used together with `status`.
@@ -36,6 +41,7 @@ const avatarPropDefs = {
   variant: PropDef<(typeof variants)[number]>;
   fallback: PropDef<React.ReactNode>;
   status: PropDef<(typeof accentColors)[number] | undefined>;
+  statusLabel: PropDef<string | undefined>;
   badge: PropDef<React.ReactNode>;
   fit: PropDef<(typeof objectFitValues)[number]>;
 };

package/src/components/avatar.tsx

@@ -13,43 +13,38 @@ import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-p
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 interface AvatarProps extends AvatarImplProps {}
-const Avatar = React.forwardRef<AvatarImplElement, AvatarProps>((ownProps, forwardedRef) => {
+const Avatar = React.forwardRef<AvatarElement, AvatarProps>((ownProps, forwardedRef) => {
   // An unset size follows the Theme, like a control. Sizes above 4 are only explicit.
   const props = useThemeSizeProps(ownProps, avatarPropDefs.size);
-  const {
-    asChild,
-    children,
-    className,
-    style,
-    color,
-    radius,
-    status,
-    badge,
-    ...imageProps
-  } = extractProps(props, avatarPropDefs);
+  const { asChild, children, className, style, color, radius, status, statusLabel, badge, ...imageProps } = extractProps(props, avatarPropDefs);
 
   if (process.env.NODE_ENV !== 'production') {
     if (status !== undefined && badge !== undefined) {
-      console.warn(
-        'Avatar: Cannot use both `status` and `badge` props together. ' +
-          'The `badge` prop will be used and `status` will be ignored.'
-      );
+      console.warn('Avatar: Cannot use both `status` and `badge` props together. ' + 'The `badge` prop will be used and `status` will be ignored.');
     }
   }
 
   // Cheap boolean checks — no memoization needed
-  const isDisabled =
-    asChild &&
-    children != null &&
-    React.isValidElement(children) &&
-    ((children.props as any).disabled === true ||
-      (children.props as any)['data-disabled'] === true);
+  const isDisabled = asChild && children != null && React.isValidElement(children) && ((children.props as any).disabled === true || (children.props as any)['data-disabled'] === true);
 
   const hasIndicator = badge !== undefined || status !== undefined;
 
+  const indicator =
+    badge !== undefined ? (
+      <span className="kui-AvatarBadge">{badge}</span>
+    ) : status !== undefined ? (
+      <span
+        className="kui-AvatarStatus"
+        data-accent-color={status}
+        role={statusLabel ? 'img' : undefined}
+        aria-label={statusLabel || undefined}
+        aria-hidden={statusLabel ? undefined : true}
+      />
+    ) : null;
+
   return (
-    // TODO as a rule, should we rather spread the props on root?
     <AvatarPrimitive.Root
+      ref={forwardedRef}
       data-accent-color={color}
       data-radius={radius}
       data-disabled={isDisabled || undefined}
@@ -58,67 +53,58 @@ const Avatar = React.forwardRef<AvatarImplElement, AvatarProps>((ownProps, forwa
       style={style}
       asChild={asChild}
     >
-      {getSubtree({ asChild, children }, <AvatarImpl ref={forwardedRef} {...imageProps} />)}
-      {badge !== undefined ? (
-        <span className="kui-AvatarBadge">{badge}</span>
-      ) : status !== undefined ? (
-        <span className="kui-AvatarStatus" data-accent-color={status} />
-      ) : null}
+      {/* With asChild, Slot takes exactly one child, so the indicator goes inside it. */}
+      {getSubtree(
+        { asChild, children },
+        <>
+          <AvatarImpl {...imageProps} />
+          {indicator}
+        </>,
+      )}
     </AvatarPrimitive.Root>
   );
 });
 Avatar.displayName = 'Avatar';
 
-type AvatarImplElement = React.ElementRef<typeof AvatarPrimitive.Image>;
+type AvatarElement = React.ElementRef<typeof AvatarPrimitive.Root>;
 type AvatarOwnProps = GetPropDefTypes<typeof avatarPropDefs>;
 
-interface AvatarImplProps
-  extends ComponentPropsWithout<typeof AvatarPrimitive.Image, RemovedProps>,
-    AvatarOwnProps {
+interface AvatarImplProps extends ComponentPropsWithout<typeof AvatarPrimitive.Image, RemovedProps>, AvatarOwnProps {
   // TODO: See if we can automate making prop defs with `required: true` non nullable
   fallback: NonNullable<AvatarOwnProps['fallback']>;
 }
 
-const AvatarImpl = React.memo(
-  React.forwardRef<AvatarImplElement, AvatarImplProps>(
-    ({ fallback, onLoadingStatusChange, ...imageProps }, forwardedRef) => {
-      const [status, setStatus] = React.useState<'idle' | 'loading' | 'loaded' | 'error'>('idle');
+const AvatarImpl = React.memo(({ fallback, onLoadingStatusChange, ...imageProps }: AvatarImplProps) => {
+  const [status, setStatus] = React.useState<'idle' | 'loading' | 'loaded' | 'error'>('idle');
 
-      const handleLoadingStatusChange = React.useCallback(
-        (newStatus: 'idle' | 'loading' | 'loaded' | 'error') => {
-          onLoadingStatusChange?.(newStatus);
-          setStatus(newStatus);
-        },
-        [onLoadingStatusChange],
-      );
-
-      return (
-        <>
-          {status === 'idle' || status === 'loading' ? <span className="kui-AvatarFallback" /> : null}
-
-          {status === 'error' ? (
-            <AvatarPrimitive.Fallback
-              className={classNames('kui-AvatarFallback', {
-                'kui-one-letter': typeof fallback === 'string' && fallback.length === 1,
-                'kui-two-letters': typeof fallback === 'string' && fallback.length === 2,
-              })}
-              delayMs={0}
-            >
-              {fallback}
-            </AvatarPrimitive.Fallback>
-          ) : null}
-
-          <AvatarPrimitive.Image
-            ref={forwardedRef}
-            className="kui-AvatarImage"
-            {...imageProps}
-            onLoadingStatusChange={handleLoadingStatusChange}
-          />
-        </>
-      );
+  const handleLoadingStatusChange = React.useCallback(
+    (newStatus: 'idle' | 'loading' | 'loaded' | 'error') => {
+      onLoadingStatusChange?.(newStatus);
+      setStatus(newStatus);
     },
-  ),
-);
+    [onLoadingStatusChange],
+  );
+
+  return (
+    <>
+      {status === 'idle' || status === 'loading' ? <span className="kui-AvatarFallback" /> : null}
+
+      {status === 'error' ? (
+        <AvatarPrimitive.Fallback
+          className={classNames('kui-AvatarFallback', {
+            'kui-one-letter': typeof fallback === 'string' && fallback.length === 1,
+            'kui-two-letters': typeof fallback === 'string' && fallback.length === 2,
+          })}
+          delayMs={0}
+        >
+          {fallback}
+        </AvatarPrimitive.Fallback>
+      ) : null}
+
+      <AvatarPrimitive.Image className="kui-AvatarImage" {...imageProps} onLoadingStatusChange={handleLoadingStatusChange} />
+    </>
+  );
+});
 
 AvatarImpl.displayName = 'AvatarImpl';
 

package/src/components/blockquote.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Slot } from 'radix-ui';
 
-import { Text } from './text.js';
+import { blockquotePropDefs } from './blockquote.props.js';
+import { extractProps } from '../helpers/extract-props.js';
 
-import type { blockquotePropDefs } from './blockquote.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
@@ -14,17 +14,16 @@ interface BlockquoteProps
   extends ComponentPropsWithout<'blockquote', RemovedProps>,
     BlockQuoteOwnProps {}
 const Blockquote = React.forwardRef<BlockquoteElement, BlockquoteProps>((props, forwardedRef) => {
-  const { asChild, children, className, ...blockquoteProps } = props;
+  // Only Blockquote's own props style it. It wears Text's classes, so it reads like Text.
+  const { asChild, className, color, ...blockquoteProps } = extractProps(props, blockquotePropDefs);
   const Comp = asChild ? Slot.Root : 'blockquote';
   return (
-    <Text
-      asChild
+    <Comp
+      data-accent-color={color}
       {...blockquoteProps}
       ref={forwardedRef}
-      className={classNames('kui-Blockquote', className)}
-    >
-      <Comp>{children}</Comp>
-    </Text>
+      className={classNames('kui-Text', 'kui-Blockquote', className)}
+    />
   );
 });
 Blockquote.displayName = 'Blockquote';

package/src/components/chatbar.tsx

@@ -4,7 +4,7 @@ import { useComposedRefs } from 'radix-ui/internal';
 import { useDropzone } from 'react-dropzone';
 
 import { Button } from './button.js';
-import { CloseIcon, FileTextIcon } from './icons.js';
+import { CloseIcon, FileTextIcon, PaperclipIcon } from './icons.js';
 import { Flex } from './flex.js';
 import { ScrollArea } from './scroll-area.js';
 import { Slot } from './slot.js';
@@ -1216,28 +1216,35 @@ interface AttachTriggerProps extends React.ComponentPropsWithoutRef<'button'> {
 }
 
 const AttachTrigger = React.forwardRef<HTMLButtonElement, AttachTriggerProps>((props, forwardedRef) => {
-  const { asChild, accept, multiple, disabled: disabledProp, onPointerDown, onClick, ...buttonProps } = props;
+  // The HTML `color` attribute is dropped: Button reads `color` as an accent colour.
+  const { asChild, accept, multiple, disabled: disabledProp, onPointerDown, onClick, children, color: _color, ...buttonProps } = props;
   const ctx = useChatbarContext();
   const disabled = disabledProp || ctx.disabled || ctx.readOnly;
-  const Comp = asChild ? Slot : 'button';
+  const triggerProps = {
+    ...buttonProps,
+    ref: forwardedRef,
+    className: classNames('kui-ChatbarAttachTrigger', buttonProps.className),
+    type: buttonProps.type ?? 'button',
+    'aria-label': buttonProps['aria-label'] ?? 'Add attachments',
+    disabled,
+    onPointerDown: (event: React.PointerEvent<HTMLButtonElement>) => {
+      onPointerDown?.(event);
+      if (!disabled && !event.defaultPrevented) ctx.beginFilePickerPress();
+    },
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (disabled || event.defaultPrevented) return;
+      ctx.openFilePicker({ accept, multiple });
+    },
+  } as const;
+
+  if (asChild) return <Slot {...triggerProps}>{children}</Slot>;
+
+  // Without asChild, the trigger is a quiet icon-only Button at the Chatbar's size.
   return (
-    <Comp
-      {...buttonProps}
-      ref={forwardedRef}
-      className={classNames('kui-ChatbarAttachTrigger', buttonProps.className)}
-      type={buttonProps.type ?? 'button'}
-      aria-label={buttonProps['aria-label'] ?? 'Add attachments'}
-      disabled={disabled}
-      onPointerDown={(event: React.PointerEvent<HTMLButtonElement>) => {
-        onPointerDown?.(event);
-        if (!disabled && !event.defaultPrevented) ctx.beginFilePickerPress();
-      }}
-      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-        onClick?.(event);
-        if (disabled || event.defaultPrevented) return;
-        ctx.openFilePicker({ accept, multiple });
-      }}
-    />
+    <Button iconOnly emphasis="quiet" color="gray" size={ctx.size} {...triggerProps}>
+      {children ?? <PaperclipIcon aria-hidden />}
+    </Button>
   );
 });
 AttachTrigger.displayName = 'Chatbar.AttachTrigger';