@linktr.ee/messaging-react 1.23.0 → 1.24.1-rc-1772717771

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.23.0",
+  "version": "1.24.1-rc-1772717771",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/ChannelList/index.tsx

@@ -8,6 +8,8 @@ import type { ChannelListProps } from '../../types'
 import { ChannelListProvider } from './ChannelListContext'
 import CustomChannelPreview from './CustomChannelPreview'
 
+const DEFAULT_SORT = { last_message_at: -1 } as const
+
 /**
  * Channel list component with customizable header and actions
  */
@@ -16,6 +18,7 @@ export const ChannelList = React.memo<ChannelListProps>(
     onChannelSelect,
     selectedChannel,
     filters,
+    sort = DEFAULT_SORT,
     className,
     customEmptyStateIndicator,
     renderMessagePreview,
@@ -56,9 +59,9 @@ export const ChannelList = React.memo<ChannelListProps>(
         <div className="flex-1 overflow-hidden min-w-0">
           <ChannelListProvider value={contextValue}>
             <StreamChannelList
-              key={JSON.stringify(filters)}
+              key={`${JSON.stringify(filters)}:${JSON.stringify(sort)}`}
               filters={filters}
-              sort={{ last_message_at: -1 }}
+              sort={sort}
               options={{ limit: 30 }}
               Preview={CustomChannelPreview}
               EmptyStateIndicator={customEmptyStateIndicator}

package/src/components/ChannelView.tsx

@@ -49,7 +49,7 @@ type BlockedUser = {
 }
 
 const ICON_BTN_CLASS =
-  'size-10 rounded-full bg-[#F1F0EE] hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150'
+  'size-10 rounded-full bg-[#F1F0EE] hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150 focus-ring'
 
 /**
  * Custom channel header component

package/src/components/CustomLinkPreviewList/index.tsx

@@ -48,7 +48,7 @@ const CustomLinkPreviewCard: React.FC<CustomLinkPreviewCardProps> = ({
       <button
         type="button"
         onClick={handleDismissLink}
-        className="absolute right-4 top-4 flex size-6 items-center justify-center rounded-full border border-white/40 bg-white/70 backdrop-blur-2xl"
+        className="absolute right-4 top-4 flex size-6 items-center justify-center rounded-full border border-white/40 bg-white/70 backdrop-blur-2xl focus-ring"
         aria-label="Close link preview"
       >
         <XIcon className="size-4 text-black/90" />

package/src/components/CustomMessage/MessageVoteButtons.tsx

@@ -42,7 +42,7 @@ export const MessageVoteButtons: React.FC<MessageVoteButtonsProps> = ({
   <div className="message-vote-buttons">
     <button
       type="button"
-      className={`message-vote-button${selected === 'up' ? ' message-vote-button--selected' : ''}`}
+      className={`message-vote-button${selected === 'up' ? ' message-vote-button--selected' : ''} focus-ring`}
       onClick={onVoteUp}
       aria-label="Helpful"
       aria-pressed={selected === 'up'}
@@ -51,7 +51,7 @@ export const MessageVoteButtons: React.FC<MessageVoteButtonsProps> = ({
     </button>
     <button
       type="button"
-      className={`message-vote-button${selected === 'down' ? ' message-vote-button--selected' : ''}`}
+      className={`message-vote-button${selected === 'down' ? ' message-vote-button--selected' : ''} focus-ring`}
       onClick={onVoteDown}
       aria-label="Not helpful"
       aria-pressed={selected === 'down'}

package/src/components/CustomMessageInput/index.tsx

@@ -39,7 +39,7 @@ const CustomMessageInputInner: React.FC = () => {
           </div>
           <button
             aria-label="Send"
-            className="str-chat__send-button mt-auto flex justify-center items-center flex-shrink-0 rounded-full size-8 bg-[#121110] disabled:bg-[#F1F0EE] disabled:text-black/20 text-white"
+            className="str-chat__send-button mt-auto flex justify-center items-center flex-shrink-0 rounded-full size-8 bg-[#121110] disabled:bg-[#F1F0EE] disabled:text-black/20 text-white focus-ring"
             data-testid="send-button"
             disabled={!hasSendableData}
             onClick={handleSubmit}

package/src/components/FaqList/FaqListItem.tsx

@@ -20,7 +20,7 @@ export const FaqListItem: React.FC<FaqListItemProps> = ({
       disabled={loading}
       style={{ backgroundColor: '#E6E5E3' }}
       className={classNames(
-        'w-full text-center p-4 rounded-xl text-charcoal font-medium transition-colors',
+        'w-full text-center p-4 rounded-xl text-charcoal font-medium transition-colors focus-ring',
         {
           'hover:brightness-95 active:brightness-90': !loading,
           'opacity-50 cursor-not-allowed': loading,

package/src/components/MessagingShell/ErrorState.tsx

@@ -23,7 +23,7 @@ export const ErrorState = React.memo<ErrorStateProps>(({ message, onBack }) => (
         <button
           type="button"
           onClick={onBack}
-          className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-[#7f22fe] hover:bg-primary-alt rounded-lg focus:outline-none focus:ring-2 focus:ring-primary transition-colors"
+          className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-[#7f22fe] hover:bg-primary-alt rounded-lg focus:outline-none focus:ring-2 focus:ring-primary transition-colors focus-ring"
         >
           Go Back
         </button>

package/src/components/ParticipantPicker/index.tsx

@@ -199,7 +199,7 @@ export const ParticipantPicker: React.FC<ParticipantPickerProps> = ({
                     type="button"
                     onClick={() => handleSelectParticipant(participant)}
                     onKeyDown={(e) => handleKeyDown(e, participant)}
-                    className="w-full px-4 py-3 hover:bg-sand transition-colors border-b border-sand text-left focus:outline-none focus:ring-2 focus:ring-black"
+                    className="w-full px-4 py-3 hover:bg-sand transition-colors border-b border-sand text-left focus-ring"
                   >
                     <div className="flex items-center justify-between">
                       <div className="flex items-center space-x-3 flex-1 min-w-0">

package/src/types.ts

@@ -5,6 +5,7 @@ import type {
 import type {
   Channel,
   ChannelFilters,
+  ChannelSort,
   LocalMessage,
   SendMessageAPIResponse,
 } from 'stream-chat'
@@ -67,6 +68,11 @@ export interface ChannelListProps {
   participantLabel?: string
   className?: string
   filters: ChannelFilters
+  /**
+   * Sort order for the channel list query.
+   * Defaults to `{ last_message_at: -1 }` (most recent first).
+   */
+  sort?: ChannelSort
   customEmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>
   renderMessagePreview?: (
     message: LocalMessage | undefined,