@mui/base
Advanced tools
Comparing version 5.0.0-beta.36 to 5.0.0-beta.37
/** | ||
* @mui/base v5.0.0-beta.36 | ||
* @mui/base v5.0.0-beta.37 | ||
* | ||
@@ -4,0 +4,0 @@ * @license MIT |
/** | ||
* @mui/base v5.0.0-beta.36 | ||
* @mui/base v5.0.0-beta.37 | ||
* | ||
@@ -4,0 +4,0 @@ * @license MIT |
@@ -7,3 +7,2 @@ 'use client'; | ||
import PropTypes from 'prop-types'; | ||
import * as ReactDOM from 'react-dom'; | ||
import { unstable_debounce as debounce, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerWindow as ownerWindow } from '@mui/utils'; | ||
@@ -31,3 +30,3 @@ import { jsx as _jsx } from "react/jsx-runtime"; | ||
function isEmpty(obj) { | ||
return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflow; | ||
return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflowing; | ||
} | ||
@@ -59,9 +58,3 @@ | ||
var shadowRef = React.useRef(null); | ||
var renders = React.useRef(0); | ||
var _React$useState = React.useState({ | ||
outerHeightStyle: 0 | ||
}), | ||
state = _React$useState[0], | ||
setState = _React$useState[1]; | ||
var getUpdatedState = React.useCallback(function () { | ||
var calculateTextareaStyles = React.useCallback(function () { | ||
var input = inputRef.current; | ||
@@ -74,3 +67,4 @@ var containerWindow = ownerWindow(input); | ||
return { | ||
outerHeightStyle: 0 | ||
outerHeightStyle: 0, | ||
overflowing: false | ||
}; | ||
@@ -110,56 +104,20 @@ } | ||
var outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0); | ||
var overflow = Math.abs(outerHeight - innerHeight) <= 1; | ||
var overflowing = Math.abs(outerHeight - innerHeight) <= 1; | ||
return { | ||
outerHeightStyle: outerHeightStyle, | ||
overflow: overflow | ||
overflowing: overflowing | ||
}; | ||
}, [maxRows, minRows, props.placeholder]); | ||
var updateState = function updateState(prevState, newState) { | ||
var outerHeightStyle = newState.outerHeightStyle, | ||
overflow = newState.overflow; // Need a large enough difference to update the height. | ||
// This prevents infinite rendering loop. | ||
if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) { | ||
renders.current += 1; | ||
return { | ||
overflow: overflow, | ||
outerHeightStyle: outerHeightStyle | ||
}; | ||
} | ||
if (process.env.NODE_ENV !== 'production') { | ||
if (renders.current === 20) { | ||
console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n')); | ||
} | ||
} | ||
return prevState; | ||
}; | ||
var syncHeight = React.useCallback(function () { | ||
var newState = getUpdatedState(); | ||
if (isEmpty(newState)) { | ||
var textareaStyles = calculateTextareaStyles(); | ||
if (isEmpty(textareaStyles)) { | ||
return; | ||
} | ||
setState(function (prevState) { | ||
return updateState(prevState, newState); | ||
}); | ||
}, [getUpdatedState]); | ||
var input = inputRef.current; | ||
input.style.height = "".concat(textareaStyles.outerHeightStyle, "px"); | ||
input.style.overflow = textareaStyles.overflowing ? 'hidden' : ''; | ||
}, [calculateTextareaStyles]); | ||
useEnhancedEffect(function () { | ||
var syncHeightWithFlushSync = function syncHeightWithFlushSync() { | ||
var newState = getUpdatedState(); | ||
if (isEmpty(newState)) { | ||
return; | ||
} | ||
// In React 18, state updates in a ResizeObserver's callback are happening after | ||
// the paint, this leads to an infinite rendering. | ||
// | ||
// Using flushSync ensures that the states is updated before the next pain. | ||
// Related issue - https://github.com/facebook/react/issues/24331 | ||
ReactDOM.flushSync(function () { | ||
setState(function (prevState) { | ||
return updateState(prevState, newState); | ||
}); | ||
}); | ||
}; | ||
var handleResize = function handleResize() { | ||
renders.current = 0; | ||
syncHeightWithFlushSync(); | ||
syncHeight(); | ||
}; | ||
@@ -194,11 +152,7 @@ // Workaround a "ResizeObserver loop completed with undelivered notifications" error | ||
}; | ||
}, [getUpdatedState]); | ||
}, [calculateTextareaStyles, syncHeight]); | ||
useEnhancedEffect(function () { | ||
syncHeight(); | ||
}); | ||
React.useEffect(function () { | ||
renders.current = 0; | ||
}, [value]); | ||
var handleChange = function handleChange(event) { | ||
renders.current = 0; | ||
if (!isControlled) { | ||
@@ -218,9 +172,3 @@ syncHeight(); | ||
, | ||
rows: minRows, | ||
style: _extends({ | ||
height: state.outerHeightStyle, | ||
// Need a large enough difference to allow scrolling. | ||
// This prevents infinite rendering loop. | ||
overflow: state.overflow ? 'hidden' : undefined | ||
}, style) | ||
rows: minRows | ||
}, other)), /*#__PURE__*/_jsx("textarea", { | ||
@@ -227,0 +175,0 @@ "aria-hidden": true, |
import * as React from 'react'; | ||
export var PopupContext = /*#__PURE__*/React.createContext(null); | ||
export var PopupContext = /*#__PURE__*/React.createContext(null); | ||
if (process.env.NODE_ENV !== 'production') { | ||
PopupContext.displayName = 'PopupContext'; | ||
} |
@@ -803,2 +803,3 @@ 'use client'; | ||
case 'Backspace': | ||
// Remove the value on the left of the "cursor" | ||
if (multiple && !readOnly && inputValue === '' && value.length > 0) { | ||
@@ -814,2 +815,3 @@ var index = focusedTag === -1 ? value.length - 1 : focusedTag; | ||
case 'Delete': | ||
// Remove the value on the right of the "cursor" | ||
if (multiple && !readOnly && inputValue === '' && value.length > 0 && focusedTag !== -1) { | ||
@@ -816,0 +818,0 @@ var _index = focusedTag; |
@@ -5,3 +5,5 @@ 'use client'; | ||
export var CompoundComponentContext = /*#__PURE__*/React.createContext(null); | ||
CompoundComponentContext.displayName = 'CompoundComponentContext'; | ||
if (process.env.NODE_ENV !== 'production') { | ||
CompoundComponentContext.displayName = 'CompoundComponentContext'; | ||
} | ||
/** | ||
@@ -8,0 +10,0 @@ * Sorts the subitems by their position in the DOM. |
import * as React from 'react'; | ||
var DropdownContext = /*#__PURE__*/React.createContext(null); | ||
if (process.env.NODE_ENV !== 'production') { | ||
DropdownContext.displayName = 'DropdownContext'; | ||
} | ||
export { DropdownContext }; |
@@ -101,3 +101,5 @@ 'use client'; | ||
required: required, | ||
type: 'checkbox' | ||
type: 'checkbox', | ||
role: 'switch', | ||
'aria-checked': checkedProp | ||
}, otherProps, { | ||
@@ -104,0 +106,0 @@ onChange: createHandleInputChange(otherProps), |
import * as React from 'react'; | ||
export var TransitionContext = /*#__PURE__*/React.createContext(null); | ||
export var TransitionContext = /*#__PURE__*/React.createContext(null); | ||
if (process.env.NODE_ENV !== 'production') { | ||
TransitionContext.displayName = 'TransitionContext'; | ||
} |
@@ -9,2 +9,5 @@ 'use client'; | ||
var ClassNameConfiguratorContext = /*#__PURE__*/React.createContext(defaultContextValue); | ||
if (process.env.NODE_ENV !== 'production') { | ||
ClassNameConfiguratorContext.displayName = 'ClassNameConfiguratorContext'; | ||
} | ||
/** | ||
@@ -11,0 +14,0 @@ * @ignore - internal hook. |
/** | ||
* @mui/base v5.0.0-beta.36 | ||
* @mui/base v5.0.0-beta.37 | ||
* | ||
@@ -4,0 +4,0 @@ * @license MIT |
@@ -8,3 +8,2 @@ 'use client'; | ||
import PropTypes from 'prop-types'; | ||
import * as ReactDOM from 'react-dom'; | ||
import { unstable_debounce as debounce, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerWindow as ownerWindow } from '@mui/utils'; | ||
@@ -32,3 +31,3 @@ import { jsx as _jsx } from "react/jsx-runtime"; | ||
function isEmpty(obj) { | ||
return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflow; | ||
return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflowing; | ||
} | ||
@@ -62,7 +61,3 @@ | ||
const shadowRef = React.useRef(null); | ||
const renders = React.useRef(0); | ||
const [state, setState] = React.useState({ | ||
outerHeightStyle: 0 | ||
}); | ||
const getUpdatedState = React.useCallback(() => { | ||
const calculateTextareaStyles = React.useCallback(() => { | ||
const input = inputRef.current; | ||
@@ -75,3 +70,4 @@ const containerWindow = ownerWindow(input); | ||
return { | ||
outerHeightStyle: 0 | ||
outerHeightStyle: 0, | ||
overflowing: false | ||
}; | ||
@@ -111,55 +107,20 @@ } | ||
const outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0); | ||
const overflow = Math.abs(outerHeight - innerHeight) <= 1; | ||
const overflowing = Math.abs(outerHeight - innerHeight) <= 1; | ||
return { | ||
outerHeightStyle, | ||
overflow | ||
overflowing | ||
}; | ||
}, [maxRows, minRows, props.placeholder]); | ||
const updateState = (prevState, newState) => { | ||
const { | ||
outerHeightStyle, | ||
overflow | ||
} = newState; | ||
// Need a large enough difference to update the height. | ||
// This prevents infinite rendering loop. | ||
if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) { | ||
renders.current += 1; | ||
return { | ||
overflow, | ||
outerHeightStyle | ||
}; | ||
} | ||
if (process.env.NODE_ENV !== 'production') { | ||
if (renders.current === 20) { | ||
console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n')); | ||
} | ||
} | ||
return prevState; | ||
}; | ||
const syncHeight = React.useCallback(() => { | ||
const newState = getUpdatedState(); | ||
if (isEmpty(newState)) { | ||
const textareaStyles = calculateTextareaStyles(); | ||
if (isEmpty(textareaStyles)) { | ||
return; | ||
} | ||
setState(prevState => updateState(prevState, newState)); | ||
}, [getUpdatedState]); | ||
const input = inputRef.current; | ||
input.style.height = `${textareaStyles.outerHeightStyle}px`; | ||
input.style.overflow = textareaStyles.overflowing ? 'hidden' : ''; | ||
}, [calculateTextareaStyles]); | ||
useEnhancedEffect(() => { | ||
const syncHeightWithFlushSync = () => { | ||
const newState = getUpdatedState(); | ||
if (isEmpty(newState)) { | ||
return; | ||
} | ||
// In React 18, state updates in a ResizeObserver's callback are happening after | ||
// the paint, this leads to an infinite rendering. | ||
// | ||
// Using flushSync ensures that the states is updated before the next pain. | ||
// Related issue - https://github.com/facebook/react/issues/24331 | ||
ReactDOM.flushSync(() => { | ||
setState(prevState => updateState(prevState, newState)); | ||
}); | ||
}; | ||
const handleResize = () => { | ||
renders.current = 0; | ||
syncHeightWithFlushSync(); | ||
syncHeight(); | ||
}; | ||
@@ -194,11 +155,7 @@ // Workaround a "ResizeObserver loop completed with undelivered notifications" error | ||
}; | ||
}, [getUpdatedState]); | ||
}, [calculateTextareaStyles, syncHeight]); | ||
useEnhancedEffect(() => { | ||
syncHeight(); | ||
}); | ||
React.useEffect(() => { | ||
renders.current = 0; | ||
}, [value]); | ||
const handleChange = event => { | ||
renders.current = 0; | ||
if (!isControlled) { | ||
@@ -218,9 +175,3 @@ syncHeight(); | ||
, | ||
rows: minRows, | ||
style: _extends({ | ||
height: state.outerHeightStyle, | ||
// Need a large enough difference to allow scrolling. | ||
// This prevents infinite rendering loop. | ||
overflow: state.overflow ? 'hidden' : undefined | ||
}, style) | ||
rows: minRows | ||
}, other)), /*#__PURE__*/_jsx("textarea", { | ||
@@ -227,0 +178,0 @@ "aria-hidden": true, |
import * as React from 'react'; | ||
export const PopupContext = /*#__PURE__*/React.createContext(null); | ||
export const PopupContext = /*#__PURE__*/React.createContext(null); | ||
if (process.env.NODE_ENV !== 'production') { | ||
PopupContext.displayName = 'PopupContext'; | ||
} |
@@ -731,2 +731,3 @@ 'use client'; | ||
case 'Backspace': | ||
// Remove the value on the left of the "cursor" | ||
if (multiple && !readOnly && inputValue === '' && value.length > 0) { | ||
@@ -742,2 +743,3 @@ const index = focusedTag === -1 ? value.length - 1 : focusedTag; | ||
case 'Delete': | ||
// Remove the value on the right of the "cursor" | ||
if (multiple && !readOnly && inputValue === '' && value.length > 0 && focusedTag !== -1) { | ||
@@ -744,0 +746,0 @@ const index = focusedTag; |
@@ -5,3 +5,5 @@ 'use client'; | ||
export const CompoundComponentContext = /*#__PURE__*/React.createContext(null); | ||
CompoundComponentContext.displayName = 'CompoundComponentContext'; | ||
if (process.env.NODE_ENV !== 'production') { | ||
CompoundComponentContext.displayName = 'CompoundComponentContext'; | ||
} | ||
/** | ||
@@ -8,0 +10,0 @@ * Sorts the subitems by their position in the DOM. |
import * as React from 'react'; | ||
const DropdownContext = /*#__PURE__*/React.createContext(null); | ||
if (process.env.NODE_ENV !== 'production') { | ||
DropdownContext.displayName = 'DropdownContext'; | ||
} | ||
export { DropdownContext }; |
@@ -87,3 +87,5 @@ 'use client'; | ||
required, | ||
type: 'checkbox' | ||
type: 'checkbox', | ||
role: 'switch', | ||
'aria-checked': checkedProp | ||
}, otherProps, { | ||
@@ -90,0 +92,0 @@ onChange: createHandleInputChange(otherProps), |
import * as React from 'react'; | ||
export const TransitionContext = /*#__PURE__*/React.createContext(null); | ||
export const TransitionContext = /*#__PURE__*/React.createContext(null); | ||
if (process.env.NODE_ENV !== 'production') { | ||
TransitionContext.displayName = 'TransitionContext'; | ||
} |
@@ -9,2 +9,5 @@ 'use client'; | ||
const ClassNameConfiguratorContext = /*#__PURE__*/React.createContext(defaultContextValue); | ||
if (process.env.NODE_ENV !== 'production') { | ||
ClassNameConfiguratorContext.displayName = 'ClassNameConfiguratorContext'; | ||
} | ||
/** | ||
@@ -11,0 +14,0 @@ * @ignore - internal hook. |
/** | ||
* @mui/base v5.0.0-beta.36 | ||
* @mui/base v5.0.0-beta.37 | ||
* | ||
@@ -4,0 +4,0 @@ * @license MIT |
@@ -13,3 +13,2 @@ "use strict"; | ||
var _propTypes = _interopRequireDefault(require("prop-types")); | ||
var ReactDOM = _interopRequireWildcard(require("react-dom")); | ||
var _utils = require("@mui/utils"); | ||
@@ -39,3 +38,3 @@ var _jsxRuntime = require("react/jsx-runtime"); | ||
function isEmpty(obj) { | ||
return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflow; | ||
return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflowing; | ||
} | ||
@@ -69,7 +68,3 @@ | ||
const shadowRef = React.useRef(null); | ||
const renders = React.useRef(0); | ||
const [state, setState] = React.useState({ | ||
outerHeightStyle: 0 | ||
}); | ||
const getUpdatedState = React.useCallback(() => { | ||
const calculateTextareaStyles = React.useCallback(() => { | ||
const input = inputRef.current; | ||
@@ -82,3 +77,4 @@ const containerWindow = (0, _utils.unstable_ownerWindow)(input); | ||
return { | ||
outerHeightStyle: 0 | ||
outerHeightStyle: 0, | ||
overflowing: false | ||
}; | ||
@@ -118,55 +114,20 @@ } | ||
const outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0); | ||
const overflow = Math.abs(outerHeight - innerHeight) <= 1; | ||
const overflowing = Math.abs(outerHeight - innerHeight) <= 1; | ||
return { | ||
outerHeightStyle, | ||
overflow | ||
overflowing | ||
}; | ||
}, [maxRows, minRows, props.placeholder]); | ||
const updateState = (prevState, newState) => { | ||
const { | ||
outerHeightStyle, | ||
overflow | ||
} = newState; | ||
// Need a large enough difference to update the height. | ||
// This prevents infinite rendering loop. | ||
if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) { | ||
renders.current += 1; | ||
return { | ||
overflow, | ||
outerHeightStyle | ||
}; | ||
} | ||
if (process.env.NODE_ENV !== 'production') { | ||
if (renders.current === 20) { | ||
console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n')); | ||
} | ||
} | ||
return prevState; | ||
}; | ||
const syncHeight = React.useCallback(() => { | ||
const newState = getUpdatedState(); | ||
if (isEmpty(newState)) { | ||
const textareaStyles = calculateTextareaStyles(); | ||
if (isEmpty(textareaStyles)) { | ||
return; | ||
} | ||
setState(prevState => updateState(prevState, newState)); | ||
}, [getUpdatedState]); | ||
const input = inputRef.current; | ||
input.style.height = `${textareaStyles.outerHeightStyle}px`; | ||
input.style.overflow = textareaStyles.overflowing ? 'hidden' : ''; | ||
}, [calculateTextareaStyles]); | ||
(0, _utils.unstable_useEnhancedEffect)(() => { | ||
const syncHeightWithFlushSync = () => { | ||
const newState = getUpdatedState(); | ||
if (isEmpty(newState)) { | ||
return; | ||
} | ||
// In React 18, state updates in a ResizeObserver's callback are happening after | ||
// the paint, this leads to an infinite rendering. | ||
// | ||
// Using flushSync ensures that the states is updated before the next pain. | ||
// Related issue - https://github.com/facebook/react/issues/24331 | ||
ReactDOM.flushSync(() => { | ||
setState(prevState => updateState(prevState, newState)); | ||
}); | ||
}; | ||
const handleResize = () => { | ||
renders.current = 0; | ||
syncHeightWithFlushSync(); | ||
syncHeight(); | ||
}; | ||
@@ -201,11 +162,7 @@ // Workaround a "ResizeObserver loop completed with undelivered notifications" error | ||
}; | ||
}, [getUpdatedState]); | ||
}, [calculateTextareaStyles, syncHeight]); | ||
(0, _utils.unstable_useEnhancedEffect)(() => { | ||
syncHeight(); | ||
}); | ||
React.useEffect(() => { | ||
renders.current = 0; | ||
}, [value]); | ||
const handleChange = event => { | ||
renders.current = 0; | ||
if (!isControlled) { | ||
@@ -225,9 +182,3 @@ syncHeight(); | ||
, | ||
rows: minRows, | ||
style: (0, _extends2.default)({ | ||
height: state.outerHeightStyle, | ||
// Need a large enough difference to allow scrolling. | ||
// This prevents infinite rendering loop. | ||
overflow: state.overflow ? 'hidden' : undefined | ||
}, style) | ||
rows: minRows | ||
}, other)), /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", { | ||
@@ -234,0 +185,0 @@ "aria-hidden": true, |
@@ -10,2 +10,5 @@ "use strict"; | ||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } | ||
const PopupContext = exports.PopupContext = /*#__PURE__*/React.createContext(null); | ||
const PopupContext = exports.PopupContext = /*#__PURE__*/React.createContext(null); | ||
if (process.env.NODE_ENV !== 'production') { | ||
PopupContext.displayName = 'PopupContext'; | ||
} |
@@ -745,2 +745,3 @@ "use strict"; | ||
case 'Backspace': | ||
// Remove the value on the left of the "cursor" | ||
if (multiple && !readOnly && inputValue === '' && value.length > 0) { | ||
@@ -756,2 +757,3 @@ const index = focusedTag === -1 ? value.length - 1 : focusedTag; | ||
case 'Delete': | ||
// Remove the value on the right of the "cursor" | ||
if (multiple && !readOnly && inputValue === '' && value.length > 0 && focusedTag !== -1) { | ||
@@ -758,0 +760,0 @@ const index = focusedTag; |
@@ -13,3 +13,5 @@ "use strict"; | ||
const CompoundComponentContext = exports.CompoundComponentContext = /*#__PURE__*/React.createContext(null); | ||
CompoundComponentContext.displayName = 'CompoundComponentContext'; | ||
if (process.env.NODE_ENV !== 'production') { | ||
CompoundComponentContext.displayName = 'CompoundComponentContext'; | ||
} | ||
/** | ||
@@ -16,0 +18,0 @@ * Sorts the subitems by their position in the DOM. |
@@ -10,2 +10,5 @@ "use strict"; | ||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } | ||
const DropdownContext = exports.DropdownContext = /*#__PURE__*/React.createContext(null); | ||
const DropdownContext = exports.DropdownContext = /*#__PURE__*/React.createContext(null); | ||
if (process.env.NODE_ENV !== 'production') { | ||
DropdownContext.displayName = 'DropdownContext'; | ||
} |
@@ -98,3 +98,5 @@ "use strict"; | ||
required, | ||
type: 'checkbox' | ||
type: 'checkbox', | ||
role: 'switch', | ||
'aria-checked': checkedProp | ||
}, otherProps, { | ||
@@ -101,0 +103,0 @@ onChange: createHandleInputChange(otherProps), |
@@ -10,2 +10,5 @@ "use strict"; | ||
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } | ||
const TransitionContext = exports.TransitionContext = /*#__PURE__*/React.createContext(null); | ||
const TransitionContext = exports.TransitionContext = /*#__PURE__*/React.createContext(null); | ||
if (process.env.NODE_ENV !== 'production') { | ||
TransitionContext.displayName = 'TransitionContext'; | ||
} |
@@ -17,2 +17,5 @@ "use strict"; | ||
const ClassNameConfiguratorContext = /*#__PURE__*/React.createContext(defaultContextValue); | ||
if (process.env.NODE_ENV !== 'production') { | ||
ClassNameConfiguratorContext.displayName = 'ClassNameConfiguratorContext'; | ||
} | ||
/** | ||
@@ -19,0 +22,0 @@ * @ignore - internal hook. |
{ | ||
"name": "@mui/base", | ||
"version": "5.0.0-beta.36", | ||
"version": "5.0.0-beta.37", | ||
"private": false, | ||
@@ -35,3 +35,3 @@ "author": "MUI Team", | ||
"prop-types": "^15.8.1", | ||
"@mui/utils": "^5.15.9", | ||
"@mui/utils": "^5.15.11", | ||
"@mui/types": "^7.2.13" | ||
@@ -38,0 +38,0 @@ }, |
@@ -8,3 +8,2 @@ 'use client'; | ||
import PropTypes from 'prop-types'; | ||
import * as ReactDOM from 'react-dom'; | ||
import { unstable_debounce as debounce, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerWindow as ownerWindow } from '@mui/utils'; | ||
@@ -32,3 +31,3 @@ import { jsx as _jsx } from "react/jsx-runtime"; | ||
function isEmpty(obj) { | ||
return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflow; | ||
return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflowing; | ||
} | ||
@@ -62,7 +61,3 @@ | ||
const shadowRef = React.useRef(null); | ||
const renders = React.useRef(0); | ||
const [state, setState] = React.useState({ | ||
outerHeightStyle: 0 | ||
}); | ||
const getUpdatedState = React.useCallback(() => { | ||
const calculateTextareaStyles = React.useCallback(() => { | ||
const input = inputRef.current; | ||
@@ -75,3 +70,4 @@ const containerWindow = ownerWindow(input); | ||
return { | ||
outerHeightStyle: 0 | ||
outerHeightStyle: 0, | ||
overflowing: false | ||
}; | ||
@@ -111,55 +107,20 @@ } | ||
const outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0); | ||
const overflow = Math.abs(outerHeight - innerHeight) <= 1; | ||
const overflowing = Math.abs(outerHeight - innerHeight) <= 1; | ||
return { | ||
outerHeightStyle, | ||
overflow | ||
overflowing | ||
}; | ||
}, [maxRows, minRows, props.placeholder]); | ||
const updateState = (prevState, newState) => { | ||
const { | ||
outerHeightStyle, | ||
overflow | ||
} = newState; | ||
// Need a large enough difference to update the height. | ||
// This prevents infinite rendering loop. | ||
if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) { | ||
renders.current += 1; | ||
return { | ||
overflow, | ||
outerHeightStyle | ||
}; | ||
} | ||
if (process.env.NODE_ENV !== 'production') { | ||
if (renders.current === 20) { | ||
console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n')); | ||
} | ||
} | ||
return prevState; | ||
}; | ||
const syncHeight = React.useCallback(() => { | ||
const newState = getUpdatedState(); | ||
if (isEmpty(newState)) { | ||
const textareaStyles = calculateTextareaStyles(); | ||
if (isEmpty(textareaStyles)) { | ||
return; | ||
} | ||
setState(prevState => updateState(prevState, newState)); | ||
}, [getUpdatedState]); | ||
const input = inputRef.current; | ||
input.style.height = `${textareaStyles.outerHeightStyle}px`; | ||
input.style.overflow = textareaStyles.overflowing ? 'hidden' : ''; | ||
}, [calculateTextareaStyles]); | ||
useEnhancedEffect(() => { | ||
const syncHeightWithFlushSync = () => { | ||
const newState = getUpdatedState(); | ||
if (isEmpty(newState)) { | ||
return; | ||
} | ||
// In React 18, state updates in a ResizeObserver's callback are happening after | ||
// the paint, this leads to an infinite rendering. | ||
// | ||
// Using flushSync ensures that the states is updated before the next pain. | ||
// Related issue - https://github.com/facebook/react/issues/24331 | ||
ReactDOM.flushSync(() => { | ||
setState(prevState => updateState(prevState, newState)); | ||
}); | ||
}; | ||
const handleResize = () => { | ||
renders.current = 0; | ||
syncHeightWithFlushSync(); | ||
syncHeight(); | ||
}; | ||
@@ -194,11 +155,7 @@ // Workaround a "ResizeObserver loop completed with undelivered notifications" error | ||
}; | ||
}, [getUpdatedState]); | ||
}, [calculateTextareaStyles, syncHeight]); | ||
useEnhancedEffect(() => { | ||
syncHeight(); | ||
}); | ||
React.useEffect(() => { | ||
renders.current = 0; | ||
}, [value]); | ||
const handleChange = event => { | ||
renders.current = 0; | ||
if (!isControlled) { | ||
@@ -218,9 +175,3 @@ syncHeight(); | ||
, | ||
rows: minRows, | ||
style: _extends({ | ||
height: state.outerHeightStyle, | ||
// Need a large enough difference to allow scrolling. | ||
// This prevents infinite rendering loop. | ||
overflow: state.overflow ? 'hidden' : undefined | ||
}, style) | ||
rows: minRows | ||
}, other)), /*#__PURE__*/_jsx("textarea", { | ||
@@ -227,0 +178,0 @@ "aria-hidden": true, |
import * as React from 'react'; | ||
export const PopupContext = /*#__PURE__*/React.createContext(null); | ||
export const PopupContext = /*#__PURE__*/React.createContext(null); | ||
if (process.env.NODE_ENV !== 'production') { | ||
PopupContext.displayName = 'PopupContext'; | ||
} |
@@ -737,2 +737,3 @@ 'use client'; | ||
case 'Backspace': | ||
// Remove the value on the left of the "cursor" | ||
if (multiple && !readOnly && inputValue === '' && value.length > 0) { | ||
@@ -748,2 +749,3 @@ const index = focusedTag === -1 ? value.length - 1 : focusedTag; | ||
case 'Delete': | ||
// Remove the value on the right of the "cursor" | ||
if (multiple && !readOnly && inputValue === '' && value.length > 0 && focusedTag !== -1) { | ||
@@ -750,0 +752,0 @@ const index = focusedTag; |
@@ -5,3 +5,5 @@ 'use client'; | ||
export const CompoundComponentContext = /*#__PURE__*/React.createContext(null); | ||
CompoundComponentContext.displayName = 'CompoundComponentContext'; | ||
if (process.env.NODE_ENV !== 'production') { | ||
CompoundComponentContext.displayName = 'CompoundComponentContext'; | ||
} | ||
/** | ||
@@ -8,0 +10,0 @@ * Sorts the subitems by their position in the DOM. |
import * as React from 'react'; | ||
const DropdownContext = /*#__PURE__*/React.createContext(null); | ||
if (process.env.NODE_ENV !== 'production') { | ||
DropdownContext.displayName = 'DropdownContext'; | ||
} | ||
export { DropdownContext }; |
@@ -90,3 +90,5 @@ 'use client'; | ||
required, | ||
type: 'checkbox' | ||
type: 'checkbox', | ||
role: 'switch', | ||
'aria-checked': checkedProp | ||
}, otherProps, { | ||
@@ -93,0 +95,0 @@ onChange: createHandleInputChange(otherProps), |
import * as React from 'react'; | ||
export const TransitionContext = /*#__PURE__*/React.createContext(null); | ||
export const TransitionContext = /*#__PURE__*/React.createContext(null); | ||
if (process.env.NODE_ENV !== 'production') { | ||
TransitionContext.displayName = 'TransitionContext'; | ||
} |
@@ -9,2 +9,5 @@ 'use client'; | ||
const ClassNameConfiguratorContext = /*#__PURE__*/React.createContext(defaultContextValue); | ||
if (process.env.NODE_ENV !== 'production') { | ||
ClassNameConfiguratorContext.displayName = 'ClassNameConfiguratorContext'; | ||
} | ||
/** | ||
@@ -11,0 +14,0 @@ * @ignore - internal hook. |
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
3028514
59928
256
Updated@mui/utils@^5.15.11