Files F100039440

MultiSelectUnstyled.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Mon, Jan 27, 20:32

MultiSelectUnstyled.js
View Options

	import _extends from "@babel/runtime/helpers/esm/extends";
	import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
	const _excluded = ["autoFocus", "children", "component", "defaultListboxOpen", "defaultValue", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "name", "onChange", "onListboxOpenChange", "optionStringifier", "renderValue", "slotProps", "slots", "value"];
	import * as React from 'react';
	import PropTypes from 'prop-types';
	import { unstable_useForkRef as useForkRef, unstable_useControlled as useControlled } from '@mui/utils';
	import { flattenOptionGroups, getOptionsFromChildren } from '../SelectUnstyled/utils';
	import useSelect from '../SelectUnstyled/useSelect';
	import { useSlotProps } from '../utils';
	import PopperUnstyled from '../PopperUnstyled';
	import { SelectUnstyledContext } from '../SelectUnstyled/SelectUnstyledContext';
	import composeClasses from '../composeClasses';
	import { getSelectUnstyledUtilityClass } from '../SelectUnstyled/selectUnstyledClasses';
	import defaultOptionStringifier from '../SelectUnstyled/defaultOptionStringifier';
	import { jsx as _jsx } from "react/jsx-runtime";
	import { jsxs as _jsxs } from "react/jsx-runtime";
	function defaultRenderMultipleValues(selectedOptions) {
	return /#__PURE__/_jsx(React.Fragment, {
	children: selectedOptions.map(o => o.label).join(', ')
	});
	}
	function defaultFormValueProvider(selectedOptions) {
	if (selectedOptions.length === 0) {
	return '';
	}
	if (selectedOptions.every(o => typeof o.value === 'string' \|\| typeof o.value === 'number' \|\| typeof o.value === 'boolean')) {
	return selectedOptions.map(o => String(o.value));
	}
	return JSON.stringify(selectedOptions.map(o => o.value));
	}
	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'],
	popper: ['popper']
	};
	return composeClasses(slots, getSelectUnstyledUtilityClass, {});
	}

	/**
	* The foundation for building custom-styled multi-selection select components.
	*
	* Demos:
	*
	* - [Unstyled Select](https://mui.com/base/react-select/)
	*
	* API:
	*
	* - [MultiSelectUnstyled API](https://mui.com/base/api/multi-select-unstyled/)
	*/
	const MultiSelectUnstyled = /#__PURE__/React.forwardRef(function MultiSelectUnstyled(props, forwardedRef) {
	const {
	autoFocus,
	children,
	component,
	defaultListboxOpen = false,
	defaultValue = [],
	disabled: disabledProp,
	getSerializedValue = defaultFormValueProvider,
	listboxId,
	listboxOpen: listboxOpenProp,
	name,
	onChange,
	onListboxOpenChange,
	optionStringifier = defaultOptionStringifier,
	renderValue: renderValueProp,
	slotProps = {},
	slots = {},
	value: valueProp
	} = props,
	other = _objectWithoutPropertiesLoose(props, _excluded);
	const renderValue = renderValueProp ?? defaultRenderMultipleValues;
	const [groupedOptions, setGroupedOptions] = React.useState([]);
	const options = React.useMemo(() => flattenOptionGroups(groupedOptions), [groupedOptions]);
	const [listboxOpen, setListboxOpen] = useControlled({
	controlled: listboxOpenProp,
	default: defaultListboxOpen,
	name: 'MultiSelectUnstyled',
	state: 'listboxOpen'
	});
	React.useEffect(() => {
	setGroupedOptions(getOptionsFromChildren(children));
	}, [children]);
	const [buttonDefined, setButtonDefined] = React.useState(false);
	const buttonRef = React.useRef(null);
	const listboxRef = React.useRef(null);
	const Button = component ?? slots.root ?? 'button';
	const ListboxRoot = slots.listbox ?? 'ul';
	const Popper = slots.popper ?? PopperUnstyled;
	const handleButtonRefChange = React.useCallback(element => {
	setButtonDefined(element != null);
	}, []);
	const handleButtonRef = useForkRef(forwardedRef, buttonRef, handleButtonRefChange);
	React.useEffect(() => {
	if (autoFocus) {
	buttonRef.current.focus();
	}
	}, [autoFocus]);
	const handleOpenChange = isOpen => {
	setListboxOpen(isOpen);
	onListboxOpenChange?.(isOpen);
	};
	const {
	buttonActive,
	buttonFocusVisible,
	disabled,
	getButtonProps,
	getListboxProps,
	getOptionProps,
	getOptionState,
	value
	} = useSelect({
	buttonRef: handleButtonRef,
	defaultValue,
	disabled: disabledProp,
	listboxId,
	multiple: true,
	onChange,
	onOpenChange: handleOpenChange,
	open: listboxOpen,
	options,
	optionStringifier,
	value: valueProp
	});
	const ownerState = _extends({}, props, {
	active: buttonActive,
	defaultListboxOpen,
	disabled,
	focusVisible: buttonFocusVisible,
	open: listboxOpen,
	renderValue,
	value
	});
	const classes = useUtilityClasses(ownerState);
	const selectedOptions = React.useMemo(() => {
	if (value == null) {
	return [];
	}
	return options.filter(o => value.includes(o.value));
	}, [options, value]);
	const buttonProps = useSlotProps({
	elementType: Button,
	getSlotProps: getButtonProps,
	externalSlotProps: slotProps.root,
	externalForwardedProps: other,
	ownerState,
	className: classes.root
	});
	const listboxProps = useSlotProps({
	elementType: ListboxRoot,
	getSlotProps: getListboxProps,
	externalSlotProps: slotProps.listbox,
	additionalProps: {
	ref: listboxRef
	},
	ownerState,
	className: classes.listbox
	});
	const popperProps = useSlotProps({
	elementType: Popper,
	externalSlotProps: slotProps.popper,
	additionalProps: {
	anchorEl: buttonRef.current,
	disablePortal: true,
	open: listboxOpen,
	placement: 'bottom-start',
	role: undefined
	},
	ownerState,
	className: classes.popper
	});
	const context = React.useMemo(() => ({
	getOptionProps,
	getOptionState,
	listboxRef
	}), [getOptionProps, getOptionState]);
	return /#__PURE__/_jsxs(React.Fragment, {
	children: [/#__PURE__/_jsx(Button, _extends({}, buttonProps, {
	children: renderValue(selectedOptions)
	})), buttonDefined && /#__PURE__/_jsx(Popper, _extends({}, popperProps, {
	children: /#__PURE__/_jsx(ListboxRoot, _extends({}, listboxProps, {
	children: /#__PURE__/_jsx(SelectUnstyledContext.Provider, {
	value: context,
	children: children
	})
	}))
	})), name && /#__PURE__/_jsx("input", {
	type: "hidden",
	name: name,
	value: getSerializedValue(selectedOptions)
	})]
	});
	});
	process.env.NODE_ENV !== "production" ? MultiSelectUnstyled.propTypes /* remove-proptypes */ = {
	// ----------------------------- Warning --------------------------------
	// \| These PropTypes are generated from the TypeScript type definitions \|
	// \| To update them edit TypeScript types and run "yarn proptypes" \|
	// ----------------------------------------------------------------------
	/**
	* If `true`, the select element is focused during the first mount
	* @default false
	*/
	autoFocus: PropTypes.bool,
	/**
	* @ignore
	*/
	children: PropTypes.node,
	/**
	* The component used for the root node.
	* Either a string to use a HTML element or a component.
	*/
	component: PropTypes.elementType,
	/**
	* If `true`, the select will be initially open.
	* @default false
	*/
	defaultListboxOpen: PropTypes.bool,
	/**
	* The default selected values. Use when the component is not controlled.
	* @default []
	*/
	defaultValue: PropTypes.array,
	/**
	* If `true`, the select is disabled.
	* @default false
	*/
	disabled: PropTypes.bool,
	/**
	* A function to convert the currently selected values to a type accepted by HTML input.
	* Used to set a value of a hidden input associated with the select,
	* so that the selected values can be posted with a form.
	*/
	getSerializedValue: PropTypes.func,
	/**
	* `id` attribute of the listbox element.
	* Also used to derive the `id` attributes of options.
	*/
	listboxId: PropTypes.string,
	/**
	* Controls the open state of the select's listbox.
	* @default undefined
	*/
	listboxOpen: PropTypes.bool,
	/**
	* Name of the element. For example used by the server to identify the fields in form submits.
	* If the name is provided, the component will render a hidden input element that can be submitted to a server.
	*/
	name: PropTypes.string,
	/**
	* Callback fired when an option is selected.
	*/
	onChange: PropTypes.func,
	/**
	* Callback fired when the component requests to be opened.
	* Use in controlled mode (see listboxOpen).
	*/
	onListboxOpenChange: PropTypes.func,
	/**
	* 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
	*/
	optionStringifier: PropTypes.func,
	/**
	* Function that customizes the rendering of the selected values.
	*/
	renderValue: PropTypes.func,
	/**
	* The props used for each slot inside the MultiSelect.
	* @default {}
	*/
	slotProps: PropTypes.shape({
	listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
	popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
	root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
	}),
	/**
	* The components used for each slot inside the MultiSelect.
	* Either a string to use a HTML element or a component.
	* @default {}
	*/
	slots: PropTypes /* @typescript-to-proptypes-ignore */.shape({
	listbox: PropTypes.elementType,
	popper: PropTypes.elementType,
	root: PropTypes.elementType
	}),
	/**
	* The selected values.
	* Set to an empty array to deselect all options.
	*/
	value: PropTypes.array
	} : void 0;
	export default MultiSelectUnstyled;

Event Timeline