@salutejs/plasma-new-hope 0.141.2-canary.1412.10789995138.0 → 0.141.2-canary.1429.10810544899.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Autocomplete/Autocomplete.css +16 -15
- package/cjs/components/Combobox/ComboboxNew/Combobox.css +16 -15
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.css +16 -15
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +16 -15
- package/cjs/components/DatePicker/RangeDate/RangeDate.css +16 -15
- package/cjs/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +16 -15
- package/cjs/components/DatePicker/SingleDate/SingleDate.css +16 -15
- package/cjs/components/Drawer/Drawer.css +3 -4
- package/cjs/components/Drawer/Drawer.js +1 -1
- package/cjs/components/Drawer/hooks/useDrawer.js +1 -1
- package/cjs/components/Modal/Modal.css +3 -4
- package/cjs/components/Modal/hooks/useModal.js +1 -1
- package/cjs/components/Notification/NotificationsProvider.css +3 -4
- package/cjs/components/Popup/Popup.css +3 -4
- package/cjs/components/Popup/Popup.js +38 -159
- package/cjs/components/Popup/Popup.js.map +1 -1
- package/cjs/components/Popup/Popup.styles.js +9 -21
- package/cjs/components/Popup/Popup.styles.js.map +1 -1
- package/cjs/components/Popup/Popup.styles_141jyqa.css +3 -0
- package/cjs/components/Popup/PopupContext.js +0 -3
- package/cjs/components/Popup/PopupContext.js.map +1 -1
- package/cjs/components/Popup/hooks/usePopup.js +1 -1
- package/cjs/components/Popup/hooks/usePopup.js.map +1 -1
- package/cjs/components/Range/Range.css +16 -15
- package/cjs/components/Slider/Slider.css +16 -15
- package/cjs/components/Slider/components/Double/Double.css +16 -15
- package/cjs/components/TextField/TextField.js +1 -1
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/TextField/TextField.styles.js +22 -11
- package/cjs/components/TextField/TextField.styles.js.map +1 -1
- package/{es/components/TextField/TextField.styles_u6pm7v.css → cjs/components/TextField/TextField.styles_ht6ibd.css} +5 -4
- package/cjs/components/TextField/TextField.tokens.js +5 -1
- package/cjs/components/TextField/TextField.tokens.js.map +1 -1
- package/cjs/components/TextField/variations/_label-placement/base.js +1 -1
- package/{es/components/TextField/variations/_label-placement/base_1dbnupp.css → cjs/components/TextField/variations/_label-placement/base_6k17xp.css} +1 -1
- package/cjs/components/TextField/variations/_read-only/base.js +1 -1
- package/{es/components/TextField/variations/_read-only/base_4tqave.css → cjs/components/TextField/variations/_read-only/base_8onybn.css} +1 -1
- package/cjs/components/TextField/variations/_size/base.js +1 -1
- package/cjs/components/TextField/variations/_size/{base_uk56yo.css → base_1h8l0kj.css} +1 -1
- package/cjs/components/TextField/variations/_view/base.js +1 -1
- package/cjs/components/TextField/variations/_view/{base_uszjx8.css → base_1ph5cr0.css} +1 -1
- package/cjs/index.css +19 -19
- package/emotion/cjs/components/Popup/Popup.js +38 -160
- package/emotion/cjs/components/Popup/Popup.styles.js +5 -25
- package/emotion/cjs/components/Popup/PopupContext.js +0 -3
- package/emotion/cjs/components/Popup/hooks/usePopup.js +1 -1
- package/emotion/cjs/components/TextField/TextField.js +2 -2
- package/emotion/cjs/components/TextField/TextField.styles.js +27 -23
- package/emotion/cjs/components/TextField/TextField.template-doc.mdx +2 -2
- package/emotion/cjs/components/TextField/TextField.tokens.js +5 -1
- package/emotion/cjs/components/TextFieldGroup/TextFieldGroup.template-doc.mdx +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Popup/Popup.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +12 -12
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +3 -2
- package/emotion/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_web/components/Popup/Popup.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.config.js +12 -12
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +2 -1
- package/emotion/es/components/Popup/Popup.js +39 -160
- package/emotion/es/components/Popup/Popup.styles.js +4 -24
- package/emotion/es/components/Popup/PopupContext.js +0 -3
- package/emotion/es/components/Popup/hooks/usePopup.js +1 -1
- package/emotion/es/components/TextField/TextField.js +2 -2
- package/emotion/es/components/TextField/TextField.styles.js +27 -23
- package/emotion/es/components/TextField/TextField.template-doc.mdx +2 -2
- package/emotion/es/components/TextField/TextField.tokens.js +5 -1
- package/emotion/es/components/TextFieldGroup/TextFieldGroup.template-doc.mdx +1 -1
- package/emotion/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -1
- package/emotion/es/examples/plasma_b2c/components/Popup/Popup.stories.tsx +1 -1
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.config.js +12 -12
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +3 -2
- package/emotion/es/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -1
- package/emotion/es/examples/plasma_web/components/Popup/Popup.stories.tsx +1 -1
- package/emotion/es/examples/plasma_web/components/TextField/TextField.config.js +12 -12
- package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +2 -1
- package/es/components/Autocomplete/Autocomplete.css +16 -15
- package/es/components/Combobox/ComboboxNew/Combobox.css +16 -15
- package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.css +16 -15
- package/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.css +16 -15
- package/es/components/DatePicker/RangeDate/RangeDate.css +16 -15
- package/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.css +16 -15
- package/es/components/DatePicker/SingleDate/SingleDate.css +16 -15
- package/es/components/Drawer/Drawer.css +3 -4
- package/es/components/Drawer/Drawer.js +1 -1
- package/es/components/Drawer/hooks/useDrawer.js +1 -1
- package/es/components/Modal/Modal.css +3 -4
- package/es/components/Modal/hooks/useModal.js +1 -1
- package/es/components/Notification/NotificationsProvider.css +3 -4
- package/es/components/Popup/Popup.css +3 -4
- package/es/components/Popup/Popup.js +40 -161
- package/es/components/Popup/Popup.js.map +1 -1
- package/es/components/Popup/Popup.styles.js +10 -20
- package/es/components/Popup/Popup.styles.js.map +1 -1
- package/es/components/Popup/Popup.styles_141jyqa.css +3 -0
- package/es/components/Popup/PopupContext.js +0 -3
- package/es/components/Popup/PopupContext.js.map +1 -1
- package/es/components/Popup/hooks/usePopup.js +1 -1
- package/es/components/Popup/hooks/usePopup.js.map +1 -1
- package/es/components/Range/Range.css +16 -15
- package/es/components/Slider/Slider.css +16 -15
- package/es/components/Slider/components/Double/Double.css +16 -15
- package/es/components/TextField/TextField.js +1 -1
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/TextField/TextField.styles.js +22 -11
- package/es/components/TextField/TextField.styles.js.map +1 -1
- package/{cjs/components/TextField/TextField.styles_u6pm7v.css → es/components/TextField/TextField.styles_ht6ibd.css} +5 -4
- package/es/components/TextField/TextField.tokens.js +5 -1
- package/es/components/TextField/TextField.tokens.js.map +1 -1
- package/es/components/TextField/variations/_label-placement/base.js +1 -1
- package/{cjs/components/TextField/variations/_label-placement/base_1dbnupp.css → es/components/TextField/variations/_label-placement/base_6k17xp.css} +1 -1
- package/es/components/TextField/variations/_read-only/base.js +1 -1
- package/{cjs/components/TextField/variations/_read-only/base_4tqave.css → es/components/TextField/variations/_read-only/base_8onybn.css} +1 -1
- package/es/components/TextField/variations/_size/base.js +1 -1
- package/es/components/TextField/variations/_size/{base_uk56yo.css → base_1h8l0kj.css} +1 -1
- package/es/components/TextField/variations/_view/base.js +1 -1
- package/es/components/TextField/variations/_view/{base_uszjx8.css → base_1ph5cr0.css} +1 -1
- package/es/index.css +19 -19
- package/package.json +3 -3
- package/styled-components/cjs/components/Popup/Popup.js +38 -160
- package/styled-components/cjs/components/Popup/Popup.styles.js +4 -7
- package/styled-components/cjs/components/Popup/PopupContext.js +0 -3
- package/styled-components/cjs/components/Popup/hooks/usePopup.js +1 -1
- package/styled-components/cjs/components/TextField/TextField.js +1 -1
- package/styled-components/cjs/components/TextField/TextField.styles.js +12 -9
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/cjs/components/TextField/TextField.tokens.js +5 -1
- package/styled-components/cjs/components/TextFieldGroup/TextFieldGroup.template-doc.mdx +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Popup/Popup.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +4 -4
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +3 -2
- package/styled-components/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Popup/Popup.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +4 -4
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +2 -1
- package/styled-components/es/components/Popup/Popup.js +39 -160
- package/styled-components/es/components/Popup/Popup.styles.js +3 -6
- package/styled-components/es/components/Popup/PopupContext.js +0 -3
- package/styled-components/es/components/Popup/hooks/usePopup.js +1 -1
- package/styled-components/es/components/TextField/TextField.js +1 -1
- package/styled-components/es/components/TextField/TextField.styles.js +12 -9
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/es/components/TextField/TextField.tokens.js +5 -1
- package/styled-components/es/components/TextFieldGroup/TextFieldGroup.template-doc.mdx +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Popup/Popup.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +4 -4
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +3 -2
- package/styled-components/es/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/Popup/Popup.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +4 -4
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +2 -1
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts +4 -4
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/Target/Target.styles.d.ts +4 -4
- package/types/components/Combobox/ComboboxNew/ui/Target/Target.styles.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts +4 -4
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
- package/types/components/Popup/Popup.d.ts +1 -1
- package/types/components/Popup/Popup.d.ts.map +1 -1
- package/types/components/Popup/Popup.styles.d.ts +0 -1
- package/types/components/Popup/Popup.styles.d.ts.map +1 -1
- package/types/components/Popup/PopupContext.d.ts.map +1 -1
- package/types/components/Range/Range.styles.d.ts +4 -4
- package/types/components/Range/Range.styles.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.styles.d.ts +4 -4
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.styles.d.ts +6 -2
- package/types/components/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.tokens.d.ts +3 -0
- package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
- package/types/components/TextField/TextField.types.d.ts +2 -1
- package/types/components/TextField/TextField.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +4 -4
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.d.ts +4 -4
- package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
- package/cjs/components/Popup/Popup.styles_8h77g1.css +0 -4
- package/es/components/Popup/Popup.styles_8h77g1.css +0 -4
@@ -8,8 +8,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
8
8
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
9
9
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
10
10
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
11
|
-
import React, { forwardRef, useRef } from 'react';
|
12
|
-
import ReactDOM from 'react-dom';
|
11
|
+
import React, { forwardRef, useEffect, useRef, useState } from 'react';
|
13
12
|
import { useForkRef, safeUseId } from '@salutejs/plasma-core';
|
14
13
|
import { cx } from '../../utils';
|
15
14
|
import { Portal } from '../Portal';
|
@@ -17,7 +16,6 @@ import { POPUP_PORTAL_ID } from './PopupContext';
|
|
17
16
|
import { PopupRoot } from './PopupRoot';
|
18
17
|
import { usePopup } from './hooks';
|
19
18
|
import { classes } from './Popup.tokens';
|
20
|
-
import { StyledPortal, StyledPortalContainer } from './Popup.styles';
|
21
19
|
export var handlePosition = function handlePosition(placement, offset) {
|
22
20
|
var x = '0rem';
|
23
21
|
var y = '0rem';
|
@@ -41,8 +39,8 @@ export var handlePosition = function handlePosition(placement, offset) {
|
|
41
39
|
var bottom;
|
42
40
|
var transform;
|
43
41
|
var placements = placement.split('-');
|
44
|
-
placements.forEach(function (
|
45
|
-
switch (
|
42
|
+
placements.forEach(function (placement) {
|
43
|
+
switch (placement) {
|
46
44
|
case 'left':
|
47
45
|
left = x;
|
48
46
|
break;
|
@@ -75,139 +73,9 @@ export var handlePosition = function handlePosition(placement, offset) {
|
|
75
73
|
transform: transform
|
76
74
|
};
|
77
75
|
};
|
78
|
-
/*
|
79
|
-
const getPortalParent = (frame: 'document' | string | React.RefObject<HTMLElement>, portalRef) => {
|
80
|
-
if (typeof frame !== 'string' && frame && frame.current) {
|
81
|
-
portalRef.current = frame.current;
|
82
|
-
return;
|
83
|
-
}
|
84
|
-
|
85
|
-
if (typeof frame === 'string' && frame !== 'document') {
|
86
|
-
const element = document.getElementById(frame);
|
87
|
-
if (element) {
|
88
|
-
const portal = document.createElement('div');
|
89
|
-
portal.className = 'frame-portal';
|
90
|
-
portal.style.position = 'relative';
|
91
|
-
portal.style.width = '0';
|
92
|
-
|
93
|
-
element.appendChild(portal);
|
94
|
-
portalRef.current = portal;
|
95
|
-
|
96
|
-
return;
|
97
|
-
//
|
98
|
-
// const portal = document?.querySelector('.frame-portal');
|
99
|
-
// if (!portal) {
|
100
|
-
// portal = document.createElement('div');
|
101
|
-
// document.getElementById(frame)?.appendChild(portal);
|
102
|
-
// }
|
103
|
-
// return portal;
|
104
|
-
}
|
105
|
-
}
|
106
|
-
|
107
|
-
const portal = document.getElementById(POPUP_PORTAL_ID);
|
108
|
-
|
109
|
-
if (!portal) {
|
110
|
-
ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
111
|
-
}
|
112
|
-
|
113
|
-
portalRef.current = portal;
|
114
|
-
|
115
|
-
let portal;
|
116
|
-
|
117
|
-
const hasFrame = typeof frame !== 'string' && frame && frame.current;
|
118
|
-
if (hasFrame) {
|
119
|
-
portal = frame.current;
|
120
|
-
} else {
|
121
|
-
// ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
122
|
-
|
123
|
-
portal = document.getElementById(POPUP_PORTAL_ID);
|
124
|
-
|
125
|
-
if (!portal) {
|
126
|
-
if (typeof frame === 'string' && frame !== 'document') {
|
127
|
-
portal = document.createElement('div');
|
128
|
-
document.getElementById(frame)?.appendChild(portal);
|
129
|
-
} else {
|
130
|
-
portal.className('frame-portal');
|
131
|
-
document.body.appendChild(portal);
|
132
|
-
// ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
133
|
-
}
|
134
|
-
}
|
135
|
-
}
|
136
|
-
|
137
|
-
};
|
138
|
-
|
139
|
-
const usePortalContainer = (frame: 'document' | string | React.RefObject<HTMLElement>) => {
|
140
|
-
const portalRef = useRef<HTMLDivElement | null>(null);
|
141
|
-
|
142
|
-
if (typeof frame !== 'string' && frame && frame.current) {
|
143
|
-
return frame.current;
|
144
|
-
}
|
145
|
-
|
146
|
-
if (typeof frame === 'string' && frame !== 'document') {
|
147
|
-
const element = document.getElementById(frame);
|
148
|
-
|
149
|
-
const portal = document?.querySelector('.frame-portal');
|
150
|
-
|
151
|
-
if (portal) {
|
152
|
-
return portal;
|
153
|
-
}
|
154
|
-
|
155
|
-
if (element) {
|
156
|
-
const portal = document.createElement('div');
|
157
|
-
portal.className = 'frame-portal';
|
158
|
-
portal.style.position = 'relative';
|
159
|
-
// portal.style.width = '0';
|
160
|
-
|
161
|
-
element.appendChild(portal);
|
162
|
-
return portal;
|
163
|
-
//
|
164
|
-
// const portal = document?.querySelector('.frame-portal');
|
165
|
-
// if (!portal) {
|
166
|
-
// portal = document.createElement('div');
|
167
|
-
// document.getElementById(frame)?.appendChild(portal);
|
168
|
-
// }
|
169
|
-
// return portal;
|
170
|
-
}
|
171
|
-
}
|
172
|
-
|
173
|
-
const portal = document.getElementById(POPUP_PORTAL_ID);
|
174
|
-
|
175
|
-
if (!portal) {
|
176
|
-
const res = ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
177
|
-
|
178
|
-
console.log('!!! res', res);
|
179
|
-
}
|
180
|
-
|
181
|
-
console.log('!!!! portalRef.current', portalRef.current, document.getElementById(POPUP_PORTAL_ID));
|
182
|
-
return portalRef.current;
|
183
|
-
|
184
|
-
let portal;
|
185
|
-
|
186
|
-
const hasFrame = typeof frame !== 'string' && frame && frame.current;
|
187
|
-
if (hasFrame) {
|
188
|
-
portal = frame.current;
|
189
|
-
} else {
|
190
|
-
// ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
191
|
-
|
192
|
-
portal = document.getElementById(POPUP_PORTAL_ID);
|
193
|
-
|
194
|
-
if (!portal) {
|
195
|
-
if (typeof frame === 'string' && frame !== 'document') {
|
196
|
-
portal = document.createElement('div');
|
197
|
-
document.getElementById(frame)?.appendChild(portal);
|
198
|
-
} else {
|
199
|
-
portal.className('frame-portal');
|
200
|
-
document.body.appendChild(portal);
|
201
|
-
// ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
202
|
-
}
|
203
|
-
}
|
204
|
-
}
|
205
|
-
|
206
|
-
};
|
207
|
-
*/
|
208
76
|
|
209
77
|
/**
|
210
|
-
* Базовый
|
78
|
+
* Базовый копмонент Popup.
|
211
79
|
*/
|
212
80
|
export var popupRoot = function popupRoot(Root) {
|
213
81
|
return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
|
@@ -243,16 +111,47 @@ export var popupRoot = function popupRoot(Root) {
|
|
243
111
|
isVisible = _usePopup.isVisible,
|
244
112
|
animationInfo = _usePopup.animationInfo,
|
245
113
|
setVisible = _usePopup.setVisible;
|
246
|
-
|
247
|
-
// const container = usePortalContainer(frame);
|
248
114
|
var portalRef = useRef(null);
|
249
115
|
var contentRef = useRef(null);
|
250
116
|
var innerRef = useForkRef(contentRef, outerRootRef);
|
117
|
+
var _useState = useState(false),
|
118
|
+
_useState2 = _slicedToArray(_useState, 2),
|
119
|
+
forceRender = _useState2[1];
|
120
|
+
useEffect(function () {
|
121
|
+
var portal = document.getElementById(POPUP_PORTAL_ID);
|
122
|
+
if (typeof frame !== 'string' && frame && frame.current) {
|
123
|
+
portal = frame.current;
|
124
|
+
}
|
125
|
+
if (!portal) {
|
126
|
+
portal = document.createElement('div');
|
127
|
+
portal.setAttribute('id', POPUP_PORTAL_ID);
|
128
|
+
/**
|
129
|
+
* Нужно для того, чтобы во фрейме не происходило скачков контента
|
130
|
+
* при анимации через transform, если есть элемент с шириной/высотой в 100% (Overlay)
|
131
|
+
*/
|
132
|
+
portal.style.width = '0';
|
133
|
+
if (typeof frame === 'string' && frame !== 'document') {
|
134
|
+
var _document$getElementB;
|
135
|
+
(_document$getElementB = document.getElementById(frame)) === null || _document$getElementB === void 0 || _document$getElementB.appendChild(portal);
|
136
|
+
} else {
|
137
|
+
document.body.appendChild(portal);
|
138
|
+
}
|
139
|
+
}
|
140
|
+
portalRef.current = portal;
|
141
|
+
|
142
|
+
/**
|
143
|
+
* Изменение стейта нужно для того, чтобы Popup
|
144
|
+
* отобразился после записи DOM элемента в portalRef.current
|
145
|
+
*/
|
146
|
+
forceRender(true);
|
147
|
+
}, []);
|
251
148
|
if (!isVisible && !innerIsOpen) {
|
252
149
|
return null;
|
253
150
|
}
|
254
151
|
var cls = cx(className, animationInfo !== null && animationInfo !== void 0 && animationInfo.endAnimation ? classes.endAnimation : '', animationInfo !== null && animationInfo !== void 0 && animationInfo.endTransition ? classes.endTransition : '');
|
255
|
-
|
152
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, portalRef.current && /*#__PURE__*/React.createElement(Portal, {
|
153
|
+
container: portalRef.current
|
154
|
+
}, /*#__PURE__*/React.createElement(Root, _extends({
|
256
155
|
className: cls
|
257
156
|
}, rest), overlay, /*#__PURE__*/React.createElement(PopupRoot, {
|
258
157
|
id: innerId,
|
@@ -262,27 +161,7 @@ export var popupRoot = function popupRoot(Root) {
|
|
262
161
|
zIndex: zIndex,
|
263
162
|
animationInfo: animationInfo,
|
264
163
|
setVisible: setVisible
|
265
|
-
}, children));
|
266
|
-
if (typeof frame !== 'string' && frame && frame.current) {
|
267
|
-
return /*#__PURE__*/React.createElement(Portal, {
|
268
|
-
container: frame.current
|
269
|
-
}, rootNode);
|
270
|
-
}
|
271
|
-
var withFrameId = typeof frame === 'string' && frame !== 'document';
|
272
|
-
var containerElement = withFrameId && document.getElementById(frame);
|
273
|
-
if (containerElement) {
|
274
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(StyledPortalContainer, {
|
275
|
-
ref: portalRef
|
276
|
-
}, portalRef.current && /*#__PURE__*/React.createElement(Portal, {
|
277
|
-
container: portalRef.current
|
278
|
-
}, rootNode)), containerElement));
|
279
|
-
}
|
280
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(StyledPortal, {
|
281
|
-
id: POPUP_PORTAL_ID,
|
282
|
-
ref: portalRef
|
283
|
-
}, portalRef.current && /*#__PURE__*/React.createElement(Portal, {
|
284
|
-
container: portalRef.current
|
285
|
-
}, rootNode)), document.body));
|
164
|
+
}, children))));
|
286
165
|
});
|
287
166
|
};
|
288
167
|
export var popupConfig = {
|
@@ -2,15 +2,12 @@ import styled from 'styled-components';
|
|
2
2
|
import { DEFAULT_Z_INDEX } from './utils';
|
3
3
|
export var StyledPortal = /*#__PURE__*/styled.div.withConfig({
|
4
4
|
componentId: "plasma-new-hope__sc-rkhnjn-0"
|
5
|
-
})(["
|
6
|
-
export var StyledPortalContainer = /*#__PURE__*/styled.div.withConfig({
|
7
|
-
componentId: "plasma-new-hope__sc-rkhnjn-1"
|
8
|
-
})(["width:0;"]);
|
5
|
+
})([""]);
|
9
6
|
export var PopupView = /*#__PURE__*/styled.div.withConfig({
|
10
|
-
componentId: "plasma-new-hope__sc-rkhnjn-
|
7
|
+
componentId: "plasma-new-hope__sc-rkhnjn-1"
|
11
8
|
})(["position:relative;max-width:100%;pointer-events:all;"]);
|
12
9
|
export var PopupRootContainer = /*#__PURE__*/styled.div.withConfig({
|
13
|
-
componentId: "plasma-new-hope__sc-rkhnjn-
|
10
|
+
componentId: "plasma-new-hope__sc-rkhnjn-2"
|
14
11
|
})(["position:absolute;z-index:", ";left:", ";right:", ";top:", ";bottom:", ";transform:", ";"], function (_ref) {
|
15
12
|
var zIndex = _ref.zIndex;
|
16
13
|
return zIndex || DEFAULT_Z_INDEX;
|
@@ -14,11 +14,9 @@ export var POPUP_PORTAL_ID = 'plasma-popup-root';
|
|
14
14
|
var items = [];
|
15
15
|
var PopupContext = /*#__PURE__*/createContext({
|
16
16
|
items: items,
|
17
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
18
17
|
register: function register(_info) {
|
19
18
|
throw new Error('Function not implemented. Add PopupProvider');
|
20
19
|
},
|
21
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
22
20
|
unregister: function unregister(_id) {
|
23
21
|
throw new Error('Function not implemented. Add PopupProvider');
|
24
22
|
}
|
@@ -29,7 +27,6 @@ export var usePopupContext = function usePopupContext() {
|
|
29
27
|
export var PopupProvider = function PopupProvider(_ref) {
|
30
28
|
var children = _ref.children;
|
31
29
|
var prevBodyOverflowY = useRef(typeof document !== 'undefined' ? document.body.style.overflowY : '');
|
32
|
-
// eslint-disable-next-line no-shadow
|
33
30
|
var _useState = useState([]),
|
34
31
|
_useState2 = _slicedToArray(_useState, 2),
|
35
32
|
items = _useState2[0],
|
@@ -13,7 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
13
|
import { useEffect, useState } from 'react';
|
14
14
|
import { usePopupContext } from '../PopupContext';
|
15
15
|
|
16
|
-
// Хук для
|
16
|
+
// Хук для поключения анимации
|
17
17
|
var usePopupAnimation = function usePopupAnimation() {
|
18
18
|
var _useState = useState(false),
|
19
19
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -183,7 +183,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
|
|
183
183
|
}, required && /*#__PURE__*/React.createElement(StyledIndicator, {
|
184
184
|
className: cx(classes.outerLabelPlacement, requiredPlacementClass)
|
185
185
|
}), innerLabelValue, optionalTextNode), /*#__PURE__*/React.createElement(InputWrapper
|
186
|
-
//
|
186
|
+
// Ref для внутреннего использования. Не отдается наружу.
|
187
187
|
, {
|
188
188
|
ref: rest.inputWrapperRef,
|
189
189
|
className: cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
|
@@ -21,24 +21,27 @@ export var InputPlaceholder = /*#__PURE__*/styled.div.withConfig({
|
|
21
21
|
export var Label = /*#__PURE__*/styled.label.withConfig({
|
22
22
|
componentId: "plasma-new-hope__sc-g4vxbb-6"
|
23
23
|
})(["position:relative;display:inline-flex;"]);
|
24
|
-
|
24
|
+
var StyledContentSlot = /*#__PURE__*/styled.div.withConfig({
|
25
25
|
componentId: "plasma-new-hope__sc-g4vxbb-7"
|
26
|
-
})(["
|
27
|
-
export var
|
26
|
+
})(["color:var(", ");line-height:0;"], tokens.contentSlotColor);
|
27
|
+
export var StyledContentLeft = /*#__PURE__*/styled(StyledContentSlot).withConfig({
|
28
28
|
componentId: "plasma-new-hope__sc-g4vxbb-8"
|
29
|
-
})(["margin:var(", ");
|
30
|
-
export var
|
29
|
+
})(["margin:var(", ");"], tokens.leftContentMargin);
|
30
|
+
export var StyledContentRight = /*#__PURE__*/styled(StyledContentSlot).withConfig({
|
31
31
|
componentId: "plasma-new-hope__sc-g4vxbb-9"
|
32
|
+
})(["margin:var(", ");&:hover{color:var(", ");cursor:pointer;}&:active{color:var(", ");}"], tokens.rightContentMargin, tokens.contentSlotColorHover, tokens.contentSlotColorActive);
|
33
|
+
export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
|
34
|
+
componentId: "plasma-new-hope__sc-g4vxbb-10"
|
32
35
|
})([""]);
|
33
36
|
export var StyledTextBefore = /*#__PURE__*/styled.div.withConfig({
|
34
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
37
|
+
componentId: "plasma-new-hope__sc-g4vxbb-11"
|
35
38
|
})([""]);
|
36
39
|
export var StyledTextAfter = /*#__PURE__*/styled.div.withConfig({
|
37
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
40
|
+
componentId: "plasma-new-hope__sc-g4vxbb-12"
|
38
41
|
})([""]);
|
39
42
|
export var StyledOptionalText = /*#__PURE__*/styled.span.withConfig({
|
40
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
43
|
+
componentId: "plasma-new-hope__sc-g4vxbb-13"
|
41
44
|
})(["color:var(", ");"], tokens.optionalColor);
|
42
45
|
export var StyledIndicator = /*#__PURE__*/styled.div.withConfig({
|
43
|
-
componentId: "plasma-new-hope__sc-g4vxbb-
|
46
|
+
componentId: "plasma-new-hope__sc-g4vxbb-14"
|
44
47
|
})(["position:absolute;border-radius:50%;background-color:var(", ");&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], tokens.indicatorColor, classes.outerLabelPlacement, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, classes.innerLabelPlacement, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);
|
@@ -24,12 +24,12 @@ export function App() {
|
|
24
24
|
<TextField
|
25
25
|
placeholder="Положение иконки"
|
26
26
|
defaultValue="Слева"
|
27
|
-
contentLeft={<IconDownload />}
|
27
|
+
contentLeft={<IconDownload color="inherit" />}
|
28
28
|
/>
|
29
29
|
<TextField
|
30
30
|
placeholder="Положение иконки"
|
31
31
|
defaultValue="Справа"
|
32
|
-
contentRight={<IconDownload />}
|
32
|
+
contentRight={<IconDownload color="inherit" />}
|
33
33
|
/>
|
34
34
|
</div>
|
35
35
|
);
|
@@ -31,7 +31,7 @@ export var tokens = {
|
|
31
31
|
/** Отступ от границы ТextField */
|
32
32
|
padding: '--plasma-textfield-padding',
|
33
33
|
paddingWithChips: '--plasma-textfield-padding-with-chips',
|
34
|
-
/* Токены для
|
34
|
+
/* Токены для input */
|
35
35
|
leftContentMargin: '--plasma-textfield__left-content-margin',
|
36
36
|
rightContentMargin: '--plasma-textfield__right-content-margin',
|
37
37
|
fontFamily: '--plasma-textfield-font-family',
|
@@ -40,6 +40,10 @@ export var tokens = {
|
|
40
40
|
fontWeight: '--plasma-textfield-font-weight',
|
41
41
|
letterSpacing: '--plasma-textfield-letter-spacing',
|
42
42
|
lineHeight: '--plasma-textfield-line-height',
|
43
|
+
/* Tokens for content slot */
|
44
|
+
contentSlotColor: '--plasma-textfield-content-slot-color',
|
45
|
+
contentSlotColorHover: '--plasma-textfield-content-slot-color-hover',
|
46
|
+
contentSlotColorActive: '--plasma-textfield-content-slot-color-active',
|
43
47
|
/** Токены лейбла */
|
44
48
|
labelColor: '--plasma-textfield__label-color',
|
45
49
|
labelColorReadOnly: '--plasma-textfield__label-color-readonly',
|
@@ -34,7 +34,7 @@ export function App() {
|
|
34
34
|
### Размер
|
35
35
|
Размер TextFieldGroup задается с помощью свойства `size`.
|
36
36
|
С помощью свойства `isCommonTextFieldStyles` можно отключить переопределение стилей для всех input внутри группы.
|
37
|
-
Тогда
|
37
|
+
Тогда каждый input будет иметь настраиваемый размер.
|
38
38
|
|
39
39
|
```tsx live
|
40
40
|
import React from 'react';
|
@@ -8,10 +8,10 @@ export var config = {
|
|
8
8
|
},
|
9
9
|
variations: {
|
10
10
|
view: {
|
11
|
-
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
|
12
|
-
positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
|
13
|
-
warning: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
|
14
|
-
negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor)
|
11
|
+
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
|
12
|
+
positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
|
13
|
+
warning: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
|
14
|
+
negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.textBeforeColor, tokens.textAfterColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor)
|
15
15
|
},
|
16
16
|
size: {
|
17
17
|
l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight),
|
@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions';
|
|
4
4
|
import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
|
5
5
|
|
6
6
|
import { WithTheme } from '../../../_helpers';
|
7
|
+
import { IconCross } from '../../../../components/_Icon';
|
7
8
|
|
8
9
|
import { TextField } from './TextField';
|
9
10
|
|
@@ -103,8 +104,8 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: Sto
|
|
103
104
|
{...rest}
|
104
105
|
enumerationType="plain"
|
105
106
|
value={text}
|
106
|
-
contentLeft={enableContentLeft ? <
|
107
|
-
contentRight={enableContentRight ? <
|
107
|
+
contentLeft={enableContentLeft ? <IconCross color="inherit" size={iconSize} /> : undefined}
|
108
|
+
contentRight={enableContentRight ? <IconCross color="inherit" size={iconSize} /> : undefined}
|
108
109
|
view={view}
|
109
110
|
onChange={(e) => {
|
110
111
|
setText(e.target.value);
|
@@ -8,10 +8,10 @@ export var config = {
|
|
8
8
|
},
|
9
9
|
variations: {
|
10
10
|
view: {
|
11
|
-
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
|
12
|
-
positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
|
13
|
-
warning: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
|
14
|
-
negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor)
|
11
|
+
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
|
12
|
+
positive: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
|
13
|
+
warning: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor),
|
14
|
+
negative: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], tokens.color, tokens.backgroundColor, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.contentSlotColor, tokens.contentSlotColorHover, tokens.contentSlotColorActive, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor, tokens.indicatorColor, tokens.optionalColor)
|
15
15
|
},
|
16
16
|
size: {
|
17
17
|
l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.borderWidth, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.indicatorSizeInner, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementInnerRight, tokens.indicatorLabelPlacementOuterRight),
|
@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions';
|
|
4
4
|
import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
|
5
5
|
|
6
6
|
import { WithTheme } from '../../../_helpers';
|
7
|
+
import { IconChevronLeft } from '../../../../components/_Icon';
|
7
8
|
|
8
9
|
import { TextField } from './TextField';
|
9
10
|
|
@@ -185,7 +186,7 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
|
|
185
186
|
{...rest}
|
186
187
|
enumerationType="chip"
|
187
188
|
value={text}
|
188
|
-
contentLeft={enableContentLeft ? <
|
189
|
+
contentLeft={enableContentLeft ? <IconChevronLeft color="inherit" size={iconSize} /> : undefined}
|
189
190
|
contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
|
190
191
|
view={view}
|
191
192
|
onChange={(e) => {
|
@@ -23,7 +23,7 @@ export declare const StyledTextField: import("@linaria/react").StyledMeta & impo
|
|
23
23
|
onChangeChips?: undefined;
|
24
24
|
enumerationType?: "plain" | undefined;
|
25
25
|
onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
|
26
|
-
} & Omit<import("
|
26
|
+
} & Omit<import("../../../../types").InputHTMLAttributes<HTMLInputElement>, "required" | "size"> & import("react").RefAttributes<HTMLInputElement>) | ({
|
27
27
|
size?: string | undefined;
|
28
28
|
view?: string | undefined;
|
29
29
|
readOnly?: boolean | undefined;
|
@@ -47,7 +47,7 @@ export declare const StyledTextField: import("@linaria/react").StyledMeta & impo
|
|
47
47
|
onSearch?: undefined;
|
48
48
|
chips?: import("../../../TextField/TextField.types").TextFieldPrimitiveValue[] | undefined;
|
49
49
|
onChangeChips?: ((value: import("../../../TextField/TextField.types").TextFieldPrimitiveValue[]) => void) | undefined;
|
50
|
-
} & Omit<import("
|
50
|
+
} & Omit<import("../../../../types").InputHTMLAttributes<HTMLInputElement>, "required" | "size"> & import("react").RefAttributes<HTMLInputElement>) | ({
|
51
51
|
size?: string | undefined;
|
52
52
|
view?: string | undefined;
|
53
53
|
readOnly?: boolean | undefined;
|
@@ -71,7 +71,7 @@ export declare const StyledTextField: import("@linaria/react").StyledMeta & impo
|
|
71
71
|
onChangeChips?: undefined;
|
72
72
|
enumerationType?: "plain" | undefined;
|
73
73
|
onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
|
74
|
-
} & Omit<import("
|
74
|
+
} & Omit<import("../../../../types").InputHTMLAttributes<HTMLInputElement>, "required" | "size"> & import("react").RefAttributes<HTMLInputElement>) | ({
|
75
75
|
size?: string | undefined;
|
76
76
|
view?: string | undefined;
|
77
77
|
readOnly?: boolean | undefined;
|
@@ -95,5 +95,5 @@ export declare const StyledTextField: import("@linaria/react").StyledMeta & impo
|
|
95
95
|
onSearch?: undefined;
|
96
96
|
chips?: import("../../../TextField/TextField.types").TextFieldPrimitiveValue[] | undefined;
|
97
97
|
onChangeChips?: ((value: import("../../../TextField/TextField.types").TextFieldPrimitiveValue[]) => void) | undefined;
|
98
|
-
} & Omit<import("
|
98
|
+
} & Omit<import("../../../../types").InputHTMLAttributes<HTMLInputElement>, "required" | "size"> & import("react").RefAttributes<HTMLInputElement>))>;
|
99
99
|
//# sourceMappingURL=TextField.styles.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/ui/TextField/TextField.styles.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
1
|
+
{"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/ui/TextField/TextField.styles.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qJA0D3B,CAAC"}
|