<commit_before>import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles';
import ClockPointer from './ClockPointer';
import { useUtils, MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
import { ClockViewType } from '../internal/pickers/constants/ClockType';
import { getHours, getMinutes } from '../internal/pickers/time-utils';
import { useGlobalKeyDown, keycode } from '../internal/pickers/hooks/useKeyDown';
import {
  WrapperVariantContext,
  IsStaticVariantContext,
} from '../internal/pickers/wrappers/WrapperVariantContext';
import { PickerSelectionState } from '../internal/pickers/hooks/usePickerState';
import { useMeridiemMode } from '../internal/pickers/hooks/date-helpers-hooks';

export interface ClockProps<TDate> extends ReturnType<typeof useMeridiemMode> {
  date: TDate | null;
  type: ClockViewType;
  value: number;
  isTimeDisabled: (timeValue: number, type: ClockViewType) => boolean;
  children: React.ReactNode[];
  onChange: (value: number, isFinish?: PickerSelectionState) => void;
  ampm?: boolean;
  minutesStep?: number;
  ampmInClock?: boolean;
  allowKeyboardControl?: boolean;
  getClockLabelText: (
    view: 'hours' | 'minutes' | 'seconds',
    time: TDate,
    adapter: MuiPickersAdapter<TDate>,
  ) => string;
}

export type ClockClassKey =
  | 'root'
  | 'clock'
  | 'squareMask'
  | 'pin'
  | 'amButton'
  | 'pmButton'
  | 'meridiemButtonSelected';

export const styles: MuiStyles<ClockClassKey> = (theme): StyleRules<ClockClassKey> => ({
  root: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    margin: theme.spacing(2),
  },
  clock: {
    backgroundColor: 'rgba(0,0,0,.07)',
    borderRadius: '50%',
    height: 220,
    width: 220,
    flexShrink: 0,
    position: 'relative',
    pointerEvents: 'none',
  },
  squareMask: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    pointerEvents: 'auto',
    outline: 0,
    // Disable scroll capabilities.
    touchAction: 'none',
    userSelect: 'none',
    '&:active': {
      cursor: 'move',
    },
  },
  pin: {
    width: 6,
    height: 6,
    borderRadius: '50%',
    backgroundColor: theme.palette.primary.main,
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
  },
  amButton: {
    zIndex: 1,
    left: 8,
    position: 'absolute',
    bottom: 8,
  },
  pmButton: {
    zIndex: 1,
    position: 'absolute',
    bottom: 8,
    right: 8,
  },
  meridiemButtonSelected: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
    '&:hover': {
      backgroundColor: theme.palette.primary.light,<commit_msg>[TimePicker] Add pointer cursor for clock in desktop (#24276)<commit_after>import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import { MuiStyles, StyleRules, WithStyles, withStyles } from '@material-ui/core/styles';
import ClockPointer from './ClockPointer';
import { useUtils, MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
import { ClockViewType } from '../internal/pickers/constants/ClockType';
import { getHours, getMinutes } from '../internal/pickers/time-utils';
import { useGlobalKeyDown, keycode } from '../internal/pickers/hooks/useKeyDown';
import {
  WrapperVariantContext,
  IsStaticVariantContext,
} from '../internal/pickers/wrappers/WrapperVariantContext';
import { PickerSelectionState } from '../internal/pickers/hooks/usePickerState';
import { useMeridiemMode } from '../internal/pickers/hooks/date-helpers-hooks';

export interface ClockProps<TDate> extends ReturnType<typeof useMeridiemMode> {
  date: TDate | null;
  type: ClockViewType;
  value: number;
  isTimeDisabled: (timeValue: number, type: ClockViewType) => boolean;
  children: React.ReactNode[];
  onChange: (value: number, isFinish?: PickerSelectionState) => void;
  ampm?: boolean;
  minutesStep?: number;
  ampmInClock?: boolean;
  allowKeyboardControl?: boolean;
  getClockLabelText: (
    view: 'hours' | 'minutes' | 'seconds',
    time: TDate,
    adapter: MuiPickersAdapter<TDate>,
  ) => string;
}

export type ClockClassKey =
  | 'root'
  | 'clock'
  | 'squareMask'
  | 'pin'
  | 'amButton'
  | 'pmButton'
  | 'meridiemButtonSelected';

export const styles: MuiStyles<ClockClassKey> = (theme): StyleRules<ClockClassKey> => ({
  root: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    margin: theme.spacing(2),
  },
  clock: {
    backgroundColor: 'rgba(0,0,0,.07)',
    borderRadius: '50%',
    height: 220,
    width: 220,
    flexShrink: 0,
    position: 'relative',
    pointerEvents: 'none',
  },
  squareMask: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    pointerEvents: 'auto',
    outline: 0,
    // Disable scroll capabilities.
    touchAction: 'none',
    userSelect: 'none',
    '@media (pointer: fine)': {
      cursor: 'pointer',
      borderRadius: '50%',
    },
    '&:active': {
      cursor: 'move',
    },
  },
  pin: {
    width: 6,
    height: 6,
    borderRadius: '50%',
    backgroundColor: theme.palette.primary.main,
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
  },
  amButton: {
    zIndex: 1,
    left: 8,
    position: 'absolute',
    bottom: 8,
  },
  pmButton: {
    zIndex: 1,
    position: 'absolute',
    bottom: 8,
    right: 8,
  },
  meridiemButtonSelected: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText,
    '&:hover': {
      backgroundColor: theme.palette.primary.light,
{'fraction_non_alphanumeric': 0.14963688566120587, 'fraction_numerical': 0.014693463941901706, 'mean_word_length': 3.79126213592233, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5622658', 'n_tokens_mistral': 1998, 'n_tokens_neox': 1947, 'n_words': 442}