@moises.ai/design-system 4.19.6 → 4.19.8

package/src/components/Select/Select.stories.jsx

@@ -1,6 +1,8 @@
 import { Flex } from '@radix-ui/themes'
 import { Select } from './Select'
 import { useState } from 'react'
+import { LockIcon, StarIcon } from '../../icons'
+import { GearIcon } from '@radix-ui/react-icons'
 
 export default {
   title: 'Components/Select',
@@ -41,6 +43,8 @@ import { Select } from '@moises.ai/design-system'
   items: {
     value: string, // Value of the option (required)
     label: string, // Label of the option (required)
+    disabled?: boolean, // Disables this option (still visible in the menu)
+    rightIcon?: ReactNode, // Optional icon displayed on the right side
     aiDetected?: boolean, // Shows ✦ icon before label if true (optional)
     extra?: string | ReactNode, // Extra text or element after label (optional)
   }[], // List of items to display in the select
@@ -52,11 +56,13 @@ import { Select } from '@moises.ai/design-system'
   size?: '1' | '2' | '3', // Size variant of the select (default: '2')
   variant?: 'soft' | 'ghost', // Visual style variant (default: 'soft')
   disabled?: boolean, // Whether the select is disabled (default: false)
+  allowClickWhenDisabled?: boolean, // Keeps disabled look, opens menu with disabled options, fires onFocus on open (e.g. paywall)
   className?: string, // Additional CSS class name
   readOnly?: boolean, // Whether the select is read-only (default: false)
   maxHeight?: string, // Max height of the dropdown (e.g. '200px')
   showSelectIndicator?: boolean, // Show the default Radix select indicator (default: false)
   maxWidth?: string, // Max width of the select (e.g. '300px')
+  onFocus?: () => void, // Called when opening while disabled + allowClickWhenDisabled
 }
 \`\`\`
       `,
@@ -81,6 +87,12 @@ import { Select } from '@moises.ai/design-system'
       description: 'Whether the select is disabled',
       defaultValue: false,
     },
+    allowClickWhenDisabled: {
+      control: 'boolean',
+      description:
+        'When true with disabled, keeps disabled look, opens menu with disabled options, and fires onFocus on open',
+      defaultValue: false,
+    },
     showSelectIndicator: {
       control: 'boolean',
       description: 'Whether to show the default Radix select indicator',
@@ -191,6 +203,64 @@ export const Disabled = {
   decorators: [withFlexContainer],
 }
 
+export const AllowClickWhenDisabled = {
+  render: () => {
+    const [lastAction, setLastAction] = useState('none yet')
+
+    return (
+      <Flex direction="column" gap="2" width="300px">
+        <Select
+          title="Instrument"
+          info="Looks disabled, opens menu and fires onFocus"
+          defaultValue="bass"
+          size="2"
+          disabled
+          allowClickWhenDisabled
+          items={[
+            { value: 'bass', label: 'Bass' },
+            { value: 'guitar', label: 'Guitar' },
+            { value: 'piano', label: 'Piano' },
+          ]}
+          onFocus={() => {
+            setLastAction('activated (focus)')
+            alert('paywall opened')
+          }}
+        />
+        <div style={{ fontSize: 14, color: '#4b5563' }}>
+          Last action: {lastAction}
+        </div>
+      </Flex>
+    )
+  },
+}
+
+export const WithRightIcon = {
+  args: {
+    title: 'Instrument',
+    defaultValue: 'bass',
+    size: '2',
+    items: [
+      {
+        value: 'bass',
+        label: 'Bass',
+        rightIcon: <LockIcon width={14} height={14} />,
+      },
+      {
+        value: 'guitar',
+        label: 'Guitar',
+        rightIcon: <StarIcon width={14} height={14} />,
+      },
+      {
+        value: 'piano',
+        label: 'Piano',
+        rightIcon: <GearIcon width={14} height={14} />,
+      },
+      { value: 'drums', label: 'Drums' },
+    ],
+  },
+  decorators: [withFlexContainer],
+}
+
 export const DisabledGhost = {
   args: {
     title: 'Instrument',

package/src/components/TextField/TextField.jsx

@@ -12,6 +12,7 @@ export const TextField = ({
   className,
   disabled,
   readOnly,
+  allowClickWhenDisabled = false,
   size = '2',
   Icon,
   focusRing = false,
@@ -23,6 +24,7 @@ export const TextField = ({
   aiDetected = false,
   textAlign = 'left',
   style,
+  onFocus,
   ...props
 }) => {
   // legacy Icon prop is kept for backwards compatibility.
@@ -31,6 +33,8 @@ export const TextField = ({
     (Icon ? <Icon width={16} height={16} className={styles.icon} /> : null)
 
   const chars = String(value ?? '').length
+  const isDisabled = Boolean(disabled)
+  const isDisabledClickable = isDisabled && Boolean(allowClickWhenDisabled)
 
   return (
     <Flex direction="column" width="100%" height="100%" gap="1">
@@ -42,39 +46,61 @@ export const TextField = ({
           {info && <TooltipWithInfoIcon content={info} />}
         </Flex>
       )}
-      <TextFieldRadix.Root
-        size={size}
-        value={value}
-        onChange={onChange}
-        placeholder={placeholder}
-        className={classNames(styles.TextField, className, {
-          [styles.Disabled]: disabled,
-          [styles.ReadOnly]: readOnly,
-          [styles.focusRing]: focusRing || error,
-          [styles.errorText]: error,
-          [styles[`size${size}`]]: size,
-          [styles.alignCenter]: textAlign === 'center',
-          [styles.alignLeft]: textAlign === 'left',
-        })}
-        style={{
-          ...(aiDetected && { '--ai-chars': chars }),
-          ...style,
-        }}
-        readOnly={readOnly}
-        disabled={disabled}
-        autoFocus={autoFocus}
-        {...props}
-      >
-        {resolvedStartSlot && (
-          <TextFieldRadix.Slot>{resolvedStartSlot}</TextFieldRadix.Slot>
-        )}
-        {aiDetected && (
-          <span className={styles.aiDetected} aria-hidden>
-            <span className={styles.aiDetectedMark}>✦</span>
-          </span>
+      <div className={styles.fieldWrapper}>
+        <TextFieldRadix.Root
+          size={size}
+          value={value}
+          onChange={isDisabledClickable ? undefined : onChange}
+          placeholder={placeholder}
+          className={classNames(styles.TextField, className, {
+            [styles.Disabled]: isDisabled,
+            [styles.ReadOnly]: readOnly && !isDisabled,
+            [styles.focusRing]: focusRing || error,
+            [styles.errorText]: error,
+            [styles[`size${size}`]]: size,
+            [styles.alignCenter]: textAlign === 'center',
+            [styles.alignLeft]: textAlign === 'left',
+          })}
+          style={{
+            ...(aiDetected && { '--ai-chars': chars }),
+            ...style,
+          }}
+          autoFocus={autoFocus}
+          {...props}
+          onFocus={isDisabledClickable ? undefined : onFocus}
+          readOnly={readOnly}
+          disabled={isDisabled}
+        >
+          {resolvedStartSlot && (
+            <TextFieldRadix.Slot>{resolvedStartSlot}</TextFieldRadix.Slot>
+          )}
+          {aiDetected && (
+            <span className={styles.aiDetected} aria-hidden>
+              <span className={styles.aiDetectedMark}>✦</span>
+            </span>
+          )}
+          {endSlot && <div className={styles.endSlot}>{endSlot}</div>}
+        </TextFieldRadix.Root>
+        {isDisabledClickable && (
+          <button
+            type="button"
+            className={styles.disabledClickOverlay}
+            aria-label={title || placeholder || 'Activate'}
+            tabIndex={0}
+            onPointerDown={(event) => {
+              // Prevent focus so dialogs/alerts don't restore focus and re-trigger.
+              event.preventDefault()
+              onFocus?.(event)
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault()
+                onFocus?.(event)
+              }
+            }}
+          />
         )}
-        {endSlot && <div className={styles.endSlot}>{endSlot}</div>}
-      </TextFieldRadix.Root>
+      </div>
       {secondaryText && (
         <Text
           size="1"

package/src/components/TextField/TextField.module.css

@@ -77,6 +77,27 @@
   cursor: default;
 }
 
+.fieldWrapper {
+  position: relative;
+  width: 100%;
+}
+
+.disabledClickOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: inherit;
+  background: transparent;
+  cursor: default;
+}
+
+.disabledClickOverlay:focus {
+  outline: none;
+}
+
 .ReadOnly {
   background-color: var(--neutral-alpha-2) !important;
   color: var(--neutral-12);

package/src/components/TextField/TextField.stories.jsx

@@ -66,6 +66,15 @@ const MyComponent = () => (
         defaultValue: { summary: 'false' },
       },
     },
+    allowClickWhenDisabled: {
+      control: 'boolean',
+      description:
+        'When true with disabled, keeps the disabled look and blocks typing, but still allows focus (e.g. paywall via onFocus)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
     readOnly: {
       control: 'boolean',
       description: 'Whether the input is read-only',
@@ -238,6 +247,32 @@ export const Disabled = {
   },
 }
 
+export const AllowClickWhenDisabled = {
+  render: (args) => {
+    const [lastAction, setLastAction] = React.useState('none yet')
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <TextField
+          {...args}
+          disabled
+          allowClickWhenDisabled
+          value="Looks disabled, click to activate"
+          onFocus={() => {
+            setLastAction('activated (focus)')
+            action('activated (focus)')()
+            alert('paywall opened')
+          }}
+        />
+        <div style={{ fontSize: 14, color: '#4b5563' }}>Last action: {lastAction}</div>
+      </div>
+    )
+  },
+  args: {
+    ...Default.args,
+  },
+}
+
 export const ReadOnly = {
   args: {
     ...Default.args,

package/src/icons/ArrowRightIcon.jsx

@@ -5,7 +5,7 @@ export const ArrowRightIcon = ({
   ...props
 }) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" {...props} aria-label="Arrow Right Icon">
-  <path d="M13.1429 19L20 12L13.1429 5M18.8571 12L4 12" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M13.1429 19L20 12L13.1429 5M18.8571 12L4 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
 </svg>
 )
 

package/src/lib/menu/Menu.module.css

@@ -137,10 +137,9 @@
   }
 }
 
-.menuItem[data-disabled] {
+.menuItem[data-disabled],
+.menuItemDisabledClickable {
   color: var(--neutral-alpha-7);
-  cursor: not-allowed;
-  pointer-events: none;
 
   & .label,
   & .secondaryTextBottom,
@@ -159,6 +158,15 @@
   }
 }
 
+.menuItem[data-disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.menuItemDisabledClickable {
+  cursor: pointer;
+}
+
 .menuSeparator {
   height: 1px;
   background-color: var(--neutral-alpha-3);
@@ -298,6 +306,10 @@
   background-color: var(--neutral-alpha-3);
 }
 
+.menuItem.menuItemDisabledClickable[data-highlighted] {
+  background-color: transparent;
+}
+
 .menuSubContent {
   min-width: 242px;
 }

package/src/lib/menu/renderItem.jsx

@@ -18,6 +18,11 @@ export const createRenderItem = (MenuPrimitives) => {
     closeMenu,
     showSelectedItemBackground = true,
   ) => {
+    const isDisabled = Boolean(opt.disabled)
+    const allowClickWhenDisabled = Boolean(opt.allowClickWhenDisabled)
+    const isRadixDisabled = isDisabled && !allowClickWhenDisabled
+    const isDisabledClickable = isDisabled && allowClickWhenDisabled
+
     switch (opt.type) {
       case 'custom':
         return (
@@ -27,13 +32,17 @@ export const createRenderItem = (MenuPrimitives) => {
               styles.menuItem,
               styles.menuCustomRender,
               styles[`menuItem-size-${size}`],
+              {
+                [styles.menuItemDisabledClickable]: isDisabledClickable,
+              },
             )}
             onSelect={(event) => {
               if (!closeOnSelect) {
                 event.preventDefault()
               }
             }}
-            disabled={opt.disabled}
+            disabled={isRadixDisabled}
+            aria-disabled={isDisabledClickable || undefined}
             asChild
           >
             {opt.customRender(closeMenu)}
@@ -104,8 +113,9 @@ export const createRenderItem = (MenuPrimitives) => {
               styles.menuItem,
               styles[`menuItem-size-${size}`],
               {
-                [styles.red]: opt.color === 'red' && !opt.disabled,
-                [styles.cyan]: opt.color === 'cyan' && !opt.disabled,
+                [styles.red]: opt.color === 'red' && !isDisabled,
+                [styles.cyan]: opt.color === 'cyan' && !isDisabled,
+                [styles.menuItemDisabledClickable]: isDisabledClickable,
               },
             )}
             onSelect={(event) => {
@@ -115,7 +125,8 @@ export const createRenderItem = (MenuPrimitives) => {
               opt.onClick?.()
               onSelectionChange?.(opt)
             }}
-            disabled={opt.disabled}
+            disabled={isRadixDisabled}
+            aria-disabled={isDisabledClickable || undefined}
           >
             {opt.icon && <span className={styles.leftIcon}>{opt.icon}</span>}
             <div className={styles.labelContainer}>
@@ -163,11 +174,13 @@ export const createRenderItem = (MenuPrimitives) => {
                 [styles.menuItemSelected]:
                   opt.checked && showSelectedItemBackground,
                 [styles[`menuItem-size-${size}`]]: size,
-                [styles.red]: opt.color === 'red' && !opt.disabled,
-                [styles.cyan]: opt.color === 'cyan' && !opt.disabled,
+                [styles.red]: opt.color === 'red' && !isDisabled,
+                [styles.cyan]: opt.color === 'cyan' && !isDisabled,
+                [styles.menuItemDisabledClickable]: isDisabledClickable,
               },
             )}
-            disabled={opt.disabled}
+            disabled={isRadixDisabled}
+            aria-disabled={isDisabledClickable || undefined}
           >
             <span className={styles.checkboxIndicatorSlot}>
               <MenuPrimitives.ItemIndicator