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

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.d.ts

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { MultiSectionDigitalClockSectionClasses } from "./multiSectionDigitalClockSectionClasses.js";
-import type { MultiSectionDigitalClockOption, MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from './MultiSectionDigitalClock.types';
-import { FormProps } from "../internals/models/formProps.js";
-export interface ExportedMultiSectionDigitalClockSectionProps {
-  className?: string;
-  classes?: Partial<MultiSectionDigitalClockSectionClasses>;
-  slots?: MultiSectionDigitalClockSlots;
-  slotProps?: MultiSectionDigitalClockSlotProps;
-}
-export interface MultiSectionDigitalClockSectionProps<TSectionValue extends number | string> extends FormProps, ExportedMultiSectionDigitalClockSectionProps {
-  autoFocus?: boolean;
-  items: MultiSectionDigitalClockOption<TSectionValue>[];
-  onChange: (value: TSectionValue) => void;
-  active?: boolean;
-  skipDisabled?: boolean;
-  role?: string;
-}
-type MultiSectionDigitalClockSectionComponent = <TSectionValue extends number | string>(props: MultiSectionDigitalClockSectionProps<TSectionValue> & React.RefAttributes<HTMLUListElement>) => React.JSX.Element & {
-  propTypes?: any;
-};
-/**
- * @ignore - internal component.
- */
-export declare const MultiSectionDigitalClockSection: MultiSectionDigitalClockSectionComponent;
-export {};

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -1,209 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoFocus", "onChange", "className", "classes", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
-import * as React from 'react';
-import clsx from 'clsx';
-import { alpha, styled, useThemeProps } from '@mui/material/styles';
-import composeClasses from '@mui/utils/composeClasses';
-import MenuList from '@mui/material/MenuList';
-import MenuItem from '@mui/material/MenuItem';
-import useForkRef from '@mui/utils/useForkRef';
-import { getMultiSectionDigitalClockSectionUtilityClass } from "./multiSectionDigitalClockSectionClasses.js";
-import { DIGITAL_CLOCK_VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from "../internals/constants/dimensions.js";
-import { getFocusedListItemIndex } from "../internals/utils/utils.js";
-import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = classes => {
-  const slots = {
-    root: ['root'],
-    item: ['item']
-  };
-  return composeClasses(slots, getMultiSectionDigitalClockSectionUtilityClass, classes);
-};
-const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
-  name: 'MuiMultiSectionDigitalClockSection',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.root
-})(({
-  theme
-}) => ({
-  maxHeight: DIGITAL_CLOCK_VIEW_HEIGHT,
-  width: 56,
-  padding: 0,
-  overflow: 'hidden',
-  '@media (prefers-reduced-motion: no-preference)': {
-    scrollBehavior: 'auto'
-  },
-  '@media (pointer: fine)': {
-    '&:hover': {
-      overflowY: 'auto'
-    }
-  },
-  '@media (pointer: none), (pointer: coarse)': {
-    overflowY: 'auto'
-  },
-  '&:not(:first-of-type)': {
-    borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
-  },
-  '&::after': {
-    display: 'block',
-    content: '""',
-    // subtracting the height of one item, extra margin and borders to make sure the max height is correct
-    height: 'calc(100% - 40px - 6px)'
-  },
-  variants: [{
-    props: {
-      hasDigitalClockAlreadyBeenRendered: true
-    },
-    style: {
-      '@media (prefers-reduced-motion: no-preference)': {
-        scrollBehavior: 'smooth'
-      }
-    }
-  }]
-}));
-const MultiSectionDigitalClockSectionItem = styled(MenuItem, {
-  name: 'MuiMultiSectionDigitalClockSection',
-  slot: 'Item',
-  overridesResolver: (_, styles) => styles.item
-})(({
-  theme
-}) => ({
-  padding: 8,
-  margin: '2px 4px',
-  width: MULTI_SECTION_CLOCK_SECTION_WIDTH,
-  justifyContent: 'center',
-  '&:first-of-type': {
-    marginTop: 4
-  },
-  '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
-  },
-  '&.Mui-selected': {
-    backgroundColor: (theme.vars || theme).palette.primary.main,
-    color: (theme.vars || theme).palette.primary.contrastText,
-    '&:focus-visible, &:hover': {
-      backgroundColor: (theme.vars || theme).palette.primary.dark
-    }
-  },
-  '&.Mui-focusVisible': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity)
-  }
-}));
-/**
- * @ignore - internal component.
- */
-export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClockSection(inProps, ref) {
-  const containerRef = React.useRef(null);
-  const handleRef = useForkRef(ref, containerRef);
-  const previousActive = React.useRef(null);
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiMultiSectionDigitalClockSection'
-  });
-  const {
-      autoFocus,
-      onChange,
-      className,
-      classes: classesProp,
-      disabled,
-      readOnly,
-      items,
-      active,
-      slots,
-      slotProps,
-      skipDisabled
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    ownerState: pickerOwnerState
-  } = usePickerPrivateContext();
-  const ownerState = _extends({}, pickerOwnerState, {
-    hasDigitalClockAlreadyBeenRendered: !!containerRef.current
-  });
-  const classes = useUtilityClasses(classesProp);
-  const DigitalClockSectionItem = slots?.digitalClockSectionItem ?? MultiSectionDigitalClockSectionItem;
-  React.useEffect(() => {
-    if (containerRef.current === null) {
-      return;
-    }
-    const activeItem = containerRef.current.querySelector('[role="option"][tabindex="0"], [role="option"][aria-selected="true"]');
-    if (active && autoFocus && activeItem) {
-      activeItem.focus();
-    }
-    if (!activeItem || previousActive.current === activeItem) {
-      return;
-    }
-    previousActive.current = activeItem;
-    const offsetTop = activeItem.offsetTop;
-
-    // Subtracting the 4px of extra margin intended for the first visible section item
-    containerRef.current.scrollTop = offsetTop - 4;
-  });
-  const focusedOptionIndex = items.findIndex(item => item.isFocused(item.value));
-  const handleKeyDown = event => {
-    switch (event.key) {
-      case 'PageUp':
-        {
-          const newIndex = getFocusedListItemIndex(containerRef.current) - 5;
-          const children = containerRef.current.children;
-          const newFocusedIndex = Math.max(0, newIndex);
-          const childToFocus = children[newFocusedIndex];
-          if (childToFocus) {
-            childToFocus.focus();
-          }
-          event.preventDefault();
-          break;
-        }
-      case 'PageDown':
-        {
-          const newIndex = getFocusedListItemIndex(containerRef.current) + 5;
-          const children = containerRef.current.children;
-          const newFocusedIndex = Math.min(children.length - 1, newIndex);
-          const childToFocus = children[newFocusedIndex];
-          if (childToFocus) {
-            childToFocus.focus();
-          }
-          event.preventDefault();
-          break;
-        }
-      default:
-    }
-  };
-  return /*#__PURE__*/_jsx(MultiSectionDigitalClockSectionRoot, _extends({
-    ref: handleRef,
-    className: clsx(classes.root, className),
-    ownerState: ownerState,
-    autoFocusItem: autoFocus && active,
-    role: "listbox",
-    onKeyDown: handleKeyDown
-  }, other, {
-    children: items.map((option, index) => {
-      const isItemDisabled = option.isDisabled?.(option.value);
-      const isDisabled = disabled || isItemDisabled;
-      if (skipDisabled && isDisabled) {
-        return null;
-      }
-      const isSelected = option.isSelected(option.value);
-      const tabIndex = focusedOptionIndex === index || focusedOptionIndex === -1 && index === 0 ? 0 : -1;
-      return /*#__PURE__*/_jsx(DigitalClockSectionItem, _extends({
-        onClick: () => !readOnly && onChange(option.value),
-        selected: isSelected,
-        disabled: isDisabled,
-        disableRipple: readOnly,
-        role: "option"
-        // aria-readonly is not supported here and does not have any effect
-        ,
-        "aria-disabled": readOnly || isDisabled || undefined,
-        "aria-label": option.ariaLabel,
-        "aria-selected": isSelected,
-        tabIndex: tabIndex,
-        className: classes.item
-      }, slotProps?.digitalClockSectionItem, {
-        children: option.label
-      }), option.label);
-    })
-  }));
-});

package/modern/MultiSectionDigitalClock/index.d.ts

@@ -1,7 +0,0 @@
-export { MultiSectionDigitalClock } from "./MultiSectionDigitalClock.js";
-export type { MultiSectionDigitalClockProps, MultiSectionDigitalClockSlots, MultiSectionDigitalClockSlotProps } from './MultiSectionDigitalClock.types';
-export { multiSectionDigitalClockSectionClasses } from "./multiSectionDigitalClockSectionClasses.js";
-export type { MultiSectionDigitalClockSectionClasses, MultiSectionDigitalClockSectionClassKey } from './multiSectionDigitalClockSectionClasses';
-export type { ExportedMultiSectionDigitalClockSectionProps } from './MultiSectionDigitalClockSection';
-export { multiSectionDigitalClockClasses, getMultiSectionDigitalClockUtilityClass } from "./multiSectionDigitalClockClasses.js";
-export type { MultiSectionDigitalClockClasses, MultiSectionDigitalClockClassKey } from './multiSectionDigitalClockClasses';

package/modern/MultiSectionDigitalClock/index.js

@@ -1,3 +0,0 @@
-export { MultiSectionDigitalClock } from "./MultiSectionDigitalClock.js";
-export { multiSectionDigitalClockSectionClasses } from "./multiSectionDigitalClockSectionClasses.js";
-export { multiSectionDigitalClockClasses, getMultiSectionDigitalClockUtilityClass } from "./multiSectionDigitalClockClasses.js";

package/modern/MultiSectionDigitalClock/multiSectionDigitalClockClasses.d.ts

@@ -1,7 +0,0 @@
-export interface MultiSectionDigitalClockClasses {
-  /** Styles applied to the root element. */
-  root: string;
-}
-export type MultiSectionDigitalClockClassKey = keyof MultiSectionDigitalClockClasses;
-export declare function getMultiSectionDigitalClockUtilityClass(slot: string): string;
-export declare const multiSectionDigitalClockClasses: MultiSectionDigitalClockClasses;

package/modern/MultiSectionDigitalClock/multiSectionDigitalClockClasses.js

@@ -1,6 +0,0 @@
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getMultiSectionDigitalClockUtilityClass(slot) {
-  return generateUtilityClass('MuiMultiSectionDigitalClock', slot);
-}
-export const multiSectionDigitalClockClasses = generateUtilityClasses('MuiMultiSectionDigitalClock', ['root']);

package/modern/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.d.ts

@@ -1,9 +0,0 @@
-export interface MultiSectionDigitalClockSectionClasses {
-  /** Styles applied to the root (list) element. */
-  root: string;
-  /** Styles applied to the list item (by default: MenuItem) element. */
-  item: string;
-}
-export type MultiSectionDigitalClockSectionClassKey = keyof MultiSectionDigitalClockSectionClasses;
-export declare function getMultiSectionDigitalClockSectionUtilityClass(slot: string): string;
-export declare const multiSectionDigitalClockSectionClasses: MultiSectionDigitalClockSectionClasses;

package/modern/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js

@@ -1,6 +0,0 @@
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getMultiSectionDigitalClockSectionUtilityClass(slot) {
-  return generateUtilityClass('MuiMultiSectionDigitalClockSection', slot);
-}
-export const multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClockSection', ['root', 'item']);

package/modern/PickersActionBar/PickersActionBar.d.ts

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { DialogActionsProps } from '@mui/material/DialogActions';
-export type PickersActionBarAction = 'clear' | 'cancel' | 'accept' | 'today';
-export interface PickersActionBarProps extends DialogActionsProps {
-  /**
-   * Ordered array of actions to display.
-   * If empty, does not display that action bar.
-   * @default
-   * - `[]` for Desktop Date Picker and Desktop Date Range Picker
-   * - `['cancel', 'accept']` for all other Pickers
-   */
-  actions?: PickersActionBarAction[];
-}
-/**
- * Demos:
- *
- * - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
- * - [Custom layout](https://mui.com/x/react-date-pickers/custom-layout/)
- *
- * API:
- *
- * - [PickersActionBar API](https://mui.com/x/api/date-pickers/pickers-action-bar/)
- */
-declare function PickersActionBarComponent(props: PickersActionBarProps): React.JSX.Element | null;
-declare namespace PickersActionBarComponent {
-  var propTypes: any;
-}
-declare const PickersActionBar: React.MemoExoticComponent<typeof PickersActionBarComponent>;
-export { PickersActionBar };

package/modern/PickersActionBar/PickersActionBar.js

@@ -1,99 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["actions"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import Button from '@mui/material/Button';
-import DialogActions from '@mui/material/DialogActions';
-import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
-import { usePickerActionsContext } from "../hooks/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const PickersActionBarRoot = styled(DialogActions, {
-  name: 'MuiPickersLayout',
-  slot: 'ActionBar',
-  overridesResolver: (_, styles) => styles.actionBar
-})({});
-
-/**
- * Demos:
- *
- * - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
- * - [Custom layout](https://mui.com/x/react-date-pickers/custom-layout/)
- *
- * API:
- *
- * - [PickersActionBar API](https://mui.com/x/api/date-pickers/pickers-action-bar/)
- */
-function PickersActionBarComponent(props) {
-  const {
-      actions
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const translations = usePickerTranslations();
-  const {
-    clearValue,
-    setValueToToday,
-    acceptValueChanges,
-    cancelValueChanges
-  } = usePickerActionsContext();
-  if (actions == null || actions.length === 0) {
-    return null;
-  }
-  const buttons = actions?.map(actionType => {
-    switch (actionType) {
-      case 'clear':
-        return /*#__PURE__*/_jsx(Button, {
-          onClick: clearValue,
-          children: translations.clearButtonLabel
-        }, actionType);
-      case 'cancel':
-        return /*#__PURE__*/_jsx(Button, {
-          onClick: cancelValueChanges,
-          children: translations.cancelButtonLabel
-        }, actionType);
-      case 'accept':
-        return /*#__PURE__*/_jsx(Button, {
-          onClick: acceptValueChanges,
-          children: translations.okButtonLabel
-        }, actionType);
-      case 'today':
-        return /*#__PURE__*/_jsx(Button, {
-          onClick: setValueToToday,
-          children: translations.todayButtonLabel
-        }, actionType);
-      default:
-        return null;
-    }
-  });
-  return /*#__PURE__*/_jsx(PickersActionBarRoot, _extends({}, other, {
-    children: buttons
-  }));
-}
-process.env.NODE_ENV !== "production" ? PickersActionBarComponent.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Ordered array of actions to display.
-   * If empty, does not display that action bar.
-   * @default
-   * - `[]` for Desktop Date Picker and Desktop Date Range Picker
-   * - `['cancel', 'accept']` for all other Pickers
-   */
-  actions: PropTypes.arrayOf(PropTypes.oneOf(['accept', 'cancel', 'clear', 'today']).isRequired),
-  /**
-   * If `true`, the actions do not have additional margin.
-   * @default false
-   */
-  disableSpacing: PropTypes.bool,
-  /**
-   * 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])
-} : void 0;
-const PickersActionBar = /*#__PURE__*/React.memo(PickersActionBarComponent);
-export { PickersActionBar };

package/modern/PickersActionBar/index.d.ts

@@ -1,2 +0,0 @@
-export { PickersActionBar } from "./PickersActionBar.js";
-export type { PickersActionBarProps, PickersActionBarAction } from './PickersActionBar';

package/modern/PickersActionBar/index.js

@@ -1 +0,0 @@
-export { PickersActionBar } from "./PickersActionBar.js";

package/modern/PickersCalendarHeader/PickersCalendarHeader.d.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { PickersCalendarHeaderProps } from "./PickersCalendarHeader.types.js";
-type PickersCalendarHeaderComponent = ((props: PickersCalendarHeaderProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
-  propTypes?: any;
-};
-/**
- * Demos:
- *
- * - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
- * - [DateRangeCalendar](https://mui.com/x/react-date-pickers/date-range-calendar/)
- * - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
- *
- * API:
- *
- * - [PickersCalendarHeader API](https://mui.com/x/api/date-pickers/pickers-calendar-header/)
- */
-declare const PickersCalendarHeader: PickersCalendarHeaderComponent;
-export { PickersCalendarHeader };