instantsearch-ui-components 0.11.2 → 0.13.0

package/dist/es/components/autocomplete/createAutocompletePropGetters.js

@@ -0,0 +1,215 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+export function createAutocompletePropGetters(_ref) {
+  var useEffect = _ref.useEffect,
+    useId = _ref.useId,
+    useMemo = _ref.useMemo,
+    useRef = _ref.useRef,
+    useState = _ref.useState;
+  return function usePropGetters(_ref2) {
+    var indices = _ref2.indices,
+      indicesConfig = _ref2.indicesConfig,
+      onRefine = _ref2.onRefine,
+      globalOnSelect = _ref2.onSelect;
+    var getElementId = createGetElementId(useId());
+    var rootRef = useRef(null);
+    var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+    var _useState3 = useState(undefined),
+      _useState4 = _slicedToArray(_useState3, 2),
+      activeDescendant = _useState4[0],
+      setActiveDescendant = _useState4[1];
+    var _useMemo = useMemo(function () {
+        return buildItems({
+          indices: indices,
+          indicesConfig: indicesConfig,
+          getElementId: getElementId
+        });
+      }, [indices, indicesConfig, getElementId]),
+      items = _useMemo.items,
+      itemsIds = _useMemo.itemsIds;
+    useEffect(function () {
+      var onBodyClick = function onBodyClick(event) {
+        var _unwrapRef;
+        if ((_unwrapRef = unwrapRef(rootRef)) !== null && _unwrapRef !== void 0 && _unwrapRef.contains(event.target)) {
+          return;
+        }
+        setIsOpen(false);
+      };
+      document.body.addEventListener('click', onBodyClick);
+      return function () {
+        document.body.removeEventListener('click', onBodyClick);
+      };
+    }, [rootRef]);
+    var getNextActiveDescendent = function getNextActiveDescendent(key) {
+      switch (key) {
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          {
+            var prevIndex = itemsIds.indexOf(activeDescendant || '') - 1;
+            return itemsIds[prevIndex] || itemsIds[itemsIds.length - 1];
+          }
+        case 'ArrowRight':
+        case 'ArrowDown':
+          {
+            var nextIndex = itemsIds.indexOf(activeDescendant || '') + 1;
+            return itemsIds[nextIndex] || itemsIds[0];
+          }
+        default:
+          return undefined;
+      }
+    };
+    var submit = function submit() {
+      var actualActiveDescendant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeDescendant;
+      setIsOpen(false);
+      if (actualActiveDescendant && items.has(actualActiveDescendant)) {
+        var _getQuery;
+        var _ref3 = items.get(actualActiveDescendant),
+          _item = _ref3.item,
+          _ref3$config = _ref3.config,
+          indexOnSelect = _ref3$config.onSelect,
+          getQuery = _ref3$config.getQuery,
+          getURL = _ref3$config.getURL;
+        var actualOnSelect = indexOnSelect !== null && indexOnSelect !== void 0 ? indexOnSelect : globalOnSelect;
+        actualOnSelect({
+          item: _item,
+          query: (_getQuery = getQuery === null || getQuery === void 0 ? void 0 : getQuery(_item)) !== null && _getQuery !== void 0 ? _getQuery : '',
+          url: getURL === null || getURL === void 0 ? void 0 : getURL(_item),
+          setQuery: function setQuery(query) {
+            return onRefine(query);
+          }
+        });
+        setActiveDescendant(undefined);
+      }
+    };
+    return {
+      getInputProps: function getInputProps() {
+        return {
+          id: getElementId('input'),
+          role: 'combobox',
+          'aria-autocomplete': 'list',
+          'aria-expanded': isOpen,
+          'aria-haspopup': 'grid',
+          'aria-controls': getElementId('panel'),
+          'aria-activedescendant': activeDescendant,
+          onFocus: function onFocus() {
+            return setIsOpen(true);
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === 'Escape') {
+              setActiveDescendant(undefined);
+              setIsOpen(false);
+              return;
+            }
+            switch (event.key) {
+              case 'ArrowLeft':
+              case 'ArrowUp':
+              case 'ArrowRight':
+              case 'ArrowDown':
+                {
+                  var _document$getElementB;
+                  var nextActiveDescendent = getNextActiveDescendent(event.key);
+                  setActiveDescendant(nextActiveDescendent);
+                  (_document$getElementB = document.getElementById(nextActiveDescendent)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView(false);
+                  event.preventDefault();
+                  break;
+                }
+              case 'Enter':
+                {
+                  submit();
+                  break;
+                }
+              case 'Tab':
+                setIsOpen(false);
+                break;
+              default:
+                return;
+            }
+          },
+          onKeyUp: function onKeyUp(event) {
+            switch (event.key) {
+              case 'ArrowLeft':
+              case 'ArrowUp':
+              case 'ArrowRight':
+              case 'ArrowDown':
+              case 'Escape':
+              case 'Return':
+                event.preventDefault();
+                return;
+              default:
+                setActiveDescendant(undefined);
+                break;
+            }
+          }
+        };
+      },
+      getItemProps: function getItemProps(item, index) {
+        var id = getElementId('item', item.__indexName, index);
+        return {
+          id: id,
+          role: 'row',
+          'aria-selected': id === activeDescendant,
+          onSelect: function onSelect() {
+            return submit(id);
+          }
+        };
+      },
+      getPanelProps: function getPanelProps() {
+        return {
+          hidden: !isOpen,
+          id: getElementId('panel'),
+          role: 'grid',
+          'aria-labelledby': getElementId('input')
+        };
+      },
+      getRootProps: function getRootProps() {
+        return {
+          ref: rootRef
+        };
+      }
+    };
+  };
+}
+function buildItems(_ref4) {
+  var indices = _ref4.indices,
+    indicesConfig = _ref4.indicesConfig,
+    getElementId = _ref4.getElementId;
+  var itemsIds = [];
+  var items = new Map();
+  for (var i = 0; i < indicesConfig.length; i++) {
+    var _indices$i;
+    var config = indicesConfig[i];
+    var hits = ((_indices$i = indices[i]) === null || _indices$i === void 0 ? void 0 : _indices$i.hits) || [];
+    for (var position = 0; position < hits.length; position++) {
+      var itemId = getElementId('item', config.indexName, position);
+      items.set(itemId, {
+        item: hits[position],
+        config: config
+      });
+      itemsIds.push(itemId);
+    }
+  }
+  return {
+    items: items,
+    itemsIds: itemsIds
+  };
+}
+function createGetElementId(autocompleteId) {
+  return function getElementId() {
+    var prefix = 'autocomplete';
+    for (var _len = arguments.length, suffixes = new Array(_len), _key = 0; _key < _len; _key++) {
+      suffixes[_key] = arguments[_key];
+    }
+    return "".concat(prefix).concat(autocompleteId).concat(suffixes.join(':'));
+  };
+}
+
+/**
+ * Returns the framework-agnostic value of a ref.
+ */
+function unwrapRef(ref) {
+  return ref.current && _typeof(ref.current) === 'object' && 'base' in ref.current ? ref.current.base // Preact
+  : ref.current; // React
+}

package/dist/es/components/autocomplete/icons.d.ts

@@ -0,0 +1,7 @@
+/** @jsx createElement */
+import type { Renderer } from '../../types';
+type IconProps = Pick<Renderer, 'createElement'>;
+export declare function AutocompleteSubmitIcon({ createElement }: IconProps): JSX.Element;
+export declare function AutocompleteLoadingIcon({ createElement }: IconProps): JSX.Element;
+export declare function AutocompleteClearIcon({ createElement }: IconProps): JSX.Element;
+export {};

package/dist/es/components/autocomplete/icons.js

@@ -0,0 +1,48 @@
+export function AutocompleteSubmitIcon(_ref) {
+  var createElement = _ref.createElement;
+  return createElement("svg", {
+    className: "ais-AutocompleteSubmitIcon",
+    viewBox: "0 0 24 24",
+    width: "20",
+    height: "20",
+    fill: "currentColor"
+  }, createElement("path", {
+    d: "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
+  }));
+}
+export function AutocompleteLoadingIcon(_ref2) {
+  var createElement = _ref2.createElement;
+  return createElement("svg", {
+    className: "ais-AutocompleteLoadingIcon",
+    viewBox: "0 0 100 100",
+    width: "20",
+    height: "20"
+  }, createElement("circle", {
+    cx: "50",
+    cy: "50",
+    fill: "none",
+    r: "35",
+    stroke: "currentColor",
+    strokeDasharray: "164.93361431346415 56.97787143782138",
+    strokeWidth: "6"
+  }, createElement("animateTransform", {
+    attributeName: "transform",
+    type: "rotate",
+    repeatCount: "indefinite",
+    dur: "1s",
+    values: "0 50 50;90 50 50;180 50 50;360 50 50",
+    keyTimes: "0;0.40;0.65;1"
+  })));
+}
+export function AutocompleteClearIcon(_ref3) {
+  var createElement = _ref3.createElement;
+  return createElement("svg", {
+    className: "ais-AutocompleteClearIcon",
+    viewBox: "0 0 24 24",
+    width: "18",
+    height: "18",
+    fill: "currentColor"
+  }, createElement("path", {
+    d: "M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
+  }));
+}

package/dist/es/components/autocomplete/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Autocomplete';
+export * from './AutocompleteIndex';
+export * from './AutocompletePanel';
+export * from './AutocompleteSearch';
+export * from './AutocompleteSuggestion';
+export * from './createAutocompletePropGetters';

package/dist/es/components/autocomplete/index.js

@@ -0,0 +1,6 @@
+export * from "./Autocomplete.js";
+export * from "./AutocompleteIndex.js";
+export * from "./AutocompletePanel.js";
+export * from "./AutocompleteSearch.js";
+export * from "./AutocompleteSuggestion.js";
+export * from "./createAutocompletePropGetters.js";

package/dist/es/components/chat/Chat.d.ts

@@ -0,0 +1,42 @@
+import type { Renderer, ComponentProps } from '../../types';
+import type { ChatHeaderProps, ChatHeaderOwnProps } from './ChatHeader';
+import type { ChatMessagesProps } from './ChatMessages';
+import type { ChatPromptProps, ChatPromptOwnProps } from './ChatPrompt';
+import type { ChatToggleButtonOwnProps, ChatToggleButtonProps } from './ChatToggleButton';
+export type ChatClassNames = {
+    root?: string | string[];
+    container?: string | string[];
+    header?: ChatHeaderProps['classNames'];
+    messages?: ChatMessagesProps['classNames'];
+    prompt?: ChatPromptProps['classNames'];
+    toggleButton?: ChatToggleButtonProps['classNames'];
+};
+export type ChatProps = Omit<ComponentProps<'div'>, 'onError' | 'title'> & {
+    open: boolean;
+    maximized?: boolean;
+    headerProps: ChatHeaderProps;
+    toggleButtonProps: ChatToggleButtonProps;
+    messagesProps: ChatMessagesProps;
+    promptProps: ChatPromptProps;
+    /**
+     * Optional class names for elements
+     */
+    classNames?: Partial<ChatClassNames>;
+    /**
+     * Optional title for the chat
+     */
+    title?: string;
+    /**
+     * Optional header component for the chat
+     */
+    headerComponent?: (props: ChatHeaderOwnProps) => JSX.Element;
+    /**
+     * Optional prompt component for the chat
+     */
+    promptComponent?: (props: ChatPromptOwnProps) => JSX.Element;
+    /**
+     * Optional toggle button component for the chat
+     */
+    toggleButtonComponent?: (props: ChatToggleButtonOwnProps) => JSX.Element;
+};
+export declare function createChatComponent({ createElement, Fragment }: Renderer): ({ open, maximized, headerProps, toggleButtonProps, messagesProps, promptProps, headerComponent: HeaderComponent, promptComponent: PromptComponent, toggleButtonComponent: ToggleButtonComponent, classNames, className, ...props }: ChatProps) => JSX.Element;

package/dist/es/components/chat/Chat.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["open", "maximized", "headerProps", "toggleButtonProps", "messagesProps", "promptProps", "headerComponent", "promptComponent", "toggleButtonComponent", "classNames", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { cx } from "../../lib/index.js";
+import { createChatHeaderComponent } from "./ChatHeader.js";
+import { createChatMessagesComponent } from "./ChatMessages.js";
+import { createChatPromptComponent } from "./ChatPrompt.js";
+import { createChatToggleButtonComponent } from "./ChatToggleButton.js";
+export function createChatComponent(_ref) {
+  var createElement = _ref.createElement,
+    Fragment = _ref.Fragment;
+  var ChatToggleButton = createChatToggleButtonComponent({
+    createElement: createElement,
+    Fragment: Fragment
+  });
+  var ChatHeader = createChatHeaderComponent({
+    createElement: createElement,
+    Fragment: Fragment
+  });
+  var ChatMessages = createChatMessagesComponent({
+    createElement: createElement,
+    Fragment: Fragment
+  });
+  var ChatPrompt = createChatPromptComponent({
+    createElement: createElement,
+    Fragment: Fragment
+  });
+  return function Chat(_ref2) {
+    var open = _ref2.open,
+      _ref2$maximized = _ref2.maximized,
+      maximized = _ref2$maximized === void 0 ? false : _ref2$maximized,
+      headerProps = _ref2.headerProps,
+      toggleButtonProps = _ref2.toggleButtonProps,
+      messagesProps = _ref2.messagesProps,
+      _ref2$promptProps = _ref2.promptProps,
+      promptProps = _ref2$promptProps === void 0 ? {} : _ref2$promptProps,
+      HeaderComponent = _ref2.headerComponent,
+      PromptComponent = _ref2.promptComponent,
+      ToggleButtonComponent = _ref2.toggleButtonComponent,
+      _ref2$classNames = _ref2.classNames,
+      classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames,
+      className = _ref2.className,
+      props = _objectWithoutProperties(_ref2, _excluded);
+    return createElement("div", _extends({}, props, {
+      className: cx('ais-Chat', maximized && 'ais-Chat--maximized', classNames.root, className)
+    }), createElement("div", {
+      className: cx('ais-Chat-container', open && 'ais-Chat-container--open', maximized && 'ais-Chat-container--maximized', classNames.container)
+    }, createElement(HeaderComponent || ChatHeader, _objectSpread(_objectSpread({}, headerProps), {}, {
+      classNames: classNames.header,
+      maximized: maximized
+    })), createElement(ChatMessages, _extends({}, messagesProps, {
+      classNames: classNames.messages
+    })), createElement(PromptComponent || ChatPrompt, _objectSpread(_objectSpread({}, promptProps), {}, {
+      classNames: classNames.prompt
+    }))), createElement("div", {
+      className: "ais-Chat-toggleButtonWrapper"
+    }, createElement(ToggleButtonComponent || ChatToggleButton, _objectSpread(_objectSpread({}, toggleButtonProps), {}, {
+      classNames: classNames.toggleButton,
+      onClick: function onClick() {
+        var _toggleButtonProps$on;
+        (_toggleButtonProps$on = toggleButtonProps.onClick) === null || _toggleButtonProps$on === void 0 ? void 0 : _toggleButtonProps$on.call(toggleButtonProps);
+        if (!open) {
+          var _promptProps$promptRe, _promptProps$promptRe2;
+          (_promptProps$promptRe = promptProps.promptRef) === null || _promptProps$promptRe === void 0 ? void 0 : (_promptProps$promptRe2 = _promptProps$promptRe.current) === null || _promptProps$promptRe2 === void 0 ? void 0 : _promptProps$promptRe2.focus();
+        }
+      }
+    }))));
+  };
+}

package/dist/es/components/chat/ChatHeader.d.ts

@@ -0,0 +1,99 @@
+import type { Renderer, ComponentProps } from '../../types';
+export type ChatHeaderTranslations = {
+    /**
+     * The title to display in the header
+     */
+    title: string;
+    /**
+     * Accessible label for the minimize button
+     */
+    minimizeLabel: string;
+    /**
+     * Accessible label for the maximize button
+     */
+    maximizeLabel: string;
+    /**
+     * Accessible label for the close button
+     */
+    closeLabel: string;
+    /**
+     * Text for the clear button
+     */
+    clearLabel: string;
+};
+export type ChatHeaderClassNames = {
+    /**
+     * Class names to apply to the root element
+     */
+    root?: string | string[];
+    /**
+     * Class names to apply to the title element
+     */
+    title?: string | string[];
+    /**
+     * Class names to apply to the title icon element
+     */
+    titleIcon?: string | string[];
+    /**
+     * Class names to apply to the maximize button element
+     */
+    maximize?: string | string[];
+    /**
+     * Class names to apply to the close button element
+     */
+    close?: string | string[];
+    /**
+     * Class names to apply to the clear button element
+     */
+    clear?: string | string[];
+};
+export type ChatHeaderOwnProps = {
+    /**
+     * Whether the chat is maximized
+     */
+    maximized?: boolean;
+    /**
+     * Callback when the maximize button is clicked
+     */
+    onToggleMaximize?: () => void;
+    /**
+     * Callback when the close button is clicked
+     */
+    onClose: () => void;
+    /**
+     * Callback when the clear button is clicked
+     */
+    onClear?: () => void;
+    /**
+     * Whether the clear button is enabled
+     */
+    canClear?: boolean;
+    /**
+     * Optional close icon component
+     */
+    closeIconComponent?: () => JSX.Element;
+    /**
+     * Optional minimize icon component
+     */
+    minimizeIconComponent?: () => JSX.Element;
+    /**
+     * Optional maximize icon component
+     */
+    maximizeIconComponent?: (props: {
+        maximized: boolean;
+    }) => JSX.Element;
+    /**
+     * Optional title icon component (defaults to sparkles)
+     */
+    titleIconComponent?: () => JSX.Element;
+    /**
+     * Optional class names for elements
+     */
+    classNames?: Partial<ChatHeaderClassNames>;
+    /**
+     * Optional translations
+     */
+    translations?: Partial<ChatHeaderTranslations>;
+};
+export type ChatHeaderProps = ComponentProps<'div'> & ChatHeaderOwnProps;
+export declare function createChatHeaderComponent({ createElement }: Renderer): ({ maximized, onToggleMaximize, onClose, onClear, canClear, closeIconComponent: CloseIconComponent, minimizeIconComponent: MinimizeIconComponent, maximizeIconComponent: MaximizeIconComponent, titleIconComponent: TitleIconComponent, classNames, translations: userTranslations, ...props }: ChatHeaderProps) => JSX.Element;

package/dist/es/components/chat/ChatHeader.js

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["maximized", "onToggleMaximize", "onClose", "onClear", "canClear", "closeIconComponent", "minimizeIconComponent", "maximizeIconComponent", "titleIconComponent", "classNames", "translations"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { cx } from "../../lib/index.js";
+import { createButtonComponent } from "../Button.js";
+import { SparklesIconComponent, MaximizeIconComponent as MaximizeIconComponentDefault, MinimizeIconComponent as MinimizeIconComponentDefault, CloseIconComponent as CloseIconComponentDefault } from "./icons.js";
+export function createChatHeaderComponent(_ref) {
+  var createElement = _ref.createElement;
+  var Button = createButtonComponent({
+    createElement: createElement
+  });
+  return function ChatHeader(_ref2) {
+    var _ref2$maximized = _ref2.maximized,
+      maximized = _ref2$maximized === void 0 ? false : _ref2$maximized,
+      onToggleMaximize = _ref2.onToggleMaximize,
+      onClose = _ref2.onClose,
+      onClear = _ref2.onClear,
+      _ref2$canClear = _ref2.canClear,
+      canClear = _ref2$canClear === void 0 ? false : _ref2$canClear,
+      CloseIconComponent = _ref2.closeIconComponent,
+      MinimizeIconComponent = _ref2.minimizeIconComponent,
+      MaximizeIconComponent = _ref2.maximizeIconComponent,
+      TitleIconComponent = _ref2.titleIconComponent,
+      _ref2$classNames = _ref2.classNames,
+      classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames,
+      userTranslations = _ref2.translations,
+      props = _objectWithoutProperties(_ref2, _excluded);
+    var translations = _objectSpread({
+      title: 'Chat',
+      minimizeLabel: 'Minimize chat',
+      maximizeLabel: 'Maximize chat',
+      closeLabel: 'Close chat',
+      clearLabel: 'Clear'
+    }, userTranslations);
+    var defaultMaximizeIcon = maximized ? createElement(MinimizeIconComponentDefault, {
+      createElement: createElement
+    }) : createElement(MaximizeIconComponentDefault, {
+      createElement: createElement
+    });
+    return createElement("div", _extends({
+      className: cx('ais-ChatHeader', classNames.root, props.className)
+    }, props), createElement("span", {
+      className: cx('ais-ChatHeader-title', classNames.title)
+    }, createElement("span", {
+      className: cx('ais-ChatHeader-titleIcon', classNames.titleIcon)
+    }, TitleIconComponent ? createElement(TitleIconComponent, null) : createElement(SparklesIconComponent, {
+      createElement: createElement,
+      width: 20,
+      height: 20
+    })), translations.title), createElement("div", {
+      className: cx('ais-ChatHeader-actions')
+    }, onClear && createElement(Button, {
+      variant: "ghost",
+      size: "sm",
+      className: cx('ais-ChatHeader-clear', classNames.clear),
+      onClick: onClear,
+      disabled: !canClear
+    }, translations.clearLabel), createElement(Button, {
+      variant: "ghost",
+      size: "sm",
+      iconOnly: true,
+      className: cx('ais-ChatHeader-maximize', classNames.maximize),
+      onClick: onToggleMaximize,
+      "aria-label": maximized ? translations.minimizeLabel : translations.maximizeLabel
+    }, MaximizeIconComponent ? createElement(MaximizeIconComponent, {
+      maximized: maximized
+    }) : defaultMaximizeIcon), createElement(Button, {
+      variant: "ghost",
+      size: "sm",
+      iconOnly: true,
+      className: cx('ais-ChatHeader-close', classNames.close),
+      onClick: onClose,
+      "aria-label": translations.closeLabel,
+      title: translations.closeLabel
+    }, CloseIconComponent ? createElement(CloseIconComponent, null) : createElement(CloseIconComponentDefault, {
+      createElement: createElement
+    }))));
+  };
+}