chore(KNO-7799): update Telegraph dependencies (#386)

knocklabs · Feb 11, 2025 · 33c5cd8 · 33c5cd8
1 parent 35b5cbd
commit 33c5cd8
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 210 deletions.
diff --git a/.changeset/lovely-plums-relax.md b/.changeset/lovely-plums-relax.md
@@ -0,0 +1,5 @@
+---
+"@knocklabs/react": patch
+---
+
+Update Telegraph dependencies
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -56,10 +56,10 @@
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-popover": "1.0.7",
     "@radix-ui/react-visually-hidden": "1.0.3",
-    "@telegraph/combobox": "^0.0.49",
+    "@telegraph/combobox": "^0.0.57",
     "@telegraph/icon": "^0.0.39",
-    "@telegraph/layout": "^0.1.3",
-    "@telegraph/typography": "^0.1.3",
+    "@telegraph/layout": "^0.1.5",
+    "@telegraph/typography": "^0.1.5",
     "lodash.debounce": "^4.0.8",
     "react-popper": "^2.3.0",
     "react-popper-tooltip": "^4.4.2"

diff --git a/...t/src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.tsx b/...t/src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsChannelInTeamCombobox.tsx
@@ -1,4 +1,4 @@
-import { MsTeamsChannel, MsTeamsChannelConnection } from "@knocklabs/client";
+import { MsTeamsChannelConnection } from "@knocklabs/client";
 import {
   MsTeamsChannelQueryOptions,
   RecipientObject,
@@ -10,11 +10,7 @@ import { Combobox } from "@telegraph/combobox";
 import { Box } from "@telegraph/layout";
 import { FunctionComponent, useCallback, useMemo } from "react";
 
-import {
-  fromLabelSearchableOption,
-  sortByDisplayName,
-  toLabelSearchableOption,
-} from "../../utils";
+import { sortByDisplayName } from "../../utils";
 
 import MsTeamsErrorMessage from "./MsTeamsErrorMessage";
 
@@ -65,15 +61,6 @@ export const MsTeamsChannelInTeamCombobox: FunctionComponent<
     [availableChannels],
   );
 
-  const channelToOption = useCallback(
-    (channel: MsTeamsChannel) =>
-      toLabelSearchableOption({
-        value: channel.id,
-        label: channel.displayName,
-      }),
-    [],
-  );
-
   const comboboxValue = useMemo(
     () =>
       currentConnections
@@ -82,31 +69,18 @@ export const MsTeamsChannelInTeamCombobox: FunctionComponent<
             connection.ms_teams_channel_id &&
             isChannelInThisTeam(connection.ms_teams_channel_id),
         )
-        .map((connection) => {
-          const channel = availableChannels.find(
-            (c) => c.id === connection.ms_teams_channel_id,
-          );
-          return channel
-            ? channelToOption(channel)
-            : { label: "Loading…", value: connection.ms_teams_channel_id! };
-        }),
-    [
-      currentConnections,
-      isChannelInThisTeam,
-      availableChannels,
-      channelToOption,
-    ],
+        .map((connection) => connection.ms_teams_channel_id),
+    [currentConnections, isChannelInThisTeam],
   );
 
   return (
     <>
       <Box w="full" minW="0">
         <Combobox.Root
           value={comboboxValue}
-          onValueChange={(searchableOptions) => {
-            const options = searchableOptions.map(fromLabelSearchableOption);
+          onValueChange={(channelIds) => {
             const connectedChannelsInThisTeam =
-              options.map<MsTeamsChannelConnection>(({ value: channelId }) => ({
+              channelIds.map<MsTeamsChannelConnection>((channelId) => ({
                 ms_teams_team_id: teamId,
                 ms_teams_channel_id: channelId,
               }));
@@ -136,13 +110,12 @@ export const MsTeamsChannelInTeamCombobox: FunctionComponent<
         >
           <Combobox.Trigger />
           <Combobox.Content>
-            <Combobox.Search />
+            <Combobox.Search className="rtk-combobox__search" />
             <Combobox.Options className="rtk-combobox__options">
               {sortedChannels.map((channel) => (
-                <Combobox.Option
-                  key={channel.id}
-                  {...channelToOption(channel)}
-                />
+                <Combobox.Option key={channel.id} value={channel.id}>
+                  {channel.displayName}
+                </Combobox.Option>
               ))}
             </Combobox.Options>
             <Combobox.Empty />

diff --git a/...ages/react/src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.tsx b/...ages/react/src/modules/ms-teams/components/MsTeamsChannelCombobox/MsTeamsTeamCombobox.tsx
@@ -6,13 +6,9 @@ import {
 } from "@knocklabs/react-core";
 import { Combobox } from "@telegraph/combobox";
 import { Box } from "@telegraph/layout";
-import { FunctionComponent, useCallback, useMemo } from "react";
+import { FunctionComponent, useMemo } from "react";
 
-import {
-  fromLabelSearchableOption,
-  sortByDisplayName,
-  toLabelSearchableOption,
-} from "../../utils";
+import { sortByDisplayName } from "../../utils";
 
 interface MsTeamsTeamComboboxProps {
   team: MsTeamsTeam | null;
@@ -45,26 +41,11 @@ export const MsTeamsTeamCombobox: FunctionComponent<
     [connectionStatus, isLoadingTeams],
   );
 
-  const teamToOption = useCallback(
-    (team: MsTeamsTeam) => {
-      const channelCount = getChannelCount(team.id);
-      return toLabelSearchableOption({
-        value: team.id,
-        label:
-          channelCount > 0
-            ? `${team.displayName} (${channelCount})`
-            : team.displayName,
-      });
-    },
-    [getChannelCount],
-  );
-
   return (
     <Box w="full" minW="0">
       <Combobox.Root
-        value={team ? teamToOption(team) : undefined}
-        onValueChange={(searchableOption) => {
-          const { value: teamId } = fromLabelSearchableOption(searchableOption);
+        value={team?.id}
+        onValueChange={(teamId) => {
           const selectedTeam = sortedTeams.find((team) => team.id === teamId);
           if (selectedTeam) {
             onTeamChange(selectedTeam);
@@ -75,11 +56,18 @@ export const MsTeamsTeamCombobox: FunctionComponent<
       >
         <Combobox.Trigger className="rtk-combobox__team__value" />
         <Combobox.Content>
-          <Combobox.Search />
+          <Combobox.Search className="rtk-combobox__search" />
           <Combobox.Options className="rtk-combobox__options">
-            {sortedTeams.map((team) => (
-              <Combobox.Option key={team.id} {...teamToOption(team)} />
-            ))}
+            {sortedTeams.map((team) => {
+              const channelCount = getChannelCount(team.id);
+              return (
+                <Combobox.Option key={team.id} value={team.id}>
+                  {channelCount > 0
+                    ? `${team.displayName} (${channelCount})`
+                    : team.displayName}
+                </Combobox.Option>
+              );
+            })}
           </Combobox.Options>
           <Combobox.Empty />
         </Combobox.Content>

diff --git a/packages/react/src/modules/ms-teams/components/MsTeamsChannelCombobox/styles.css b/packages/react/src/modules/ms-teams/components/MsTeamsChannelCombobox/styles.css
@@ -16,6 +16,10 @@
   max-height: 144px !important;
 }
 
+.rtk-combobox__search {
+  font-family: var(--rtk-font-family-sanserif) !important;
+}
+
 /*
  * MsTeamsTeamCombobox
  * Prevents team name from overflowing input box.

diff --git a/packages/react/src/modules/ms-teams/utils.ts b/packages/react/src/modules/ms-teams/utils.ts
@@ -1,27 +1,6 @@
-const SEARCHABLE_OPTION_DELIMITER = "::::";
-
-type Option = {
-  label: string;
-  value: string;
-};
-
 export const sortByDisplayName = <T extends { displayName: string }>(
   items: T[],
 ) =>
   items.sort((a, b) =>
     a.displayName.toLowerCase().localeCompare(b.displayName.toLowerCase()),
   );
-
-// Telegraph Combobox only supports searching by value, so we use this utility to make teams and channels searchable by their labels
-export const toLabelSearchableOption = (option: Option): Option => ({
-  value: `${option.label}${SEARCHABLE_OPTION_DELIMITER}${option.value}`,
-  label: option.label,
-});
-
-export const fromLabelSearchableOption = (option: Option): Option => {
-  const [_, value] = option.value.split(SEARCHABLE_OPTION_DELIMITER);
-  return {
-    value: value!,
-    label: option.label,
-  };
-};