@mantine/core 9.1.1 → 9.2.0
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/cjs/components/Autocomplete/Autocomplete.cjs +5 -1
- package/cjs/components/Autocomplete/Autocomplete.cjs.map +1 -1
- package/cjs/components/Checkbox/Checkbox.cjs +4 -1
- package/cjs/components/Checkbox/Checkbox.cjs.map +1 -1
- package/cjs/components/ColorInput/ColorInput.cjs +5 -1
- package/cjs/components/ColorInput/ColorInput.cjs.map +1 -1
- package/cjs/components/Combobox/use-pills-reorder/move-pill.cjs +17 -0
- package/cjs/components/Combobox/use-pills-reorder/move-pill.cjs.map +1 -0
- package/cjs/components/Combobox/use-pills-reorder/use-pills-reorder.cjs +170 -0
- package/cjs/components/Combobox/use-pills-reorder/use-pills-reorder.cjs.map +1 -0
- package/cjs/components/FileInput/FileInput.cjs +5 -1
- package/cjs/components/FileInput/FileInput.cjs.map +1 -1
- package/cjs/components/Input/use-input-props.cjs +5 -1
- package/cjs/components/Input/use-input-props.cjs.map +1 -1
- package/cjs/components/JsonInput/JsonInput.cjs +5 -2
- package/cjs/components/JsonInput/JsonInput.cjs.map +1 -1
- package/cjs/components/MaskInput/MaskInput.cjs +5 -1
- package/cjs/components/MaskInput/MaskInput.cjs.map +1 -1
- package/cjs/components/MaskInput/use-mask-input-props.cjs +3 -2
- package/cjs/components/MaskInput/use-mask-input-props.cjs.map +1 -1
- package/cjs/components/MultiSelect/MultiSelect.cjs +19 -3
- package/cjs/components/MultiSelect/MultiSelect.cjs.map +1 -1
- package/cjs/components/NativeSelect/NativeSelect.cjs +5 -1
- package/cjs/components/NativeSelect/NativeSelect.cjs.map +1 -1
- package/cjs/components/NumberInput/NumberInput.cjs +5 -1
- package/cjs/components/NumberInput/NumberInput.cjs.map +1 -1
- package/cjs/components/PasswordInput/PasswordInput.cjs +5 -1
- package/cjs/components/PasswordInput/PasswordInput.cjs.map +1 -1
- package/cjs/components/Pill/Pill.module.cjs.map +1 -1
- package/cjs/components/PillsInput/PillsInput.cjs +5 -1
- package/cjs/components/PillsInput/PillsInput.cjs.map +1 -1
- package/cjs/components/PinInput/PinInput.cjs +1 -1
- package/cjs/components/PinInput/PinInput.cjs.map +1 -1
- package/cjs/components/RollingNumber/DigitColumn.cjs +46 -0
- package/cjs/components/RollingNumber/DigitColumn.cjs.map +1 -0
- package/cjs/components/RollingNumber/RollingNumber.cjs +102 -0
- package/cjs/components/RollingNumber/RollingNumber.cjs.map +1 -0
- package/cjs/components/RollingNumber/RollingNumber.module.cjs +13 -0
- package/cjs/components/RollingNumber/RollingNumber.module.cjs.map +1 -0
- package/cjs/components/RollingNumber/build-value.cjs +22 -0
- package/cjs/components/RollingNumber/build-value.cjs.map +1 -0
- package/cjs/components/RollingNumber/get-digit-parts.cjs +40 -0
- package/cjs/components/RollingNumber/get-digit-parts.cjs.map +1 -0
- package/cjs/components/RollingNumber/get-render-slots.cjs +78 -0
- package/cjs/components/RollingNumber/get-render-slots.cjs.map +1 -0
- package/cjs/components/Select/Select.cjs +5 -1
- package/cjs/components/Select/Select.cjs.map +1 -1
- package/cjs/components/TagsInput/TagsInput.cjs +19 -4
- package/cjs/components/TagsInput/TagsInput.cjs.map +1 -1
- package/cjs/components/TextInput/TextInput.cjs +5 -1
- package/cjs/components/TextInput/TextInput.cjs.map +1 -1
- package/cjs/components/Textarea/Textarea.cjs +5 -2
- package/cjs/components/Textarea/Textarea.cjs.map +1 -1
- package/cjs/components/Tree/is-node-checked/is-node-checked.cjs +1 -0
- package/cjs/components/Tree/is-node-indeterminate/is-node-indeterminate.cjs +1 -0
- package/cjs/components/TreeSelect/TreeSelect.cjs +601 -0
- package/cjs/components/TreeSelect/TreeSelect.cjs.map +1 -0
- package/cjs/components/TreeSelect/TreeSelect.module.cjs +16 -0
- package/cjs/components/TreeSelect/TreeSelect.module.cjs.map +1 -0
- package/cjs/components/TreeSelect/TreeSelectOption.cjs +95 -0
- package/cjs/components/TreeSelect/TreeSelectOption.cjs.map +1 -0
- package/cjs/components/TreeSelect/flatten-tree-select-data.cjs +34 -0
- package/cjs/components/TreeSelect/flatten-tree-select-data.cjs.map +1 -0
- package/cjs/components/TreeSelect/get-checked-values-by-strategy.cjs +30 -0
- package/cjs/components/TreeSelect/get-checked-values-by-strategy.cjs.map +1 -0
- package/cjs/core/MantineProvider/use-props/use-props.cjs +10 -2
- package/cjs/core/MantineProvider/use-props/use-props.cjs.map +1 -1
- package/cjs/index.cjs +8 -0
- package/esm/components/Autocomplete/Autocomplete.mjs +5 -1
- package/esm/components/Autocomplete/Autocomplete.mjs.map +1 -1
- package/esm/components/Checkbox/Checkbox.mjs +4 -1
- package/esm/components/Checkbox/Checkbox.mjs.map +1 -1
- package/esm/components/ColorInput/ColorInput.mjs +5 -1
- package/esm/components/ColorInput/ColorInput.mjs.map +1 -1
- package/esm/components/Combobox/use-pills-reorder/move-pill.mjs +17 -0
- package/esm/components/Combobox/use-pills-reorder/move-pill.mjs.map +1 -0
- package/esm/components/Combobox/use-pills-reorder/use-pills-reorder.mjs +169 -0
- package/esm/components/Combobox/use-pills-reorder/use-pills-reorder.mjs.map +1 -0
- package/esm/components/FileInput/FileInput.mjs +5 -1
- package/esm/components/FileInput/FileInput.mjs.map +1 -1
- package/esm/components/Input/use-input-props.mjs +5 -1
- package/esm/components/Input/use-input-props.mjs.map +1 -1
- package/esm/components/JsonInput/JsonInput.mjs +5 -2
- package/esm/components/JsonInput/JsonInput.mjs.map +1 -1
- package/esm/components/MaskInput/MaskInput.mjs +5 -1
- package/esm/components/MaskInput/MaskInput.mjs.map +1 -1
- package/esm/components/MaskInput/use-mask-input-props.mjs +4 -3
- package/esm/components/MaskInput/use-mask-input-props.mjs.map +1 -1
- package/esm/components/MultiSelect/MultiSelect.mjs +19 -3
- package/esm/components/MultiSelect/MultiSelect.mjs.map +1 -1
- package/esm/components/NativeSelect/NativeSelect.mjs +5 -1
- package/esm/components/NativeSelect/NativeSelect.mjs.map +1 -1
- package/esm/components/NumberInput/NumberInput.mjs +5 -1
- package/esm/components/NumberInput/NumberInput.mjs.map +1 -1
- package/esm/components/PasswordInput/PasswordInput.mjs +5 -1
- package/esm/components/PasswordInput/PasswordInput.mjs.map +1 -1
- package/esm/components/Pill/Pill.module.mjs.map +1 -1
- package/esm/components/PillsInput/PillsInput.mjs +5 -1
- package/esm/components/PillsInput/PillsInput.mjs.map +1 -1
- package/esm/components/PinInput/PinInput.mjs +1 -1
- package/esm/components/PinInput/PinInput.mjs.map +1 -1
- package/esm/components/RollingNumber/DigitColumn.mjs +45 -0
- package/esm/components/RollingNumber/DigitColumn.mjs.map +1 -0
- package/esm/components/RollingNumber/RollingNumber.mjs +101 -0
- package/esm/components/RollingNumber/RollingNumber.mjs.map +1 -0
- package/esm/components/RollingNumber/RollingNumber.module.mjs +13 -0
- package/esm/components/RollingNumber/RollingNumber.module.mjs.map +1 -0
- package/esm/components/RollingNumber/build-value.mjs +22 -0
- package/esm/components/RollingNumber/build-value.mjs.map +1 -0
- package/esm/components/RollingNumber/get-digit-parts.mjs +40 -0
- package/esm/components/RollingNumber/get-digit-parts.mjs.map +1 -0
- package/esm/components/RollingNumber/get-render-slots.mjs +78 -0
- package/esm/components/RollingNumber/get-render-slots.mjs.map +1 -0
- package/esm/components/Select/Select.mjs +5 -1
- package/esm/components/Select/Select.mjs.map +1 -1
- package/esm/components/TagsInput/TagsInput.mjs +19 -4
- package/esm/components/TagsInput/TagsInput.mjs.map +1 -1
- package/esm/components/TextInput/TextInput.mjs +5 -1
- package/esm/components/TextInput/TextInput.mjs.map +1 -1
- package/esm/components/Textarea/Textarea.mjs +5 -2
- package/esm/components/Textarea/Textarea.mjs.map +1 -1
- package/esm/components/Tree/is-node-checked/is-node-checked.mjs +1 -1
- package/esm/components/Tree/is-node-indeterminate/is-node-indeterminate.mjs +1 -1
- package/esm/components/TreeSelect/TreeSelect.mjs +600 -0
- package/esm/components/TreeSelect/TreeSelect.mjs.map +1 -0
- package/esm/components/TreeSelect/TreeSelect.module.mjs +16 -0
- package/esm/components/TreeSelect/TreeSelect.module.mjs.map +1 -0
- package/esm/components/TreeSelect/TreeSelectOption.mjs +94 -0
- package/esm/components/TreeSelect/TreeSelectOption.mjs.map +1 -0
- package/esm/components/TreeSelect/flatten-tree-select-data.mjs +34 -0
- package/esm/components/TreeSelect/flatten-tree-select-data.mjs.map +1 -0
- package/esm/components/TreeSelect/get-checked-values-by-strategy.mjs +29 -0
- package/esm/components/TreeSelect/get-checked-values-by-strategy.mjs.map +1 -0
- package/esm/core/MantineProvider/use-props/use-props.mjs +10 -2
- package/esm/core/MantineProvider/use-props/use-props.mjs.map +1 -1
- package/esm/index.mjs +5 -1
- package/lib/components/Combobox/Combobox.types.d.ts +3 -0
- package/lib/components/Combobox/index.d.ts +2 -0
- package/lib/components/Combobox/use-pills-reorder/move-pill.d.ts +2 -0
- package/lib/components/Combobox/use-pills-reorder/use-pills-reorder.d.ts +26 -0
- package/lib/components/MaskInput/MaskInput.d.ts +2 -0
- package/lib/components/MultiSelect/MultiSelect.d.ts +2 -0
- package/lib/components/RollingNumber/DigitColumn.d.ts +11 -0
- package/lib/components/RollingNumber/RollingNumber.d.ts +41 -0
- package/lib/components/RollingNumber/build-value.d.ts +10 -0
- package/lib/components/RollingNumber/get-digit-parts.d.ts +12 -0
- package/lib/components/RollingNumber/get-render-slots.d.ts +35 -0
- package/lib/components/RollingNumber/index.d.ts +9 -0
- package/lib/components/TagsInput/TagsInput.d.ts +2 -0
- package/lib/components/TreeSelect/TreeSelect.d.ts +124 -0
- package/lib/components/TreeSelect/TreeSelectOption.d.ts +36 -0
- package/lib/components/TreeSelect/flatten-tree-select-data.d.ts +12 -0
- package/lib/components/TreeSelect/get-checked-values-by-strategy.d.ts +4 -0
- package/lib/components/TreeSelect/index.d.ts +13 -0
- package/lib/components/index.d.ts +2 -0
- package/lib/core/MantineProvider/use-props/use-props.d.ts +1 -1
- package/package.json +2 -2
- package/styles/Pill.css +35 -0
- package/styles/Pill.layer.css +35 -0
- package/styles/RollingNumber.css +60 -0
- package/styles/RollingNumber.layer.css +61 -0
- package/styles/TreeSelect.css +113 -0
- package/styles/TreeSelect.layer.css +114 -0
- package/styles.css +210 -0
- package/styles.layer.css +210 -0
|
@@ -10,6 +10,7 @@ import { getOptionsLockup } from "../Combobox/get-options-lockup/get-options-loc
|
|
|
10
10
|
import { useCombobox } from "../Combobox/use-combobox/use-combobox.mjs";
|
|
11
11
|
import { Combobox } from "../Combobox/Combobox.mjs";
|
|
12
12
|
import { OptionsDropdown } from "../Combobox/OptionsDropdown/OptionsDropdown.mjs";
|
|
13
|
+
import { usePillsReorder } from "../Combobox/use-pills-reorder/use-pills-reorder.mjs";
|
|
13
14
|
import { Pill } from "../Pill/Pill.mjs";
|
|
14
15
|
import { PillsInput } from "../PillsInput/PillsInput.mjs";
|
|
15
16
|
import { filterPickedTags } from "./filter-picked-tags.mjs";
|
|
@@ -27,8 +28,12 @@ const defaultProps = {
|
|
|
27
28
|
size: "sm"
|
|
28
29
|
};
|
|
29
30
|
const TagsInput = factory((_props) => {
|
|
30
|
-
const props = useProps(
|
|
31
|
-
|
|
31
|
+
const props = useProps([
|
|
32
|
+
"Input",
|
|
33
|
+
"InputWrapper",
|
|
34
|
+
"TagsInput"
|
|
35
|
+
], defaultProps, _props);
|
|
36
|
+
const { classNames, className, style, styles, unstyled, vars, size, value, defaultValue, onChange, onKeyDown, maxTags, allowDuplicates, onDuplicate, variant, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, searchValue, defaultSearchValue, onSearchChange, readOnly, disabled, splitChars, onFocus, onBlur, onPaste, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, required, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, withErrorStyles, name, form, id, clearable, clearSectionMode, clearButtonProps, hiddenInputProps, hiddenInputValuesDivider, mod, renderOption, renderPill, onRemove, onClear, onMaxTags, scrollAreaProps, acceptValueOnBlur, isDuplicate, openOnFocus, attributes, ref, loading, loadingPosition, withPillsReorder, ...others } = props;
|
|
32
37
|
const _id = useId$1(id);
|
|
33
38
|
const parsedData = getParsedComboboxData(data);
|
|
34
39
|
const optionsLockup = getOptionsLockup(parsedData);
|
|
@@ -53,6 +58,11 @@ const TagsInput = factory((_props) => {
|
|
|
53
58
|
finalValue: [],
|
|
54
59
|
onChange
|
|
55
60
|
});
|
|
61
|
+
const { getPillProps, getListProps, handleInputKeyDown } = usePillsReorder({
|
|
62
|
+
value: _value,
|
|
63
|
+
onChange: setValue,
|
|
64
|
+
enabled: withPillsReorder && !disabled && !readOnly
|
|
65
|
+
});
|
|
56
66
|
const [_searchValue, setSearchValue] = useUncontrolled({
|
|
57
67
|
value: searchValue,
|
|
58
68
|
defaultValue: defaultSearchValue,
|
|
@@ -94,7 +104,7 @@ const TagsInput = factory((_props) => {
|
|
|
94
104
|
};
|
|
95
105
|
const handleInputKeydown = (event) => {
|
|
96
106
|
onKeyDown?.(event);
|
|
97
|
-
if (event.isPropagationStopped()) return;
|
|
107
|
+
if (event.defaultPrevented || event.isPropagationStopped()) return;
|
|
98
108
|
const inputValue = _searchValue.trim();
|
|
99
109
|
const { length } = inputValue;
|
|
100
110
|
if (splitChars.includes(event.key) && length > 0) {
|
|
@@ -119,6 +129,7 @@ const TagsInput = factory((_props) => {
|
|
|
119
129
|
onRemove?.(_value[_value.length - 1]);
|
|
120
130
|
setValue(_value.slice(0, _value.length - 1));
|
|
121
131
|
}
|
|
132
|
+
handleInputKeyDown(event);
|
|
122
133
|
};
|
|
123
134
|
const handlePaste = (event) => {
|
|
124
135
|
onPaste?.(event);
|
|
@@ -143,6 +154,7 @@ const TagsInput = factory((_props) => {
|
|
|
143
154
|
setValue(next_value);
|
|
144
155
|
onRemove?.(item);
|
|
145
156
|
};
|
|
157
|
+
const reorderProps = getPillProps(index);
|
|
146
158
|
if (renderPill) return /* @__PURE__ */ jsx(Fragment, { children: renderPill({
|
|
147
159
|
option: optionsLockup[item] || {
|
|
148
160
|
value: item,
|
|
@@ -151,7 +163,8 @@ const TagsInput = factory((_props) => {
|
|
|
151
163
|
},
|
|
152
164
|
value: item,
|
|
153
165
|
onRemove: onRemoveItem,
|
|
154
|
-
disabled: disabled || readOnly
|
|
166
|
+
disabled: disabled || readOnly,
|
|
167
|
+
reorderProps
|
|
155
168
|
}) }, `${item}-${index}`);
|
|
156
169
|
return /* @__PURE__ */ jsx(Pill, {
|
|
157
170
|
withRemoveButton: !readOnly,
|
|
@@ -160,6 +173,7 @@ const TagsInput = factory((_props) => {
|
|
|
160
173
|
disabled,
|
|
161
174
|
attributes,
|
|
162
175
|
...getStyles("pill"),
|
|
176
|
+
...reorderProps,
|
|
163
177
|
children: item
|
|
164
178
|
}, `${item}-${index}`);
|
|
165
179
|
});
|
|
@@ -245,6 +259,7 @@ const TagsInput = factory((_props) => {
|
|
|
245
259
|
disabled,
|
|
246
260
|
unstyled,
|
|
247
261
|
...getStyles("pillsList"),
|
|
262
|
+
...getListProps(),
|
|
248
263
|
children: [values, /* @__PURE__ */ jsx(Combobox.EventsTarget, {
|
|
249
264
|
autoComplete,
|
|
250
265
|
withExpandedAttribute: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagsInput.mjs","names":["useId"],"sources":["../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport {\n Combobox,\n ComboboxGenericData,\n ComboboxGenericItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n ComboboxRenderPillInput,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n} from '../Combobox';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedTags } from './filter-picked-tags';\nimport { getSplittedTags } from './get-splitted-tags';\n\nexport type TagsInputStylesNames =\n | __InputStylesNames\n | ComboboxLikeStylesNames\n | 'pill'\n | 'pillsList'\n | 'inputField';\n\nexport interface TagsInputProps\n extends\n BoxProps,\n __BaseInputProps,\n Omit<ComboboxLikeProps, 'data'>,\n StylesApiProps<TagsInputFactory>,\n ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {\n /** Data displayed in the dropdown. Values must be unique. */\n data?: ComboboxGenericData;\n\n /** Controlled component value */\n value?: string[];\n\n /** Uncontrolled component default value */\n defaultValue?: string[];\n\n /** Called when value changes */\n onChange?: (value: string[]) => void;\n\n /** Called when tag is removed */\n onRemove?: (value: string) => void;\n\n /** Called when the clear button is clicked */\n onClear?: () => void;\n\n /** Controlled search value */\n searchValue?: string;\n\n /** Default search value */\n defaultSearchValue?: string;\n\n /** Called when search changes */\n onSearchChange?: (value: string) => void;\n\n /** Maximum number of tags @default Infinity */\n maxTags?: number;\n\n /** Called when user tries to add more tags than maxTags */\n onMaxTags?: (value: string) => void;\n\n /** If set, duplicate tags are allowed @default false */\n allowDuplicates?: boolean;\n\n /** Called when user tries to submit a duplicated tag */\n onDuplicate?: (value: string) => void;\n\n /** Characters that should trigger tags split, `[',']` by default */\n splitChars?: string[];\n\n /** If set, the clear button is displayed in the right section when the component has value @default false */\n clearable?: boolean;\n\n /** Determines how the clear button and rightSection are rendered @default 'both' */\n clearSectionMode?: ClearSectionMode;\n\n /** Props passed down to the clear button */\n clearButtonProps?: InputClearButtonProps;\n\n /** Props passed down to the hidden input */\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /** Divider used to separate values in the hidden input `value` attribute @default ',' */\n hiddenInputValuesDivider?: string;\n\n /** A function to render content of the option, replaces the default content of the option */\n renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>) => React.ReactNode;\n\n /** A function to render content of the pill, replaces the default content of the pill */\n renderPill?: (props: ComboboxRenderPillInput) => React.ReactNode;\n\n /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n scrollAreaProps?: ScrollAreaProps;\n\n /** If set, the value typed in by the user but not submitted is accepted when the input is blurred @default true */\n acceptValueOnBlur?: boolean;\n\n /** Custom function to determine if a tag is duplicate. Accepts tag value and array of current values. By default, checks if the tag exists case-insensitively. */\n isDuplicate?: (value: string, currentValues: string[]) => boolean;\n\n /** If set, the dropdown opens when the input receives focus @default true */\n openOnFocus?: boolean;\n}\n\nexport type TagsInputFactory = Factory<{\n props: TagsInputProps;\n ref: HTMLInputElement;\n stylesNames: TagsInputStylesNames;\n}>;\n\nconst defaultProps = {\n maxTags: Infinity,\n acceptValueOnBlur: true,\n splitChars: [','],\n hiddenInputValuesDivider: ',',\n openOnFocus: true,\n size: 'sm',\n} satisfies Partial<TagsInputProps>;\n\nexport const TagsInput = factory<TagsInputFactory>((_props) => {\n const props = useProps('TagsInput', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n size,\n value,\n defaultValue,\n onChange,\n onKeyDown,\n maxTags,\n allowDuplicates,\n onDuplicate,\n variant,\n data,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownOpen,\n onDropdownClose,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n readOnly,\n disabled,\n splitChars,\n onFocus,\n onBlur,\n onPaste,\n radius,\n rightSection,\n rightSectionWidth,\n rightSectionPointerEvents,\n rightSectionProps,\n leftSection,\n leftSectionWidth,\n leftSectionPointerEvents,\n leftSectionProps,\n inputContainer,\n inputWrapperOrder,\n withAsterisk,\n required,\n labelProps,\n descriptionProps,\n errorProps,\n wrapperProps,\n description,\n label,\n error,\n withErrorStyles,\n name,\n form,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n hiddenInputValuesDivider,\n mod,\n renderOption,\n renderPill,\n onRemove,\n onClear,\n onMaxTags,\n scrollAreaProps,\n acceptValueOnBlur,\n isDuplicate,\n openOnFocus,\n attributes,\n ref,\n loading,\n loadingPosition,\n ...others\n } = props;\n\n const _id = useId(id);\n const parsedData = getParsedComboboxData(data);\n const optionsLockup = getOptionsLockup(parsedData);\n const inputRef = useRef<HTMLInputElement>(null);\n const _ref = useMergedRef(inputRef, ref);\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n combobox.resetSelectedOption();\n },\n });\n\n const {\n styleProps,\n rest: { type, autoComplete, ...rest },\n } = extractStyleProps(others);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: [],\n onChange,\n });\n\n const [_searchValue, setSearchValue] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: '',\n onChange: onSearchChange,\n });\n\n const handleSearchChange = (value: string) => {\n setSearchValue(value);\n combobox.resetSelectedOption();\n };\n\n const getStyles = useStyles<TagsInputFactory>({\n name: 'TagsInput',\n classes: {} as any,\n props: props as any,\n classNames,\n styles,\n unstyled,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<TagsInputFactory>({\n props,\n styles,\n classNames,\n });\n\n const handleValueSelect = (val: string) => {\n const isDuplicated = isDuplicate\n ? isDuplicate(val, _value)\n : _value.some((tag) => tag.toLowerCase() === val.toLowerCase());\n\n if (isDuplicated) {\n onDuplicate?.(val);\n if (!allowDuplicates) {\n handleSearchChange('');\n return;\n }\n }\n\n if (_value.length >= maxTags) {\n onMaxTags?.(val);\n return;\n }\n\n onOptionSubmit?.(val);\n handleSearchChange('');\n if (val.length > 0) {\n setValue([..._value, val]);\n }\n };\n\n const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (event.isPropagationStopped()) {\n return;\n }\n\n const inputValue = _searchValue.trim();\n const { length } = inputValue;\n\n if (splitChars.includes(event.key) && length > 0) {\n setValue(\n getSplittedTags({\n splitChars,\n allowDuplicates,\n maxTags,\n value: _searchValue,\n currentTags: _value,\n isDuplicate,\n onDuplicate,\n })\n );\n handleSearchChange('');\n event.preventDefault();\n }\n\n if (event.key === 'Enter' && length > 0 && !event.nativeEvent.isComposing) {\n event.preventDefault();\n\n const hasActiveSelection = !!document.querySelector<HTMLDivElement>(\n `#${combobox.listId} [data-combobox-option][data-combobox-selected]`\n );\n\n if (hasActiveSelection) {\n return;\n }\n\n handleValueSelect(inputValue);\n }\n\n if (\n event.key === 'Backspace' &&\n length === 0 &&\n _value.length > 0 &&\n !event.nativeEvent.isComposing &&\n !readOnly\n ) {\n onRemove?.(_value[_value.length - 1]);\n setValue(_value.slice(0, _value.length - 1));\n }\n };\n\n const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n onPaste?.(event);\n event.preventDefault();\n\n if (event.clipboardData) {\n const pastedText = event.clipboardData.getData('text/plain');\n setValue(\n getSplittedTags({\n splitChars,\n allowDuplicates,\n maxTags,\n value: `${_searchValue}${pastedText}`,\n currentTags: _value,\n isDuplicate,\n onDuplicate,\n })\n );\n handleSearchChange('');\n }\n };\n\n const values = _value.map((item, index) => {\n const onRemoveItem = () => {\n const next_value = _value.slice();\n next_value.splice(index, 1);\n setValue(next_value);\n onRemove?.(item);\n };\n\n if (renderPill) {\n return (\n <Fragment key={`${item}-${index}`}>\n {renderPill({\n option: optionsLockup[item] || { value: item, label: item, disabled: false },\n value: item,\n onRemove: onRemoveItem,\n disabled: disabled || readOnly,\n })}\n </Fragment>\n );\n }\n\n return (\n <Pill\n key={`${item}-${index}`}\n withRemoveButton={!readOnly}\n onRemove={onRemoveItem}\n unstyled={unstyled}\n disabled={disabled}\n attributes={attributes}\n {...getStyles('pill')}\n >\n {item}\n </Pill>\n );\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, _value, _searchValue]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n setValue([]);\n handleSearchChange('');\n inputRef.current?.focus();\n combobox.openDropdown();\n onClear?.();\n }}\n />\n );\n\n return (\n <>\n <Combobox\n store={combobox}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n readOnly={readOnly}\n __staticSelector=\"TagsInput\"\n attributes={attributes}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val);\n handleSearchChange('');\n\n if (_value.length >= maxTags) {\n onMaxTags?.(val);\n } else {\n setValue([..._value, optionsLockup[val].value]);\n }\n\n combobox.resetSelectedOption();\n }}\n {...comboboxProps}\n >\n <Combobox.DropdownTarget>\n <PillsInput\n {...styleProps}\n __staticSelector=\"TagsInput\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n className={className}\n style={style}\n variant={variant}\n disabled={disabled}\n radius={radius}\n rightSection={rightSection}\n __clearSection={clearButton}\n __clearable={clearable && _value.length > 0 && !disabled && !readOnly}\n __clearSectionMode={clearSectionMode}\n rightSectionWidth={rightSectionWidth}\n rightSectionPointerEvents={rightSectionPointerEvents}\n rightSectionProps={rightSectionProps}\n leftSection={leftSection}\n leftSectionWidth={leftSectionWidth}\n leftSectionPointerEvents={leftSectionPointerEvents}\n leftSectionProps={leftSectionProps}\n loading={loading}\n loadingPosition={loadingPosition}\n inputContainer={inputContainer}\n inputWrapperOrder={inputWrapperOrder}\n withAsterisk={withAsterisk}\n required={required}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorProps={errorProps}\n wrapperProps={wrapperProps}\n description={description}\n label={label}\n error={error}\n withErrorStyles={withErrorStyles}\n __stylesApiProps={{ ...props, multiline: true }}\n id={_id}\n mod={mod}\n attributes={attributes}\n >\n <Pill.Group disabled={disabled} unstyled={unstyled} {...getStyles('pillsList')}>\n {values}\n <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n <PillsInput.Field\n {...rest}\n ref={_ref}\n {...getStyles('inputField')}\n unstyled={unstyled}\n onKeyDown={handleInputKeydown}\n onFocus={(event) => {\n onFocus?.(event);\n openOnFocus && combobox.openDropdown();\n }}\n onBlur={(event) => {\n onBlur?.(event);\n acceptValueOnBlur && handleValueSelect(_searchValue);\n combobox.closeDropdown();\n }}\n onPaste={handlePaste}\n value={_searchValue}\n onChange={(event) => handleSearchChange(event.currentTarget.value)}\n required={required && _value.length === 0}\n disabled={disabled}\n readOnly={readOnly}\n id={_id}\n />\n </Combobox.EventsTarget>\n </Pill.Group>\n </PillsInput>\n </Combobox.DropdownTarget>\n\n <OptionsDropdown\n data={filterPickedTags({ data: parsedData, value: _value })}\n hidden={readOnly || disabled}\n filter={filter as OptionsFilter<Primitive> | undefined}\n search={_searchValue}\n limit={limit}\n hiddenWhenEmpty\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n unstyled={unstyled}\n labelId={label ? `${_id}-label` : undefined}\n aria-label={label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n name={name}\n form={form}\n value={_value}\n valuesDivider={hiddenInputValuesDivider}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nTagsInput.classes = { ...InputBase.classes, ...Combobox.classes };\nTagsInput.displayName = '@mantine/core/TagsInput';\n\nexport namespace TagsInput {\n export type Props = TagsInputProps;\n export type StylesNames = TagsInputStylesNames;\n export type Factory = TagsInputFactory;\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TagsInput.mjs","names":["useId"],"sources":["../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport {\n Combobox,\n ComboboxGenericData,\n ComboboxGenericItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n ComboboxRenderPillInput,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n usePillsReorder,\n} from '../Combobox';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedTags } from './filter-picked-tags';\nimport { getSplittedTags } from './get-splitted-tags';\n\nexport type TagsInputStylesNames =\n | __InputStylesNames\n | ComboboxLikeStylesNames\n | 'pill'\n | 'pillsList'\n | 'inputField';\n\nexport interface TagsInputProps\n extends\n BoxProps,\n __BaseInputProps,\n Omit<ComboboxLikeProps, 'data'>,\n StylesApiProps<TagsInputFactory>,\n ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {\n /** Data displayed in the dropdown. Values must be unique. */\n data?: ComboboxGenericData;\n\n /** Controlled component value */\n value?: string[];\n\n /** Uncontrolled component default value */\n defaultValue?: string[];\n\n /** Called when value changes */\n onChange?: (value: string[]) => void;\n\n /** Called when tag is removed */\n onRemove?: (value: string) => void;\n\n /** Called when the clear button is clicked */\n onClear?: () => void;\n\n /** Controlled search value */\n searchValue?: string;\n\n /** Default search value */\n defaultSearchValue?: string;\n\n /** Called when search changes */\n onSearchChange?: (value: string) => void;\n\n /** Maximum number of tags @default Infinity */\n maxTags?: number;\n\n /** Called when user tries to add more tags than maxTags */\n onMaxTags?: (value: string) => void;\n\n /** If set, duplicate tags are allowed @default false */\n allowDuplicates?: boolean;\n\n /** Called when user tries to submit a duplicated tag */\n onDuplicate?: (value: string) => void;\n\n /** Characters that should trigger tags split, `[',']` by default */\n splitChars?: string[];\n\n /** If set, the clear button is displayed in the right section when the component has value @default false */\n clearable?: boolean;\n\n /** Determines how the clear button and rightSection are rendered @default 'both' */\n clearSectionMode?: ClearSectionMode;\n\n /** Props passed down to the clear button */\n clearButtonProps?: InputClearButtonProps;\n\n /** Props passed down to the hidden input */\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /** Divider used to separate values in the hidden input `value` attribute @default ',' */\n hiddenInputValuesDivider?: string;\n\n /** A function to render content of the option, replaces the default content of the option */\n renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>) => React.ReactNode;\n\n /** A function to render content of the pill, replaces the default content of the pill */\n renderPill?: (props: ComboboxRenderPillInput) => React.ReactNode;\n\n /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n scrollAreaProps?: ScrollAreaProps;\n\n /** If set, the value typed in by the user but not submitted is accepted when the input is blurred @default true */\n acceptValueOnBlur?: boolean;\n\n /** Custom function to determine if a tag is duplicate. Accepts tag value and array of current values. By default, checks if the tag exists case-insensitively. */\n isDuplicate?: (value: string, currentValues: string[]) => boolean;\n\n /** If set, the dropdown opens when the input receives focus @default true */\n openOnFocus?: boolean;\n\n /** If set, tags can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. @default false */\n withPillsReorder?: boolean;\n}\n\nexport type TagsInputFactory = Factory<{\n props: TagsInputProps;\n ref: HTMLInputElement;\n stylesNames: TagsInputStylesNames;\n}>;\n\nconst defaultProps = {\n maxTags: Infinity,\n acceptValueOnBlur: true,\n splitChars: [','],\n hiddenInputValuesDivider: ',',\n openOnFocus: true,\n size: 'sm',\n} satisfies Partial<TagsInputProps>;\n\nexport const TagsInput = factory<TagsInputFactory>((_props) => {\n const props = useProps(['Input', 'InputWrapper', 'TagsInput'], defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n size,\n value,\n defaultValue,\n onChange,\n onKeyDown,\n maxTags,\n allowDuplicates,\n onDuplicate,\n variant,\n data,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownOpen,\n onDropdownClose,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n readOnly,\n disabled,\n splitChars,\n onFocus,\n onBlur,\n onPaste,\n radius,\n rightSection,\n rightSectionWidth,\n rightSectionPointerEvents,\n rightSectionProps,\n leftSection,\n leftSectionWidth,\n leftSectionPointerEvents,\n leftSectionProps,\n inputContainer,\n inputWrapperOrder,\n withAsterisk,\n required,\n labelProps,\n descriptionProps,\n errorProps,\n wrapperProps,\n description,\n label,\n error,\n withErrorStyles,\n name,\n form,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n hiddenInputValuesDivider,\n mod,\n renderOption,\n renderPill,\n onRemove,\n onClear,\n onMaxTags,\n scrollAreaProps,\n acceptValueOnBlur,\n isDuplicate,\n openOnFocus,\n attributes,\n ref,\n loading,\n loadingPosition,\n withPillsReorder,\n ...others\n } = props;\n\n const _id = useId(id);\n const parsedData = getParsedComboboxData(data);\n const optionsLockup = getOptionsLockup(parsedData);\n const inputRef = useRef<HTMLInputElement>(null);\n const _ref = useMergedRef(inputRef, ref);\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n combobox.resetSelectedOption();\n },\n });\n\n const {\n styleProps,\n rest: { type, autoComplete, ...rest },\n } = extractStyleProps(others);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: [],\n onChange,\n });\n\n const { getPillProps, getListProps, handleInputKeyDown } = usePillsReorder({\n value: _value,\n onChange: setValue,\n enabled: withPillsReorder && !disabled && !readOnly,\n });\n\n const [_searchValue, setSearchValue] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: '',\n onChange: onSearchChange,\n });\n\n const handleSearchChange = (value: string) => {\n setSearchValue(value);\n combobox.resetSelectedOption();\n };\n\n const getStyles = useStyles<TagsInputFactory>({\n name: 'TagsInput',\n classes: {} as any,\n props: props as any,\n classNames,\n styles,\n unstyled,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<TagsInputFactory>({\n props,\n styles,\n classNames,\n });\n\n const handleValueSelect = (val: string) => {\n const isDuplicated = isDuplicate\n ? isDuplicate(val, _value)\n : _value.some((tag) => tag.toLowerCase() === val.toLowerCase());\n\n if (isDuplicated) {\n onDuplicate?.(val);\n if (!allowDuplicates) {\n handleSearchChange('');\n return;\n }\n }\n\n if (_value.length >= maxTags) {\n onMaxTags?.(val);\n return;\n }\n\n onOptionSubmit?.(val);\n handleSearchChange('');\n if (val.length > 0) {\n setValue([..._value, val]);\n }\n };\n\n const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (event.defaultPrevented || event.isPropagationStopped()) {\n return;\n }\n\n const inputValue = _searchValue.trim();\n const { length } = inputValue;\n\n if (splitChars.includes(event.key) && length > 0) {\n setValue(\n getSplittedTags({\n splitChars,\n allowDuplicates,\n maxTags,\n value: _searchValue,\n currentTags: _value,\n isDuplicate,\n onDuplicate,\n })\n );\n handleSearchChange('');\n event.preventDefault();\n }\n\n if (event.key === 'Enter' && length > 0 && !event.nativeEvent.isComposing) {\n event.preventDefault();\n\n const hasActiveSelection = !!document.querySelector<HTMLDivElement>(\n `#${combobox.listId} [data-combobox-option][data-combobox-selected]`\n );\n\n if (hasActiveSelection) {\n return;\n }\n\n handleValueSelect(inputValue);\n }\n\n if (\n event.key === 'Backspace' &&\n length === 0 &&\n _value.length > 0 &&\n !event.nativeEvent.isComposing &&\n !readOnly\n ) {\n onRemove?.(_value[_value.length - 1]);\n setValue(_value.slice(0, _value.length - 1));\n }\n\n handleInputKeyDown(event);\n };\n\n const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n onPaste?.(event);\n event.preventDefault();\n\n if (event.clipboardData) {\n const pastedText = event.clipboardData.getData('text/plain');\n setValue(\n getSplittedTags({\n splitChars,\n allowDuplicates,\n maxTags,\n value: `${_searchValue}${pastedText}`,\n currentTags: _value,\n isDuplicate,\n onDuplicate,\n })\n );\n handleSearchChange('');\n }\n };\n\n const values = _value.map((item, index) => {\n const onRemoveItem = () => {\n const next_value = _value.slice();\n next_value.splice(index, 1);\n setValue(next_value);\n onRemove?.(item);\n };\n\n const reorderProps = getPillProps(index);\n\n if (renderPill) {\n return (\n <Fragment key={`${item}-${index}`}>\n {renderPill({\n option: optionsLockup[item] || { value: item, label: item, disabled: false },\n value: item,\n onRemove: onRemoveItem,\n disabled: disabled || readOnly,\n reorderProps,\n })}\n </Fragment>\n );\n }\n\n return (\n <Pill\n key={`${item}-${index}`}\n withRemoveButton={!readOnly}\n onRemove={onRemoveItem}\n unstyled={unstyled}\n disabled={disabled}\n attributes={attributes}\n {...getStyles('pill')}\n {...reorderProps}\n >\n {item}\n </Pill>\n );\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, _value, _searchValue]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n setValue([]);\n handleSearchChange('');\n inputRef.current?.focus();\n combobox.openDropdown();\n onClear?.();\n }}\n />\n );\n\n return (\n <>\n <Combobox\n store={combobox}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n readOnly={readOnly}\n __staticSelector=\"TagsInput\"\n attributes={attributes}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val);\n handleSearchChange('');\n\n if (_value.length >= maxTags) {\n onMaxTags?.(val);\n } else {\n setValue([..._value, optionsLockup[val].value]);\n }\n\n combobox.resetSelectedOption();\n }}\n {...comboboxProps}\n >\n <Combobox.DropdownTarget>\n <PillsInput\n {...styleProps}\n __staticSelector=\"TagsInput\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n className={className}\n style={style}\n variant={variant}\n disabled={disabled}\n radius={radius}\n rightSection={rightSection}\n __clearSection={clearButton}\n __clearable={clearable && _value.length > 0 && !disabled && !readOnly}\n __clearSectionMode={clearSectionMode}\n rightSectionWidth={rightSectionWidth}\n rightSectionPointerEvents={rightSectionPointerEvents}\n rightSectionProps={rightSectionProps}\n leftSection={leftSection}\n leftSectionWidth={leftSectionWidth}\n leftSectionPointerEvents={leftSectionPointerEvents}\n leftSectionProps={leftSectionProps}\n loading={loading}\n loadingPosition={loadingPosition}\n inputContainer={inputContainer}\n inputWrapperOrder={inputWrapperOrder}\n withAsterisk={withAsterisk}\n required={required}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorProps={errorProps}\n wrapperProps={wrapperProps}\n description={description}\n label={label}\n error={error}\n withErrorStyles={withErrorStyles}\n __stylesApiProps={{ ...props, multiline: true }}\n id={_id}\n mod={mod}\n attributes={attributes}\n >\n <Pill.Group\n disabled={disabled}\n unstyled={unstyled}\n {...getStyles('pillsList')}\n {...getListProps()}\n >\n {values}\n <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n <PillsInput.Field\n {...rest}\n ref={_ref}\n {...getStyles('inputField')}\n unstyled={unstyled}\n onKeyDown={handleInputKeydown}\n onFocus={(event) => {\n onFocus?.(event);\n openOnFocus && combobox.openDropdown();\n }}\n onBlur={(event) => {\n onBlur?.(event);\n acceptValueOnBlur && handleValueSelect(_searchValue);\n combobox.closeDropdown();\n }}\n onPaste={handlePaste}\n value={_searchValue}\n onChange={(event) => handleSearchChange(event.currentTarget.value)}\n required={required && _value.length === 0}\n disabled={disabled}\n readOnly={readOnly}\n id={_id}\n />\n </Combobox.EventsTarget>\n </Pill.Group>\n </PillsInput>\n </Combobox.DropdownTarget>\n\n <OptionsDropdown\n data={filterPickedTags({ data: parsedData, value: _value })}\n hidden={readOnly || disabled}\n filter={filter as OptionsFilter<Primitive> | undefined}\n search={_searchValue}\n limit={limit}\n hiddenWhenEmpty\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n unstyled={unstyled}\n labelId={label ? `${_id}-label` : undefined}\n aria-label={label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n name={name}\n form={form}\n value={_value}\n valuesDivider={hiddenInputValuesDivider}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nTagsInput.classes = { ...InputBase.classes, ...Combobox.classes };\nTagsInput.displayName = '@mantine/core/TagsInput';\n\nexport namespace TagsInput {\n export type Props = TagsInputProps;\n export type StylesNames = TagsInputStylesNames;\n export type Factory = TagsInputFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6IA,MAAM,eAAe;CACnB,SAAS;CACT,mBAAmB;CACnB,YAAY,CAAC,IAAI;CACjB,0BAA0B;CAC1B,aAAa;CACb,MAAM;CACP;AAED,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS;EAAC;EAAS;EAAgB;EAAY,EAAE,cAAc,OAAO;CACpF,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,OACA,cACA,UACA,WACA,SACA,iBACA,aACA,SACA,MACA,gBACA,uBACA,gBACA,iBACA,2BACA,iCACA,gBACA,eACA,QACA,OACA,gBACA,mBACA,aACA,oBACA,gBACA,UACA,UACA,YACA,SACA,QACA,SACA,QACA,cACA,mBACA,2BACA,mBACA,aACA,kBACA,0BACA,kBACA,gBACA,mBACA,cACA,UACA,YACA,kBACA,YACA,cACA,aACA,OACA,OACA,iBACA,MACA,MACA,IACA,WACA,kBACA,kBACA,kBACA,0BACA,KACA,cACA,YACA,UACA,SACA,WACA,iBACA,mBACA,aACA,aACA,YACA,KACA,SACA,iBACA,kBACA,GAAG,WACD;CAEJ,MAAM,MAAMA,QAAM,GAAG;CACrB,MAAM,aAAa,sBAAsB,KAAK;CAC9C,MAAM,gBAAgB,iBAAiB,WAAW;CAClD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,OAAO,aAAa,UAAU,IAAI;CAExC,MAAM,WAAW,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;AACpB,qBAAkB;AAClB,OAAI,gCACF,UAAS,mBAAmB;;EAGhC,uBAAuB;AACrB,sBAAmB;AACnB,YAAS,qBAAqB;;EAEjC,CAAC;CAEF,MAAM,EACJ,YACA,MAAM,EAAE,MAAM,cAAc,GAAG,WAC7B,kBAAkB,OAAO;CAE7B,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,EAAE;EACd;EACD,CAAC;CAEF,MAAM,EAAE,cAAc,cAAc,uBAAuB,gBAAgB;EACzE,OAAO;EACP,UAAU;EACV,SAAS,oBAAoB,CAAC,YAAY,CAAC;EAC5C,CAAC;CAEF,MAAM,CAAC,cAAc,kBAAkB,gBAAgB;EACrD,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;EACX,CAAC;CAEF,MAAM,sBAAsB,UAAkB;AAC5C,iBAAe,MAAM;AACrB,WAAS,qBAAqB;;CAGhC,MAAM,YAAY,UAA4B;EAC5C,MAAM;EACN,SAAS,EAAE;EACJ;EACP;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,oBAAoB,mBAAmB,qBAAuC;EACpF;EACA;EACA;EACD,CAAC;CAEF,MAAM,qBAAqB,QAAgB;AAKzC,MAJqB,cACjB,YAAY,KAAK,OAAO,GACxB,OAAO,MAAM,QAAQ,IAAI,aAAa,KAAK,IAAI,aAAa,CAAC,EAE/C;AAChB,iBAAc,IAAI;AAClB,OAAI,CAAC,iBAAiB;AACpB,uBAAmB,GAAG;AACtB;;;AAIJ,MAAI,OAAO,UAAU,SAAS;AAC5B,eAAY,IAAI;AAChB;;AAGF,mBAAiB,IAAI;AACrB,qBAAmB,GAAG;AACtB,MAAI,IAAI,SAAS,EACf,UAAS,CAAC,GAAG,QAAQ,IAAI,CAAC;;CAI9B,MAAM,sBAAsB,UAAiD;AAC3E,cAAY,MAAM;AAElB,MAAI,MAAM,oBAAoB,MAAM,sBAAsB,CACxD;EAGF,MAAM,aAAa,aAAa,MAAM;EACtC,MAAM,EAAE,WAAW;AAEnB,MAAI,WAAW,SAAS,MAAM,IAAI,IAAI,SAAS,GAAG;AAChD,YACE,gBAAgB;IACd;IACA;IACA;IACA,OAAO;IACP,aAAa;IACb;IACA;IACD,CAAC,CACH;AACD,sBAAmB,GAAG;AACtB,SAAM,gBAAgB;;AAGxB,MAAI,MAAM,QAAQ,WAAW,SAAS,KAAK,CAAC,MAAM,YAAY,aAAa;AACzE,SAAM,gBAAgB;AAMtB,OAJ2B,CAAC,CAAC,SAAS,cACpC,IAAI,SAAS,OAAO,iDACrB,CAGC;AAGF,qBAAkB,WAAW;;AAG/B,MACE,MAAM,QAAQ,eACd,WAAW,KACX,OAAO,SAAS,KAChB,CAAC,MAAM,YAAY,eACnB,CAAC,UACD;AACA,cAAW,OAAO,OAAO,SAAS,GAAG;AACrC,YAAS,OAAO,MAAM,GAAG,OAAO,SAAS,EAAE,CAAC;;AAG9C,qBAAmB,MAAM;;CAG3B,MAAM,eAAe,UAAkD;AACrE,YAAU,MAAM;AAChB,QAAM,gBAAgB;AAEtB,MAAI,MAAM,eAAe;AAEvB,YACE,gBAAgB;IACd;IACA;IACA;IACA,OAAO,GAAG,eANK,MAAM,cAAc,QAAQ,aAAa;IAOxD,aAAa;IACb;IACA;IACD,CAAC,CACH;AACD,sBAAmB,GAAG;;;CAI1B,MAAM,SAAS,OAAO,KAAK,MAAM,UAAU;EACzC,MAAM,qBAAqB;GACzB,MAAM,aAAa,OAAO,OAAO;AACjC,cAAW,OAAO,OAAO,EAAE;AAC3B,YAAS,WAAW;AACpB,cAAW,KAAK;;EAGlB,MAAM,eAAe,aAAa,MAAM;AAExC,MAAI,WACF,QACE,oBAAC,UAAD,EAAA,UACG,WAAW;GACV,QAAQ,cAAc,SAAS;IAAE,OAAO;IAAM,OAAO;IAAM,UAAU;IAAO;GAC5E,OAAO;GACP,UAAU;GACV,UAAU,YAAY;GACtB;GACD,CAAC,EACO,EARI,GAAG,KAAK,GAAG,QAQf;AAIf,SACE,oBAAC,MAAD;GAEE,kBAAkB,CAAC;GACnB,UAAU;GACA;GACA;GACE;GACZ,GAAI,UAAU,OAAO;GACrB,GAAI;aAEH;GACI,EAVA,GAAG,KAAK,GAAG,QAUX;GAET;AAEF,iBAAgB;AACd,MAAI,0BACF,UAAS,mBAAmB;IAE7B;EAAC;EAA2B;EAAQ;EAAa,CAAC;CAErD,MAAM,cACJ,oBAAC,SAAS,aAAV;EACE,GAAI;EACJ,eAAe;AACb,YAAS,EAAE,CAAC;AACZ,sBAAmB,GAAG;AACtB,YAAS,SAAS,OAAO;AACzB,YAAS,cAAc;AACvB,cAAW;;EAEb,CAAA;AAGJ,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,UAAD;EACE,OAAO;EACP,YAAY;EACZ,QAAQ;EACE;EACJ;EACI;EACV,kBAAiB;EACL;EACZ,iBAAiB,QAAQ;AACvB,oBAAiB,IAAI;AACrB,sBAAmB,GAAG;AAEtB,OAAI,OAAO,UAAU,QACnB,aAAY,IAAI;OAEhB,UAAS,CAAC,GAAG,QAAQ,cAAc,KAAK,MAAM,CAAC;AAGjD,YAAS,qBAAqB;;EAEhC,GAAI;YArBN,CAuBE,oBAAC,SAAS,gBAAV,EAAA,UACE,oBAAC,YAAD;GACE,GAAI;GACJ,kBAAiB;GACjB,YAAY;GACZ,QAAQ;GACE;GACJ;GACK;GACJ;GACE;GACC;GACF;GACM;GACd,gBAAgB;GAChB,aAAa,aAAa,OAAO,SAAS,KAAK,CAAC,YAAY,CAAC;GAC7D,oBAAoB;GACD;GACQ;GACR;GACN;GACK;GACQ;GACR;GACT;GACQ;GACD;GACG;GACL;GACJ;GACE;GACM;GACN;GACE;GACD;GACN;GACA;GACU;GACjB,kBAAkB;IAAE,GAAG;IAAO,WAAW;IAAM;GAC/C,IAAI;GACC;GACO;aAEZ,qBAAC,KAAK,OAAN;IACY;IACA;IACV,GAAI,UAAU,YAAY;IAC1B,GAAI,cAAc;cAJpB,CAMG,QACD,oBAAC,SAAS,cAAV;KAAqC;KAAc,uBAAA;eACjD,oBAAC,WAAW,OAAZ;MACE,GAAI;MACJ,KAAK;MACL,GAAI,UAAU,aAAa;MACjB;MACV,WAAW;MACX,UAAU,UAAU;AAClB,iBAAU,MAAM;AAChB,sBAAe,SAAS,cAAc;;MAExC,SAAS,UAAU;AACjB,gBAAS,MAAM;AACf,4BAAqB,kBAAkB,aAAa;AACpD,gBAAS,eAAe;;MAE1B,SAAS;MACT,OAAO;MACP,WAAW,UAAU,mBAAmB,MAAM,cAAc,MAAM;MAClE,UAAU,YAAY,OAAO,WAAW;MAC9B;MACA;MACV,IAAI;MACJ,CAAA;KACoB,CAAA,CACb;;GACF,CAAA,EACW,CAAA,EAE1B,oBAAC,iBAAD;GACE,MAAM,iBAAiB;IAAE,MAAM;IAAY,OAAO;IAAQ,CAAC;GAC3D,QAAQ,YAAY;GACZ;GACR,QAAQ;GACD;GACP,iBAAA;GACgB;GACG;GACT;GACV,SAAS,QAAQ,GAAG,IAAI,UAAU,KAAA;GAClC,cAAY,QAAQ,KAAA,IAAY,OAAO;GACzB;GACG;GACjB,CAAA,CACO;KACX,oBAAC,SAAS,aAAV;EACQ;EACA;EACN,OAAO;EACP,eAAe;EACL;EACV,GAAI;EACJ,CAAA,CACD,EAAA,CAAA;EAEL;AAEF,UAAU,UAAU;CAAE,GAAG,UAAU;CAAS,GAAG,SAAS;CAAS;AACjE,UAAU,cAAc"}
|
|
@@ -7,7 +7,11 @@ import { jsx } from "react/jsx-runtime";
|
|
|
7
7
|
const TextInput = factory((props) => {
|
|
8
8
|
return /* @__PURE__ */ jsx(InputBase, {
|
|
9
9
|
component: "input",
|
|
10
|
-
...useProps(
|
|
10
|
+
...useProps([
|
|
11
|
+
"Input",
|
|
12
|
+
"InputWrapper",
|
|
13
|
+
"TextInput"
|
|
14
|
+
], null, props),
|
|
11
15
|
__staticSelector: "TextInput"
|
|
12
16
|
});
|
|
13
17
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.mjs","names":[],"sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["import { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\n\nexport interface TextInputProps\n extends\n BoxProps,\n __BaseInputProps,\n StylesApiProps<TextInputFactory>,\n ElementProps<'input', 'size'> {}\n\nexport type TextInputFactory = Factory<{\n props: TextInputProps;\n variant: InputVariant;\n ref: HTMLInputElement;\n stylesNames: __InputStylesNames;\n}>;\n\nexport const TextInput = factory<TextInputFactory>((props) => {\n const _props = useProps('TextInput', null, props);\n return <InputBase component=\"input\" {..._props} __staticSelector=\"TextInput\" />;\n});\n\nTextInput.classes = InputBase.classes;\nTextInput.displayName = '@mantine/core/TextInput';\n\nexport namespace TextInput {\n export type Props = TextInputProps;\n export type Factory = TextInputFactory;\n}\n"],"mappings":";;;;;;AAkBA,MAAa,YAAY,SAA2B,UAAU;AAE5D,QAAO,oBAAC,WAAD;EAAW,WAAU;EAAQ,GADrB,SAAS,
|
|
1
|
+
{"version":3,"file":"TextInput.mjs","names":[],"sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["import { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\n\nexport interface TextInputProps\n extends\n BoxProps,\n __BaseInputProps,\n StylesApiProps<TextInputFactory>,\n ElementProps<'input', 'size'> {}\n\nexport type TextInputFactory = Factory<{\n props: TextInputProps;\n variant: InputVariant;\n ref: HTMLInputElement;\n stylesNames: __InputStylesNames;\n}>;\n\nexport const TextInput = factory<TextInputFactory>((props) => {\n const _props = useProps(['Input', 'InputWrapper', 'TextInput'], null, props);\n return <InputBase component=\"input\" {..._props} __staticSelector=\"TextInput\" />;\n});\n\nTextInput.classes = InputBase.classes;\nTextInput.displayName = '@mantine/core/TextInput';\n\nexport namespace TextInput {\n export type Props = TextInputProps;\n export type Factory = TextInputFactory;\n}\n"],"mappings":";;;;;;AAkBA,MAAa,YAAY,SAA2B,UAAU;AAE5D,QAAO,oBAAC,WAAD;EAAW,WAAU;EAAQ,GADrB,SAAS;GAAC;GAAS;GAAgB;GAAY,EAAE,MAAM,MAAM;EAC5B,kBAAiB;EAAc,CAAA;EAC/E;AAEF,UAAU,UAAU,UAAU;AAC9B,UAAU,cAAc"}
|
|
@@ -6,9 +6,12 @@ import { InputBase } from "../InputBase/InputBase.mjs";
|
|
|
6
6
|
import { TextareaAutosize } from "./Autosize.mjs";
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|
|
8
8
|
//#region packages/@mantine/core/src/components/Textarea/Textarea.tsx
|
|
9
|
-
const defaultProps = { size: "sm" };
|
|
10
9
|
const Textarea = factory((props) => {
|
|
11
|
-
const { autosize, maxRows, minRows, __staticSelector, resize, ...others } = useProps(
|
|
10
|
+
const { autosize, maxRows, minRows, __staticSelector, resize, ...others } = useProps([
|
|
11
|
+
"Input",
|
|
12
|
+
"InputWrapper",
|
|
13
|
+
"Textarea"
|
|
14
|
+
], null, props);
|
|
12
15
|
const shouldAutosize = autosize && getEnv() !== "test";
|
|
13
16
|
const autosizeProps = shouldAutosize ? {
|
|
14
17
|
maxRows,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.mjs","names":[],"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import {\n BoxProps,\n ElementProps,\n factory,\n Factory,\n getEnv,\n StylesApiProps,\n useProps,\n} from '../../core';\nimport { __BaseInputProps, __InputStylesNames } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { TextareaAutosize } from './Autosize';\n\nexport interface TextareaProps\n extends\n BoxProps,\n __BaseInputProps,\n StylesApiProps<TextareaFactory>,\n ElementProps<'textarea', 'size'> {\n __staticSelector?: string;\n\n /** If set, enables textarea height growing with its content @default false */\n autosize?: boolean;\n\n /** Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set */\n maxRows?: number;\n\n /** Minimum rows of autosize textarea, ignored if `autosize` prop is not set */\n minRows?: number;\n\n /** Controls `resize` CSS property @default 'none' */\n resize?: React.CSSProperties['resize'];\n}\n\nexport type TextareaFactory = Factory<{\n props: TextareaProps;\n ref: HTMLTextAreaElement;\n stylesNames: __InputStylesNames;\n}>;\n\
|
|
1
|
+
{"version":3,"file":"Textarea.mjs","names":[],"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import {\n BoxProps,\n ElementProps,\n factory,\n Factory,\n getEnv,\n StylesApiProps,\n useProps,\n} from '../../core';\nimport { __BaseInputProps, __InputStylesNames } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { TextareaAutosize } from './Autosize';\n\nexport interface TextareaProps\n extends\n BoxProps,\n __BaseInputProps,\n StylesApiProps<TextareaFactory>,\n ElementProps<'textarea', 'size'> {\n __staticSelector?: string;\n\n /** If set, enables textarea height growing with its content @default false */\n autosize?: boolean;\n\n /** Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set */\n maxRows?: number;\n\n /** Minimum rows of autosize textarea, ignored if `autosize` prop is not set */\n minRows?: number;\n\n /** Controls `resize` CSS property @default 'none' */\n resize?: React.CSSProperties['resize'];\n}\n\nexport type TextareaFactory = Factory<{\n props: TextareaProps;\n ref: HTMLTextAreaElement;\n stylesNames: __InputStylesNames;\n}>;\n\nexport const Textarea = factory<TextareaFactory>((props) => {\n const { autosize, maxRows, minRows, __staticSelector, resize, ...others } = useProps(\n ['Input', 'InputWrapper', 'Textarea'],\n null,\n props\n );\n\n const shouldAutosize = autosize && getEnv() !== 'test';\n const autosizeProps = shouldAutosize ? { maxRows, minRows } : {};\n\n return (\n <InputBase<any>\n component={shouldAutosize ? TextareaAutosize : 'textarea'}\n {...others}\n __staticSelector={__staticSelector || 'Textarea'}\n multiline\n data-no-overflow={(autosize && maxRows === undefined) || undefined}\n __vars={{ '--input-resize': resize }}\n {...autosizeProps}\n />\n );\n});\n\nTextarea.classes = InputBase.classes;\nTextarea.displayName = '@mantine/core/Textarea';\n\nexport namespace Textarea {\n export type Props = TextareaProps;\n export type Factory = TextareaFactory;\n}\n"],"mappings":";;;;;;;;AAwCA,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EAAE,UAAU,SAAS,SAAS,kBAAkB,QAAQ,GAAG,WAAW,SAC1E;EAAC;EAAS;EAAgB;EAAW,EACrC,MACA,MACD;CAED,MAAM,iBAAiB,YAAY,QAAQ,KAAK;CAChD,MAAM,gBAAgB,iBAAiB;EAAE;EAAS;EAAS,GAAG,EAAE;AAEhE,QACE,oBAAC,WAAD;EACE,WAAW,iBAAiB,mBAAmB;EAC/C,GAAI;EACJ,kBAAkB,oBAAoB;EACtC,WAAA;EACA,oBAAmB,YAAY,YAAY,KAAA,KAAc,KAAA;EACzD,QAAQ,EAAE,kBAAkB,QAAQ;EACpC,GAAI;EACJ,CAAA;EAEJ;AAEF,SAAS,UAAU,UAAU;AAC7B,SAAS,cAAc"}
|
|
@@ -9,6 +9,6 @@ function isNodeChecked(value, data, checkedState) {
|
|
|
9
9
|
}
|
|
10
10
|
const memoizedIsNodeChecked = memoize(isNodeChecked);
|
|
11
11
|
//#endregion
|
|
12
|
-
export { memoizedIsNodeChecked };
|
|
12
|
+
export { isNodeChecked, memoizedIsNodeChecked };
|
|
13
13
|
|
|
14
14
|
//# sourceMappingURL=is-node-checked.mjs.map
|
|
@@ -8,6 +8,6 @@ function isNodeIndeterminate(value, data, checkedState) {
|
|
|
8
8
|
}
|
|
9
9
|
const memoizedIsNodeIndeterminate = memoize(isNodeIndeterminate);
|
|
10
10
|
//#endregion
|
|
11
|
-
export { memoizedIsNodeIndeterminate };
|
|
11
|
+
export { isNodeIndeterminate, memoizedIsNodeIndeterminate };
|
|
12
12
|
|
|
13
13
|
//# sourceMappingURL=is-node-indeterminate.mjs.map
|