@basic-ui/material 1.0.0-alpha.32 → 1.0.0-alpha.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/index.js +92 -21
- package/build/cjs/index.js.map +1 -1
- package/build/esm/BottomSheet/BottomSheet.d.ts +1 -1
- package/build/esm/BottomSheet/BottomSheetSurface.d.ts +1 -1
- package/build/esm/Button/Button.d.ts +1 -1
- package/build/esm/CheckBox/CheckBox.d.ts +1 -1
- package/build/esm/Chip/ButtonChip.d.ts +1 -1
- package/build/esm/Chip/ChoiceChip.d.ts +1 -1
- package/build/esm/Combobox/Combobox.d.ts +7 -7
- package/build/esm/Dialog/Dialog.d.ts +1 -1
- package/build/esm/Dialog/DialogBackdrop.d.ts +1 -1
- package/build/esm/Dialog/DialogSurface.d.ts +1 -1
- package/build/esm/Menu/Menu.d.ts +5 -5
- package/build/esm/NavRail/NavRailItem.d.ts +3 -3
- package/build/esm/RadioButton/RadioGroup.d.ts +1 -1
- package/build/esm/Select/CustomContainerExample.d.ts +3 -0
- package/build/esm/Select/CustomContainerExample.js +59 -0
- package/build/esm/Select/CustomContainerExample.js.map +1 -0
- package/build/esm/Select/Select.d.ts +21 -7
- package/build/esm/Select/Select.js +52 -10
- package/build/esm/Select/Select.js.map +1 -1
- package/build/esm/Select/context.d.ts +5 -4
- package/build/esm/Select/context.js +2 -1
- package/build/esm/Select/context.js.map +1 -1
- package/build/esm/Select/defaultRender.d.ts +2 -1
- package/build/esm/Select/defaultRender.js +33 -4
- package/build/esm/Select/defaultRender.js.map +1 -1
- package/build/esm/SelectItem/SelectItem.d.ts +7 -3
- package/build/esm/SelectItem/SelectItem.js +14 -3
- package/build/esm/SelectItem/SelectItem.js.map +1 -1
- package/build/esm/Slider/Slider.d.ts +6 -6
- package/build/esm/Snackbar/Snackbar.d.ts +1 -1
- package/build/esm/Switch/Switch.d.ts +1 -1
- package/build/esm/Tab/Tab.d.ts +1 -1
- package/build/esm/Tab/TabList.d.ts +1 -1
- package/build/esm/Tab/TabPanel.d.ts +1 -1
- package/build/esm/TabIndicator/TabIndicator.d.ts +1 -1
- package/build/esm/Table/TableHead.d.ts +1 -1
- package/build/esm/TextField/FilledContainer.d.ts +4 -1
- package/build/esm/TextField/FilledContainer.js +5 -5
- package/build/esm/TextField/FilledContainer.js.map +1 -1
- package/build/esm/TextField/TextField.d.ts +1 -1
- package/build/esm/ThemeExplorer/ThemeBuilder.js +13 -2
- package/build/esm/ThemeExplorer/ThemeBuilder.js.map +1 -1
- package/build/esm/ThemeExplorer/ThemeColors.js +33 -15
- package/build/esm/ThemeExplorer/ThemeColors.js.map +1 -1
- package/build/esm/ThemeExplorer/components.d.ts +1 -1
- package/build/esm/ThemeExplorer/components.js +11 -13
- package/build/esm/ThemeExplorer/components.js.map +1 -1
- package/build/esm/ThemeExplorer/makeColorScheme.d.ts +32 -4
- package/build/esm/ThemeExplorer/makeColorScheme.js +41 -8
- package/build/esm/ThemeExplorer/makeColorScheme.js.map +1 -1
- package/build/esm/Tooltip/Tooltip.d.ts +1 -1
- package/build/esm/theme/theme.js +2 -2
- package/build/esm/theme/theme.js.map +1 -1
- package/build/tsconfig-build.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/Select/CustomContainerExample.tsx +59 -0
- package/src/Select/Select.story.tsx +68 -69
- package/src/Select/Select.tsx +99 -27
- package/src/Select/SelectMultiple.story.tsx +215 -0
- package/src/Select/context.ts +5 -3
- package/src/Select/defaultRender.tsx +49 -0
- package/src/SelectItem/SelectItem.tsx +68 -46
- package/src/TextField/FilledContainer.tsx +6 -5
- package/src/ThemeExplorer/ThemeBuilder.tsx +16 -5
- package/src/ThemeExplorer/ThemeColors.tsx +39 -15
- package/src/ThemeExplorer/components.tsx +12 -20
- package/src/ThemeExplorer/makeColorScheme.tsx +39 -6
- package/src/theme/theme.ts +2 -2
- package/src/Select/defaultRender.ts +0 -19
|
@@ -1,18 +1,32 @@
|
|
|
1
|
-
import type { SelectHTMLAttributes, ReactNode, ChangeEvent } from 'react';
|
|
1
|
+
import type { SelectHTMLAttributes, ReactNode, ChangeEvent, ComponentType, ReactElement, Ref } from 'react';
|
|
2
2
|
import type { Theme } from '../theme';
|
|
3
|
+
import type { FilledContainerProps } from '../TextField/FilledContainer';
|
|
3
4
|
import type { BoxProps } from '../Box';
|
|
4
|
-
|
|
5
|
+
interface BaseSelectProps extends Omit<BoxProps<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>, 'value' | 'defaultValue' | 'onChange'> {
|
|
5
6
|
variant?: 'outlined' | 'filled';
|
|
6
7
|
color?: 'primary' | 'secondary';
|
|
7
8
|
label?: ReactNode;
|
|
8
9
|
helperText?: string;
|
|
9
|
-
defaultValue?: string;
|
|
10
|
-
value?: string;
|
|
11
10
|
native?: boolean;
|
|
12
11
|
theme?: Theme;
|
|
13
12
|
error?: boolean | string;
|
|
14
|
-
onChange?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;
|
|
15
|
-
renderValue?: (value?: string) => string | undefined;
|
|
16
13
|
leadingIcon?: ReactNode;
|
|
14
|
+
CustomContainer?: ComponentType<FilledContainerProps>;
|
|
17
15
|
}
|
|
18
|
-
export declare
|
|
16
|
+
export declare type SelectProps<ValueType extends string> = BaseSelectProps & ({
|
|
17
|
+
multiple?: false | undefined;
|
|
18
|
+
value?: ValueType;
|
|
19
|
+
defaultValue?: ValueType;
|
|
20
|
+
onChange?: (e: ChangeEvent<HTMLSelectElement>, value: ValueType) => void;
|
|
21
|
+
renderValue?: (value?: ValueType | '') => ReactNode | undefined;
|
|
22
|
+
} | {
|
|
23
|
+
multiple: true;
|
|
24
|
+
value?: ValueType[];
|
|
25
|
+
defaultValue?: ValueType[];
|
|
26
|
+
onChange?: (e: ChangeEvent<HTMLSelectElement>, value: ValueType[]) => void;
|
|
27
|
+
renderValue?: (value?: ValueType[]) => ReactNode[];
|
|
28
|
+
});
|
|
29
|
+
export declare const Select: <ValueType extends string>(p: SelectProps<ValueType> & {
|
|
30
|
+
ref?: Ref<HTMLSelectElement | HTMLButtonElement> | undefined;
|
|
31
|
+
}) => ReactElement;
|
|
32
|
+
export {};
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
-
var _excluded = ["id", "name", "variant", "color", "value", "defaultValue", "disabled", "error", "label", "placeholder", "helperText", "onChange", "onFocus", "onBlur", "native", "children", "renderValue", "leadingIcon"];
|
|
5
|
-
import { forwardRef, useState, useRef, useEffect, useId } from 'react';
|
|
5
|
+
var _excluded = ["id", "name", "variant", "color", "value", "defaultValue", "disabled", "error", "label", "placeholder", "helperText", "onChange", "onFocus", "onBlur", "native", "multiple", "children", "renderValue", "leadingIcon", "CustomContainer"];
|
|
6
|
+
import { useMemo, forwardRef, useState, useRef, useEffect, useId } from 'react';
|
|
6
7
|
import { wrapEvent, assignMultipleRefs, useControlledState } from '@basic-ui/core';
|
|
7
8
|
import { useTheme } from '../theme';
|
|
8
9
|
import { Select as SelectComp, SelectButton } from './styledComponents';
|
|
@@ -12,7 +13,7 @@ import { OutlinedContainer } from '../TextField/OutlinedContainer';
|
|
|
12
13
|
import { SelectProvider } from './context';
|
|
13
14
|
import { Menu, MenuPopover, MenuList } from '../Menu';
|
|
14
15
|
import { SelectIcon } from './SelectIcon';
|
|
15
|
-
import { makeDefaultRender } from './defaultRender';
|
|
16
|
+
import { makeDefaultMultipleRender, makeDefaultRender } from './defaultRender';
|
|
16
17
|
import { Box } from '../Box';
|
|
17
18
|
import { IconContainer } from '../TextField/IconContainer';
|
|
18
19
|
import { listItemStyle } from '../ListItem';
|
|
@@ -33,7 +34,7 @@ export var Select = /*#__PURE__*/forwardRef(function Select(props, forwardedRef)
|
|
|
33
34
|
color = _props$color === void 0 ? 'primary' : _props$color,
|
|
34
35
|
valueProp = props.value,
|
|
35
36
|
_props$defaultValue = props.defaultValue,
|
|
36
|
-
defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,
|
|
37
|
+
defaultValue = _props$defaultValue === void 0 ? props.multiple ? [] : '' : _props$defaultValue,
|
|
37
38
|
disabled = props.disabled,
|
|
38
39
|
_props$error = props.error,
|
|
39
40
|
error = _props$error === void 0 ? false : _props$error,
|
|
@@ -46,10 +47,13 @@ export var Select = /*#__PURE__*/forwardRef(function Select(props, forwardedRef)
|
|
|
46
47
|
onBlur = props.onBlur,
|
|
47
48
|
_props$native = props.native,
|
|
48
49
|
native = _props$native === void 0 ? false : _props$native,
|
|
50
|
+
_props$multiple = props.multiple,
|
|
51
|
+
multiple = _props$multiple === void 0 ? false : _props$multiple,
|
|
49
52
|
children = props.children,
|
|
50
53
|
renderValueProp = props.renderValue,
|
|
51
54
|
_props$leadingIcon = props.leadingIcon,
|
|
52
55
|
leadingIcon = _props$leadingIcon === void 0 ? null : _props$leadingIcon,
|
|
56
|
+
overwrittenContainer = props.CustomContainer,
|
|
53
57
|
otherProps = _objectWithoutProperties(props, _excluded);
|
|
54
58
|
|
|
55
59
|
var _useControlledState = useControlledState(valueProp, onChangeProp, defaultValue, function (setState) {
|
|
@@ -61,6 +65,10 @@ export var Select = /*#__PURE__*/forwardRef(function Select(props, forwardedRef)
|
|
|
61
65
|
value = _useControlledState2[0],
|
|
62
66
|
onChange = _useControlledState2[1];
|
|
63
67
|
|
|
68
|
+
if (multiple && !Array.isArray(value)) {
|
|
69
|
+
console.warn('Warning: The `value` prop supplied to <Select> must be an array if `multiple` is true.');
|
|
70
|
+
}
|
|
71
|
+
|
|
64
72
|
var _useState = useState(false),
|
|
65
73
|
_useState2 = _slicedToArray(_useState, 2),
|
|
66
74
|
hasFocus = _useState2[0],
|
|
@@ -75,7 +83,7 @@ export var Select = /*#__PURE__*/forwardRef(function Select(props, forwardedRef)
|
|
|
75
83
|
|
|
76
84
|
var fallbackId = useId();
|
|
77
85
|
var theme = useTheme();
|
|
78
|
-
var Container = componentMap[variant] || OutlinedContainer;
|
|
86
|
+
var Container = overwrittenContainer || componentMap[variant] || OutlinedContainer;
|
|
79
87
|
|
|
80
88
|
var handleFocus = function handleFocus() {
|
|
81
89
|
setHasFocus(true);
|
|
@@ -90,7 +98,27 @@ export var Select = /*#__PURE__*/forwardRef(function Select(props, forwardedRef)
|
|
|
90
98
|
};
|
|
91
99
|
|
|
92
100
|
var handleOnChange = function handleOnChange(e) {
|
|
93
|
-
|
|
101
|
+
var selectedValue = native ? e.target.value : e.currentTarget.dataset.value;
|
|
102
|
+
|
|
103
|
+
if (multiple && Array.isArray(value)) {
|
|
104
|
+
if (value.find(function (c) {
|
|
105
|
+
return c === selectedValue;
|
|
106
|
+
})) {
|
|
107
|
+
onChange && onChange(e, value.filter(function (c) {
|
|
108
|
+
return c !== selectedValue;
|
|
109
|
+
}));
|
|
110
|
+
} else {
|
|
111
|
+
onChange && onChange(e, [].concat(_toConsumableArray(value), [selectedValue]));
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
var isMac = Boolean(/mac os|ios/i.test(navigator.userAgent));
|
|
115
|
+
|
|
116
|
+
if (e.key === ' ' || isMac && e.metaKey || !isMac && e.ctrlKey) {
|
|
117
|
+
e.preventDefault();
|
|
118
|
+
}
|
|
119
|
+
} else {
|
|
120
|
+
onChange && onChange(e, selectedValue);
|
|
121
|
+
}
|
|
94
122
|
};
|
|
95
123
|
|
|
96
124
|
var hasError = Boolean(error);
|
|
@@ -98,8 +126,20 @@ export var Select = /*#__PURE__*/forwardRef(function Select(props, forwardedRef)
|
|
|
98
126
|
var id = idProp || fallbackId;
|
|
99
127
|
var inputId = "".concat(id, "-text-field");
|
|
100
128
|
var helperTextId = helperText ? "".concat(id, "-helper-text") : undefined;
|
|
101
|
-
var
|
|
102
|
-
|
|
129
|
+
var defaultRenderFn = useMemo(function () {
|
|
130
|
+
return multiple ? makeDefaultMultipleRender(children) : makeDefaultRender(children);
|
|
131
|
+
}, [children, multiple]);
|
|
132
|
+
var renderValue = renderValueProp || defaultRenderFn;
|
|
133
|
+
|
|
134
|
+
function hasAnySelected() {
|
|
135
|
+
if (multiple) {
|
|
136
|
+
return value.length > 0;
|
|
137
|
+
} else {
|
|
138
|
+
return value !== '';
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
var labelIsFloating = hasFocus || open || hasAnySelected();
|
|
103
143
|
var Comp = native ? SelectComp : SelectButton;
|
|
104
144
|
useEffect(function () {
|
|
105
145
|
// right after mounting, if the default value in the select element
|
|
@@ -114,7 +154,8 @@ export var Select = /*#__PURE__*/forwardRef(function Select(props, forwardedRef)
|
|
|
114
154
|
value: {
|
|
115
155
|
native: native,
|
|
116
156
|
onSelect: handleOnChange,
|
|
117
|
-
value: value
|
|
157
|
+
value: value,
|
|
158
|
+
multiple: multiple
|
|
118
159
|
},
|
|
119
160
|
children: /*#__PURE__*/_jsxs(Box, {
|
|
120
161
|
display: "inline-flex",
|
|
@@ -131,7 +172,7 @@ export var Select = /*#__PURE__*/forwardRef(function Select(props, forwardedRef)
|
|
|
131
172
|
labelIsFloating: labelIsFloating,
|
|
132
173
|
inputId: inputId,
|
|
133
174
|
hasFocus: hasFocus,
|
|
134
|
-
disabled: disabled,
|
|
175
|
+
disabled: disabled !== null && disabled !== void 0 ? disabled : false,
|
|
135
176
|
forceActive: open,
|
|
136
177
|
error: hasError,
|
|
137
178
|
leadingIcon: Boolean(leadingIcon),
|
|
@@ -157,6 +198,7 @@ export var Select = /*#__PURE__*/forwardRef(function Select(props, forwardedRef)
|
|
|
157
198
|
hasLabel: !!label,
|
|
158
199
|
leadingIcon: Boolean(leadingIcon),
|
|
159
200
|
name: native ? name : undefined,
|
|
201
|
+
multiple: native ? multiple : undefined,
|
|
160
202
|
trailingIcon: true
|
|
161
203
|
}, otherProps), {}, {
|
|
162
204
|
children: native ? children : renderValue(value)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","names":["forwardRef","useState","useRef","useEffect","useId","wrapEvent","assignMultipleRefs","useControlledState","useTheme","Select","SelectComp","SelectButton","FilledContainer","HelperText","OutlinedContainer","SelectProvider","Menu","MenuPopover","MenuList","SelectIcon","makeDefaultRender","Box","IconContainer","listItemStyle","componentMap","outlined","filled","props","forwardedRef","idProp","id","name","variant","color","valueProp","value","defaultValue","disabled","error","label","placeholder","helperTextProp","helperText","onChangeProp","onChange","onFocus","onBlur","native","children","renderValueProp","renderValue","leadingIcon","otherProps","setState","e","v","hasFocus","setHasFocus","buttonRef","open","setOpen","fallbackId","theme","Container","handleFocus","handleBlur","handleToggle","isOpen","handleOnChange","target","currentTarget","dataset","hasError","Boolean","inputId","helperTextId","undefined","labelIsFloating","Comp","current","onSelect","minWidth","offsetWidth"],"sources":["../../../src/Select/Select.tsx"],"sourcesContent":["import type {\n SelectHTMLAttributes,\n ReactNode,\n ChangeEvent,\n ComponentType,\n} from 'react';\nimport { forwardRef, useState, useRef, useEffect, useId } from 'react';\nimport {\n wrapEvent,\n assignMultipleRefs,\n useControlledState,\n} from '@basic-ui/core';\n\nimport type { Theme } from '../theme';\nimport { useTheme } from '../theme';\nimport { Select as SelectComp, SelectButton } from './styledComponents';\nimport { FilledContainer } from '../TextField/FilledContainer';\nimport { HelperText } from '../TextField/HelperText';\nimport { OutlinedContainer } from '../TextField/OutlinedContainer';\nimport { SelectProvider } from './context';\nimport { Menu, MenuPopover, MenuList } from '../Menu';\nimport { SelectIcon } from './SelectIcon';\nimport { makeDefaultRender } from './defaultRender';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { IconContainer } from '../TextField/IconContainer';\nimport { listItemStyle } from '../ListItem';\n\nconst componentMap = {\n outlined: OutlinedContainer,\n filled: FilledContainer,\n};\n\nexport interface SelectProps\n extends Omit<\n BoxProps<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>,\n 'value' | 'defaultValue' | 'onChange'\n > {\n variant?: 'outlined' | 'filled';\n color?: 'primary' | 'secondary';\n label?: ReactNode;\n helperText?: string;\n defaultValue?: string;\n value?: string;\n native?: boolean;\n theme?: Theme;\n error?: boolean | string;\n onChange?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;\n renderValue?: (value?: string) => string | undefined;\n leadingIcon?: ReactNode;\n}\n\nexport const Select = forwardRef<\n HTMLSelectElement | HTMLButtonElement,\n SelectProps\n>(function Select(props, forwardedRef) {\n const {\n id: idProp,\n name,\n variant = 'outlined',\n color = 'primary',\n value: valueProp,\n defaultValue = '',\n disabled,\n error = false,\n label = null,\n placeholder,\n helperText: helperTextProp,\n onChange: onChangeProp,\n onFocus,\n onBlur,\n native = false,\n children,\n renderValue: renderValueProp,\n leadingIcon = null,\n ...otherProps\n } = props;\n const [value, onChange] = useControlledState(\n valueProp,\n onChangeProp,\n defaultValue,\n (setState) => (e, v) => {\n setState(v);\n }\n );\n const [hasFocus, setHasFocus] = useState(false);\n const buttonRef = useRef<HTMLButtonElement | HTMLSelectElement>();\n const [open, setOpen] = useState(false);\n const fallbackId = useId();\n const theme = useTheme();\n\n const Container = componentMap[variant] || OutlinedContainer;\n\n const handleFocus = () => {\n setHasFocus(true);\n };\n\n const handleBlur = () => {\n setHasFocus(false);\n };\n\n const handleToggle = (e: unknown, isOpen: boolean) => {\n setOpen(isOpen);\n };\n\n const handleOnChange = (e: any) => {\n onChange &&\n onChange(\n e as any,\n native ? e.target.value : e.currentTarget.dataset.value\n );\n };\n\n const hasError = Boolean(error);\n const helperText = typeof error === 'string' ? error : helperTextProp;\n\n const id = idProp || fallbackId;\n const inputId = `${id}-text-field`;\n const helperTextId = helperText ? `${id}-helper-text` : undefined;\n\n const renderValue = renderValueProp || makeDefaultRender(children);\n\n const labelIsFloating = hasFocus || open || renderValue(value) !== undefined;\n\n const Comp: ComponentType<any> = native\n ? (SelectComp as any)\n : (SelectButton as any);\n\n useEffect(() => {\n // right after mounting, if the default value in the select element\n // is different than the value we have stored in state we need to\n // update our state to reflect that.\n if (native && buttonRef.current && buttonRef.current.value !== value) {\n onChange && onChange({} as any, buttonRef.current.value);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <SelectProvider value={{ native, onSelect: handleOnChange, value }}>\n <Box display=\"inline-flex\" flexDirection=\"column\" width=\"100%\">\n {!native && <input type=\"hidden\" name={name} value={value} />}\n <Container\n theme={theme}\n label={label}\n color={color}\n labelIsFloating={labelIsFloating}\n inputId={inputId}\n hasFocus={hasFocus}\n disabled={disabled}\n forceActive={open}\n error={hasError}\n leadingIcon={Boolean(leadingIcon)}\n >\n <Menu onChange={handleToggle} open={open}>\n {leadingIcon && (\n <IconContainer position=\"start\">{leadingIcon}</IconContainer>\n )}\n <Comp\n ref={assignMultipleRefs(forwardedRef, buttonRef)}\n variant={variant}\n id={inputId}\n onFocus={wrapEvent(onFocus, handleFocus)}\n onBlur={wrapEvent(onBlur, handleBlur)}\n onChange={native ? handleOnChange : undefined}\n value={native ? value : undefined}\n theme={theme}\n placeholder={placeholder}\n disabled={disabled}\n aria-disabled={disabled ? 'true' : undefined}\n aria-describedby={helperTextId}\n hasLabel={!!label}\n leadingIcon={Boolean(leadingIcon)}\n name={native ? name : undefined}\n trailingIcon={true}\n {...otherProps}\n >\n {native ? children : renderValue(value)}\n </Comp>\n {!native && (\n <MenuPopover usePortal>\n <MenuList\n defaultActiveItemValue={value}\n style={{\n minWidth: buttonRef?.current?.offsetWidth,\n }}\n role=\"listbox\"\n __css={{\n '& [data-menu-item=\"\"]': {\n ...listItemStyle('primary'),\n },\n }}\n >\n {children}\n </MenuList>\n </MenuPopover>\n )}\n </Menu>\n <SelectIcon open={open} />\n </Container>\n\n <HelperText\n disabled={disabled}\n id={helperTextId}\n leftSide={helperText}\n error={hasError}\n />\n </Box>\n </SelectProvider>\n );\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.js","names":["useMemo","forwardRef","useState","useRef","useEffect","useId","wrapEvent","assignMultipleRefs","useControlledState","useTheme","Select","SelectComp","SelectButton","FilledContainer","HelperText","OutlinedContainer","SelectProvider","Menu","MenuPopover","MenuList","SelectIcon","makeDefaultMultipleRender","makeDefaultRender","Box","IconContainer","listItemStyle","componentMap","outlined","filled","props","forwardedRef","idProp","id","name","variant","color","valueProp","value","defaultValue","multiple","disabled","error","label","placeholder","helperTextProp","helperText","onChangeProp","onChange","onFocus","onBlur","native","children","renderValueProp","renderValue","leadingIcon","overwrittenContainer","CustomContainer","otherProps","setState","e","v","Array","isArray","console","warn","hasFocus","setHasFocus","buttonRef","open","setOpen","fallbackId","theme","Container","handleFocus","handleBlur","handleToggle","isOpen","handleOnChange","selectedValue","target","currentTarget","dataset","find","c","filter","isMac","Boolean","test","navigator","userAgent","key","metaKey","ctrlKey","preventDefault","hasError","inputId","helperTextId","undefined","defaultRenderFn","hasAnySelected","length","labelIsFloating","Comp","current","onSelect","minWidth","offsetWidth"],"sources":["../../../src/Select/Select.tsx"],"sourcesContent":["import type {\n SelectHTMLAttributes,\n ReactNode,\n ChangeEvent,\n ComponentType,\n ForwardedRef,\n ReactElement,\n Ref,\n} from 'react';\nimport { useMemo, forwardRef, useState, useRef, useEffect, useId } from 'react';\nimport {\n wrapEvent,\n assignMultipleRefs,\n useControlledState,\n} from '@basic-ui/core';\n\nimport type { Theme } from '../theme';\nimport { useTheme } from '../theme';\nimport { Select as SelectComp, SelectButton } from './styledComponents';\nimport type { FilledContainerProps } from '../TextField/FilledContainer';\nimport { FilledContainer } from '../TextField/FilledContainer';\nimport { HelperText } from '../TextField/HelperText';\nimport { OutlinedContainer } from '../TextField/OutlinedContainer';\nimport { SelectProvider } from './context';\nimport { Menu, MenuPopover, MenuList } from '../Menu';\nimport { SelectIcon } from './SelectIcon';\nimport { makeDefaultMultipleRender, makeDefaultRender } from './defaultRender';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { IconContainer } from '../TextField/IconContainer';\nimport { listItemStyle } from '../ListItem';\n\nconst componentMap = {\n outlined: OutlinedContainer,\n filled: FilledContainer,\n};\n\ninterface BaseSelectProps\n extends Omit<\n BoxProps<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>,\n 'value' | 'defaultValue' | 'onChange'\n > {\n variant?: 'outlined' | 'filled';\n color?: 'primary' | 'secondary';\n label?: ReactNode;\n helperText?: string;\n native?: boolean;\n theme?: Theme;\n error?: boolean | string;\n leadingIcon?: ReactNode;\n CustomContainer?: ComponentType<FilledContainerProps>;\n}\n\nexport type SelectProps<ValueType extends string> = BaseSelectProps &\n (\n | {\n multiple?: false | undefined;\n value?: ValueType;\n defaultValue?: ValueType;\n onChange?: (\n e: ChangeEvent<HTMLSelectElement>,\n value: ValueType\n ) => void;\n renderValue?: (value?: ValueType | '') => ReactNode | undefined;\n }\n | {\n multiple: true;\n value?: ValueType[];\n defaultValue?: ValueType[];\n onChange?: (\n e: ChangeEvent<HTMLSelectElement>,\n value: ValueType[]\n ) => void;\n renderValue?: (value?: ValueType[]) => ReactNode[];\n }\n );\n\nexport const Select = forwardRef(function Select<ValueType extends string>(\n props: SelectProps<ValueType>,\n forwardedRef: ForwardedRef<HTMLSelectElement | HTMLButtonElement>\n) {\n const {\n id: idProp,\n name,\n variant = 'outlined',\n color = 'primary',\n value: valueProp,\n defaultValue = props.multiple ? [] : ('' as const),\n disabled,\n error = false,\n label = null,\n placeholder,\n helperText: helperTextProp,\n onChange: onChangeProp,\n onFocus,\n onBlur,\n native = false,\n multiple = false,\n children,\n renderValue: renderValueProp,\n leadingIcon = null,\n CustomContainer: overwrittenContainer,\n ...otherProps\n } = props;\n const [value, onChange] = useControlledState(\n valueProp,\n onChangeProp as (\n e: ChangeEvent<HTMLSelectElement>,\n value: ValueType | ValueType[]\n ) => void,\n defaultValue,\n (setState) => (e, v: ValueType | ValueType[]) => {\n setState(v);\n }\n );\n if (multiple && !Array.isArray(value)) {\n console.warn(\n 'Warning: The `value` prop supplied to <Select> must be an array if `multiple` is true.'\n );\n }\n\n const [hasFocus, setHasFocus] = useState(false);\n const buttonRef = useRef<HTMLButtonElement | HTMLSelectElement>();\n const [open, setOpen] = useState(false);\n const fallbackId = useId();\n const theme = useTheme();\n\n const Container =\n overwrittenContainer || componentMap[variant] || OutlinedContainer;\n\n const handleFocus = () => {\n setHasFocus(true);\n };\n\n const handleBlur = () => {\n setHasFocus(false);\n };\n\n const handleToggle = (e: unknown, isOpen: boolean) => {\n setOpen(isOpen);\n };\n\n const handleOnChange = (e: any) => {\n const selectedValue = native\n ? e.target.value\n : e.currentTarget.dataset.value;\n\n if (multiple && Array.isArray(value)) {\n if (value.find((c) => c === selectedValue)) {\n onChange &&\n onChange(e as any, value.filter((c) => c !== selectedValue) as any);\n } else {\n onChange && onChange(e as any, [...value, selectedValue] as any);\n }\n\n const isMac = Boolean(/mac os|ios/i.test(navigator.userAgent));\n if (e.key === ' ' || (isMac && e.metaKey) || (!isMac && e.ctrlKey)) {\n e.preventDefault();\n }\n } else {\n onChange && onChange(e as any, selectedValue);\n }\n };\n\n const hasError = Boolean(error);\n const helperText = typeof error === 'string' ? error : helperTextProp;\n\n const id = idProp || fallbackId;\n const inputId = `${id}-text-field`;\n const helperTextId = helperText ? `${id}-helper-text` : undefined;\n\n const defaultRenderFn = useMemo(\n () =>\n multiple\n ? makeDefaultMultipleRender(children)\n : makeDefaultRender<ValueType>(children),\n [children, multiple]\n );\n const renderValue = renderValueProp || defaultRenderFn;\n\n function hasAnySelected() {\n if (multiple) {\n return value.length > 0;\n } else {\n return value !== '';\n }\n }\n const labelIsFloating = hasFocus || open || hasAnySelected();\n\n const Comp: ComponentType<any> = native\n ? (SelectComp as any)\n : (SelectButton as any);\n\n useEffect(() => {\n // right after mounting, if the default value in the select element\n // is different than the value we have stored in state we need to\n // update our state to reflect that.\n if (native && buttonRef.current && buttonRef.current.value !== value) {\n onChange && onChange({} as any, buttonRef.current.value as ValueType);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <SelectProvider\n value={{ native, onSelect: handleOnChange, value, multiple }}\n >\n <Box display=\"inline-flex\" flexDirection=\"column\" width=\"100%\">\n {!native && <input type=\"hidden\" name={name} value={value} />}\n <Container\n theme={theme}\n label={label}\n color={color}\n labelIsFloating={labelIsFloating}\n inputId={inputId}\n hasFocus={hasFocus}\n disabled={disabled ?? false}\n forceActive={open}\n error={hasError}\n leadingIcon={Boolean(leadingIcon)}\n >\n <Menu onChange={handleToggle} open={open}>\n {leadingIcon && (\n <IconContainer position=\"start\">{leadingIcon}</IconContainer>\n )}\n <Comp\n ref={assignMultipleRefs(forwardedRef, buttonRef)}\n variant={variant}\n id={inputId}\n onFocus={wrapEvent(onFocus, handleFocus)}\n onBlur={wrapEvent(onBlur, handleBlur)}\n onChange={native ? handleOnChange : undefined}\n value={native ? value : undefined}\n theme={theme}\n placeholder={placeholder}\n disabled={disabled}\n aria-disabled={disabled ? 'true' : undefined}\n aria-describedby={helperTextId}\n hasLabel={!!label}\n leadingIcon={Boolean(leadingIcon)}\n name={native ? name : undefined}\n multiple={native ? multiple : undefined}\n trailingIcon={true}\n {...otherProps}\n >\n {native ? children : renderValue(value as any)}\n </Comp>\n {!native && (\n <MenuPopover usePortal>\n <MenuList\n defaultActiveItemValue={value}\n style={{\n minWidth: buttonRef?.current?.offsetWidth,\n }}\n role=\"listbox\"\n __css={{\n '& [data-menu-item=\"\"]': {\n ...listItemStyle('primary'),\n },\n }}\n >\n {children}\n </MenuList>\n </MenuPopover>\n )}\n </Menu>\n <SelectIcon open={open} />\n </Container>\n\n <HelperText\n disabled={disabled}\n id={helperTextId}\n leftSide={helperText}\n error={hasError}\n />\n </Box>\n </SelectProvider>\n );\n}) as <ValueType extends string>(\n p: SelectProps<ValueType> & {\n ref?: Ref<HTMLSelectElement | HTMLButtonElement>;\n }\n) => ReactElement;\n"],"mappings":";;;;;AASA,SAASA,OAAT,EAAkBC,UAAlB,EAA8BC,QAA9B,EAAwCC,MAAxC,EAAgDC,SAAhD,EAA2DC,KAA3D,QAAwE,OAAxE;AACA,SACEC,SADF,EAEEC,kBAFF,EAGEC,kBAHF,QAIO,gBAJP;AAOA,SAASC,QAAT,QAAyB,UAAzB;AACA,SAASC,MAAM,IAAIC,UAAnB,EAA+BC,YAA/B,QAAmD,oBAAnD;AAEA,SAASC,eAAT,QAAgC,8BAAhC;AACA,SAASC,UAAT,QAA2B,yBAA3B;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AACA,SAASC,cAAT,QAA+B,WAA/B;AACA,SAASC,IAAT,EAAeC,WAAf,EAA4BC,QAA5B,QAA4C,SAA5C;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,yBAAT,EAAoCC,iBAApC,QAA6D,iBAA7D;AAEA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,aAAT,QAA8B,4BAA9B;AACA,SAASC,aAAT,QAA8B,aAA9B;;;AAEA,IAAMC,YAAY,GAAG;EACnBC,QAAQ,EAAEZ,iBADS;EAEnBa,MAAM,EAAEf;AAFW,CAArB;AA6CA,OAAO,IAAMH,MAAM,gBAAGT,UAAU,CAAC,SAASS,MAAT,CAC/BmB,KAD+B,EAE/BC,YAF+B,EAG/B;EAAA;;EACA,IACMC,MADN,GAsBIF,KAtBJ,CACEG,EADF;EAAA,IAEEC,IAFF,GAsBIJ,KAtBJ,CAEEI,IAFF;EAAA,qBAsBIJ,KAtBJ,CAGEK,OAHF;EAAA,IAGEA,OAHF,+BAGY,UAHZ;EAAA,mBAsBIL,KAtBJ,CAIEM,KAJF;EAAA,IAIEA,KAJF,6BAIU,SAJV;EAAA,IAKSC,SALT,GAsBIP,KAtBJ,CAKEQ,KALF;EAAA,0BAsBIR,KAtBJ,CAMES,YANF;EAAA,IAMEA,YANF,oCAMiBT,KAAK,CAACU,QAAN,GAAiB,EAAjB,GAAuB,EANxC;EAAA,IAOEC,QAPF,GAsBIX,KAtBJ,CAOEW,QAPF;EAAA,mBAsBIX,KAtBJ,CAQEY,KARF;EAAA,IAQEA,KARF,6BAQU,KARV;EAAA,mBAsBIZ,KAtBJ,CASEa,KATF;EAAA,IASEA,KATF,6BASU,IATV;EAAA,IAUEC,WAVF,GAsBId,KAtBJ,CAUEc,WAVF;EAAA,IAWcC,cAXd,GAsBIf,KAtBJ,CAWEgB,UAXF;EAAA,IAYYC,YAZZ,GAsBIjB,KAtBJ,CAYEkB,QAZF;EAAA,IAaEC,OAbF,GAsBInB,KAtBJ,CAaEmB,OAbF;EAAA,IAcEC,MAdF,GAsBIpB,KAtBJ,CAcEoB,MAdF;EAAA,oBAsBIpB,KAtBJ,CAeEqB,MAfF;EAAA,IAeEA,MAfF,8BAeW,KAfX;EAAA,sBAsBIrB,KAtBJ,CAgBEU,QAhBF;EAAA,IAgBEA,QAhBF,gCAgBa,KAhBb;EAAA,IAiBEY,QAjBF,GAsBItB,KAtBJ,CAiBEsB,QAjBF;EAAA,IAkBeC,eAlBf,GAsBIvB,KAtBJ,CAkBEwB,WAlBF;EAAA,yBAsBIxB,KAtBJ,CAmBEyB,WAnBF;EAAA,IAmBEA,WAnBF,mCAmBgB,IAnBhB;EAAA,IAoBmBC,oBApBnB,GAsBI1B,KAtBJ,CAoBE2B,eApBF;EAAA,IAqBKC,UArBL,4BAsBI5B,KAtBJ;;EAuBA,0BAA0BrB,kBAAkB,CAC1C4B,SAD0C,EAE1CU,YAF0C,EAM1CR,YAN0C,EAO1C,UAACoB,QAAD;IAAA,OAAc,UAACC,CAAD,EAAIC,CAAJ,EAAmC;MAC/CF,QAAQ,CAACE,CAAD,CAAR;IACD,CAFD;EAAA,CAP0C,CAA5C;EAAA;EAAA,IAAOvB,KAAP;EAAA,IAAcU,QAAd;;EAWA,IAAIR,QAAQ,IAAI,CAACsB,KAAK,CAACC,OAAN,CAAczB,KAAd,CAAjB,EAAuC;IACrC0B,OAAO,CAACC,IAAR,CACE,wFADF;EAGD;;EAED,gBAAgC9D,QAAQ,CAAC,KAAD,CAAxC;EAAA;EAAA,IAAO+D,QAAP;EAAA,IAAiBC,WAAjB;;EACA,IAAMC,SAAS,GAAGhE,MAAM,EAAxB;;EACA,iBAAwBD,QAAQ,CAAC,KAAD,CAAhC;EAAA;EAAA,IAAOkE,IAAP;EAAA,IAAaC,OAAb;;EACA,IAAMC,UAAU,GAAGjE,KAAK,EAAxB;EACA,IAAMkE,KAAK,GAAG9D,QAAQ,EAAtB;EAEA,IAAM+D,SAAS,GACbjB,oBAAoB,IAAI7B,YAAY,CAACQ,OAAD,CAApC,IAAiDnB,iBADnD;;EAGA,IAAM0D,WAAW,GAAG,SAAdA,WAAc,GAAM;IACxBP,WAAW,CAAC,IAAD,CAAX;EACD,CAFD;;EAIA,IAAMQ,UAAU,GAAG,SAAbA,UAAa,GAAM;IACvBR,WAAW,CAAC,KAAD,CAAX;EACD,CAFD;;EAIA,IAAMS,YAAY,GAAG,SAAfA,YAAe,CAAChB,CAAD,EAAaiB,MAAb,EAAiC;IACpDP,OAAO,CAACO,MAAD,CAAP;EACD,CAFD;;EAIA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAAClB,CAAD,EAAY;IACjC,IAAMmB,aAAa,GAAG5B,MAAM,GACxBS,CAAC,CAACoB,MAAF,CAAS1C,KADe,GAExBsB,CAAC,CAACqB,aAAF,CAAgBC,OAAhB,CAAwB5C,KAF5B;;IAIA,IAAIE,QAAQ,IAAIsB,KAAK,CAACC,OAAN,CAAczB,KAAd,CAAhB,EAAsC;MACpC,IAAIA,KAAK,CAAC6C,IAAN,CAAW,UAACC,CAAD;QAAA,OAAOA,CAAC,KAAKL,aAAb;MAAA,CAAX,CAAJ,EAA4C;QAC1C/B,QAAQ,IACNA,QAAQ,CAACY,CAAD,EAAWtB,KAAK,CAAC+C,MAAN,CAAa,UAACD,CAAD;UAAA,OAAOA,CAAC,KAAKL,aAAb;QAAA,CAAb,CAAX,CADV;MAED,CAHD,MAGO;QACL/B,QAAQ,IAAIA,QAAQ,CAACY,CAAD,+BAAetB,KAAf,IAAsByC,aAAtB,GAApB;MACD;;MAED,IAAMO,KAAK,GAAGC,OAAO,CAAC,cAAcC,IAAd,CAAmBC,SAAS,CAACC,SAA7B,CAAD,CAArB;;MACA,IAAI9B,CAAC,CAAC+B,GAAF,KAAU,GAAV,IAAkBL,KAAK,IAAI1B,CAAC,CAACgC,OAA7B,IAA0C,CAACN,KAAD,IAAU1B,CAAC,CAACiC,OAA1D,EAAoE;QAClEjC,CAAC,CAACkC,cAAF;MACD;IACF,CAZD,MAYO;MACL9C,QAAQ,IAAIA,QAAQ,CAACY,CAAD,EAAWmB,aAAX,CAApB;IACD;EACF,CApBD;;EAsBA,IAAMgB,QAAQ,GAAGR,OAAO,CAAC7C,KAAD,CAAxB;EACA,IAAMI,UAAU,GAAG,OAAOJ,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCG,cAAvD;EAEA,IAAMZ,EAAE,GAAGD,MAAM,IAAIuC,UAArB;EACA,IAAMyB,OAAO,aAAM/D,EAAN,gBAAb;EACA,IAAMgE,YAAY,GAAGnD,UAAU,aAAMb,EAAN,oBAAyBiE,SAAxD;EAEA,IAAMC,eAAe,GAAGlG,OAAO,CAC7B;IAAA,OACEuC,QAAQ,GACJlB,yBAAyB,CAAC8B,QAAD,CADrB,GAEJ7B,iBAAiB,CAAY6B,QAAZ,CAHvB;EAAA,CAD6B,EAK7B,CAACA,QAAD,EAAWZ,QAAX,CAL6B,CAA/B;EAOA,IAAMc,WAAW,GAAGD,eAAe,IAAI8C,eAAvC;;EAEA,SAASC,cAAT,GAA0B;IACxB,IAAI5D,QAAJ,EAAc;MACZ,OAAOF,KAAK,CAAC+D,MAAN,GAAe,CAAtB;IACD,CAFD,MAEO;MACL,OAAO/D,KAAK,KAAK,EAAjB;IACD;EACF;;EACD,IAAMgE,eAAe,GAAGpC,QAAQ,IAAIG,IAAZ,IAAoB+B,cAAc,EAA1D;EAEA,IAAMG,IAAwB,GAAGpD,MAAM,GAClCvC,UADkC,GAElCC,YAFL;EAIAR,SAAS,CAAC,YAAM;IACd;IACA;IACA;IACA,IAAI8C,MAAM,IAAIiB,SAAS,CAACoC,OAApB,IAA+BpC,SAAS,CAACoC,OAAV,CAAkBlE,KAAlB,KAA4BA,KAA/D,EAAsE;MACpEU,QAAQ,IAAIA,QAAQ,CAAC,EAAD,EAAYoB,SAAS,CAACoC,OAAV,CAAkBlE,KAA9B,CAApB;IACD,CANa,CAOd;;EACD,CARQ,EAQN,EARM,CAAT;EAUA,oBACE,KAAC,cAAD;IACE,KAAK,EAAE;MAAEa,MAAM,EAANA,MAAF;MAAUsD,QAAQ,EAAE3B,cAApB;MAAoCxC,KAAK,EAALA,KAApC;MAA2CE,QAAQ,EAARA;IAA3C,CADT;IAAA,uBAGE,MAAC,GAAD;MAAK,OAAO,EAAC,aAAb;MAA2B,aAAa,EAAC,QAAzC;MAAkD,KAAK,EAAC,MAAxD;MAAA,WACG,CAACW,MAAD,iBAAW;QAAO,IAAI,EAAC,QAAZ;QAAqB,IAAI,EAAEjB,IAA3B;QAAiC,KAAK,EAAEI;MAAxC,EADd,eAEE,MAAC,SAAD;QACE,KAAK,EAAEkC,KADT;QAEE,KAAK,EAAE7B,KAFT;QAGE,KAAK,EAAEP,KAHT;QAIE,eAAe,EAAEkE,eAJnB;QAKE,OAAO,EAAEN,OALX;QAME,QAAQ,EAAE9B,QANZ;QAOE,QAAQ,EAAEzB,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc,KAPxB;QAQE,WAAW,EAAE4B,IARf;QASE,KAAK,EAAE0B,QATT;QAUE,WAAW,EAAER,OAAO,CAAChC,WAAD,CAVtB;QAAA,wBAYE,MAAC,IAAD;UAAM,QAAQ,EAAEqB,YAAhB;UAA8B,IAAI,EAAEP,IAApC;UAAA,WACGd,WAAW,iBACV,KAAC,aAAD;YAAe,QAAQ,EAAC,OAAxB;YAAA,UAAiCA;UAAjC,EAFJ,eAIE,KAAC,IAAD;YACE,GAAG,EAAE/C,kBAAkB,CAACuB,YAAD,EAAeqC,SAAf,CADzB;YAEE,OAAO,EAAEjC,OAFX;YAGE,EAAE,EAAE6D,OAHN;YAIE,OAAO,EAAEzF,SAAS,CAAC0C,OAAD,EAAUyB,WAAV,CAJpB;YAKE,MAAM,EAAEnE,SAAS,CAAC2C,MAAD,EAASyB,UAAT,CALnB;YAME,QAAQ,EAAExB,MAAM,GAAG2B,cAAH,GAAoBoB,SANtC;YAOE,KAAK,EAAE/C,MAAM,GAAGb,KAAH,GAAW4D,SAP1B;YAQE,KAAK,EAAE1B,KART;YASE,WAAW,EAAE5B,WATf;YAUE,QAAQ,EAAEH,QAVZ;YAWE,iBAAeA,QAAQ,GAAG,MAAH,GAAYyD,SAXrC;YAYE,oBAAkBD,YAZpB;YAaE,QAAQ,EAAE,CAAC,CAACtD,KAbd;YAcE,WAAW,EAAE4C,OAAO,CAAChC,WAAD,CAdtB;YAeE,IAAI,EAAEJ,MAAM,GAAGjB,IAAH,GAAUgE,SAfxB;YAgBE,QAAQ,EAAE/C,MAAM,GAAGX,QAAH,GAAc0D,SAhBhC;YAiBE,YAAY,EAAE;UAjBhB,GAkBMxC,UAlBN;YAAA,UAoBGP,MAAM,GAAGC,QAAH,GAAcE,WAAW,CAAChB,KAAD;UApBlC,GAJF,EA0BG,CAACa,MAAD,iBACC,KAAC,WAAD;YAAa,SAAS,MAAtB;YAAA,uBACE,KAAC,QAAD;cACE,sBAAsB,EAAEb,KAD1B;cAEE,KAAK,EAAE;gBACLoE,QAAQ,EAAEtC,SAAF,aAAEA,SAAF,6CAAEA,SAAS,CAAEoC,OAAb,uDAAE,mBAAoBG;cADzB,CAFT;cAKE,IAAI,EAAC,SALP;cAME,KAAK,EAAE;gBACL,sCACKjF,aAAa,CAAC,SAAD,CADlB;cADK,CANT;cAAA,UAYG0B;YAZH;UADF,EA3BJ;QAAA,EAZF,eAyDE,KAAC,UAAD;UAAY,IAAI,EAAEiB;QAAlB,EAzDF;MAAA,EAFF,eA8DE,KAAC,UAAD;QACE,QAAQ,EAAE5B,QADZ;QAEE,EAAE,EAAEwD,YAFN;QAGE,QAAQ,EAAEnD,UAHZ;QAIE,KAAK,EAAEiD;MAJT,EA9DF;IAAA;EAHF,EADF;AA2ED,CAzM+B,CAAzB"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { MouseEvent, KeyboardEvent } from 'react';
|
|
2
|
-
export interface SelectContextProps {
|
|
2
|
+
export interface SelectContextProps<ValueType extends string> {
|
|
3
3
|
native: boolean;
|
|
4
|
-
value?:
|
|
4
|
+
value?: ValueType | ValueType[];
|
|
5
5
|
onSelect: (e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>) => void;
|
|
6
|
+
multiple: boolean;
|
|
6
7
|
}
|
|
7
|
-
export declare const SelectProvider: import("react").Provider<SelectContextProps
|
|
8
|
-
export declare const useSelectContext: () => SelectContextProps
|
|
8
|
+
export declare const SelectProvider: import("react").Provider<SelectContextProps<string>>;
|
|
9
|
+
export declare const useSelectContext: () => SelectContextProps<string>;
|
|
@@ -3,7 +3,8 @@ import { useContext, createContext } from 'react'; // Select Component
|
|
|
3
3
|
var selectContext = /*#__PURE__*/createContext({
|
|
4
4
|
native: false,
|
|
5
5
|
onSelect: function onSelect() {// noop
|
|
6
|
-
}
|
|
6
|
+
},
|
|
7
|
+
multiple: false
|
|
7
8
|
});
|
|
8
9
|
var SelectProvider = selectContext.Provider;
|
|
9
10
|
export { SelectProvider };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","names":["useContext","createContext","selectContext","native","onSelect","SelectProvider","Provider","useSelectContext"],"sources":["../../../src/Select/context.ts"],"sourcesContent":["import type { MouseEvent, KeyboardEvent } from 'react';\nimport { useContext, createContext } from 'react';\n\n// Select Component\nexport interface SelectContextProps {\n native: boolean;\n value?:
|
|
1
|
+
{"version":3,"file":"context.js","names":["useContext","createContext","selectContext","native","onSelect","multiple","SelectProvider","Provider","useSelectContext"],"sources":["../../../src/Select/context.ts"],"sourcesContent":["import type { MouseEvent, KeyboardEvent } from 'react';\nimport { useContext, createContext } from 'react';\n\n// Select Component\nexport interface SelectContextProps<ValueType extends string> {\n native: boolean;\n value?: ValueType | ValueType[];\n onSelect: (\n e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>\n ) => void;\n multiple: boolean;\n}\n\nconst selectContext = createContext<SelectContextProps<string>>({\n native: false,\n onSelect: () => {\n // noop\n },\n multiple: false,\n});\nexport const { Provider: SelectProvider } = selectContext;\nexport const useSelectContext = () => useContext(selectContext);\n"],"mappings":"AACA,SAASA,UAAT,EAAqBC,aAArB,QAA0C,OAA1C,C,CAEA;;AAUA,IAAMC,aAAa,gBAAGD,aAAa,CAA6B;EAC9DE,MAAM,EAAE,KADsD;EAE9DC,QAAQ,EAAE,oBAAM,CACd;EACD,CAJ6D;EAK9DC,QAAQ,EAAE;AALoD,CAA7B,CAAnC;AAOO,IAAkBC,cAAlB,GAAqCJ,aAArC,CAAQK,QAAR;;AACP,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;EAAA,OAAMR,UAAU,CAACE,aAAD,CAAhB;AAAA,CAAzB"}
|
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
export declare const makeDefaultRender: (children?: ReactNode) => (val
|
|
2
|
+
export declare const makeDefaultRender: <T extends string>(children?: ReactNode) => (val: "" | T | undefined) => ReactNode;
|
|
3
|
+
export declare const makeDefaultMultipleRender: <T extends string>(children?: ReactNode) => (val: T[] | undefined) => ReactNode;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { Children, isValidElement } from 'react';
|
|
2
|
+
import { Box } from '../Box';
|
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
4
|
export var makeDefaultRender = function makeDefaultRender(children) {
|
|
3
5
|
return function (val) {
|
|
4
6
|
if (children && val !== undefined) {
|
|
@@ -7,10 +9,8 @@ export var makeDefaultRender = function makeDefaultRender(children) {
|
|
|
7
9
|
for (var i = 0; i < allChildren.length; i++) {
|
|
8
10
|
var child = allChildren[i];
|
|
9
11
|
|
|
10
|
-
if ( /*#__PURE__*/isValidElement(child)) {
|
|
11
|
-
|
|
12
|
-
return child.props.children;
|
|
13
|
-
}
|
|
12
|
+
if ( /*#__PURE__*/isValidElement(child) && String(child.props.value) === val) {
|
|
13
|
+
return child.props.children;
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
}
|
|
@@ -18,4 +18,33 @@ export var makeDefaultRender = function makeDefaultRender(children) {
|
|
|
18
18
|
return val || undefined;
|
|
19
19
|
};
|
|
20
20
|
};
|
|
21
|
+
export var makeDefaultMultipleRender = function makeDefaultMultipleRender(children) {
|
|
22
|
+
return function (val) {
|
|
23
|
+
var ret = [];
|
|
24
|
+
|
|
25
|
+
if (children && val !== undefined && val.length > 0) {
|
|
26
|
+
var set = new Set(val);
|
|
27
|
+
var allChildren = Children.toArray(children);
|
|
28
|
+
|
|
29
|
+
for (var i = 0; i < allChildren.length; i++) {
|
|
30
|
+
var child = allChildren[i];
|
|
31
|
+
|
|
32
|
+
if ( /*#__PURE__*/isValidElement(child) && set.has(String(child.props.value))) {
|
|
33
|
+
ret.push(child.props.children);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
return /*#__PURE__*/_jsx(Box, {
|
|
39
|
+
as: "span",
|
|
40
|
+
sx: {
|
|
41
|
+
maxWidth: '100%',
|
|
42
|
+
overflow: 'hidden',
|
|
43
|
+
textOverflow: 'ellipsis',
|
|
44
|
+
whiteSpace: 'nowrap'
|
|
45
|
+
},
|
|
46
|
+
children: ret.join(', ')
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
};
|
|
21
50
|
//# sourceMappingURL=defaultRender.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defaultRender.js","names":["Children","isValidElement","makeDefaultRender","children","val","undefined","allChildren","toArray","i","length","child","String","props","value"],"sources":["../../../src/Select/defaultRender.
|
|
1
|
+
{"version":3,"file":"defaultRender.js","names":["Children","isValidElement","Box","makeDefaultRender","children","val","undefined","allChildren","toArray","i","length","child","String","props","value","makeDefaultMultipleRender","ret","set","Set","has","push","maxWidth","overflow","textOverflow","whiteSpace","join"],"sources":["../../../src/Select/defaultRender.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Children, isValidElement } from 'react';\n\nimport { Box } from '../Box';\n\nexport const makeDefaultRender =\n <T extends string>(children?: ReactNode) =>\n (val: T | '' | undefined): ReactNode => {\n if (children && val !== undefined) {\n const allChildren = Children.toArray(children);\n for (let i = 0; i < allChildren.length; i++) {\n const child = allChildren[i];\n if (isValidElement(child) && String(child.props.value) === val) {\n return child.props.children;\n }\n }\n }\n return val || undefined;\n };\n\nexport const makeDefaultMultipleRender =\n <T extends string>(children?: ReactNode) =>\n (val: T[] | undefined): ReactNode => {\n const ret = [];\n if (children && val !== undefined && val.length > 0) {\n const set = new Set<string>(val);\n const allChildren = Children.toArray(children);\n for (let i = 0; i < allChildren.length; i++) {\n const child = allChildren[i];\n if (isValidElement(child) && set.has(String(child.props.value))) {\n ret.push(child.props.children);\n }\n }\n }\n\n return (\n <Box\n as=\"span\"\n sx={{\n maxWidth: '100%',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }}\n >\n {ret.join(', ')}\n </Box>\n );\n };\n"],"mappings":"AACA,SAASA,QAAT,EAAmBC,cAAnB,QAAyC,OAAzC;AAEA,SAASC,GAAT,QAAoB,QAApB;;AAEA,OAAO,IAAMC,iBAAiB,GAC5B,SADWA,iBACX,CAAmBC,QAAnB;EAAA,OACA,UAACC,GAAD,EAAwC;IACtC,IAAID,QAAQ,IAAIC,GAAG,KAAKC,SAAxB,EAAmC;MACjC,IAAMC,WAAW,GAAGP,QAAQ,CAACQ,OAAT,CAAiBJ,QAAjB,CAApB;;MACA,KAAK,IAAIK,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGF,WAAW,CAACG,MAAhC,EAAwCD,CAAC,EAAzC,EAA6C;QAC3C,IAAME,KAAK,GAAGJ,WAAW,CAACE,CAAD,CAAzB;;QACA,IAAI,cAAAR,cAAc,CAACU,KAAD,CAAd,IAAyBC,MAAM,CAACD,KAAK,CAACE,KAAN,CAAYC,KAAb,CAAN,KAA8BT,GAA3D,EAAgE;UAC9D,OAAOM,KAAK,CAACE,KAAN,CAAYT,QAAnB;QACD;MACF;IACF;;IACD,OAAOC,GAAG,IAAIC,SAAd;EACD,CAZD;AAAA,CADK;AAeP,OAAO,IAAMS,yBAAyB,GACpC,SADWA,yBACX,CAAmBX,QAAnB;EAAA,OACA,UAACC,GAAD,EAAqC;IACnC,IAAMW,GAAG,GAAG,EAAZ;;IACA,IAAIZ,QAAQ,IAAIC,GAAG,KAAKC,SAApB,IAAiCD,GAAG,CAACK,MAAJ,GAAa,CAAlD,EAAqD;MACnD,IAAMO,GAAG,GAAG,IAAIC,GAAJ,CAAgBb,GAAhB,CAAZ;MACA,IAAME,WAAW,GAAGP,QAAQ,CAACQ,OAAT,CAAiBJ,QAAjB,CAApB;;MACA,KAAK,IAAIK,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGF,WAAW,CAACG,MAAhC,EAAwCD,CAAC,EAAzC,EAA6C;QAC3C,IAAME,KAAK,GAAGJ,WAAW,CAACE,CAAD,CAAzB;;QACA,IAAI,cAAAR,cAAc,CAACU,KAAD,CAAd,IAAyBM,GAAG,CAACE,GAAJ,CAAQP,MAAM,CAACD,KAAK,CAACE,KAAN,CAAYC,KAAb,CAAd,CAA7B,EAAiE;UAC/DE,GAAG,CAACI,IAAJ,CAAST,KAAK,CAACE,KAAN,CAAYT,QAArB;QACD;MACF;IACF;;IAED,oBACE,KAAC,GAAD;MACE,EAAE,EAAC,MADL;MAEE,EAAE,EAAE;QACFiB,QAAQ,EAAE,MADR;QAEFC,QAAQ,EAAE,QAFR;QAGFC,YAAY,EAAE,UAHZ;QAIFC,UAAU,EAAE;MAJV,CAFN;MAAA,UASGR,GAAG,CAACS,IAAJ,CAAS,IAAT;IATH,EADF;EAaD,CA3BD;AAAA,CADK"}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
import type { ReactElement, Ref } from 'react';
|
|
2
2
|
import type { MenuItemProps as MenuItemPropsCore } from '@basic-ui/core';
|
|
3
3
|
import type { BoxProps } from '../Box';
|
|
4
4
|
declare type MenuItemProps = MenuItemPropsCore & BoxProps;
|
|
5
|
-
export
|
|
6
|
-
|
|
5
|
+
export interface SelectItemProps<ValueType extends string> extends MenuItemProps {
|
|
6
|
+
value: ValueType;
|
|
7
|
+
}
|
|
8
|
+
export declare const SelectItem: <ValueType extends string>(p: SelectItemProps<ValueType> & {
|
|
9
|
+
ref?: Ref<HTMLLIElement> | undefined;
|
|
10
|
+
}) => ReactElement;
|
|
7
11
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["as"],
|
|
4
|
-
_excluded2 = ["as", "onSelect", "children", "value", "disabled"];
|
|
4
|
+
_excluded2 = ["as", "onSelect", "children", "value", "disabled", "onKeyDown"];
|
|
5
5
|
import { forwardRef } from 'react';
|
|
6
6
|
import { wrapEvent, MenuItem as MenuItemCore } from '@basic-ui/core';
|
|
7
7
|
import { useSelectContext } from '../Select/context';
|
|
@@ -26,12 +26,14 @@ export var SelectItem = /*#__PURE__*/forwardRef(function SelectItem(props, forwa
|
|
|
26
26
|
children = props.children,
|
|
27
27
|
valueProp = props.value,
|
|
28
28
|
disabled = props.disabled,
|
|
29
|
+
onKeyDown = props.onKeyDown,
|
|
29
30
|
otherProps = _objectWithoutProperties(props, _excluded2);
|
|
30
31
|
|
|
31
32
|
var _useSelectContext = useSelectContext(),
|
|
32
33
|
native = _useSelectContext.native,
|
|
33
34
|
onSelect = _useSelectContext.onSelect,
|
|
34
|
-
selectedValue = _useSelectContext.value
|
|
35
|
+
selectedValue = _useSelectContext.value,
|
|
36
|
+
multiple = _useSelectContext.multiple;
|
|
35
37
|
|
|
36
38
|
var value = valueProp !== undefined && valueProp !== null ? String(valueProp) : children;
|
|
37
39
|
|
|
@@ -49,7 +51,16 @@ export var SelectItem = /*#__PURE__*/forwardRef(function SelectItem(props, forwa
|
|
|
49
51
|
return null;
|
|
50
52
|
}
|
|
51
53
|
|
|
52
|
-
var selected =
|
|
54
|
+
var selected = false;
|
|
55
|
+
|
|
56
|
+
if (multiple && Array.isArray(selectedValue)) {
|
|
57
|
+
selected = Boolean(selectedValue.find(function (v) {
|
|
58
|
+
return v === value;
|
|
59
|
+
}));
|
|
60
|
+
} else {
|
|
61
|
+
selected = value === String(selectedValue);
|
|
62
|
+
}
|
|
63
|
+
|
|
53
64
|
return /*#__PURE__*/_jsx(Comp, _extends(_extends({
|
|
54
65
|
as: MenuItem,
|
|
55
66
|
onSelect: wrapEvent(onSelectProp, onSelect),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectItem.js","names":["forwardRef","wrapEvent","MenuItem","MenuItemCore","useSelectContext","Box","ref","as","props","ZERO_WIDTH_SPACE","SelectItem","forwardedRef","Comp","onSelectProp","onSelect","children","valueProp","value","disabled","otherProps","native","selectedValue","undefined","String","selected"],"sources":["../../../src/SelectItem/SelectItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { wrapEvent, MenuItem as MenuItemCore } from '@basic-ui/core';\nimport type { MenuItemProps as MenuItemPropsCore } from '@basic-ui/core';\n\nimport { useSelectContext } from '../Select/context';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\n\ntype MenuItemProps = MenuItemPropsCore & BoxProps;\n\nconst MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(\n ({ as = 'li', ...props }, ref) => (\n <MenuItemCore as={Box} innerAs={as} ref={ref} {...props} />\n )\n);\n\nexport
|
|
1
|
+
{"version":3,"file":"SelectItem.js","names":["forwardRef","wrapEvent","MenuItem","MenuItemCore","useSelectContext","Box","ref","as","props","ZERO_WIDTH_SPACE","SelectItem","forwardedRef","Comp","onSelectProp","onSelect","children","valueProp","value","disabled","onKeyDown","otherProps","native","selectedValue","multiple","undefined","String","selected","Array","isArray","Boolean","find","v"],"sources":["../../../src/SelectItem/SelectItem.tsx"],"sourcesContent":["import type { ForwardedRef, ReactElement, Ref } from 'react';\nimport { forwardRef } from 'react';\nimport { wrapEvent, MenuItem as MenuItemCore } from '@basic-ui/core';\nimport type { MenuItemProps as MenuItemPropsCore } from '@basic-ui/core';\n\nimport { useSelectContext } from '../Select/context';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\n\ntype MenuItemProps = MenuItemPropsCore & BoxProps;\n\nconst MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(\n ({ as = 'li', ...props }, ref) => (\n <MenuItemCore as={Box} innerAs={as} ref={ref} {...props} />\n )\n);\n\nexport interface SelectItemProps<ValueType extends string>\n extends MenuItemProps {\n value: ValueType;\n}\n\nconst ZERO_WIDTH_SPACE = '\\u200b';\nexport const SelectItem = forwardRef(function SelectItem<\n ValueType extends string\n>(\n props: SelectItemProps<ValueType>,\n forwardedRef: ForwardedRef<HTMLLIElement>\n) {\n const {\n as: Comp = MenuItem,\n onSelect: onSelectProp,\n children,\n value: valueProp,\n disabled,\n onKeyDown,\n ...otherProps\n } = props;\n const {\n native,\n onSelect,\n value: selectedValue,\n multiple,\n } = useSelectContext();\n const value =\n valueProp !== undefined && valueProp !== null\n ? String(valueProp)\n : (children as string);\n\n if (native) {\n return (\n <option\n ref={forwardedRef}\n value={value}\n disabled={disabled}\n {...(otherProps as any)}\n >\n {children}\n </option>\n );\n }\n\n if (children === undefined && disabled) {\n return null;\n }\n\n let selected = false;\n if (multiple && Array.isArray(selectedValue)) {\n selected = Boolean(selectedValue.find((v) => v === value));\n } else {\n selected = value === String(selectedValue);\n }\n return (\n <Comp\n as={MenuItem}\n onSelect={wrapEvent(onSelectProp, onSelect as any)}\n data-value={value}\n disabled={disabled}\n ref={forwardedRef}\n role=\"option\"\n aria-selected={selected ? 'true' : undefined}\n selected={selected}\n {...otherProps}\n >\n {children || ZERO_WIDTH_SPACE}\n </Comp>\n );\n}) as <ValueType extends string>(\n p: SelectItemProps<ValueType> & {\n ref?: Ref<HTMLLIElement>;\n }\n) => ReactElement;\n"],"mappings":";;;;AACA,SAASA,UAAT,QAA2B,OAA3B;AACA,SAASC,SAAT,EAAoBC,QAAQ,IAAIC,YAAhC,QAAoD,gBAApD;AAGA,SAASC,gBAAT,QAAiC,mBAAjC;AAEA,SAASC,GAAT,QAAoB,QAApB;;AAIA,IAAMH,QAAQ,gBAAGF,UAAU,CACzB,gBAA0BM,GAA1B;EAAA,mBAAGC,EAAH;EAAA,IAAGA,EAAH,wBAAQ,IAAR;EAAA,IAAiBC,KAAjB;;EAAA,oBACE,KAAC,YAAD;IAAc,EAAE,EAAEH,GAAlB;IAAuB,OAAO,EAAEE,EAAhC;IAAoC,GAAG,EAAED;EAAzC,GAAkDE,KAAlD,EADF;AAAA,CADyB,CAA3B;AAWA,IAAMC,gBAAgB,GAAG,QAAzB;AACA,OAAO,IAAMC,UAAU,gBAAGV,UAAU,CAAC,SAASU,UAAT,CAGnCF,KAHmC,EAInCG,YAJmC,EAKnC;EACA,gBAQIH,KARJ,CACED,EADF;EAAA,IACMK,IADN,0BACaV,QADb;EAAA,IAEYW,YAFZ,GAQIL,KARJ,CAEEM,QAFF;EAAA,IAGEC,QAHF,GAQIP,KARJ,CAGEO,QAHF;EAAA,IAISC,SAJT,GAQIR,KARJ,CAIES,KAJF;EAAA,IAKEC,QALF,GAQIV,KARJ,CAKEU,QALF;EAAA,IAMEC,SANF,GAQIX,KARJ,CAMEW,SANF;EAAA,IAOKC,UAPL,4BAQIZ,KARJ;;EASA,wBAKIJ,gBAAgB,EALpB;EAAA,IACEiB,MADF,qBACEA,MADF;EAAA,IAEEP,QAFF,qBAEEA,QAFF;EAAA,IAGSQ,aAHT,qBAGEL,KAHF;EAAA,IAIEM,QAJF,qBAIEA,QAJF;;EAMA,IAAMN,KAAK,GACTD,SAAS,KAAKQ,SAAd,IAA2BR,SAAS,KAAK,IAAzC,GACIS,MAAM,CAACT,SAAD,CADV,GAEKD,QAHP;;EAKA,IAAIM,MAAJ,EAAY;IACV,oBACE;MACE,GAAG,EAAEV,YADP;MAEE,KAAK,EAAEM,KAFT;MAGE,QAAQ,EAAEC;IAHZ,GAIOE,UAJP;MAAA,UAMGL;IANH,GADF;EAUD;;EAED,IAAIA,QAAQ,KAAKS,SAAb,IAA0BN,QAA9B,EAAwC;IACtC,OAAO,IAAP;EACD;;EAED,IAAIQ,QAAQ,GAAG,KAAf;;EACA,IAAIH,QAAQ,IAAII,KAAK,CAACC,OAAN,CAAcN,aAAd,CAAhB,EAA8C;IAC5CI,QAAQ,GAAGG,OAAO,CAACP,aAAa,CAACQ,IAAd,CAAmB,UAACC,CAAD;MAAA,OAAOA,CAAC,KAAKd,KAAb;IAAA,CAAnB,CAAD,CAAlB;EACD,CAFD,MAEO;IACLS,QAAQ,GAAGT,KAAK,KAAKQ,MAAM,CAACH,aAAD,CAA3B;EACD;;EACD,oBACE,KAAC,IAAD;IACE,EAAE,EAAEpB,QADN;IAEE,QAAQ,EAAED,SAAS,CAACY,YAAD,EAAeC,QAAf,CAFrB;IAGE,cAAYG,KAHd;IAIE,QAAQ,EAAEC,QAJZ;IAKE,GAAG,EAAEP,YALP;IAME,IAAI,EAAC,QANP;IAOE,iBAAee,QAAQ,GAAG,MAAH,GAAYF,SAPrC;IAQE,QAAQ,EAAEE;EARZ,GASMN,UATN;IAAA,UAWGL,QAAQ,IAAIN;EAXf,GADF;AAeD,CAhEmC,CAA7B"}
|