@mui/x-date-pickers 7.0.0-alpha.7 → 7.0.0-alpha.9

package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js

@@ -0,0 +1,190 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["label", "autoFocus", "ownerState", "notched"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useFormControl } from '@mui/material/FormControl';
+import { styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import { pickersOutlinedInputClasses, getPickersOutlinedInputUtilityClass } from './pickersOutlinedInputClasses';
+import Outline from './Outline';
+import { PickersInputBase } from '../PickersInputBase';
+import { PickersInputBaseRoot, PickersInputBaseSectionsContainer } from '../PickersInputBase/PickersInputBase';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+const PickersOutlinedInputRoot = styled(PickersInputBaseRoot, {
+  name: 'MuiPickersOutlinedInput',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme,
+  ownerState
+}) => {
+  const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+  return {
+    padding: '0 14px',
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    [`&:hover .${pickersOutlinedInputClasses.notchedOutline}`]: {
+      borderColor: (theme.vars || theme).palette.text.primary
+    },
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      [`&:hover .${pickersOutlinedInputClasses.notchedOutline}`]: {
+        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+      }
+    },
+    [`&.${pickersOutlinedInputClasses.focused} .${pickersOutlinedInputClasses.notchedOutline}`]: {
+      borderStyle: 'solid',
+      // @ts-ignore
+      borderColor: (theme.vars || theme).palette[ownerState.color].main,
+      borderWidth: 2
+    },
+    [`&.${pickersOutlinedInputClasses.disabled}`]: {
+      [`& .${pickersOutlinedInputClasses.notchedOutline}`]: {
+        borderColor: (theme.vars || theme).palette.action.disabled
+      },
+      '*': {
+        color: (theme.vars || theme).palette.action.disabled
+      }
+    },
+    [`&.${pickersOutlinedInputClasses.error} .${pickersOutlinedInputClasses.notchedOutline}`]: {
+      borderColor: (theme.vars || theme).palette.error.main
+    }
+  };
+});
+const PickersOutlinedInputSectionsContainer = styled(PickersInputBaseSectionsContainer, {
+  name: 'MuiPickersOutlinedInput',
+  slot: 'SectionsContainer',
+  overridesResolver: (props, styles) => styles.sectionsContainer
+})(({
+  ownerState
+}) => _extends({
+  padding: '16.5px 0'
+}, ownerState.size === 'small' && {
+  padding: '8.5px 0'
+}));
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    notchedOutline: ['notchedOutline'],
+    input: ['input']
+  };
+  const composedClasses = composeClasses(slots, getPickersOutlinedInputUtilityClass, classes);
+  return _extends({}, classes, composedClasses);
+};
+/**
+ * @ignore - internal component.
+ */
+const PickersOutlinedInput = /*#__PURE__*/React.forwardRef(function PickersOutlinedInput(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersOutlinedInput'
+  });
+  const {
+      label,
+      ownerState: ownerStateProp,
+      notched
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const muiFormControl = useFormControl();
+  const ownerState = _extends({}, props, ownerStateProp, muiFormControl, {
+    color: (muiFormControl == null ? void 0 : muiFormControl.color) || 'primary'
+  });
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(PickersInputBase, _extends({
+    slots: {
+      root: PickersOutlinedInputRoot,
+      input: PickersOutlinedInputSectionsContainer
+    },
+    renderSuffix: state => /*#__PURE__*/_jsx(Outline, {
+      shrink: Boolean(notched || state.adornedStart || state.focused || state.filled),
+      notched: Boolean(notched || state.adornedStart || state.focused || state.filled),
+      className: classes.notchedOutline,
+      label: label != null && label !== '' && muiFormControl != null && muiFormControl.required ? /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [label, "\u2009", '*']
+      }) : label,
+      ownerState: ownerState
+    })
+  }, other, {
+    label: label,
+    classes: classes,
+    ref: ref
+  }));
+});
+process.env.NODE_ENV !== "production" ? PickersOutlinedInput.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If true, the whole element is editable.
+   * Useful when all the sections are selected.
+   */
+  contentEditable: PropTypes.bool.isRequired,
+  /**
+   * The elements to render.
+   * Each element contains the prop to edit a section of the value.
+   */
+  elements: PropTypes.arrayOf(PropTypes.shape({
+    after: PropTypes.object.isRequired,
+    before: PropTypes.object.isRequired,
+    container: PropTypes.object.isRequired,
+    content: PropTypes.object.isRequired
+  })).isRequired,
+  endAdornment: PropTypes.node,
+  fullWidth: PropTypes.bool,
+  id: PropTypes.string,
+  inputProps: PropTypes.object,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  label: PropTypes.node,
+  margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  notched: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onInput: PropTypes.func.isRequired,
+  onKeyDown: PropTypes.func.isRequired,
+  onPaste: PropTypes.func.isRequired,
+  ownerState: PropTypes.any,
+  readOnly: PropTypes.bool,
+  renderSuffix: PropTypes.func,
+  sectionListRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      getRoot: PropTypes.func.isRequired,
+      getSectionContainer: PropTypes.func.isRequired,
+      getSectionContent: PropTypes.func.isRequired,
+      getSectionIndexFromDOMElement: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * The components used for each slot inside.
+   *
+   * @default {}
+   */
+  slots: PropTypes.object,
+  startAdornment: PropTypes.node,
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  value: PropTypes.string.isRequired
+} : void 0;
+export { PickersOutlinedInput };
+PickersOutlinedInput.muiName = 'Input';

package/PickersTextField/PickersOutlinedInput/index.d.ts

@@ -0,0 +1,4 @@
+export { PickersOutlinedInput } from './PickersOutlinedInput';
+export type { PickersOutlinedInputProps } from './PickersOutlinedInput';
+export type { PickersOutlinedInputClasses, PickersOutlinedInputClassKey, } from './pickersOutlinedInputClasses';
+export { getPickersOutlinedInputUtilityClass, pickersOutlinedInputClasses, } from './pickersOutlinedInputClasses';

package/PickersTextField/PickersOutlinedInput/index.js

@@ -0,0 +1,2 @@
+export { PickersOutlinedInput } from './PickersOutlinedInput';
+export { getPickersOutlinedInputUtilityClass, pickersOutlinedInputClasses } from './pickersOutlinedInputClasses';

package/PickersTextField/PickersOutlinedInput/pickersOutlinedInputClasses.d.ts

@@ -0,0 +1,22 @@
+import { PickersInputBaseClasses } from '../PickersInputBase';
+export interface PickersOutlinedInputClasses extends PickersInputBaseClasses {
+    /** Styles applied to the NotchedOutline element. */
+    notchedOutline: string;
+}
+export type PickersOutlinedInputClassKey = keyof PickersOutlinedInputClasses;
+export declare function getPickersOutlinedInputUtilityClass(slot: string): string;
+export declare const pickersOutlinedInputClasses: {
+    input: string;
+    root: string;
+    notchedOutline: string;
+    disabled: string;
+    readOnly: string;
+    error: string;
+    focused: string;
+    adornedStart: string;
+    adornedEnd: string;
+    sectionsContainer: string;
+    sectionContent: string;
+    sectionBefore: string;
+    sectionAfter: string;
+};

package/PickersTextField/PickersOutlinedInput/pickersOutlinedInputClasses.js

@@ -0,0 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import { pickersInputBaseClasses } from '../PickersInputBase';
+export function getPickersOutlinedInputUtilityClass(slot) {
+  return generateUtilityClass('MuiPickersOutlinedInput', slot);
+}
+export const pickersOutlinedInputClasses = _extends({}, pickersInputBaseClasses, generateUtilityClasses('MuiPickersOutlinedInput', ['root', 'notchedOutline', 'input']));

package/PickersTextField/PickersTextField.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const PickersTextField: React.ForwardRefExoticComponent<(Omit<import("./PickersTextField.types").PickersFilledTextFieldProps, "ref"> | Omit<import("./PickersTextField.types").PickersOutlinedTextFieldProps, "ref"> | Omit<import("./PickersTextField.types").PickersStandardTextFieldProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export { PickersTextField };

package/PickersTextField/PickersTextField.js

@@ -0,0 +1,258 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled, useThemeProps } from '@mui/material/styles';
+import useForkRef from '@mui/utils/useForkRef';
+import composeClasses from '@mui/utils/composeClasses';
+import useId from '@mui/utils/useId';
+import InputLabel from '@mui/material/InputLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import FormControl from '@mui/material/FormControl';
+import { getPickersTextFieldUtilityClass } from './pickersTextFieldClasses';
+import { PickersOutlinedInput } from './PickersOutlinedInput';
+import { PickersFilledInput } from './PickersFilledInput';
+import { PickersInput } from './PickersInput';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const VARIANT_COMPONENT = {
+  standard: PickersInput,
+  filled: PickersFilledInput,
+  outlined: PickersOutlinedInput
+};
+const PickersTextFieldRoot = styled(FormControl, {
+  name: 'MuiPickersTextField',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
+const useUtilityClasses = ownerState => {
+  const {
+    focused,
+    disabled,
+    classes,
+    required
+  } = ownerState;
+  const slots = {
+    root: ['root', focused && !disabled && 'focused', disabled && 'disabled', required && 'required']
+  };
+  return composeClasses(slots, getPickersTextFieldUtilityClass, classes);
+};
+const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersTextField'
+  });
+  const {
+      // Props used by FormControl
+      onFocus,
+      onBlur,
+      className,
+      color = 'primary',
+      disabled = false,
+      error = false,
+      variant = 'outlined',
+      required = false,
+      // Props used by PickersInput
+      InputProps,
+      inputProps,
+      inputRef,
+      sectionListRef,
+      elements,
+      areAllSectionsEmpty,
+      onClick,
+      onKeyDown,
+      onPaste,
+      onInput,
+      endAdornment,
+      startAdornment,
+      tabIndex,
+      contentEditable,
+      focused,
+      value,
+      onChange,
+      fullWidth,
+      id: idProp,
+      // Props used by FormHelperText
+      helperText,
+      FormHelperTextProps,
+      // Props used by InputLabel
+      label,
+      InputLabelProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootRef = React.useRef(null);
+  const handleRootRef = useForkRef(ref, rootRef);
+  const id = useId(idProp);
+  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+  const inputLabelId = label && id ? `${id}-label` : undefined;
+  const ownerState = _extends({}, props, {
+    color,
+    disabled,
+    error,
+    focused,
+    required,
+    variant
+  });
+  const classes = useUtilityClasses(ownerState);
+  const PickersInputComponent = VARIANT_COMPONENT[variant];
+  return /*#__PURE__*/_jsxs(PickersTextFieldRoot, _extends({
+    className: clsx(classes.root, className),
+    ref: handleRootRef,
+    focused: focused,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    disabled: disabled,
+    variant: variant,
+    error: error,
+    color: color,
+    fullWidth: fullWidth,
+    required: required,
+    ownerState: ownerState
+  }, other, {
+    children: [/*#__PURE__*/_jsx(InputLabel, _extends({
+      htmlFor: id,
+      id: inputLabelId
+    }, InputLabelProps, {
+      children: label
+    })), /*#__PURE__*/_jsx(PickersInputComponent, _extends({
+      elements: elements,
+      areAllSectionsEmpty: areAllSectionsEmpty,
+      onClick: onClick,
+      onKeyDown: onKeyDown,
+      onInput: onInput,
+      onPaste: onPaste,
+      endAdornment: endAdornment,
+      startAdornment: startAdornment,
+      tabIndex: tabIndex,
+      contentEditable: contentEditable,
+      value: value,
+      onChange: onChange,
+      id: id,
+      fullWidth: fullWidth,
+      inputProps: inputProps,
+      inputRef: inputRef,
+      sectionListRef: sectionListRef,
+      label: label
+    }, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
+      id: helperTextId
+    }, FormHelperTextProps, {
+      children: helperText
+    }))]
+  }));
+});
+process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
+  /**
+   * If true, the whole element is editable.
+   * Useful when all the sections are selected.
+   */
+  contentEditable: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  /**
+   * The elements to render.
+   * Each element contains the prop to edit a section of the value.
+   */
+  elements: PropTypes.arrayOf(PropTypes.shape({
+    after: PropTypes.object.isRequired,
+    before: PropTypes.object.isRequired,
+    container: PropTypes.object.isRequired,
+    content: PropTypes.object.isRequired
+  })).isRequired,
+  endAdornment: PropTypes.node,
+  error: PropTypes.bool.isRequired,
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused: PropTypes.bool,
+  FormHelperTextProps: PropTypes.object,
+  fullWidth: PropTypes.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.node,
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel: PropTypes.bool,
+  id: PropTypes.string,
+  InputLabelProps: PropTypes.object,
+  inputProps: PropTypes.object,
+  /**
+   * Props applied to the Input element.
+   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+   * component depending on the `variant` prop value.
+   */
+  InputProps: PropTypes.object,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  label: PropTypes.node,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  onBlur: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onFocus: PropTypes.func.isRequired,
+  onInput: PropTypes.func.isRequired,
+  onKeyDown: PropTypes.func.isRequired,
+  onPaste: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   * @default false
+   */
+  required: PropTypes.bool,
+  sectionListRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      getRoot: PropTypes.func.isRequired,
+      getSectionContainer: PropTypes.func.isRequired,
+      getSectionContent: PropTypes.func.isRequired,
+      getSectionIndexFromDOMElement: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: PropTypes.oneOf(['medium', 'small']),
+  startAdornment: PropTypes.node,
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  value: PropTypes.string.isRequired,
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
+} : void 0;
+export { PickersTextField };

package/{internals/components/PickersTextField → PickersTextField}/PickersTextField.types.d.ts

@@ -3,7 +3,10 @@ import { FormControlProps } from '@mui/material/FormControl';
 import { FormHelperTextProps } from '@mui/material/FormHelperText';
 import { InputLabelProps } from '@mui/material/InputLabel';
 import { TextFieldVariants } from '@mui/material/TextField';
-import { PickersFilledInputProps, PickersInputPropsUsedByField, PickersOutlinedInputProps, PickersStandardInputProps } from '../PickersInput/PickersInput.types';
+import { PickersInputPropsUsedByField } from './PickersInputBase/PickersInputBase.types';
+import { PickersInputProps } from './PickersInput';
+import { PickersOutlinedInputProps } from './PickersOutlinedInput';
+import { PickersFilledInputProps } from './PickersFilledInput';
 interface PickersTextFieldPropsUsedByField {
     onFocus: React.FocusEventHandler<HTMLDivElement>;
     onBlur: React.FocusEventHandler<HTMLDivElement>;
@@ -30,7 +33,7 @@ export interface PickersStandardTextFieldProps extends PickersBaseTextFieldProps
      * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
      * component depending on the `variant` prop value.
      */
-    InputProps?: Partial<PickersStandardInputProps>;
+    InputProps?: Partial<PickersInputProps>;
 }
 export interface PickersOutlinedTextFieldProps extends PickersBaseTextFieldProps {
     /**

package/PickersTextField/index.d.ts

@@ -0,0 +1,8 @@
+export { PickersTextField } from './PickersTextField';
+export type { PickersTextFieldProps } from './PickersTextField.types';
+export { pickersTextFieldClasses, getPickersTextFieldUtilityClass, } from './pickersTextFieldClasses';
+export type { PickersTextFieldClasses, PickersTextFieldClassKey } from './pickersTextFieldClasses';
+export * from './PickersInput';
+export * from './PickersFilledInput';
+export * from './PickersOutlinedInput';
+export * from './PickersInputBase';

package/PickersTextField/index.js

@@ -0,0 +1,6 @@
+export { PickersTextField } from './PickersTextField';
+export { pickersTextFieldClasses, getPickersTextFieldUtilityClass } from './pickersTextFieldClasses';
+export * from './PickersInput';
+export * from './PickersFilledInput';
+export * from './PickersOutlinedInput';
+export * from './PickersInputBase';

package/PickersTextField/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/PickersTextField/index.js",
+  "types": "./index.d.ts"
+}

package/README.md

@@ -34,7 +34,7 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.8.6",
+  "@mui/material": "^5.15.0",
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0"
 },

package/StaticDatePicker/StaticDatePicker.js

@@ -60,9 +60,6 @@ StaticDatePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * Formats the day of week displayed in the calendar header.

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -80,9 +80,6 @@ StaticDateTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * Formats the day of week displayed in the calendar header.

package/StaticTimePicker/StaticTimePicker.js

@@ -72,9 +72,6 @@ StaticTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * The default value.

package/TimeClock/TimeClock.js

@@ -463,6 +463,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
   /**
    * Available views.
+   * @default ['hours', 'minutes']
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired)
 } : void 0;

package/TimeClock/TimeClock.types.d.ts

@@ -15,6 +15,11 @@ export interface TimeClockSlots extends PickersArrowSwitcherSlots {
 export interface TimeClockSlotProps extends PickersArrowSwitcherSlotProps {
 }
 export interface TimeClockProps<TDate, TView extends TimeViewWithMeridiem = TimeView> extends ExportedTimeClockProps<TDate>, BaseClockProps<TDate, TView> {
+    /**
+     * Available views.
+     * @default ['hours', 'minutes']
+     */
+    views?: readonly TView[];
     /**
      * Override or extend the styles applied to the component.
      */

package/TimePicker/TimePicker.js

@@ -65,9 +65,6 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/TimePicker/TimePickerToolbar.js

@@ -214,9 +214,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
   ampm: PropTypes.bool,
   ampmInClock: PropTypes.bool,
   classes: PropTypes.object,
-  /**
-   * className applied to the root component.
-   */
   className: PropTypes.string,
   disabled: PropTypes.bool,
   /**

package/YearCalendar/YearCalendar.js

@@ -265,9 +265,6 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-  /**
-   * className applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * The default selected value.

package/YearCalendar/YearCalendar.types.d.ts

@@ -12,9 +12,6 @@ export interface ExportedYearCalendarProps {
 }
 export interface YearCalendarProps<TDate> extends ExportedYearCalendarProps, YearValidationProps<TDate>, BaseDateValidationProps<TDate>, TimezoneProps {
     autoFocus?: boolean;
-    /**
-     * className applied to the root element.
-     */
     className?: string;
     /**
      * Override or extend the styles applied to the component.

package/hooks/useClearableField.js

@@ -42,8 +42,8 @@ export const useClearableField = props => {
   });
   return _extends({}, other, {
     InputProps: _extends({}, InputProps, {
-      endAdornment: clearable ? /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(InputAdornment, {
+      endAdornment: /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [clearable && /*#__PURE__*/_jsx(InputAdornment, {
           position: "end",
           sx: {
             marginRight: InputProps != null && InputProps.endAdornment ? -1 : -1.5
@@ -55,7 +55,7 @@ export const useClearableField = props => {
             }, endClearIconProps))
           }))
         }), InputProps == null ? void 0 : InputProps.endAdornment]
-      }) : InputProps == null ? void 0 : InputProps.endAdornment
+      })
     }),
     sx: [{
       '& .clearButton': {