@sendbird/uikit-react 3.14.12

[v3.14.12] (July 3, 2024)

on Node.js NPM

Features

• RTL Support

  • Added htmlTextDirection prop to SendbirdProvider to support Right-To-Left (RTL) text direction for Middle East customers. Read more.

  import ar from 'date-fns/locale/ar';
  <SendbirdProvider
    ...
    htmlTextDirection={'rtl' | 'ltr'}
    // Setting a proper value to dateLocale would be necessary
    dateLocale={ar}
  >
  </SendbirdProvider>

• DX Improvements: ChannelSetting SettingMenu

  • Added new components and hooks to make the menu items in the ChannelSettingsUI more modular and customizable.
  • New Files:
    • useMenuItems.tsx: Custom hook for menu items based on user roles.
    • MenuItem.tsx: Reusable and customizable menu item component.
    • MenuListByRole.tsx: Renders a list of menu items based on user roles.
  • Example usage:
    To customize the moderation panel with selected menu items:

    import React from 'react';
    import ChannelSettingsUI from '@sendbird-uikit/ChannelSettings/components/ChannelSettingsUI';
    import useMenuItems from '@sendbird-uikit/ChannelSettings/hooks/useMenuList';
    
    const CustomChannelSettings = () => {
      const menuItems = useMenuItems();
    
      const renderCustomModerationPanel = () => {
        // Create a new object by selecting only the desired menu items.
        const customMenuItems = {
          operator: {
            operators: menuItems.operator.operators, // Keep the operators menu
            allUsers: menuItems.operator.allUsers, // Keep the all users menu
            // Add or remove other menu items as needed.
          },
          nonOperator: {
            allUsers: menuItems.nonOperator.allUsers, // Keep the all users menu
            // Add or remove other menu items as needed.
          },
        };
    
        return <MenuListByRole menuItems={customMenuItems} />;
      };
    
      return (
        <ChannelSettingsUI renderModerationPanel={renderCustomModerationPanel} />
      );
    };
    
    export default CustomChannelSettings;

• DX Improvements: ChannelSetting UserListItem

  • UserListItemMenu has been newly created
  • Provided it as a module which also contains UserListItemMenuProvider and useUserListItemMenuContext

    import { UserListItemMenu, UserListItemMenuProvider, useUserListItemMenuContext } from '@sendbird/uikit-react/ui/UserListItemMenu';

  • Added new renderUserListItem props to the list components of ChannelSettings:
    • OperatorList, MemberList, MutedMemberList, BannedUserList
  • Exported the following modules:
    • OperatorList, MemberList, MutedMemberList, BannedUserList

    import { OperatorList, MemberList, MutedMemberList, BannedUserList } from '@sendbird/uikit-react/ChannelSettings/components/ChannelSettingsUI';

  • Merged ui/UserListItem and ChannelSettings/components/UserListItem:
    • Use ui/UserListItem from now on
    • Added size prop to UserListItem, which now accepts two values: 'normal' and 'small' ('small' replaces the previous ChannelSettings/components/UserListItem)
      • normal: Used primarily in Modals
      • small: Used primarily in Lists
  • Example usage:

    <ChannelSettings
      renderUserListItem={(props) => (
        <UserListItem {...props}
          renderListItemMenu={(props) => (
            <UserListItemMenu
              {...props}
              onToggleOperatorState={({ user, newState, error }) => {/** Handle operator state change */}}
              onToggleMuteState={({ user, newState, error }) => {/** Handle mute state change */}}
              onToggleBanState={({ user, newState, error }) => {/** Handle ban state change */}}
              renderTrigger={({ ref }) => (<div ref={ref}>{/** Render your custom trigger icon here */}</div>)}
              renderMenuItems={({ items }) => (
                <>
                  <items.OperatorToggleMenuItem />
                  <items.MuteToggleMenuItem />
                  <items.BanToggleMenuItem />
                </>
              )}
            />
          )}
        />
      )}
    />

Fixes

• Fixed image file viewer header style
• Disabled isSuperGroupReactionsEnabled setter
• Use APP_LAYOUT_ROOT to get the area info of the UIKit

  export const APP_LAYOUT_ROOT = 'sendbird-app__layout';

  • To ensure the menu positions are calculated correctly, wrap the entire area using SendbirdProvider with a tag that has the specified ID.

Chore

• Updated @sendbird/chat version to 4.13.0
  • Improved channel/message refreshing performance utilizing LocalCaching.