@mui/x-date-pickers 8.0.0-beta.2 → 8.0.0

package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -1,91 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props"],
-  _excluded2 = ["ownerState"];
-import * as React from 'react';
-import useSlotProps from '@mui/utils/useSlotProps';
-import { PickerPopper } from "../../components/PickerPopper/PickerPopper.js";
-import { usePicker } from "../usePicker/index.js";
-import { PickersLayout } from "../../../PickersLayout/index.js";
-import { PickerProvider } from "../../components/PickerProvider.js";
-import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js";
-
-/**
- * Hook managing all the single-date desktop pickers:
- * - DesktopDatePicker
- * - DesktopDateTimePicker
- * - DesktopTimePicker
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const useDesktopPicker = _ref => {
-  let {
-      props
-    } = _ref,
-    pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const {
-    slots,
-    slotProps: innerSlotProps,
-    label,
-    inputRef,
-    localeText
-  } = props;
-  const {
-    providerProps,
-    renderCurrentView,
-    ownerState
-  } = usePicker(_extends({}, pickerParams, {
-    props,
-    localeText,
-    autoFocusView: true,
-    viewContainerRole: 'dialog',
-    variant: 'desktop'
-  }));
-  const labelId = providerProps.privateContextValue.labelId;
-  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
-  const Field = slots.field;
-  const _useSlotProps = useSlotProps({
-      elementType: Field,
-      externalSlotProps: innerSlotProps?.field,
-      additionalProps: _extends({}, isToolbarHidden && {
-        id: labelId
-      }),
-      ownerState
-    }),
-    fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-  const Layout = slots.layout ?? PickersLayout;
-  let labelledById = labelId;
-  if (isToolbarHidden) {
-    if (label) {
-      labelledById = `${labelId}-label`;
-    } else {
-      labelledById = undefined;
-    }
-  }
-  const slotProps = _extends({}, innerSlotProps, {
-    toolbar: _extends({}, innerSlotProps?.toolbar, {
-      titleId: labelId
-    }),
-    popper: _extends({
-      'aria-labelledby': labelledById
-    }, innerSlotProps?.popper)
-  });
-  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
-      slots: slots,
-      slotProps: slotProps,
-      inputRef: inputRef,
-      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickerPopper, {
-        slots: slots,
-        slotProps: slotProps,
-        children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
-          slots: slots,
-          slotProps: slotProps,
-          children: renderCurrentView()
-        }))
-      })]
-    })
-  }));
-  return {
-    renderPicker
-  };
-};

package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { BasePickerProps } from "../../models/props/basePickerProps.js";
-import { PickerPopperSlots, PickerPopperSlotProps } from "../../components/PickerPopper/PickerPopper.js";
-import { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.js";
-import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js";
-import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
-import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
-import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
-export interface UseDesktopPickerSlots extends Pick<PickerPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
-  /**
-   * Component used to enter the date with the keyboard.
-   */
-  field: React.ElementType;
-}
-export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickerPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
-  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
-}
-export interface UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {}
-export interface DesktopOnlyPickerProps extends UsePickerNonStaticProps {
-  /**
-   * If `true`, the `input` element is focused during the first mount.
-   * @default false
-   */
-  autoFocus?: boolean;
-}
-export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerValue, TView, TError, any>> extends BasePickerProps<PickerValue, any, TError, TExternalProps>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
-  /**
-   * Overridable component slots.
-   * @default {}
-   */
-  slots: UseDesktopPickerSlots;
-  /**
-   * The props used for each component slot.
-   * @default {}
-   */
-  slotProps?: UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>;
-}
-export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParameters<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
-  props: TExternalProps;
-}

package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.types.js

@@ -1 +0,0 @@
-export {};

package/modern/internals/hooks/useField/buildSectionsFromFormat.d.ts

@@ -1,15 +0,0 @@
-import { FieldSection, MuiPickersAdapter, PickerValidDate } from "../../../models/index.js";
-import { PickersLocaleText } from "../../../locales/index.js";
-interface BuildSectionsFromFormatParameters {
-  utils: MuiPickersAdapter;
-  format: string;
-  formatDensity: 'dense' | 'spacious';
-  isRtl: boolean;
-  shouldRespectLeadingZeros: boolean;
-  localeText: PickersLocaleText;
-  localizedDigits: string[];
-  date: PickerValidDate | null;
-  enableAccessibleFieldDOMStructure: boolean;
-}
-export declare const buildSectionsFromFormat: (parameters: BuildSectionsFromFormatParameters) => FieldSection[];
-export {};

package/modern/internals/hooks/useField/buildSectionsFromFormat.js

@@ -1,254 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { applyLocalizedDigits, cleanLeadingZeros, doesSectionFormatHaveLeadingZeros, getDateSectionConfigFromFormatToken, removeLocalizedDigits } from "./useField.utils.js";
-const expandFormat = ({
-  utils,
-  format
-}) => {
-  // Expand the provided format
-  let formatExpansionOverflow = 10;
-  let prevFormat = format;
-  let nextFormat = utils.expandFormat(format);
-  while (nextFormat !== prevFormat) {
-    prevFormat = nextFormat;
-    nextFormat = utils.expandFormat(prevFormat);
-    formatExpansionOverflow -= 1;
-    if (formatExpansionOverflow < 0) {
-      throw new Error('MUI X: The format expansion seems to be in an infinite loop. Please open an issue with the format passed to the component.');
-    }
-  }
-  return nextFormat;
-};
-const getEscapedPartsFromFormat = ({
-  utils,
-  expandedFormat
-}) => {
-  const escapedParts = [];
-  const {
-    start: startChar,
-    end: endChar
-  } = utils.escapedCharacters;
-  const regExp = new RegExp(`(\\${startChar}[^\\${endChar}]*\\${endChar})+`, 'g');
-  let match = null;
-  // eslint-disable-next-line no-cond-assign
-  while (match = regExp.exec(expandedFormat)) {
-    escapedParts.push({
-      start: match.index,
-      end: regExp.lastIndex - 1
-    });
-  }
-  return escapedParts;
-};
-const getSectionPlaceholder = (utils, localeText, sectionConfig, sectionFormat) => {
-  switch (sectionConfig.type) {
-    case 'year':
-      {
-        return localeText.fieldYearPlaceholder({
-          digitAmount: utils.formatByString(utils.date(undefined, 'default'), sectionFormat).length,
-          format: sectionFormat
-        });
-      }
-    case 'month':
-      {
-        return localeText.fieldMonthPlaceholder({
-          contentType: sectionConfig.contentType,
-          format: sectionFormat
-        });
-      }
-    case 'day':
-      {
-        return localeText.fieldDayPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'weekDay':
-      {
-        return localeText.fieldWeekDayPlaceholder({
-          contentType: sectionConfig.contentType,
-          format: sectionFormat
-        });
-      }
-    case 'hours':
-      {
-        return localeText.fieldHoursPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'minutes':
-      {
-        return localeText.fieldMinutesPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'seconds':
-      {
-        return localeText.fieldSecondsPlaceholder({
-          format: sectionFormat
-        });
-      }
-    case 'meridiem':
-      {
-        return localeText.fieldMeridiemPlaceholder({
-          format: sectionFormat
-        });
-      }
-    default:
-      {
-        return sectionFormat;
-      }
-  }
-};
-const createSection = ({
-  utils,
-  date,
-  shouldRespectLeadingZeros,
-  localeText,
-  localizedDigits,
-  now,
-  token,
-  startSeparator
-}) => {
-  if (token === '') {
-    throw new Error('MUI X: Should not call `commitToken` with an empty token');
-  }
-  const sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
-  const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, sectionConfig.contentType, sectionConfig.type, token);
-  const hasLeadingZerosInInput = shouldRespectLeadingZeros ? hasLeadingZerosInFormat : sectionConfig.contentType === 'digit';
-  const isValidDate = utils.isValid(date);
-  let sectionValue = isValidDate ? utils.formatByString(date, token) : '';
-  let maxLength = null;
-  if (hasLeadingZerosInInput) {
-    if (hasLeadingZerosInFormat) {
-      maxLength = sectionValue === '' ? utils.formatByString(now, token).length : sectionValue.length;
-    } else {
-      if (sectionConfig.maxLength == null) {
-        throw new Error(`MUI X: The token ${token} should have a 'maxDigitNumber' property on it's adapter`);
-      }
-      maxLength = sectionConfig.maxLength;
-      if (isValidDate) {
-        sectionValue = applyLocalizedDigits(cleanLeadingZeros(removeLocalizedDigits(sectionValue, localizedDigits), maxLength), localizedDigits);
-      }
-    }
-  }
-  return _extends({}, sectionConfig, {
-    format: token,
-    maxLength,
-    value: sectionValue,
-    placeholder: getSectionPlaceholder(utils, localeText, sectionConfig, token),
-    hasLeadingZerosInFormat,
-    hasLeadingZerosInInput,
-    startSeparator,
-    endSeparator: '',
-    modified: false
-  });
-};
-const buildSections = parameters => {
-  const {
-    utils,
-    expandedFormat,
-    escapedParts
-  } = parameters;
-  const now = utils.date(undefined);
-  const sections = [];
-  let startSeparator = '';
-
-  // This RegExp tests if the beginning of a string corresponds to a supported token
-  const validTokens = Object.keys(utils.formatTokenMap).sort((a, b) => b.length - a.length); // Sort to put longest word first
-
-  const regExpFirstWordInFormat = /^([a-zA-Z]+)/;
-  const regExpWordOnlyComposedOfTokens = new RegExp(`^(${validTokens.join('|')})*$`);
-  const regExpFirstTokenInWord = new RegExp(`^(${validTokens.join('|')})`);
-  const getEscapedPartOfCurrentChar = i => escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);
-  let i = 0;
-  while (i < expandedFormat.length) {
-    const escapedPartOfCurrentChar = getEscapedPartOfCurrentChar(i);
-    const isEscapedChar = escapedPartOfCurrentChar != null;
-    const firstWordInFormat = regExpFirstWordInFormat.exec(expandedFormat.slice(i))?.[1];
-
-    // The first word in the format is only composed of tokens.
-    // We extract those tokens to create a new sections.
-    if (!isEscapedChar && firstWordInFormat != null && regExpWordOnlyComposedOfTokens.test(firstWordInFormat)) {
-      let word = firstWordInFormat;
-      while (word.length > 0) {
-        const firstWord = regExpFirstTokenInWord.exec(word)[1];
-        word = word.slice(firstWord.length);
-        sections.push(createSection(_extends({}, parameters, {
-          now,
-          token: firstWord,
-          startSeparator
-        })));
-        startSeparator = '';
-      }
-      i += firstWordInFormat.length;
-    }
-    // The remaining format does not start with a token,
-    // We take the first character and add it to the current section's end separator.
-    else {
-      const char = expandedFormat[i];
-
-      // If we are on the opening or closing character of an escaped part of the format,
-      // Then we ignore this character.
-      const isEscapeBoundary = isEscapedChar && escapedPartOfCurrentChar?.start === i || escapedPartOfCurrentChar?.end === i;
-      if (!isEscapeBoundary) {
-        if (sections.length === 0) {
-          startSeparator += char;
-        } else {
-          sections[sections.length - 1].endSeparator += char;
-        }
-      }
-      i += 1;
-    }
-  }
-  if (sections.length === 0 && startSeparator.length > 0) {
-    sections.push({
-      type: 'empty',
-      contentType: 'letter',
-      maxLength: null,
-      format: '',
-      value: '',
-      placeholder: '',
-      hasLeadingZerosInFormat: false,
-      hasLeadingZerosInInput: false,
-      startSeparator,
-      endSeparator: '',
-      modified: false
-    });
-  }
-  return sections;
-};
-const postProcessSections = ({
-  isRtl,
-  formatDensity,
-  sections
-}) => {
-  return sections.map(section => {
-    const cleanSeparator = separator => {
-      let cleanedSeparator = separator;
-      if (isRtl && cleanedSeparator !== null && cleanedSeparator.includes(' ')) {
-        cleanedSeparator = `\u2069${cleanedSeparator}\u2066`;
-      }
-      if (formatDensity === 'spacious' && ['/', '.', '-'].includes(cleanedSeparator)) {
-        cleanedSeparator = ` ${cleanedSeparator} `;
-      }
-      return cleanedSeparator;
-    };
-    section.startSeparator = cleanSeparator(section.startSeparator);
-    section.endSeparator = cleanSeparator(section.endSeparator);
-    return section;
-  });
-};
-export const buildSectionsFromFormat = parameters => {
-  let expandedFormat = expandFormat(parameters);
-  if (parameters.isRtl && parameters.enableAccessibleFieldDOMStructure) {
-    expandedFormat = expandedFormat.split(' ').reverse().join(' ');
-  }
-  const escapedParts = getEscapedPartsFromFormat(_extends({}, parameters, {
-    expandedFormat
-  }));
-  const sections = buildSections(_extends({}, parameters, {
-    expandedFormat,
-    escapedParts
-  }));
-  return postProcessSections(_extends({}, parameters, {
-    sections
-  }));
-};

package/modern/internals/hooks/useField/index.d.ts

@@ -1,4 +0,0 @@
-export { useField } from "./useField.js";
-export type { UseFieldInternalProps, UseFieldParameters, UseFieldReturnValue, UseFieldProps, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext } from './useField.types';
-export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
-export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";

package/modern/internals/hooks/useField/index.js

@@ -1,3 +0,0 @@
-export { useField } from "./useField.js";
-export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
-export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";

package/modern/internals/hooks/useField/syncSelectionToDOM.d.ts

@@ -1,9 +0,0 @@
-import { PickerValidValue } from "../../models/index.js";
-import { UseFieldDOMGetters } from "./useField.types.js";
-import { UseFieldStateReturnValue } from "./useFieldState.js";
-export declare function syncSelectionToDOM<TValue extends PickerValidValue>(parameters: SyncSelectionToDOMParameters<TValue>): void;
-export interface SyncSelectionToDOMParameters<TValue extends PickerValidValue> {
-  domGetters: UseFieldDOMGetters;
-  stateResponse: UseFieldStateReturnValue<TValue>;
-  focused: boolean;
-}

package/modern/internals/hooks/useField/syncSelectionToDOM.js

@@ -1,50 +0,0 @@
-import { getActiveElement } from "../../utils/utils.js";
-export function syncSelectionToDOM(parameters) {
-  const {
-    focused,
-    domGetters,
-    stateResponse: {
-      // States and derived states
-      parsedSelectedSections,
-      state
-    }
-  } = parameters;
-  if (!domGetters.isReady()) {
-    return;
-  }
-  const selection = document.getSelection();
-  if (!selection) {
-    return;
-  }
-  if (parsedSelectedSections == null) {
-    // If the selection contains an element inside the field, we reset it.
-    if (selection.rangeCount > 0 && domGetters.getRoot().contains(selection.getRangeAt(0).startContainer)) {
-      selection.removeAllRanges();
-    }
-    if (focused) {
-      domGetters.getRoot().blur();
-    }
-    return;
-  }
-
-  // On multi input range pickers we want to update selection range only for the active input
-  if (!domGetters.getRoot().contains(getActiveElement(document))) {
-    return;
-  }
-  const range = new window.Range();
-  let target;
-  if (parsedSelectedSections === 'all') {
-    target = domGetters.getRoot();
-  } else {
-    const section = state.sections[parsedSelectedSections];
-    if (section.type === 'empty') {
-      target = domGetters.getSectionContainer(parsedSelectedSections);
-    } else {
-      target = domGetters.getSectionContent(parsedSelectedSections);
-    }
-  }
-  range.selectNodeContents(target);
-  target.focus();
-  selection.removeAllRanges();
-  selection.addRange(range);
-}

package/modern/internals/hooks/useField/useField.d.ts

@@ -1,3 +0,0 @@
-import { UseFieldParameters, UseFieldReturnValue, UseFieldProps } from "./useField.types.js";
-import { PickerValidValue } from "../../models/index.js";
-export declare const useField: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TError, TValidationProps extends {}, TProps extends UseFieldProps<TEnableAccessibleFieldDOMStructure>>(parameters: UseFieldParameters<TValue, TEnableAccessibleFieldDOMStructure, TError, TValidationProps, TProps>) => UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;

package/modern/internals/hooks/useField/useField.js

@@ -1,9 +0,0 @@
-import { useFieldV7TextField } from "./useFieldV7TextField.js";
-import { useFieldV6TextField } from "./useFieldV6TextField.js";
-import { useNullableFieldPrivateContext } from "../useNullableFieldPrivateContext.js";
-export const useField = parameters => {
-  const fieldPrivateContext = useNullableFieldPrivateContext();
-  const enableAccessibleFieldDOMStructure = parameters.props.enableAccessibleFieldDOMStructure ?? fieldPrivateContext?.enableAccessibleFieldDOMStructure ?? true;
-  const useFieldTextField = enableAccessibleFieldDOMStructure ? useFieldV7TextField : useFieldV6TextField;
-  return useFieldTextField(parameters);
-};