@ozen-ui/kit 0.58.1 → 0.58.3
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/__inner__/cjs/components/AutocompleteNext/Autocomplete.css +4 -4
- package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteInput/AutocompleteInput.js +3 -3
- package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteInput/components/AutocompleteInputMultiple.js +6 -2
- package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteInput/components/types.d.ts +1 -1
- package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteInput/types.d.ts +1 -1
- package/__inner__/cjs/components/Link/Link.d.ts +1 -0
- package/__inner__/cjs/components/Link/Link.js +3 -3
- package/__inner__/esm/components/AutocompleteNext/Autocomplete.css +4 -4
- package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/AutocompleteInput.js +3 -3
- package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/AutocompleteInputMultiple.js +6 -2
- package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/types.d.ts +1 -1
- package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/types.d.ts +1 -1
- package/__inner__/esm/components/Link/Link.d.ts +1 -0
- package/__inner__/esm/components/Link/Link.js +1 -1
- package/package.json +4 -4
|
@@ -105,11 +105,11 @@
|
|
|
105
105
|
color: var(--textfield-color);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
.AutocompleteNext-Input_multiple input::placeholder {
|
|
109
|
-
|
|
110
|
-
|
|
108
|
+
.AutocompleteNext-Input_multiple.AutocompleteNext-Input_hasLabel input::placeholder {
|
|
109
|
+
opacity: 0;
|
|
110
|
+
}
|
|
111
111
|
|
|
112
|
-
.AutocompleteNext-Input_multiple * + input::placeholder, .AutocompleteNext-Input_multiple input:focus::placeholder {
|
|
112
|
+
.AutocompleteNext-Input_multiple * + input::placeholder, .AutocompleteNext-Input_multiple input:focus::placeholder, .AutocompleteNext-Input_multiple.AutocompleteNext-Input_hasLabel * + input::placeholder, .AutocompleteNext-Input_multiple.AutocompleteNext-Input_hasLabel input:focus::placeholder {
|
|
113
113
|
opacity: 1;
|
|
114
114
|
}
|
|
115
115
|
|
package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteInput/AutocompleteInput.js
CHANGED
|
@@ -11,7 +11,7 @@ var components_1 = require("./components");
|
|
|
11
11
|
var helpers_1 = require("./helpers");
|
|
12
12
|
var AutocompleteInputRender = function (inProps, ref) {
|
|
13
13
|
var _a, _b;
|
|
14
|
-
var _c = inProps.size, size = _c === void 0 ? 'm' : _c, open = inProps.open, value = inProps.value, onOpen = inProps.onOpen, onClear = inProps.onClear, multiple = inProps.multiple, disabled = inProps.disabled, openText = inProps.openText, onRemoveTag = inProps.onRemoveTag, clearText = inProps.clearText, closeText = inProps.closeText, className = inProps.className, bodyProps = inProps.bodyProps, inputProps = inProps.inputProps, renderRight = inProps.renderRight, placeholder = inProps.placeholder, selectedOptions = inProps.selectedOptions, getOptionKey = inProps.getOptionKey, getOptionLabel = inProps.getOptionLabel, getOptionDisabled = inProps.getOptionDisabled, limitTags = inProps.limitTags, disableClearButton = inProps.disableClearButton, disableShowChevron = inProps.disableShowChevron, renderTag = inProps.renderTag, renderInputProp = inProps.renderInput, renderMoreTag = inProps.renderMoreTag, other = tslib_1.__rest(inProps, ["size", "open", "value", "onOpen", "onClear", "multiple", "disabled", "openText", "onRemoveTag", "clearText", "closeText", "className", "bodyProps", "inputProps", "renderRight", "placeholder", "selectedOptions", "getOptionKey", "getOptionLabel", "getOptionDisabled", "limitTags", "disableClearButton", "disableShowChevron", "renderTag", "renderInput", "renderMoreTag"]);
|
|
14
|
+
var _c = inProps.size, size = _c === void 0 ? 'm' : _c, open = inProps.open, value = inProps.value, onOpen = inProps.onOpen, onClear = inProps.onClear, multiple = inProps.multiple, disabled = inProps.disabled, label = inProps.label, openText = inProps.openText, onRemoveTag = inProps.onRemoveTag, clearText = inProps.clearText, closeText = inProps.closeText, className = inProps.className, bodyProps = inProps.bodyProps, inputProps = inProps.inputProps, renderRight = inProps.renderRight, placeholder = inProps.placeholder, selectedOptions = inProps.selectedOptions, getOptionKey = inProps.getOptionKey, getOptionLabel = inProps.getOptionLabel, getOptionDisabled = inProps.getOptionDisabled, limitTags = inProps.limitTags, disableClearButton = inProps.disableClearButton, disableShowChevron = inProps.disableShowChevron, renderTag = inProps.renderTag, renderInputProp = inProps.renderInput, renderMoreTag = inProps.renderMoreTag, other = tslib_1.__rest(inProps, ["size", "open", "value", "onOpen", "onClear", "multiple", "disabled", "label", "openText", "onRemoveTag", "clearText", "closeText", "className", "bodyProps", "inputProps", "renderRight", "placeholder", "selectedOptions", "getOptionKey", "getOptionLabel", "getOptionDisabled", "limitTags", "disableClearButton", "disableShowChevron", "renderTag", "renderInput", "renderMoreTag"]);
|
|
15
15
|
var hasValue = (0, helpers_1.isMultipleParams)(inProps)
|
|
16
16
|
? !!((_a = inProps.selectedOptions) === null || _a === void 0 ? void 0 : _a.length)
|
|
17
17
|
: (0, isNotNil_1.isNotNil)(selectedOptions);
|
|
@@ -27,11 +27,11 @@ var AutocompleteInputRender = function (inProps, ref) {
|
|
|
27
27
|
}
|
|
28
28
|
if ((0, helpers_1.isMultipleParams)(inProps)) {
|
|
29
29
|
var selectedOptions_1 = inProps.selectedOptions;
|
|
30
|
-
return (react_1.default.createElement(components_1.AutocompleteInputMultiple, tslib_1.__assign({ renderTag: renderTag, limitTags: limitTags, onRemoveTag: onRemoveTag, getOptionKey: getOptionKey, renderMoreTag: renderMoreTag, getOptionLabel: getOptionLabel, getOptionDisabled: getOptionDisabled, selectedOptions: selectedOptions_1, ref: ref }, other)));
|
|
30
|
+
return (react_1.default.createElement(components_1.AutocompleteInputMultiple, tslib_1.__assign({ label: label, renderTag: renderTag, limitTags: limitTags, onRemoveTag: onRemoveTag, getOptionKey: getOptionKey, renderMoreTag: renderMoreTag, getOptionLabel: getOptionLabel, getOptionDisabled: getOptionDisabled, selectedOptions: selectedOptions_1, ref: ref }, other)));
|
|
31
31
|
}
|
|
32
32
|
return null;
|
|
33
33
|
};
|
|
34
|
-
return renderInput(tslib_1.__assign({ size: size, disabled: disabled, value: value || '', placeholder: placeholder, renderRight: (react_1.default.createElement(AutocompleteRenderRight_1.AutocompleteRenderRight, { open: open, size: size, onOpen: onOpen, onClear: onClear, hasValue: hasValue, openText: openText, disabled: disabled, clearText: clearText, closeText: closeText, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), labelProps: {
|
|
34
|
+
return renderInput(tslib_1.__assign({ size: size, disabled: disabled, label: label, value: value || '', placeholder: placeholder, renderRight: (react_1.default.createElement(AutocompleteRenderRight_1.AutocompleteRenderRight, { open: open, size: size, onOpen: onOpen, onClear: onClear, hasValue: hasValue, openText: openText, disabled: disabled, clearText: clearText, closeText: closeText, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), labelProps: {
|
|
35
35
|
shrink: !!selectedOptionsLength,
|
|
36
36
|
}, inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputProps), { renderComponent: renderComponent }), bodyProps: tslib_1.__assign({ 'aria-expanded': open }, bodyProps), className: (0, index_1.cnAutocomplete)({ size: size, multiple: multiple, hasChevron: !disableShowChevron }, [className]) }, other), ref);
|
|
37
37
|
};
|
|
@@ -11,7 +11,7 @@ var TagNext_1 = require("../../../../TagNext");
|
|
|
11
11
|
var index_1 = require("../../../index");
|
|
12
12
|
var helpers_1 = require("./helpers");
|
|
13
13
|
var AutocompleteInputMultipleRender = function (inProps, ref) {
|
|
14
|
-
var _a = inProps.size, size = _a === void 0 ? 'm' : _a, value = inProps.value, placeholder = inProps.placeholder, selectedOptions = inProps.selectedOptions, onRemoveTag = inProps.onRemoveTag, renderTagProp = inProps.renderTag, renderMoreTagProp = inProps.renderMoreTag, getOptionKey = inProps.getOptionKey, getOptionLabel = inProps.getOptionLabel, getOptionDisabled = inProps.getOptionDisabled, limitTags = inProps.limitTags, other = tslib_1.__rest(inProps, ["size", "value", "placeholder", "selectedOptions", "onRemoveTag", "renderTag", "renderMoreTag", "getOptionKey", "getOptionLabel", "getOptionDisabled", "limitTags"]);
|
|
14
|
+
var _a = inProps.size, size = _a === void 0 ? 'm' : _a, label = inProps.label, value = inProps.value, placeholder = inProps.placeholder, selectedOptions = inProps.selectedOptions, onRemoveTag = inProps.onRemoveTag, renderTagProp = inProps.renderTag, renderMoreTagProp = inProps.renderMoreTag, getOptionKey = inProps.getOptionKey, getOptionLabel = inProps.getOptionLabel, getOptionDisabled = inProps.getOptionDisabled, limitTags = inProps.limitTags, other = tslib_1.__rest(inProps, ["size", "label", "value", "placeholder", "selectedOptions", "onRemoveTag", "renderTag", "renderMoreTag", "getOptionKey", "getOptionLabel", "getOptionDisabled", "limitTags"]);
|
|
15
15
|
var selectedOptionsLength = (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) || 0;
|
|
16
16
|
var responsive = limitTags === 'responsive';
|
|
17
17
|
var hasLimitTags = (0, isNumber_1.isNumber)(limitTags) && limitTags > 0;
|
|
@@ -70,7 +70,11 @@ var AutocompleteInputMultipleRender = function (inProps, ref) {
|
|
|
70
70
|
selectedOptionsLength,
|
|
71
71
|
]);
|
|
72
72
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
73
|
-
react_1.default.createElement("div", { ref: parentRef, className: (0, index_1.cnAutocomplete)('Input', {
|
|
73
|
+
react_1.default.createElement("div", { ref: parentRef, className: (0, index_1.cnAutocomplete)('Input', {
|
|
74
|
+
responsive: responsive,
|
|
75
|
+
multiple: true,
|
|
76
|
+
hasLabel: !!label,
|
|
77
|
+
}) }, selectedOptions === null || selectedOptions === void 0 ? void 0 :
|
|
74
78
|
selectedOptions.map(function (option, index) {
|
|
75
79
|
var label = (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option)) || '';
|
|
76
80
|
var key = getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option);
|
package/__inner__/cjs/components/AutocompleteNext/components/AutocompleteInput/components/types.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import type { InputProps } from '../../../../Input';
|
|
|
3
3
|
import type { AutocompleteDefaultOption, AutocompletePropGetOptionDisabled, AutocompletePropGetOptionKey, AutocompletePropGetOptionLabel, AutocompletePropRenderMoreTag, AutocompletePropRenderTag, AutocompletePropValue } from '../../../index';
|
|
4
4
|
import type { AutocompleteDropdownOnChange } from '../../index';
|
|
5
5
|
export type AutocompleteInputMultipleRef = HTMLInputElement;
|
|
6
|
-
export type AutocompleteInputMultipleProps<OPTION = AutocompleteDefaultOption> = Pick<InputProps, 'size' | 'value' | 'placeholder'> & {
|
|
6
|
+
export type AutocompleteInputMultipleProps<OPTION = AutocompleteDefaultOption> = Pick<InputProps, 'size' | 'value' | 'placeholder' | 'label'> & {
|
|
7
7
|
getOptionLabel?: AutocompletePropGetOptionLabel<OPTION>;
|
|
8
8
|
getOptionKey?: AutocompletePropGetOptionKey<OPTION>;
|
|
9
9
|
getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION>;
|
|
@@ -4,7 +4,7 @@ import type { AutocompleteDefaultOption, AutocompletePropGetOptionKey, Autocompl
|
|
|
4
4
|
import type { AutocompleteDropdownOnChange } from '../AutocompleteDropdown';
|
|
5
5
|
import type { AutocompleteRenderRightProps } from '../AutocompleteRenderRight';
|
|
6
6
|
export type AutocompleteInputRef = InputRef;
|
|
7
|
-
export type AutocompleteInputProps<OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false> = Pick<InputProps, 'size' | 'value' | 'disabled' | 'required' | 'onChange' | 'fullWidth' | 'onKeyDown' | 'className' | 'bodyProps' | 'inputProps' | 'renderRight' | 'placeholder'> & Pick<AutocompleteRenderRightProps, 'onOpen' | 'onClear'> & {
|
|
7
|
+
export type AutocompleteInputProps<OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false> = Pick<InputProps, 'size' | 'value' | 'disabled' | 'required' | 'onChange' | 'fullWidth' | 'onKeyDown' | 'className' | 'bodyProps' | 'inputProps' | 'renderRight' | 'placeholder' | 'label'> & Pick<AutocompleteRenderRightProps, 'onOpen' | 'onClear'> & {
|
|
8
8
|
open?: boolean;
|
|
9
9
|
openText?: string;
|
|
10
10
|
closeText?: string;
|
|
@@ -2,6 +2,7 @@ import './Link.css';
|
|
|
2
2
|
import type { ElementType } from 'react';
|
|
3
3
|
import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
|
|
4
4
|
import { type TypographyBaseProps } from '../Typography';
|
|
5
|
+
export declare const cnLink: import("@bem-react/classname").ClassNameFormatter;
|
|
5
6
|
export type LinkBaseProps = Pick<TypographyBaseProps, 'variant' | 'display' | 'defaultMargin' | 'children' | 'noWrap' | 'align'>;
|
|
6
7
|
export type LinkProps<As extends ElementType = 'a'> = PolymorphicComponentPropsWithoutRef<LinkBaseProps, As>;
|
|
7
8
|
export declare const Link: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<LinkBaseProps, "a">;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Link = void 0;
|
|
3
|
+
exports.Link = exports.cnLink = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
require("./Link.css");
|
|
6
6
|
var react_1 = tslib_1.__importDefault(require("react"));
|
|
@@ -9,14 +9,14 @@ var useThemeProps_1 = require("../../hooks/useThemeProps");
|
|
|
9
9
|
var classname_1 = require("../../utils/classname");
|
|
10
10
|
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
|
|
11
11
|
var Typography_1 = require("../Typography");
|
|
12
|
-
|
|
12
|
+
exports.cnLink = (0, classname_1.cn)('Link');
|
|
13
13
|
exports.Link = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
|
|
14
14
|
var props = (0, useThemeProps_1.useThemeProps)({
|
|
15
15
|
props: inProps,
|
|
16
16
|
name: 'Link',
|
|
17
17
|
});
|
|
18
18
|
var _a = props.variant, variant = _a === void 0 ? 'text-m' : _a, _b = props.as, Tag = _b === void 0 ? 'a' : _b, display = props.display, noWrap = props.noWrap, align = props.align, defaultMargin = props.defaultMargin, children = props.children, className = props.className, other = tslib_1.__rest(props, ["variant", "as", "display", "noWrap", "align", "defaultMargin", "children", "className"]);
|
|
19
|
-
return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, classnames_1.classnames)(cnLink(), (0, Typography_1.cnTypography)({
|
|
19
|
+
return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, classnames_1.classnames)((0, exports.cnLink)(), (0, Typography_1.cnTypography)({
|
|
20
20
|
variant: variant,
|
|
21
21
|
display: display,
|
|
22
22
|
defaultMargin: defaultMargin,
|
|
@@ -105,11 +105,11 @@
|
|
|
105
105
|
color: var(--textfield-color);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
.AutocompleteNext-Input_multiple input::placeholder {
|
|
109
|
-
|
|
110
|
-
|
|
108
|
+
.AutocompleteNext-Input_multiple.AutocompleteNext-Input_hasLabel input::placeholder {
|
|
109
|
+
opacity: 0;
|
|
110
|
+
}
|
|
111
111
|
|
|
112
|
-
.AutocompleteNext-Input_multiple * + input::placeholder, .AutocompleteNext-Input_multiple input:focus::placeholder {
|
|
112
|
+
.AutocompleteNext-Input_multiple * + input::placeholder, .AutocompleteNext-Input_multiple input:focus::placeholder, .AutocompleteNext-Input_multiple.AutocompleteNext-Input_hasLabel * + input::placeholder, .AutocompleteNext-Input_multiple.AutocompleteNext-Input_hasLabel input:focus::placeholder {
|
|
113
113
|
opacity: 1;
|
|
114
114
|
}
|
|
115
115
|
|
package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/AutocompleteInput.js
CHANGED
|
@@ -8,7 +8,7 @@ import { AutocompleteInputMultiple } from './components';
|
|
|
8
8
|
import { isNotMultipleParams, isMultipleParams } from './helpers';
|
|
9
9
|
var AutocompleteInputRender = function (inProps, ref) {
|
|
10
10
|
var _a, _b;
|
|
11
|
-
var _c = inProps.size, size = _c === void 0 ? 'm' : _c, open = inProps.open, value = inProps.value, onOpen = inProps.onOpen, onClear = inProps.onClear, multiple = inProps.multiple, disabled = inProps.disabled, openText = inProps.openText, onRemoveTag = inProps.onRemoveTag, clearText = inProps.clearText, closeText = inProps.closeText, className = inProps.className, bodyProps = inProps.bodyProps, inputProps = inProps.inputProps, renderRight = inProps.renderRight, placeholder = inProps.placeholder, selectedOptions = inProps.selectedOptions, getOptionKey = inProps.getOptionKey, getOptionLabel = inProps.getOptionLabel, getOptionDisabled = inProps.getOptionDisabled, limitTags = inProps.limitTags, disableClearButton = inProps.disableClearButton, disableShowChevron = inProps.disableShowChevron, renderTag = inProps.renderTag, renderInputProp = inProps.renderInput, renderMoreTag = inProps.renderMoreTag, other = __rest(inProps, ["size", "open", "value", "onOpen", "onClear", "multiple", "disabled", "openText", "onRemoveTag", "clearText", "closeText", "className", "bodyProps", "inputProps", "renderRight", "placeholder", "selectedOptions", "getOptionKey", "getOptionLabel", "getOptionDisabled", "limitTags", "disableClearButton", "disableShowChevron", "renderTag", "renderInput", "renderMoreTag"]);
|
|
11
|
+
var _c = inProps.size, size = _c === void 0 ? 'm' : _c, open = inProps.open, value = inProps.value, onOpen = inProps.onOpen, onClear = inProps.onClear, multiple = inProps.multiple, disabled = inProps.disabled, label = inProps.label, openText = inProps.openText, onRemoveTag = inProps.onRemoveTag, clearText = inProps.clearText, closeText = inProps.closeText, className = inProps.className, bodyProps = inProps.bodyProps, inputProps = inProps.inputProps, renderRight = inProps.renderRight, placeholder = inProps.placeholder, selectedOptions = inProps.selectedOptions, getOptionKey = inProps.getOptionKey, getOptionLabel = inProps.getOptionLabel, getOptionDisabled = inProps.getOptionDisabled, limitTags = inProps.limitTags, disableClearButton = inProps.disableClearButton, disableShowChevron = inProps.disableShowChevron, renderTag = inProps.renderTag, renderInputProp = inProps.renderInput, renderMoreTag = inProps.renderMoreTag, other = __rest(inProps, ["size", "open", "value", "onOpen", "onClear", "multiple", "disabled", "label", "openText", "onRemoveTag", "clearText", "closeText", "className", "bodyProps", "inputProps", "renderRight", "placeholder", "selectedOptions", "getOptionKey", "getOptionLabel", "getOptionDisabled", "limitTags", "disableClearButton", "disableShowChevron", "renderTag", "renderInput", "renderMoreTag"]);
|
|
12
12
|
var hasValue = isMultipleParams(inProps)
|
|
13
13
|
? !!((_a = inProps.selectedOptions) === null || _a === void 0 ? void 0 : _a.length)
|
|
14
14
|
: isNotNil(selectedOptions);
|
|
@@ -24,11 +24,11 @@ var AutocompleteInputRender = function (inProps, ref) {
|
|
|
24
24
|
}
|
|
25
25
|
if (isMultipleParams(inProps)) {
|
|
26
26
|
var selectedOptions_1 = inProps.selectedOptions;
|
|
27
|
-
return (React.createElement(AutocompleteInputMultiple, __assign({ renderTag: renderTag, limitTags: limitTags, onRemoveTag: onRemoveTag, getOptionKey: getOptionKey, renderMoreTag: renderMoreTag, getOptionLabel: getOptionLabel, getOptionDisabled: getOptionDisabled, selectedOptions: selectedOptions_1, ref: ref }, other)));
|
|
27
|
+
return (React.createElement(AutocompleteInputMultiple, __assign({ label: label, renderTag: renderTag, limitTags: limitTags, onRemoveTag: onRemoveTag, getOptionKey: getOptionKey, renderMoreTag: renderMoreTag, getOptionLabel: getOptionLabel, getOptionDisabled: getOptionDisabled, selectedOptions: selectedOptions_1, ref: ref }, other)));
|
|
28
28
|
}
|
|
29
29
|
return null;
|
|
30
30
|
};
|
|
31
|
-
return renderInput(__assign({ size: size, disabled: disabled, value: value || '', placeholder: placeholder, renderRight: (React.createElement(AutocompleteRenderRight, { open: open, size: size, onOpen: onOpen, onClear: onClear, hasValue: hasValue, openText: openText, disabled: disabled, clearText: clearText, closeText: closeText, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), labelProps: {
|
|
31
|
+
return renderInput(__assign({ size: size, disabled: disabled, label: label, value: value || '', placeholder: placeholder, renderRight: (React.createElement(AutocompleteRenderRight, { open: open, size: size, onOpen: onOpen, onClear: onClear, hasValue: hasValue, openText: openText, disabled: disabled, clearText: clearText, closeText: closeText, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), labelProps: {
|
|
32
32
|
shrink: !!selectedOptionsLength,
|
|
33
33
|
}, inputProps: __assign(__assign({ autoComplete: 'off' }, inputProps), { renderComponent: renderComponent }), bodyProps: __assign({ 'aria-expanded': open }, bodyProps), className: cnAutocomplete({ size: size, multiple: multiple, hasChevron: !disableShowChevron }, [className]) }, other), ref);
|
|
34
34
|
};
|
|
@@ -8,7 +8,7 @@ import { Tag } from '../../../../TagNext';
|
|
|
8
8
|
import { cnAutocomplete, } from '../../../index';
|
|
9
9
|
import { calcElementSize, calcElementsSize, createMap, getAutocompleteSizeToTag, } from './helpers';
|
|
10
10
|
var AutocompleteInputMultipleRender = function (inProps, ref) {
|
|
11
|
-
var _a = inProps.size, size = _a === void 0 ? 'm' : _a, value = inProps.value, placeholder = inProps.placeholder, selectedOptions = inProps.selectedOptions, onRemoveTag = inProps.onRemoveTag, renderTagProp = inProps.renderTag, renderMoreTagProp = inProps.renderMoreTag, getOptionKey = inProps.getOptionKey, getOptionLabel = inProps.getOptionLabel, getOptionDisabled = inProps.getOptionDisabled, limitTags = inProps.limitTags, other = __rest(inProps, ["size", "value", "placeholder", "selectedOptions", "onRemoveTag", "renderTag", "renderMoreTag", "getOptionKey", "getOptionLabel", "getOptionDisabled", "limitTags"]);
|
|
11
|
+
var _a = inProps.size, size = _a === void 0 ? 'm' : _a, label = inProps.label, value = inProps.value, placeholder = inProps.placeholder, selectedOptions = inProps.selectedOptions, onRemoveTag = inProps.onRemoveTag, renderTagProp = inProps.renderTag, renderMoreTagProp = inProps.renderMoreTag, getOptionKey = inProps.getOptionKey, getOptionLabel = inProps.getOptionLabel, getOptionDisabled = inProps.getOptionDisabled, limitTags = inProps.limitTags, other = __rest(inProps, ["size", "label", "value", "placeholder", "selectedOptions", "onRemoveTag", "renderTag", "renderMoreTag", "getOptionKey", "getOptionLabel", "getOptionDisabled", "limitTags"]);
|
|
12
12
|
var selectedOptionsLength = (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) || 0;
|
|
13
13
|
var responsive = limitTags === 'responsive';
|
|
14
14
|
var hasLimitTags = isNumber(limitTags) && limitTags > 0;
|
|
@@ -67,7 +67,11 @@ var AutocompleteInputMultipleRender = function (inProps, ref) {
|
|
|
67
67
|
selectedOptionsLength,
|
|
68
68
|
]);
|
|
69
69
|
return (React.createElement(React.Fragment, null,
|
|
70
|
-
React.createElement("div", { ref: parentRef, className: cnAutocomplete('Input', {
|
|
70
|
+
React.createElement("div", { ref: parentRef, className: cnAutocomplete('Input', {
|
|
71
|
+
responsive: responsive,
|
|
72
|
+
multiple: true,
|
|
73
|
+
hasLabel: !!label,
|
|
74
|
+
}) }, selectedOptions === null || selectedOptions === void 0 ? void 0 :
|
|
71
75
|
selectedOptions.map(function (option, index) {
|
|
72
76
|
var label = (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(option)) || '';
|
|
73
77
|
var key = getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option);
|
package/__inner__/esm/components/AutocompleteNext/components/AutocompleteInput/components/types.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import type { InputProps } from '../../../../Input';
|
|
|
3
3
|
import type { AutocompleteDefaultOption, AutocompletePropGetOptionDisabled, AutocompletePropGetOptionKey, AutocompletePropGetOptionLabel, AutocompletePropRenderMoreTag, AutocompletePropRenderTag, AutocompletePropValue } from '../../../index';
|
|
4
4
|
import type { AutocompleteDropdownOnChange } from '../../index';
|
|
5
5
|
export type AutocompleteInputMultipleRef = HTMLInputElement;
|
|
6
|
-
export type AutocompleteInputMultipleProps<OPTION = AutocompleteDefaultOption> = Pick<InputProps, 'size' | 'value' | 'placeholder'> & {
|
|
6
|
+
export type AutocompleteInputMultipleProps<OPTION = AutocompleteDefaultOption> = Pick<InputProps, 'size' | 'value' | 'placeholder' | 'label'> & {
|
|
7
7
|
getOptionLabel?: AutocompletePropGetOptionLabel<OPTION>;
|
|
8
8
|
getOptionKey?: AutocompletePropGetOptionKey<OPTION>;
|
|
9
9
|
getOptionDisabled?: AutocompletePropGetOptionDisabled<OPTION>;
|
|
@@ -4,7 +4,7 @@ import type { AutocompleteDefaultOption, AutocompletePropGetOptionKey, Autocompl
|
|
|
4
4
|
import type { AutocompleteDropdownOnChange } from '../AutocompleteDropdown';
|
|
5
5
|
import type { AutocompleteRenderRightProps } from '../AutocompleteRenderRight';
|
|
6
6
|
export type AutocompleteInputRef = InputRef;
|
|
7
|
-
export type AutocompleteInputProps<OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false> = Pick<InputProps, 'size' | 'value' | 'disabled' | 'required' | 'onChange' | 'fullWidth' | 'onKeyDown' | 'className' | 'bodyProps' | 'inputProps' | 'renderRight' | 'placeholder'> & Pick<AutocompleteRenderRightProps, 'onOpen' | 'onClear'> & {
|
|
7
|
+
export type AutocompleteInputProps<OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false> = Pick<InputProps, 'size' | 'value' | 'disabled' | 'required' | 'onChange' | 'fullWidth' | 'onKeyDown' | 'className' | 'bodyProps' | 'inputProps' | 'renderRight' | 'placeholder' | 'label'> & Pick<AutocompleteRenderRightProps, 'onOpen' | 'onClear'> & {
|
|
8
8
|
open?: boolean;
|
|
9
9
|
openText?: string;
|
|
10
10
|
closeText?: string;
|
|
@@ -2,6 +2,7 @@ import './Link.css';
|
|
|
2
2
|
import type { ElementType } from 'react';
|
|
3
3
|
import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
|
|
4
4
|
import { type TypographyBaseProps } from '../Typography';
|
|
5
|
+
export declare const cnLink: import("@bem-react/classname").ClassNameFormatter;
|
|
5
6
|
export type LinkBaseProps = Pick<TypographyBaseProps, 'variant' | 'display' | 'defaultMargin' | 'children' | 'noWrap' | 'align'>;
|
|
6
7
|
export type LinkProps<As extends ElementType = 'a'> = PolymorphicComponentPropsWithoutRef<LinkBaseProps, As>;
|
|
7
8
|
export declare const Link: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<LinkBaseProps, "a">;
|
|
@@ -6,7 +6,7 @@ import { useThemeProps } from '../../hooks/useThemeProps';
|
|
|
6
6
|
import { cn } from '../../utils/classname';
|
|
7
7
|
import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
|
|
8
8
|
import { cnTypography } from '../Typography';
|
|
9
|
-
var cnLink = cn('Link');
|
|
9
|
+
export var cnLink = cn('Link');
|
|
10
10
|
export var Link = polymorphicComponentWithRef(function (inProps, ref) {
|
|
11
11
|
var props = useThemeProps({
|
|
12
12
|
props: inProps,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ozen-ui/kit",
|
|
3
|
-
"version": "0.58.
|
|
3
|
+
"version": "0.58.3",
|
|
4
4
|
"description": "React component library",
|
|
5
5
|
"files": [
|
|
6
6
|
"*"
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
"react-popper": "^2.3.0",
|
|
28
28
|
"react-transition-group": "^4.4.5",
|
|
29
29
|
"tslib": "^2.6.3",
|
|
30
|
-
"@ozen-ui/fonts": "0.58.
|
|
31
|
-
"@ozen-ui/
|
|
32
|
-
"@ozen-ui/
|
|
30
|
+
"@ozen-ui/fonts": "0.58.3",
|
|
31
|
+
"@ozen-ui/icons": "0.58.3",
|
|
32
|
+
"@ozen-ui/logger": "0.58.3"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": ">=17.0.2 <19.0.0",
|