1
0
Fork 0

Added Statistics calculation

Statistics now show calculated values
This commit is contained in:
Techognito 2025-09-04 17:30:00 +02:00
parent fe87374e47
commit fc0f69dacb
2147 changed files with 141321 additions and 39 deletions

View file

@ -0,0 +1,19 @@
import * as React from 'react';
import { PickersInputBaseProps } from "../PickersInputBase/index.js";
import { PickerTextFieldOwnerState } from "../../models/fields.js";
export interface PickersFilledInputProps extends PickersInputBaseProps {
disableUnderline?: boolean;
hiddenLabel?: boolean;
}
export interface PickerFilledInputOwnerState extends PickerTextFieldOwnerState {
/**
* `true` if the input has an underline, `false` otherwise.
*/
inputHasUnderline: boolean;
hiddenLabel?: boolean;
}
/**
* @ignore - internal component.
*/
declare const PickersFilledInput: React.ForwardRefExoticComponent<Omit<PickersFilledInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
export { PickersFilledInput };

View file

@ -0,0 +1,305 @@
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["label", "autoFocus", "disableUnderline", "hiddenLabel", "classes"];
import * as React from 'react';
import PropTypes from 'prop-types';
import { styled, useThemeProps } from '@mui/material/styles';
import { shouldForwardProp } from '@mui/system';
import refType from '@mui/utils/refType';
import composeClasses from '@mui/utils/composeClasses';
import { pickersFilledInputClasses, getPickersFilledInputUtilityClass } from "./pickersFilledInputClasses.js";
import { PickersInputBase } from "../PickersInputBase/index.js";
import { PickersInputBaseRoot, PickersInputBaseSectionsContainer } from "../PickersInputBase/PickersInputBase.js";
import { usePickerTextFieldOwnerState } from "../usePickerTextFieldOwnerState.js";
import { jsx as _jsx } from "react/jsx-runtime";
const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
name: 'MuiPickersFilledInput',
slot: 'Root',
shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'disableUnderline'
})(({
theme
}) => {
const light = theme.palette.mode === 'light';
const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
const hoverBackground = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)';
const disabledBackground = light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)';
return {
backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor,
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
transition: theme.transitions.create('background-color', {
duration: theme.transitions.duration.shorter,
easing: theme.transitions.easing.easeOut
}),
'&:hover': {
backgroundColor: theme.vars ? theme.vars.palette.FilledInput.hoverBg : hoverBackground,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor
}
},
[`&.${pickersFilledInputClasses.focused}`]: {
backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor
},
[`&.${pickersFilledInputClasses.disabled}`]: {
backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground
},
variants: [...Object.keys((theme.vars ?? theme).palette)
// @ts-ignore
.filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
props: {
inputColor: color,
disableUnderline: false
},
style: {
'&::after': {
// @ts-ignore
borderBottom: `2px solid ${(theme.vars || theme).palette[color]?.main}`
}
}
})), {
props: {
disableUnderline: false
},
style: {
'&::after': {
left: 0,
bottom: 0,
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
content: '""',
position: 'absolute',
right: 0,
transform: 'scaleX(0)',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shorter,
easing: theme.transitions.easing.easeOut
}),
pointerEvents: 'none' // Transparent to the hover style.
},
[`&.${pickersFilledInputClasses.focused}:after`]: {
// translateX(0) is a workaround for Safari transform scale bug
// See https://github.com/mui/material-ui/issues/31766
transform: 'scaleX(1) translateX(0)'
},
[`&.${pickersFilledInputClasses.error}`]: {
'&:before, &:after': {
borderBottomColor: (theme.vars || theme).palette.error.main
}
},
'&::before': {
borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
left: 0,
bottom: 0,
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
content: '"\\00a0"',
position: 'absolute',
right: 0,
transition: theme.transitions.create('border-bottom-color', {
duration: theme.transitions.duration.shorter
}),
pointerEvents: 'none' // Transparent to the hover style.
},
[`&:hover:not(.${pickersFilledInputClasses.disabled}, .${pickersFilledInputClasses.error}):before`]: {
borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
},
[`&.${pickersFilledInputClasses.disabled}:before`]: {
borderBottomStyle: 'dotted'
}
}
}, {
props: {
hasStartAdornment: true
},
style: {
paddingLeft: 12
}
}, {
props: {
hasEndAdornment: true
},
style: {
paddingRight: 12
}
}]
};
});
const PickersFilledSectionsContainer = styled(PickersInputBaseSectionsContainer, {
name: 'MuiPickersFilledInput',
slot: 'sectionsContainer',
shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'hiddenLabel'
})({
paddingTop: 25,
paddingRight: 12,
paddingBottom: 8,
paddingLeft: 12,
variants: [{
props: {
inputSize: 'small'
},
style: {
paddingTop: 21,
paddingBottom: 4
}
}, {
props: {
hasStartAdornment: true
},
style: {
paddingLeft: 0
}
}, {
props: {
hasEndAdornment: true
},
style: {
paddingRight: 0
}
}, {
props: {
hiddenLabel: true
},
style: {
paddingTop: 16,
paddingBottom: 17
}
}, {
props: {
hiddenLabel: true,
inputSize: 'small'
},
style: {
paddingTop: 8,
paddingBottom: 9
}
}]
});
const useUtilityClasses = (classes, ownerState) => {
const {
inputHasUnderline
} = ownerState;
const slots = {
root: ['root', inputHasUnderline && 'underline'],
input: ['input']
};
const composedClasses = composeClasses(slots, getPickersFilledInputUtilityClass, classes);
return _extends({}, classes, composedClasses);
};
/**
* @ignore - internal component.
*/
const PickersFilledInput = /*#__PURE__*/React.forwardRef(function PickersFilledInput(inProps, ref) {
const props = useThemeProps({
props: inProps,
name: 'MuiPickersFilledInput'
});
const {
label,
disableUnderline = false,
hiddenLabel = false,
classes: classesProp
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const pickerTextFieldOwnerState = usePickerTextFieldOwnerState();
const ownerState = _extends({}, pickerTextFieldOwnerState, {
inputHasUnderline: !disableUnderline
});
const classes = useUtilityClasses(classesProp, ownerState);
return /*#__PURE__*/_jsx(PickersInputBase, _extends({
slots: {
root: PickersFilledInputRoot,
input: PickersFilledSectionsContainer
},
slotProps: {
root: {
disableUnderline
},
input: {
hiddenLabel
}
}
}, other, {
label: label,
classes: classes,
ref: ref,
ownerState: ownerState
}));
});
if (process.env.NODE_ENV !== "production") PickersFilledInput.displayName = "PickersFilledInput";
process.env.NODE_ENV !== "production" ? PickersFilledInput.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm 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,
component: PropTypes.elementType,
/**
* If true, the whole element is editable.
* Useful when all the sections are selected.
*/
contentEditable: PropTypes.bool.isRequired,
'data-multi-input': PropTypes.string,
disableUnderline: PropTypes.bool,
/**
* 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,
hiddenLabel: PropTypes.bool,
id: PropTypes.string,
inputProps: PropTypes.object,
inputRef: refType,
label: PropTypes.node,
margin: PropTypes.oneOf(['dense', 'none', 'normal']),
name: PropTypes.string,
onChange: PropTypes.func.isRequired,
onClick: PropTypes.func.isRequired,
onInput: PropTypes.func.isRequired,
onKeyDown: PropTypes.func.isRequired,
onPaste: PropTypes.func.isRequired,
ownerState: PropTypes /* @typescript-to-proptypes-ignore */.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 props used for each component slot.
* @default {}
*/
slotProps: PropTypes.object,
/**
* 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 { PickersFilledInput };
PickersFilledInput.muiName = 'Input';

View file

@ -0,0 +1,4 @@
export { PickersFilledInput } from "./PickersFilledInput.js";
export type { PickersFilledInputProps } from "./PickersFilledInput.js";
export type { PickersFilledInputClasses, PickersFilledInputClassKey } from "./pickersFilledInputClasses.js";
export { getPickersFilledInputUtilityClass, pickersFilledInputClasses } from "./pickersFilledInputClasses.js";

View file

@ -0,0 +1,2 @@
export { PickersFilledInput } from "./PickersFilledInput.js";
export { getPickersFilledInputUtilityClass, pickersFilledInputClasses } from "./pickersFilledInputClasses.js";

View file

@ -0,0 +1,25 @@
import { PickersInputBaseClasses } from "../PickersInputBase/index.js";
export interface PickersFilledInputClasses extends PickersInputBaseClasses {
/** Styles applied to the root element unless `disableUnderline={true}`. */
underline: string;
}
export type PickersFilledInputClassKey = keyof PickersFilledInputClasses;
export declare function getPickersFilledInputUtilityClass(slot: string): string;
export declare const pickersFilledInputClasses: {
root: string;
input: string;
underline: string;
sectionContent: string;
disabled: string;
readOnly: string;
focused: string;
error: string;
inputSizeSmall: string;
notchedOutline: string;
sectionsContainer: string;
sectionBefore: string;
sectionAfter: string;
adornedStart: string;
adornedEnd: string;
activeBar: string;
};

View file

@ -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/index.js";
export function getPickersFilledInputUtilityClass(slot) {
return generateUtilityClass('MuiPickersFilledInput', slot);
}
export const pickersFilledInputClasses = _extends({}, pickersInputBaseClasses, generateUtilityClasses('MuiPickersFilledInput', ['root', 'underline', 'input']));

View file

@ -0,0 +1,17 @@
import * as React from 'react';
import { PickersInputBaseProps } from "../PickersInputBase/index.js";
import { PickerTextFieldOwnerState } from "../../models/fields.js";
export interface PickersInputProps extends PickersInputBaseProps {
disableUnderline?: boolean;
}
export interface PickerInputOwnerState extends PickerTextFieldOwnerState {
/**
* `true` if the input has an underline, `false` otherwise.
*/
inputHasUnderline: boolean;
}
/**
* @ignore - internal component.
*/
declare const PickersInput: React.ForwardRefExoticComponent<Omit<PickersInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
export { PickersInput };

View file

@ -0,0 +1,223 @@
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["label", "autoFocus", "disableUnderline", "ownerState", "classes"];
import * as React from 'react';
import PropTypes from 'prop-types';
import { styled, useThemeProps } from '@mui/material/styles';
import { shouldForwardProp } from '@mui/system/createStyled';
import refType from '@mui/utils/refType';
import composeClasses from '@mui/utils/composeClasses';
import { pickersInputClasses, getPickersInputUtilityClass } from "./pickersInputClasses.js";
import { PickersInputBase } from "../PickersInputBase/index.js";
import { PickersInputBaseRoot } from "../PickersInputBase/PickersInputBase.js";
import { usePickerTextFieldOwnerState } from "../usePickerTextFieldOwnerState.js";
import { jsx as _jsx } from "react/jsx-runtime";
const PickersInputRoot = styled(PickersInputBaseRoot, {
name: 'MuiPickersInput',
slot: 'Root',
shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'disableUnderline'
})(({
theme
}) => {
const light = theme.palette.mode === 'light';
let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
if (theme.vars) {
bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
}
return {
'label + &': {
marginTop: 16
},
variants: [...Object.keys((theme.vars ?? theme).palette)
// @ts-ignore
.filter(key => (theme.vars ?? theme).palette[key].main).map(color => ({
props: {
inputColor: color,
inputHasUnderline: true
},
style: {
'&::after': {
// @ts-ignore
borderBottom: `2px solid ${(theme.vars || theme).palette[color].main}`
}
}
})), {
props: {
inputHasUnderline: true
},
style: {
'&::after': {
background: 'red',
left: 0,
bottom: 0,
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
content: '""',
position: 'absolute',
right: 0,
transform: 'scaleX(0)',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shorter,
easing: theme.transitions.easing.easeOut
}),
pointerEvents: 'none' // Transparent to the hover style.
},
[`&.${pickersInputClasses.focused}:after`]: {
// translateX(0) is a workaround for Safari transform scale bug
// See https://github.com/mui/material-ui/issues/31766
transform: 'scaleX(1) translateX(0)'
},
[`&.${pickersInputClasses.error}`]: {
'&:before, &:after': {
borderBottomColor: (theme.vars || theme).palette.error.main
}
},
'&::before': {
borderBottom: `1px solid ${bottomLineColor}`,
left: 0,
bottom: 0,
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
content: '"\\00a0"',
position: 'absolute',
right: 0,
transition: theme.transitions.create('border-bottom-color', {
duration: theme.transitions.duration.shorter
}),
pointerEvents: 'none' // Transparent to the hover style.
},
[`&:hover:not(.${pickersInputClasses.disabled}, .${pickersInputClasses.error}):before`]: {
borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
borderBottom: `1px solid ${bottomLineColor}`
}
},
[`&.${pickersInputClasses.disabled}:before`]: {
borderBottomStyle: 'dotted'
}
}
}]
};
});
const useUtilityClasses = (classes, ownerState) => {
const {
inputHasUnderline
} = ownerState;
const slots = {
root: ['root', !inputHasUnderline && 'underline'],
input: ['input']
};
const composedClasses = composeClasses(slots, getPickersInputUtilityClass, classes);
return _extends({}, classes, composedClasses);
};
/**
* @ignore - internal component.
*/
const PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(inProps, ref) {
const props = useThemeProps({
props: inProps,
name: 'MuiPickersInput'
});
const {
label,
disableUnderline = false,
classes: classesProp
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const pickerTextFieldOwnerState = usePickerTextFieldOwnerState();
const ownerState = _extends({}, pickerTextFieldOwnerState, {
inputHasUnderline: !disableUnderline
});
const classes = useUtilityClasses(classesProp, ownerState);
return /*#__PURE__*/_jsx(PickersInputBase, _extends({
slots: {
root: PickersInputRoot
},
slotProps: {
root: {
disableUnderline
}
}
}, other, {
ownerState: ownerState,
label: label,
classes: classes,
ref: ref
}));
});
if (process.env.NODE_ENV !== "production") PickersInput.displayName = "PickersInput";
process.env.NODE_ENV !== "production" ? PickersInput.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm 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,
component: PropTypes.elementType,
/**
* If true, the whole element is editable.
* Useful when all the sections are selected.
*/
contentEditable: PropTypes.bool.isRequired,
'data-multi-input': PropTypes.string,
disableUnderline: PropTypes.bool,
/**
* 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: refType,
label: PropTypes.node,
margin: PropTypes.oneOf(['dense', 'none', 'normal']),
name: PropTypes.string,
onChange: PropTypes.func.isRequired,
onClick: PropTypes.func.isRequired,
onInput: PropTypes.func.isRequired,
onKeyDown: PropTypes.func.isRequired,
onPaste: PropTypes.func.isRequired,
ownerState: PropTypes /* @typescript-to-proptypes-ignore */.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 props used for each component slot.
* @default {}
*/
slotProps: PropTypes.object,
/**
* 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 { PickersInput };
PickersInput.muiName = 'Input';

View file

@ -0,0 +1,4 @@
export { PickersInput } from "./PickersInput.js";
export type { PickersInputProps } from "./PickersInput.js";
export type { PickersInputClasses, PickersInputClassKey } from "./pickersInputClasses.js";
export { getPickersInputUtilityClass, pickersInputClasses } from "./pickersInputClasses.js";

View file

@ -0,0 +1,2 @@
export { PickersInput } from "./PickersInput.js";
export { getPickersInputUtilityClass, pickersInputClasses } from "./pickersInputClasses.js";

View file

@ -0,0 +1,25 @@
import { PickersInputBaseClasses } from "../PickersInputBase/index.js";
export interface PickersInputClasses extends PickersInputBaseClasses {
/** Styles applied to the root element unless `disableUnderline={true}`. */
underline: string;
}
export type PickersInputClassKey = keyof PickersInputClasses;
export declare function getPickersInputUtilityClass(slot: string): string;
export declare const pickersInputClasses: {
root: string;
input: string;
underline: string;
sectionContent: string;
disabled: string;
readOnly: string;
focused: string;
error: string;
inputSizeSmall: string;
notchedOutline: string;
sectionsContainer: string;
sectionBefore: string;
sectionAfter: string;
adornedStart: string;
adornedEnd: string;
activeBar: string;
};

View file

@ -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/index.js";
export function getPickersInputUtilityClass(slot) {
return generateUtilityClass('MuiPickersFilledInput', slot);
}
export const pickersInputClasses = _extends({}, pickersInputBaseClasses, generateUtilityClasses('MuiPickersInput', ['root', 'underline', 'input']));

View file

@ -0,0 +1,14 @@
import * as React from 'react';
import { PickersInputBaseProps } from "./PickersInputBase.types.js";
import { PickerTextFieldOwnerState } from "../../models/fields.js";
export declare const PickersInputBaseRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
ownerState: PickerTextFieldOwnerState;
}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | keyof React.ClassAttributes<HTMLDivElement>>, {}>;
export declare const PickersInputBaseSectionsContainer: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | keyof React.ClassAttributes<HTMLDivElement>>, keyof React.HTMLAttributes<HTMLDivElement> | keyof React.ClassAttributes<HTMLDivElement> | keyof import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
ownerState: PickerTextFieldOwnerState;
}, {}, {}>;
/**
* @ignore - internal component.
*/
declare const PickersInputBase: React.ForwardRefExoticComponent<Omit<PickersInputBaseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
export { PickersInputBase };

View file

@ -0,0 +1,484 @@
'use client';
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur", "classes", "ownerState"];
import * as React from 'react';
import PropTypes from 'prop-types';
import { useFormControl } from '@mui/material/FormControl';
import { styled, useThemeProps } from '@mui/material/styles';
import useForkRef from '@mui/utils/useForkRef';
import refType from '@mui/utils/refType';
import composeClasses from '@mui/utils/composeClasses';
import capitalize from '@mui/utils/capitalize';
import useSlotProps from '@mui/utils/useSlotProps';
import visuallyHidden from '@mui/utils/visuallyHidden';
import { pickersInputBaseClasses, getPickersInputBaseUtilityClass } from "./pickersInputBaseClasses.js";
import { Unstable_PickersSectionList as PickersSectionList, Unstable_PickersSectionListRoot as PickersSectionListRoot, Unstable_PickersSectionListSection as PickersSectionListSection, Unstable_PickersSectionListSectionSeparator as PickersSectionListSectionSeparator, Unstable_PickersSectionListSectionContent as PickersSectionListSectionContent } from "../../PickersSectionList/index.js";
import { usePickerTextFieldOwnerState } from "../usePickerTextFieldOwnerState.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const round = value => Math.round(value * 1e5) / 1e5;
export const PickersInputBaseRoot = styled('div', {
name: 'MuiPickersInputBase',
slot: 'Root'
})(({
theme
}) => _extends({}, theme.typography.body1, {
color: (theme.vars || theme).palette.text.primary,
cursor: 'text',
padding: 0,
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
position: 'relative',
boxSizing: 'border-box',
// Prevent padding issue with fullWidth.
letterSpacing: `${round(0.15 / 16)}em`,
variants: [{
props: {
isInputInFullWidth: true
},
style: {
width: '100%'
}
}]
}));
export const PickersInputBaseSectionsContainer = styled(PickersSectionListRoot, {
name: 'MuiPickersInputBase',
slot: 'SectionsContainer'
})(({
theme
}) => ({
padding: '4px 0 5px',
fontFamily: theme.typography.fontFamily,
fontSize: 'inherit',
lineHeight: '1.4375em',
// 23px
flexGrow: 1,
outline: 'none',
display: 'flex',
flexWrap: 'nowrap',
overflow: 'hidden',
letterSpacing: 'inherit',
// Baseline behavior
width: '182px',
variants: [{
props: {
fieldDirection: 'rtl'
},
style: {
justifyContent: 'end'
}
}, {
props: {
inputSize: 'small'
},
style: {
paddingTop: 1
}
}, {
props: {
hasStartAdornment: false,
isFieldFocused: false,
isFieldValueEmpty: true
},
style: {
color: 'currentColor',
opacity: 0
}
}, {
props: {
hasStartAdornment: false,
isFieldFocused: false,
isFieldValueEmpty: true,
inputHasLabel: false
},
style: theme.vars ? {
opacity: theme.vars.opacity.inputPlaceholder
} : {
opacity: theme.palette.mode === 'light' ? 0.42 : 0.5
}
}, {
props: {
hasStartAdornment: false,
isFieldFocused: false,
isFieldValueEmpty: true,
inputHasLabel: true,
isLabelShrunk: true
},
style: theme.vars ? {
opacity: theme.vars.opacity.inputPlaceholder
} : {
opacity: theme.palette.mode === 'light' ? 0.42 : 0.5
}
}]
}));
const PickersInputBaseSection = styled(PickersSectionListSection, {
name: 'MuiPickersInputBase',
slot: 'Section'
})(({
theme
}) => ({
fontFamily: theme.typography.fontFamily,
fontSize: 'inherit',
letterSpacing: 'inherit',
lineHeight: '1.4375em',
// 23px
display: 'inline-block',
whiteSpace: 'nowrap'
}));
const PickersInputBaseSectionContent = styled(PickersSectionListSectionContent, {
name: 'MuiPickersInputBase',
slot: 'SectionContent',
overridesResolver: (props, styles) => styles.content // FIXME: Inconsistent naming with slot
})(({
theme
}) => ({
fontFamily: theme.typography.fontFamily,
lineHeight: '1.4375em',
// 23px
letterSpacing: 'inherit',
width: 'fit-content',
outline: 'none'
}));
const PickersInputBaseSectionSeparator = styled(PickersSectionListSectionSeparator, {
name: 'MuiPickersInputBase',
slot: 'Separator'
})(() => ({
whiteSpace: 'pre',
letterSpacing: 'inherit'
}));
const PickersInputBaseInput = styled('input', {
name: 'MuiPickersInputBase',
slot: 'Input',
overridesResolver: (props, styles) => styles.hiddenInput // FIXME: Inconsistent naming with slot
})(_extends({}, visuallyHidden));
const PickersInputBaseActiveBar = styled('div', {
name: 'MuiPickersInputBase',
slot: 'ActiveBar'
})(({
theme,
ownerState
}) => ({
display: 'none',
position: 'absolute',
height: 2,
bottom: 2,
borderTopLeftRadius: 2,
borderTopRightRadius: 2,
transition: theme.transitions.create(['width', 'left'], {
duration: theme.transitions.duration.shortest
}),
backgroundColor: (theme.vars || theme).palette.primary.main,
'[data-active-range-position="start"] &, [data-active-range-position="end"] &': {
display: 'block'
},
'[data-active-range-position="start"] &': {
left: ownerState.sectionOffsets[0]
},
'[data-active-range-position="end"] &': {
left: ownerState.sectionOffsets[1]
}
}));
const useUtilityClasses = (classes, ownerState) => {
const {
isFieldFocused,
isFieldDisabled,
isFieldReadOnly,
hasFieldError,
inputSize,
isInputInFullWidth,
inputColor,
hasStartAdornment,
hasEndAdornment
} = ownerState;
const slots = {
root: ['root', isFieldFocused && !isFieldDisabled && 'focused', isFieldDisabled && 'disabled', isFieldReadOnly && 'readOnly', hasFieldError && 'error', isInputInFullWidth && 'fullWidth', `color${capitalize(inputColor)}`, inputSize === 'small' && 'inputSizeSmall', hasStartAdornment && 'adornedStart', hasEndAdornment && 'adornedEnd'],
notchedOutline: ['notchedOutline'],
input: ['input'],
sectionsContainer: ['sectionsContainer'],
sectionContent: ['sectionContent'],
sectionBefore: ['sectionBefore'],
sectionAfter: ['sectionAfter'],
activeBar: ['activeBar']
};
return composeClasses(slots, getPickersInputBaseUtilityClass, classes);
};
function resolveSectionElementWidth(sectionElement, rootRef, index, dateRangePosition) {
if (sectionElement.content.id) {
const activeSectionElements = rootRef.current?.querySelectorAll(`[data-sectionindex="${index}"] [data-range-position="${dateRangePosition}"]`);
if (activeSectionElements) {
return Array.from(activeSectionElements).reduce((currentActiveBarWidth, element) => {
return currentActiveBarWidth + element.offsetWidth;
}, 0);
}
}
return 0;
}
function resolveSectionWidthAndOffsets(elements, rootRef) {
let activeBarWidth = 0;
const activeRangePosition = rootRef.current?.getAttribute('data-active-range-position');
if (activeRangePosition === 'end') {
for (let i = elements.length - 1; i >= elements.length / 2; i -= 1) {
activeBarWidth += resolveSectionElementWidth(elements[i], rootRef, i, 'end');
}
} else {
for (let i = 0; i < elements.length / 2; i += 1) {
activeBarWidth += resolveSectionElementWidth(elements[i], rootRef, i, 'start');
}
}
return {
activeBarWidth,
sectionOffsets: [rootRef.current?.querySelector(`[data-sectionindex="0"]`)?.offsetLeft || 0, rootRef.current?.querySelector(`[data-sectionindex="${elements.length / 2}"]`)?.offsetLeft || 0]
};
}
/**
* @ignore - internal component.
*/
const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase(inProps, ref) {
const props = useThemeProps({
props: inProps,
name: 'MuiPickersInputBase'
});
const {
elements,
areAllSectionsEmpty,
value,
onChange,
id,
endAdornment,
startAdornment,
renderSuffix,
slots,
slotProps,
contentEditable,
tabIndex,
onInput,
onPaste,
onKeyDown,
name,
readOnly,
inputProps,
inputRef,
sectionListRef,
onFocus,
onBlur,
classes: classesProp,
ownerState: ownerStateProp
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const ownerStateContext = usePickerTextFieldOwnerState();
const rootRef = React.useRef(null);
const activeBarRef = React.useRef(null);
const sectionOffsetsRef = React.useRef([]);
const handleRootRef = useForkRef(ref, rootRef);
const handleInputRef = useForkRef(inputProps?.ref, inputRef);
const muiFormControl = useFormControl();
if (!muiFormControl) {
throw new Error('MUI X: PickersInputBase should always be used inside a PickersTextField component');
}
const ownerState = ownerStateProp ?? ownerStateContext;
const handleInputFocus = event => {
muiFormControl.onFocus?.(event);
onFocus?.(event);
};
const handleHiddenInputFocus = event => {
handleInputFocus(event);
};
const handleKeyDown = event => {
onKeyDown?.(event);
if (event.key === 'Enter' && !event.defaultMuiPrevented) {
// Do nothing if it's a multi input field
if (rootRef.current?.dataset.multiInput) {
return;
}
const closestForm = rootRef.current?.closest('form');
const submitTrigger = closestForm?.querySelector('[type="submit"]');
if (!closestForm || !submitTrigger) {
// do nothing if there is no form or no submit button (trigger)
return;
}
event.preventDefault();
// native input trigger submit with the `submitter` field set
closestForm.requestSubmit(submitTrigger);
}
};
const handleInputBlur = event => {
muiFormControl.onBlur?.(event);
onBlur?.(event);
};
React.useEffect(() => {
if (muiFormControl) {
muiFormControl.setAdornedStart(Boolean(startAdornment));
}
}, [muiFormControl, startAdornment]);
React.useEffect(() => {
if (!muiFormControl) {
return;
}
if (areAllSectionsEmpty) {
muiFormControl.onEmpty();
} else {
muiFormControl.onFilled();
}
}, [muiFormControl, areAllSectionsEmpty]);
const classes = useUtilityClasses(classesProp, ownerState);
const InputRoot = slots?.root || PickersInputBaseRoot;
const inputRootProps = useSlotProps({
elementType: InputRoot,
externalSlotProps: slotProps?.root,
externalForwardedProps: other,
additionalProps: {
'aria-invalid': muiFormControl.error,
ref: handleRootRef
},
className: classes.root,
ownerState
});
const InputSectionsContainer = slots?.input || PickersInputBaseSectionsContainer;
const isSingleInputRange = elements.some(element => element.content['data-range-position'] !== undefined);
React.useEffect(() => {
if (!isSingleInputRange || !ownerState.isPickerOpen) {
return;
}
const {
activeBarWidth,
sectionOffsets
} = resolveSectionWidthAndOffsets(elements, rootRef);
sectionOffsetsRef.current = [sectionOffsets[0], sectionOffsets[1]];
if (activeBarRef.current) {
activeBarRef.current.style.width = `${activeBarWidth}px`;
}
}, [elements, isSingleInputRange, ownerState.isPickerOpen]);
return /*#__PURE__*/_jsxs(InputRoot, _extends({}, inputRootProps, {
children: [startAdornment, /*#__PURE__*/_jsx(PickersSectionList, {
sectionListRef: sectionListRef,
elements: elements,
contentEditable: contentEditable,
tabIndex: tabIndex,
className: classes.sectionsContainer,
onFocus: handleInputFocus,
onBlur: handleInputBlur,
onInput: onInput,
onPaste: onPaste,
onKeyDown: handleKeyDown,
slots: {
root: InputSectionsContainer,
section: PickersInputBaseSection,
sectionContent: PickersInputBaseSectionContent,
sectionSeparator: PickersInputBaseSectionSeparator
},
slotProps: {
root: _extends({}, slotProps?.input, {
ownerState
}),
sectionContent: {
className: pickersInputBaseClasses.sectionContent
},
sectionSeparator: ({
separatorPosition
}) => ({
className: separatorPosition === 'before' ? pickersInputBaseClasses.sectionBefore : pickersInputBaseClasses.sectionAfter
})
}
}), endAdornment, renderSuffix ? renderSuffix(_extends({}, muiFormControl)) : null, /*#__PURE__*/_jsx(PickersInputBaseInput, _extends({
name: name,
className: classes.input,
value: value,
onChange: onChange,
id: id,
"aria-hidden": "true",
tabIndex: -1,
readOnly: readOnly,
required: muiFormControl.required,
disabled: muiFormControl.disabled
// Hidden input element cannot be focused, trigger the root focus instead
// This allows to maintain the ability to do `inputRef.current.focus()` to focus the field
,
onFocus: handleHiddenInputFocus
}, inputProps, {
ref: handleInputRef
})), isSingleInputRange && /*#__PURE__*/_jsx(PickersInputBaseActiveBar, {
className: classes.activeBar,
ref: activeBarRef,
ownerState: {
sectionOffsets: sectionOffsetsRef.current
}
})]
}));
});
if (process.env.NODE_ENV !== "production") PickersInputBase.displayName = "PickersInputBase";
process.env.NODE_ENV !== "production" ? PickersInputBase.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm 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,
component: PropTypes.elementType,
/**
* If true, the whole element is editable.
* Useful when all the sections are selected.
*/
contentEditable: PropTypes.bool.isRequired,
'data-multi-input': PropTypes.string,
/**
* 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: refType,
label: PropTypes.node,
margin: PropTypes.oneOf(['dense', 'none', 'normal']),
name: PropTypes.string,
onChange: PropTypes.func.isRequired,
onClick: PropTypes.func.isRequired,
onInput: PropTypes.func.isRequired,
onKeyDown: PropTypes.func.isRequired,
onPaste: PropTypes.func.isRequired,
ownerState: PropTypes /* @typescript-to-proptypes-ignore */.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 props used for each component slot.
* @default {}
*/
slotProps: PropTypes.object,
/**
* 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 { PickersInputBase };

View file

@ -0,0 +1,62 @@
import * as React from 'react';
import { BoxProps } from '@mui/material/Box';
import { MuiEvent } from '@mui/x-internals/types';
import { PickersSectionListProps } from "../../PickersSectionList/index.js";
import { PickerTextFieldOwnerState } from "../../models/fields.js";
export interface PickersInputPropsUsedByField extends Pick<PickersSectionListProps, 'elements' | 'sectionListRef' | 'contentEditable' | 'tabIndex'> {
/**
* 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: boolean;
onClick: React.MouseEventHandler<HTMLDivElement>;
onKeyDown: React.EventHandler<MuiEvent<React.KeyboardEvent<HTMLDivElement>>>;
onInput: React.FormEventHandler<HTMLDivElement>;
onPaste: React.ClipboardEventHandler<HTMLDivElement>;
endAdornment?: React.ReactNode;
startAdornment?: React.ReactNode;
value: string;
onChange: React.ChangeEventHandler<HTMLInputElement>;
label?: React.ReactNode;
id?: string;
fullWidth?: boolean;
readOnly?: boolean;
name?: string;
inputProps?: React.HTMLAttributes<HTMLInputElement> & {
ref?: React.Ref<HTMLInputElement>;
};
inputRef?: React.Ref<HTMLInputElement>;
}
export interface PickersInputBaseProps extends Omit<BoxProps, keyof PickersInputPropsUsedByField>, PickersInputPropsUsedByField {
ownerState?: PickerTextFieldOwnerState;
margin?: 'dense' | 'none' | 'normal';
renderSuffix?: (state: {
disabled?: boolean;
error?: boolean;
filled?: boolean;
focused?: boolean;
margin?: 'dense' | 'none' | 'normal';
required?: boolean;
adornedStart?: boolean;
}) => React.ReactNode;
ref?: React.Ref<HTMLDivElement>;
/**
* The components used for each slot inside.
*
* @default {}
*/
slots?: {
root?: React.ElementType;
input?: React.ElementType;
};
/**
* The props used for each component slot.
* @default {}
*/
slotProps?: {
root?: any;
input?: any;
};
'data-multi-input'?: string;
}

View file

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

View file

@ -0,0 +1,4 @@
export { PickersInputBase } from "./PickersInputBase.js";
export type { PickersInputBaseProps } from "./PickersInputBase.types.js";
export { pickersInputBaseClasses, getPickersInputBaseUtilityClass } from "./pickersInputBaseClasses.js";
export type { PickersInputBaseClasses, PickersInputBaseClassKey } from "./pickersInputBaseClasses.js";

View file

@ -0,0 +1,2 @@
export { PickersInputBase } from "./PickersInputBase.js";
export { pickersInputBaseClasses, getPickersInputBaseUtilityClass } from "./pickersInputBaseClasses.js";

View file

@ -0,0 +1,35 @@
export interface PickersInputBaseClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if focused. */
focused: string;
/** State class applied to the root element if `disabled=true`. */
disabled: string;
/** State class applied to the root element if `readOnly=true`. */
readOnly: string;
/** State class applied to the root element if `error=true`. */
error: string;
/** State class applied to the root element if `size=small`. */
inputSizeSmall: string;
/** Styles applied to the NotchedOutline element. */
notchedOutline: string;
/** Styles applied to the real hidden input element. */
input: string;
/** Styles applied to the container of the sections. */
sectionsContainer: string;
/** Styles applied to the content of a section. */
sectionContent: string;
/** Styles applied to the separator before a section. */
sectionBefore: string;
/** Styles applied to the separator after a section. */
sectionAfter: string;
/** Styles applied to the root if there is a startAdornment present. */
adornedStart: string;
/** Styles applied to the root if there is an endAdornment present. */
adornedEnd: string;
/** Styles applied to the active section bar. */
activeBar: string;
}
export type PickersInputBaseClassKey = keyof PickersInputBaseClasses;
export declare function getPickersInputBaseUtilityClass(slot: string): string;
export declare const pickersInputBaseClasses: Record<keyof PickersInputBaseClasses, string>;

View file

@ -0,0 +1,6 @@
import generateUtilityClass from '@mui/utils/generateUtilityClass';
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
export function getPickersInputBaseUtilityClass(slot) {
return generateUtilityClass('MuiPickersInputBase', slot);
}
export const pickersInputBaseClasses = generateUtilityClasses('MuiPickersInputBase', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input', 'inputSizeSmall', 'activeBar']);

View file

@ -0,0 +1,11 @@
import * as React from 'react';
interface OutlineProps extends React.HTMLAttributes<HTMLFieldSetElement> {
notched: boolean;
shrink: boolean;
label: React.ReactNode;
}
/**
* @ignore - internal component.
*/
export default function Outline(props: OutlineProps): React.JSX.Element;
export {};

View file

@ -0,0 +1,136 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["children", "className", "label", "notched", "shrink"];
import * as React from 'react';
import { styled } from '@mui/material/styles';
import { shouldForwardProp } from '@mui/system/createStyled';
import { usePickerTextFieldOwnerState } from "../usePickerTextFieldOwnerState.js";
import { jsx as _jsx } from "react/jsx-runtime";
const OutlineRoot = styled('fieldset', {
name: 'MuiPickersOutlinedInput',
slot: 'NotchedOutline'
})(({
theme
}) => {
const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
return {
textAlign: 'left',
position: 'absolute',
bottom: 0,
right: 0,
top: -5,
left: 0,
margin: 0,
padding: '0 8px',
pointerEvents: 'none',
borderRadius: 'inherit',
borderStyle: 'solid',
borderWidth: 1,
overflow: 'hidden',
minWidth: '0%',
borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
};
});
const OutlineLabel = styled('span')(({
theme
}) => ({
fontFamily: theme.typography.fontFamily,
fontSize: 'inherit'
}));
const OutlineLegend = styled('legend', {
shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'notched'
})(({
theme
}) => ({
float: 'unset',
// Fix conflict with bootstrap
width: 'auto',
// Fix conflict with bootstrap
overflow: 'hidden',
// Fix Horizontal scroll when label too long
variants: [{
props: {
inputHasLabel: false
},
style: {
padding: 0,
lineHeight: '11px',
// sync with `height` in `legend` styles
transition: theme.transitions.create('width', {
duration: 150,
easing: theme.transitions.easing.easeOut
})
}
}, {
props: {
inputHasLabel: true
},
style: {
display: 'block',
// Fix conflict with normalize.css and sanitize.css
padding: 0,
height: 11,
// sync with `lineHeight` in `legend` styles
fontSize: '0.75em',
visibility: 'hidden',
maxWidth: 0.01,
transition: theme.transitions.create('max-width', {
duration: 50,
easing: theme.transitions.easing.easeOut
}),
whiteSpace: 'nowrap',
'& > span': {
paddingLeft: 5,
paddingRight: 5,
display: 'inline-block',
opacity: 0,
visibility: 'visible'
}
}
}, {
props: {
inputHasLabel: true,
notched: true
},
style: {
maxWidth: '100%',
transition: theme.transitions.create('max-width', {
duration: 100,
easing: theme.transitions.easing.easeOut,
delay: 50
})
}
}]
}));
/**
* @ignore - internal component.
*/
export default function Outline(props) {
const {
className,
label,
notched
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const ownerState = usePickerTextFieldOwnerState();
return /*#__PURE__*/_jsx(OutlineRoot, _extends({
"aria-hidden": true,
className: className
}, other, {
ownerState: ownerState,
children: /*#__PURE__*/_jsx(OutlineLegend, {
ownerState: ownerState,
notched: notched,
children: label ? /*#__PURE__*/_jsx(OutlineLabel, {
children: label
}) :
/*#__PURE__*/
// notranslate needed while Google Translate will not fix zero-width space issue
_jsx(OutlineLabel, {
className: "notranslate",
children: "\u200B"
})
})
}));
}

View file

@ -0,0 +1,10 @@
import * as React from 'react';
import { PickersInputBaseProps } from "../PickersInputBase/index.js";
export interface PickersOutlinedInputProps extends PickersInputBaseProps {
notched?: boolean;
}
/**
* @ignore - internal component.
*/
declare const PickersOutlinedInput: React.ForwardRefExoticComponent<Omit<PickersOutlinedInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
export { PickersOutlinedInput };

View file

@ -0,0 +1,198 @@
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["label", "autoFocus", "ownerState", "classes", "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 refType from '@mui/utils/refType';
import composeClasses from '@mui/utils/composeClasses';
import { pickersOutlinedInputClasses, getPickersOutlinedInputUtilityClass } from "./pickersOutlinedInputClasses.js";
import Outline from "./Outline.js";
import { PickersInputBase } from "../PickersInputBase/index.js";
import { PickersInputBaseRoot, PickersInputBaseSectionsContainer } from "../PickersInputBase/PickersInputBase.js";
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
const PickersOutlinedInputRoot = styled(PickersInputBaseRoot, {
name: 'MuiPickersOutlinedInput',
slot: 'Root'
})(({
theme
}) => {
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',
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
},
variants: Object.keys((theme.vars ?? theme).palette)
// @ts-ignore
.filter(key => (theme.vars ?? theme).palette[key]?.main ?? false).map(color => ({
props: {
inputColor: color
},
style: {
[`&.${pickersOutlinedInputClasses.focused}:not(.${pickersOutlinedInputClasses.error}) .${pickersOutlinedInputClasses.notchedOutline}`]: {
// @ts-ignore
borderColor: (theme.vars || theme).palette[color].main
}
}
}))
};
});
const PickersOutlinedInputSectionsContainer = styled(PickersInputBaseSectionsContainer, {
name: 'MuiPickersOutlinedInput',
slot: 'SectionsContainer'
})({
padding: '16.5px 0',
variants: [{
props: {
inputSize: 'small'
},
style: {
padding: '8.5px 0'
}
}]
});
const useUtilityClasses = classes => {
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,
classes: classesProp,
notched
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const muiFormControl = useFormControl();
const classes = useUtilityClasses(classesProp);
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?.required ? /*#__PURE__*/_jsxs(React.Fragment, {
children: [label, "\u2009", '*']
}) : label
})
}, other, {
label: label,
classes: classes,
ref: ref
}));
});
if (process.env.NODE_ENV !== "production") PickersOutlinedInput.displayName = "PickersOutlinedInput";
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 "pnpm 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,
component: PropTypes.elementType,
/**
* If true, the whole element is editable.
* Useful when all the sections are selected.
*/
contentEditable: PropTypes.bool.isRequired,
'data-multi-input': PropTypes.string,
/**
* 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: refType,
label: PropTypes.node,
margin: PropTypes.oneOf(['dense', 'none', 'normal']),
name: PropTypes.string,
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 /* @typescript-to-proptypes-ignore */.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 props used for each component slot.
* @default {}
*/
slotProps: PropTypes.object,
/**
* 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';

View file

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

View file

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

View file

@ -0,0 +1,24 @@
import { PickersInputBaseClasses } from "../PickersInputBase/index.js";
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: {
root: string;
input: string;
notchedOutline: string;
sectionContent: string;
disabled: string;
readOnly: string;
focused: string;
error: string;
inputSizeSmall: string;
sectionsContainer: string;
sectionBefore: string;
sectionAfter: string;
adornedStart: string;
adornedEnd: string;
activeBar: string;
};

View file

@ -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/index.js";
export function getPickersOutlinedInputUtilityClass(slot) {
return generateUtilityClass('MuiPickersOutlinedInput', slot);
}
export const pickersOutlinedInputClasses = _extends({}, pickersInputBaseClasses, generateUtilityClasses('MuiPickersOutlinedInput', ['root', 'notchedOutline', 'input']));

View file

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

View file

@ -0,0 +1,296 @@
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "hiddenLabel", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps", "data-active-range-position"];
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { styled, useThemeProps } from '@mui/material/styles';
import refType from '@mui/utils/refType';
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.js";
import { PickersOutlinedInput } from "./PickersOutlinedInput/index.js";
import { PickersFilledInput } from "./PickersFilledInput/index.js";
import { PickersInput } from "./PickersInput/index.js";
import { useFieldOwnerState } from "../internals/hooks/useFieldOwnerState.js";
import { PickerTextFieldOwnerStateContext } from "./usePickerTextFieldOwnerState.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const VARIANT_COMPONENT = {
standard: PickersInput,
filled: PickersFilledInput,
outlined: PickersOutlinedInput
};
const PickersTextFieldRoot = styled(FormControl, {
name: 'MuiPickersTextField',
slot: 'Root'
})({
maxWidth: '100%'
});
const useUtilityClasses = (classes, ownerState) => {
const {
isFieldFocused,
isFieldDisabled,
isFieldRequired
} = ownerState;
const slots = {
root: ['root', isFieldFocused && !isFieldDisabled && 'focused', isFieldDisabled && 'disabled', isFieldRequired && '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,
classes: classesProp,
color = 'primary',
disabled = false,
error = false,
variant = 'outlined',
required = false,
hiddenLabel = false,
// Props used by PickersInput
InputProps,
inputProps,
inputRef,
sectionListRef,
elements,
areAllSectionsEmpty,
onClick,
onKeyDown,
onKeyUp,
onPaste,
onInput,
endAdornment,
startAdornment,
tabIndex,
contentEditable,
focused,
value,
onChange,
fullWidth,
id: idProp,
name,
// Props used by FormHelperText
helperText,
FormHelperTextProps,
// Props used by InputLabel
label,
InputLabelProps,
// @ts-ignore
'data-active-range-position': dataActiveRangePosition
} = 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 fieldOwnerState = useFieldOwnerState({
disabled: props.disabled,
required: props.required,
readOnly: InputProps?.readOnly
});
const ownerState = React.useMemo(() => _extends({}, fieldOwnerState, {
isFieldValueEmpty: areAllSectionsEmpty,
isFieldFocused: focused ?? false,
hasFieldError: error ?? false,
inputSize: props.size ?? 'medium',
inputColor: color ?? 'primary',
isInputInFullWidth: fullWidth ?? false,
hasStartAdornment: Boolean(startAdornment ?? InputProps?.startAdornment),
hasEndAdornment: Boolean(endAdornment ?? InputProps?.endAdornment),
inputHasLabel: !!label,
isLabelShrunk: Boolean(InputLabelProps?.shrink)
}), [fieldOwnerState, areAllSectionsEmpty, focused, error, props.size, color, fullWidth, startAdornment, endAdornment, InputProps?.startAdornment, InputProps?.endAdornment, label, InputLabelProps?.shrink]);
const classes = useUtilityClasses(classesProp, ownerState);
const PickersInputComponent = VARIANT_COMPONENT[variant];
const inputAdditionalProps = {};
if (variant === 'outlined') {
if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
inputAdditionalProps.notched = InputLabelProps.shrink;
}
inputAdditionalProps.label = label;
} else if (variant === 'filled') {
inputAdditionalProps.hiddenLabel = hiddenLabel;
}
return /*#__PURE__*/_jsx(PickerTextFieldOwnerStateContext.Provider, {
value: ownerState,
children: /*#__PURE__*/_jsxs(PickersTextFieldRoot, _extends({
className: clsx(classes.root, className),
ref: handleRootRef,
focused: focused,
disabled: disabled,
variant: variant,
error: error,
color: color,
fullWidth: fullWidth,
required: required,
ownerState: ownerState
}, other, {
children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabel, _extends({
htmlFor: id,
id: inputLabelId
}, InputLabelProps, {
children: label
})), /*#__PURE__*/_jsx(PickersInputComponent, _extends({
elements: elements,
areAllSectionsEmpty: areAllSectionsEmpty,
onClick: onClick,
onKeyDown: onKeyDown,
onKeyUp: onKeyUp,
onInput: onInput,
onPaste: onPaste,
onFocus: onFocus,
onBlur: onBlur,
endAdornment: endAdornment,
startAdornment: startAdornment,
tabIndex: tabIndex,
contentEditable: contentEditable,
value: value,
onChange: onChange,
id: id,
fullWidth: fullWidth,
inputProps: inputProps,
inputRef: inputRef,
sectionListRef: sectionListRef,
label: label,
name: name,
role: "group",
"aria-labelledby": inputLabelId,
"aria-describedby": helperTextId,
"aria-live": helperTextId ? 'polite' : undefined,
"data-active-range-position": dataActiveRangePosition
}, inputAdditionalProps, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
id: helperTextId
}, FormHelperTextProps, {
children: helperText
}))]
}))
});
});
if (process.env.NODE_ENV !== "production") PickersTextField.displayName = "PickersTextField";
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 "pnpm 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: refType,
label: PropTypes.node,
/**
* If `dense` or `normal`, will adjust vertical spacing of this and contained components.
* @default 'none'
*/
margin: PropTypes.oneOf(['dense', 'none', 'normal']),
name: PropTypes.string,
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 };

View file

@ -0,0 +1,67 @@
import * as React from 'react';
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 { PickersInputPropsUsedByField } from "./PickersInputBase/PickersInputBase.types.js";
import type { PickersInputProps } from "./PickersInput/index.js";
import type { PickersOutlinedInputProps } from "./PickersOutlinedInput/index.js";
import type { PickersFilledInputProps } from "./PickersFilledInput/index.js";
interface PickersTextFieldPropsUsedByField {
onFocus: React.FocusEventHandler<HTMLDivElement>;
onBlur: React.FocusEventHandler<HTMLDivElement>;
disabled: boolean;
error: boolean;
}
export interface PickersBaseTextFieldProps extends PickersInputPropsUsedByField, PickersTextFieldPropsUsedByField, Omit<FormControlProps, keyof PickersInputPropsUsedByField | keyof PickersTextFieldPropsUsedByField> {
FormHelperTextProps?: Partial<FormHelperTextProps>;
InputLabelProps?: Partial<InputLabelProps>;
/**
* The helper text content.
*/
helperText?: React.ReactNode;
}
export interface PickersStandardTextFieldProps extends PickersBaseTextFieldProps {
/**
* The variant to use.
* @default 'outlined'
*/
variant?: 'standard';
/**
* 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?: Partial<PickersInputProps>;
}
export interface PickersOutlinedTextFieldProps extends PickersBaseTextFieldProps {
/**
* The variant to use.
* @default 'outlined'
*/
variant?: 'outlined';
/**
* 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?: Partial<PickersOutlinedInputProps>;
}
export interface PickersFilledTextFieldProps extends PickersBaseTextFieldProps {
/**
* The variant to use.
* @default 'outlined'
*/
variant?: 'filled';
/**
* 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?: Partial<PickersFilledInputProps>;
}
export type PickersTextFieldProps<Variant extends TextFieldVariants = TextFieldVariants> = Variant extends 'filled' ? PickersFilledTextFieldProps : Variant extends 'standard' ? PickersStandardTextFieldProps : PickersOutlinedTextFieldProps;
export {};

View file

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

View file

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

View file

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

View file

@ -0,0 +1,15 @@
export interface PickersTextFieldClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the root element if focused. */
focused: string;
/** State class applied to the root element if `disabled=true`. */
disabled: string;
/** State class applied to the root element if `error=true`. */
error: string;
/** State class applied to the root element id `required=true` */
required: string;
}
export type PickersTextFieldClassKey = keyof PickersTextFieldClasses;
export declare function getPickersTextFieldUtilityClass(slot: string): string;
export declare const pickersTextFieldClasses: Record<keyof PickersTextFieldClasses, string>;

View file

@ -0,0 +1,6 @@
import generateUtilityClass from '@mui/utils/generateUtilityClass';
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
export function getPickersTextFieldUtilityClass(slot) {
return generateUtilityClass('MuiPickersTextField', slot);
}
export const pickersTextFieldClasses = generateUtilityClasses('MuiPickersTextField', ['root', 'focused', 'disabled', 'error', 'required']);

View file

@ -0,0 +1,4 @@
import * as React from 'react';
import { PickerTextFieldOwnerState } from "../models/fields.js";
export declare const PickerTextFieldOwnerStateContext: React.Context<PickerTextFieldOwnerState | null>;
export declare const usePickerTextFieldOwnerState: () => PickerTextFieldOwnerState;

View file

@ -0,0 +1,12 @@
'use client';
import * as React from 'react';
export const PickerTextFieldOwnerStateContext = /*#__PURE__*/React.createContext(null);
if (process.env.NODE_ENV !== "production") PickerTextFieldOwnerStateContext.displayName = "PickerTextFieldOwnerStateContext";
export const usePickerTextFieldOwnerState = () => {
const value = React.useContext(PickerTextFieldOwnerStateContext);
if (value == null) {
throw new Error(['MUI X: The `usePickerTextFieldOwnerState` can only be called in components that are used inside a PickerTextField component'].join('\n'));
}
return value;
};