feat(core): guard service (#9816)

packages/frontend/component/src/ui/button/button.css.ts

@@ -39,7 +39,6 @@ export const button = style({
   outline: 0,
   borderRadius: 8,
   transition: 'all .3s',
-  cursor: 'pointer',
   ['WebkitAppRegion' as string]: 'no-drag',
 
   // hover layer
@@ -169,6 +168,10 @@ export const button = style({
       opacity: 0.5,
     },
 
+    '&:not([data-disabled])': {
+      cursor: 'pointer',
+    },
+
     // default keyboard focus style
     '&:focus-visible::after': {
       content: '""',

packages/frontend/component/src/ui/dnd/drop-target.ts

@@ -316,7 +316,11 @@ export const useDropTarget = <D extends DNDData = DNDData>(
 
         // external data is only available in drop event thus
         // this is the only case for getAdaptedEventArgs
-        const args = getAdaptedEventArgs(_args, options.fromExternalData, true);
+        const args = {
+          ...getAdaptedEventArgs(_args, options.fromExternalData, true),
+          treeInstruction: extractInstruction(_args.self.data),
+          closestEdge: extractClosestEdge(_args.self.data),
+        };
         if (
           isExternalDrag(_args) &&
           options.fromExternalData &&
@@ -329,11 +333,7 @@ export const useDropTarget = <D extends DNDData = DNDData>(
         }
 
         if (args.location.current.dropTargets[0]?.element === element) {
-          options.onDrop?.({
-            ...args,
-            treeInstruction: extractInstruction(args.self.data),
-            closestEdge: extractClosestEdge(args.self.data),
-          } as DropTargetDropEvent<D>);
+          options.onDrop?.(args as DropTargetDropEvent<D>);
         }
       },
       getData: (args: DropTargetGetFeedback<D>) => {

packages/frontend/component/src/ui/menu/styles.css.ts

@@ -51,7 +51,7 @@ export const menuItem = style({
     '&.block': {
       maxWidth: '100%',
     },
-    '&[data-disabled]': {
+    '&[data-disabled], &.disabled': {
       vars: {
         [iconColor]: cssVarV2('icon/disable'),
         [labelColor]: cssVarV2('text/secondary'),

packages/frontend/component/src/ui/menu/use-menu-item.tsx

@@ -16,13 +16,15 @@ export const useMenuItem = <T extends MenuItemProps>({
   checked,
   selected,
   block,
+  disabled,
   ...otherProps
 }: T) => {
   const className = clsx(
     styles.menuItem,
     {
-      danger: type === 'danger',
-      warning: type === 'warning',
+      danger: disabled ? false : type === 'danger',
+      warning: disabled ? false : type === 'warning',
+      disabled,
       checked,
       selected,
       block,

packages/frontend/component/src/ui/property/property.css.ts

@@ -133,10 +133,12 @@ export const propertyValueContainer = style({
     '&[data-readonly="false"][data-hoverable="true"]': {
       cursor: 'pointer',
     },
-    '&[data-readonly="false"][data-hoverable="true"]:is(:hover, :focus-within)':
-      {
-        backgroundColor: cssVarV2('layer/background/hoverOverlay'),
-      },
+    '&[data-readonly="true"][data-hoverable="true"]': {
+      cursor: 'default',
+    },
+    '&[data-hoverable="true"]:is(:hover, :focus-within)': {
+      backgroundColor: cssVarV2('layer/background/hoverOverlay'),
+    },
   },
 });
 

packages/frontend/component/src/ui/radio/radio.tsx

@@ -83,6 +83,7 @@ export const RadioGroup = memo(function RadioGroup({
   indicatorStyle,
   iconMode,
   onChange,
+  disabled,
 }: RadioProps) {
   const animationTImerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const finalItems = useMemo(() => {
@@ -158,6 +159,7 @@ export const RadioGroup = memo(function RadioGroup({
       className={clsx(styles.radioButtonGroup, className)}
       style={finalStyle}
       data-icon-mode={iconMode}
+      disabled={disabled}
     >
       {finalItems.map(({ customRender, ...item }, index) => {
         const testId = item.testId ? { 'data-testid': item.testId } : {};
@@ -179,6 +181,7 @@ export const RadioGroup = memo(function RadioGroup({
             style={style}
             {...testId}
             {...item.attrs}
+            disabled={disabled}
           >
             <RadixRadioGroup.Indicator
               forceMount

packages/frontend/component/src/ui/radio/styles.css.ts

@@ -25,7 +25,7 @@ export const radioButton = style({
     '&[data-state="checked"]': {
       color: cssVarV2('switch/fontColor/primary'),
     },
-    '&[data-state="unchecked"]:hover': {
+    '&[data-state="unchecked"]:hover:not([disabled])': {
       background: cssVarV2('switch/buttonBackground/hover'),
     },
     '[data-icon-mode=true] &': {