property toggle group

Author: softmarshmallow

Diff for: packages/editor-ui-property/index.ts

@@ -6,6 +6,7 @@ export * from "./property-input-checkbox";
 export * from "./property-input-slider";
 export * from "./property-input-color";
 export * from "./property-input-select";
+export * from "./property-input-toggle-group";
 export * from "./property-line";
 export * from "./property-lines";
 export * from "./layout";

Diff for: packages/editor-ui-property/package.json

@@ -14,7 +14,8 @@
         "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-icons": "^1.0.3",
         "@radix-ui/react-select": "^1.2.0",
-        "@radix-ui/react-slider": "^0.0.11"
+        "@radix-ui/react-slider": "^0.0.11",
+        "@radix-ui/react-toggle-group": "^1.0.4"
     },
     "peerDependencies": {
         "@emotion/react": "^11.10.5",
@@ -26,6 +27,9 @@
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
         "@types/react": "18.2.58",
-        "react": "^18.2.0"
+        "autoprefixer": "^10.0.1",
+        "postcss": "^8",
+        "react": "^18.2.0",
+        "tailwindcss": "^3.3.0"
     }
 }

Diff for: packages/editor-ui-property/property-input-select/property-input-select.tsx

@@ -19,7 +19,7 @@ interface SelectInputProps {
   readonly?: boolean;
   disabled?: boolean;
 
-  onChange: (value: string) => void;
+  onChange?: (value: string) => void;
   onClick?: () => void;
 
   // aria
@@ -55,7 +55,7 @@ export function PropertySelectInput({
     <Select.Root
       onValueChange={(v) => {
         setValue(v);
-        onChange(v);
+        onChange?.(v);
       }}
       value={value}
       disabled={disabled}
@@ -70,7 +70,11 @@ export function PropertySelectInput({
           <ChevronDownIcon />
         </Select.Icon>
       </StyledTrigger>
-      <Select.Portal>
+      <Select.Portal
+        style={{
+          zIndex: 1000,
+        }}
+      >
         <SelectContent>
           <SelectScrollUpButton>
             <ChevronUpIcon />

Diff for: packages/editor-ui-property/property-input-toggle-group/index.ts

@@ -0,0 +1 @@
+export * from "./property-input-toggle-group";

Diff for: packages/editor-ui-property/property-input-toggle-group/property-input-toggle-group.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import * as ToggleGroup from "@radix-ui/react-toggle-group";
+
+export function PropertyInputToggleGroup({
+  ariaLabel,
+  defaultValue,
+  value,
+  options,
+  onValueChange,
+}: {
+  ariaLabel?: string;
+  defaultValue?: string;
+  value?: string;
+  options?: {
+    value: string;
+    ariaLabel?: string;
+    icon: React.ReactNode;
+  }[];
+  onValueChange?: (value: string) => void;
+}) {
+  return (
+    <ToggleGroup.Root
+      className="flex gap-2"
+      type="single"
+      defaultValue={defaultValue}
+      aria-label={ariaLabel}
+      value={value}
+      onValueChange={onValueChange}
+    >
+      {options?.map((option) => {
+        return (
+          <ToggleGroup.Item
+            key={option.value}
+            className="p-2 rounded-md data-[state='on']:bg-white/10"
+            value={option.value}
+            aria-label={option.ariaLabel}
+          >
+            {option.icon}
+          </ToggleGroup.Item>
+        );
+      })}
+    </ToggleGroup.Root>
+  );
+}