React SDK: Fix Radix primitives (#312)

* Cleanup Radix dependencies

* Add changeset

* Revert the radix select update

* Adjust select implementation

* Revert to v1

* Use Radix v2

* Fix org switcher fallback

* Remove beta classname

* Add a comment to explain the change

* Fix chevron rotate issue

* Include border in label position

---------

Co-authored-by: ikovic <kovic.ivan@gmail.com>

Author: kaspermroz

.changeset/rare-pans-sneeze.md

@@ -0,0 +1,6 @@
+---
+"@slashid/react-primitives": patch
+"@slashid/react": patch
+---
+
+Cleanup Radix dependencies

packages/react-primitives/package.json

@@ -62,7 +62,7 @@
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.4",
-    "@radix-ui/react-select": "^1.1.2",
+    "@radix-ui/react-select": "^2.1.3",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.1",
     "@vanilla-extract/css": "^1.9.2",

packages/react-primitives/src/components/dropdown/dropdown.css.ts

@@ -3,9 +3,8 @@ import { publicVariables, theme } from "../../theme/theme.css";
 
 export const trigger = style({
   display: "flex",
-  alignItems: "flex-start",
-  justifyContent: "center",
-  flexDirection: "column",
+  alignItems: "end",
+  justifyContent: "space-between",
   width: "100%",
   minWidth: theme.input.minWidth,
   height: theme.input.height,
@@ -38,6 +37,9 @@ export const label = style({
   fontSize: theme.font.size.xs,
   fontWeight: theme.font.weight.semibold,
   color: publicVariables.input.label.color,
+  position: "absolute",
+  top: 12,
+  left: 17,
 });
 
 export const input = style({
@@ -83,13 +85,15 @@ export const item = style({
   },
 });
 
-export const icon = style({
+export const iconWrapper = style({
   position: "absolute",
   right: "16px",
-  zIndex: 0,
+  top: "22px",
+});
 
+export const icon = style({
   selectors: {
-    [`${trigger}[data-state='open'] > &`]: {
+    [`${trigger}[data-state='open']  &`]: {
       transform: "rotate(180deg)",
     },
   },
@@ -100,3 +104,7 @@ export const selectedIcon = style({
   marginLeft: "auto",
   justifySelf: "flex-end",
 });
+
+export const wrapper = style({
+  position: "relative",
+});

packages/react-primitives/src/components/dropdown/index.tsx

@@ -24,6 +24,7 @@ type Props = {
   type?: "text" | "email" | "tel";
   items: Item[];
   defaultValue?: string;
+  placeholder?: string;
   onChange: (value: string) => void;
   disabled?: boolean;
   contentProps?: Select.SelectContentProps;
@@ -33,6 +34,7 @@ export const Dropdown: React.FC<Props> = ({
   label,
   items,
   defaultValue,
+  placeholder,
   onChange,
   className,
   contentProps,
@@ -48,7 +50,15 @@ export const Dropdown: React.FC<Props> = ({
   );
 
   return (
-    <div className="sid-dropdown">
+    <div className={clsx("sid-dropdown", styles.wrapper)}>
+      {/**
+       * The label needs to live outside of the Select.Root, this ensures
+       * correct Select behaviour in Safari (iOS). It's still positioned absolutely,
+       * so it appears as part of the Select in the UI.
+       */}
+      <label className={clsx("sid-dropdown__trigger__label", styles.label)}>
+        {label}
+      </label>
       <Select.Root
         disabled={disabled}
         onValueChange={onSelectCallback}
@@ -57,15 +67,14 @@ export const Dropdown: React.FC<Props> = ({
         <Select.Trigger
           className={clsx("sid-dropdown__trigger", styles.trigger, className)}
         >
-          <label className={clsx("sid-dropdown__trigger__label", styles.label)}>
-            {label}
-          </label>
           <div className={clsx("sid-dropdown__trigger__input", styles.input)}>
-            <Select.Value />
+            <Select.Value placeholder={placeholder} />
           </div>
-          <ChevronDown
-            className={clsx("sid-dropdown__trigger__icon", styles.icon)}
-          />
+          <Select.Icon className={styles.iconWrapper}>
+            <ChevronDown
+              className={clsx("sid-dropdown__trigger__icon", styles.icon)}
+            />
+          </Select.Icon>
         </Select.Trigger>
 
         <Select.Content

packages/react/package.json

@@ -50,11 +50,6 @@
     "publish:yalc": "node ./yalc.next.js && pnpm build && yalc publish"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-dialog": "^1.0.4",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.0.1",
     "@vanilla-extract/css": "^1.9.2",
     "@vanilla-extract/dynamic": "^2.0.3",
     "@vanilla-extract/recipes": "^0.3.0",

packages/react/src/components/organization-switcher/index.tsx

@@ -20,10 +20,10 @@ const DefaultFallback = () => {
 
   return (
     <Dropdown
-      defaultValue={""}
+      defaultValue={"-"}
       disabled={true}
       className={className}
-      items={[{ label: "-", value: "" }]}
+      items={[{ label: "-", value: "-" }]}
       onChange={noop}
       label={text["org.switcher.label"]}
     />