@workday/canvas-kit-docs 12.0.0-alpha.855-next.0 → 12.0.0-alpha.898-next.0

package/dist/mdx/react/layout/Box.mdx

@@ -1,8 +1,6 @@
-import {Box} from '@workday/canvas-kit-react/layout';
-// examples
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import Basic from './examples/Box/Basic';
 
-
 # Box
 
 `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens. It

package/dist/mdx/react/layout/Flex.mdx

@@ -1,8 +1,6 @@
-import {Flex} from '@workday/canvas-kit-react/layout';
-// examples
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import Basic from './examples/Flex/Basic';
 
-
 # Canvas Kit Flex
 
 `Flex` is a low-level layout component that provides a common, ergonomic API for building
@@ -53,14 +51,16 @@ building layouts.
 
 #### Props
 
-`Flex` exposes [flex container style props](/getting-started/for-developers/resources/style-props/#flex) and `Box`
+`Flex` exposes
+[flex container style props](/getting-started/for-developers/resources/style-props/#flex) and `Box`
 style props.
 
 ### Flex.Item
 
 `Flex.Item` is a subcomponent of `Flex`. It is a `Box` component under the hood and exposes
-[flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) that map to CSS Flexbox Item
-properties. This provides greater control over how child components render in your layout.
+[flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) that map
+to CSS Flexbox Item properties. This provides greater control over how child components render in
+your layout.
 
 ```tsx
 <Flex flexDirection="column" rowGap="xs">
@@ -72,5 +72,6 @@ properties. This provides greater control over how child components render in yo
 
 #### Props
 
-`Flex.Item` exposes [flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) and `Box`
+`Flex.Item` exposes
+[flex item style props](/getting-started/for-developers/resources/style-props/#flex-item) and `Box`
 style props.

package/dist/mdx/react/layout/Grid.mdx

@@ -1,10 +1,8 @@
-import {Grid, GridItem} from '@workday/canvas-kit-react/layout';
-// examples
-import GridLayout from './examples/Grid/GridLayout';
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import Basic from './examples/Grid/Basic';
+import GridLayout from './examples/Grid/GridLayout';
 import GridLayoutInteractive from './examples/Grid/GridLayoutInteractive';
 
-
 # Canvas Kit Grid
 
 `Grid` is a low-level layout component that provides a common, ergonomic API for building

package/dist/mdx/react/loading-dots/LoadingDots.mdx

@@ -1,10 +1,8 @@
-import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
-
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import RTL from './examples/RTL';
 import Accessible from './examples/Accessible';
 
-
 # Canvas Kit Loading Dots
 
 Loading Dots make users aware that content is currently being loaded, processing, or that change

package/dist/mdx/react/menu/Menu.mdx

@@ -1,11 +1,8 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-import {Menu} from '@workday/canvas-kit-react/menu';
-
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import ContextMenu from './examples/ContextMenu';
 import Icons from './examples/Icons';
 
-
 # Canvas Kit Menu
 
 `Menu` displays a list of options when triggered by an action or UI element like an icon or button.

package/dist/mdx/react/menu/examples/MenuWithFallbackPlacements.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import {PopperController} from '../../../../../utils/storybook';
+import {Placement} from '@workday/canvas-kit-react/popup';
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {BodyText} from '@workday/canvas-kit-react/text';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+export default () => {
+  const [placement, setPlacement] = React.useState<Placement>('top');
+  const [marginLeftBtn, setMarginLeftBtn] = React.useState(0);
+  const [marginRightBtn, setMarginRightBtn] = React.useState(0);
+  const [selected, setSelected] = React.useState('');
+
+  const handlePlacement = (placement: Placement) => {
+    setPlacement(placement);
+  };
+
+  const handleMarginLeftBtn = (marginLeftBtn: number) => {
+    setMarginLeftBtn(marginLeftBtn);
+  };
+
+  const handleMarginRightBtn = (marginLeftBtn: number) => {
+    setMarginRightBtn(marginLeftBtn);
+  };
+
+  return (
+    <div style={{height: 1200}} data-testid="scroll-area-fallback-placement">
+      <PopperController
+        marginLeftBtn={marginLeftBtn}
+        marginRightBtn={marginRightBtn}
+        placement={placement}
+        onSetPlacement={handlePlacement}
+        onSetMarginLeftBtn={handleMarginLeftBtn}
+        onSetMarginRightBtn={handleMarginRightBtn}
+      >
+        <Flex
+          width="100%"
+          marginTop={240}
+          justifyContent="center"
+          alignItems="center"
+          flexDirection="column"
+        >
+          <Menu onSelect={data => setSelected(data.id)}>
+            <Menu.Target style={{marginLeft: marginLeftBtn, marginRight: marginRightBtn}}>
+              Open Menu
+            </Menu.Target>
+            <Menu.Popper placement={placement}>
+              <Menu.Card>
+                <Menu.List>
+                  <Menu.Item>First Item</Menu.Item>
+                  <Menu.Item>Second Item</Menu.Item>
+                  <Menu.Divider />
+                  <Menu.Item>Third Item (with a really, really, really long label)</Menu.Item>
+                  <Menu.Item aria-disabled>Fourth Item</Menu.Item>
+                </Menu.List>
+              </Menu.Card>
+            </Menu.Popper>
+            <BodyText size="small" marginTop="s" marginLeft={20}>
+              Selected: <span data-testid="output">{selected}</span>
+            </BodyText>
+          </Menu>
+        </Flex>
+      </PopperController>
+    </div>
+  );
+};

package/dist/mdx/react/modal/Modal.mdx

@@ -1,6 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {Modal} from '@workday/canvas-kit-react/modal';
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import WithoutCloseIcon from './examples/WithoutCloseIcon';
@@ -11,7 +9,6 @@ import BodyOverflow from './examples/BodyOverflow';
 import FullOverflow from './examples/FullOverflow';
 import FormModal from './examples/FormModal';
 
-
 # Canvas Kit Modal
 
 A Modal component is a type of Dialog that renders a translucent overlay that prevents user

package/dist/mdx/react/modal/examples/CustomFocus.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {Flex, Box} from '@workday/canvas-kit-react/layout';
 import {useUniqueId} from '@workday/canvas-kit-react/common';

package/dist/mdx/react/modal/examples/FormModal.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {plusIcon} from '@workday/canvas-system-icons-web';
 

package/dist/mdx/react/modal/examples/IframeTest.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import {Modal} from '@workday/canvas-kit-react/modal';
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+export default () => {
+  return (
+    <Modal>
+      <Modal.Target as={DeleteButton}>Delete Item</Modal.Target>
+      <Modal.Overlay>
+        <Modal.Card>
+          <Modal.CloseIcon aria-label="Close" />
+          <Modal.Heading>Delete Item</Modal.Heading>
+          <Modal.Body>
+            <p>Are you sure you want to delete the item?</p>
+            <Flex gap="s">
+              <Modal.CloseButton as={DeleteButton}>Delete</Modal.CloseButton>
+              <Modal.CloseButton>Cancel</Modal.CloseButton>
+            </Flex>
+            <iframe srcDoc="<html><body>Hello, <b>world</b>.<button>iframe button 1</button><button>iframe button 2</button></body></html>" />
+          </Modal.Body>
+        </Modal.Card>
+      </Modal.Overlay>
+    </Modal>
+  );
+};

package/dist/mdx/react/modal/examples/ModalWithPopup.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {
+  Popup,
+  useCloseOnOutsideClick,
+  useCloseOnEscape,
+  usePopupModel,
+} from '@workday/canvas-kit-react/popup';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+export default () => {
+  const modal = useModalModel();
+  const popup = usePopupModel();
+
+  const handleDelete = () => {
+    console.log('Delete Item');
+  };
+
+  useCloseOnOutsideClick(popup);
+  useCloseOnEscape(popup);
+
+  return (
+    <>
+      <Modal model={modal}>
+        <Modal.Target as={DeleteButton}>Delete Item</Modal.Target>
+        <Modal.Overlay>
+          <Modal.Card>
+            <Modal.CloseIcon aria-label="Close" />
+            <Modal.Heading>Delete Item</Modal.Heading>
+            <Modal.Body>
+              <p>Are you sure you want to delete the item?</p>
+              <Popup model={popup}>
+                <Flex gap="s">
+                  <Popup.Target as={DeleteButton}>Yes, Delete</Popup.Target>
+                  <Popup.CloseButton>Cancel</Popup.CloseButton>
+                </Flex>
+                <Popup.Popper>
+                  <Popup.Card>
+                    <Popup.CloseIcon aria-label="Close" />
+                    <Popup.Heading>Really Delete Item</Popup.Heading>
+                    <Popup.Body>
+                      <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
+                      <Flex gap="s">
+                        <Popup.CloseButton
+                          as={DeleteButton}
+                          onClick={event => {
+                            modal.events.hide(event);
+                            handleDelete();
+                          }}
+                        >
+                          Yes, Really Delete
+                        </Popup.CloseButton>
+                        <Popup.CloseButton>Cancel</Popup.CloseButton>
+                      </Flex>
+                    </Popup.Body>
+                  </Popup.Card>
+                </Popup.Popper>
+              </Popup>
+            </Modal.Body>
+          </Modal.Card>
+        </Modal.Overlay>
+      </Modal>
+    </>
+  );
+};

package/dist/mdx/react/modal/examples/ReturnFocus.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Flex, Box} from '@workday/canvas-kit-react/layout';
 import {Select} from '@workday/canvas-kit-react/select';
 

package/dist/mdx/react/modal/examples/StackedModals.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
+import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+export default () => {
+  const model = useModalModel();
+
+  const handleDelete = () => {
+    console.log('Delete Item');
+  };
+
+  return (
+    <Modal model={model}>
+      <Modal.Target as={DeleteButton}>Delete Item</Modal.Target>
+      <Modal.Overlay>
+        <Modal.Card>
+          <Modal.CloseIcon aria-label="Close" />
+          <Modal.Heading>Delete Item</Modal.Heading>
+          <Modal.Body>
+            <p>Are you sure you want to delete the item?</p>
+            <Flex gap="s">
+              <Modal>
+                <Modal.Target as={DeleteButton}>Yes, Delete</Modal.Target>
+                <Modal.Overlay>
+                  <Modal.Card>
+                    <Modal.CloseIcon aria-label="Close" />
+                    <Modal.Heading>Really Delete Item</Modal.Heading>
+                    <Modal.Body>
+                      <p>
+                        Are you <em>really</em> sure you want to delete the item?
+                      </p>
+                      <Flex gap="s">
+                        <Modal.CloseButton
+                          as={DeleteButton}
+                          onClick={event => {
+                            model.events.hide(event);
+                            handleDelete();
+                          }}
+                        >
+                          Yes, Really Delete
+                        </Modal.CloseButton>
+                        <Modal.CloseButton>Cancel</Modal.CloseButton>
+                      </Flex>
+                    </Modal.Body>
+                  </Modal.Card>
+                </Modal.Overlay>
+              </Modal>
+              <Modal.CloseButton>Cancel</Modal.CloseButton>
+            </Flex>
+          </Modal.Body>
+        </Modal.Card>
+      </Modal.Overlay>
+    </Modal>
+  );
+};

package/dist/mdx/react/modal/examples/WithRadioButtons.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import {Modal} from '@workday/canvas-kit-react/modal';
+import {Radio, RadioGroup} from '@workday/canvas-kit-react/radio';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Modal>
+      <Modal.Target>With Radio Buttons</Modal.Target>
+      <Modal.Overlay>
+        <Modal.Card>
+          <Modal.CloseIcon aria-label="Close" />
+          <Modal.Heading>Select Item</Modal.Heading>
+          <Modal.Body>
+            <RadioGroup
+              name="contact"
+              data-testid="radiogroup"
+              value={value}
+              onChange={value => setValue(String(value))}
+            >
+              <Radio id="1" value="email" label="E-mail" />
+              <Radio id="2" value="phone" label="Phone" />
+            </RadioGroup>
+          </Modal.Body>
+        </Modal.Card>
+      </Modal.Overlay>
+    </Modal>
+  );
+};

package/dist/mdx/react/modal/examples/WithTooltips.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
+import {Popup, useCloseOnOutsideClick, usePopupModel} from '@workday/canvas-kit-react/popup';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+
+export default () => {
+  const modal = useModalModel();
+  const popup1 = usePopupModel();
+  const popup2 = usePopupModel();
+  const closeModal = (event: React.MouseEvent) => modal.events.hide(event);
+
+  useCloseOnOutsideClick(popup1);
+
+  return (
+    <>
+      <Modal model={modal}>
+        <Modal.Target>Open Modal</Modal.Target>
+        <Modal.Overlay>
+          <Modal.Card width={'auto'}>
+            <Modal.CloseIcon aria-label="Close" />
+            <Modal.Heading>Open Modal</Modal.Heading>
+            <Modal.Body>
+              <p>Open a hidable and non-hidable popups</p>
+              <Flex gap="s">
+                <Popup.Target model={popup1}>Hidable Popup</Popup.Target>
+                <Popup.Target model={popup2}>Non-hidable Popup</Popup.Target>
+                <Tooltip title="Not so sure" type="muted">
+                  <Popup.CloseButton onClick={closeModal}>Cancel</Popup.CloseButton>
+                </Tooltip>
+              </Flex>
+            </Modal.Body>
+          </Modal.Card>
+        </Modal.Overlay>
+      </Modal>
+      <Popup model={popup1}>
+        <Popup.Popper>
+          <Popup.Card>
+            <Popup.CloseIcon aria-label="Close" />
+            <Popup.Heading>Hidable Popup</Popup.Heading>
+            <Popup.Body>
+              <p>Pressing 'OK' will close the modal</p>
+              <Tooltip
+                placement="left"
+                title="Really, Really, Really, Really, Really sure"
+                type="muted"
+              >
+                <Popup.CloseButton onClick={closeModal}>OK</Popup.CloseButton>
+              </Tooltip>
+            </Popup.Body>
+          </Popup.Card>
+        </Popup.Popper>
+      </Popup>
+      <Popup model={popup2}>
+        <Popup.Popper>
+          <Popup.Card>
+            <Popup.CloseIcon aria-label="Close" />
+            <Popup.Heading>Non-hidable Popup</Popup.Heading>
+            <Popup.Body>
+              <p>Pressing 'OK' will close the modal</p>
+              <Tooltip
+                placement="left"
+                title="Really, Really, Really, Really, Really sure"
+                type="muted"
+              >
+                <Popup.CloseButton onClick={closeModal}>OK</Popup.CloseButton>
+              </Tooltip>
+            </Popup.Body>
+          </Popup.Card>
+        </Popup.Popper>
+      </Popup>
+    </>
+  );
+};

package/dist/mdx/react/pagination/pagination.mdx

@@ -1,7 +1,4 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-
-import {Pagination} from '@workday/canvas-kit-react/pagination';
-
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import CustomRange from './examples/CustomRange';
 import JumpControls from './examples/JumpControls';
@@ -10,7 +7,6 @@ import HoistedModel from './examples/HoistedModel';
 import ResponsiveRange from './examples/ResponsiveRange';
 import RTL from './examples/RTL';
 
-
 # Canvas Kit Pagination
 
 `Pagination` is a

package/dist/mdx/react/popup/Popup.mdx

@@ -1,7 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {Popup} from '@workday/canvas-kit-react/popup';
-
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import InitialFocus from './examples/InitialFocus';
 import MultiplePopups from './examples/MultiplePopups';
@@ -182,41 +179,68 @@ The Popup component automatically handles right-to-left rendering.
 
 <>
   <SymbolDoc name="Popper" fileName="/react/" />
+
   <SymbolDoc name="Popup" fileName="/react/" />
 </>
 
 ## Hooks
 
 <>
-<SymbolDoc name="usePopupStack" fileName="/react/" />
+  <SymbolDoc name="usePopupStack" fileName="/react/" />
+
+{' '}
 
 <SymbolDoc name="useAssistiveHideSiblings" fileName="/react/" />
 
+{' '}
+
 <SymbolDoc name="useBringToTopOnClick" fileName="/react/" />
 
+{' '}
+
 <SymbolDoc name="useCloseOnEscape" fileName="/react/" />
 
+{' '}
+
 <SymbolDoc name="useCloseOnOutsideClick" fileName="/react/" />
 
+{' '}
+
 <SymbolDoc name="useAlwaysCloseOnOutsideClick" fileName="/react/" />
 
+{' '}
+
 <SymbolDoc name="useAlwaysCloseOnOutsideClick" fileName="/react/" />
 
+{' '}
+
 <SymbolDoc name="useCloseOnTargetHidden" fileName="/react/" />
 
+{' '}
+
 <SymbolDoc name="useDisableBodyScroll" fileName="/react/" />
 
+{' '}
+
 <SymbolDoc name="useFocusRedirect" fileName="/react/" />
 
+{' '}
+
 <SymbolDoc name="useFocusTrap" fileName="/react/" />
 
+{' '}
+
 <SymbolDoc name="useInitialFocus" fileName="/react/" />
 
+{' '}
+
 <SymbolDoc name="useReturnFocus" fileName="/react/" />
 
+{' '}
+
 <SymbolDoc name="useTransferOnFullscreenEnter" fileName="/react/" />
 
-<SymbolDoc name="useTransferOnFullscreenExit" fileName="/react/" />
+  <SymbolDoc name="useTransferOnFullscreenExit" fileName="/react/" />
 </>
 
 ## Specifications

package/dist/mdx/react/popup/examples/CloseOnTargetHiddenTest.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import {
+  Popup,
+  useCloseOnEscape,
+  useCloseOnTargetHidden,
+  usePopupModel,
+} from '@workday/canvas-kit-react/popup';
+
+export default () => {
+  const model = usePopupModel();
+
+  useCloseOnEscape(model);
+  useCloseOnTargetHidden(model);
+
+  return (
+    <div
+      style={{width: 400, height: 400, overflow: 'scroll', padding: 4, position: 'relative'}}
+      data-testid="scroll-area"
+    >
+      <div style={{width: 950, height: 950}}>
+        <p style={{marginBottom: 400}}>Scroll down</p>
+        <p>Scroll right and click on the button</p>
+        <Popup model={model}>
+          <div
+            style={{
+              position: 'absolute',
+              width: 950,
+              height: 950,
+              display: 'flex',
+              top: 0,
+              left: 0,
+              justifyContent: 'center',
+            }}
+          >
+            <Popup.Target data-testid="target" style={{alignSelf: 'center'}}>
+              Open Popup
+            </Popup.Target>
+          </div>
+          <Popup.Popper>
+            <Popup.Card>
+              <Popup.CloseIcon aria-label="Close" />
+              <Popup.Body>
+                <p>
+                  Scroll in any direction. The popup should close when at least 50% of the target
+                  button is hidden from view
+                </p>
+              </Popup.Body>
+            </Popup.Card>
+          </Popup.Popper>
+        </Popup>
+      </div>
+    </div>
+  );
+};

package/dist/mdx/react/popup/examples/ComboboxWithinPopup.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Combobox} from '@workday/canvas-kit-react/combobox';
+import {
+  Popup,
+  useCloseOnOutsideClick,
+  useCloseOnEscape,
+  usePopupModel,
+  useInitialFocus,
+  useReturnFocus,
+} from '@workday/canvas-kit-react/popup';
+
+export default () => {
+  const model = usePopupModel();
+
+  useCloseOnOutsideClick(model);
+  useCloseOnEscape(model);
+  useInitialFocus(model);
+  useReturnFocus(model);
+
+  return (
+    <Popup model={model}>
+      <Popup.Target as={SecondaryButton}>Open Popup</Popup.Target>
+      <Popup.Popper>
+        <Popup.Card>
+          <Popup.CloseIcon aria-label="Close" />
+          <Popup.Heading>Popup With Combobox</Popup.Heading>
+          <Popup.Body>
+            <FormField orientation="vertical">
+              <FormField.Label>Choose Your Food</FormField.Label>
+              <Combobox items={['Pizza', 'Cheeseburger', 'Fries', 'Hot Dog']}>
+                <FormField.Input as={Combobox.Input} />
+                <Combobox.Menu.Popper>
+                  <Combobox.Menu.Card>
+                    <Combobox.Menu.List>
+                      {item => <Combobox.Menu.Item>{item}</Combobox.Menu.Item>}
+                    </Combobox.Menu.List>
+                  </Combobox.Menu.Card>
+                </Combobox.Menu.Popper>
+              </Combobox>
+            </FormField>
+          </Popup.Body>
+        </Popup.Card>
+      </Popup.Popper>
+    </Popup>
+  );
+};