pre-installations and preparations

This commit is contained in:
MuhammadKhalilzadeh committed 2024-05-05 11:21:00 +03:30
1 parent 3e5a0329cb
commit 201d621ac3
6977 files changed
+742826

No files matched your search

+136
View File
@@ -0,0 +1,136 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Badge = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _composeClasses = require("../composeClasses");
var _useBadge = require("../useBadge");
var _badgeClasses = require("./badgeClasses");
var _utils = require("../utils");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["badgeContent", "children", "invisible", "max", "slotProps", "slots", "showZero"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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 useUtilityClasses = ownerState => {
const {
invisible
} = ownerState;
const slots = {
root: ['root'],
badge: ['badge', invisible && 'invisible']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_badgeClasses.getBadgeUtilityClass));
};
/**
*
* Demos:
*
* - [Badge](https://mui.com/base-ui/react-badge/)
*
* API:
*
* - [Badge API](https://mui.com/base-ui/react-badge/components-api/#badge)
*/
const Badge = exports.Badge = /*#__PURE__*/React.forwardRef(function Badge(props, forwardedRef) {
var _slots$root, _slots$badge;
const {
children,
max: maxProp = 99,
slotProps = {},
slots = {},
showZero = false
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const {
badgeContent,
max,
displayValue,
invisible
} = (0, _useBadge.useBadge)((0, _extends2.default)({}, props, {
max: maxProp
}));
const ownerState = (0, _extends2.default)({}, props, {
badgeContent,
invisible,
max,
showZero
});
const classes = useUtilityClasses(ownerState);
const Root = (_slots$root = slots.root) != null ? _slots$root : 'span';
const rootProps = (0, _utils.useSlotProps)({
elementType: Root,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
additionalProps: {
ref: forwardedRef
},
ownerState,
className: classes.root
});
const BadgeComponent = (_slots$badge = slots.badge) != null ? _slots$badge : 'span';
const badgeProps = (0, _utils.useSlotProps)({
elementType: BadgeComponent,
externalSlotProps: slotProps.badge,
ownerState,
className: classes.badge
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeComponent, (0, _extends2.default)({}, badgeProps, {
children: displayValue
}))]
}));
});
process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content rendered within the badge.
*/
badgeContent: _propTypes.default.node,
/**
* The badge will be added relative to this node.
*/
children: _propTypes.default.node,
/**
* If `true`, the badge is invisible.
* @default false
*/
invisible: _propTypes.default.bool,
/**
* Max count to show.
* @default 99
*/
max: _propTypes.default.number,
/**
* Controls whether the badge is hidden when `badgeContent` is zero.
* @default false
*/
showZero: _propTypes.default.bool,
/**
* The props used for each slot inside the Badge.
* @default {}
*/
slotProps: _propTypes.default.shape({
badge: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the Badge.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
badge: _propTypes.default.elementType,
root: _propTypes.default.elementType
})
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.badgeClasses = void 0;
exports.getBadgeUtilityClass = getBadgeUtilityClass;
var _generateUtilityClasses = require("../generateUtilityClasses");
var _generateUtilityClass = require("../generateUtilityClass");
const COMPONENT_NAME = 'Badge';
function getBadgeUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const badgeClasses = exports.badgeClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'badge', 'invisible']);
+40
View File
@@ -0,0 +1,40 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
Badge: true
};
Object.defineProperty(exports, "Badge", {
enumerable: true,
get: function () {
return _Badge.Badge;
}
});
var _Badge = require("./Badge");
var _Badge2 = require("./Badge.types");
Object.keys(_Badge2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _Badge2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Badge2[key];
}
});
});
var _badgeClasses = require("./badgeClasses");
Object.keys(_badgeClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _badgeClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _badgeClasses[key];
}
});
});
+163
View File
@@ -0,0 +1,163 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Button = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _composeClasses = require("../composeClasses");
var _buttonClasses = require("./buttonClasses");
var _useButton = require("../useButton");
var _utils = require("../utils");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["action", "children", "disabled", "focusableWhenDisabled", "onFocusVisible", "slotProps", "slots", "rootElementName"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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 useUtilityClasses = ownerState => {
const {
active,
disabled,
focusVisible
} = ownerState;
const slots = {
root: ['root', disabled && 'disabled', focusVisible && 'focusVisible', active && 'active']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_buttonClasses.getButtonUtilityClass));
};
/**
* The foundation for building custom-styled buttons.
*
* Demos:
*
* - [Button](https://mui.com/base-ui/react-button/)
*
* API:
*
* - [Button API](https://mui.com/base-ui/react-button/components-api/#button)
*/
const Button = exports.Button = /*#__PURE__*/React.forwardRef(function Button(props, forwardedRef) {
var _slots$root;
const {
action,
children,
focusableWhenDisabled = false,
slotProps = {},
slots = {},
rootElementName: rootElementNameProp = 'button'
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const buttonRef = React.useRef();
let rootElementName = rootElementNameProp;
if (typeof slots.root === 'string') {
rootElementName = slots.root;
} else if (other.href || other.to) {
rootElementName = 'a';
}
const {
active,
focusVisible,
setFocusVisible,
getRootProps
} = (0, _useButton.useButton)((0, _extends2.default)({}, props, {
focusableWhenDisabled,
rootElementName
}));
React.useImperativeHandle(action, () => ({
focusVisible: () => {
setFocusVisible(true);
buttonRef.current.focus();
}
}), [setFocusVisible]);
const ownerState = (0, _extends2.default)({}, props, {
active,
focusableWhenDisabled,
focusVisible
});
const classes = useUtilityClasses(ownerState);
const defaultElement = other.href || other.to ? 'a' : 'button';
const Root = (_slots$root = slots.root) != null ? _slots$root : defaultElement;
const rootProps = (0, _utils.useSlotProps)({
elementType: Root,
getSlotProps: getRootProps,
externalForwardedProps: other,
externalSlotProps: slotProps.root,
additionalProps: {
ref: forwardedRef
},
ownerState,
className: classes.root
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
children: children
}));
});
process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* A ref for imperative actions. It currently only supports `focusVisible()` action.
*/
action: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
current: _propTypes.default.shape({
focusVisible: _propTypes.default.func.isRequired
})
})]),
/**
* @ignore
*/
children: _propTypes.default.node,
/**
* @ignore
*/
className: _propTypes.default.string,
/**
* If `true`, the component is disabled.
* @default false
*/
disabled: _propTypes.default.bool,
/**
* If `true`, allows a disabled button to receive focus.
* @default false
*/
focusableWhenDisabled: _propTypes.default.bool,
/**
* @ignore
*/
href: _propTypes.default.string,
/**
* @ignore
*/
onFocusVisible: _propTypes.default.func,
/**
* The HTML element that is ultimately rendered, for example 'button' or 'a'
* @default 'button'
*/
rootElementName: _propTypes.default /* @typescript-to-proptypes-ignore */.string,
/**
* The props used for each slot inside the Button.
* @default {}
*/
slotProps: _propTypes.default.shape({
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the Button.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
root: _propTypes.default.elementType
}),
/**
* @ignore
*/
to: _propTypes.default.string
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.buttonClasses = void 0;
exports.getButtonUtilityClass = getButtonUtilityClass;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'Button';
function getButtonUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const buttonClasses = exports.buttonClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'active', 'disabled', 'focusVisible']);
+40
View File
@@ -0,0 +1,40 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
Button: true
};
Object.defineProperty(exports, "Button", {
enumerable: true,
get: function () {
return _Button.Button;
}
});
var _Button = require("./Button");
var _buttonClasses = require("./buttonClasses");
Object.keys(_buttonClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _buttonClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _buttonClasses[key];
}
});
});
var _Button2 = require("./Button.types");
Object.keys(_Button2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _Button2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Button2[key];
}
});
});
+12
View File
@@ -0,0 +1,12 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "unstable_ClassNameGenerator", {
enumerable: true,
get: function () {
return _utils.unstable_ClassNameGenerator;
}
});
var _utils = require("@mui/utils");
+183
View File
@@ -0,0 +1,183 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ClickAwayListener = ClickAwayListener;
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@mui/utils");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
// TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
function mapEventPropToEvent(eventProp) {
return eventProp.substring(2).toLowerCase();
}
function clickedRootScrollbar(event, doc) {
return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
}
/**
* Listen for click events that occur somewhere in the document, outside of the element itself.
* For instance, if you need to hide a menu when people click anywhere else on your page.
*
* Demos:
*
* - [Click-Away Listener](https://mui.com/base-ui/react-click-away-listener/)
*
* API:
*
* - [ClickAwayListener API](https://mui.com/base-ui/react-click-away-listener/components-api/#click-away-listener)
*/
function ClickAwayListener(props) {
const {
children,
disableReactTree = false,
mouseEvent = 'onClick',
onClickAway,
touchEvent = 'onTouchEnd'
} = props;
const movedRef = React.useRef(false);
const nodeRef = React.useRef(null);
const activatedRef = React.useRef(false);
const syntheticEventRef = React.useRef(false);
React.useEffect(() => {
// Ensure that this component is not "activated" synchronously.
// https://github.com/facebook/react/issues/20074
setTimeout(() => {
activatedRef.current = true;
}, 0);
return () => {
activatedRef.current = false;
};
}, []);
const handleRef = (0, _utils.unstable_useForkRef)(
// @ts-expect-error TODO upstream fix
children.ref, nodeRef);
// The handler doesn't take event.defaultPrevented into account:
//
// event.preventDefault() is meant to stop default behaviors like
// clicking a checkbox to check it, hitting a button to submit a form,
// and hitting left arrow to move the cursor in a text input etc.
// Only special HTML elements have these default behaviors.
const handleClickAway = (0, _utils.unstable_useEventCallback)(event => {
// Given developers can stop the propagation of the synthetic event,
// we can only be confident with a positive value.
const insideReactTree = syntheticEventRef.current;
syntheticEventRef.current = false;
const doc = (0, _utils.unstable_ownerDocument)(nodeRef.current);
// 1. IE11 support, which trigger the handleClickAway even after the unbind
// 2. The child might render null.
// 3. Behave like a blur listener.
if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar(event, doc)) {
return;
}
// Do not act if user performed touchmove
if (movedRef.current) {
movedRef.current = false;
return;
}
let insideDOM;
// If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
if (event.composedPath) {
insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
} else {
insideDOM = !doc.documentElement.contains(
// @ts-expect-error returns `false` as intended when not dispatched from a Node
event.target) || nodeRef.current.contains(
// @ts-expect-error returns `false` as intended when not dispatched from a Node
event.target);
}
if (!insideDOM && (disableReactTree || !insideReactTree)) {
onClickAway(event);
}
});
// Keep track of mouse/touch events that bubbled up through the portal.
const createHandleSynthetic = handlerName => event => {
syntheticEventRef.current = true;
const childrenPropsHandler = children.props[handlerName];
if (childrenPropsHandler) {
childrenPropsHandler(event);
}
};
const childrenProps = {
ref: handleRef
};
if (touchEvent !== false) {
childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
}
React.useEffect(() => {
if (touchEvent !== false) {
const mappedTouchEvent = mapEventPropToEvent(touchEvent);
const doc = (0, _utils.unstable_ownerDocument)(nodeRef.current);
const handleTouchMove = () => {
movedRef.current = true;
};
doc.addEventListener(mappedTouchEvent, handleClickAway);
doc.addEventListener('touchmove', handleTouchMove);
return () => {
doc.removeEventListener(mappedTouchEvent, handleClickAway);
doc.removeEventListener('touchmove', handleTouchMove);
};
}
return undefined;
}, [handleClickAway, touchEvent]);
if (mouseEvent !== false) {
childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
}
React.useEffect(() => {
if (mouseEvent !== false) {
const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
const doc = (0, _utils.unstable_ownerDocument)(nodeRef.current);
doc.addEventListener(mappedMouseEvent, handleClickAway);
return () => {
doc.removeEventListener(mappedMouseEvent, handleClickAway);
};
}
return undefined;
}, [handleClickAway, mouseEvent]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
children: /*#__PURE__*/React.cloneElement(children, childrenProps)
});
}
process.env.NODE_ENV !== "production" ? ClickAwayListener.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The wrapped element.
*/
children: _utils.elementAcceptingRef.isRequired,
/**
* If `true`, the React tree is ignored and only the DOM tree is considered.
* This prop changes how portaled elements are handled.
* @default false
*/
disableReactTree: _propTypes.default.bool,
/**
* The mouse event to listen to. You can disable the listener by providing `false`.
* @default 'onClick'
*/
mouseEvent: _propTypes.default.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
/**
* Callback fired when a "click away" event is detected.
*/
onClickAway: _propTypes.default.func.isRequired,
/**
* The touch event to listen to. You can disable the listener by providing `false`.
* @default 'onTouchEnd'
*/
touchEvent: _propTypes.default.oneOf(['onTouchEnd', 'onTouchStart', false])
} : void 0;
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line
ClickAwayListener['propTypes' + ''] = (0, _utils.exactProp)(ClickAwayListener.propTypes);
}
+16
View File
@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _ClickAwayListener = require("./ClickAwayListener");
Object.keys(_ClickAwayListener).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _ClickAwayListener[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _ClickAwayListener[key];
}
});
});
+71
View File
@@ -0,0 +1,71 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Dropdown = Dropdown;
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@mui/utils");
var _DropdownContext = require("../useDropdown/DropdownContext");
var _useDropdown = require("../useDropdown/useDropdown");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
/**
*
* Demos:
*
* - [Menu](https://mui.com/base-ui/react-menu/)
*
* API:
*
* - [Dropdown API](https://mui.com/base-ui/react-menu/components-api/#dropdown)
*/function Dropdown(props) {
const {
children,
open,
defaultOpen,
onOpenChange
} = props;
const {
contextValue
} = (0, _useDropdown.useDropdown)({
defaultOpen,
onOpenChange,
open
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContext.DropdownContext.Provider, {
value: contextValue,
children: children
});
}
process.env.NODE_ENV !== "production" ? Dropdown.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
children: _propTypes.default.node,
/**
* If `true`, the dropdown is initially open.
*/
defaultOpen: _propTypes.default.bool,
/**
* Callback fired when the component requests to be opened or closed.
*/
onOpenChange: _propTypes.default.func,
/**
* Allows to control whether the dropdown is open.
* This is a controlled counterpart of `defaultOpen`.
*/
open: _propTypes.default.bool
} : void 0;
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line
Dropdown['propTypes' + ''] = (0, _utils.exactProp)(Dropdown.propTypes);
}
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+27
View File
@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Dropdown = require("./Dropdown");
Object.keys(_Dropdown).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _Dropdown[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Dropdown[key];
}
});
});
var _Dropdown2 = require("./Dropdown.types");
Object.keys(_Dropdown2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _Dropdown2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Dropdown2[key];
}
});
});
+346
View File
@@ -0,0 +1,346 @@
"use strict";
'use client';
/* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.FocusTrap = FocusTrap;
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@mui/utils");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
// Inspired by https://github.com/focus-trap/tabbable
const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
function getTabIndex(node) {
const tabindexAttr = parseInt(node.getAttribute('tabindex') || '', 10);
if (!Number.isNaN(tabindexAttr)) {
return tabindexAttr;
}
// Browsers do not return `tabIndex` correctly for contentEditable nodes;
// https://bugs.chromium.org/p/chromium/issues/detail?id=661108&q=contenteditable%20tabindex&can=2
// so if they don't have a tabindex attribute specifically set, assume it's 0.
// in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
// `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
// yet they are still part of the regular tab order; in FF, they get a default
// `tabIndex` of 0; since Chrome still puts those elements in the regular tab
// order, consider their tab index to be 0.
if (node.contentEditable === 'true' || (node.nodeName === 'AUDIO' || node.nodeName === 'VIDEO' || node.nodeName === 'DETAILS') && node.getAttribute('tabindex') === null) {
return 0;
}
return node.tabIndex;
}
function isNonTabbableRadio(node) {
if (node.tagName !== 'INPUT' || node.type !== 'radio') {
return false;
}
if (!node.name) {
return false;
}
const getRadio = selector => node.ownerDocument.querySelector(`input[type="radio"]${selector}`);
let roving = getRadio(`[name="${node.name}"]:checked`);
if (!roving) {
roving = getRadio(`[name="${node.name}"]`);
}
return roving !== node;
}
function isNodeMatchingSelectorFocusable(node) {
if (node.disabled || node.tagName === 'INPUT' && node.type === 'hidden' || isNonTabbableRadio(node)) {
return false;
}
return true;
}
function defaultGetTabbable(root) {
const regularTabNodes = [];
const orderedTabNodes = [];
Array.from(root.querySelectorAll(candidatesSelector)).forEach((node, i) => {
const nodeTabIndex = getTabIndex(node);
if (nodeTabIndex === -1 || !isNodeMatchingSelectorFocusable(node)) {
return;
}
if (nodeTabIndex === 0) {
regularTabNodes.push(node);
} else {
orderedTabNodes.push({
documentOrder: i,
tabIndex: nodeTabIndex,
node: node
});
}
});
return orderedTabNodes.sort((a, b) => a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex).map(a => a.node).concat(regularTabNodes);
}
function defaultIsEnabled() {
return true;
}
/**
* Utility component that locks focus inside the component.
*
* Demos:
*
* - [Focus Trap](https://mui.com/base-ui/react-focus-trap/)
*
* API:
*
* - [FocusTrap API](https://mui.com/base-ui/react-focus-trap/components-api/#focus-trap)
*/
function FocusTrap(props) {
const {
children,
disableAutoFocus = false,
disableEnforceFocus = false,
disableRestoreFocus = false,
getTabbable = defaultGetTabbable,
isEnabled = defaultIsEnabled,
open
} = props;
const ignoreNextEnforceFocus = React.useRef(false);
const sentinelStart = React.useRef(null);
const sentinelEnd = React.useRef(null);
const nodeToRestore = React.useRef(null);
const reactFocusEventTarget = React.useRef(null);
// This variable is useful when disableAutoFocus is true.
// It waits for the active element to move into the component to activate.
const activated = React.useRef(false);
const rootRef = React.useRef(null);
// @ts-expect-error TODO upstream fix
const handleRef = (0, _utils.unstable_useForkRef)(children.ref, rootRef);
const lastKeydown = React.useRef(null);
React.useEffect(() => {
// We might render an empty child.
if (!open || !rootRef.current) {
return;
}
activated.current = !disableAutoFocus;
}, [disableAutoFocus, open]);
React.useEffect(() => {
// We might render an empty child.
if (!open || !rootRef.current) {
return;
}
const doc = (0, _utils.unstable_ownerDocument)(rootRef.current);
if (!rootRef.current.contains(doc.activeElement)) {
if (!rootRef.current.hasAttribute('tabIndex')) {
if (process.env.NODE_ENV !== 'production') {
console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
}
rootRef.current.setAttribute('tabIndex', '-1');
}
if (activated.current) {
rootRef.current.focus();
}
}
return () => {
// restoreLastFocus()
if (!disableRestoreFocus) {
// In IE11 it is possible for document.activeElement to be null resulting
// in nodeToRestore.current being null.
// Not all elements in IE11 have a focus method.
// Once IE11 support is dropped the focus() call can be unconditional.
if (nodeToRestore.current && nodeToRestore.current.focus) {
ignoreNextEnforceFocus.current = true;
nodeToRestore.current.focus();
}
nodeToRestore.current = null;
}
};
// Missing `disableRestoreFocus` which is fine.
// We don't support changing that prop on an open FocusTrap
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open]);
React.useEffect(() => {
// We might render an empty child.
if (!open || !rootRef.current) {
return;
}
const doc = (0, _utils.unstable_ownerDocument)(rootRef.current);
const loopFocus = nativeEvent => {
lastKeydown.current = nativeEvent;
if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
return;
}
// Make sure the next tab starts from the right place.
// doc.activeElement refers to the origin.
if (doc.activeElement === rootRef.current && nativeEvent.shiftKey) {
// We need to ignore the next contain as
// it will try to move the focus back to the rootRef element.
ignoreNextEnforceFocus.current = true;
if (sentinelEnd.current) {
sentinelEnd.current.focus();
}
}
};
const contain = () => {
const rootElement = rootRef.current;
// Cleanup functions are executed lazily in React 17.
// Contain can be called between the component being unmounted and its cleanup function being run.
if (rootElement === null) {
return;
}
if (!doc.hasFocus() || !isEnabled() || ignoreNextEnforceFocus.current) {
ignoreNextEnforceFocus.current = false;
return;
}
// The focus is already inside
if (rootElement.contains(doc.activeElement)) {
return;
}
// The disableEnforceFocus is set and the focus is outside of the focus trap (and sentinel nodes)
if (disableEnforceFocus && doc.activeElement !== sentinelStart.current && doc.activeElement !== sentinelEnd.current) {
return;
}
// if the focus event is not coming from inside the children's react tree, reset the refs
if (doc.activeElement !== reactFocusEventTarget.current) {
reactFocusEventTarget.current = null;
} else if (reactFocusEventTarget.current !== null) {
return;
}
if (!activated.current) {
return;
}
let tabbable = [];
if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
tabbable = getTabbable(rootRef.current);
}
// one of the sentinel nodes was focused, so move the focus
// to the first/last tabbable element inside the focus trap
if (tabbable.length > 0) {
var _lastKeydown$current, _lastKeydown$current2;
const isShiftTab = Boolean(((_lastKeydown$current = lastKeydown.current) == null ? void 0 : _lastKeydown$current.shiftKey) && ((_lastKeydown$current2 = lastKeydown.current) == null ? void 0 : _lastKeydown$current2.key) === 'Tab');
const focusNext = tabbable[0];
const focusPrevious = tabbable[tabbable.length - 1];
if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
if (isShiftTab) {
focusPrevious.focus();
} else {
focusNext.focus();
}
}
// no tabbable elements in the trap focus or the focus was outside of the focus trap
} else {
rootElement.focus();
}
};
doc.addEventListener('focusin', contain);
doc.addEventListener('keydown', loopFocus, true);
// With Edge, Safari and Firefox, no focus related events are fired when the focused area stops being a focused area.
// for example https://bugzilla.mozilla.org/show_bug.cgi?id=559561.
// Instead, we can look if the active element was restored on the BODY element.
//
// The whatwg spec defines how the browser should behave but does not explicitly mention any events:
// https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.
const interval = setInterval(() => {
if (doc.activeElement && doc.activeElement.tagName === 'BODY') {
contain();
}
}, 50);
return () => {
clearInterval(interval);
doc.removeEventListener('focusin', contain);
doc.removeEventListener('keydown', loopFocus, true);
};
}, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open, getTabbable]);
const onFocus = event => {
if (nodeToRestore.current === null) {
nodeToRestore.current = event.relatedTarget;
}
activated.current = true;
reactFocusEventTarget.current = event.target;
const childrenPropsHandler = children.props.onFocus;
if (childrenPropsHandler) {
childrenPropsHandler(event);
}
};
const handleFocusSentinel = event => {
if (nodeToRestore.current === null) {
nodeToRestore.current = event.relatedTarget;
}
activated.current = true;
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
tabIndex: open ? 0 : -1,
onFocus: handleFocusSentinel,
ref: sentinelStart,
"data-testid": "sentinelStart"
}), /*#__PURE__*/React.cloneElement(children, {
ref: handleRef,
onFocus
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
tabIndex: open ? 0 : -1,
onFocus: handleFocusSentinel,
ref: sentinelEnd,
"data-testid": "sentinelEnd"
})]
});
}
process.env.NODE_ENV !== "production" ? FocusTrap.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* A single child content element.
*/
children: _utils.elementAcceptingRef,
/**
* If `true`, the focus trap will not automatically shift focus to itself when it opens, and
* replace it to the last focused element when it closes.
* This also works correctly with any focus trap children that have the `disableAutoFocus` prop.
*
* Generally this should never be set to `true` as it makes the focus trap less
* accessible to assistive technologies, like screen readers.
* @default false
*/
disableAutoFocus: _propTypes.default.bool,
/**
* If `true`, the focus trap will not prevent focus from leaving the focus trap while open.
*
* Generally this should never be set to `true` as it makes the focus trap less
* accessible to assistive technologies, like screen readers.
* @default false
*/
disableEnforceFocus: _propTypes.default.bool,
/**
* If `true`, the focus trap will not restore focus to previously focused element once
* focus trap is hidden or unmounted.
* @default false
*/
disableRestoreFocus: _propTypes.default.bool,
/**
* Returns an array of ordered tabbable nodes (i.e. in tab order) within the root.
* For instance, you can provide the "tabbable" npm dependency.
* @param {HTMLElement} root
*/
getTabbable: _propTypes.default.func,
/**
* This prop extends the `open` prop.
* It allows to toggle the open state without having to wait for a rerender when changing the `open` prop.
* This prop should be memoized.
* It can be used to support multiple focus trap mounted at the same time.
* @default function defaultIsEnabled(): boolean {
* return true;
* }
*/
isEnabled: _propTypes.default.func,
/**
* If `true`, focus is locked.
*/
open: _propTypes.default.bool.isRequired
} : void 0;
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line
FocusTrap['propTypes' + ''] = (0, _utils.exactProp)(FocusTrap.propTypes);
}
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+27
View File
@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
FocusTrap: true
};
Object.defineProperty(exports, "FocusTrap", {
enumerable: true,
get: function () {
return _FocusTrap.FocusTrap;
}
});
var _FocusTrap = require("./FocusTrap");
var _FocusTrap2 = require("./FocusTrap.types");
Object.keys(_FocusTrap2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _FocusTrap2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _FocusTrap2[key];
}
});
});
+207
View File
@@ -0,0 +1,207 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.FormControl = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
var _FormControlContext = require("./FormControlContext");
var _formControlClasses = require("./formControlClasses");
var _utils = require("../utils");
var _composeClasses = require("../composeClasses");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["defaultValue", "children", "disabled", "error", "onChange", "required", "slotProps", "slots", "value"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
function hasValue(value) {
return value != null && !(Array.isArray(value) && value.length === 0) && value !== '';
}
function useUtilityClasses(ownerState) {
const {
disabled,
error,
filled,
focused,
required
} = ownerState;
const slots = {
root: ['root', disabled && 'disabled', focused && 'focused', error && 'error', filled && 'filled', required && 'required']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_formControlClasses.getFormControlUtilityClass));
}
/**
* Provides context such as filled/focused/error/required for form inputs.
* Relying on the context provides high flexibility and ensures that the state always stays
* consistent across the children of the `FormControl`.
* This context is used by the following components:
*
* * FormLabel
* * FormHelperText
* * Input
* * InputLabel
*
* You can find one composition example below and more going to [the demos](https://mui.com/material-ui/react-text-field/#components).
*
* ```jsx
* <FormControl>
* <InputLabel htmlFor="my-input">Email address</InputLabel>
* <Input id="my-input" aria-describedby="my-helper-text" />
* <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
* </FormControl>
* ```
*
* ⚠️ Only one `Input` can be used within a FormControl because it create visual inconsistencies.
* For instance, only one input can be focused at the same time, the state shouldn't be shared.
*
* Demos:
*
* - [Form Control](https://mui.com/base-ui/react-form-control/)
* - [Input](https://mui.com/joy-ui/react-input/)
* - [Checkbox](https://mui.com/material-ui/react-checkbox/)
* - [Radio Group](https://mui.com/material-ui/react-radio-button/)
* - [Switch](https://mui.com/material-ui/react-switch/)
* - [Text Field](https://mui.com/material-ui/react-text-field/)
*
* API:
*
* - [FormControl API](https://mui.com/base-ui/react-form-control/components-api/#form-control)
*/
const FormControl = exports.FormControl = /*#__PURE__*/React.forwardRef(function FormControl(props, forwardedRef) {
var _slots$root;
const {
defaultValue,
children,
disabled = false,
error = false,
onChange,
required = false,
slotProps = {},
slots = {},
value: incomingValue
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const [value, setValue] = (0, _useControlled.default)({
controlled: incomingValue,
default: defaultValue,
name: 'FormControl',
state: 'value'
});
const filled = hasValue(value);
const [focusedState, setFocused] = React.useState(false);
const focused = focusedState && !disabled;
React.useEffect(() => setFocused(isFocused => disabled ? false : isFocused), [disabled]);
const ownerState = (0, _extends2.default)({}, props, {
disabled,
error,
filled,
focused,
required
});
const childContext = React.useMemo(() => {
return {
disabled,
error,
filled,
focused,
onBlur: () => {
setFocused(false);
},
onChange: event => {
setValue(event.target.value);
onChange == null || onChange(event);
},
onFocus: () => {
setFocused(true);
},
required,
value: value != null ? value : ''
};
}, [disabled, error, filled, focused, onChange, required, setValue, value]);
const classes = useUtilityClasses(ownerState);
const renderChildren = () => {
if (typeof children === 'function') {
return children(childContext);
}
return children;
};
const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
const rootProps = (0, _utils.useSlotProps)({
elementType: Root,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
additionalProps: {
ref: forwardedRef,
children: renderChildren()
},
ownerState,
className: classes.root
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlContext.FormControlContext.Provider, {
value: childContext,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps))
});
});
process.env.NODE_ENV !== "production" ? FormControl.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.node, _propTypes.default.func]),
/**
* Class name applied to the root element.
*/
className: _propTypes.default.string,
/**
* @ignore
*/
defaultValue: _propTypes.default.any,
/**
* If `true`, the label, input and helper text should be displayed in a disabled state.
* @default false
*/
disabled: _propTypes.default.bool,
/**
* If `true`, the label is displayed in an error state.
* @default false
*/
error: _propTypes.default.bool,
/**
* Callback fired when the form element's value is modified.
*/
onChange: _propTypes.default.func,
/**
* If `true`, the label will indicate that the `input` is required.
* @default false
*/
required: _propTypes.default.bool,
/**
* The props used for each slot inside the FormControl.
* @default {}
*/
slotProps: _propTypes.default.shape({
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the FormControl.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
root: _propTypes.default.elementType
}),
/**
* The value of the form element.
*/
value: _propTypes.default.any
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+16
View File
@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.FormControlContext = void 0;
var React = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
/**
* @ignore - internal component.
*/
const FormControlContext = exports.FormControlContext = /*#__PURE__*/React.createContext(undefined);
if (process.env.NODE_ENV !== 'production') {
FormControlContext.displayName = 'FormControlContext';
}
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.formControlClasses = void 0;
exports.getFormControlUtilityClass = getFormControlUtilityClass;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'FormControl';
function getFormControlUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const formControlClasses = exports.formControlClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'disabled', 'error', 'filled', 'focused', 'required']);
+55
View File
@@ -0,0 +1,55 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
FormControl: true,
FormControlContext: true,
useFormControlContext: true
};
Object.defineProperty(exports, "FormControl", {
enumerable: true,
get: function () {
return _FormControl.FormControl;
}
});
Object.defineProperty(exports, "FormControlContext", {
enumerable: true,
get: function () {
return _FormControlContext.FormControlContext;
}
});
Object.defineProperty(exports, "useFormControlContext", {
enumerable: true,
get: function () {
return _useFormControlContext.useFormControlContext;
}
});
var _FormControl = require("./FormControl");
var _FormControlContext = require("./FormControlContext");
var _FormControl2 = require("./FormControl.types");
Object.keys(_FormControl2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _FormControl2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _FormControl2[key];
}
});
});
var _formControlClasses = require("./formControlClasses");
Object.keys(_formControlClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _formControlClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _formControlClasses[key];
}
});
});
var _useFormControlContext = require("./useFormControlContext");
+24
View File
@@ -0,0 +1,24 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useFormControlContext = useFormControlContext;
var React = _interopRequireWildcard(require("react"));
var _FormControlContext = require("./FormControlContext");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
/**
*
* Demos:
*
* - [Form Control](https://mui.com/base-ui/react-form-control/#hook)
*
* API:
*
* - [useFormControlContext API](https://mui.com/base-ui/react-form-control/hooks-api/#use-form-control-context)
*/
function useFormControlContext() {
return React.useContext(_FormControlContext.FormControlContext);
}
+317
View File
@@ -0,0 +1,317 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Input = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _isHostComponent = require("../utils/isHostComponent");
var _inputClasses = require("./inputClasses");
var _useInput = require("../useInput");
var _utils = require("../utils");
var _composeClasses = require("../composeClasses");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "defaultValue", "disabled", "endAdornment", "error", "id", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "startAdornment", "value", "type", "rows", "slotProps", "slots", "minRows", "maxRows"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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 useUtilityClasses = ownerState => {
const {
disabled,
error,
focused,
formControlContext,
multiline,
startAdornment,
endAdornment
} = ownerState;
const slots = {
root: ['root', disabled && 'disabled', error && 'error', focused && 'focused', Boolean(formControlContext) && 'formControl', multiline && 'multiline', Boolean(startAdornment) && 'adornedStart', Boolean(endAdornment) && 'adornedEnd'],
input: ['input', disabled && 'disabled', multiline && 'multiline']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_inputClasses.getInputUtilityClass));
};
/**
*
* Demos:
*
* - [Input](https://mui.com/base-ui/react-input/)
*
* API:
*
* - [Input API](https://mui.com/base-ui/react-input/components-api/#input)
*/
const Input = exports.Input = /*#__PURE__*/React.forwardRef(function Input(props, forwardedRef) {
var _slots$root, _slots$textarea, _slots$input;
const {
'aria-describedby': ariaDescribedby,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledby,
autoComplete,
autoFocus,
className,
defaultValue,
disabled,
endAdornment,
error,
id,
multiline = false,
name,
onClick,
onChange,
onKeyDown,
onKeyUp,
onFocus,
onBlur,
placeholder,
readOnly,
required,
startAdornment,
value,
type: typeProp,
rows,
slotProps = {},
slots = {},
minRows,
maxRows
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const {
getRootProps,
getInputProps,
focused,
formControlContext,
error: errorState,
disabled: disabledState
} = (0, _useInput.useInput)({
disabled,
defaultValue,
error,
onBlur,
onClick,
onChange,
onFocus,
required,
value
});
const type = !multiline ? typeProp != null ? typeProp : 'text' : undefined;
const ownerState = (0, _extends2.default)({}, props, {
disabled: disabledState,
error: errorState,
focused,
formControlContext,
multiline,
type
});
const classes = useUtilityClasses(ownerState);
const propsToForward = {
'aria-describedby': ariaDescribedby,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledby,
autoComplete,
autoFocus,
id,
onKeyDown,
onKeyUp,
name,
placeholder,
readOnly,
type
};
const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
const rootProps = (0, _utils.useSlotProps)({
elementType: Root,
getSlotProps: getRootProps,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
additionalProps: {
ref: forwardedRef
},
ownerState,
className: [classes.root, className]
});
const InputComponent = multiline ? (_slots$textarea = slots.textarea) != null ? _slots$textarea : 'textarea' : (_slots$input = slots.input) != null ? _slots$input : 'input';
const inputProps = (0, _utils.useSlotProps)({
elementType: InputComponent,
getSlotProps: otherHandlers => {
return getInputProps((0, _extends2.default)({}, propsToForward, otherHandlers));
},
externalSlotProps: slotProps.input,
additionalProps: (0, _extends2.default)({
rows: multiline ? rows : undefined
}, multiline && !(0, _isHostComponent.isHostComponent)(InputComponent) && {
minRows: rows || minRows,
maxRows: rows || maxRows
}),
ownerState,
className: classes.input
});
if (process.env.NODE_ENV !== 'production') {
if (multiline) {
if (rows) {
if (minRows || maxRows) {
console.warn('MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set.');
}
}
}
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
children: [startAdornment, /*#__PURE__*/(0, _jsxRuntime.jsx)(InputComponent, (0, _extends2.default)({}, inputProps)), endAdornment]
}));
});
process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
'aria-describedby': _propTypes.default.string,
/**
* @ignore
*/
'aria-label': _propTypes.default.string,
/**
* @ignore
*/
'aria-labelledby': _propTypes.default.string,
/**
* This prop helps users to fill forms faster, especially on mobile devices.
* The name can be confusing, as it's more like an autofill.
* You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
*/
autoComplete: _propTypes.default.string,
/**
* If `true`, the `input` element is focused during the first mount.
*/
autoFocus: _propTypes.default.bool,
/**
* Class name applied to the root element.
*/
className: _propTypes.default.string,
/**
* The default value. Use when the component is not controlled.
*/
defaultValue: _propTypes.default.any,
/**
* If `true`, the component is disabled.
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
*/
disabled: _propTypes.default.bool,
/**
* Trailing adornment for this input.
*/
endAdornment: _propTypes.default.node,
/**
* If `true`, the `input` will indicate an error by setting the `aria-invalid` attribute on the input and the `baseui--error` class on the root element.
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
*/
error: _propTypes.default.bool,
/**
* The id of the `input` element.
*/
id: _propTypes.default.string,
/**
* @ignore
*/
inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
current: _propTypes.default.object
})]),
/**
* Maximum number of rows to display when multiline option is set to true.
*/
maxRows: _propTypes.default.number,
/**
* Minimum number of rows to display when multiline option is set to true.
*/
minRows: _propTypes.default.number,
/**
* If `true`, a `textarea` element is rendered.
* @default false
*/
multiline: _propTypes.default.bool,
/**
* Name attribute of the `input` element.
*/
name: _propTypes.default.string,
/**
* @ignore
*/
onBlur: _propTypes.default.func,
/**
* @ignore
*/
onChange: _propTypes.default.func,
/**
* @ignore
*/
onClick: _propTypes.default.func,
/**
* @ignore
*/
onFocus: _propTypes.default.func,
/**
* @ignore
*/
onKeyDown: _propTypes.default.func,
/**
* @ignore
*/
onKeyUp: _propTypes.default.func,
/**
* The short hint displayed in the `input` before the user enters a value.
*/
placeholder: _propTypes.default.string,
/**
* It prevents the user from changing the value of the field
* (not from interacting with the field).
*/
readOnly: _propTypes.default.bool,
/**
* If `true`, the `input` element is required.
* The prop defaults to the value (`false`) inherited from the parent FormControl component.
*/
required: _propTypes.default.bool,
/**
* Number of rows to display when multiline option is set to true.
*/
rows: _propTypes.default.number,
/**
* The props used for each slot inside the Input.
* @default {}
*/
slotProps: _propTypes.default.shape({
input: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the InputBase.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
input: _propTypes.default.elementType,
root: _propTypes.default.elementType,
textarea: _propTypes.default.elementType
}),
/**
* Leading adornment for this input.
*/
startAdornment: _propTypes.default.node,
/**
* Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
* @default 'text'
*/
type: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOf(['button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week']),
/**
* The value of the `input` element, required for a controlled component.
*/
value: _propTypes.default.any
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+40
View File
@@ -0,0 +1,40 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
Input: true
};
Object.defineProperty(exports, "Input", {
enumerable: true,
get: function () {
return _Input.Input;
}
});
var _Input = require("./Input");
var _Input2 = require("./Input.types");
Object.keys(_Input2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _Input2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Input2[key];
}
});
});
var _inputClasses = require("./inputClasses");
Object.keys(_inputClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _inputClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _inputClasses[key];
}
});
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getInputUtilityClass = getInputUtilityClass;
exports.inputClasses = void 0;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'Input';
function getInputUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const inputClasses = exports.inputClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'formControl', 'focused', 'disabled', 'error', 'multiline', 'input', 'inputMultiline', 'inputTypeSearch', 'adornedStart', 'adornedEnd']);
+168
View File
@@ -0,0 +1,168 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Menu = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@mui/utils");
var _menuClasses = require("./menuClasses");
var _useMenu = require("../useMenu");
var _MenuProvider = require("../useMenu/MenuProvider");
var _composeClasses = require("../composeClasses");
var _Unstable_Popup = require("../Unstable_Popup");
var _useSlotProps = require("../utils/useSlotProps");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _useList = require("../useList");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["actions", "anchor", "children", "onItemsChange", "slotProps", "slots"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
function useUtilityClasses(ownerState) {
const {
open
} = ownerState;
const slots = {
root: ['root', open && 'expanded'],
listbox: ['listbox', open && 'expanded']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_menuClasses.getMenuUtilityClass));
}
/**
*
* Demos:
*
* - [Menu](https://mui.com/base-ui/react-menu/)
*
* API:
*
* - [Menu API](https://mui.com/base-ui/react-menu/components-api/#menu)
*/
const Menu = exports.Menu = /*#__PURE__*/React.forwardRef(function Menu(props, forwardedRef) {
var _slots$root, _slots$listbox;
const {
actions,
anchor: anchorProp,
children,
onItemsChange,
slotProps = {},
slots = {}
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const {
contextValue,
getListboxProps,
dispatch,
open,
triggerElement
} = (0, _useMenu.useMenu)({
onItemsChange,
componentName: 'Menu'
});
const anchor = anchorProp != null ? anchorProp : triggerElement;
React.useImperativeHandle(actions, () => ({
dispatch,
resetHighlight: () => dispatch({
type: _useList.ListActionTypes.resetHighlight,
event: null
})
}), [dispatch]);
const ownerState = (0, _extends2.default)({}, props, {
open
});
const classes = useUtilityClasses(ownerState);
const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
const rootProps = (0, _useSlotProps.useSlotProps)({
elementType: Root,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
additionalProps: {
ref: forwardedRef,
role: undefined
},
className: classes.root,
ownerState
});
const Listbox = (_slots$listbox = slots.listbox) != null ? _slots$listbox : 'ul';
const listboxProps = (0, _useSlotProps.useSlotProps)({
elementType: Listbox,
getSlotProps: getListboxProps,
externalSlotProps: slotProps.listbox,
className: classes.listbox,
ownerState
});
if (open === true && anchor == null) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Listbox, (0, _extends2.default)({}, listboxProps, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuProvider.MenuProvider, {
value: contextValue,
children: children
})
}))
}));
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_Popup.Unstable_Popup, (0, _extends2.default)({
keepMounted: true
}, rootProps, {
open: open,
anchor: anchor,
slots: {
root: Root
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Listbox, (0, _extends2.default)({}, listboxProps, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuProvider.MenuProvider, {
value: contextValue,
children: children
})
}))
}));
});
process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* A ref with imperative actions that can be performed on the menu.
*/
actions: _utils.refType,
/**
* The element based on which the menu is positioned.
*/
anchor: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_utils.HTMLElementType, _propTypes.default.object, _propTypes.default.func]),
/**
* @ignore
*/
children: _propTypes.default.node,
/**
* @ignore
*/
className: _propTypes.default.string,
/**
* Function called when the items displayed in the menu change.
*/
onItemsChange: _propTypes.default.func,
/**
* The props used for each slot inside the Menu.
* @default {}
*/
slotProps: _propTypes.default.shape({
listbox: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the Menu.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
listbox: _propTypes.default.elementType,
root: _propTypes.default.elementType
})
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+39
View File
@@ -0,0 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
Menu: true
};
Object.defineProperty(exports, "Menu", {
enumerable: true,
get: function () {
return _Menu.Menu;
}
});
var _Menu = require("./Menu");
var _menuClasses = require("./menuClasses");
Object.keys(_menuClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _menuClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _menuClasses[key];
}
});
});
var _Menu2 = require("./Menu.types");
Object.keys(_Menu2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _Menu2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Menu2[key];
}
});
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getMenuUtilityClass = getMenuUtilityClass;
exports.menuClasses = void 0;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'Menu';
function getMenuUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const menuClasses = exports.menuClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'listbox', 'expanded']);
+128
View File
@@ -0,0 +1,128 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MenuButton = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("../utils");
var _useMenuButton = require("../useMenuButton");
var _composeClasses = require("../composeClasses");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _menuButtonClasses = require("./menuButtonClasses");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["children", "disabled", "label", "slots", "slotProps", "focusableWhenDisabled"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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 useUtilityClasses = ownerState => {
const {
active,
disabled,
open
} = ownerState;
const slots = {
root: ['root', disabled && 'disabled', active && 'active', open && 'expanded']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_menuButtonClasses.getMenuButtonUtilityClass));
};
/**
*
* Demos:
*
* - [Menu](https://mui.com/base-ui/react-menu/)
*
* API:
*
* - [MenuButton API](https://mui.com/base-ui/react-menu/components-api/#menu-button)
*/
const MenuButton = exports.MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(props, forwardedRef) {
const {
children,
disabled = false,
slots = {},
slotProps = {},
focusableWhenDisabled = false
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const {
getRootProps,
open,
active
} = (0, _useMenuButton.useMenuButton)({
disabled,
focusableWhenDisabled,
rootRef: forwardedRef
});
const ownerState = (0, _extends2.default)({}, props, {
open,
active,
disabled,
focusableWhenDisabled
});
const classes = useUtilityClasses(ownerState);
const Root = slots.root || 'button';
const rootProps = (0, _utils.useSlotProps)({
elementType: Root,
getSlotProps: getRootProps,
externalForwardedProps: other,
externalSlotProps: slotProps.root,
additionalProps: {
ref: forwardedRef,
type: 'button'
},
ownerState,
className: classes.root
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
children: children
}));
});
process.env.NODE_ENV !== "production" ? MenuButton.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
children: _propTypes.default.node,
/**
* Class name applied to the root element.
*/
className: _propTypes.default.string,
/**
* If `true`, the component is disabled.
* @default false
*/
disabled: _propTypes.default.bool,
/**
* If `true`, allows a disabled button to receive focus.
* @default false
*/
focusableWhenDisabled: _propTypes.default.bool,
/**
* Label of the button
*/
label: _propTypes.default.string,
/**
* The components used for each slot inside the MenuButton.
* Either a string to use a HTML element or a component.
* @default {}
*/
slotProps: _propTypes.default.shape({
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The props used for each slot inside the MenuButton.
* @default {}
*/
slots: _propTypes.default.shape({
root: _propTypes.default.elementType
})
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+40
View File
@@ -0,0 +1,40 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
MenuButton: true
};
Object.defineProperty(exports, "MenuButton", {
enumerable: true,
get: function () {
return _MenuButton.MenuButton;
}
});
var _MenuButton = require("./MenuButton");
var _MenuButton2 = require("./MenuButton.types");
Object.keys(_MenuButton2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _MenuButton2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _MenuButton2[key];
}
});
});
var _menuButtonClasses = require("./menuButtonClasses");
Object.keys(_menuButtonClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _menuButtonClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _menuButtonClasses[key];
}
});
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getMenuButtonUtilityClass = getMenuButtonUtilityClass;
exports.menuButtonClasses = void 0;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'MenuButton';
function getMenuButtonUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const menuButtonClasses = exports.menuButtonClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'active', 'disabled', 'expanded']);
+155
View File
@@ -0,0 +1,155 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MenuItem = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _menuItemClasses = require("./menuItemClasses");
var _useMenuItem = require("../useMenuItem");
var _composeClasses = require("../composeClasses");
var _useSlotProps = require("../utils/useSlotProps");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _useList = require("../useList");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["children", "disabled", "label", "id", "slotProps", "slots"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
function useUtilityClasses(ownerState) {
const {
disabled,
focusVisible
} = ownerState;
const slots = {
root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_menuItemClasses.getMenuItemUtilityClass));
}
const InnerMenuItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function MenuItem(props, forwardedRef) {
var _slots$root;
const {
children,
disabled: disabledProp = false,
label,
id,
slotProps = {},
slots = {}
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const {
getRootProps,
disabled,
focusVisible,
highlighted
} = (0, _useMenuItem.useMenuItem)({
id,
disabled: disabledProp,
rootRef: forwardedRef,
label
});
const ownerState = (0, _extends2.default)({}, props, {
disabled,
focusVisible,
highlighted
});
const classes = useUtilityClasses(ownerState);
const Root = (_slots$root = slots.root) != null ? _slots$root : 'li';
const rootProps = (0, _useSlotProps.useSlotProps)({
elementType: Root,
getSlotProps: getRootProps,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
className: classes.root,
ownerState
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
children: children
}));
}));
/**
* An unstyled menu item to be used within a Menu.
*
* Demos:
*
* - [Menu](https://mui.com/base-ui/react-menu/)
*
* API:
*
* - [MenuItem API](https://mui.com/base-ui/react-menu/components-api/#menu-item)
*/
const MenuItem = exports.MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
const {
id: idProp
} = props;
// This wrapper component is used as a performance optimization.
// `useMenuItemContextStabilizer` ensures that the context value
// is stable across renders, so that the actual MenuItem re-renders
// only when it needs to.
const {
contextValue,
id
} = (0, _useMenuItem.useMenuItemContextStabilizer)(idProp);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useList.ListContext.Provider, {
value: contextValue,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerMenuItem, (0, _extends2.default)({}, props, {
id: id,
ref: ref
}))
});
});
process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
children: _propTypes.default.node,
/**
* @ignore
*/
className: _propTypes.default.string,
/**
* If `true`, the menu item will be disabled.
* @default false
*/
disabled: _propTypes.default.bool,
/**
* If `true`, the menu item won't receive focus when the mouse moves over it.
*
* @default false
*/
disableFocusOnHover: _propTypes.default.bool,
/**
* A text representation of the menu item's content.
* Used for keyboard text navigation matching.
*/
label: _propTypes.default.string,
/**
* @ignore
*/
onClick: _propTypes.default.func,
/**
* The props used for each slot inside the MenuItem.
* @default {}
*/
slotProps: _propTypes.default.shape({
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the MenuItem.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
root: _propTypes.default.elementType
})
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+39
View File
@@ -0,0 +1,39 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _MenuItem = require("./MenuItem");
Object.keys(_MenuItem).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _MenuItem[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _MenuItem[key];
}
});
});
var _MenuItem2 = require("./MenuItem.types");
Object.keys(_MenuItem2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _MenuItem2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _MenuItem2[key];
}
});
});
var _menuItemClasses = require("./menuItemClasses");
Object.keys(_menuItemClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _menuItemClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _menuItemClasses[key];
}
});
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getMenuItemUtilityClass = getMenuItemUtilityClass;
exports.menuItemClasses = void 0;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'MenuItem';
function getMenuItemUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const menuItemClasses = exports.menuItemClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'disabled', 'focusVisible']);
+284
View File
@@ -0,0 +1,284 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Modal = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@mui/utils");
var _utils2 = require("../utils");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _composeClasses = require("../composeClasses");
var _Portal = require("../Portal");
var _unstable_useModal = require("../unstable_useModal");
var _FocusTrap = require("../FocusTrap");
var _modalClasses = require("./modalClasses");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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 useUtilityClasses = ownerState => {
const {
open,
exited
} = ownerState;
const slots = {
root: ['root', !open && exited && 'hidden'],
backdrop: ['backdrop']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_modalClasses.getModalUtilityClass));
};
/**
* Modal is a lower-level construct that is leveraged by the following components:
*
* * [Dialog](https://mui.com/material-ui/api/dialog/)
* * [Drawer](https://mui.com/material-ui/api/drawer/)
* * [Menu](https://mui.com/material-ui/api/menu/)
* * [Popover](https://mui.com/material-ui/api/popover/)
*
* If you are creating a modal dialog, you probably want to use the [Dialog](https://mui.com/material-ui/api/dialog/) component
* rather than directly using Modal.
*
* This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
*
* Demos:
*
* - [Modal](https://mui.com/base-ui/react-modal/)
*
* API:
*
* - [Modal API](https://mui.com/base-ui/react-modal/components-api/#modal)
*/
const Modal = exports.Modal = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef) {
var _slots$root;
const {
children,
closeAfterTransition = false,
container,
disableAutoFocus = false,
disableEnforceFocus = false,
disableEscapeKeyDown = false,
disablePortal = false,
disableRestoreFocus = false,
disableScrollLock = false,
hideBackdrop = false,
keepMounted = false,
onBackdropClick,
open,
slotProps = {},
slots = {}
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const propsWithDefaults = (0, _extends2.default)({}, props, {
closeAfterTransition,
disableAutoFocus,
disableEnforceFocus,
disableEscapeKeyDown,
disablePortal,
disableRestoreFocus,
disableScrollLock,
hideBackdrop,
keepMounted
});
const {
getRootProps,
getBackdropProps,
getTransitionProps,
portalRef,
isTopModal,
exited,
hasTransition
} = (0, _unstable_useModal.unstable_useModal)((0, _extends2.default)({}, propsWithDefaults, {
rootRef: forwardedRef
}));
const ownerState = (0, _extends2.default)({}, propsWithDefaults, {
exited,
hasTransition
});
const classes = useUtilityClasses(ownerState);
const childProps = {};
if (children.props.tabIndex === undefined) {
childProps.tabIndex = '-1';
}
// It's a Transition like component
if (hasTransition) {
const {
onEnter,
onExited
} = getTransitionProps();
childProps.onEnter = onEnter;
childProps.onExited = onExited;
}
const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
const rootProps = (0, _utils2.useSlotProps)({
elementType: Root,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
getSlotProps: getRootProps,
className: classes.root,
ownerState
});
const BackdropComponent = slots.backdrop;
const backdropProps = (0, _utils2.useSlotProps)({
elementType: BackdropComponent,
externalSlotProps: slotProps.backdrop,
getSlotProps: otherHandlers => {
return getBackdropProps((0, _extends2.default)({}, otherHandlers, {
onClick: e => {
if (onBackdropClick) {
onBackdropClick(e);
}
if (otherHandlers != null && otherHandlers.onClick) {
otherHandlers.onClick(e);
}
}
}));
},
className: classes.backdrop,
ownerState
});
if (!keepMounted && !open && (!hasTransition || exited)) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.Portal, {
ref: portalRef,
container: container,
disablePortal: disablePortal,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropComponent, (0, _extends2.default)({}, backdropProps)) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusTrap.FocusTrap, {
disableEnforceFocus: disableEnforceFocus,
disableAutoFocus: disableAutoFocus,
disableRestoreFocus: disableRestoreFocus,
isEnabled: isTopModal,
open: open,
children: /*#__PURE__*/React.cloneElement(children, childProps)
})]
}))
});
});
process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* A single child content element.
*/
children: _utils.elementAcceptingRef.isRequired,
/**
* When set to true the Modal waits until a nested Transition is completed before closing.
* @default false
*/
closeAfterTransition: _propTypes.default.bool,
/**
* An HTML element or function that returns one.
* The `container` will have the portal children appended to it.
*
* You can also provide a callback, which is called in a React layout effect.
* This lets you set the container from a ref, and also makes server-side rendering possible.
*
* By default, it uses the body of the top-level document object,
* so it's simply `document.body` most of the time.
*/
container: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_utils.HTMLElementType, _propTypes.default.func]),
/**
* If `true`, the modal will not automatically shift focus to itself when it opens, and
* replace it to the last focused element when it closes.
* This also works correctly with any modal children that have the `disableAutoFocus` prop.
*
* Generally this should never be set to `true` as it makes the modal less
* accessible to assistive technologies, like screen readers.
* @default false
*/
disableAutoFocus: _propTypes.default.bool,
/**
* If `true`, the modal will not prevent focus from leaving the modal while open.
*
* Generally this should never be set to `true` as it makes the modal less
* accessible to assistive technologies, like screen readers.
* @default false
*/
disableEnforceFocus: _propTypes.default.bool,
/**
* If `true`, hitting escape will not fire the `onClose` callback.
* @default false
*/
disableEscapeKeyDown: _propTypes.default.bool,
/**
* The `children` will be under the DOM hierarchy of the parent component.
* @default false
*/
disablePortal: _propTypes.default.bool,
/**
* If `true`, the modal will not restore focus to previously focused element once
* modal is hidden or unmounted.
* @default false
*/
disableRestoreFocus: _propTypes.default.bool,
/**
* Disable the scroll lock behavior.
* @default false
*/
disableScrollLock: _propTypes.default.bool,
/**
* If `true`, the backdrop is not rendered.
* @default false
*/
hideBackdrop: _propTypes.default.bool,
/**
* Always keep the children in the DOM.
* This prop can be useful in SEO situation or
* when you want to maximize the responsiveness of the Modal.
* @default false
*/
keepMounted: _propTypes.default.bool,
/**
* Callback fired when the backdrop is clicked.
* @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
*/
onBackdropClick: _propTypes.default.func,
/**
* Callback fired when the component requests to be closed.
* The `reason` parameter can optionally be used to control the response to `onClose`.
*
* @param {object} event The event source of the callback.
* @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
*/
onClose: _propTypes.default.func,
/**
* A function called when a transition enters.
*/
onTransitionEnter: _propTypes.default.func,
/**
* A function called when a transition has exited.
*/
onTransitionExited: _propTypes.default.func,
/**
* If `true`, the component is shown.
*/
open: _propTypes.default.bool.isRequired,
/**
* The props used for each slot inside the Modal.
* @default {}
*/
slotProps: _propTypes.default.shape({
backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the Modal.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
backdrop: _propTypes.default.elementType,
root: _propTypes.default.elementType
})
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+39
View File
@@ -0,0 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
Modal: true
};
Object.defineProperty(exports, "Modal", {
enumerable: true,
get: function () {
return _Modal.Modal;
}
});
var _Modal = require("./Modal");
var _Modal2 = require("./Modal.types");
Object.keys(_Modal2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _Modal2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Modal2[key];
}
});
});
var _modalClasses = require("./modalClasses");
Object.keys(_modalClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _modalClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _modalClasses[key];
}
});
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getModalUtilityClass = getModalUtilityClass;
exports.modalClasses = void 0;
var _generateUtilityClasses = require("../generateUtilityClasses");
var _generateUtilityClass = require("../generateUtilityClass");
const COMPONENT_NAME = 'Modal';
function getModalUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const modalClasses = exports.modalClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'hidden', 'backdrop']);
+25
View File
@@ -0,0 +1,25 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MultiSelect = MultiSelect;
let warnedOnce = false;
const warn = () => {
if (!warnedOnce) {
console.error(['Base UI: The MultiSelect component was removed from the library.', '', 'The multi-select functionality is now available in the Select component.', 'Replace <MultiSelect> with <Select multiple /> in your code to remove this error.'].join('\n'));
warnedOnce = true;
}
};
/**
* The foundation for building custom-styled multi-selection select components.
*
* @deprecated The multi-select functionality is now available in the Select component. Replace <MultiSelect> with <Select multiple /> in your code.
* @ignore - do not document.
*/
function MultiSelect() {
warn();
return null;
}
+13
View File
@@ -0,0 +1,13 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "MultiSelect", {
enumerable: true,
get: function () {
return _MultiSelect.MultiSelect;
}
});
var _MultiSelect = require("./MultiSelect");
+80
View File
@@ -0,0 +1,80 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NoSsr = NoSsr;
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@mui/utils");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
/**
* NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
*
* This component can be useful in a variety of situations:
*
* * Escape hatch for broken dependencies not supporting SSR.
* * Improve the time-to-first paint on the client by only rendering above the fold.
* * Reduce the rendering time on the server.
* * Under too heavy server load, you can turn on service degradation.
*
* Demos:
*
* - [No SSR](https://mui.com/base-ui/react-no-ssr/)
*
* API:
*
* - [NoSsr API](https://mui.com/base-ui/react-no-ssr/components-api/#no-ssr)
*/
function NoSsr(props) {
const {
children,
defer = false,
fallback = null
} = props;
const [mountedState, setMountedState] = React.useState(false);
(0, _utils.unstable_useEnhancedEffect)(() => {
if (!defer) {
setMountedState(true);
}
}, [defer]);
React.useEffect(() => {
if (defer) {
setMountedState(true);
}
}, [defer]);
// We need the Fragment here to force react-docgen to recognise NoSsr as a component.
return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
children: mountedState ? children : fallback
});
}
process.env.NODE_ENV !== "production" ? NoSsr.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* You can wrap a node.
*/
children: _propTypes.default.node,
/**
* If `true`, the component will not only prevent server-side rendering.
* It will also defer the rendering of the children into a different screen frame.
* @default false
*/
defer: _propTypes.default.bool,
/**
* The fallback content to display.
* @default null
*/
fallback: _propTypes.default.node
} : void 0;
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line
NoSsr['propTypes' + ''] = (0, _utils.exactProp)(NoSsr.propTypes);
}
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+28
View File
@@ -0,0 +1,28 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
NoSsr: true
};
Object.defineProperty(exports, "NoSsr", {
enumerable: true,
get: function () {
return _NoSsr.NoSsr;
}
});
var _NoSsr = require("./NoSsr");
var _NoSsr2 = require("./NoSsr.types");
Object.keys(_NoSsr2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _NoSsr2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _NoSsr2[key];
}
});
});
+156
View File
@@ -0,0 +1,156 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Option = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@mui/utils");
var _composeClasses = require("../composeClasses");
var _optionClasses = require("./optionClasses");
var _utils2 = require("../utils");
var _useOption = require("../useOption");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _useList = require("../useList");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["children", "disabled", "label", "slotProps", "slots", "value"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
function useUtilityClasses(ownerState) {
const {
disabled,
highlighted,
selected
} = ownerState;
const slots = {
root: ['root', disabled && 'disabled', highlighted && 'highlighted', selected && 'selected']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_optionClasses.getOptionUtilityClass));
}
const InnerOption = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Option(props, forwardedRef) {
var _slots$root, _optionRef$current;
const {
children,
disabled = false,
label,
slotProps = {},
slots = {},
value
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const Root = (_slots$root = slots.root) != null ? _slots$root : 'li';
const optionRef = React.useRef(null);
const combinedRef = (0, _utils.unstable_useForkRef)(optionRef, forwardedRef);
// If `label` is not explicitly provided, the `children` are used for convenience.
// This is used to populate the select's trigger with the selected option's label.
const computedLabel = label != null ? label : typeof children === 'string' ? children : (_optionRef$current = optionRef.current) == null || (_optionRef$current = _optionRef$current.textContent) == null ? void 0 : _optionRef$current.trim();
const {
getRootProps,
selected,
highlighted,
index
} = (0, _useOption.useOption)({
disabled,
label: computedLabel,
rootRef: combinedRef,
value
});
const ownerState = (0, _extends2.default)({}, props, {
disabled,
highlighted,
index,
selected
});
const classes = useUtilityClasses(ownerState);
const rootProps = (0, _utils2.useSlotProps)({
getSlotProps: getRootProps,
elementType: Root,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
className: classes.root,
ownerState
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
children: children
}));
}));
/**
* An unstyled option to be used within a Select.
*
* Demos:
*
* - [Select](https://mui.com/base-ui/react-select/)
*
* API:
*
* - [Option API](https://mui.com/base-ui/react-select/components-api/#option)
*/
const Option = exports.Option = /*#__PURE__*/React.forwardRef(function Option(props, ref) {
const {
value
} = props;
// This wrapper component is used as a performance optimization.
// `useOptionContextStabilizer` ensures that the context value
// is stable across renders, so that the actual Option re-renders
// only when it needs to.
const {
contextValue
} = (0, _useOption.useOptionContextStabilizer)(value);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useList.ListContext.Provider, {
value: contextValue,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InnerOption, (0, _extends2.default)({}, props, {
ref: ref
}))
});
});
process.env.NODE_ENV !== "production" ? Option.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
children: _propTypes.default.node,
/**
* @ignore
*/
className: _propTypes.default.string,
/**
* If `true`, the option will be disabled.
* @default false
*/
disabled: _propTypes.default.bool,
/**
* A text representation of the option's content.
* Used for keyboard text navigation matching.
*/
label: _propTypes.default.string,
/**
* The props used for each slot inside the Option.
* @default {}
*/
slotProps: _propTypes.default.shape({
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the Option.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
root: _propTypes.default.elementType
}),
/**
* The value of the option.
*/
value: _propTypes.default.any.isRequired
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+39
View File
@@ -0,0 +1,39 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Option = require("./Option");
Object.keys(_Option).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _Option[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Option[key];
}
});
});
var _Option2 = require("./Option.types");
Object.keys(_Option2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _Option2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Option2[key];
}
});
});
var _optionClasses = require("./optionClasses");
Object.keys(_optionClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (key in exports && exports[key] === _optionClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _optionClasses[key];
}
});
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getOptionUtilityClass = getOptionUtilityClass;
exports.optionClasses = void 0;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'Option';
function getOptionUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const optionClasses = exports.optionClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'disabled', 'selected', 'highlighted']);
+123
View File
@@ -0,0 +1,123 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.OptionGroup = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _composeClasses = require("../composeClasses");
var _optionGroupClasses = require("./optionGroupClasses");
var _utils = require("../utils");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["disabled", "slotProps", "slots"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
function useUtilityClasses(disabled) {
const slots = {
root: ['root', disabled && 'disabled'],
label: ['label'],
list: ['list']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_optionGroupClasses.getOptionGroupUtilityClass));
}
/**
* An unstyled option group to be used within a Select.
*
* Demos:
*
* - [Select](https://mui.com/base-ui/react-select/)
*
* API:
*
* - [OptionGroup API](https://mui.com/base-ui/react-select/components-api/#option-group)
*/
const OptionGroup = exports.OptionGroup = /*#__PURE__*/React.forwardRef(function OptionGroup(props, forwardedRef) {
const {
disabled = false,
slotProps = {},
slots = {}
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const Root = (slots == null ? void 0 : slots.root) || 'li';
const Label = (slots == null ? void 0 : slots.label) || 'span';
const List = (slots == null ? void 0 : slots.list) || 'ul';
const classes = useUtilityClasses(disabled);
const rootProps = (0, _utils.useSlotProps)({
elementType: Root,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
additionalProps: {
ref: forwardedRef
},
ownerState: props,
className: classes.root
});
const labelProps = (0, _utils.useSlotProps)({
elementType: Label,
externalSlotProps: slotProps.label,
ownerState: props,
className: classes.label
});
const listProps = (0, _utils.useSlotProps)({
elementType: List,
externalSlotProps: slotProps.list,
ownerState: props,
className: classes.list
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelProps, {
children: props.label
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(List, (0, _extends2.default)({}, listProps, {
children: props.children
}))]
}));
});
process.env.NODE_ENV !== "production" ? OptionGroup.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
children: _propTypes.default.node,
/**
* @ignore
*/
className: _propTypes.default.string,
/**
* If `true` all the options in the group will be disabled.
* @default false
*/
disabled: _propTypes.default.bool,
/**
* The human-readable description of the group.
*/
label: _propTypes.default.node,
/**
* The props used for each slot inside the Input.
* @default {}
*/
slotProps: _propTypes.default.shape({
label: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
list: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the OptionGroup.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
label: _propTypes.default.elementType,
list: _propTypes.default.elementType,
root: _propTypes.default.elementType
})
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+40
View File
@@ -0,0 +1,40 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
OptionGroup: true
};
Object.defineProperty(exports, "OptionGroup", {
enumerable: true,
get: function () {
return _OptionGroup.OptionGroup;
}
});
var _OptionGroup = require("./OptionGroup");
var _OptionGroup2 = require("./OptionGroup.types");
Object.keys(_OptionGroup2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _OptionGroup2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _OptionGroup2[key];
}
});
});
var _optionGroupClasses = require("./optionGroupClasses");
Object.keys(_optionGroupClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _optionGroupClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _optionGroupClasses[key];
}
});
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getOptionGroupUtilityClass = getOptionGroupUtilityClass;
exports.optionGroupClasses = void 0;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'OptionGroup';
function getOptionGroupUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const optionGroupClasses = exports.optionGroupClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'disabled', 'label', 'list']);
+385
View File
@@ -0,0 +1,385 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Popper = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _utils = require("@mui/utils");
var _core = require("@popperjs/core");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _composeClasses = require("../composeClasses");
var _Portal = require("../Portal");
var _popperClasses = require("./popperClasses");
var _utils2 = require("../utils");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
_excluded2 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
function flipPlacement(placement, direction) {
if (direction === 'ltr') {
return placement;
}
switch (placement) {
case 'bottom-end':
return 'bottom-start';
case 'bottom-start':
return 'bottom-end';
case 'top-end':
return 'top-start';
case 'top-start':
return 'top-end';
default:
return placement;
}
}
function resolveAnchorEl(anchorEl) {
return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
}
function isHTMLElement(element) {
return element.nodeType !== undefined;
}
function isVirtualElement(element) {
return !isHTMLElement(element);
}
const useUtilityClasses = () => {
const slots = {
root: ['root']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_popperClasses.getPopperUtilityClass));
};
const defaultPopperOptions = {};
const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props, forwardedRef) {
var _slots$root;
const {
anchorEl,
children,
direction,
disablePortal,
modifiers,
open,
placement: initialPlacement,
popperOptions,
popperRef: popperRefProp,
slotProps = {},
slots = {},
TransitionProps
// @ts-ignore internal logic
// prevent from spreading to DOM, it can come from the parent component e.g. Select.
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const tooltipRef = React.useRef(null);
const ownRef = (0, _utils.unstable_useForkRef)(tooltipRef, forwardedRef);
const popperRef = React.useRef(null);
const handlePopperRef = (0, _utils.unstable_useForkRef)(popperRef, popperRefProp);
const handlePopperRefRef = React.useRef(handlePopperRef);
(0, _utils.unstable_useEnhancedEffect)(() => {
handlePopperRefRef.current = handlePopperRef;
}, [handlePopperRef]);
React.useImperativeHandle(popperRefProp, () => popperRef.current, []);
const rtlPlacement = flipPlacement(initialPlacement, direction);
/**
* placement initialized from prop but can change during lifetime if modifiers.flip.
* modifiers.flip is essentially a flip for controlled/uncontrolled behavior
*/
const [placement, setPlacement] = React.useState(rtlPlacement);
const [resolvedAnchorElement, setResolvedAnchorElement] = React.useState(resolveAnchorEl(anchorEl));
React.useEffect(() => {
if (popperRef.current) {
popperRef.current.forceUpdate();
}
});
React.useEffect(() => {
if (anchorEl) {
setResolvedAnchorElement(resolveAnchorEl(anchorEl));
}
}, [anchorEl]);
(0, _utils.unstable_useEnhancedEffect)(() => {
if (!resolvedAnchorElement || !open) {
return undefined;
}
const handlePopperUpdate = data => {
setPlacement(data.placement);
};
if (process.env.NODE_ENV !== 'production') {
if (resolvedAnchorElement && isHTMLElement(resolvedAnchorElement) && resolvedAnchorElement.nodeType === 1) {
const box = resolvedAnchorElement.getBoundingClientRect();
if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
console.warn(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
}
}
}
let popperModifiers = [{
name: 'preventOverflow',
options: {
altBoundary: disablePortal
}
}, {
name: 'flip',
options: {
altBoundary: disablePortal
}
}, {
name: 'onUpdate',
enabled: true,
phase: 'afterWrite',
fn: ({
state
}) => {
handlePopperUpdate(state);
}
}];
if (modifiers != null) {
popperModifiers = popperModifiers.concat(modifiers);
}
if (popperOptions && popperOptions.modifiers != null) {
popperModifiers = popperModifiers.concat(popperOptions.modifiers);
}
const popper = (0, _core.createPopper)(resolvedAnchorElement, tooltipRef.current, (0, _extends2.default)({
placement: rtlPlacement
}, popperOptions, {
modifiers: popperModifiers
}));
handlePopperRefRef.current(popper);
return () => {
popper.destroy();
handlePopperRefRef.current(null);
};
}, [resolvedAnchorElement, disablePortal, modifiers, open, popperOptions, rtlPlacement]);
const childProps = {
placement: placement
};
if (TransitionProps !== null) {
childProps.TransitionProps = TransitionProps;
}
const classes = useUtilityClasses();
const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
const rootProps = (0, _utils2.useSlotProps)({
elementType: Root,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
additionalProps: {
role: 'tooltip',
ref: ownRef
},
ownerState: props,
className: classes.root
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
children: typeof children === 'function' ? children(childProps) : children
}));
});
/**
* Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v2/) for positioning.
*
* Demos:
*
* - [Popper](https://mui.com/base-ui/react-popper/)
*
* API:
*
* - [Popper API](https://mui.com/base-ui/react-popper/components-api/#popper)
*/
const Popper = exports.Popper = /*#__PURE__*/React.forwardRef(function Popper(props, forwardedRef) {
const {
anchorEl,
children,
container: containerProp,
direction = 'ltr',
disablePortal = false,
keepMounted = false,
modifiers,
open,
placement = 'bottom',
popperOptions = defaultPopperOptions,
popperRef,
style,
transition = false,
slotProps = {},
slots = {}
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
const [exited, setExited] = React.useState(true);
const handleEnter = () => {
setExited(false);
};
const handleExited = () => {
setExited(true);
};
if (!keepMounted && !open && (!transition || exited)) {
return null;
}
// If the container prop is provided, use that
// If the anchorEl prop is provided, use its parent body element as the container
// If neither are provided let the Modal take care of choosing the container
let container;
if (containerProp) {
container = containerProp;
} else if (anchorEl) {
const resolvedAnchorEl = resolveAnchorEl(anchorEl);
container = resolvedAnchorEl && isHTMLElement(resolvedAnchorEl) ? (0, _utils.unstable_ownerDocument)(resolvedAnchorEl).body : (0, _utils.unstable_ownerDocument)(null).body;
}
const display = !open && keepMounted && (!transition || exited) ? 'none' : undefined;
const transitionProps = transition ? {
in: open,
onEnter: handleEnter,
onExited: handleExited
} : undefined;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Portal.Portal, {
disablePortal: disablePortal,
container: container,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopperTooltip, (0, _extends2.default)({
anchorEl: anchorEl,
direction: direction,
disablePortal: disablePortal,
modifiers: modifiers,
ref: forwardedRef,
open: transition ? !exited : open,
placement: placement,
popperOptions: popperOptions,
popperRef: popperRef,
slotProps: slotProps,
slots: slots
}, other, {
style: (0, _extends2.default)({
// Prevents scroll issue, waiting for Popper.js to add this style once initiated.
position: 'fixed',
// Fix Popper.js display issue
top: 0,
left: 0,
display
}, style),
TransitionProps: transitionProps,
children: children
}))
});
});
process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
* or a function that returns either.
* It's used to set the position of the popper.
* The return value will passed as the reference object of the Popper instance.
*/
anchorEl: (0, _utils.chainPropTypes)(_propTypes.default.oneOfType([_utils.HTMLElementType, _propTypes.default.object, _propTypes.default.func]), props => {
if (props.open) {
const resolvedAnchorEl = resolveAnchorEl(props.anchorEl);
if (resolvedAnchorEl && isHTMLElement(resolvedAnchorEl) && resolvedAnchorEl.nodeType === 1) {
const box = resolvedAnchorEl.getBoundingClientRect();
if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
}
} else if (!resolvedAnchorEl || typeof resolvedAnchorEl.getBoundingClientRect !== 'function' || isVirtualElement(resolvedAnchorEl) && resolvedAnchorEl.contextElement != null && resolvedAnchorEl.contextElement.nodeType !== 1) {
return new Error(['MUI: The `anchorEl` prop provided to the component is invalid.', 'It should be an HTML element instance or a virtualElement ', '(https://popper.js.org/docs/v2/virtual-elements/).'].join('\n'));
}
}
return null;
}),
/**
* Popper render function or node.
*/
children: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.node, _propTypes.default.func]),
/**
* An HTML element or function that returns one.
* The `container` will have the portal children appended to it.
*
* You can also provide a callback, which is called in a React layout effect.
* This lets you set the container from a ref, and also makes server-side rendering possible.
*
* By default, it uses the body of the top-level document object,
* so it's simply `document.body` most of the time.
*/
container: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_utils.HTMLElementType, _propTypes.default.func]),
/**
* Direction of the text.
* @default 'ltr'
*/
direction: _propTypes.default.oneOf(['ltr', 'rtl']),
/**
* The `children` will be under the DOM hierarchy of the parent component.
* @default false
*/
disablePortal: _propTypes.default.bool,
/**
* Always keep the children in the DOM.
* This prop can be useful in SEO situation or
* when you want to maximize the responsiveness of the Popper.
* @default false
*/
keepMounted: _propTypes.default.bool,
/**
* Popper.js is based on a "plugin-like" architecture,
* most of its features are fully encapsulated "modifiers".
*
* A modifier is a function that is called each time Popper.js needs to
* compute the position of the popper.
* For this reason, modifiers should be very performant to avoid bottlenecks.
* To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
*/
modifiers: _propTypes.default.arrayOf(_propTypes.default.shape({
data: _propTypes.default.object,
effect: _propTypes.default.func,
enabled: _propTypes.default.bool,
fn: _propTypes.default.func,
name: _propTypes.default.any,
options: _propTypes.default.object,
phase: _propTypes.default.oneOf(['afterMain', 'afterRead', 'afterWrite', 'beforeMain', 'beforeRead', 'beforeWrite', 'main', 'read', 'write']),
requires: _propTypes.default.arrayOf(_propTypes.default.string),
requiresIfExists: _propTypes.default.arrayOf(_propTypes.default.string)
})),
/**
* If `true`, the component is shown.
*/
open: _propTypes.default.bool.isRequired,
/**
* Popper placement.
* @default 'bottom'
*/
placement: _propTypes.default.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
/**
* Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
* @default {}
*/
popperOptions: _propTypes.default.shape({
modifiers: _propTypes.default.array,
onFirstUpdate: _propTypes.default.func,
placement: _propTypes.default.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
strategy: _propTypes.default.oneOf(['absolute', 'fixed'])
}),
/**
* A ref that points to the used popper instance.
*/
popperRef: _utils.refType,
/**
* The props used for each slot inside the Popper.
* @default {}
*/
slotProps: _propTypes.default.shape({
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the Popper.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
root: _propTypes.default.elementType
}),
/**
* Help supporting a react-transition-group/Transition component.
* @default false
*/
transition: _propTypes.default.bool
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+26
View File
@@ -0,0 +1,26 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Popper", {
enumerable: true,
get: function () {
return _Popper.Popper;
}
});
Object.defineProperty(exports, "getPopperUtilityClass", {
enumerable: true,
get: function () {
return _popperClasses.getPopperUtilityClass;
}
});
Object.defineProperty(exports, "popperClasses", {
enumerable: true,
get: function () {
return _popperClasses.popperClasses;
}
});
var _Popper = require("./Popper");
var _popperClasses = require("./popperClasses");
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getPopperUtilityClass = getPopperUtilityClass;
exports.popperClasses = void 0;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'Popper';
function getPopperUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const popperClasses = exports.popperClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root']);
+99
View File
@@ -0,0 +1,99 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Portal = void 0;
var React = _interopRequireWildcard(require("react"));
var ReactDOM = _interopRequireWildcard(require("react-dom"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@mui/utils");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
function getContainer(container) {
return typeof container === 'function' ? container() : container;
}
/**
* Portals provide a first-class way to render children into a DOM node
* that exists outside the DOM hierarchy of the parent component.
*
* Demos:
*
* - [Portal](https://mui.com/base-ui/react-portal/)
*
* API:
*
* - [Portal API](https://mui.com/base-ui/react-portal/components-api/#portal)
*/
const Portal = exports.Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef) {
const {
children,
container,
disablePortal = false
} = props;
const [mountNode, setMountNode] = React.useState(null);
// @ts-expect-error TODO upstream fix
const handleRef = (0, _utils.unstable_useForkRef)( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, forwardedRef);
(0, _utils.unstable_useEnhancedEffect)(() => {
if (!disablePortal) {
setMountNode(getContainer(container) || document.body);
}
}, [container, disablePortal]);
(0, _utils.unstable_useEnhancedEffect)(() => {
if (mountNode && !disablePortal) {
(0, _utils.unstable_setRef)(forwardedRef, mountNode);
return () => {
(0, _utils.unstable_setRef)(forwardedRef, null);
};
}
return undefined;
}, [forwardedRef, mountNode, disablePortal]);
if (disablePortal) {
if ( /*#__PURE__*/React.isValidElement(children)) {
const newProps = {
ref: handleRef
};
return /*#__PURE__*/React.cloneElement(children, newProps);
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
children: children
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
children: mountNode ? /*#__PURE__*/ReactDOM.createPortal(children, mountNode) : mountNode
});
});
process.env.NODE_ENV !== "production" ? Portal.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The children to render into the `container`.
*/
children: _propTypes.default.node,
/**
* An HTML element or function that returns one.
* The `container` will have the portal children appended to it.
*
* You can also provide a callback, which is called in a React layout effect.
* This lets you set the container from a ref, and also makes server-side rendering possible.
*
* By default, it uses the body of the top-level document object,
* so it's simply `document.body` most of the time.
*/
container: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_utils.HTMLElementType, _propTypes.default.func]),
/**
* The `children` will be under the DOM hierarchy of the parent component.
* @default false
*/
disablePortal: _propTypes.default.bool
} : void 0;
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line
Portal['propTypes' + ''] = (0, _utils.exactProp)(Portal.propTypes);
}
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+28
View File
@@ -0,0 +1,28 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
Portal: true
};
Object.defineProperty(exports, "Portal", {
enumerable: true,
get: function () {
return _Portal.Portal;
}
});
var _Portal = require("./Portal");
var _Portal2 = require("./Portal.types");
Object.keys(_Portal2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _Portal2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Portal2[key];
}
});
});
+332
View File
@@ -0,0 +1,332 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Select = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@mui/utils");
var _useSelect = require("../useSelect");
var _utils2 = require("../utils");
var _Popup = require("../Unstable_Popup/Popup");
var _composeClasses = require("../composeClasses");
var _selectClasses = require("./selectClasses");
var _defaultOptionStringifier = require("../useSelect/defaultOptionStringifier");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _SelectProvider = require("../useSelect/SelectProvider");
var _jsxRuntime = require("react/jsx-runtime");
var _span;
const _excluded = ["areOptionsEqual", "autoComplete", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "required", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "placeholder", "slotProps", "slots", "value"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
function defaultRenderValue(selectedOptions) {
var _selectedOptions$labe;
if (Array.isArray(selectedOptions)) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
children: selectedOptions.map(o => o.label).join(', ')
});
}
return (_selectedOptions$labe = selectedOptions == null ? void 0 : selectedOptions.label) != null ? _selectedOptions$labe : null;
}
function useUtilityClasses(ownerState) {
const {
active,
disabled,
open,
focusVisible
} = ownerState;
const slots = {
root: ['root', disabled && 'disabled', focusVisible && 'focusVisible', active && 'active', open && 'expanded'],
listbox: ['listbox', disabled && 'disabled'],
popup: ['popup']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_selectClasses.getSelectUtilityClass));
}
/**
* The foundation for building custom-styled select components.
*
* Demos:
*
* - [Select](https://mui.com/base-ui/react-select/)
*
* API:
*
* - [Select API](https://mui.com/base-ui/react-select/components-api/#select)
*/
const Select = exports.Select = /*#__PURE__*/React.forwardRef(function Select(props, forwardedRef) {
var _slots$root, _slots$listbox, _slots$popup, _ref, _renderValue;
const {
areOptionsEqual,
autoComplete,
autoFocus,
children,
defaultValue,
defaultListboxOpen = false,
disabled: disabledProp,
getSerializedValue,
listboxId,
listboxOpen: listboxOpenProp,
multiple = false,
name,
required = false,
onChange,
onListboxOpenChange,
getOptionAsString = _defaultOptionStringifier.defaultOptionStringifier,
renderValue: renderValueProp,
placeholder,
slotProps = {},
slots = {},
value: valueProp
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const renderValue = renderValueProp != null ? renderValueProp : defaultRenderValue;
const [buttonDefined, setButtonDefined] = React.useState(false);
const buttonRef = React.useRef(null);
const listboxRef = React.useRef(null);
const Button = (_slots$root = slots.root) != null ? _slots$root : 'button';
const ListboxRoot = (_slots$listbox = slots.listbox) != null ? _slots$listbox : 'ul';
const PopupComponent = (_slots$popup = slots.popup) != null ? _slots$popup : 'div';
const handleButtonRefChange = React.useCallback(element => {
setButtonDefined(element != null);
}, []);
const handleButtonRef = (0, _utils.unstable_useForkRef)(forwardedRef, buttonRef, handleButtonRefChange);
React.useEffect(() => {
if (autoFocus) {
buttonRef.current.focus();
}
}, [autoFocus]);
const {
buttonActive,
buttonFocusVisible,
contextValue,
disabled,
getButtonProps,
getListboxProps,
getHiddenInputProps,
getOptionMetadata,
value,
open
} = (0, _useSelect.useSelect)({
name,
required,
getSerializedValue,
areOptionsEqual,
buttonRef: handleButtonRef,
defaultOpen: defaultListboxOpen,
defaultValue,
disabled: disabledProp,
listboxId,
multiple,
open: listboxOpenProp,
onChange,
onOpenChange: onListboxOpenChange,
getOptionAsString,
value: valueProp,
componentName: 'Select'
});
const ownerState = (0, _extends2.default)({}, props, {
active: buttonActive,
defaultListboxOpen,
disabled,
focusVisible: buttonFocusVisible,
open,
multiple,
renderValue,
value
});
const classes = useUtilityClasses(ownerState);
const buttonProps = (0, _utils2.useSlotProps)({
elementType: Button,
getSlotProps: getButtonProps,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
ownerState,
className: classes.root
});
const listboxProps = (0, _utils2.useSlotProps)({
elementType: ListboxRoot,
getSlotProps: getListboxProps,
externalSlotProps: slotProps.listbox,
additionalProps: {
ref: listboxRef
},
ownerState,
className: classes.listbox
});
const popupProps = (0, _utils2.useSlotProps)({
elementType: PopupComponent,
externalSlotProps: slotProps.popup,
additionalProps: {
anchor: buttonRef.current,
keepMounted: true,
open,
placement: 'bottom-start',
role: undefined
},
ownerState,
className: classes.popup
});
let selectedOptionsMetadata;
if (multiple) {
selectedOptionsMetadata = value.map(v => getOptionMetadata(v)).filter(o => o !== undefined);
} else {
var _getOptionMetadata;
selectedOptionsMetadata = (_getOptionMetadata = getOptionMetadata(value)) != null ? _getOptionMetadata : null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, (0, _extends2.default)({}, buttonProps, {
children: (_ref = (_renderValue = renderValue(selectedOptionsMetadata)) != null ? _renderValue : placeholder) != null ? _ref : // fall back to a zero-width space to prevent layout shift
// from https://github.com/mui/material-ui/pull/24563
_span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "notranslate",
children: "\u200B"
}))
})), buttonDefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popup.Popup, (0, _extends2.default)({
slots: {
root: PopupComponent
}
}, popupProps, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListboxRoot, (0, _extends2.default)({}, listboxProps, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectProvider.SelectProvider, {
value: contextValue,
children: children
})
}))
})), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _extends2.default)({}, getHiddenInputProps(), {
autoComplete: autoComplete
}))]
});
});
process.env.NODE_ENV !== "production" ? Select.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* A function used to determine if two options' values are equal.
* By default, reference equality is used.
*
* There is a performance impact when using the `areOptionsEqual` prop (proportional to the number of options).
* Therefore, it's recommented to use the default reference equality comparison whenever possible.
*/
areOptionsEqual: _propTypes.default.func,
/**
* This prop helps users to fill forms faster, especially on mobile devices.
* The name can be confusing, as it's more like an autofill.
* You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
*/
autoComplete: _propTypes.default.string,
/**
* If `true`, the select element is focused during the first mount
* @default false
*/
autoFocus: _propTypes.default.bool,
/**
* @ignore
*/
children: _propTypes.default.node,
/**
* @ignore
*/
className: _propTypes.default.string,
/**
* If `true`, the select will be initially open.
* @default false
*/
defaultListboxOpen: _propTypes.default.bool,
/**
* The default selected value. Use when the component is not controlled.
*/
defaultValue: _propTypes.default.any,
/**
* If `true`, the select is disabled.
* @default false
*/
disabled: _propTypes.default.bool,
/**
* A function used to convert the option label to a string.
* It's useful when labels are elements and need to be converted to plain text
* to enable navigation using character keys on a keyboard.
*
* @default defaultOptionStringifier
*/
getOptionAsString: _propTypes.default.func,
/**
* A function to convert the currently selected value to a string.
* Used to set a value of a hidden input associated with the select,
* so that the selected value can be posted with a form.
*/
getSerializedValue: _propTypes.default.func,
/**
* `id` attribute of the listbox element.
*/
listboxId: _propTypes.default.string,
/**
* Controls the open state of the select's listbox.
* @default undefined
*/
listboxOpen: _propTypes.default.bool,
/**
* If `true`, selecting multiple values is allowed.
* This affects the type of the `value`, `defaultValue`, and `onChange` props.
*
* @default false
*/
multiple: _propTypes.default.bool,
/**
* Name of the element. For example used by the server to identify the fields in form submits.
*/
name: _propTypes.default.string,
/**
* Callback fired when an option is selected.
*/
onChange: _propTypes.default.func,
/**
* Callback fired when the component requests to be opened.
* Use in controlled mode (see listboxOpen).
*/
onListboxOpenChange: _propTypes.default.func,
/**
* Text to show when there is no selected value.
*/
placeholder: _propTypes.default.node,
/**
* Function that customizes the rendering of the selected value.
*/
renderValue: _propTypes.default.func,
/**
* If `true`, the Select cannot be empty when submitting form.
* @default false
*/
required: _propTypes.default.bool,
/**
* The props used for each slot inside the Input.
* @default {}
*/
slotProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
listbox: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
popup: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the Select.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
listbox: _propTypes.default.elementType,
popup: _propTypes.default.elementType,
root: _propTypes.default.elementType
}),
/**
* The selected value.
* Set to `null` to deselect all options.
*/
value: _propTypes.default.any
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+40
View File
@@ -0,0 +1,40 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
Select: true
};
Object.defineProperty(exports, "Select", {
enumerable: true,
get: function () {
return _Select.Select;
}
});
var _Select = require("./Select");
var _selectClasses = require("./selectClasses");
Object.keys(_selectClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _selectClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _selectClasses[key];
}
});
});
var _Select2 = require("./Select.types");
Object.keys(_Select2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _Select2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Select2[key];
}
});
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getSelectUtilityClass = getSelectUtilityClass;
exports.selectClasses = void 0;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'Select';
function getSelectUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const selectClasses = exports.selectClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'button', 'listbox', 'popup', 'active', 'expanded', 'disabled', 'focusVisible']);
+448
View File
@@ -0,0 +1,448 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Slider = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _utils = require("@mui/utils");
var _isHostComponent = require("../utils/isHostComponent");
var _composeClasses = require("../composeClasses");
var _sliderClasses = require("./sliderClasses");
var _useSlider = require("../useSlider");
var _useSlotProps = require("../utils/useSlotProps");
var _resolveComponentProps = require("../utils/resolveComponentProps");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["aria-label", "aria-valuetext", "aria-labelledby", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "shiftStep", "scale", "step", "tabIndex", "track", "value", "valueLabelFormat", "isRtl", "defaultValue", "slotProps", "slots"]; // @ts-ignore
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
function Identity(x) {
return x;
}
const useUtilityClasses = ownerState => {
const {
disabled,
dragging,
marked,
orientation,
track
} = ownerState;
const slots = {
root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse'],
rail: ['rail'],
track: ['track'],
mark: ['mark'],
markActive: ['markActive'],
markLabel: ['markLabel'],
markLabelActive: ['markLabelActive'],
valueLabel: ['valueLabel'],
thumb: ['thumb', disabled && 'disabled'],
active: ['active'],
disabled: ['disabled'],
focusVisible: ['focusVisible']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_sliderClasses.getSliderUtilityClass));
};
/**
*
* Demos:
*
* - [Slider](https://mui.com/base-ui/react-slider/)
*
* API:
*
* - [Slider API](https://mui.com/base-ui/react-slider/components-api/#slider)
*/
const Slider = exports.Slider = /*#__PURE__*/React.forwardRef(function Slider(props, forwardedRef) {
var _slots$root, _slots$rail, _slots$track, _slots$thumb, _slots$mark, _slots$markLabel;
const {
'aria-label': ariaLabel,
'aria-valuetext': ariaValuetext,
'aria-labelledby': ariaLabelledby,
className,
disableSwap = false,
disabled = false,
getAriaLabel,
getAriaValueText,
marks: marksProp = false,
max = 100,
min = 0,
orientation = 'horizontal',
shiftStep = 10,
scale = Identity,
step = 1,
track = 'normal',
valueLabelFormat = Identity,
isRtl = false,
defaultValue,
slotProps = {},
slots = {}
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
// all props with defaults
// consider extracting to hook an reusing the lint rule for the variants
const partialOwnerState = (0, _extends2.default)({}, props, {
marks: marksProp,
disabled,
disableSwap,
isRtl,
defaultValue,
max,
min,
orientation,
scale,
step,
shiftStep,
track,
valueLabelFormat
});
const {
axisProps,
getRootProps,
getHiddenInputProps,
getThumbProps,
active,
axis,
range,
focusedThumbIndex,
dragging,
marks,
values,
trackOffset,
trackLeap,
getThumbStyle
} = (0, _useSlider.useSlider)((0, _extends2.default)({}, partialOwnerState, {
rootRef: forwardedRef
}));
const ownerState = (0, _extends2.default)({}, partialOwnerState, {
marked: marks.length > 0 && marks.some(mark => mark.label),
dragging,
focusedThumbIndex,
activeThumbIndex: active
});
const classes = useUtilityClasses(ownerState);
const Root = (_slots$root = slots.root) != null ? _slots$root : 'span';
const rootProps = (0, _useSlotProps.useSlotProps)({
elementType: Root,
getSlotProps: getRootProps,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
ownerState,
className: [classes.root, className]
});
const Rail = (_slots$rail = slots.rail) != null ? _slots$rail : 'span';
const railProps = (0, _useSlotProps.useSlotProps)({
elementType: Rail,
externalSlotProps: slotProps.rail,
ownerState,
className: classes.rail
});
const Track = (_slots$track = slots.track) != null ? _slots$track : 'span';
const trackProps = (0, _useSlotProps.useSlotProps)({
elementType: Track,
externalSlotProps: slotProps.track,
additionalProps: {
style: (0, _extends2.default)({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
},
ownerState,
className: classes.track
});
const Thumb = (_slots$thumb = slots.thumb) != null ? _slots$thumb : 'span';
const thumbProps = (0, _useSlotProps.useSlotProps)({
elementType: Thumb,
getSlotProps: getThumbProps,
externalSlotProps: slotProps.thumb,
ownerState,
skipResolvingSlotProps: true
});
const ValueLabel = slots.valueLabel;
const valueLabelProps = (0, _useSlotProps.useSlotProps)({
elementType: ValueLabel,
externalSlotProps: slotProps.valueLabel,
ownerState
});
const Mark = (_slots$mark = slots.mark) != null ? _slots$mark : 'span';
const markProps = (0, _useSlotProps.useSlotProps)({
elementType: Mark,
externalSlotProps: slotProps.mark,
ownerState,
className: classes.mark
});
const MarkLabel = (_slots$markLabel = slots.markLabel) != null ? _slots$markLabel : 'span';
const markLabelProps = (0, _useSlotProps.useSlotProps)({
elementType: MarkLabel,
externalSlotProps: slotProps.markLabel,
ownerState
});
const Input = slots.input || 'input';
const inputProps = (0, _useSlotProps.useSlotProps)({
elementType: Input,
getSlotProps: getHiddenInputProps,
externalSlotProps: slotProps.input,
ownerState
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Rail, (0, _extends2.default)({}, railProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Track, (0, _extends2.default)({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
const percent = (0, _useSlider.valueToPercent)(mark.value, min, max);
const style = axisProps[axis].offset(percent);
let markActive;
if (track === false) {
markActive = values.indexOf(mark.value) !== -1;
} else {
markActive = track === 'normal' && (range ? mark.value >= values[0] && mark.value <= values[values.length - 1] : mark.value <= values[0]) || track === 'inverted' && (range ? mark.value <= values[0] || mark.value >= values[values.length - 1] : mark.value >= values[0]);
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
"data-index": index
}, markProps, !(0, _isHostComponent.isHostComponent)(Mark) && {
markActive
}, {
style: (0, _extends2.default)({}, style, markProps.style),
className: (0, _clsx.default)(markProps.className, markActive && classes.markActive)
})), mark.label != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkLabel, (0, _extends2.default)({
"aria-hidden": true,
"data-index": index
}, markLabelProps, !(0, _isHostComponent.isHostComponent)(MarkLabel) && {
markLabelActive: markActive
}, {
style: (0, _extends2.default)({}, style, markLabelProps.style),
className: (0, _clsx.default)(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
children: mark.label
})) : null]
}, index);
}), values.map((value, index) => {
const percent = (0, _useSlider.valueToPercent)(value, min, max);
const style = axisProps[axis].offset(percent);
const resolvedSlotProps = (0, _resolveComponentProps.resolveComponentProps)(slotProps.thumb, ownerState, {
index,
focused: focusedThumbIndex === index,
active: active === index
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Thumb, (0, _extends2.default)({
"data-index": index
}, thumbProps, resolvedSlotProps, {
className: (0, _clsx.default)(classes.thumb, thumbProps.className, resolvedSlotProps == null ? void 0 : resolvedSlotProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
style: (0, _extends2.default)({}, style, getThumbStyle(index), thumbProps.style, resolvedSlotProps == null ? void 0 : resolvedSlotProps.style),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Input, (0, _extends2.default)({
"data-index": index,
"aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
"aria-valuenow": scale(value),
"aria-labelledby": ariaLabelledby,
"aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
value: values[index]
}, inputProps)), ValueLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ValueLabel, (0, _extends2.default)({}, !(0, _isHostComponent.isHostComponent)(ValueLabel) && {
valueLabelFormat,
index,
disabled
}, valueLabelProps, {
children: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat
})) : null]
}), index);
})]
}));
});
process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The label of the slider.
*/
'aria-label': (0, _utils.chainPropTypes)(_propTypes.default.string, props => {
const range = Array.isArray(props.value || props.defaultValue);
if (range && props['aria-label'] != null) {
return new Error('MUI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.');
}
return null;
}),
/**
* The id of the element containing a label for the slider.
*/
'aria-labelledby': _propTypes.default.string,
/**
* A string value that provides a user-friendly name for the current value of the slider.
*/
'aria-valuetext': (0, _utils.chainPropTypes)(_propTypes.default.string, props => {
const range = Array.isArray(props.value || props.defaultValue);
if (range && props['aria-valuetext'] != null) {
return new Error('MUI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.');
}
return null;
}),
/**
* The default value. Use when the component is not controlled.
*/
defaultValue: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),
/**
* If `true`, the component is disabled.
* @default false
*/
disabled: _propTypes.default.bool,
/**
* If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
* @default false
*/
disableSwap: _propTypes.default.bool,
/**
* Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
* This is important for screen reader users.
* @param {number} index The thumb label's index to format.
* @returns {string}
*/
getAriaLabel: _propTypes.default.func,
/**
* Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
* This is important for screen reader users.
* @param {number} value The thumb label's value to format.
* @param {number} index The thumb label's index to format.
* @returns {string}
*/
getAriaValueText: _propTypes.default.func,
/**
* If `true` the Slider will be rendered right-to-left (with the lowest value on the right-hand side).
* @default false
*/
isRtl: _propTypes.default.bool,
/**
* Marks indicate predetermined values to which the user can move the slider.
* If `true` the marks are spaced according the value of the `step` prop.
* If an array, it should contain objects with `value` and an optional `label` keys.
* @default false
*/
marks: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
label: _propTypes.default.node,
value: _propTypes.default.number.isRequired
})), _propTypes.default.bool]),
/**
* The maximum allowed value of the slider.
* Should not be equal to min.
* @default 100
*/
max: _propTypes.default.number,
/**
* The minimum allowed value of the slider.
* Should not be equal to max.
* @default 0
*/
min: _propTypes.default.number,
/**
* Name attribute of the hidden `input` element.
*/
name: _propTypes.default.string,
/**
* Callback function that is fired when the slider's value changed.
*
* @param {Event} event The event source of the callback.
* You can pull out the new value by accessing `event.target.value` (any).
* **Warning**: This is a generic event not a change event.
* @param {number | number[]} value The new value.
* @param {number} activeThumb Index of the currently moved thumb.
*/
onChange: _propTypes.default.func,
/**
* Callback function that is fired when the `mouseup` is triggered.
*
* @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
* @param {number | number[]} value The new value.
*/
onChangeCommitted: _propTypes.default.func,
/**
* The component orientation.
* @default 'horizontal'
*/
orientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
/**
* A transformation function, to change the scale of the slider.
* @param {any} x
* @returns {any}
* @default function Identity(x) {
* return x;
* }
*/
scale: _propTypes.default.func,
/**
* The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
* @default 10
*/
shiftStep: _propTypes.default.number,
/**
* The props used for each slot inside the Slider.
* @default {}
*/
slotProps: _propTypes.default.shape({
input: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
mark: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
markLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
rail: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
thumb: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
track: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
valueLabel: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.func])
}),
/**
* The components used for each slot inside the Slider.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
input: _propTypes.default.elementType,
mark: _propTypes.default.elementType,
markLabel: _propTypes.default.elementType,
rail: _propTypes.default.elementType,
root: _propTypes.default.elementType,
thumb: _propTypes.default.elementType,
track: _propTypes.default.elementType,
valueLabel: _propTypes.default.elementType
}),
/**
* The granularity with which the slider can step through values. (A "discrete" slider.)
* The `min` prop serves as the origin for the valid values.
* We recommend (max - min) to be evenly divisible by the step.
*
* When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
* @default 1
*/
step: _propTypes.default.number,
/**
* Tab index attribute of the hidden `input` element.
*/
tabIndex: _propTypes.default.number,
/**
* The track presentation:
*
* - `normal` the track will render a bar representing the slider value.
* - `inverted` the track will render a bar representing the remaining slider value.
* - `false` the track will render without a bar.
* @default 'normal'
*/
track: _propTypes.default.oneOf(['inverted', 'normal', false]),
/**
* The value of the slider.
* For ranged sliders, provide an array with two values.
*/
value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),
/**
* The format function the value label's value.
*
* When a function is provided, it should have the following signature:
*
* - {number} value The value label's value to format
* - {number} index The value label's index to format
* @param {any} x
* @returns {any}
* @default function Identity(x) {
* return x;
* }
*/
valueLabelFormat: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+40
View File
@@ -0,0 +1,40 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
Slider: true
};
Object.defineProperty(exports, "Slider", {
enumerable: true,
get: function () {
return _Slider.Slider;
}
});
var _Slider = require("./Slider");
var _Slider2 = require("./Slider.types");
Object.keys(_Slider2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _Slider2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Slider2[key];
}
});
});
var _sliderClasses = require("./sliderClasses");
Object.keys(_sliderClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _sliderClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _sliderClasses[key];
}
});
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getSliderUtilityClass = getSliderUtilityClass;
exports.sliderClasses = void 0;
var _generateUtilityClasses = require("../generateUtilityClasses");
var _generateUtilityClass = require("../generateUtilityClass");
const COMPONENT_NAME = 'Slider';
function getSliderUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const sliderClasses = exports.sliderClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'active', 'focusVisible', 'disabled', 'dragging', 'marked', 'vertical', 'trackInverted', 'trackFalse', 'rail', 'track', 'mark', 'markActive', 'markLabel', 'markLabelActive', 'thumb']);
+171
View File
@@ -0,0 +1,171 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Snackbar = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ClickAwayListener = require("../ClickAwayListener");
var _composeClasses = require("../composeClasses");
var _snackbarClasses = require("./snackbarClasses");
var _useSnackbar = require("../useSnackbar");
var _utils = require("../utils");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["autoHideDuration", "children", "disableWindowBlurListener", "exited", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "slotProps", "slots"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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 useUtilityClasses = () => {
const slots = {
root: ['root']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_snackbarClasses.getSnackbarUtilityClass));
};
/**
*
* Demos:
*
* - [Snackbar](https://mui.com/base-ui/react-snackbar/)
* - [Snackbar](https://mui.com/joy-ui/react-snackbar/)
* - [Snackbar](https://mui.com/material-ui/react-snackbar/)
*
* API:
*
* - [Snackbar API](https://mui.com/base-ui/react-snackbar/components-api/#snackbar)
*/
const Snackbar = exports.Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(props, forwardedRef) {
const {
autoHideDuration = null,
children,
disableWindowBlurListener = false,
exited = true,
onClose,
open,
resumeHideDuration,
slotProps = {},
slots = {}
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const classes = useUtilityClasses();
const {
getRootProps,
onClickAway
} = (0, _useSnackbar.useSnackbar)((0, _extends2.default)({}, props, {
autoHideDuration,
disableWindowBlurListener,
onClose,
open,
resumeHideDuration
}));
const ownerState = props;
const Root = slots.root || 'div';
const rootProps = (0, _utils.useSlotProps)({
elementType: Root,
getSlotProps: getRootProps,
externalForwardedProps: other,
externalSlotProps: slotProps.root,
additionalProps: {
ref: forwardedRef
},
ownerState,
className: classes.root
});
const clickAwayListenerProps = (0, _utils.useSlotProps)({
elementType: _ClickAwayListener.ClickAwayListener,
externalSlotProps: slotProps.clickAwayListener,
additionalProps: {
onClickAway
},
ownerState
});
// ClickAwayListener doesn't support ownerState
delete clickAwayListenerProps.ownerState;
// So that we only render active snackbars.
if (!open && exited) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.ClickAwayListener, (0, _extends2.default)({}, clickAwayListenerProps, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
children: children
}))
}));
});
process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The number of milliseconds to wait before automatically calling the
* `onClose` function. `onClose` should then set the state of the `open`
* prop to hide the Snackbar. This behavior is disabled by default with
* the `null` value.
* @default null
*/
autoHideDuration: _propTypes.default.number,
/**
* @ignore
*/
children: _propTypes.default.node,
/**
* If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
* @default false
*/
disableWindowBlurListener: _propTypes.default.bool,
/**
* The prop used to handle exited transition and unmount the component.
* @default true
*/
exited: _propTypes.default.bool,
/**
* Callback fired when the component requests to be closed.
* Typically `onClose` is used to set state in the parent component,
* which is used to control the `Snackbar` `open` prop.
* The `reason` parameter can optionally be used to control the response to `onClose`,
* for example ignoring `clickaway`.
*
* @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
* @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
*/
onClose: _propTypes.default.func,
/**
* If `true`, the component is shown.
*/
open: _propTypes.default.bool,
/**
* The number of milliseconds to wait before dismissing after user interaction.
* If `autoHideDuration` prop isn't specified, it does nothing.
* If `autoHideDuration` prop is specified but `resumeHideDuration` isn't,
* we default to `autoHideDuration / 2` ms.
*/
resumeHideDuration: _propTypes.default.number,
/**
* The props used for each slot inside the Snackbar.
* @default {}
*/
slotProps: _propTypes.default.shape({
clickAwayListener: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
children: _propTypes.default.element.isRequired,
disableReactTree: _propTypes.default.bool,
mouseEvent: _propTypes.default.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
onClickAway: _propTypes.default.func,
touchEvent: _propTypes.default.oneOf(['onTouchEnd', 'onTouchStart', false])
})]),
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the Snackbar.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
root: _propTypes.default.elementType
})
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+40
View File
@@ -0,0 +1,40 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
Snackbar: true
};
Object.defineProperty(exports, "Snackbar", {
enumerable: true,
get: function () {
return _Snackbar.Snackbar;
}
});
var _Snackbar = require("./Snackbar");
var _Snackbar2 = require("./Snackbar.types");
Object.keys(_Snackbar2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _Snackbar2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Snackbar2[key];
}
});
});
var _snackbarClasses = require("./snackbarClasses");
Object.keys(_snackbarClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _snackbarClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _snackbarClasses[key];
}
});
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getSnackbarUtilityClass = getSnackbarUtilityClass;
exports.snackbarClasses = void 0;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'Snackbar';
function getSnackbarUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const snackbarClasses = exports.snackbarClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root']);
+177
View File
@@ -0,0 +1,177 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Switch = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _composeClasses = require("../composeClasses");
var _useSwitch = require("../useSwitch");
var _utils = require("../utils");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _switchClasses = require("./switchClasses");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["checked", "defaultChecked", "disabled", "onBlur", "onChange", "onFocus", "onFocusVisible", "readOnly", "required", "slotProps", "slots"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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 useUtilityClasses = ownerState => {
const {
checked,
disabled,
focusVisible,
readOnly
} = ownerState;
const slots = {
root: ['root', checked && 'checked', disabled && 'disabled', focusVisible && 'focusVisible', readOnly && 'readOnly'],
thumb: ['thumb'],
input: ['input'],
track: ['track']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_switchClasses.getSwitchUtilityClass));
};
/**
* The foundation for building custom-styled switches.
*
* Demos:
*
* - [Switch](https://mui.com/base-ui/react-switch/)
*
* API:
*
* - [Switch API](https://mui.com/base-ui/react-switch/components-api/#switch)
*/
const Switch = exports.Switch = /*#__PURE__*/React.forwardRef(function Switch(props, forwardedRef) {
var _slots$root, _slots$thumb, _slots$input, _slots$track;
const {
slotProps = {},
slots = {}
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const {
getInputProps,
checked,
disabled,
focusVisible,
readOnly
} = (0, _useSwitch.useSwitch)(props);
const ownerState = (0, _extends2.default)({}, props, {
checked,
disabled,
focusVisible,
readOnly
});
const classes = useUtilityClasses(ownerState);
const Root = (_slots$root = slots.root) != null ? _slots$root : 'span';
const rootProps = (0, _utils.useSlotProps)({
elementType: Root,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
additionalProps: {
ref: forwardedRef
},
ownerState,
className: classes.root
});
const Thumb = (_slots$thumb = slots.thumb) != null ? _slots$thumb : 'span';
const thumbProps = (0, _utils.useSlotProps)({
elementType: Thumb,
externalSlotProps: slotProps.thumb,
ownerState,
className: classes.thumb
});
const Input = (_slots$input = slots.input) != null ? _slots$input : 'input';
const inputProps = (0, _utils.useSlotProps)({
elementType: Input,
getSlotProps: getInputProps,
externalSlotProps: slotProps.input,
ownerState,
className: classes.input
});
const Track = slots.track === null ? () => null : (_slots$track = slots.track) != null ? _slots$track : 'span';
const trackProps = (0, _utils.useSlotProps)({
elementType: Track,
externalSlotProps: slotProps.track,
ownerState,
className: classes.track
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Track, (0, _extends2.default)({}, trackProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Thumb, (0, _extends2.default)({}, thumbProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, (0, _extends2.default)({}, inputProps))]
}));
});
process.env.NODE_ENV !== "production" ? Switch.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* If `true`, the component is checked.
*/
checked: _propTypes.default.bool,
/**
* Class name applied to the root element.
*/
className: _propTypes.default.string,
/**
* The default checked state. Use when the component is not controlled.
*/
defaultChecked: _propTypes.default.bool,
/**
* If `true`, the component is disabled.
*/
disabled: _propTypes.default.bool,
/**
* @ignore
*/
onBlur: _propTypes.default.func,
/**
* Callback fired when the state is changed.
*
* @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
* You can pull out the new value by accessing `event.target.value` (string).
* You can pull out the new checked state by accessing `event.target.checked` (boolean).
*/
onChange: _propTypes.default.func,
/**
* @ignore
*/
onFocus: _propTypes.default.func,
/**
* @ignore
*/
onFocusVisible: _propTypes.default.func,
/**
* If `true`, the component is read only.
*/
readOnly: _propTypes.default.bool,
/**
* If `true`, the `input` element is required.
*/
required: _propTypes.default.bool,
/**
* The props used for each slot inside the Switch.
* @default {}
*/
slotProps: _propTypes.default.shape({
input: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
thumb: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
track: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the Switch.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
input: _propTypes.default.elementType,
root: _propTypes.default.elementType,
thumb: _propTypes.default.elementType,
track: _propTypes.default.oneOfType([_propTypes.default.elementType, _propTypes.default.oneOf([null])])
})
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+40
View File
@@ -0,0 +1,40 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
Switch: true
};
Object.defineProperty(exports, "Switch", {
enumerable: true,
get: function () {
return _Switch.Switch;
}
});
var _Switch = require("./Switch");
var _Switch2 = require("./Switch.types");
Object.keys(_Switch2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _Switch2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Switch2[key];
}
});
});
var _switchClasses = require("./switchClasses");
Object.keys(_switchClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _switchClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _switchClasses[key];
}
});
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getSwitchUtilityClass = getSwitchUtilityClass;
exports.switchClasses = void 0;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'Switch';
function getSwitchUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const switchClasses = exports.switchClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'input', 'track', 'thumb', 'checked', 'disabled', 'focusVisible', 'readOnly']);
+132
View File
@@ -0,0 +1,132 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Tab = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@mui/utils");
var _composeClasses = require("../composeClasses");
var _tabClasses = require("./tabClasses");
var _useTab = require("../useTab");
var _utils2 = require("../utils");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["action", "children", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots", "value"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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 useUtilityClasses = ownerState => {
const {
selected,
disabled
} = ownerState;
const slots = {
root: ['root', selected && 'selected', disabled && 'disabled']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_tabClasses.getTabUtilityClass));
};
/**
*
* Demos:
*
* - [Tabs](https://mui.com/base-ui/react-tabs/)
*
* API:
*
* - [Tab API](https://mui.com/base-ui/react-tabs/components-api/#tab)
*/
const Tab = exports.Tab = /*#__PURE__*/React.forwardRef(function Tab(props, forwardedRef) {
var _slots$root;
const {
children,
disabled = false,
slotProps = {},
slots = {},
value
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const tabRef = React.useRef();
const handleRef = (0, _utils.unstable_useForkRef)(tabRef, forwardedRef);
const {
active,
highlighted,
selected,
getRootProps
} = (0, _useTab.useTab)((0, _extends2.default)({}, props, {
rootRef: handleRef,
value
}));
const ownerState = (0, _extends2.default)({}, props, {
active,
disabled,
highlighted,
selected
});
const classes = useUtilityClasses(ownerState);
const TabRoot = (_slots$root = slots.root) != null ? _slots$root : 'button';
const tabRootProps = (0, _utils2.useSlotProps)({
elementType: TabRoot,
getSlotProps: getRootProps,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
additionalProps: {
ref: forwardedRef
},
ownerState,
className: classes.root
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabRoot, (0, _extends2.default)({}, tabRootProps, {
children: children
}));
});
process.env.NODE_ENV !== "production" ? Tab.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* A ref for imperative actions. It currently only supports `focusVisible()` action.
*/
action: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
current: _propTypes.default.shape({
focusVisible: _propTypes.default.func.isRequired
})
})]),
/**
* @ignore
*/
children: _propTypes.default.node,
/**
* If `true`, the component is disabled.
* @default false
*/
disabled: _propTypes.default.bool,
/**
* Callback invoked when new value is being set.
*/
onChange: _propTypes.default.func,
/**
* The props used for each slot inside the Tab.
* @default {}
*/
slotProps: _propTypes.default.shape({
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the Tab.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
root: _propTypes.default.elementType
}),
/**
* You can provide your own value. Otherwise, it falls back to the child position index.
*/
value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+40
View File
@@ -0,0 +1,40 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
Tab: true
};
Object.defineProperty(exports, "Tab", {
enumerable: true,
get: function () {
return _Tab.Tab;
}
});
var _Tab = require("./Tab");
var _Tab2 = require("./Tab.types");
Object.keys(_Tab2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _Tab2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Tab2[key];
}
});
});
var _tabClasses = require("./tabClasses");
Object.keys(_tabClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _tabClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _tabClasses[key];
}
});
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getTabUtilityClass = getTabUtilityClass;
exports.tabClasses = void 0;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'Tab';
function getTabUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const tabClasses = exports.tabClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'selected', 'disabled']);
+108
View File
@@ -0,0 +1,108 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TabPanel = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("../utils");
var _composeClasses = require("../composeClasses");
var _tabPanelClasses = require("./tabPanelClasses");
var _useTabPanel = require("../useTabPanel/useTabPanel");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["children", "value", "slotProps", "slots"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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 useUtilityClasses = ownerState => {
const {
hidden
} = ownerState;
const slots = {
root: ['root', hidden && 'hidden']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_tabPanelClasses.getTabPanelUtilityClass));
};
/**
*
* Demos:
*
* - [Tabs](https://mui.com/base-ui/react-tabs/)
*
* API:
*
* - [TabPanel API](https://mui.com/base-ui/react-tabs/components-api/#tab-panel)
*/
const TabPanel = exports.TabPanel = /*#__PURE__*/React.forwardRef(function TabPanel(props, forwardedRef) {
var _slots$root;
const {
children,
slotProps = {},
slots = {}
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const {
hidden,
getRootProps
} = (0, _useTabPanel.useTabPanel)(props);
const ownerState = (0, _extends2.default)({}, props, {
hidden
});
const classes = useUtilityClasses(ownerState);
const TabPanelRoot = (_slots$root = slots.root) != null ? _slots$root : 'div';
const tabPanelRootProps = (0, _utils.useSlotProps)({
elementType: TabPanelRoot,
getSlotProps: getRootProps,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
additionalProps: {
role: 'tabpanel',
ref: forwardedRef
},
ownerState,
className: classes.root
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabPanelRoot, (0, _extends2.default)({}, tabPanelRootProps, {
children: !hidden && children
}));
});
process.env.NODE_ENV !== "production" ? TabPanel.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: _propTypes.default.node,
/**
* @ignore
*/
className: _propTypes.default.string,
/**
* The props used for each slot inside the TabPanel.
* @default {}
*/
slotProps: _propTypes.default.shape({
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the TabPanel.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
root: _propTypes.default.elementType
}),
/**
* The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected.
* If not provided, it will fall back to the index of the panel.
* It is recommended to explicitly provide it, as it's required for the tab panel to be rendered on the server.
*/
value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+40
View File
@@ -0,0 +1,40 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
TabPanel: true
};
Object.defineProperty(exports, "TabPanel", {
enumerable: true,
get: function () {
return _TabPanel.TabPanel;
}
});
var _TabPanel = require("./TabPanel");
var _TabPanel2 = require("./TabPanel.types");
Object.keys(_TabPanel2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _TabPanel2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _TabPanel2[key];
}
});
});
var _tabPanelClasses = require("./tabPanelClasses");
Object.keys(_tabPanelClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _tabPanelClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _tabPanelClasses[key];
}
});
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getTabPanelUtilityClass = getTabPanelUtilityClass;
exports.tabPanelClasses = void 0;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'TabPanel';
function getTabPanelUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const tabPanelClasses = exports.tabPanelClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'hidden']);
+324
View File
@@ -0,0 +1,324 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TablePagination = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@mui/utils");
var _utils2 = require("../utils");
var _composeClasses = require("../composeClasses");
var _isHostComponent = require("../utils/isHostComponent");
var _TablePaginationActions = require("./TablePaginationActions");
var _tablePaginationClasses = require("./tablePaginationClasses");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["colSpan", "count", "getItemAriaLabel", "labelDisplayedRows", "labelId", "labelRowsPerPage", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "selectId", "slotProps", "slots"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
function defaultLabelDisplayedRows({
from,
to,
count
}) {
return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
}
function defaultGetAriaLabel(type) {
return `Go to ${type} page`;
}
const useUtilityClasses = () => {
const slots = {
root: ['root'],
toolbar: ['toolbar'],
spacer: ['spacer'],
selectLabel: ['selectLabel'],
select: ['select'],
input: ['input'],
selectIcon: ['selectIcon'],
menuItem: ['menuItem'],
displayedRows: ['displayedRows'],
actions: ['actions']
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_tablePaginationClasses.getTablePaginationUtilityClass));
};
/**
* A pagination for tables.
*
* Demos:
*
* - [Table Pagination](https://mui.com/base-ui/react-table-pagination/)
*
* API:
*
* - [TablePagination API](https://mui.com/base-ui/react-table-pagination/components-api/#table-pagination)
*/
const TablePagination = exports.TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(props, forwardedRef) {
var _slots$root, _slots$select, _slots$actions, _slots$menuItem, _slots$selectLabel, _slots$displayedRows, _slots$toolbar, _slots$spacer;
const {
colSpan: colSpanProp,
count,
getItemAriaLabel = defaultGetAriaLabel,
labelDisplayedRows = defaultLabelDisplayedRows,
labelId: labelIdProp,
labelRowsPerPage = 'Rows per page:',
onPageChange,
onRowsPerPageChange,
page,
rowsPerPage,
rowsPerPageOptions = [10, 25, 50, 100],
selectId: selectIdProp,
slotProps = {},
slots = {}
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const ownerState = props;
const classes = useUtilityClasses();
let colSpan;
const Root = (_slots$root = slots.root) != null ? _slots$root : 'td';
if (Root === 'td' || !(0, _isHostComponent.isHostComponent)(Root)) {
colSpan = colSpanProp || 1000; // col-span over everything
}
const getLabelDisplayedRowsTo = () => {
if (count === -1) {
return (page + 1) * rowsPerPage;
}
return rowsPerPage === -1 ? count : Math.min(count, (page + 1) * rowsPerPage);
};
const selectId = (0, _utils.unstable_useId)(selectIdProp);
const labelId = (0, _utils.unstable_useId)(labelIdProp);
const rootProps = (0, _utils2.useSlotProps)({
elementType: Root,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
additionalProps: {
colSpan,
ref: forwardedRef
},
ownerState,
className: classes.root
});
const Select = (_slots$select = slots.select) != null ? _slots$select : 'select';
const selectProps = (0, _utils2.useSlotProps)({
elementType: Select,
externalSlotProps: slotProps.select,
additionalProps: {
value: rowsPerPage,
id: selectId,
onChange: event => onRowsPerPageChange && onRowsPerPageChange(event),
'aria-label': rowsPerPage.toString(),
'aria-labelledby': [labelId, selectId].filter(Boolean).join(' ') || undefined
},
ownerState,
className: classes.select
});
const Actions = (_slots$actions = slots.actions) != null ? _slots$actions : _TablePaginationActions.TablePaginationActions;
const actionsProps = (0, _utils2.useSlotProps)({
elementType: Actions,
externalSlotProps: slotProps.actions,
additionalProps: {
page,
rowsPerPage,
count,
onPageChange,
getItemAriaLabel
},
ownerState,
className: classes.actions
});
const MenuItem = (_slots$menuItem = slots.menuItem) != null ? _slots$menuItem : 'option';
const menuItemProps = (0, _utils2.useSlotProps)({
elementType: MenuItem,
externalSlotProps: slotProps.menuItem,
additionalProps: {
value: undefined
},
ownerState,
className: classes.menuItem
});
const SelectLabel = (_slots$selectLabel = slots.selectLabel) != null ? _slots$selectLabel : 'p';
const selectLabelProps = (0, _utils2.useSlotProps)({
elementType: SelectLabel,
externalSlotProps: slotProps.selectLabel,
additionalProps: {
id: labelId
},
ownerState,
className: classes.selectLabel
});
const DisplayedRows = (_slots$displayedRows = slots.displayedRows) != null ? _slots$displayedRows : 'p';
const displayedRowsProps = (0, _utils2.useSlotProps)({
elementType: DisplayedRows,
externalSlotProps: slotProps.displayedRows,
ownerState,
className: classes.displayedRows
});
const Toolbar = (_slots$toolbar = slots.toolbar) != null ? _slots$toolbar : 'div';
const toolbarProps = (0, _utils2.useSlotProps)({
elementType: Toolbar,
externalSlotProps: slotProps.toolbar,
ownerState,
className: classes.toolbar
});
const Spacer = (_slots$spacer = slots.spacer) != null ? _slots$spacer : 'div';
const spacerProps = (0, _utils2.useSlotProps)({
elementType: Spacer,
externalSlotProps: slotProps.spacer,
ownerState,
className: classes.spacer
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Toolbar, (0, _extends2.default)({}, toolbarProps, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Spacer, (0, _extends2.default)({}, spacerProps)), rowsPerPageOptions.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectLabel, (0, _extends2.default)({}, selectLabelProps, {
children: labelRowsPerPage
})), rowsPerPageOptions.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Select, (0, _extends2.default)({}, selectProps, {
children: rowsPerPageOptions.map(rowsPerPageOption => /*#__PURE__*/(0, _react.createElement)(MenuItem, (0, _extends2.default)({}, menuItemProps, {
key: typeof rowsPerPageOption !== 'number' && rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption,
value: typeof rowsPerPageOption !== 'number' && rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption
}), typeof rowsPerPageOption !== 'number' && rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption))
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(DisplayedRows, (0, _extends2.default)({}, displayedRowsProps, {
children: labelDisplayedRows({
from: count === 0 ? 0 : page * rowsPerPage + 1,
to: getLabelDisplayedRowsTo(),
count: count === -1 ? -1 : count,
page
})
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Actions, (0, _extends2.default)({}, actionsProps))]
}))
}));
});
process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
colSpan: _propTypes.default.number,
/**
* The total number of rows.
*
* To enable server side pagination for an unknown number of items, provide -1.
*/
count: _propTypes.default.number.isRequired,
/**
* Accepts a function which returns a string value that provides a user-friendly name for the current page.
* This is important for screen reader users.
*
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
* @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous').
* @returns {string}
* @default function defaultGetAriaLabel(type: ItemAriaLabelType) {
* return `Go to ${type} page`;
* }
*/
getItemAriaLabel: _propTypes.default.func,
/**
* Customize the displayed rows label. Invoked with a `{ from, to, count, page }`
* object.
*
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
* @default function defaultLabelDisplayedRows({ from, to, count }: LabelDisplayedRowsArgs) {
* return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
* }
*/
labelDisplayedRows: _propTypes.default.func,
/**
* Id of the label element within the pagination.
*/
labelId: _propTypes.default.string,
/**
* Customize the rows per page label.
*
* For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
* @default 'Rows per page:'
*/
labelRowsPerPage: _propTypes.default.node,
/**
* Callback fired when the page is changed.
*
* @param {React.MouseEvent<HTMLButtonElement> | null} event The event source of the callback.
* @param {number} page The page selected.
*/
onPageChange: _propTypes.default.func.isRequired,
/**
* Callback fired when the number of rows per page is changed.
*
* @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
*/
onRowsPerPageChange: _propTypes.default.func,
/**
* The zero-based index of the current page.
*/
page: (0, _utils.chainPropTypes)(_utils.integerPropType.isRequired, props => {
const {
count,
page,
rowsPerPage
} = props;
if (count === -1) {
return null;
}
const newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
if (page < 0 || page > newLastPage) {
return new Error('MUI: The page prop of a TablePagination is out of range ' + `(0 to ${newLastPage}, but page is ${page}).`);
}
return null;
}),
/**
* The number of rows per page.
*
* Set -1 to display all the rows.
*/
rowsPerPage: _utils.integerPropType.isRequired,
/**
* Customizes the options of the rows per page select field. If less than two options are
* available, no select field will be displayed.
* Use -1 for the value with a custom label to show all the rows.
* @default [10, 25, 50, 100]
*/
rowsPerPageOptions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
label: _propTypes.default.string.isRequired,
value: _propTypes.default.number.isRequired
})]).isRequired),
/**
* Id of the select element within the pagination.
*/
selectId: _propTypes.default.string,
/**
* The props used for each slot inside the TablePagination.
* @default {}
*/
slotProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
actions: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
displayedRows: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
menuItem: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
select: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
selectLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
spacer: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
toolbar: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the TablePagination.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
actions: _propTypes.default.elementType,
displayedRows: _propTypes.default.elementType,
menuItem: _propTypes.default.elementType,
root: _propTypes.default.elementType,
select: _propTypes.default.elementType,
selectLabel: _propTypes.default.elementType,
spacer: _propTypes.default.elementType,
toolbar: _propTypes.default.elementType
})
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+149
View File
@@ -0,0 +1,149 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TablePaginationActions = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _utils = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["count", "getItemAriaLabel", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "direction", "ownerState", "slotProps", "slots"];
var _span, _span2, _span3, _span4;
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
function LastPageIconDefault() {
return _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: '⇾|'
}));
}
function FirstPageIconDefault() {
return _span2 || (_span2 = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: '|⇽'
}));
}
function NextPageIconDefault() {
return _span3 || (_span3 = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: '⇾'
}));
}
function BackPageIconDefault() {
return _span4 || (_span4 = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: '⇽'
}));
}
function defaultGetAriaLabel(type) {
return `Go to ${type} page`;
}
/**
* @ignore - internal component.
*/
const TablePaginationActions = exports.TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, forwardedRef) {
var _slots$root, _slots$firstButton, _slots$lastButton, _slots$nextButton, _slots$backButton, _slots$lastPageIcon, _slots$firstPageIcon, _slots$nextPageIcon, _slots$backPageIcon;
const {
count,
getItemAriaLabel = defaultGetAriaLabel,
onPageChange,
page,
rowsPerPage,
showFirstButton = false,
showLastButton = false,
direction
// @ts-ignore
,
slotProps = {},
slots = {}
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const ownerState = props;
const handleFirstPageButtonClick = event => {
onPageChange(event, 0);
};
const handleBackButtonClick = event => {
onPageChange(event, page - 1);
};
const handleNextButtonClick = event => {
onPageChange(event, page + 1);
};
const handleLastPageButtonClick = event => {
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
};
const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
const rootProps = (0, _utils.useSlotProps)({
elementType: Root,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
additionalProps: {
ref: forwardedRef
},
ownerState
});
const FirstButton = (_slots$firstButton = slots.firstButton) != null ? _slots$firstButton : 'button';
const firstButtonProps = (0, _utils.useSlotProps)({
elementType: FirstButton,
externalSlotProps: slotProps.firstButton,
additionalProps: {
onClick: handleFirstPageButtonClick,
disabled: page === 0,
'aria-label': getItemAriaLabel('first', page),
title: getItemAriaLabel('first', page)
},
ownerState
});
const LastButton = (_slots$lastButton = slots.lastButton) != null ? _slots$lastButton : 'button';
const lastButtonProps = (0, _utils.useSlotProps)({
elementType: LastButton,
externalSlotProps: slotProps.lastButton,
additionalProps: {
onClick: handleLastPageButtonClick,
disabled: page >= Math.ceil(count / rowsPerPage) - 1,
'aria-label': getItemAriaLabel('last', page),
title: getItemAriaLabel('last', page)
},
ownerState
});
const NextButton = (_slots$nextButton = slots.nextButton) != null ? _slots$nextButton : 'button';
const nextButtonProps = (0, _utils.useSlotProps)({
elementType: NextButton,
externalSlotProps: slotProps.nextButton,
additionalProps: {
onClick: handleNextButtonClick,
disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,
'aria-label': getItemAriaLabel('next', page),
title: getItemAriaLabel('next', page)
},
ownerState
});
const BackButton = (_slots$backButton = slots.backButton) != null ? _slots$backButton : 'button';
const backButtonProps = (0, _utils.useSlotProps)({
elementType: BackButton,
externalSlotProps: slotProps.backButton,
additionalProps: {
onClick: handleBackButtonClick,
disabled: page === 0,
'aria-label': getItemAriaLabel('previous', page),
title: getItemAriaLabel('previous', page)
},
ownerState
});
const LastPageIcon = (_slots$lastPageIcon = slots.lastPageIcon) != null ? _slots$lastPageIcon : LastPageIconDefault;
const FirstPageIcon = (_slots$firstPageIcon = slots.firstPageIcon) != null ? _slots$firstPageIcon : FirstPageIconDefault;
const NextPageIcon = (_slots$nextPageIcon = slots.nextPageIcon) != null ? _slots$nextPageIcon : NextPageIconDefault;
const BackPageIcon = (_slots$backPageIcon = slots.backPageIcon) != null ? _slots$backPageIcon : BackPageIconDefault;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
children: [showFirstButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(FirstButton, (0, _extends2.default)({}, firstButtonProps, {
children: direction === 'rtl' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LastPageIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(FirstPageIcon, {})
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(BackButton, (0, _extends2.default)({}, backButtonProps, {
children: direction === 'rtl' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(NextPageIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(BackPageIcon, {})
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButton, (0, _extends2.default)({}, nextButtonProps, {
children: direction === 'rtl' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BackPageIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(NextPageIcon, {})
})), showLastButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(LastButton, (0, _extends2.default)({}, lastButtonProps, {
children: direction === 'rtl' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(FirstPageIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(LastPageIcon, {})
}))]
}));
});
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+72
View File
@@ -0,0 +1,72 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
TablePagination: true,
TablePaginationActions: true
};
Object.defineProperty(exports, "TablePagination", {
enumerable: true,
get: function () {
return _TablePagination.TablePagination;
}
});
Object.defineProperty(exports, "TablePaginationActions", {
enumerable: true,
get: function () {
return _TablePaginationActions.TablePaginationActions;
}
});
var _TablePagination = require("./TablePagination");
var _TablePagination2 = require("./TablePagination.types");
Object.keys(_TablePagination2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _TablePagination2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _TablePagination2[key];
}
});
});
var _TablePaginationActions = require("./TablePaginationActions");
var _TablePaginationActions2 = require("./TablePaginationActions.types");
Object.keys(_TablePaginationActions2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _TablePaginationActions2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _TablePaginationActions2[key];
}
});
});
var _tablePaginationClasses = require("./tablePaginationClasses");
Object.keys(_tablePaginationClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _tablePaginationClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _tablePaginationClasses[key];
}
});
});
var _common = require("./common.types");
Object.keys(_common).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _common[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _common[key];
}
});
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getTablePaginationUtilityClass = getTablePaginationUtilityClass;
exports.tablePaginationClasses = void 0;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'TablePagination';
function getTablePaginationUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const tablePaginationClasses = exports.tablePaginationClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'toolbar', 'spacer', 'selectLabel', 'selectRoot', 'select', 'selectIcon', 'input', 'menuItem', 'displayedRows', 'actions']);
+135
View File
@@ -0,0 +1,135 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Tabs = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("../utils");
var _composeClasses = require("../composeClasses");
var _tabsClasses = require("./tabsClasses");
var _useTabs = require("../useTabs");
var _TabsProvider = require("../useTabs/TabsProvider");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["children", "value", "defaultValue", "orientation", "direction", "onChange", "selectionFollowsFocus", "slotProps", "slots"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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 useUtilityClasses = ownerState => {
const {
orientation
} = ownerState;
const slots = {
root: ['root', orientation]
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_tabsClasses.getTabsUtilityClass));
};
/**
*
* Demos:
*
* - [Tabs](https://mui.com/base-ui/react-tabs/)
*
* API:
*
* - [Tabs API](https://mui.com/base-ui/react-tabs/components-api/#tabs)
*/
const Tabs = exports.Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, forwardedRef) {
var _slots$root;
const {
children,
orientation = 'horizontal',
direction = 'ltr',
slotProps = {},
slots = {}
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const ownerState = (0, _extends2.default)({}, props, {
orientation,
direction
});
const {
contextValue
} = (0, _useTabs.useTabs)(ownerState);
const classes = useUtilityClasses(ownerState);
const TabsRoot = (_slots$root = slots.root) != null ? _slots$root : 'div';
const tabsRootProps = (0, _utils.useSlotProps)({
elementType: TabsRoot,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
additionalProps: {
ref: forwardedRef
},
ownerState,
className: classes.root
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabsRoot, (0, _extends2.default)({}, tabsRootProps, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsProvider.TabsProvider, {
value: contextValue,
children: children
})
}));
});
process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: _propTypes.default.node,
/**
* @ignore
*/
className: _propTypes.default.string,
/**
* The default value. Use when the component is not controlled.
*/
defaultValue: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
/**
* The direction of the text.
* @default 'ltr'
*/
direction: _propTypes.default.oneOf(['ltr', 'rtl']),
/**
* Callback invoked when new value is being set.
*/
onChange: _propTypes.default.func,
/**
* The component orientation (layout flow direction).
* @default 'horizontal'
*/
orientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
/**
* If `true` the selected tab changes on focus. Otherwise it only
* changes on activation.
*/
selectionFollowsFocus: _propTypes.default.bool,
/**
* The props used for each slot inside the Tabs.
* @default {}
*/
slotProps: _propTypes.default.shape({
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the Tabs.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
root: _propTypes.default.elementType
}),
/**
* The value of the currently selected `Tab`.
* If you don't want any selected `Tab`, you can set this prop to `null`.
*/
value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
} : void 0;
+5
View File
@@ -0,0 +1,5 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
+24
View File
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TabsContext = void 0;
exports.useTabsContext = useTabsContext;
var React = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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; }
/**
* @ignore - internal component.
*/
const TabsContext = exports.TabsContext = /*#__PURE__*/React.createContext(null);
if (process.env.NODE_ENV !== 'production') {
TabsContext.displayName = 'TabsContext';
}
function useTabsContext() {
const context = React.useContext(TabsContext);
if (context == null) {
throw new Error('No TabsContext provided');
}
return context;
}
+52
View File
@@ -0,0 +1,52 @@
"use strict";
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
Tabs: true
};
Object.defineProperty(exports, "Tabs", {
enumerable: true,
get: function () {
return _Tabs.Tabs;
}
});
var _Tabs = require("./Tabs");
var _TabsContext = require("./TabsContext");
Object.keys(_TabsContext).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _TabsContext[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _TabsContext[key];
}
});
});
var _tabsClasses = require("./tabsClasses");
Object.keys(_tabsClasses).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _tabsClasses[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _tabsClasses[key];
}
});
});
var _Tabs2 = require("./Tabs.types");
Object.keys(_Tabs2).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _Tabs2[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function () {
return _Tabs2[key];
}
});
});
+14
View File
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getTabsUtilityClass = getTabsUtilityClass;
exports.tabsClasses = void 0;
var _generateUtilityClass = require("../generateUtilityClass");
var _generateUtilityClasses = require("../generateUtilityClasses");
const COMPONENT_NAME = 'Tabs';
function getTabsUtilityClass(slot) {
return (0, _generateUtilityClass.generateUtilityClass)(COMPONENT_NAME, slot);
}
const tabsClasses = exports.tabsClasses = (0, _generateUtilityClasses.generateUtilityClasses)(COMPONENT_NAME, ['root', 'horizontal', 'vertical']);
+108
View File
@@ -0,0 +1,108 @@
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TabsList = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _composeClasses = require("../composeClasses");
var _utils = require("../utils");
var _tabsListClasses = require("./tabsListClasses");
var _useTabsList = require("../useTabsList");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _TabsListProvider = require("../useTabsList/TabsListProvider");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["children", "slotProps", "slots"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
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 useUtilityClasses = ownerState => {
const {
orientation
} = ownerState;
const slots = {
root: ['root', orientation]
};
return (0, _composeClasses.unstable_composeClasses)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_tabsListClasses.getTabsListUtilityClass));
};
/**
*
* Demos:
*
* - [Tabs](https://mui.com/base-ui/react-tabs/)
*
* API:
*
* - [TabsList API](https://mui.com/base-ui/react-tabs/components-api/#tabs-list)
*/
const TabsList = exports.TabsList = /*#__PURE__*/React.forwardRef(function TabsList(props, forwardedRef) {
var _slots$root;
const {
children,
slotProps = {},
slots = {}
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const {
isRtl,
orientation,
getRootProps,
contextValue
} = (0, _useTabsList.useTabsList)({
rootRef: forwardedRef
});
const ownerState = (0, _extends2.default)({}, props, {
isRtl,
orientation
});
const classes = useUtilityClasses(ownerState);
const TabsListRoot = (_slots$root = slots.root) != null ? _slots$root : 'div';
const tabsListRootProps = (0, _utils.useSlotProps)({
elementType: TabsListRoot,
getSlotProps: getRootProps,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
ownerState,
className: classes.root
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsListProvider.TabsListProvider, {
value: contextValue,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TabsListRoot, (0, _extends2.default)({}, tabsListRootProps, {
children: children
}))
});
});
process.env.NODE_ENV !== "production" ? TabsList.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: _propTypes.default.node,
/**
* @ignore
*/
className: _propTypes.default.string,
/**
* The props used for each slot inside the TabsList.
* @default {}
*/
slotProps: _propTypes.default.shape({
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the TabsList.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
root: _propTypes.default.elementType
})
} : void 0;
Loaded 100 of 6977 files, more files were not shown because too many files have changed in this diff. Show more