@ozen-ui/kit 0.58.0 → 0.58.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/__inner__/cjs/components/AutocompleteNext/Autocomplete.css +4 -4
- 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/Grid/Grid.css +0 -2
- 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/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/Grid/Grid.css +0 -2
- 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,14 +105,14 @@
|
|
|
105
105
|
color: var(--textfield-color);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
.AutocompleteNext-Input_multiple input::placeholder {
|
|
109
|
-
opacity: 0;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
108
|
.AutocompleteNext-Input_multiple * + input::placeholder, .AutocompleteNext-Input_multiple input:focus::placeholder {
|
|
113
109
|
opacity: 1;
|
|
114
110
|
}
|
|
115
111
|
|
|
112
|
+
.AutocompleteNext-Input_multiple.AutocompleteNext-InputhasLabel input::placeholder {
|
|
113
|
+
opacity: 0;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
116
|
.AutocompleteNext-Input_responsive {
|
|
117
117
|
flex-wrap: nowrap;
|
|
118
118
|
gap: unset;
|
|
@@ -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;
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
/* l >= 1280px */
|
|
5
5
|
.Grid {
|
|
6
6
|
display: grid;
|
|
7
|
-
min-block-size: 0;
|
|
8
7
|
min-inline-size: 0;
|
|
9
8
|
}
|
|
10
9
|
.Grid_cols_1 {
|
|
@@ -804,7 +803,6 @@
|
|
|
804
803
|
--grid-row-start: auto;
|
|
805
804
|
--grid-row-end: auto;
|
|
806
805
|
min-inline-size: 0;
|
|
807
|
-
overflow: hidden;
|
|
808
806
|
grid-column: var(--grid-col-start) / var(--grid-col-end);
|
|
809
807
|
grid-row: var(--grid-row-start) / var(--grid-row-end);
|
|
810
808
|
}
|
|
@@ -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,14 +105,14 @@
|
|
|
105
105
|
color: var(--textfield-color);
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
.AutocompleteNext-Input_multiple input::placeholder {
|
|
109
|
-
opacity: 0;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
108
|
.AutocompleteNext-Input_multiple * + input::placeholder, .AutocompleteNext-Input_multiple input:focus::placeholder {
|
|
113
109
|
opacity: 1;
|
|
114
110
|
}
|
|
115
111
|
|
|
112
|
+
.AutocompleteNext-Input_multiple.AutocompleteNext-InputhasLabel input::placeholder {
|
|
113
|
+
opacity: 0;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
116
|
.AutocompleteNext-Input_responsive {
|
|
117
117
|
flex-wrap: nowrap;
|
|
118
118
|
gap: unset;
|
|
@@ -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;
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
/* l >= 1280px */
|
|
5
5
|
.Grid {
|
|
6
6
|
display: grid;
|
|
7
|
-
min-block-size: 0;
|
|
8
7
|
min-inline-size: 0;
|
|
9
8
|
}
|
|
10
9
|
.Grid_cols_1 {
|
|
@@ -804,7 +803,6 @@
|
|
|
804
803
|
--grid-row-start: auto;
|
|
805
804
|
--grid-row-end: auto;
|
|
806
805
|
min-inline-size: 0;
|
|
807
|
-
overflow: hidden;
|
|
808
806
|
grid-column: var(--grid-col-start) / var(--grid-col-end);
|
|
809
807
|
grid-row: var(--grid-row-start) / var(--grid-row-end);
|
|
810
808
|
}
|
|
@@ -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.2",
|
|
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/icons": "0.58.
|
|
32
|
-
"@ozen-ui/logger": "0.58.
|
|
30
|
+
"@ozen-ui/fonts": "0.58.2",
|
|
31
|
+
"@ozen-ui/icons": "0.58.2",
|
|
32
|
+
"@ozen-ui/logger": "0.58.2"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": ">=17.0.2 <19.0.0",
|