Repository: h2oai/wave
File: ui/src/time_picker.tsx (TypeScript)

Code before:
  max?: S
  /** Limits the available minutes to select from. One of `1`, `5`, `10`, `15`, `20`, `30` or `60`. Defaults to `1`. */
  minutes_step?: U
}

const
  css = stylesheet({
    toolbar: {
      paddingTop: 16,
      paddingLeft: 16
    },
    toolbarTime: {
      fontSize: 26,
      cursor: 'pointer',
      $nest: {
        '&:hover': {
          backgroundColor: cssVar('$neutralLighter'),
          color: cssVar('$neutralDark')
        }
      }
    },
    toolbarText: { fontSize: 26 },
    toolbarLabel: { maxWidth: '70%' }
  }),
  popoverProps: Partial<PopperProps> | undefined = {
    container: () => document.querySelector(".ms-Panel") || document.body,
    placement: 'bottom-start',
    style: { pointerEvents: 'auto' },
    sx: {
      zIndex: 9999998, // Needs to be higher than Fluent UI Panel, but lower than ui.notification_bar.
      '& .MuiPaper-root': {
        borderRadius: '2px',
        boxShadow: `${cssVar('$text1')} 0px 6.4px 14.4px 0px, ${cssVar('$text2')} 0px 1.2px 3.6px 0px`
      },
      '& .MuiTypography-root, [role=listbox]>span': {
        fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
      }
    }
  }

type ToolbarProps = { time: S | null, setOpenView: (view: CalendarOrClockPickerView) => void, label?: S, switchAmPm: () => void }

const
  // TODO: Import 'ThemeProvider' directly from '@mui/material/styles/ThemeProvider', config Jest to transpile the module to prevent err.
  ThemeProvider = React.lazy(() => import('@mui/material/styles').then(({ ThemeProvider }) => ({ default: ThemeProvider }))),
  LocalizationProvider = React.lazy(() => import('@mui/x-date-pickers/LocalizationProvider').then(({ LocalizationProvider }) => ({ default: LocalizationProvider }))),
  TimePicker = React.lazy(() => import('@mui/x-date-pickers/TimePicker').then(({ TimePicker }) => ({ default: TimePicker }))),
  allowedMinutesSteps: { [key: U]: U } = { 1: 1, 5: 5, 10: 10, 15: 15, 20: 20, 30: 30, 60: 60 },
  parseTimeStringToDate = (time: S) => new Date(`2000-01-01T${time.slice(0, 5)}:00`),
  useTime = (themeObj: ThemeOptions) => {
    const

Review comment (suggestion):
This solution is fine, but I am wondering whether we couldn't use HTML parent of `XTimePicker` component for all cases.

Code after:
  max?: S
  /** Limits the available minutes to select from. One of `1`, `5`, `10`, `15`, `20`, `30` or `60`. Defaults to `1`. */
  minutes_step?: U
}

const
  css = stylesheet({
    toolbar: {
      paddingTop: 16,
      paddingLeft: 16
    },
    toolbarTime: {
      fontSize: 26,
      cursor: 'pointer',
      $nest: {
        '&:hover': {
          backgroundColor: cssVar('$neutralLighter'),
          color: cssVar('$neutralDark')
        }
      }
    },
    toolbarText: { fontSize: 26 },
    toolbarLabel: { maxWidth: '70%' }
  }),
  popoverProps: Partial<PopperProps> | undefined = {
    placement: 'bottom-start',
    sx: {
      zIndex: 2, // Needs to be higher than Fluent UI Panel, but lower than ui.notification_bar.
      '& .MuiPaper-root': {
        borderRadius: '2px',
        boxShadow: `${cssVar('$text1')} 0px 6.4px 14.4px 0px, ${cssVar('$text2')} 0px 1.2px 3.6px 0px`
      },
      '& .MuiTypography-root, [role=listbox]>span': {
        fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
      }
    }
  }

type ToolbarProps = { time: S | null, setOpenView: (view: CalendarOrClockPickerView) => void, label?: S, switchAmPm: () => void }

const
  // TODO: Import 'ThemeProvider' directly from '@mui/material/styles/ThemeProvider', config Jest to transpile the module to prevent err.
  ThemeProvider = React.lazy(() => import('@mui/material/styles').then(({ ThemeProvider }) => ({ default: ThemeProvider }))),
  LocalizationProvider = React.lazy(() => import('@mui/x-date-pickers/LocalizationProvider').then(({ LocalizationProvider }) => ({ default: LocalizationProvider }))),
  TimePicker = React.lazy(() => import('@mui/x-date-pickers/TimePicker').then(({ TimePicker }) => ({ default: TimePicker }))),
  allowedMinutesSteps: { [key: U]: U } = { 1: 1, 5: 5, 10: 10, 15: 15, 20: 20, 30: 30, 60: 60 },
  parseTimeStringToDate = (time: S) => new Date(`2000-01-01T${time.slice(0, 5)}:00`),
  useTime = (themeObj: ThemeOptions) => {
    const
      [theme, setTheme] = React.useState<Theme>(),
      [AdapterDateFns, setAdapterDateFns] = React.useState<typeof DateFnsUtils | null>(),