@utilitywarehouse/hearth-react-native 0.16.2 → 0.17.0

package/src/components/IconButton/IconButton.figma.tsx

@@ -1,16 +1,8 @@
 import figma from '@figma/code-connect';
-import IconButton from './IconButton';
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import { IconButton } from '../';
 
 figma.connect(IconButton, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=90%3A1455', {
   props: {
-    // These props were automatically mapped based on your linked code:
     disabled: figma.enum('State', {
       Disabled: true,
     }),
@@ -18,38 +10,36 @@ figma.connect(IconButton, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?n
       'SM-32': 'sm',
       'MD-48': 'md',
     }),
+    colorScheme: figma.enum('Color Scheme', {
+      Affirmative: 'affirmative',
+      Destructive: 'destructive',
+      Functional: 'functional',
+      Highlight: 'highlight',
+    }),
     loading: figma.enum('State', {
       Loading: true,
     }),
-    focusable: figma.enum('State', {
-      Focus: true,
-    }),
-    'aria-disabled': figma.enum('State', {
-      Disabled: true,
+    icon: figma.enum('Size', {
+      'SM-32': figma.instance('Icon-20'),
+      'MD-48': figma.instance('Icon-24'),
     }),
-    colorScheme: figma.enum('Color Scheme', {
-      Affirmative: 'affirmative',
-      Destructive: 'destructive',
+    variant: figma.enum('Variant', {
+      Emphasis: 'emphasis',
+      Solid: 'solid',
+      Outline: 'outline',
+      Ghost: 'ghost',
     }),
-    // No matching props could be found for these Figma properties:
-    // "icon24": figma.instance('Icon-24'),
-    // "icon20": figma.instance('Icon-20'),
-    // "variant": figma.enum('Variant', {
-    //   "Emphasis": "emphasis",
-    //   "Solid": "solid",
-    //   "Outline": "outline",
-    //   "Ghost": "ghost"
-    // }),
-    // "inverted": figma.boolean('Inverted?')
+    inverted: figma.boolean('Inverted?'),
   },
   example: props => (
     <IconButton
       disabled={props.disabled}
       size={props.size}
-      icon={null}
-      loading={props.loading}
-      focusable={props.focusable}
+      variant={props.variant}
+      inverted={props.inverted}
       colorScheme={props.colorScheme}
+      loading={props.loading}
+      icon={props.icon}
     />
   ),
 });

package/src/components/IconContainer/IconContainer.figma.tsx

@@ -1,19 +1,11 @@
 import figma from '@figma/code-connect';
-import IconContainer from './IconContainer';
-
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+import { IconContainer } from '../';
 
 figma.connect(
   IconContainer,
   'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=5462%3A9728',
   {
     props: {
-      // These props were automatically mapped based on your linked code:
       size: figma.enum('Size', {
         'SM-32': 'sm',
         'MD-48': 'md',
@@ -33,13 +25,15 @@ figma.connect(
         Cashback: 'cashback',
         Highlight: 'highlight',
       }),
-      // No matching props could be found for these Figma properties:
-      // "icon20": figma.instance('Icon-20'),
-      // "icon24": figma.instance('Icon-24')
+      icon: figma.enum('Size', {
+        'SM-32': figma.instance('Icon-20'),
+        'MD-48': figma.instance('Icon-24'),
+        'LG-64': figma.instance('Icon-24'),
+      }),
     },
     example: props => (
       <IconContainer
-        icon={null}
+        icon={props.icon}
         size={props.size}
         radiusNone={props.radiusNone}
         variant={props.variant}

package/src/components/IndicatorIconButton/IndicatorIconButton.figma.tsx

@@ -0,0 +1,16 @@
+import figma from '@figma/code-connect';
+import { IndicatorIconButton } from '..';
+
+figma.connect(
+  IndicatorIconButton,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6778-10672&t=3uUSBVdxldgG5uz3-4',
+  {
+    props: {
+      indicator: figma.boolean('Indicator?'),
+      icon: figma.nestedProps('Icon Button/Unstyled', {
+        icon: figma.instance('Icon-24'),
+      }),
+    },
+    example: props => <IndicatorIconButton icon={props.icon.icon} indicator={props.indicator} />,
+  }
+);

package/src/components/Input/Input.docs.mdx

@@ -29,6 +29,8 @@ The input component is a text field that allows users to enter text, numbers, or
 - [Advanced Usage](#advanced-usage)
 - [Variants](#variants)
 - [Examples](#examples)
+  - [With Label and Helper Text](#with-label-and-helper-text)
+  - [With `prefix` and `suffix`](#with-prefix-and-suffix)
   - [With `FormField`](#with-formfield)
 - [Accessibility](#accessibility)
 
@@ -46,7 +48,7 @@ The input component is a text field that allows users to enter text, numbers, or
       <InputSlot>
         <InputIcon as={EmailMediumIcon} />
       </InputSlot>
-      <InputField placeholder="Placeholder" onChange={() => console.log('###')} />
+      <InputField placeholder="Placeholder" onChangeText={() => console.log('###')} />
     </Input>
   </Center>
 </UsageWrap>
@@ -95,8 +97,10 @@ all of the React Native [`View` props](https://reactnative.dev/docs/view).
 | required         | `boolean`                          | `true`      | Indicates that the input is required. **(Only to be used if the input has no children)**                                                                                |
 | leadingIcon      | `React.ComponentType`              | `-`         | The leading icon of the input. **(Only to be used if the input has no children)**                                                                                       |
 | trailingIcon     | `React.ComponentType`              | `-`         | The trailing icon of the input. **(Only to be used if the input has no children)**                                                                                      |
+| prefix           | `string \| React.ReactNode`        | `-`         | Content to display before the input field. **(Only to be used if the input has no children)**                                                                           |
+| suffix           | `string \| React.ReactNode`        | `-`         | Content to display after the input field. **(Only to be used if the input has no children)**                                                                            |
 | value            | `string`                           | `-`         | The value of the input. **(Only to be used if the input has no children)**                                                                                              |
-| onChange         | `function`                         | `-`         | Callback function that is triggered when the input value changes. **(Only to be used if the input has no children)** **(Only to be used if the input has no children)** |
+| onChangeText     | `function`                         | `-`         | Callback function that is triggered when the input value changes. **(Only to be used if the input has no children)** **(Only to be used if the input has no children)** |
 | onBlur           | `function`                         | `-`         | Callback function that is triggered when the input loses focus. **(Only to be used if the input has no children)**                                                      |
 | onFocus          | `function`                         | `-`         | Callback function that is triggered when the input gains focus. **(Only to be used if the input has no children)**                                                      |
 | placeholder      | `string`                           | `-`         | The placeholder text for the input. **(Only to be used if the input has no children)**                                                                                  |
@@ -113,7 +117,7 @@ The `InputField` inherits all of the React Native [`TextInput` props](https://re
 | ------------- | ---------------------- | -------- | ----------------------------------------------------------------- |
 | type          | `'text' \| 'password'` | `'text'` | The type of the input.                                            |
 | value         | `string`               | `-`      | The value of the input.                                           |
-| onChange      | `function`             | `-`      | Callback function that is triggered when the input value changes. |
+| onChangeText  | `function`             | `-`      | Callback function that is triggered when the input value changes. |
 | onBlur        | `function`             | `-`      | Callback function that is triggered when the input loses focus.   |
 | onFocus       | `function`             | `-`      | Callback function that is triggered when the input gains focus.   |
 | placeholder   | `string`               | `-`      | The placeholder text for the input.                               |
@@ -156,13 +160,12 @@ import {
   EyeOffMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 import { useState } from 'react';
-import { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native';
 
 const AdvancedExample = () => {
   const [value, setValue] = useState<string>('');
   const [fieldType, setFieldType] = useState<'password' | 'text'>('password');
-  const handleChange = (e: NativeSyntheticEvent<TextInputChangeEventData>) => {
-    setValue(e.nativeEvent.text);
+  const handleChange = (text: string) => {
+    setValue(text);
   };
   const handleToggleFieldType = () => {
     setFieldType(fieldType === 'password' ? 'text' : 'password');
@@ -173,7 +176,7 @@ const AdvancedExample = () => {
         <InputIcon as={EmailMediumIcon} />
       </InputSlot>
       <InputField
-        onChange={handleChange}
+        onChangeText={handleChange}
         type={fieldType}
         value={value}
         placeholder="Secret email address"
@@ -207,7 +210,7 @@ The `Input` component can be used with a label and helper text by passing the `l
     <Input
       label="Label"
       helperText="Helper text"
-      onChange={() => console.log('###')}
+      onChangeText={() => console.log('###')}
       placeholder="Placeholder"
     />
   </Center>
@@ -218,14 +221,14 @@ import { Input } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
   const [value, setValue] = useState('');
-  const handleChange = e => {
-    setValue(e.target.value);
+  const handleChange = text => {
+    setValue(text);
   };
   return (
     <Input
       label="Label"
       helperText="Helper text"
-      onChange={handleChange}
+      onChangeText={handleChange}
       value={value}
       placeholder="Placeholder"
     />
@@ -233,6 +236,43 @@ const MyComponent = () => {
 };
 ```
 
+## With `prefix` and `suffix`
+
+The `Input` component can be customised with `prefix` and `suffix` props to add content before or after the input field.
+
+<UsageWrap>
+  <Center>
+    <Input
+      label="Amount"
+      prefix="£"
+      suffix="GBP"
+      onChangeText={() => console.log('###')}
+      placeholder="0.00"
+    />
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Input } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [value, setValue] = useState('');
+  const handleChange = text => {
+    setValue(text);
+  };
+  return (
+    <Input
+      label="Amount"
+      prefix="£"
+      suffix="GBP"
+      onChangeText={handleChange}
+      value={value}
+      placeholder="0.00"
+    />
+  );
+};
+```
+
 ### With `FormField`
 
 The `Input` component can be used with the `FormField` component to create a custom input field.
@@ -241,7 +281,7 @@ For more information on the `FormField` componment view the [docs here](/docs/co
 <UsageWrap>
   <Center>
     <FormField label="Label" helperText="Helper text" helperPosition="bottom">
-      <Input onChange={() => console.log('###')} placeholder="Placeholder" />
+      <Input onChangeText={() => console.log('###')} placeholder="Placeholder" />
     </FormField>
   </Center>
 </UsageWrap>
@@ -251,12 +291,12 @@ import { FormField, Input } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
   const [value, setValue] = useState('');
-  const handleChange = e => {
-    setValue(e.target.value);
+  const handleChange = text => {
+    setValue(text);
   };
   return (
     <FormField label="Label" helperText="Helper text" helperPosition="bottom">
-      <Input onChange={handleChange} value={value} placeholder="Placeholder" />
+      <Input onChangeText={handleChange} value={value} placeholder="Placeholder" />
     </FormField>
   );
 };

package/src/components/Input/Input.figma.tsx

@@ -1,57 +1,123 @@
 import figma from '@figma/code-connect';
-import Input from './Input';
+import { Input } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
+const props = {
+  disabled: figma.enum('State', {
+    Disabled: true,
+  }),
+  readonly: figma.enum('State', {
+    'Read-only': true,
+  }),
+  placeholder: figma.enum('Value type', {
+    Placeholder: figma.string('Value'),
+  }),
+  value: figma.enum('Value type', {
+    Filled: figma.string('Value'),
+  }),
+  label: figma.string('Label'),
+  labelVariant: figma.enum('Label variant', {
+    Body: 'body',
+    Heading: 'heading',
+  }),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+  }),
+  validationStatus: figma.enum('State', {
+    Invalid: 'invalid',
+    Valid: 'valid',
+  }),
+  invalidText: figma.enum('State', {
+    Invalid: figma.string('Validation'),
+  }),
+  validText: figma.enum('State', {
+    Valid: figma.string('Validation'),
+  }),
+};
 
 figma.connect(Input, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2685%3A7021', {
   props: {
-    // These props were automatically mapped based on your linked code:
-    disabled: figma.enum('State', {
-      Disabled: true,
+    ...props,
+    required: figma.boolean('Optional?', {
+      true: false,
+      false: true,
     }),
-    readonly: figma.enum('State', {
-      'Read-only': true,
+    prefix: figma.boolean('Prefix?', {
+      true: figma.string('Prefix'),
     }),
-    focused: figma.boolean('Focus?'),
-    placeholder: figma.string('Suffix'),
-    focusable: figma.boolean('Focus?'),
-    hasTVPreferredFocus: figma.boolean('Focus?'),
-    'aria-disabled': figma.enum('State', {
-      Disabled: true,
+    suffix: figma.boolean('Suffix?', {
+      true: figma.string('Suffix'),
     }),
-    // No matching props could be found for these Figma properties:
-    // "helperText": figma.boolean('Helper text?'),
-    // "label": figma.string('Label'),
-    // "validation": figma.string('Validation'),
-    // "helperText": figma.string('Helper text'),
-    // "value": figma.string('Value'),
-    // "suffix": figma.boolean('Suffix?'),
-    // "prefix": figma.boolean('Prefix?'),
-    // "prefix": figma.string('Prefix'),
-    // "suffix": figma.string('Suffix'),
-    // "optional": figma.boolean('Optional?'),
-    // "valueType": figma.enum('Value type', {
-    //   "Empty": "empty",
-    //   "Placeholder": "placeholder",
-    //   "Filled": "filled"
-    // }),
-    // "labelVariant": figma.enum('Label variant', {
-    //   "Body": "body",
-    //   "Heading": "heading"
-    // })
   },
   example: props => (
     <Input
       disabled={props.disabled}
       readonly={props.readonly}
-      focused={props.focused}
       placeholder={props.placeholder}
-      focusable={props.focusable}
+      value={props.value}
+      label={props.label}
+      labelVariant={props.labelVariant}
+      helperText={props.helperText}
+      required={props.required}
+      prefix={props.prefix}
+      suffix={props.suffix}
+      validationStatus={props.validationStatus}
+      invalidText={props.invalidText}
+      validText={props.validText}
     />
   ),
 });
+
+figma.connect(
+  Input,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2251-10106&t=3uUSBVdxldgG5uz3-4',
+  {
+    props,
+    example: props => (
+      <Input
+        type="password"
+        disabled={props.disabled}
+        readonly={props.readonly}
+        placeholder={props.placeholder}
+        value={props.value}
+        label={props.label}
+        labelVariant={props.labelVariant}
+        helperText={props.helperText}
+        validationStatus={props.validationStatus}
+        invalidText={props.invalidText}
+        validText={props.validText}
+      />
+    ),
+  }
+);
+
+figma.connect(
+  Input,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2161-1311&t=3uUSBVdxldgG5uz3-4',
+  {
+    props: {
+      loading: figma.enum('State', {
+        Loading: true,
+      }),
+      placeholder: figma.enum('State', {
+        Placeholder: figma.string('Value'),
+      }),
+      value: figma.enum('State', {
+        Filled: figma.string('Value'),
+      }),
+      label: figma.string('Label'),
+      helperText: figma.boolean('Helper text?', {
+        true: figma.string('Helper text'),
+      }),
+    },
+    example: props => (
+      <Input
+        type="search"
+        loading={props.loading}
+        placeholder={props.placeholder}
+        value={props.value}
+        label={props.label}
+        helperText={props.helperText}
+      />
+    ),
+  }
+);

package/src/components/Input/Input.props.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from 'react';
+import React from 'react';
 import type { TextInputProps, ViewProps } from 'react-native';
 
 // Base props common to all input types
@@ -47,6 +48,8 @@ export interface InputWithChildrenProps extends InputBaseProps, ViewProps {
   onClear?: never;
   leadingIcon?: never;
   trailingIcon?: never;
+  prefix?: never;
+  suffix?: never;
 }
 
 // Base for inputs without children
@@ -55,6 +58,8 @@ interface InputWithoutChildrenBaseProps extends InputBaseProps, Omit<TextInputPr
   leadingIcon?: ComponentType;
   trailingIcon?: ComponentType;
   required?: boolean;
+  prefix?: string | number | React.ReactNode;
+  suffix?: string | number | React.ReactNode;
 }
 
 // Specific input types with their unique props
@@ -74,6 +79,8 @@ interface PasswordInputSpecificProps extends InputWithoutChildrenBaseProps {
   loading?: never;
   clearable?: never;
   onClear?: never;
+  prefix?: never;
+  suffix?: never;
 }
 
 interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
@@ -83,6 +90,8 @@ interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
   onClear?: () => void;
   showPasswordToggle?: never;
   format?: never;
+  prefix?: never;
+  suffix?: never;
 }
 
 // Union of all input types

package/src/components/Input/Input.tsx

@@ -10,6 +10,7 @@ import {
   SearchMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
 import { useTheme } from '../../hooks';
+import { BodyText } from '../BodyText';
 import { FormField, useFormFieldContext } from '../FormField';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
@@ -54,6 +55,8 @@ const Input = forwardRef<TextInput, InputProps>(
       helperIcon,
       validText,
       invalidText,
+      prefix,
+      suffix,
       ...props
     },
     ref
@@ -169,6 +172,15 @@ const Input = forwardRef<TextInput, InputProps>(
                   <InputIcon as={leadingIconComponent} />
                 </InputSlot>
               )}
+              {!!prefix && (
+                <InputSlot>
+                  {typeof prefix === 'string' || typeof prefix === 'number' ? (
+                    <BodyText>{prefix}</BodyText>
+                  ) : (
+                    prefix
+                  )}
+                </InputSlot>
+              )}
               <InputField
                 // @ts-expect-error - ref forwarding issue
                 ref={inputRef}
@@ -197,6 +209,15 @@ const Input = forwardRef<TextInput, InputProps>(
                   />
                 </InputSlot>
               )}
+              {!!suffix && (
+                <InputSlot>
+                  {typeof suffix === 'string' || typeof suffix === 'number' ? (
+                    <BodyText>{suffix}</BodyText>
+                  ) : (
+                    suffix
+                  )}
+                </InputSlot>
+              )}
               {!!trailingIcon && (
                 <InputSlot>
                   <InputIcon as={trailingIcon} />

package/src/components/Link/Link.figma.tsx

@@ -1,42 +1,35 @@
-import React from "react"
-import Link from "./Link"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { Link } from '../';
 
-/**
- * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from your code props to Figma properties.
- * You should check this is correct, and update the `example` function
- * to return the code example you'd like to see in Figma
- */
-
-figma.connect(
-  Link,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=163%3A562",
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      inverted: figma.boolean("Inverted?"),
-      disabled: figma.enum("State", {
-        Active: true,
+figma.connect(Link, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=163%3A562', {
+  props: {
+    inverted: figma.boolean('Inverted?'),
+    showIcon: figma.boolean('Icon right?', {
+      false: figma.boolean('Icon left?', {
+        false: false,
+      }),
+    }),
+    iconPosition: figma.boolean('Icon right?', {
+      false: figma.boolean('Icon left?', {
+        true: 'left',
       }),
-      showIcon: figma.boolean("Icon right?"),
-      focusable: figma.enum("State", {
-        Focus: true,
+    }),
+    text: figma.string('Text'),
+    icon: figma.boolean('Icon right?', {
+      true: figma.instance('Icon right-20'),
+      false: figma.boolean('Icon left?', {
+        true: figma.instance('Icon left-20'),
       }),
-      // No matching props could be found for these Figma properties:
-      // "iconLeft": figma.boolean('Icon left?'),
-      // "iconRight": figma.boolean('Icon right?'),
-      // "iconRight20": figma.instance('Icon right-20'),
-      // "iconLeft20": figma.instance('Icon left-20'),
-      // "text": figma.string('Text')
-    },
-    example: (props) => (
-      <Link
-        inverted={props.inverted}
-        disabled={props.disabled}
-        showIcon={props.showIcon}
-        focusable={props.focusable}
-      />
-    ),
+    }),
   },
-)
+  example: props => (
+    <Link
+      icon={props.icon}
+      showIcon={props.showIcon}
+      iconPosition={props.iconPosition}
+      inverted={props.inverted}
+    >
+      {props.text}
+    </Link>
+  ),
+});

package/src/components/List/List.context.ts

@@ -5,6 +5,8 @@ export const ListContext = createContext<{
   loading?: ListProps['loading'];
   disabled?: ListProps['disabled'];
   container?: ListProps['container'];
+  firstItemId?: string;
+  registerItem?: (id: string) => () => void;
 }>({});
 
 export const useListContext = () => {
@@ -12,7 +14,3 @@ export const useListContext = () => {
 
   return context;
 };
-
-export const ListFirstItemContext = createContext<boolean>(false);
-
-export const useListFirstItemContext = () => useContext(ListFirstItemContext);

package/src/components/List/List.docs.mdx

@@ -100,6 +100,7 @@ const MyComponent = () => (
 | heading               | `string`                                                                                          |          | The text to display in the heading of the list.              |
 | helperText            | `string`                                                                                          |          | The supporting text to display in the heading of the list.   |
 | headerTrailingContent | `ReactNode`                                                                                       |          | Optional content to display on the right side of the header. |
+| invalidText           | `string`                                                                                          |          | Validation error text to display in the heading of the list. |
 | loading               | `boolean`                                                                                         | `false`  | Whether to show the list items in loading state.             |
 | disabled              | `boolean`                                                                                         | `false`  | Whether to disable the list.                                 |
 
@@ -121,13 +122,17 @@ const MyComponent = () => (
 | truncateHeading    | `boolean`                | `false`  | Whether to truncate the heading text if it overflows.           |
 | truncateHelperText | `boolean`                | `false`  | Whether to truncate the helper text if it overflows.            |
 
+First-item styling is applied to the first rendered `ListItem` or `ListAction`. Wrapper components that render `null`
+are ignored, so conditional list items will not affect which item loses the top border.
+
 ### `ListAction`
 
-| Name     | Type         | Default | Description                                  |
-| -------- | ------------ | ------- | -------------------------------------------- |
-| heading  | `string`     |         | The text to display in the list action item. |
-| onPress  | `() => void` |         | A callback function to be called             |
-| disabled | `boolean`    | `false` | Whether to disable the list action item.     |
+| Name     | Type         | Default | Description                                                            |
+| -------- | ------------ | ------- | ---------------------------------------------------------------------- |
+| heading  | `string`     |         | The text to display in the list action item.                           |
+| onPress  | `() => void` |         | A callback function to be called when the list action item is pressed. |
+| disabled | `boolean`    | `false` | Whether to disable the list action item.                               |
+| loading  | `boolean`    | `false` | Whether to show the list action in loading state.                      |
 
 #### - `ListItemLeadingContent`