stream-chat-react 11.21.0 → 12.0.0-rc.1

package/dist/components/InfiniteScrollPaginator/InfiniteScroll.js

@@ -1,4 +1,3 @@
-import { __assign, __rest } from "tslib";
 import React, { useEffect, useLayoutEffect, useRef } from 'react';
 import { deprecationAndReplacementWarning } from '../../utils/deprecationWarning';
 import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD } from '../../constants/limits';
@@ -6,28 +5,28 @@ import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD } from '../../constants/limits';
  * Prevents Chrome hangups
  * See: https://stackoverflow.com/questions/47524205/random-high-content-download-time-in-chrome/47684257#47684257
  */
-var mousewheelListener = function (event) {
+const mousewheelListener = (event) => {
     if (event instanceof WheelEvent && event.deltaY === 1) {
         event.preventDefault();
     }
 };
-export var InfiniteScroll = function (props) {
-    var children = props.children, _a = props.element, element = _a === void 0 ? 'div' : _a, hasMore = props.hasMore, hasMoreNewer = props.hasMoreNewer, hasNextPage = props.hasNextPage, hasPreviousPage = props.hasPreviousPage, head = props.head, _b = props.initialLoad, initialLoad = _b === void 0 ? true : _b, isLoading = props.isLoading, listenToScroll = props.listenToScroll, loader = props.loader, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, loadNextPage = props.loadNextPage, loadPreviousPage = props.loadPreviousPage, _c = props.threshold, threshold = _c === void 0 ? DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD : _c, _d = props.useCapture, useCapture = _d === void 0 ? false : _d, elementProps = __rest(props, ["children", "element", "hasMore", "hasMoreNewer", "hasNextPage", "hasPreviousPage", "head", "initialLoad", "isLoading", "listenToScroll", "loader", "loadMore", "loadMoreNewer", "loadNextPage", "loadPreviousPage", "threshold", "useCapture"]);
-    var loadNextPageFn = loadNextPage || loadMoreNewer;
-    var loadPreviousPageFn = loadPreviousPage || loadMore;
-    var hasNextPageFlag = hasNextPage || hasMoreNewer;
-    var hasPreviousPageFlag = hasPreviousPage || hasMore;
-    var scrollComponent = useRef();
-    var scrollListenerRef = useRef();
-    scrollListenerRef.current = function () {
-        var element = scrollComponent.current;
+export const InfiniteScroll = (props) => {
+    const { children, element = 'div', hasMore, hasMoreNewer, hasNextPage, hasPreviousPage, head, initialLoad = true, isLoading, listenToScroll, loader, loadMore, loadMoreNewer, loadNextPage, loadPreviousPage, threshold = DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD, useCapture = false, ...elementProps } = props;
+    const loadNextPageFn = loadNextPage || loadMoreNewer;
+    const loadPreviousPageFn = loadPreviousPage || loadMore;
+    const hasNextPageFlag = hasNextPage || hasMoreNewer;
+    const hasPreviousPageFlag = hasPreviousPage || hasMore;
+    const scrollComponent = useRef();
+    const scrollListenerRef = useRef();
+    scrollListenerRef.current = () => {
+        const element = scrollComponent.current;
         if (!element || element.offsetParent === null) {
             return;
         }
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        var parentElement = element.parentElement;
-        var offset = element.scrollHeight - parentElement.scrollTop - parentElement.clientHeight;
-        var reverseOffset = parentElement.scrollTop;
+        const parentElement = element.parentElement;
+        const offset = element.scrollHeight - parentElement.scrollTop - parentElement.clientHeight;
+        const reverseOffset = parentElement.scrollTop;
         if (listenToScroll) {
             listenToScroll(offset, reverseOffset, threshold);
         }
@@ -43,45 +42,46 @@ export var InfiniteScroll = function (props) {
             loadNextPageFn();
         }
     };
-    useEffect(function () {
+    useEffect(() => {
         deprecationAndReplacementWarning([
-            [{ hasMoreNewer: hasMoreNewer }, { hasNextPage: hasNextPage }],
-            [{ loadMoreNewer: loadMoreNewer }, { loadNextPage: loadNextPage }],
-            [{ hasMore: hasMore }, { hasPreviousPage: hasPreviousPage }],
-            [{ loadMore: loadMore }, { loadPreviousPage: loadPreviousPage }],
+            [{ hasMoreNewer }, { hasNextPage }],
+            [{ loadMoreNewer }, { loadNextPage }],
+            [{ hasMore }, { hasPreviousPage }],
+            [{ loadMore }, { loadPreviousPage }],
         ], 'InfiniteScroll');
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    useLayoutEffect(function () {
-        var _a;
-        var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
+    useLayoutEffect(() => {
+        const scrollElement = scrollComponent.current?.parentNode;
         if (!scrollElement)
             return;
-        var scrollListener = function () { var _a; return (_a = scrollListenerRef.current) === null || _a === void 0 ? void 0 : _a.call(scrollListenerRef); };
+        const scrollListener = () => scrollListenerRef.current?.();
         scrollElement.addEventListener('scroll', scrollListener, useCapture);
         scrollElement.addEventListener('resize', scrollListener, useCapture);
         scrollListener();
-        return function () {
+        return () => {
             scrollElement.removeEventListener('scroll', scrollListener, useCapture);
             scrollElement.removeEventListener('resize', scrollListener, useCapture);
         };
     }, [initialLoad, useCapture]);
-    useEffect(function () {
-        var _a;
-        var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
+    useEffect(() => {
+        const scrollElement = scrollComponent.current?.parentNode;
         if (scrollElement) {
             scrollElement.addEventListener('wheel', mousewheelListener, { passive: false });
         }
-        return function () {
+        return () => {
             if (scrollElement) {
                 scrollElement.removeEventListener('wheel', mousewheelListener, useCapture);
             }
         };
     }, [useCapture]);
-    var attributes = __assign(__assign({}, elementProps), { ref: function (element) {
+    const attributes = {
+        ...elementProps,
+        ref: (element) => {
             scrollComponent.current = element;
-        } });
-    var childrenArray = [loader, children];
+        },
+    };
+    const childrenArray = [loader, children];
     if (head) {
         childrenArray.unshift(head);
     }

package/dist/components/InfiniteScrollPaginator/index.d.ts

@@ -1,2 +1 @@
 export * from './InfiniteScroll';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/LoadMore/LoadMoreButton.d.ts

@@ -11,4 +11,3 @@ export type LoadMoreButtonProps = {
     refreshing?: boolean;
 };
 export declare const LoadMoreButton: ({ children, isLoading, onClick, refreshing, }: PropsWithChildren<LoadMoreButtonProps>) => React.JSX.Element;
-//# sourceMappingURL=LoadMoreButton.d.ts.map

package/dist/components/LoadMore/LoadMoreButton.js

@@ -2,16 +2,15 @@ import React, { useEffect } from 'react';
 import { LoadingIndicator } from '../Loading';
 import { deprecationAndReplacementWarning } from '../../utils/deprecationWarning';
 import { useTranslationContext } from '../../context';
-var UnMemoizedLoadMoreButton = function (_a) {
-    var children = _a.children, isLoading = _a.isLoading, onClick = _a.onClick, refreshing = _a.refreshing;
-    var t = useTranslationContext('UnMemoizedLoadMoreButton').t;
-    var childrenOrDefaultString = children !== null && children !== void 0 ? children : t('Load more');
-    var loading = typeof isLoading !== 'undefined' ? isLoading : refreshing;
-    useEffect(function () {
-        deprecationAndReplacementWarning([[{ refreshing: refreshing }, { isLoading: isLoading }]], 'LoadMoreButton');
+const UnMemoizedLoadMoreButton = ({ children, isLoading, onClick, refreshing, }) => {
+    const { t } = useTranslationContext('UnMemoizedLoadMoreButton');
+    const childrenOrDefaultString = children ?? t('Load more');
+    const loading = typeof isLoading !== 'undefined' ? isLoading : refreshing;
+    useEffect(() => {
+        deprecationAndReplacementWarning([[{ refreshing }, { isLoading }]], 'LoadMoreButton');
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (React.createElement("div", { className: 'str-chat__load-more-button' },
         React.createElement("button", { "aria-label": t('aria/Load More Channels'), className: 'str-chat__load-more-button__button str-chat__cta-button', "data-testid": 'load-more-button', disabled: loading, onClick: onClick }, loading ? React.createElement(LoadingIndicator, null) : childrenOrDefaultString)));
 };
-export var LoadMoreButton = React.memo(UnMemoizedLoadMoreButton);
+export const LoadMoreButton = React.memo(UnMemoizedLoadMoreButton);

package/dist/components/LoadMore/LoadMorePaginator.d.ts

@@ -9,4 +9,3 @@ export type LoadMorePaginatorProps = PaginatorProps & {
 };
 export declare const UnMemoizedLoadMorePaginator: (props: PropsWithChildren<LoadMorePaginatorProps>) => React.JSX.Element;
 export declare const LoadMorePaginator: (props: PropsWithChildren<LoadMorePaginatorProps>) => React.JSX.Element;
-//# sourceMappingURL=LoadMorePaginator.d.ts.map

package/dist/components/LoadMore/LoadMorePaginator.js

@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react';
 import { LoadMoreButton as DefaultLoadMoreButton } from './LoadMoreButton';
 import { deprecationAndReplacementWarning } from '../../utils/deprecationWarning';
-export var UnMemoizedLoadMorePaginator = function (props) {
-    var children = props.children, hasNextPage = props.hasNextPage, isLoading = props.isLoading, _a = props.LoadMoreButton, LoadMoreButton = _a === void 0 ? DefaultLoadMoreButton : _a, loadNextPage = props.loadNextPage, refreshing = props.refreshing, reverse = props.reverse;
-    var loadingState = typeof isLoading !== 'undefined' ? isLoading : refreshing;
-    useEffect(function () {
-        deprecationAndReplacementWarning([[{ refreshing: refreshing }, { isLoading: isLoading }]], 'LoadMorePaginator');
+export const UnMemoizedLoadMorePaginator = (props) => {
+    const { children, hasNextPage, isLoading, LoadMoreButton = DefaultLoadMoreButton, loadNextPage, refreshing, reverse, } = props;
+    const loadingState = typeof isLoading !== 'undefined' ? isLoading : refreshing;
+    useEffect(() => {
+        deprecationAndReplacementWarning([[{ refreshing }, { isLoading }]], 'LoadMorePaginator');
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return (React.createElement(React.Fragment, null,
@@ -13,4 +13,4 @@ export var UnMemoizedLoadMorePaginator = function (props) {
         hasNextPage && React.createElement(LoadMoreButton, { isLoading: loadingState, onClick: loadNextPage }),
         reverse && children));
 };
-export var LoadMorePaginator = React.memo(UnMemoizedLoadMorePaginator);
+export const LoadMorePaginator = React.memo(UnMemoizedLoadMorePaginator);

package/dist/components/LoadMore/index.d.ts

@@ -1,3 +1,2 @@
 export * from './LoadMoreButton';
 export * from './LoadMorePaginator';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Loading/LoadingChannels.d.ts

@@ -3,4 +3,3 @@ import React from 'react';
  * Loading indicator for the ChannelList
  */
 export declare const LoadingChannels: React.MemoExoticComponent<() => React.JSX.Element>;
-//# sourceMappingURL=LoadingChannels.d.ts.map

package/dist/components/Loading/LoadingChannels.js

@@ -1,14 +1,14 @@
 import React from 'react';
-var LoadingItems = function () { return (React.createElement("div", { className: 'str-chat__loading-channels-item str-chat__channel-preview-loading' },
+const LoadingItems = () => (React.createElement("div", { className: 'str-chat__loading-channels-item str-chat__channel-preview-loading' },
     React.createElement("div", { className: 'str-chat__loading-channels-avatar' }),
     React.createElement("div", { className: 'str-chat__loading-channels-meta str-chat__channel-preview-end-loading' },
         React.createElement("div", { className: 'str-chat__loading-channels-username' }),
-        React.createElement("div", { className: 'str-chat__loading-channels-status' })))); };
-var UnMemoizedLoadingChannels = function () { return (React.createElement("div", { className: 'str-chat__loading-channels' },
+        React.createElement("div", { className: 'str-chat__loading-channels-status' }))));
+const UnMemoizedLoadingChannels = () => (React.createElement("div", { className: 'str-chat__loading-channels' },
     React.createElement(LoadingItems, null),
     React.createElement(LoadingItems, null),
-    React.createElement(LoadingItems, null))); };
+    React.createElement(LoadingItems, null)));
 /**
  * Loading indicator for the ChannelList
  */
-export var LoadingChannels = React.memo(UnMemoizedLoadingChannels);
+export const LoadingChannels = React.memo(UnMemoizedLoadingChannels);

package/dist/components/Loading/LoadingErrorIndicator.d.ts

@@ -4,4 +4,3 @@ export type LoadingErrorIndicatorProps = {
     error?: Error;
 };
 export declare const LoadingErrorIndicator: ({ error }: LoadingErrorIndicatorProps) => React.JSX.Element | null;
-//# sourceMappingURL=LoadingErrorIndicator.d.ts.map

package/dist/components/Loading/LoadingErrorIndicator.js

@@ -3,11 +3,10 @@ import { useTranslationContext } from '../../context/TranslationContext';
 /**
  * UI component for error indicator in a Channel
  */
-var UnMemoizedLoadingErrorIndicator = function (_a) {
-    var error = _a.error;
-    var t = useTranslationContext('LoadingErrorIndicator').t;
+const UnMemoizedLoadingErrorIndicator = ({ error }) => {
+    const { t } = useTranslationContext('LoadingErrorIndicator');
     if (!error)
         return null;
     return (React.createElement("div", null, t('Error: {{ errorMessage }}', { errorMessage: error.message })));
 };
-export var LoadingErrorIndicator = React.memo(UnMemoizedLoadingErrorIndicator, function (prevProps, nextProps) { var _a, _b; return ((_a = prevProps.error) === null || _a === void 0 ? void 0 : _a.message) === ((_b = nextProps.error) === null || _b === void 0 ? void 0 : _b.message); });
+export const LoadingErrorIndicator = React.memo(UnMemoizedLoadingErrorIndicator, (prevProps, nextProps) => prevProps.error?.message === nextProps.error?.message);

package/dist/components/Loading/LoadingIndicator.d.ts

@@ -9,4 +9,3 @@ export type LoadingIndicatorProps = {
  * Simple loading spinner
  */
 export declare const LoadingIndicator: (props: LoadingIndicatorProps) => React.JSX.Element;
-//# sourceMappingURL=LoadingIndicator.d.ts.map

package/dist/components/Loading/LoadingIndicator.js

@@ -1,8 +1,8 @@
 import React from 'react';
-var UnMemoizedLoadingIndicator = function (props) {
-    var _a = props.color, color = _a === void 0 ? '#006CFF' : _a, _b = props.size, size = _b === void 0 ? 15 : _b;
-    return (React.createElement("div", { className: "str-chat__loading-indicator", "data-testid": 'loading-indicator-wrapper', style: { height: size, width: size } },
-        React.createElement("svg", { height: size, viewBox: "0 0 30 30", width: size, xmlns: 'http://www.w3.org/2000/svg' },
+const UnMemoizedLoadingIndicator = (props) => {
+    const { color = '#006CFF', size = 15 } = props;
+    return (React.createElement("div", { className: `str-chat__loading-indicator`, "data-testid": 'loading-indicator-wrapper', style: { height: size, width: size } },
+        React.createElement("svg", { height: size, viewBox: `0 0 30 30`, width: size, xmlns: 'http://www.w3.org/2000/svg' },
             React.createElement("defs", null,
                 React.createElement("linearGradient", { id: 'a', x1: '50%', x2: '50%', y1: '0%', y2: '100%' },
                     React.createElement("stop", { offset: '0%', stopColor: '#FFF', stopOpacity: '0' }),
@@ -12,6 +12,4 @@ var UnMemoizedLoadingIndicator = function (props) {
 /**
  * Simple loading spinner
  */
-export var LoadingIndicator = React.memo(UnMemoizedLoadingIndicator, function (prevProps, nextProps) {
-    return prevProps.color === nextProps.color && prevProps.size === nextProps.size;
-});
+export const LoadingIndicator = React.memo(UnMemoizedLoadingIndicator, (prevProps, nextProps) => prevProps.color === nextProps.color && prevProps.size === nextProps.size);

package/dist/components/Loading/index.d.ts

@@ -1,4 +1,3 @@
 export * from './LoadingChannels';
 export * from './LoadingErrorIndicator';
 export * from './LoadingIndicator';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/MML/MML.d.ts

@@ -12,4 +12,3 @@ export type MMLProps = {
  * A wrapper component around MML-React library
  */
 export declare const MML: (props: MMLProps) => React.JSX.Element;
-//# sourceMappingURL=MML.d.ts.map

package/dist/components/MML/MML.js

@@ -1,23 +1,15 @@
-import { __awaiter, __generator } from "tslib";
 import React, { Suspense } from 'react';
 import { useChatContext } from '../../context/ChatContext';
-var MMLReact = React.lazy(function () { return __awaiter(void 0, void 0, void 0, function () {
-    var mml;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0: return [4 /*yield*/, import('mml-react')];
-            case 1:
-                mml = _a.sent();
-                return [2 /*return*/, { default: mml.MML }];
-        }
-    });
-}); });
+const MMLReact = React.lazy(async () => {
+    const mml = await import('mml-react');
+    return { default: mml.MML };
+});
 /**
  * A wrapper component around MML-React library
  */
-export var MML = function (props) {
-    var actionHandler = props.actionHandler, _a = props.align, align = _a === void 0 ? 'right' : _a, source = props.source;
-    var theme = useChatContext('MML').theme;
+export const MML = (props) => {
+    const { actionHandler, align = 'right', source } = props;
+    const { theme } = useChatContext('MML');
     return (React.createElement(Suspense, { fallback: null },
-        React.createElement(MMLReact, { className: "mml-align-".concat(align), Loading: null, onSubmit: actionHandler, source: source, Success: null, theme: (theme || '').replace(' ', '-') })));
+        React.createElement(MMLReact, { className: `mml-align-${align}`, Loading: null, onSubmit: actionHandler, source: source, Success: null, theme: (theme || '').replace(' ', '-') })));
 };

package/dist/components/MML/index.d.ts

@@ -1,2 +1 @@
 export * from './MML';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/MediaRecorder/AudioRecorder/AudioRecorder.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
 export declare const AudioRecorder: () => React.JSX.Element | null;
-//# sourceMappingURL=AudioRecorder.d.ts.map

package/dist/components/MediaRecorder/AudioRecorder/AudioRecorder.js

@@ -2,28 +2,27 @@ import React, { useMemo } from 'react';
 import { AudioRecordingPreview } from './AudioRecordingPreview';
 import { AudioRecordingInProgress } from './AudioRecordingInProgress';
 import { MediaRecordingState } from '../classes';
-import { BinIcon, CheckSignIcon, LoadingIndicatorIcon, MicIcon, PauseIcon, SendIconV2, } from '../../MessageInput';
+import { BinIcon, CheckSignIcon, LoadingIndicatorIcon, MicIcon, PauseIcon, SendIcon, } from '../../MessageInput';
 import { useMessageInputContext } from '../../../context';
-export var AudioRecorder = function () {
-    var _a, _b;
-    var _c = useMessageInputContext().recordingController, completeRecording = _c.completeRecording, recorder = _c.recorder, recording = _c.recording, recordingState = _c.recordingState;
-    var isUploadingFile = ((_a = recording === null || recording === void 0 ? void 0 : recording.localMetadata) === null || _a === void 0 ? void 0 : _a.uploadState) === 'uploading';
-    var state = useMemo(function () { return ({
+export const AudioRecorder = () => {
+    const { recordingController: { completeRecording, recorder, recording, recordingState }, } = useMessageInputContext();
+    const isUploadingFile = recording?.localMetadata?.uploadState === 'uploading';
+    const state = useMemo(() => ({
         paused: recordingState === MediaRecordingState.PAUSED,
         recording: recordingState === MediaRecordingState.RECORDING,
         stopped: recordingState === MediaRecordingState.STOPPED,
-    }); }, [recordingState]);
+    }), [recordingState]);
     if (!recorder)
         return null;
     return (React.createElement("div", { className: 'str-chat__audio_recorder-container' },
         React.createElement("div", { className: 'str-chat__audio_recorder', "data-testid": 'audio-recorder' },
             React.createElement("button", { className: 'str-chat__audio_recorder__cancel-button', "data-testid": 'cancel-recording-audio-button', disabled: isUploadingFile, onClick: recorder.cancel },
                 React.createElement(BinIcon, null)),
-            state.stopped && (recording === null || recording === void 0 ? void 0 : recording.asset_url) ? (React.createElement(AudioRecordingPreview, { durationSeconds: (_b = recording.duration) !== null && _b !== void 0 ? _b : 0, mimeType: recording.mime_type, src: recording.asset_url, waveformData: recording.waveform_data })) : state.paused || state.recording ? (React.createElement(AudioRecordingInProgress, null)) : null,
+            state.stopped && recording?.asset_url ? (React.createElement(AudioRecordingPreview, { durationSeconds: recording.duration ?? 0, mimeType: recording.mime_type, src: recording.asset_url, waveformData: recording.waveform_data })) : state.paused || state.recording ? (React.createElement(AudioRecordingInProgress, null)) : null,
             state.paused && (React.createElement("button", { className: 'str-chat__audio_recorder__resume-recording-button', onClick: recorder.resume },
                 React.createElement(MicIcon, null))),
             state.recording && (React.createElement("button", { className: 'str-chat__audio_recorder__pause-recording-button', "data-testid": 'pause-recording-audio-button', onClick: recorder.pause },
                 React.createElement(PauseIcon, null))),
-            state.stopped ? (React.createElement("button", { className: 'str-chat__audio_recorder__complete-button', "data-testid": 'audio-recorder-complete-button', disabled: isUploadingFile, onClick: completeRecording }, isUploadingFile ? React.createElement(LoadingIndicatorIcon, null) : React.createElement(SendIconV2, null))) : (React.createElement("button", { className: 'str-chat__audio_recorder__stop-button', "data-testid": 'audio-recorder-stop-button', onClick: recorder.stop },
+            state.stopped ? (React.createElement("button", { className: 'str-chat__audio_recorder__complete-button', "data-testid": 'audio-recorder-complete-button', disabled: isUploadingFile, onClick: completeRecording }, isUploadingFile ? React.createElement(LoadingIndicatorIcon, null) : React.createElement(SendIcon, null))) : (React.createElement("button", { className: 'str-chat__audio_recorder__stop-button', "data-testid": 'audio-recorder-stop-button', onClick: recorder.stop },
                 React.createElement(CheckSignIcon, null))))));
 };

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingButtons.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 export type StartRecordingAudioButtonProps = React.ComponentProps<'button'>;
 export declare const StartRecordingAudioButton: (props: StartRecordingAudioButtonProps) => React.JSX.Element;
-//# sourceMappingURL=AudioRecordingButtons.d.ts.map

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingButtons.js

@@ -1,5 +1,4 @@
-import { __assign } from "tslib";
 import React from 'react';
 import { MicIcon } from '../../MessageInput/icons';
-export var StartRecordingAudioButton = function (props) { return (React.createElement("button", __assign({ "aria-label": 'Start recording audio', className: 'str-chat__start-recording-audio-button', "data-testid": 'start-recording-audio-button' }, props),
-    React.createElement(MicIcon, null))); };
+export const StartRecordingAudioButton = (props) => (React.createElement("button", { "aria-label": 'Start recording audio', className: 'str-chat__start-recording-audio-button', "data-testid": 'start-recording-audio-button', ...props },
+    React.createElement(MicIcon, null)));

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
 export declare const AudioRecordingInProgress: () => React.JSX.Element;
-//# sourceMappingURL=AudioRecordingInProgress.d.ts.map

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingInProgress.js

@@ -2,39 +2,38 @@ import React, { useEffect, useState } from 'react';
 import { useTimeElapsed } from '../../MessageInput/hooks/useTimeElapsed';
 import { useMessageInputContext } from '../../../context';
 import { RecordingTimer } from './RecordingTimer';
-var AudioRecordingWaveform = function (_a) {
-    var _b = _a.maxDataPointsDrawn, maxDataPointsDrawn = _b === void 0 ? 100 : _b;
-    var recorder = useMessageInputContext().recordingController.recorder;
-    var _c = useState([]), amplitudes = _c[0], setAmplitudes = _c[1];
-    useEffect(function () {
-        if (!(recorder === null || recorder === void 0 ? void 0 : recorder.amplitudeRecorder))
+const AudioRecordingWaveform = ({ maxDataPointsDrawn = 100 }) => {
+    const { recordingController: { recorder }, } = useMessageInputContext();
+    const [amplitudes, setAmplitudes] = useState([]);
+    useEffect(() => {
+        if (!recorder?.amplitudeRecorder)
             return;
-        var amplitudesSubscription = recorder.amplitudeRecorder.amplitudes.subscribe(setAmplitudes);
-        return function () {
+        const amplitudesSubscription = recorder.amplitudeRecorder.amplitudes.subscribe(setAmplitudes);
+        return () => {
             amplitudesSubscription.unsubscribe();
         };
     }, [recorder]);
     if (!recorder)
         return null;
     return (React.createElement("div", { className: 'str-chat__waveform-box-container' },
-        React.createElement("div", { className: 'str-chat__audio_recorder__waveform-box' }, amplitudes.slice(-maxDataPointsDrawn).map(function (amplitude, i) { return (React.createElement("div", { className: 'str-chat__wave-progress-bar__amplitude-bar', key: "amplitude-".concat(i, "-voice-recording"), style: {
+        React.createElement("div", { className: 'str-chat__audio_recorder__waveform-box' }, amplitudes.slice(-maxDataPointsDrawn).map((amplitude, i) => (React.createElement("div", { className: 'str-chat__wave-progress-bar__amplitude-bar', key: `amplitude-${i}-voice-recording`, style: {
                 '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
                     ? amplitude * 100 + '%'
                     : '0%',
-            } })); }))));
+            } }))))));
 };
-export var AudioRecordingInProgress = function () {
-    var _a = useTimeElapsed(), secondsElapsed = _a.secondsElapsed, startCounter = _a.startCounter, stopCounter = _a.stopCounter;
-    var recorder = useMessageInputContext().recordingController.recorder;
-    useEffect(function () {
-        if (!(recorder === null || recorder === void 0 ? void 0 : recorder.mediaRecorder))
+export const AudioRecordingInProgress = () => {
+    const { secondsElapsed, startCounter, stopCounter } = useTimeElapsed();
+    const { recordingController: { recorder }, } = useMessageInputContext();
+    useEffect(() => {
+        if (!recorder?.mediaRecorder)
             return;
-        var mediaRecorder = recorder.mediaRecorder;
+        const { mediaRecorder } = recorder;
         mediaRecorder.addEventListener('start', startCounter);
         mediaRecorder.addEventListener('resume', startCounter);
         mediaRecorder.addEventListener('stop', stopCounter);
         mediaRecorder.addEventListener('pause', stopCounter);
-        return function () {
+        return () => {
             mediaRecorder.removeEventListener('start', startCounter);
             mediaRecorder.removeEventListener('resume', startCounter);
             mediaRecorder.removeEventListener('stop', stopCounter);

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.d.ts

@@ -5,4 +5,3 @@ export type AudioRecordingPlayerProps = React.ComponentProps<'audio'> & {
     waveformData?: number[];
 };
 export declare const AudioRecordingPreview: ({ durationSeconds, mimeType, waveformData, ...props }: AudioRecordingPlayerProps) => React.JSX.Element;
-//# sourceMappingURL=AudioRecordingPreview.d.ts.map

package/dist/components/MediaRecorder/AudioRecorder/AudioRecordingPreview.js

@@ -1,16 +1,14 @@
-import { __rest } from "tslib";
 import React from 'react';
 import { PauseIcon, PlayIcon } from '../../MessageInput/icons';
 import { RecordingTimer } from './RecordingTimer';
 import { useAudioController } from '../../Attachment/hooks/useAudioController';
 import { WaveProgressBar } from '../../Attachment';
-export var AudioRecordingPreview = function (_a) {
-    var durationSeconds = _a.durationSeconds, mimeType = _a.mimeType, waveformData = _a.waveformData, props = __rest(_a, ["durationSeconds", "mimeType", "waveformData"]);
-    var _b = useAudioController({
-        durationSeconds: durationSeconds,
-        mimeType: mimeType,
-    }), audioRef = _b.audioRef, isPlaying = _b.isPlaying, progress = _b.progress, secondsElapsed = _b.secondsElapsed, seek = _b.seek, togglePlay = _b.togglePlay;
-    var displayedDuration = secondsElapsed || durationSeconds;
+export const AudioRecordingPreview = ({ durationSeconds, mimeType, waveformData, ...props }) => {
+    const { audioRef, isPlaying, progress, secondsElapsed, seek, togglePlay } = useAudioController({
+        durationSeconds,
+        mimeType,
+    });
+    const displayedDuration = secondsElapsed || durationSeconds;
     return (React.createElement(React.Fragment, null,
         React.createElement("audio", { ref: audioRef },
             React.createElement("source", { src: props.src, type: mimeType })),

package/dist/components/MediaRecorder/AudioRecorder/RecordingTimer.d.ts

@@ -3,4 +3,3 @@ export type RecordingTimerProps = {
     durationSeconds: number;
 };
 export declare const RecordingTimer: ({ durationSeconds }: RecordingTimerProps) => React.JSX.Element;
-//# sourceMappingURL=RecordingTimer.d.ts.map

package/dist/components/MediaRecorder/AudioRecorder/RecordingTimer.js

@@ -1,9 +1,6 @@
 import clsx from 'clsx';
 import { displayDuration } from '../../Attachment';
 import React from 'react';
-export var RecordingTimer = function (_a) {
-    var durationSeconds = _a.durationSeconds;
-    return (React.createElement("div", { className: clsx('str-chat__recording-timer', {
-            'str-chat__recording-timer--hours': durationSeconds >= 3600,
-        }) }, displayDuration(durationSeconds)));
-};
+export const RecordingTimer = ({ durationSeconds }) => (React.createElement("div", { className: clsx('str-chat__recording-timer', {
+        'str-chat__recording-timer--hours': durationSeconds >= 3600,
+    }) }, displayDuration(durationSeconds)));

package/dist/components/MediaRecorder/AudioRecorder/index.d.ts

@@ -1,4 +1,3 @@
 export * from './AudioRecorder';
 export * from './AudioRecordingButtons';
 export * from './RecordingTimer';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/MediaRecorder/RecordingPermissionDeniedNotification.d.ts

@@ -5,4 +5,3 @@ export type RecordingPermissionDeniedNotificationProps = {
     permissionName: RecordingPermission;
 };
 export declare const RecordingPermissionDeniedNotification: ({ onClose, permissionName, }: RecordingPermissionDeniedNotificationProps) => React.JSX.Element;
-//# sourceMappingURL=RecordingPermissionDeniedNotification.d.ts.map

package/dist/components/MediaRecorder/RecordingPermissionDeniedNotification.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { useTranslationContext } from '../../context';
-export var RecordingPermissionDeniedNotification = function (_a) {
-    var onClose = _a.onClose, permissionName = _a.permissionName;
-    var t = useTranslationContext().t;
-    var permissionTranslations = {
+export const RecordingPermissionDeniedNotification = ({ onClose, permissionName, }) => {
+    const { t } = useTranslationContext();
+    const permissionTranslations = {
         body: {
             camera: t('To start recording, allow the camera access in your browser'),
             microphone: t('To start recording, allow the microphone access in your browser'),

package/dist/components/MediaRecorder/classes/AmplitudeRecorder.d.ts

@@ -52,4 +52,3 @@ export declare class AmplitudeRecorder {
     close(): void;
 }
 export {};
-//# sourceMappingURL=AmplitudeRecorder.d.ts.map