@mantine/core 7.0.1-alpha.1 → 7.0.2
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/Combobox/OptionsDropdown/OptionsDropdown.js +11 -1
- package/cjs/components/Combobox/OptionsDropdown/OptionsDropdown.js.map +1 -1
- package/cjs/index.css +1 -1
- package/esm/components/Combobox/OptionsDropdown/OptionsDropdown.mjs +11 -1
- package/esm/components/Combobox/OptionsDropdown/OptionsDropdown.mjs.map +1 -1
- package/esm/index.css +1 -1
- package/esm/styles/Input.css +1 -1
- package/package.json +2 -2
|
@@ -39,7 +39,17 @@ function Option({ data, withCheckIcon, value, checkIconPosition, unstyled }) {
|
|
|
39
39
|
checkIconPosition === "right" && check
|
|
40
40
|
);
|
|
41
41
|
}
|
|
42
|
-
const options = data.items.map((item) => /* @__PURE__ */ React__default.createElement(
|
|
42
|
+
const options = data.items.map((item) => /* @__PURE__ */ React__default.createElement(
|
|
43
|
+
Option,
|
|
44
|
+
{
|
|
45
|
+
data: item,
|
|
46
|
+
value,
|
|
47
|
+
key: item.value,
|
|
48
|
+
unstyled,
|
|
49
|
+
withCheckIcon,
|
|
50
|
+
checkIconPosition
|
|
51
|
+
}
|
|
52
|
+
));
|
|
43
53
|
return /* @__PURE__ */ React__default.createElement(Combobox.Combobox.Group, { label: data.group }, options);
|
|
44
54
|
}
|
|
45
55
|
function OptionsDropdown({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionsDropdown.js","sources":["../../../../src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { CheckIcon } from '../../Checkbox';\nimport { Combobox } from '../Combobox';\nimport { ComboboxItem, ComboboxParsedItem } from '../Combobox.types';\nimport { defaultOptionsFilter, FilterOptionsInput } from './default-options-filter';\nimport { isEmptyComboboxData } from './is-empty-combobox-data';\nimport { isOptionsGroup } from './is-options-group';\nimport { validateOptions } from './validate-options';\nimport classes from '../Combobox.module.css';\n\nexport type OptionsFilter = (input: FilterOptionsInput) => ComboboxParsedItem[];\n\nexport interface OptionsGroup {\n group: string;\n items: ComboboxItem[];\n}\n\nexport type OptionsData = (ComboboxItem | OptionsGroup)[];\n\ninterface OptionProps {\n data: ComboboxItem | OptionsGroup;\n withCheckIcon?: boolean;\n value?: string | string[] | null;\n checkIconPosition?: 'left' | 'right';\n unstyled: boolean | undefined;\n}\n\nfunction isValueChecked(value: string | string[] | undefined | null, optionValue: string) {\n return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\nfunction Option({ data, withCheckIcon, value, checkIconPosition, unstyled }: OptionProps) {\n if (!isOptionsGroup(data)) {\n const check = withCheckIcon && isValueChecked(value, data.value) && (\n <CheckIcon className={classes.optionsDropdownCheckIcon} />\n );\n return (\n <Combobox.Option\n value={data.value}\n disabled={data.disabled}\n className={cx({ [classes.optionsDropdownOption]: !unstyled })}\n data-reverse={checkIconPosition === 'right' || undefined}\n data-checked={isValueChecked(value, data.value) || undefined}\n aria-selected={isValueChecked(value, data.value)}\n >\n {checkIconPosition === 'left' && check}\n {data.label}\n {checkIconPosition === 'right' && check}\n </Combobox.Option>\n );\n }\n\n const options = data.items.map((item) => (\n <Option
|
|
1
|
+
{"version":3,"file":"OptionsDropdown.js","sources":["../../../../src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { CheckIcon } from '../../Checkbox';\nimport { Combobox } from '../Combobox';\nimport { ComboboxItem, ComboboxParsedItem } from '../Combobox.types';\nimport { defaultOptionsFilter, FilterOptionsInput } from './default-options-filter';\nimport { isEmptyComboboxData } from './is-empty-combobox-data';\nimport { isOptionsGroup } from './is-options-group';\nimport { validateOptions } from './validate-options';\nimport classes from '../Combobox.module.css';\n\nexport type OptionsFilter = (input: FilterOptionsInput) => ComboboxParsedItem[];\n\nexport interface OptionsGroup {\n group: string;\n items: ComboboxItem[];\n}\n\nexport type OptionsData = (ComboboxItem | OptionsGroup)[];\n\ninterface OptionProps {\n data: ComboboxItem | OptionsGroup;\n withCheckIcon?: boolean;\n value?: string | string[] | null;\n checkIconPosition?: 'left' | 'right';\n unstyled: boolean | undefined;\n}\n\nfunction isValueChecked(value: string | string[] | undefined | null, optionValue: string) {\n return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\nfunction Option({ data, withCheckIcon, value, checkIconPosition, unstyled }: OptionProps) {\n if (!isOptionsGroup(data)) {\n const check = withCheckIcon && isValueChecked(value, data.value) && (\n <CheckIcon className={classes.optionsDropdownCheckIcon} />\n );\n return (\n <Combobox.Option\n value={data.value}\n disabled={data.disabled}\n className={cx({ [classes.optionsDropdownOption]: !unstyled })}\n data-reverse={checkIconPosition === 'right' || undefined}\n data-checked={isValueChecked(value, data.value) || undefined}\n aria-selected={isValueChecked(value, data.value)}\n >\n {checkIconPosition === 'left' && check}\n {data.label}\n {checkIconPosition === 'right' && check}\n </Combobox.Option>\n );\n }\n\n const options = data.items.map((item) => (\n <Option\n data={item}\n value={value}\n key={item.value}\n unstyled={unstyled}\n withCheckIcon={withCheckIcon}\n checkIconPosition={checkIconPosition}\n />\n ));\n\n return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n}\n\nexport interface OptionsDropdownProps {\n data: OptionsData;\n filter: OptionsFilter | undefined;\n search: string | undefined;\n limit: number | undefined;\n withScrollArea: boolean | undefined;\n maxDropdownHeight: number | string | undefined;\n hidden?: boolean;\n hiddenWhenEmpty?: boolean;\n filterOptions?: boolean;\n withCheckIcon?: boolean;\n value?: string | string[] | null;\n checkIconPosition?: 'left' | 'right';\n nothingFoundMessage?: React.ReactNode;\n unstyled: boolean | undefined;\n labelId: string;\n}\n\nexport function OptionsDropdown({\n data,\n hidden,\n hiddenWhenEmpty,\n filter,\n search,\n limit,\n maxDropdownHeight,\n withScrollArea = true,\n filterOptions = true,\n withCheckIcon = false,\n value,\n checkIconPosition,\n nothingFoundMessage,\n unstyled,\n labelId,\n}: OptionsDropdownProps) {\n validateOptions(data);\n\n const shouldFilter = typeof search === 'string';\n const filteredData = shouldFilter\n ? (filter || defaultOptionsFilter)({\n options: data,\n search: filterOptions ? search : '',\n limit: limit ?? Infinity,\n })\n : data;\n const isEmpty = isEmptyComboboxData(filteredData);\n\n const options = filteredData.map((item) => (\n <Option\n data={item}\n key={isOptionsGroup(item) ? item.group : item.value}\n withCheckIcon={withCheckIcon}\n value={value}\n checkIconPosition={checkIconPosition}\n unstyled={unstyled}\n />\n ));\n\n return (\n <Combobox.Dropdown hidden={hidden || (hiddenWhenEmpty && isEmpty)}>\n <Combobox.Options labelledBy={labelId}>\n {withScrollArea ? (\n <ScrollArea.Autosize\n mah={maxDropdownHeight ?? 220}\n type=\"scroll\"\n scrollbarSize=\"var(--_combobox-padding)\"\n offsetScrollbars=\"y\"\n className={classes.optionsDropdownScrollArea}\n >\n {options}\n </ScrollArea.Autosize>\n ) : (\n options\n )}\n {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n </Combobox.Options>\n </Combobox.Dropdown>\n );\n}\n"],"names":["isOptionsGroup","React","CheckIcon","classes","Combobox","cx","validateOptions","defaultOptionsFilter","isEmptyComboboxData","ScrollArea"],"mappings":"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"}
|
package/cjs/index.css
CHANGED
|
@@ -1364,7 +1364,7 @@ body {
|
|
|
1364
1364
|
background-color: var(--_input-bg);
|
|
1365
1365
|
font-family: var(--_input-font-family, var(--mantine-font-family));
|
|
1366
1366
|
height: var(--_input-size);
|
|
1367
|
-
min-height: var(--
|
|
1367
|
+
min-height: var(--_input-height);
|
|
1368
1368
|
line-height: var(--_input-line-height);
|
|
1369
1369
|
font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-sm)));
|
|
1370
1370
|
border-radius: var(--_input-radius);
|
|
@@ -30,7 +30,17 @@ function Option({ data, withCheckIcon, value, checkIconPosition, unstyled }) {
|
|
|
30
30
|
checkIconPosition === "right" && check
|
|
31
31
|
);
|
|
32
32
|
}
|
|
33
|
-
const options = data.items.map((item) => /* @__PURE__ */ React.createElement(
|
|
33
|
+
const options = data.items.map((item) => /* @__PURE__ */ React.createElement(
|
|
34
|
+
Option,
|
|
35
|
+
{
|
|
36
|
+
data: item,
|
|
37
|
+
value,
|
|
38
|
+
key: item.value,
|
|
39
|
+
unstyled,
|
|
40
|
+
withCheckIcon,
|
|
41
|
+
checkIconPosition
|
|
42
|
+
}
|
|
43
|
+
));
|
|
34
44
|
return /* @__PURE__ */ React.createElement(Combobox.Group, { label: data.group }, options);
|
|
35
45
|
}
|
|
36
46
|
function OptionsDropdown({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionsDropdown.mjs","sources":["../../../../src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { CheckIcon } from '../../Checkbox';\nimport { Combobox } from '../Combobox';\nimport { ComboboxItem, ComboboxParsedItem } from '../Combobox.types';\nimport { defaultOptionsFilter, FilterOptionsInput } from './default-options-filter';\nimport { isEmptyComboboxData } from './is-empty-combobox-data';\nimport { isOptionsGroup } from './is-options-group';\nimport { validateOptions } from './validate-options';\nimport classes from '../Combobox.module.css';\n\nexport type OptionsFilter = (input: FilterOptionsInput) => ComboboxParsedItem[];\n\nexport interface OptionsGroup {\n group: string;\n items: ComboboxItem[];\n}\n\nexport type OptionsData = (ComboboxItem | OptionsGroup)[];\n\ninterface OptionProps {\n data: ComboboxItem | OptionsGroup;\n withCheckIcon?: boolean;\n value?: string | string[] | null;\n checkIconPosition?: 'left' | 'right';\n unstyled: boolean | undefined;\n}\n\nfunction isValueChecked(value: string | string[] | undefined | null, optionValue: string) {\n return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\nfunction Option({ data, withCheckIcon, value, checkIconPosition, unstyled }: OptionProps) {\n if (!isOptionsGroup(data)) {\n const check = withCheckIcon && isValueChecked(value, data.value) && (\n <CheckIcon className={classes.optionsDropdownCheckIcon} />\n );\n return (\n <Combobox.Option\n value={data.value}\n disabled={data.disabled}\n className={cx({ [classes.optionsDropdownOption]: !unstyled })}\n data-reverse={checkIconPosition === 'right' || undefined}\n data-checked={isValueChecked(value, data.value) || undefined}\n aria-selected={isValueChecked(value, data.value)}\n >\n {checkIconPosition === 'left' && check}\n {data.label}\n {checkIconPosition === 'right' && check}\n </Combobox.Option>\n );\n }\n\n const options = data.items.map((item) => (\n <Option
|
|
1
|
+
{"version":3,"file":"OptionsDropdown.mjs","sources":["../../../../src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'clsx';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { CheckIcon } from '../../Checkbox';\nimport { Combobox } from '../Combobox';\nimport { ComboboxItem, ComboboxParsedItem } from '../Combobox.types';\nimport { defaultOptionsFilter, FilterOptionsInput } from './default-options-filter';\nimport { isEmptyComboboxData } from './is-empty-combobox-data';\nimport { isOptionsGroup } from './is-options-group';\nimport { validateOptions } from './validate-options';\nimport classes from '../Combobox.module.css';\n\nexport type OptionsFilter = (input: FilterOptionsInput) => ComboboxParsedItem[];\n\nexport interface OptionsGroup {\n group: string;\n items: ComboboxItem[];\n}\n\nexport type OptionsData = (ComboboxItem | OptionsGroup)[];\n\ninterface OptionProps {\n data: ComboboxItem | OptionsGroup;\n withCheckIcon?: boolean;\n value?: string | string[] | null;\n checkIconPosition?: 'left' | 'right';\n unstyled: boolean | undefined;\n}\n\nfunction isValueChecked(value: string | string[] | undefined | null, optionValue: string) {\n return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\nfunction Option({ data, withCheckIcon, value, checkIconPosition, unstyled }: OptionProps) {\n if (!isOptionsGroup(data)) {\n const check = withCheckIcon && isValueChecked(value, data.value) && (\n <CheckIcon className={classes.optionsDropdownCheckIcon} />\n );\n return (\n <Combobox.Option\n value={data.value}\n disabled={data.disabled}\n className={cx({ [classes.optionsDropdownOption]: !unstyled })}\n data-reverse={checkIconPosition === 'right' || undefined}\n data-checked={isValueChecked(value, data.value) || undefined}\n aria-selected={isValueChecked(value, data.value)}\n >\n {checkIconPosition === 'left' && check}\n {data.label}\n {checkIconPosition === 'right' && check}\n </Combobox.Option>\n );\n }\n\n const options = data.items.map((item) => (\n <Option\n data={item}\n value={value}\n key={item.value}\n unstyled={unstyled}\n withCheckIcon={withCheckIcon}\n checkIconPosition={checkIconPosition}\n />\n ));\n\n return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n}\n\nexport interface OptionsDropdownProps {\n data: OptionsData;\n filter: OptionsFilter | undefined;\n search: string | undefined;\n limit: number | undefined;\n withScrollArea: boolean | undefined;\n maxDropdownHeight: number | string | undefined;\n hidden?: boolean;\n hiddenWhenEmpty?: boolean;\n filterOptions?: boolean;\n withCheckIcon?: boolean;\n value?: string | string[] | null;\n checkIconPosition?: 'left' | 'right';\n nothingFoundMessage?: React.ReactNode;\n unstyled: boolean | undefined;\n labelId: string;\n}\n\nexport function OptionsDropdown({\n data,\n hidden,\n hiddenWhenEmpty,\n filter,\n search,\n limit,\n maxDropdownHeight,\n withScrollArea = true,\n filterOptions = true,\n withCheckIcon = false,\n value,\n checkIconPosition,\n nothingFoundMessage,\n unstyled,\n labelId,\n}: OptionsDropdownProps) {\n validateOptions(data);\n\n const shouldFilter = typeof search === 'string';\n const filteredData = shouldFilter\n ? (filter || defaultOptionsFilter)({\n options: data,\n search: filterOptions ? search : '',\n limit: limit ?? Infinity,\n })\n : data;\n const isEmpty = isEmptyComboboxData(filteredData);\n\n const options = filteredData.map((item) => (\n <Option\n data={item}\n key={isOptionsGroup(item) ? item.group : item.value}\n withCheckIcon={withCheckIcon}\n value={value}\n checkIconPosition={checkIconPosition}\n unstyled={unstyled}\n />\n ));\n\n return (\n <Combobox.Dropdown hidden={hidden || (hiddenWhenEmpty && isEmpty)}>\n <Combobox.Options labelledBy={labelId}>\n {withScrollArea ? (\n <ScrollArea.Autosize\n mah={maxDropdownHeight ?? 220}\n type=\"scroll\"\n scrollbarSize=\"var(--_combobox-padding)\"\n offsetScrollbars=\"y\"\n className={classes.optionsDropdownScrollArea}\n >\n {options}\n </ScrollArea.Autosize>\n ) : (\n options\n )}\n {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n </Combobox.Options>\n </Combobox.Dropdown>\n );\n}\n"],"names":[],"mappings":"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"}
|
package/esm/index.css
CHANGED
|
@@ -1364,7 +1364,7 @@ body {
|
|
|
1364
1364
|
background-color: var(--_input-bg);
|
|
1365
1365
|
font-family: var(--_input-font-family, var(--mantine-font-family));
|
|
1366
1366
|
height: var(--_input-size);
|
|
1367
|
-
min-height: var(--
|
|
1367
|
+
min-height: var(--_input-height);
|
|
1368
1368
|
line-height: var(--_input-line-height);
|
|
1369
1369
|
font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-sm)));
|
|
1370
1370
|
border-radius: var(--_input-radius);
|
package/esm/styles/Input.css
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
--input-left-section-width,calc(var(--_input-height) - 0.125rem*var(--mantine-scale))
|
|
3
3
|
);--_input-right-section-size:var(
|
|
4
4
|
--input-right-section-width,calc(var(--_input-height) - 0.125rem*var(--mantine-scale))
|
|
5
|
-
);--_input-size:var(--_input-height);--_section-y:calc(0.0625rem*var(--mantine-scale));--_left-section-left:calc(0.0625rem*var(--mantine-scale));--_left-section-right:unset;--_left-section-border-radius:var(--_input-radius) 0 0 var(--_input-radius);--_right-section-left:unset;--_right-section-right:calc(0.0625rem*var(--mantine-scale));--_right-section-border-radius:0 var(--_input-radius) var(--_input-radius) 0;margin-bottom:var(--input-margin-bottom,0);margin-top:var(--input-margin-top,0);position:relative}.m-6c018570[data-variant=unstyled]{--input-padding:0;--input-padding-y:0;--_input-padding-left:0;--_input-padding-right:0}.m-6c018570[data-pointer]{--_input-cursor:pointer}.m-6c018570[data-multiline]{--_input-size:auto;--_input-line-height:var(--mantine-line-height);--input-padding-y:var(--input-padding-y-sm)}.m-6c018570[data-with-left-section]{--_input-padding-left:var(--_input-left-section-size)}[dir=rtl] .m-6c018570[data-with-left-section]{--_input-padding-right:var(--_input-left-section-size)}[dir=rtl] .m-6c018570[data-with-left-section]:not([data-with-right-section]){--_input-padding-left:var(--_input-padding)}.m-6c018570[data-with-right-section]{--_input-padding-right:var(--_input-right-section-size)}[dir=rtl] .m-6c018570[data-with-right-section]{--_input-padding-left:var(--_input-right-section-size)}[dir=rtl] .m-6c018570[data-with-right-section]:not([data-with-left-section]){--_input-padding-right:var(--_input-padding)}[data-mantine-color-scheme=light] .m-6c018570{--_input-disabled-bg:var(--mantine-color-gray-1);--_input-disabled-color:var(--mantine-color-gray-6)}[data-mantine-color-scheme=light] .m-6c018570[data-variant=default]{--_input-bd:var(--mantine-color-gray-4);--_input-bg:var(--mantine-color-white);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=light] .m-6c018570[data-variant=filled]{--_input-bd:transparent;--_input-bg:var(--mantine-color-gray-1);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=light] .m-6c018570[data-variant=unstyled]{--_input-bd:transparent;--_input-bg:transparent;--_input-bd-focus:transparent}[data-mantine-color-scheme=dark] .m-6c018570{--_input-disabled-bg:var(--mantine-color-dark-6);--_input-disabled-color:var(--mantine-color-dark-2)}[data-mantine-color-scheme=dark] .m-6c018570[data-variant=default]{--_input-bd:var(--mantine-color-dark-4);--_input-bg:var(--mantine-color-dark-6);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=dark] .m-6c018570[data-variant=filled]{--_input-bd:transparent;--_input-bg:var(--mantine-color-dark-5);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=dark] .m-6c018570[data-variant=unstyled]{--_input-bd:transparent;--_input-bg:transparent;--_input-bd-focus:transparent}[data-mantine-color-scheme] .m-6c018570[data-error]:not([data-variant=unstyled]){--_input-bd:var(--mantine-color-error)}[data-mantine-color-scheme] .m-6c018570[data-error]{--_input-color:var(--mantine-color-error);--_input-placeholder-color:var(--mantine-color-error);--_input-section-color:var(--mantine-color-error)}[dir=rtl] .m-6c018570{--_input-text-align:right;--_left-section-left:unset;--_left-section-right:calc(0.0625rem*var(--mantine-scale));--_left-section-border-radius:0 var(--_input-radius) var(--_input-radius) 0;--_right-section-left:calc(0.0625rem*var(--mantine-scale));--_right-section-right:unset;--_right-section-border-radius:var(--_input-radius) 0 0 var(--_input-radius)}.m-8fb7ebe7{-webkit-tap-highlight-color:transparent;appearance:none;background-color:var(--_input-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_input-bd);border-radius:var(--_input-radius);color:var(--_input-color);cursor:var(--_input-cursor);display:block;font-family:var(--_input-font-family,var(--mantine-font-family));font-size:var(--_input-fz,var(--input-fz,var(--mantine-font-size-sm)));height:var(--_input-size);line-height:var(--_input-line-height);min-height:var(--
|
|
5
|
+
);--_input-size:var(--_input-height);--_section-y:calc(0.0625rem*var(--mantine-scale));--_left-section-left:calc(0.0625rem*var(--mantine-scale));--_left-section-right:unset;--_left-section-border-radius:var(--_input-radius) 0 0 var(--_input-radius);--_right-section-left:unset;--_right-section-right:calc(0.0625rem*var(--mantine-scale));--_right-section-border-radius:0 var(--_input-radius) var(--_input-radius) 0;margin-bottom:var(--input-margin-bottom,0);margin-top:var(--input-margin-top,0);position:relative}.m-6c018570[data-variant=unstyled]{--input-padding:0;--input-padding-y:0;--_input-padding-left:0;--_input-padding-right:0}.m-6c018570[data-pointer]{--_input-cursor:pointer}.m-6c018570[data-multiline]{--_input-size:auto;--_input-line-height:var(--mantine-line-height);--input-padding-y:var(--input-padding-y-sm)}.m-6c018570[data-with-left-section]{--_input-padding-left:var(--_input-left-section-size)}[dir=rtl] .m-6c018570[data-with-left-section]{--_input-padding-right:var(--_input-left-section-size)}[dir=rtl] .m-6c018570[data-with-left-section]:not([data-with-right-section]){--_input-padding-left:var(--_input-padding)}.m-6c018570[data-with-right-section]{--_input-padding-right:var(--_input-right-section-size)}[dir=rtl] .m-6c018570[data-with-right-section]{--_input-padding-left:var(--_input-right-section-size)}[dir=rtl] .m-6c018570[data-with-right-section]:not([data-with-left-section]){--_input-padding-right:var(--_input-padding)}[data-mantine-color-scheme=light] .m-6c018570{--_input-disabled-bg:var(--mantine-color-gray-1);--_input-disabled-color:var(--mantine-color-gray-6)}[data-mantine-color-scheme=light] .m-6c018570[data-variant=default]{--_input-bd:var(--mantine-color-gray-4);--_input-bg:var(--mantine-color-white);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=light] .m-6c018570[data-variant=filled]{--_input-bd:transparent;--_input-bg:var(--mantine-color-gray-1);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=light] .m-6c018570[data-variant=unstyled]{--_input-bd:transparent;--_input-bg:transparent;--_input-bd-focus:transparent}[data-mantine-color-scheme=dark] .m-6c018570{--_input-disabled-bg:var(--mantine-color-dark-6);--_input-disabled-color:var(--mantine-color-dark-2)}[data-mantine-color-scheme=dark] .m-6c018570[data-variant=default]{--_input-bd:var(--mantine-color-dark-4);--_input-bg:var(--mantine-color-dark-6);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=dark] .m-6c018570[data-variant=filled]{--_input-bd:transparent;--_input-bg:var(--mantine-color-dark-5);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=dark] .m-6c018570[data-variant=unstyled]{--_input-bd:transparent;--_input-bg:transparent;--_input-bd-focus:transparent}[data-mantine-color-scheme] .m-6c018570[data-error]:not([data-variant=unstyled]){--_input-bd:var(--mantine-color-error)}[data-mantine-color-scheme] .m-6c018570[data-error]{--_input-color:var(--mantine-color-error);--_input-placeholder-color:var(--mantine-color-error);--_input-section-color:var(--mantine-color-error)}[dir=rtl] .m-6c018570{--_input-text-align:right;--_left-section-left:unset;--_left-section-right:calc(0.0625rem*var(--mantine-scale));--_left-section-border-radius:0 var(--_input-radius) var(--_input-radius) 0;--_right-section-left:calc(0.0625rem*var(--mantine-scale));--_right-section-right:unset;--_right-section-border-radius:var(--_input-radius) 0 0 var(--_input-radius)}.m-8fb7ebe7{-webkit-tap-highlight-color:transparent;appearance:none;background-color:var(--_input-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_input-bd);border-radius:var(--_input-radius);color:var(--_input-color);cursor:var(--_input-cursor);display:block;font-family:var(--_input-font-family,var(--mantine-font-family));font-size:var(--_input-fz,var(--input-fz,var(--mantine-font-size-sm)));height:var(--_input-size);line-height:var(--_input-line-height);min-height:var(--_input-height);overflow:var(--_input-overflow);padding:var(--input-padding-y,0) var(--_input-padding-right) var(--input-padding-y,0) var(--_input-padding-left);resize:none;text-align:var(--_input-text-align);transition:border-color .1s ease;width:100%}.m-8fb7ebe7[data-no-overflow]{--_input-overflow:hidden}.m-8fb7ebe7[data-monospace]{--_input-font-family:var(--mantine-font-family-monospace);--_input-fz:calc(var(--input-fz, var(--mantine-font-size-sm)) - 0.125rem*var(--mantine-scale))}.m-8fb7ebe7:focus,.m-8fb7ebe7:focus-within{--_input-bd:var(--_input-bd-focus);outline:none}[data-error] .m-8fb7ebe7:focus,[data-error] .m-8fb7ebe7:focus-within{--_input-bd:var(--mantine-color-error)}.m-8fb7ebe7::placeholder{color:var(--_input-placeholder-color);opacity:1}.m-8fb7ebe7::-webkit-inner-spin-button,.m-8fb7ebe7::-webkit-outer-spin-button,.m-8fb7ebe7::-webkit-search-cancel-button,.m-8fb7ebe7::-webkit-search-decoration,.m-8fb7ebe7::-webkit-search-results-button,.m-8fb7ebe7::-webkit-search-results-decoration{appearance:none}.m-8fb7ebe7[type=number]{-moz-appearance:textfield}.m-8fb7ebe7:disabled,.m-8fb7ebe7[data-disabled]{background-color:var(--_input-disabled-bg);color:var(--_input-disabled-color);cursor:not-allowed;opacity:.6}.m-8fb7ebe7:has(input:disabled){background-color:var(--_input-disabled-bg);color:var(--_input-disabled-color);cursor:not-allowed;opacity:.6}.m-82577fc2{align-items:center;border-radius:var(--_section-border-radius);bottom:var(--_section-y);color:var(--mantine-color-placeholder);display:flex;justify-content:center;left:var(--_section-left);pointer-events:var(--_section-pointer-events);position:absolute;right:var(--_section-right);top:var(--_section-y);width:var(--_section-size);z-index:1}.m-82577fc2[data-position=right]{--_section-pointer-events:var(--input-right-section-pointer-events);--_section-left:var(--_right-section-left);--_section-right:var(--_right-section-right);--_section-size:var(--_input-right-section-size);--_section-border-radius:var(--_right-section-border-radius)}.m-82577fc2[data-position=left]{--_section-pointer-events:var(--input-left-section-pointer-events);--_section-left:var(--_left-section-left);--_section-right:var(--_left-section-right);--_section-size:var(--_input-left-section-size);--_section-border-radius:var(--_left-section-border-radius)}.m-88bacfd0{color:var(--_input-placeholder-color,var(--mantine-color-placeholder))}[data-error] .m-88bacfd0{--_input-placeholder-color:var(--_input-color,var(--mantine-color-placeholder))}.m-46b77525{line-height:var(--mantine-line-height)}.m-8fdc1311{-webkit-tap-highlight-color:transparent;cursor:default;display:inline-block;font-size:var(--input-label-size,var(--mantine-font-size-sm));font-weight:500;word-break:break-word}.m-78a94662{color:var(--input-asterisk-color,var(--mantine-color-red-filled))}.m-8f816625,.m-fe47ce59{word-wrap:break-word;display:block;line-height:1.2;margin:0;padding:0}.m-8f816625{color:var(--mantine-color-error);font-size:var(--input-error-size,calc(var(--mantine-font-size-sm) - .125rem*var(--mantine-scale)))}.m-fe47ce59{color:var(--mantine-color-dimmed);font-size:var(--input-description-size,calc(var(--mantine-font-size-sm) - .125rem*var(--mantine-scale)))}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/core",
|
|
3
3
|
"description": "React components library focused on usability, accessibility and developer experience",
|
|
4
|
-
"version": "7.0.
|
|
4
|
+
"version": "7.0.2",
|
|
5
5
|
"main": "./cjs/index.js",
|
|
6
6
|
"types": "./lib/index.d.ts",
|
|
7
7
|
"module": "./esm/index.mjs",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"design"
|
|
43
43
|
],
|
|
44
44
|
"peerDependencies": {
|
|
45
|
-
"@mantine/hooks": "7.0.
|
|
45
|
+
"@mantine/hooks": "7.0.2",
|
|
46
46
|
"react": "^18.2.0",
|
|
47
47
|
"react-dom": "^18.2.0"
|
|
48
48
|
},
|