@hh.ru/magritte-ui-chips-input 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/ChipsInput.js +1 -1
  2. package/UncontrolledChipsInput.d.ts +2 -0
  3. package/UncontrolledChipsInput.js +27 -0
  4. package/UncontrolledChipsInput.js.map +1 -0
  5. package/index.css +26 -26
  6. package/index.d.ts +1 -0
  7. package/index.js +1 -0
  8. package/index.js.map +1 -1
  9. package/package.json +2 -2
  10. package/types.d.ts +1 -0
package/ChipsInput.js CHANGED
@@ -9,7 +9,7 @@ import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
9
9
  import { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
10
10
  import { useFocus } from '@hh.ru/magritte-ui-input/useFocus';
11
11
 
12
- var styles = {"root":"magritte-root___1YkGM_1-1-0","focused":"magritte-focused___dy9eY_1-1-0","invalid":"magritte-invalid___RJHLG_1-1-0","disabled":"magritte-disabled___hD00s_1-1-0","field":"magritte-field___IMwTW_1-1-0","focus-visible":"magritte-focus-visible___wdNv6_1-1-0","focusVisible":"magritte-focus-visible___wdNv6_1-1-0","large":"magritte-large___OjLba_1-1-0","icon":"magritte-icon___7eYOG_1-1-0","medium":"magritte-medium___SSyhM_1-1-0","scrollable-area":"magritte-scrollable-area___7XKlY_1-1-0","scrollableArea":"magritte-scrollable-area___7XKlY_1-1-0","chips-and-input":"magritte-chips-and-input___wx6To_1-1-0","chipsAndInput":"magritte-chips-and-input___wx6To_1-1-0","icon_expanded":"magritte-icon_expanded___PtihN_1-1-0","iconExpanded":"magritte-icon_expanded___PtihN_1-1-0"};
12
+ var styles = {"root":"magritte-root___1YkGM_1-2-0","focused":"magritte-focused___dy9eY_1-2-0","invalid":"magritte-invalid___RJHLG_1-2-0","disabled":"magritte-disabled___hD00s_1-2-0","field":"magritte-field___IMwTW_1-2-0","focus-visible":"magritte-focus-visible___wdNv6_1-2-0","focusVisible":"magritte-focus-visible___wdNv6_1-2-0","large":"magritte-large___OjLba_1-2-0","icon":"magritte-icon___7eYOG_1-2-0","medium":"magritte-medium___SSyhM_1-2-0","scrollable-area":"magritte-scrollable-area___7XKlY_1-2-0","scrollableArea":"magritte-scrollable-area___7XKlY_1-2-0","chips-and-input":"magritte-chips-and-input___wx6To_1-2-0","chipsAndInput":"magritte-chips-and-input___wx6To_1-2-0","icon_expanded":"magritte-icon_expanded___PtihN_1-2-0","iconExpanded":"magritte-icon_expanded___PtihN_1-2-0"};
13
13
 
14
14
  const focusOnLastChip = (event, chipsContainer, input) => {
15
15
  if (!chipsContainer || !input) {
package/UncontrolledChipsInput.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { InputHTMLAttributes } from 'react';
2
+ export declare const UncontrolledChipsInput: import("react").ForwardRefExoticComponent<Partial<import("@hh.ru/magritte-ui-chips-input/types").ChipsInputProps> & Omit<InputHTMLAttributes<HTMLInputElement>, keyof import("@hh.ru/magritte-ui-chips-input/types").ChipsInputProps> & import("react").RefAttributes<HTMLInputElement>>;
package/UncontrolledChipsInput.js ADDED
@@ -0,0 +1,27 @@
1
+ import './index.css';
2
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
+ import { forwardRef, useState } from 'react';
4
+ import { ChipsInput } from './ChipsInput.js';
5
+ import 'classnames';
6
+ import '@hh.ru/magritte-common-keyboard';
7
+ import '@hh.ru/magritte-common-use-multiple-refs';
8
+ import '@hh.ru/magritte-ui-chips';
9
+ import '@hh.ru/magritte-ui-form-helper';
10
+ import '@hh.ru/magritte-ui-icon/icon';
11
+ import '@hh.ru/magritte-ui-input/useFocus';
12
+
13
+ const DEFAULT_STATE = {
14
+ value: '',
15
+ chips: [],
16
+ };
17
+ const UncontrolledChipsInput = forwardRef(({ state: defaultState = DEFAULT_STATE, onChange, name, ...restProps }, ref) => {
18
+ const [state, setState] = useState({ ...defaultState });
19
+ return (jsxs(Fragment, { children: [jsx(ChipsInput, { ...restProps, state: state, onChange: (newState) => {
20
+ setState(newState);
21
+ onChange?.(newState);
22
+ }, ref: ref }), state.chips.map((value) => (jsx("input", { type: "hidden", name: name, value: value }, value)))] }));
23
+ });
24
+ UncontrolledChipsInput.displayName = 'UncontrolledChipsInput';
25
+
26
+ export { UncontrolledChipsInput };
27
+ //# sourceMappingURL=UncontrolledChipsInput.js.map
package/UncontrolledChipsInput.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"UncontrolledChipsInput.js","sources":["../src/UncontrolledChipsInput.tsx"],"sourcesContent":["import { forwardRef, InputHTMLAttributes, useState } from 'react';\n\nimport { ChipsInput } from '@hh.ru/magritte-ui-chips-input/ChipsInput';\nimport { UncontrolledChipsInputProps, ChipsInputState } from '@hh.ru/magritte-ui-chips-input/types';\n\nconst DEFAULT_STATE = {\n value: '',\n chips: [],\n};\n\nexport const UncontrolledChipsInput = forwardRef<\n HTMLInputElement,\n UncontrolledChipsInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof UncontrolledChipsInputProps>\n>(({ state: defaultState = DEFAULT_STATE, onChange, name, ...restProps }, ref) => {\n const [state, setState] = useState<ChipsInputState>({ ...defaultState });\n return (\n <>\n <ChipsInput\n {...restProps}\n state={state}\n onChange={(newState) => {\n setState(newState);\n onChange?.(newState);\n }}\n ref={ref}\n />\n {state.chips.map((value) => (\n <input type=\"hidden\" name={name} value={value} key={value} />\n ))}\n </>\n );\n});\n\nUncontrolledChipsInput.displayName = 'UncontrolledChipsInput';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;AAKA,MAAM,aAAa,GAAG;AAClB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,KAAK,EAAE,EAAE;CACZ,CAAC;AAEW,MAAA,sBAAsB,GAAG,UAAU,CAG9C,CAAC,EAAE,KAAK,EAAE,YAAY,GAAG,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,KAAI;AAC7E,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAkB,EAAE,GAAG,YAAY,EAAE,CAAC,CAAC;AACzE,IAAA,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,UAAU,EAAA,EAAA,GACH,SAAS,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,QAAQ,KAAI;oBACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACnB,oBAAA,QAAQ,GAAG,QAAQ,CAAC,CAAC;AACzB,iBAAC,EACD,GAAG,EAAE,GAAG,EAAA,CACV,EACD,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,MACnBA,GAAO,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAAO,KAAK,CAAI,CAChE,CAAC,CAAA,EAAA,CACH,EACL;AACN,CAAC,EAAE;AAEH,sBAAsB,CAAC,WAAW,GAAG,wBAAwB;;;;"}
package/index.css CHANGED
@@ -69,7 +69,7 @@
69
69
  --magritte-color-component-input-chips-background-state-neutral-disable-v19-0-0:#1B1B1B;
70
70
  --magritte-color-component-input-chips-text-state-neutral-disable-v19-0-0:#474747;
71
71
  }
72
- .magritte-root___1YkGM_1-1-0{
72
+ .magritte-root___1YkGM_1-2-0{
73
73
  display:inline-flex;
74
74
  position:relative;
75
75
  width:100%;
@@ -84,88 +84,88 @@
84
84
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-content-v19-0-0);
85
85
  }
86
86
  @media (min-width: 1020px){
87
- body.magritte-old-layout .magritte-root___1YkGM_1-1-0:not(.magritte-focused___dy9eY_1-1-0):not(.magritte-invalid___RJHLG_1-1-0):not(.magritte-disabled___hD00s_1-1-0):hover{
87
+ body.magritte-old-layout .magritte-root___1YkGM_1-2-0:not(.magritte-focused___dy9eY_1-2-0):not(.magritte-invalid___RJHLG_1-2-0):not(.magritte-disabled___hD00s_1-2-0):hover{
88
88
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v19-0-0);
89
89
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v19-0-0);
90
90
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v19-0-0);
91
91
  }
92
- body.magritte-old-layout .magritte-root___1YkGM_1-1-0:not(.magritte-focused___dy9eY_1-1-0):not(.magritte-invalid___RJHLG_1-1-0):not(.magritte-disabled___hD00s_1-1-0):hover .magritte-field___IMwTW_1-1-0::placeholder{
92
+ body.magritte-old-layout .magritte-root___1YkGM_1-2-0:not(.magritte-focused___dy9eY_1-2-0):not(.magritte-invalid___RJHLG_1-2-0):not(.magritte-disabled___hD00s_1-2-0):hover .magritte-field___IMwTW_1-2-0::placeholder{
93
93
  color:var(--magritte-color-component-input-text-state-placeholder-hovered-v19-0-0);
94
94
  }
95
95
  }
96
96
  @media (min-width: 1024px){
97
- body:not(.magritte-old-layout) .magritte-root___1YkGM_1-1-0:not(.magritte-focused___dy9eY_1-1-0):not(.magritte-invalid___RJHLG_1-1-0):not(.magritte-disabled___hD00s_1-1-0):hover{
97
+ body:not(.magritte-old-layout) .magritte-root___1YkGM_1-2-0:not(.magritte-focused___dy9eY_1-2-0):not(.magritte-invalid___RJHLG_1-2-0):not(.magritte-disabled___hD00s_1-2-0):hover{
98
98
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v19-0-0);
99
99
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v19-0-0);
100
100
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v19-0-0);
101
101
  }
102
- body:not(.magritte-old-layout) .magritte-root___1YkGM_1-1-0:not(.magritte-focused___dy9eY_1-1-0):not(.magritte-invalid___RJHLG_1-1-0):not(.magritte-disabled___hD00s_1-1-0):hover .magritte-field___IMwTW_1-1-0::placeholder{
102
+ body:not(.magritte-old-layout) .magritte-root___1YkGM_1-2-0:not(.magritte-focused___dy9eY_1-2-0):not(.magritte-invalid___RJHLG_1-2-0):not(.magritte-disabled___hD00s_1-2-0):hover .magritte-field___IMwTW_1-2-0::placeholder{
103
103
  color:var(--magritte-color-component-input-text-state-placeholder-hovered-v19-0-0);
104
104
  }
105
105
  }
106
- .magritte-root___1YkGM_1-1-0:not(.magritte-disabled___hD00s_1-1-0){
106
+ .magritte-root___1YkGM_1-2-0:not(.magritte-disabled___hD00s_1-2-0){
107
107
  cursor:text;
108
108
  }
109
- .magritte-root___1YkGM_1-1-0.magritte-focused___dy9eY_1-1-0{
109
+ .magritte-root___1YkGM_1-2-0.magritte-focused___dy9eY_1-2-0{
110
110
  background-color:var(--magritte-color-component-input-background-state-field-focused-v19-0-0);
111
111
  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v19-0-0);
112
112
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-focused-v19-0-0);
113
113
  }
114
- .magritte-root___1YkGM_1-1-0.magritte-focused___dy9eY_1-1-0 .magritte-field___IMwTW_1-1-0::placeholder{
114
+ .magritte-root___1YkGM_1-2-0.magritte-focused___dy9eY_1-2-0 .magritte-field___IMwTW_1-2-0::placeholder{
115
115
  color:var(--magritte-color-component-input-text-state-placeholder-focused-v19-0-0);
116
116
  }
117
- .magritte-root___1YkGM_1-1-0.magritte-invalid___RJHLG_1-1-0{
117
+ .magritte-root___1YkGM_1-2-0.magritte-invalid___RJHLG_1-2-0{
118
118
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v19-0-0);
119
119
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v19-0-0);
120
120
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v19-0-0);
121
121
  }
122
- .magritte-root___1YkGM_1-1-0.magritte-invalid___RJHLG_1-1-0 .magritte-field___IMwTW_1-1-0::placeholder{
122
+ .magritte-root___1YkGM_1-2-0.magritte-invalid___RJHLG_1-2-0 .magritte-field___IMwTW_1-2-0::placeholder{
123
123
  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v19-0-0);
124
124
  }
125
- .magritte-root___1YkGM_1-1-0.magritte-disabled___hD00s_1-1-0{
125
+ .magritte-root___1YkGM_1-2-0.magritte-disabled___hD00s_1-2-0{
126
126
  background-color:var(--magritte-color-component-input-background-state-field-disabled-v19-0-0);
127
127
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v19-0-0);
128
128
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-disabled-v19-0-0);
129
129
  --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v19-0-0);
130
130
  --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v19-0-0);
131
131
  }
132
- .magritte-root___1YkGM_1-1-0.magritte-disabled___hD00s_1-1-0 .magritte-field___IMwTW_1-1-0::placeholder{
132
+ .magritte-root___1YkGM_1-2-0.magritte-disabled___hD00s_1-2-0 .magritte-field___IMwTW_1-2-0::placeholder{
133
133
  color:var(--magritte-color-component-input-text-state-placeholder-disabled-v19-0-0);
134
134
  }
135
- .magritte-root___1YkGM_1-1-0.magritte-focus-visible___wdNv6_1-1-0{
135
+ .magritte-root___1YkGM_1-2-0.magritte-focus-visible___wdNv6_1-2-0{
136
136
  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v19-0-0) solid 4px;
137
137
  }
138
- .magritte-root___1YkGM_1-1-0.magritte-focus-visible___wdNv6_1-1-0.magritte-invalid___RJHLG_1-1-0{
138
+ .magritte-root___1YkGM_1-2-0.magritte-focus-visible___wdNv6_1-2-0.magritte-invalid___RJHLG_1-2-0{
139
139
  outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v19-0-0);
140
140
  }
141
- .magritte-large___OjLba_1-1-0{
141
+ .magritte-large___OjLba_1-2-0{
142
142
  padding:var(--magritte-static-space-300-v19-0-0);
143
143
  }
144
- .magritte-large___OjLba_1-1-0 .magritte-field___IMwTW_1-1-0{
144
+ .magritte-large___OjLba_1-2-0 .magritte-field___IMwTW_1-2-0{
145
145
  padding-left:var(--magritte-static-space-100-v19-0-0);
146
146
  }
147
- .magritte-large___OjLba_1-1-0 .magritte-icon___7eYOG_1-1-0{
147
+ .magritte-large___OjLba_1-2-0 .magritte-icon___7eYOG_1-2-0{
148
148
  top:var(--magritte-static-space-300-v19-0-0);
149
149
  right:var(--magritte-static-space-400-v19-0-0);
150
150
  }
151
- .magritte-medium___SSyhM_1-1-0{
151
+ .magritte-medium___SSyhM_1-2-0{
152
152
  padding:var(--magritte-static-space-200-v19-0-0);
153
153
  }
154
- .magritte-medium___SSyhM_1-1-0 .magritte-field___IMwTW_1-1-0{
154
+ .magritte-medium___SSyhM_1-2-0 .magritte-field___IMwTW_1-2-0{
155
155
  padding-left:var(--magritte-static-space-100-v19-0-0);
156
156
  }
157
- .magritte-medium___SSyhM_1-1-0 .magritte-icon___7eYOG_1-1-0{
157
+ .magritte-medium___SSyhM_1-2-0 .magritte-icon___7eYOG_1-2-0{
158
158
  top:var(--magritte-static-space-200-v19-0-0);
159
159
  right:var(--magritte-static-space-300-v19-0-0);
160
160
  }
161
- .magritte-scrollable-area___7XKlY_1-1-0{
161
+ .magritte-scrollable-area___7XKlY_1-2-0{
162
162
  display:flex;
163
163
  align-items:flex-start;
164
164
  overflow-y:auto;
165
165
  width:100%;
166
166
  padding-right:24px;
167
167
  }
168
- .magritte-chips-and-input___wx6To_1-1-0{
168
+ .magritte-chips-and-input___wx6To_1-2-0{
169
169
  display:flex;
170
170
  gap:6px;
171
171
  flex-wrap:wrap;
@@ -173,7 +173,7 @@
173
173
  width:100%;
174
174
  margin-right:var(--magritte-static-space-300-v19-0-0);
175
175
  }
176
- .magritte-field___IMwTW_1-1-0{
176
+ .magritte-field___IMwTW_1-2-0{
177
177
  border:0;
178
178
  background:none;
179
179
  flex-grow:1;
@@ -189,10 +189,10 @@
189
189
  text-transform:var(--magritte-typography-label-2-regular-text-transform-v19-0-0);
190
190
  text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v19-0-0);
191
191
  }
192
- .magritte-field___IMwTW_1-1-0::placeholder{
192
+ .magritte-field___IMwTW_1-2-0::placeholder{
193
193
  color:var(--magritte-color-component-input-text-placeholder-v19-0-0);
194
194
  }
195
- .magritte-icon___7eYOG_1-1-0{
195
+ .magritte-icon___7eYOG_1-2-0{
196
196
  display:inline-flex;
197
197
  margin-left:auto;
198
198
  padding:var(--magritte-static-space-100-v19-0-0) 0;
@@ -201,7 +201,7 @@
201
201
  transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v19-0-0);
202
202
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v19-0-0);
203
203
  }
204
- .magritte-icon_expanded___PtihN_1-1-0{
204
+ .magritte-icon_expanded___PtihN_1-2-0{
205
205
  transform:rotate(-180deg);
206
206
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v19-0-0);
207
207
  }
package/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from '@hh.ru/magritte-ui-chips-input/ChipsInput';
2
+ export * from '@hh.ru/magritte-ui-chips-input/UncontrolledChipsInput';
2
3
  export * from '@hh.ru/magritte-ui-chips-input/types';
package/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import './index.css';
2
2
  export { ChipsInput } from './ChipsInput.js';
3
+ export { UncontrolledChipsInput } from './UncontrolledChipsInput.js';
3
4
  import 'react/jsx-runtime';
4
5
  import 'react';
5
6
  import 'classnames';
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-chips-input",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -34,5 +34,5 @@
34
34
  "@hh.ru/magritte-ui-icon": "7.8.1",
35
35
  "@hh.ru/magritte-ui-input": "6.0.13"
36
36
  },
37
- "gitHead": "bf7f56dd64799c73041f10f1ddc88dd5658faa86"
37
+ "gitHead": "19c54c47476d820fb2cec0d4ebdbb254c52dd8e6"
38
38
  }
package/types.d.ts CHANGED
@@ -36,3 +36,4 @@ export interface ChipsInputProps {
36
36
  /** ref root контейнера */
37
37
  wrapperRef?: ForwardedRef<HTMLElement>;
38
38
  }
39
+ export type UncontrolledChipsInputProps = Partial<ChipsInputProps>;