fix(sdk): invite modal crash (#675)

* chore: update apsara version * chore: remove Select.Label component
raystack · Jul 17, 2024 · 77b2f04 · 77b2f04
1 parent 82de892
commit 77b2f04
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 23 deletions.
diff --git a/sdks/js/packages/core/package.json b/sdks/js/packages/core/package.json
@@ -79,7 +79,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
-    "@raystack/apsara": "^0.16.0",
+    "@raystack/apsara": "^0.16.2",
     "@tanstack/react-router": "0.0.1-beta.194",
     "axios": "^1.5.0",
     "class-variance-authority": "^0.7.0",

diff --git a/sdks/js/packages/core/react/components/organization/members/invite.tsx b/sdks/js/packages/core/react/components/organization/members/invite.tsx
@@ -206,11 +206,9 @@ export const InviteMember = () => {
                         >
                           <Select.Group>
                             {!roles.length && (
-                              <Select.Label
-                                style={{ color: 'var(--foreground-base)' }}
-                              >
+                              <Text className={styles.noSelectItem}>
                                 No roles available
-                              </Select.Label>
+                              </Text>
                             )}
                             {roles.map(role => (
                               <Select.Item value={role.id} key={role.id}>
@@ -250,11 +248,9 @@ export const InviteMember = () => {
                         >
                           <Select.Group>
                             {!teams.length && (
-                              <Select.Label
-                                style={{ color: 'var(--foreground-base)' }}
-                              >
+                              <Text className={styles.noSelectItem}>
                                 No teams available
-                              </Select.Label>
+                              </Text>
                             )}
                             {teams.map(t => (
                               <Select.Item value={t.id} key={t.id}>

diff --git a/sdks/js/packages/core/react/components/organization/organization.module.css b/sdks/js/packages/core/react/components/organization/organization.module.css
@@ -25,3 +25,8 @@
   background: var(--background-base-hover);
   color: var(--foreground-base);
 }
+
+.noSelectItem {
+  color: var(--foreground-muted);
+  padding: var(--pd-8);
+}
diff --git a/sdks/js/packages/core/react/components/organization/teams/members/invite.tsx b/sdks/js/packages/core/react/components/organization/teams/members/invite.tsx
@@ -218,11 +218,9 @@ export const InviteTeamMembers = () => {
                         <Select.Viewport style={{ maxHeight: '300px' }}>
                           <Select.Group>
                             {!invitableUser.length && (
-                              <Select.Label
-                                style={{ color: 'var(--foreground-base)' }}
-                              >
+                              <Text className={styles.noSelectItem}>
                                 No member to invite
-                              </Select.Label>
+                              </Text>
                             )}
                             {invitableUser.map(user => (
                               <Select.Item value={user.id} key={user.id}>
@@ -257,11 +255,9 @@ export const InviteTeamMembers = () => {
                       >
                         <Select.Group>
                           {!roles.length && (
-                            <Select.Label
-                              style={{ color: 'var(--foreground-base)' }}
-                            >
+                            <Text className={styles.noSelectItem}>
                               No roles available
-                            </Select.Label>
+                            </Text>
                           )}
                           {roles.map(role => (
                             <Select.Item value={role.id} key={role.id}>

diff --git a/sdks/js/packages/core/react/components/organization/teams/members/members.module.css b/sdks/js/packages/core/react/components/organization/teams/members/members.module.css
@@ -19,3 +19,8 @@
 .inviteDropdownItem:hover {
   background-color: var(--background-base-hover);
 }
+
+.noSelectItem {
+  color: var(--foreground-muted);
+  padding: var(--pd-8);
+}
diff --git a/sdks/js/pnpm-lock.yaml b/sdks/js/pnpm-lock.yaml