Socket
Socket
Sign inDemoInstall

@mui/base

Package Overview
Dependencies
Maintainers
9
Versions
139
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mui/base - npm Package Compare versions

Comparing version 5.0.0-beta.36 to 5.0.0-beta.37

2

index.js
/**
* @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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc