React UI Example

{modalOpen === 1 && ( Add new user setModalOpen(false)} /> {}} />

Enter key is used for new line,<br />so <strong>Enter won't submit the form</strong>.</p>}
                  />
                </FormLayout>
              </ModalContent>
            </ModalBody>
            <ModalFooter>
              <Button
                label="Save"
                onClick={() => setModalOpen(false)}
                ref={modalPrimaryButtonRef}
              />
              <Button
                label="Close"
                onClick={() => setModalOpen(false)}
                priority="outline"
                ref={modalCloseButtonRef}
              />
            </ModalFooter>
          </Modal>
        )}
        {modalOpen === 2 && (
          <Modal
            allowPrimaryActionOnEnterKey={false}
            closeButtonRef={modalCloseButtonRef}
            onCancel={(e) => {
                console.log('cancel', e);
            }}
            onClose={(e) => {
                console.log('close', e);
            }}
            primaryButtonRef={modalPrimaryButtonRef}
          >
            <ModalHeader>
              <ModalTitle>Add new user using native form</ModalTitle>
              <ModalCloseButton onClick={() => setModalOpen(false)} />
            </ModalHeader>
            <ModalBody>
              <ModalContent>
                <form method="dialog" id="native-form">
                  <FormLayout fieldLayout="horizontal" labelWidth="limited">
                    <Toggle
                      label="Enabled"
                    />
                    <TextField label="Username" required />
                    <TextField label="Password" type="password" />
                    <CheckboxField label="Force password on login" />
                    <Radio
                      label="Type of collaboration"
                      options={[
                        { label: 'Internal', value: 'internal'},
                        { label: 'External', value: 'external'},
                      ]}
                    />
                    <SelectField
                      label="Role"
                      options={[

```

--------------------------------

### Apply Padding Left from SM Breakpoint Up

Source: https://github.com/react-ui-org/react-ui/blob/master/src/docs/css-helpers/spacing.md

Use responsive padding-left helper classes to apply padding starting from the 'sm' breakpoint. The size ranges from 0 to 7.

```jsx
<div>
  <div className="pl-sm-0">
    <docoff-placeholder bordered>
      <code>.pl-sm-0</code>
    </docoff-placeholder>
  </div>
  <div className="pl-sm-1">
    <docoff-placeholder bordered>
      <code>.pl-sm-1</code>
    </docoff-placeholder>
  </div>
  <div className="pl-sm-2">
    <docoff-placeholder bordered>
      <code>.pl-sm-2</code>
    </docoff-placeholder>
  </div>
  <div className="pl-sm-3">
    <docoff-placeholder bordered>
      <code>.pl-sm-3</code>
    </docoff-placeholder>
  </div>
  <div className="pl-sm-4">
    <docoff-placeholder bordered>
      <code>.pl-sm-4</code>
    </docoff-placeholder>
  </div>
  <div className="pl-sm-5">
    <docoff-placeholder bordered>
      <code>.pl-sm-5</code>
    </docoff-placeholder>
  </div>
  <div className="pl-sm-6">
    <docoff-placeholder bordered>
      <code>.pl-sm-6</code>
    </docoff-placeholder>
  </div>
  <div className="pl-sm-7">
    <docoff-placeholder bordered>
      <code>.pl-sm-7</code>
    </docoff-placeholder>
  </div>
</div>
```

--------------------------------

### TextLink with Custom Routing

Source: https://github.com/react-ui-org/react-ui/blob/master/src/components/TextLink/README.md

Implement custom routing logic by providing an 'onClick' handler. This example prevents default navigation and uses a custom redirect.

```javascript
<TextLink
  href="/docs/contribute/general-guidelines"
  label="This link is controlled by custom function"
  onClick={(event) => {
    event.preventDefault();
    alert('You will be redirected.')
    window.location = event.currentTarget.getAttribute('href');
  }}
/>
```

--------------------------------

### Advanced Popover Positioning with Floating UI

Source: https://github.com/react-ui-org/react-ui/blob/master/src/components/Popover/README.md

This example demonstrates advanced Popover positioning using the Floating UI library. It allows for dynamic placement updates based on scrolling and provides a reference and floating element for positioning.

```jsx
React.createElement(() => {
  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
  const [placement, setPlacement] = React.useState('top');
  const {
    x,
    y,
    reference,
    floating,
    placement: finalPlacement,
    strategy,
  } = FloatingUIReactDOM.useFloating({
    placement,
    middleware: [FloatingUIReactDOM.flip()],
    whileElementsMounted: FloatingUIReactDOM.autoUpdate,
  });
  const placementOptions = [
    'top',
    'top-start',
    'top-end',
    'right',
    'right-start',
    'right-end',
    'bottom',
    'bottom-start',
    'bottom-end',
    'left',
    'left-start',
    'left-end',
  ];
  // All inline styles in this example EXCEPT Popover `style` are for
  // demonstration purposes only.
  return (
    <>
      <Toolbar>
        <ToolbarItem>
          <SelectField
            label="Suggested placement:"
            onChange={e => setPlacement(e.target.value)}
            options={placementOptions.map((el) => ({
              label: el,
              value: el,
            }))}
            value={placement}
          />
        </ToolbarItem>
        <ToolbarItem>
          <div className="mb-2">Final placement:</div>
          <code>{finalPlacement}</code>
        </ToolbarItem>
      </Toolbar>
      <div
        style={{
          width: '40rem',
          maxWidth: '100%',
          height: '10rem',
          overflow: 'auto',
        }}
      >
        <div
          style={{
            position: 'relative',
            width: '60rem',
            height: '20rem',
            paddingBlock: '7rem',
            textAlign: 'center',
          }}
        >
          <Button
            aria-describedby={isPopoverOpen ? 'my-advanced-popover' : undefined}
            label="Trigger Popover"
            onClick={() => setIsPopoverOpen(!isPopoverOpen)}
            ref={reference}
          />
          {isPopoverOpen && (
            <Popover
              id="my-advanced-popover"
              placement={finalPlacement}
              placementStyle={{
                position: strategy,
                top: `${y}px`,
                left: `${x}px`,
              }}
              ref={floating}
            >
              Auto-flipping Popover
            </Popover>
          )}
        </div>
      </div>
    </>
  );
});
```

--------------------------------

### Themed Valid Toggle Example

Source: https://github.com/react-ui-org/react-ui/blob/master/src/docs/customize/theming/forms.md

Demonstrates a toggle switch with a 'valid' validation state and associated text. Ensure the component is correctly imported and state is managed.

```jsx
          onChange={() => setStudioQuality(!studioQuality)}
          checked={studioQuality}
          id="themed-valid-toggle"
          label="Themed valid toggle"
          validationState="valid"
          validationText="This field is valid"
        />
      </div>
    </React.Fragment>
  )
});
```
```

--------------------------------

### Popover Placement Options

Source: https://github.com/react-ui-org/react-ui/blob/master/src/components/Popover/README.md

Illustrates how to control the placement and alignment of the Popover. Users can select different alignments (start, center, end) for various placements (top, right, bottom, left).

```jsx
React.createElement(() => {
  const [align, setAlign] = React.useState('');
  // All inline styles in this example are for demonstration purposes only.
  return (
    <>
      <Toolbar align="baseline">
        <ToolbarItem>
          <span id="alignment-options-label">Alignment:</span>
        </ToolbarItem>
        <ToolbarItem>
          <ButtonGroup aria-labelledby="alignment-options-label" priority="outline">
            <Button
              aria-pressed={align === '-start'}
              color={align === '-start' ? 'selected' : 'secondary'}
              label="start"
              onClick={() => setAlign('-start')}
            />
            <Button
              aria-pressed={align === ''}
              color={align === '' ? 'selected' : 'secondary'}
              label="center"
              onClick={() => setAlign('')}
            />
            <Button
              aria-pressed={align === '-end'}
              color={align === '-end' ? 'selected' : 'secondary'}
              label="end"
              onClick={() => setAlign('-end')}
            />
          </ButtonGroup>
        </ToolbarItem>
      </Toolbar>
      <div
        style={{
          display: 'grid',
          placeContent: 'center',
          minWidth: '20rem',
          minHeight: '15rem',
        }}
      >
        <PopoverWrapper>
          <docoff-placeholder bordered aria-describedby="my-popover-top">
            Popovers
            <br />
            all day long…
          </docoff-placeholder>
          <Popover id="my-popover-top" placement={`top${align}`}>
            Top side
          </Popover>
          <Popover id="my-popover-right" placement={`right${align}`}>
            Right side
          </Popover>
          <Popover id="my-popover-bottom" placement={`bottom${align}`}>
            Bottom side
          </Popover>
          <Popover id="my-popover-left" placement={`left${align}`}>
            Left side
          </Popover>
        </PopoverWrapper>
      </div>
    </>
  );
});
```

--------------------------------

### SelectField Horizontal Layout Examples

Source: https://github.com/react-ui-org/react-ui/blob/master/src/components/SelectField/README.md

Demonstrates various configurations of the SelectField component using a horizontal layout. Includes standard, filled variants, full-width options, and cases where the label is not visible.

```jsx
React.createElement(() => {
  const [fruit, setFruit] = React.useState('apple');
  const options = [
    {
      label: 'Apple',
      value: 'apple',
    },
    {
      label: 'Banana',
      value: 'banana',
    },
    {
      label: 'Grapefruit',
      value: 'grapefruit',
    },
  ];
  return (
    <>
      <SelectField
        label="Your favourite fruit"
        layout="horizontal"
        onChange={(e) => setFruit(e.target.value)}
        options={options}
        value={fruit}
      />
      <SelectField
        label="Your favourite fruit"
        layout="horizontal"
        onChange={(e) => setFruit(e.target.value)}
        options={options}
        value={fruit}
        variant="filled"
      />
      <SelectField
        fullWidth
        label="Your favourite fruit"
        layout="horizontal"
        onChange={(e) => setFruit(e.target.value)}
        options={options}
        value={fruit}
      />
      <SelectField
        fullWidth
        label="Your favourite fruit"
        layout="horizontal"
        onChange={(e) => setFruit(e.target.value)}
        options={options}
        value={fruit}
        variant="filled"
      />
      <SelectField
        fullWidth
        isLabelVisible={false}
        label="Your favourite fruit"
        layout="horizontal"
        onChange={(e) => setFruit(e.target.value)}
        options={options}
        value={fruit}
      />
      <SelectField
        fullWidth
        isLabelVisible={false}
        label="Your favourite fruit"
        layout="horizontal"
        onChange={(e) => setFruit(e.target.value)}
        options={options}
        value={fruit}
        variant="filled"
      />
    </>
  );
});
```

--------------------------------

### Implement Sortable Columns in Table

Source: https://github.com/react-ui-org/react-ui/blob/master/src/components/Table/README.md

This example demonstrates how to enable sorting for table columns. You must provide your own comparison logic for sorting data. The `onClick` handler updates the sort state and re-sorts the rows.

```jsx
React.createElement(() => {
  const [tableSortColumn, setTableSortColumn] = React.useState('id');
  const [tableSortDirection, setTableSortDirection] = React.useState('asc');
  const [rows, setRows] = React.useState([
    {
      dateOfBirth: new Date(1940, 10, 9),
      id: 1,
      name: 'John Lennon',
    },
    {
      dateOfBirth: new Date(1942, 6, 18),
      id: 2,
      name: 'Paul McCartney',
    },
    {
      dateOfBirth: new Date(1943, 2, 25),
      id: 3,
      name: 'George Harrison',
    },
    {
      dateOfBirth: new Date(1940, 7, 7),
      id: 4,
      name: 'Richard Starkey (Ringo Starr)',
    },
  ]);
  const compare = (items, key, direction) => {
    const sortedItems = [...items];
    if (key === 'id' || key === 'dateOfBirth') {
      sortedItems.sort((a, b) => b[key] - a[key]);
    } else if (key === 'name') {
      sortedItems.sort((a, b) => {
        if (a.name > b.name) {
          return -1;
        }
        if (a.name < b.name) {
          return 1;
        }
        return 0;
      });
    }
    return direction === 'desc' ? sortedItems.reverse() : sortedItems;
  };
  const columns = [
    {
      isSortable: true,
      label: 'ID',
      name: 'id',
    },
    {
      isSortable: true,
      label: 'Name',
      name: 'name',
    },
    {
      format: (date) => date.toISOString(),
      isSortable: true,
      label: 'Date of birth',
      name: 'dateOfBirth',
    },
  ];
  return (
    <Table
      columns={columns}
      rows={rows}
      sort={{
        ascendingIcon: <rui-icon icon="up" />,
        column: tableSortColumn,
        descendingIcon: <rui-icon icon="down" />,
        direction: tableSortDirection,
        onClick: (column, direction) => {
          setTableSortColumn(column);
          setTableSortDirection(direction === 'asc' ? 'desc' : 'asc');
          setRows(compare(rows, column, direction));
        },
      }}
    />
  );
});
```

--------------------------------

### Theming Checkable Form Controls with CSS Custom Properties

Source: https://github.com/react-ui-org/react-ui/blob/master/src/docs/customize/theming/forms.md

This example demonstrates how to theme Radio, CheckboxField, and Toggle components by defining CSS custom properties. It shows the default components and then applies custom styles to a second set of components within a themed container.

```jsx
React.createElement(() => {
  const [agree, setAgree] = React.useState(true);
  const [fruit, setFruit] = React.useState('apple');
  const [studioQuality, setStudioQuality] = React.useState(true);
  return (
    <React.Fragment>
      <style type="text/css">
        {`
        .example {
          margin: 0;
        }

.example > * {
          margin: 4px;
        }

.example--themed-check-fields {
          --rui-FormField--check__input__border-width: 2px;
          --rui-FormField--check--checked__border-color: LightSeaGreen;
          --rui-FormField--check--checked__check-background-color: MediumAquamarine;
        }
        `}
      </style>
      <Radio
        id="default-radio"
        label="Default radio"
        onChange={(e) => setFruit(e.target.value)}
        options={[
          {
            label: 'Apple',
            value: 'apple',
          },
          {
            label: 'Banana',
            value: 'banana',
          },
          {
            label: 'Grapefruit',
            value: 'grapefruit',
          },
        ]}
        value={fruit}
      />
      <CheckboxField
        checked={agree}
        id="default-checkbox"
        label="Default checkbox"
        onChange={() => setAgree(!agree)}
      />
      <Toggle
        checked={studioQuality}
        id="default-toggle"
        label="Default toggle"
        onChange={() => setStudioQuality(!studioQuality)}
      />
      <div className="example example--themed-check-fields mt-6">
        <Radio
          id="themed-radio"
          label="Themed radio"
          onChange={(e) => setFruit(e.target.value)}
          options={[
            {
              label: 'Apple',
              value: 'apple',
            },
            {
              label: 'Banana',
              value: 'banana',
            },
            {
              label: 'Grapefruit',
              value: 'grapefruit',
            },
          ]}
          value={fruit}
        />
        <CheckboxField
          checked={agree}
          id="themed-checkbox"
          label="Themed checkbox"
          onChange={() => setAgree(!agree)}
        />
        <Toggle
          checked={studioQuality}
          id="themed-toggle"
          label="Themed toggle"
          onChange={() => setStudioQuality(!studioQuality)}
        />
      </div>
    </React.Fragment>
  )
});

```

--------------------------------

### PopoverWrapper Usage Example

Source: https://github.com/react-ui-org/react-ui/blob/master/src/components/Popover/README.md

Shows how to use PopoverWrapper to ensure correct positioning of the Popover, especially in complex layouts or when not using React portals. This is an alternative to setting `position: relative` or `position: absolute` in CSS.

```jsx
<PopoverWrapper>
  <Button
    aria-describedby={isPopoverOpen ? 'my-popover' : undefined}
    label="Want to see a popover? Click me!"
    onClick={() => setIsPopoverOpen(!isPopoverOpen)}
  />
  {isPopoverOpen && <Popover id="my-popover">Hello there!</Popover>}
</PopoverWrapper>
```

--------------------------------

### Standard Spacing in Wrapped Playgrounds

Source: https://github.com/react-ui-org/react-ui/blob/master/src/docs/foundation/spacing.md

Demonstrates how elements inside a `div` within a live playground exhibit normal React UI spacing behavior. This example highlights the default bottom margin for paragraphs and the absence of margin for the last child.

```jsx
<div>
    <p>
        This paragraph will have bottom margin of
        <code>--rui-dimension-space-bottom-base</code>.
    </p>
    <p>
        This paragraph is a last child of its parent and thus will have no bottom
        margin.
    </p>
</div>
```

--------------------------------

### Build Documentation

Source: https://github.com/react-ui-org/react-ui/blob/master/src/docs/contribute/general-guidelines.md

Use this command to build the project's documentation.

```bash
mkdocs build
```

--------------------------------

### Responsive Justify Content

Source: https://github.com/react-ui-org/react-ui/blob/master/src/docs/css-helpers/box-alignment.md

Use these classes to control the justification of flex items from a specific breakpoint upwards. For example, `justify-content-sm-flex-start` aligns items to the start of the flex container on small screens and larger.

```html
<div class="d-flex justify-content-sm-flex-start">
  <docoff-placeholder bordered>
    <code>.justify-content-sm-flex-start</code>
  </docoff-placeholder>
</div>
<div class="d-flex justify-content-md-center">
  <docoff-placeholder bordered>
    <code>.justify-content-md-center</code>
  </docoff-placeholder>
</div>
<div class="d-flex justify-content-lg-flex-end">
  <docoff-placeholder bordered>
    <code>.justify-content-lg-flex-end</code>
  </docoff-placeholder>
</div>
<div class="d-flex justify-content-xl-space-between">
  <docoff-placeholder bordered>
    <code>.justify-content-xl-space-between</code>
  </docoff-placeholder>
  <docoff-placeholder bordered>
    <code>.justify-content-xl-space-between</code>
  </docoff-placeholder>
</div>
```

--------------------------------

### Customize ScrollView Shadows

Source: https://github.com/react-ui-org/react-ui/blob/master/src/components/ScrollView/README.md

Customize the start and end scrolling shadows of the ScrollView component using properties like startShadowBackground, startShadowSize, endShadowBackground, and endShadowSize. This example demonstrates setting radial gradients for shadows.

```jsx
<ScrollView
    startShadowBackground={'radial-gradient(
        farthest-side at center top, 
        rgba(0, 0, 0, 0.15) 0%, 
        rgba(0, 0, 0, 0.05) 60%,
        rgba(0, 0, 0, 0.02) 85%,
        rgba(0, 0, 0, 0) 100%
      )'}
    startShadowInitialOffset="-5px"
    startShadowSize="40px"
    endShadowBackground={'radial-gradient(
        farthest-side at center bottom, 
        rgba(0, 0, 0, 0.15) 0%, 
        rgba(0, 0, 0, 0.05) 60%,
        rgba(0, 0, 0, 0.02) 85%,
        rgba(0, 0, 0, 0) 100%
      )'}
    endShadowInitialOffset="-5px"
    endShadowSize="40px"
  >
    <div>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
      ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
      dis parturient montes, nascetur ridiculus mus. Donec quam felis,
      ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
      quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
      arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
      Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
      dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
      tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
      enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
      Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
      imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
      ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus
      eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing
      sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
      hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec
      vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit
      amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris
      sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget
      bibendum sodales, augue velit cursus nunc.Aenean massa. Cum sociis
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus
      mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
      aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
      a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
      Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
      vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
      vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
      feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
      Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
      Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
      Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper
      libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit
      vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
      tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
      Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
      Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis
      magna. Sed consequat, leo eget bibendum sodales, augue velit cursus
      nunc.
    </div>
  </ScrollView>
```

--------------------------------

### Run All Linters

Source: https://github.com/react-ui-org/react-ui/blob/master/CLAUDE.md

Execute ESLint, Stylelint, and Markdownlint simultaneously. Ensure you are within the Docker container.

```bash
npm run lint
```

--------------------------------

### Copy Development Environment Variables

Source: https://github.com/react-ui-org/react-ui/blob/master/src/docs/contribute/general-guidelines.md

Manually create and configure the .env file by copying from the distribution file.

```bash
cp .env.dist .env
```

--------------------------------

### Align Items Flex Start

Source: https://github.com/react-ui-org/react-ui/blob/master/src/docs/css-helpers/box-alignment.md

Use on flex containers to align items to the start of the cross axis. Requires a flex container and a defined height for the container.

```html
<docoff-placeholder bordered>
  <div className="d-flex align-items-flex-start" style={{ height: '6rem' }}>
    <docoff-placeholder bordered>
      <code>.align-items-flex-start</code>
    </docoff-placeholder>
  </div>
</docoff-placeholder>
```

--------------------------------

### Build JavaScript Code

Source: https://github.com/react-ui-org/react-ui/blob/master/src/docs/contribute/general-guidelines.md

Run this command to build the project's JavaScript code.

```bash
npm run build
```

--------------------------------

### Basic Modal Implementation

Source: https://github.com/react-ui-org/react-ui/blob/master/src/components/Modal/README.md

Demonstrates how to implement a basic Modal component with a header, body, and footer. It includes state management for modal visibility and button references for focus control.

```javascript
React.createElement(() => {
  const [modalOpen, setModalOpen] = React.useState(false);
  const modalPrimaryButtonRef = React.useRef();
  const modalCloseButtonRef = React.useRef();
  {
    The `preventScrollUnderneath` feature is necessary for Modals to work in
    React UI docs. You may not need it in your application.
  }
  return (
    <GlobalPropsProvider globalProps={{
      Modal: { preventScrollUnderneath: window.document.documentElement }
    }}>
      <Button
        label="Launch modal"
        onClick={() => setModalOpen(true)}
      />
      <div>
        {modalOpen && (
          <Modal
            closeButtonRef={modalCloseButtonRef}
            primaryButtonRef={modalPrimaryButtonRef}
          >
            <ModalHeader>
              <ModalTitle>Delete the user?</ModalTitle>
              <ModalCloseButton onClick={() => setModalOpen(false)} />
            </ModalHeader>
            <ModalBody>
              <ModalContent>
                <p>
                  Do you really want to delete the user <code>admin</code>? 
                  This cannot be undone.
                </p>
              </ModalContent>
            </ModalBody>
            <ModalFooter>
              <Button
                color="danger"
                label="Delete"
                onClick={() => setModalOpen(false)}
                ref={modalPrimaryButtonRef}
              />
              <Button
                label="Close"
                onClick={() => setModalOpen(false)}
                priority="outline"
                ref={modalCloseButtonRef}
              />
            </ModalFooter>
          </Modal>
        )}
      </div>
    </GlobalPropsProvider>
  );
});
```