@patternfly/react-core 4.222.12 → 4.222.15

package/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx

@@ -0,0 +1,356 @@
+import React from 'react';
+import {
+  LabelGroup,
+  Label,
+  Modal,
+  ModalVariant,
+  Button,
+  Form,
+  FormGroup,
+  TextInput,
+  Menu,
+  MenuContent,
+  MenuList,
+  MenuItem,
+  MenuToggle,
+  Radio,
+  Popper
+} from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
+  const [isModalOpen, setModalOpen] = React.useState<boolean>(false);
+  const [idIndex, setIdIndex] = React.useState<number>(3);
+  const [labelText, setLabelText] = React.useState<string>('');
+  const [color, setColor] = React.useState<string>();
+  const [icon, setIcon] = React.useState<any>();
+  const [labelType, setLabelType] = React.useState<string>('filled');
+  const [isClosable, setIsCloseable] = React.useState<boolean>(false);
+  const [isEditable, setIsEditable] = React.useState<boolean>(false);
+  const labelInputRef = React.useRef();
+
+  const [isColorOpen, setIsColorOpen] = React.useState<boolean>(false);
+  const colorMenuRef = React.useRef<HTMLDivElement>();
+  const colorContainerRef = React.useRef<HTMLDivElement>();
+  const colorToggleRef = React.useRef<HTMLButtonElement>();
+
+  const [isIconOpen, setIsIconOpen] = React.useState<boolean>(false);
+  const iconMenuRef = React.useRef<HTMLDivElement>();
+  const iconContainerRef = React.useRef<HTMLDivElement>();
+  const iconToggleRef = React.useRef<HTMLButtonElement>();
+
+  const [labels, setLabels] = React.useState<any>([
+    { name: 'Label 1', id: 0 },
+    { name: 'Label 2', id: 1 },
+    {
+      name: 'Label 3',
+      props: {
+        isEditable: true,
+        editableProps: {
+          'aria-label': 'label editable text'
+        }
+      },
+      id: 2
+    }
+  ]);
+
+  const onClose = (labelId: string) => {
+    setLabels(labels.filter((l: any) => l.id !== labelId));
+  };
+
+  const onEdit = (nextText: string, index: number) => {
+    const copy = [...labels];
+    copy[index] = { name: nextText, props: labels[index].props, id: labels[index].id };
+    setLabels(copy);
+  };
+
+  const onAdd = () => {
+    let labelIcon = null;
+    if (icon === 'Info circle icon') {
+      labelIcon = <InfoCircleIcon />;
+    }
+
+    setLabels([
+      {
+        name: labelText || 'New Label',
+        props: {
+          color: color ? color.toLowerCase() : 'gray',
+          icon: labelIcon,
+          variant: labelType || 'filled',
+          ...(!isClosable && isClosable !== undefined && { onClose: null }),
+          isEditable: isEditable !== undefined ? isEditable : true,
+          ...(isEditable && {
+            editableProps: {
+              'aria-label': 'label editable text'
+            }
+          })
+        },
+        id: idIndex
+      },
+      ...labels
+    ]);
+    setModalOpen(!isModalOpen);
+    setIdIndex(idIndex + 1);
+    setLabelText('');
+    setColor(null);
+    setIcon(null);
+    setLabelType('filled');
+    setIsCloseable(false);
+    setIsEditable(false);
+  };
+
+  const handleModalToggle = () => {
+    setModalOpen(!isModalOpen);
+  };
+
+  React.useEffect(() => {
+    if (isModalOpen && labelInputRef && labelInputRef.current) {
+      (labelInputRef.current as HTMLInputElement).focus();
+    }
+  }, [isModalOpen]);
+
+  const handleMenuKeys = (event: KeyboardEvent) => {
+    if (isColorOpen && colorMenuRef.current.contains(event.target as Node)) {
+      if (event.key === 'Escape' || event.key === 'Tab') {
+        setIsColorOpen(!isColorOpen);
+        colorToggleRef.current.focus();
+      }
+    }
+    if (isIconOpen && iconMenuRef.current.contains(event.target as Node)) {
+      if (event.key === 'Escape' || event.key === 'Tab') {
+        setIsIconOpen(!isIconOpen);
+        iconToggleRef.current.focus();
+      }
+    }
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (isColorOpen && !colorMenuRef.current.contains(event.target as Node)) {
+      setIsColorOpen(false);
+    }
+    if (isIconOpen && !iconMenuRef.current.contains(event.target as Node)) {
+      setIsIconOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [isColorOpen, isIconOpen, colorMenuRef, iconMenuRef]);
+
+  const onColorToggleClick = (ev: React.MouseEvent) => {
+    ev.stopPropagation(); // Stop handleClickOutside from handling
+    setTimeout(() => {
+      if (colorMenuRef.current) {
+        const firstElement = colorMenuRef.current.querySelector('li > button:not(:disabled)');
+        firstElement && (firstElement as HTMLElement).focus();
+      }
+    }, 0);
+    setIsColorOpen(!isColorOpen);
+  };
+
+  const colorToggle = (
+    <MenuToggle ref={colorToggleRef} onClick={onColorToggleClick} isExpanded={isColorOpen}>
+      {color || 'Select'}
+    </MenuToggle>
+  );
+
+  const colorMenu = (
+    <Menu
+      ref={colorMenuRef}
+      activeItemId={color}
+      onSelect={(_ev, itemId) => {
+        setColor(itemId.toString());
+        setIsColorOpen(false);
+      }}
+      selected={color}
+    >
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId="Gray">Gray</MenuItem>
+          <MenuItem itemId="Blue">Blue</MenuItem>
+          <MenuItem itemId="Green">Green</MenuItem>
+          <MenuItem itemId="Orange">Orange</MenuItem>
+          <MenuItem itemId="Red">Red</MenuItem>
+          <MenuItem itemId="Purple">Purple</MenuItem>
+          <MenuItem itemId="Cyan">Cyan</MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  const onIconToggleClick = (ev: React.MouseEvent) => {
+    ev.stopPropagation(); // Stop handleClickOutside from handling
+    setTimeout(() => {
+      if (iconMenuRef.current) {
+        const firstElement = iconMenuRef.current.querySelector('li > button:not(:disabled)');
+        firstElement && (firstElement as HTMLElement).focus();
+      }
+    }, 0);
+    setIsIconOpen(!isIconOpen);
+  };
+
+  const iconToggle = (
+    <MenuToggle ref={iconToggleRef} onClick={onIconToggleClick} isExpanded={isIconOpen}>
+      {icon || 'Select'}
+    </MenuToggle>
+  );
+
+  const iconMenu = (
+    <Menu
+      ref={iconMenuRef}
+      activeItemId={icon}
+      onSelect={(_ev, itemId) => {
+        setIcon(itemId.toString());
+        setIsIconOpen(false);
+      }}
+      selected={icon}
+    >
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId="No icon">No icon</MenuItem>
+          <MenuItem itemId="Info circle icon">
+            <InfoCircleIcon />
+            Info circle icon
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  return (
+    <div>
+      <LabelGroup
+        categoryName="Label group 1"
+        numLabels={5}
+        isEditable
+        addLabelControl={
+          <Label color="blue" variant="outline" isOverflowLabel onClick={handleModalToggle}>
+            Add label
+          </Label>
+        }
+      >
+        {labels.map((label, index) => (
+          <Label
+            key={`${label.name}-${index}`}
+            id={`${label.name}-${index}`}
+            color="blue"
+            onClose={() => onClose(label.id)}
+            onEditCancel={prevText => onEdit(prevText, index)}
+            onEditComplete={newText => onEdit(newText, index)}
+            {...label.props}
+          >
+            {label.name}
+          </Label>
+        ))}
+      </LabelGroup>
+      <Modal
+        variant={ModalVariant.small}
+        title="Add Label"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="create" variant="primary" form="create-label-form" onClick={onAdd}>
+            Save
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        <Form id="create-label-form">
+          <FormGroup label="Label text" fieldId="create-label-form-label-text">
+            <TextInput
+              type="text"
+              id="create-label-form-label-text"
+              name="create-label-form-label-text"
+              value={labelText}
+              onChange={setLabelText}
+              ref={labelInputRef}
+            />
+          </FormGroup>
+          <FormGroup label="Color" fieldId="create-label-form-color">
+            <div ref={colorContainerRef}>
+              <Popper
+                trigger={colorToggle}
+                popper={colorMenu}
+                appendTo={colorContainerRef.current}
+                isVisible={isColorOpen}
+                popperMatchesTriggerWidth={false}
+              />
+            </div>
+          </FormGroup>
+          <FormGroup label="Icon" fieldId="create-label-form-icon">
+            <div ref={iconContainerRef}>
+              <Popper
+                trigger={iconToggle}
+                popper={iconMenu}
+                appendTo={iconContainerRef.current}
+                isVisible={isIconOpen}
+                popperMatchesTriggerWidth={false}
+              />
+            </div>
+          </FormGroup>
+          <FormGroup label="Label type" fieldId="create-label-form-label-type">
+            <Radio
+              isChecked={labelType === 'filled'}
+              name="filled-label"
+              onChange={() => setLabelType('filled')}
+              label="Filled"
+              id="radio-filled"
+              value="check1"
+            />
+            <Radio
+              isChecked={labelType === 'outline'}
+              name="outline-label"
+              onChange={() => setLabelType('outline')}
+              label="Outlined"
+              id="radio-outline"
+              value="check2"
+            />
+          </FormGroup>
+          <FormGroup label="Dismissable" fieldId="create-label-form-dismissable">
+            <Radio
+              isChecked={isClosable === true}
+              name="closeable-label"
+              onChange={() => setIsCloseable(true)}
+              label="Yes"
+              id="radio-closable"
+              value="check1"
+            />
+            <Radio
+              isChecked={isClosable === false}
+              name="not-closeable-label"
+              onChange={() => setIsCloseable(false)}
+              label="No"
+              id="radio-not-closable"
+              value="check2"
+            />
+          </FormGroup>
+          <FormGroup label="Editable" fieldId="create-label-form-editable">
+            <Radio
+              isChecked={isEditable === true}
+              name="editable-label"
+              onChange={() => setIsEditable(true)}
+              label="Yes"
+              id="radio-editable"
+              value="check3"
+            />
+            <Radio
+              isChecked={isEditable === false}
+              name="not-editable-label"
+              onChange={() => setIsEditable(false)}
+              label="No"
+              id="radio-not-editable"
+              value="check4"
+            />
+          </FormGroup>
+        </Form>
+      </Modal>
+    </div>
+  );
+};

package/src/components/Modal/examples/Modal.md

@@ -876,3 +876,5 @@ If the content that you're passing to the modal is likely to overflow the modal
 
 ```ts file="ModalWithOverflowingContent.tsx"
 ```
+
+

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -61,6 +61,8 @@ class SimpleOverflowMenu extends React.Component {
             isOpen={isOpen}
             isPlain
             dropdownItems={dropdownItems}
+            isFlipEnabled
+            menuAppendTo="parent"
           />
         </OverflowMenuControl>
       </OverflowMenu>
@@ -153,6 +155,8 @@ class OverflowMenuGroupTypes extends React.Component {
             isOpen={isOpen}
             isPlain
             dropdownItems={dropdownItems}
+            isFlipEnabled
+            menuAppendTo="parent"
           />
         </OverflowMenuControl>
       </OverflowMenu>
@@ -239,6 +243,8 @@ class OverflowMenuAdditionalOptions extends React.Component {
             isOpen={isOpen}
             isPlain
             dropdownItems={dropdownItems}
+            isFlipEnabled
+            menuAppendTo="parent"
           />
         </OverflowMenuControl>
       </OverflowMenu>
@@ -301,6 +307,8 @@ class OverflowMenuPersist extends React.Component {
             isOpen={isOpen}
             isPlain
             dropdownItems={dropdownItems}
+            isFlipEnabled
+            menuAppendTo="parent"
           />
         </OverflowMenuControl>
       </OverflowMenu>

package/src/components/Popover/Popover.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import * as React from 'react';
-import { KEY_CODES } from '../../helpers/constants';
+import { KeyTypes } from '../../helpers/constants';
 import styles from '@patternfly/react-styles/css/components/Popover/popover';
 import { css } from '@patternfly/react-styles';
 import { PopoverContext } from './PopoverContext';
@@ -330,7 +330,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   const hasCustomMinWidth = minWidth !== popoverMinWidth.value;
   const hasCustomMaxWidth = maxWidth !== popoverMaxWidth.value;
   const onDocumentKeyDown = (event: KeyboardEvent) => {
-    if (event.keyCode === KEY_CODES.ESCAPE_KEY && visible) {
+    if (event.key === KeyTypes.Escape && visible) {
       if (triggerManually) {
         shouldClose(null, hide, event);
       } else {

package/src/components/TimePicker/TimePicker.tsx

@@ -67,11 +67,15 @@ export interface TimePickerProps
   maxTime?: string | Date;
   /** Includes number of seconds with the chosen time and allows users to manually edit the seconds value. */
   includeSeconds?: boolean;
+  /** Flag to control the opened state of the time picker menu */
+  isOpen?: boolean;
+  /** Handler invoked each time the open state of time picker updates */
+  setIsOpen?: (isOpen?: boolean) => void;
 }
 
 interface TimePickerState {
   isInvalid: boolean;
-  isOpen: boolean;
+  isTimeOptionsOpen: boolean;
   timeState: string;
   focusedIndex: number;
   scrollIndex: number;
@@ -102,12 +106,13 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     stepMinutes: 30,
     inputProps: {},
     minTime: '',
-    maxTime: ''
+    maxTime: '',
+    setIsOpen: () => {}
   };
 
   constructor(props: TimePickerProps) {
     super(props);
-    const { is24Hour, delimiter, time, includeSeconds } = this.props;
+    const { is24Hour, delimiter, time, includeSeconds, isOpen } = this.props;
     let { minTime, maxTime } = this.props;
     if (minTime === '') {
       const minSeconds = includeSeconds ? `${delimiter}00` : '';
@@ -120,7 +125,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     const timeRegex = this.getRegExp();
     this.state = {
       isInvalid: false,
-      isOpen: false,
+      isTimeOptionsOpen: isOpen,
       timeState: parseTime(time, timeRegex, delimiter, !is24Hour, includeSeconds),
       focusedIndex: null,
       scrollIndex: 0,
@@ -145,18 +150,18 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
   onDocClick = (event: MouseEvent | TouchEvent) => {
     const clickedOnToggle = this.toggleRef?.current?.contains(event.target as Node);
     const clickedWithinMenu = this.menuRef?.current?.contains(event.target as Node);
-    if (this.state.isOpen && !(clickedOnToggle || clickedWithinMenu)) {
+    if (this.state.isTimeOptionsOpen && !(clickedOnToggle || clickedWithinMenu)) {
       this.onToggle(false);
     }
   };
 
   handleGlobalKeys = (event: KeyboardEvent) => {
-    const { isOpen, focusedIndex, scrollIndex } = this.state;
+    const { isTimeOptionsOpen, focusedIndex, scrollIndex } = this.state;
     // keyboard pressed while focus on toggle
     if (this.inputRef?.current?.contains(event.target as Node)) {
-      if (!isOpen && event.key !== KeyTypes.Tab) {
+      if (!isTimeOptionsOpen && event.key !== KeyTypes.Tab && event.key !== KeyTypes.Escape) {
         this.onToggle(true);
-      } else if (isOpen) {
+      } else if (isTimeOptionsOpen) {
         if (event.key === KeyTypes.Escape || event.key === KeyTypes.Tab) {
           this.onToggle(false);
         } else if (event.key === KeyTypes.Enter) {
@@ -188,9 +193,13 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
   };
 
   componentDidUpdate(prevProps: TimePickerProps, prevState: TimePickerState) {
-    const { timeState, isOpen, isInvalid, timeRegex } = this.state;
-    const { time, is24Hour, delimiter, includeSeconds } = this.props;
-    if (isOpen && !prevState.isOpen && timeState && !isInvalid) {
+    const { timeState, isTimeOptionsOpen, isInvalid, timeRegex } = this.state;
+    const { time, is24Hour, delimiter, includeSeconds, isOpen } = this.props;
+    if (prevProps.isOpen !== isOpen) {
+      this.onToggle(isOpen);
+    }
+
+    if (isTimeOptionsOpen && !prevState.isTimeOptionsOpen && timeState && !isInvalid) {
       this.scrollToSelection(timeState);
     }
     if (delimiter !== prevProps.delimiter) {
@@ -340,18 +349,21 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       const { timeRegex, isInvalid } = prevState;
       const { delimiter, is24Hour, includeSeconds } = this.props;
       const time = parseTime(prevState.timeState, timeRegex, delimiter, !is24Hour, includeSeconds);
-
       return {
-        isOpen,
+        isTimeOptionsOpen: isOpen,
         timeState: time,
         isInvalid: isOpen ? isInvalid : !this.isValid(time)
       };
     });
+    this.props.setIsOpen(isOpen);
+    if (!isOpen) {
+      this.inputRef.current.focus();
+    }
   };
 
   onSelect = (e: any) => {
     const { timeRegex, timeState } = this.state;
-    const { delimiter, is24Hour, includeSeconds } = this.props;
+    const { delimiter, is24Hour, includeSeconds, setIsOpen } = this.props;
     const time = parseTime(e.target.textContent, timeRegex, delimiter, !is24Hour, includeSeconds);
     if (time !== timeState) {
       this.onInputChange(time);
@@ -359,13 +371,14 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
 
     this.inputRef.current.focus();
     this.setState({
-      isOpen: false,
+      isTimeOptionsOpen: false,
       isInvalid: false
     });
+    setIsOpen(false);
   };
 
   onInputClick = (e: any) => {
-    if (!this.state.isOpen) {
+    if (!this.state.isTimeOptionsOpen) {
       this.onToggle(true);
     }
     e.stopPropagation();
@@ -417,6 +430,10 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       inputProps,
       /* eslint-disable @typescript-eslint/no-unused-vars */
       onChange,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      setIsOpen,
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      isOpen,
       time,
       validateTime,
       minTime,
@@ -425,7 +442,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
-    const { timeState, isOpen, isInvalid, minTimeState, maxTimeState } = this.state;
+    const { timeState, isTimeOptionsOpen, isInvalid, minTimeState, maxTimeState } = this.state;
     const style = { '--pf-c-date-picker__input--c-form-control--Width': width } as React.CSSProperties;
     const options = makeTimeOptions(stepMinutes, !is24Hour, delimiter, minTimeState, maxTimeState, includeSeconds);
     const isValidFormat = this.isValidFormat(timeState);
@@ -484,13 +501,13 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
                     appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
                     trigger={textInput}
                     popper={menuContainer}
-                    isVisible={isOpen}
+                    isVisible={isTimeOptionsOpen}
                   />
                 ) : (
                   textInput
                 )}
               </div>
-              {isOpen && menuAppendTo === 'inline' && menuContainer}
+              {isTimeOptionsOpen && menuAppendTo === 'inline' && menuContainer}
             </div>
           </InputGroup>
           {isInvalid && (

package/src/components/Toolbar/examples/Toolbar.md

@@ -811,6 +811,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownSeparator,
+  DropdownPosition,
   KebabToggle,
   SearchInput
 } from '@patternfly/react-core';
@@ -1036,6 +1037,7 @@ class ToolbarWithFilterExample extends React.Component {
             isOpen={kebabIsOpen}
             isPlain
             dropdownItems={dropdownItems}
+            position={DropdownPosition.right}
           />
         </ToolbarItem>
       </React.Fragment>
@@ -1080,6 +1082,7 @@ import {
   DropdownToggle,
   DropdownToggleCheckbox,
   DropdownItem,
+  DropdownPosition,
   Divider,
   OverflowMenu,
   OverflowMenuContent,
@@ -1293,6 +1296,7 @@ class ToolbarStacked extends React.Component {
                     isOpen={kebabIsOpen}
                     isPlain
                     dropdownItems={dropdownItems}
+                    position={DropdownPosition.right}
                   />
                 </OverflowMenuControl>
               </OverflowMenu>

package/src/demos/Card/Card.md

@@ -525,6 +525,8 @@ class CardViewBasic extends React.Component {
                 isOpen={isLowerToolbarKebabDropdownOpen}
                 isPlain
                 dropdownItems={toolbarKebabDropdownItems}
+                isFlipEnabled
+                menuAppendTo="parent"
               />
             </OverflowMenuControl>
           </OverflowMenu>

package/src/demos/{DatePicker.md → DatePicker/DatePicker.md}

@@ -146,3 +146,11 @@ DateTimeRangePicker = () => {
 }
 ```
 
+
+### Date and time pickers in modal
+Modals trap focus and watch a few document level events. In order to place a date picker in a modal:
+- To avoid the modal's escape press event handler from overruling the date picker's escape press handlers, use the `DatePickerRef` to close the calendar when it is open and the escape key is pressed.
+- Append the calendar to the modal to keep it as close to the date picker in the DOM while maintaining correct layouts visually
+  In order to place a time picker in the modal, its menu must be appended to the time picker's parent.
+```ts file="./examples/DateTimePickerInModal.tsx"
+```

package/src/demos/DatePicker/examples/DateTimePickerInModal.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { DatePicker, Modal, ModalVariant, Button, TimePicker, InputGroup } from '@patternfly/react-core';
+
+export const SimpleModal = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isTimePickerOpen, setIsTimePickerOpen] = React.useState(false);
+  const dateRef = React.useRef(null);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const onEscapePress = (event: KeyboardEvent) => {
+    if (dateRef && dateRef.current && dateRef.current.isCalendarOpen) {
+      dateRef.current.toggleCalendar(false, event.key);
+    } else if (isTimePickerOpen) {
+      setIsTimePickerOpen(false);
+    } else {
+      handleModalToggle();
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Launch modal
+      </Button>
+      <Modal
+        id="date-time-picker-modal"
+        variant={ModalVariant.small}
+        title="Generic modal header"
+        isOpen={isModalOpen}
+        onEscapePress={onEscapePress}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        <InputGroup>
+          <DatePicker ref={dateRef} appendTo={() => document.getElementById('date-time-picker-modal')} />
+          <TimePicker menuAppendTo="parent" isOpen={isTimePickerOpen} setIsOpen={setIsTimePickerOpen} />
+        </InputGroup>
+      </Modal>
+    </React.Fragment>
+  );
+};